.elementor-311 .elementor-element.elementor-element-d71e9ab{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-8ef856e *//* ============================================
   RAZA HEADER — CSS VALIDADO
   Versión corregida: clases alineadas con el HTML,
   estilos móviles fuera del @media, responsive correcto.
   + FIX: especificidad sobre .elementor img
   ============================================ */

/* --- Reset interno --- */
.raza-header,
.raza-header * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Variables globales --- */
:root {
  --raza-green:       #2e7d32;
  --raza-green-dark:  #1b5e20;
  --raza-green-light: #4caf50;
  --raza-white:       #ffffff;
  --raza-text:        #1a1a1a;
  --raza-shadow:      0 8px 32px rgba(0,0,0,0.13);
  --raza-radius:      12px;
  --raza-font:        'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --raza-transition:  0.22s cubic-bezier(.4,0,.2,1);
}

/* ============================================
   HEADER PRINCIPAL
   ============================================ */

.raza-header {
  width: 100%;
  background: var(--raza-green);
  font-family: var(--raza-font);
  position: relative;
  z-index: 1000;
}

.raza-header__inner {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 68px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  gap: 0;
}

/* ============================================
   LOGO
   ============================================ */

.raza-header__logo {
  flex-shrink: 0;
  margin-right: 28px;
  display: flex;
  align-items: center;
}

.raza-header__logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.raza-header__logo img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ============================================
   NAVEGACIÓN PRINCIPAL
   ============================================ */

.raza-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.raza-header__nav-link {
  color: var(--raza-white);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background var(--raza-transition);
  white-space: nowrap;
}

.raza-header__nav-link:hover {
  background: rgba(255,255,255,0.15);
}

/* ============================================
   ZONA DE DROPDOWNS
   ============================================ */

.raza-header__dropdowns {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
}

.raza-dropdown {
  position: relative;
}

.raza-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--raza-white);
  color: var(--raza-green-dark);
  border: none;
  border-radius: 24px;
  padding: 9px 18px 9px 16px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--raza-font);
  transition: background var(--raza-transition), box-shadow var(--raza-transition);
}

.raza-dropdown__trigger:hover,
.raza-dropdown--open .raza-dropdown__trigger {
  background: #e8f5e9;
  box-shadow: 0 2px 12px rgba(46,125,50,0.18);
}

.raza-dropdown__trigger svg {
  width: 14px;
  height: 14px;
  color: var(--raza-green);
  transition: transform var(--raza-transition);
  flex-shrink: 0;
}

.raza-dropdown--open .raza-dropdown__trigger svg {
  transform: rotate(180deg);
}

/* Panel nivel 1 */
.raza-dropdown__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: var(--raza-white);
  border-radius: var(--raza-radius);
  box-shadow: var(--raza-shadow);
  min-width: 210px;
  padding: 8px 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  transition: opacity var(--raza-transition), transform var(--raza-transition);
  z-index: 2000;
}

.raza-dropdown--open .raza-dropdown__panel {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}

/* Item de menú */
.raza-dropdown__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--raza-text);
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  transition: background var(--raza-transition), color var(--raza-transition);
}

.raza-dropdown__item:hover {
  background: #f1f8f1;
  color: var(--raza-green-dark);
}

/* Imagen circular */
.raza-dropdown__item-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #e0e0e0;
  background: #f0f0f0;
}

/* Flecha sub-nivel */
.raza-dropdown__item-arrow {
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: var(--raza-green);
  flex-shrink: 0;
}

/* Sub-panel nivel 2 */
.raza-dropdown__sub {
  position: absolute;
  top: -8px;
  left: 100%;
  background: var(--raza-white);
  border-radius: var(--raza-radius);
  box-shadow: var(--raza-shadow);
  min-width: 170px;
  padding: 8px 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px) scale(0.98);
  transform-origin: top left;
  transition: opacity var(--raza-transition), transform var(--raza-transition);
  z-index: 2100;
}

/* ✅ CORRECCIÓN: .raza-has-sub activa el sub al hover */
.raza-has-sub:hover > .raza-dropdown__sub {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0) scale(1);
}

.raza-dropdown__sub .raza-dropdown__item {
  padding: 9px 18px;
  font-size: 14px;
}

/* ============================================
   BUSCADOR
   ============================================ */

.raza-header__search {
  display: flex;
  align-items: center;
  background: var(--raza-white);
  border-radius: 24px;
  padding: 7px 14px 7px 18px;
  gap: 8px;
  min-width: 200px;
  max-width: 270px;
  flex: 1 1 200px;
}

.raza-header__search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--raza-text);
  width: 100%;
  font-family: var(--raza-font);
}

.raza-header__search input::placeholder {
  color: #aaa;
}

.raza-header__search button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  color: var(--raza-green);
  flex-shrink: 0;
}

.raza-header__search button svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   HAMBURGUESA
   ============================================ */

.raza-header__hamburger {
  display: none; /* visible solo en mobile */
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  background: none;
  border: none;
  flex-shrink: 0;
}

.raza-header__hamburger span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--raza-white);
  border-radius: 2px;
  transition: all var(--raza-transition);
}

.raza-header__hamburger.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.raza-header__hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.raza-header__hamburger.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================
   MENÚ MÓVIL
   ✅ CORRECCIÓN: siempre definido (display:none),
   se activa con .is-open desde JS.
   No encerrado en @media para que JS funcione.
   ============================================ */

.raza-mobile-menu {
  display: none;
  background: var(--raza-green-dark);
  padding: 12px 0 18px;
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: var(--raza-shadow);
}

.raza-mobile-menu.is-open {
  display: block;
}

/* Buscador móvil */
.raza-mobile-search {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 9px 16px;
  margin: 0 14px 10px;
  gap: 8px;
}

.raza-mobile-search input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--raza-white);
  font-size: 14px;
  width: 100%;
  font-family: var(--raza-font);
}

.raza-mobile-search input::placeholder {
  color: rgba(255,255,255,0.55);
}

.raza-mobile-search svg {
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,0.65);
  flex-shrink: 0;
}

/* Links simples */
.raza-mobile-link {
  display: block;
  color: var(--raza-white);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background var(--raza-transition);
  font-family: var(--raza-font);
}

.raza-mobile-link:hover {
  background: rgba(255,255,255,0.1);
}

/* Sección con título */
.raza-mobile-section {
  padding: 8px 0 0;
}

.raza-mobile-section__title {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 8px 20px 4px;
  font-family: var(--raza-font);
}

/* Acordeón botón */
.raza-mobile-acc {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--raza-white);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 20px;
  cursor: pointer;
  font-family: var(--raza-font);
  text-align: left;
  transition: background var(--raza-transition);
}

.raza-mobile-acc:hover {
  background: rgba(255,255,255,0.07);
}

.raza-mobile-acc img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.raza-mobile-acc span {
  flex: 1;
}

.raza-mobile-acc__arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--raza-transition);
}

.raza-mobile-acc.is-open .raza-mobile-acc__arrow {
  transform: rotate(180deg);
}

/* Acordeón contenido */
.raza-mobile-acc__content {
  display: none;
  background: rgba(0,0,0,0.18);
  padding-left: 60px;
}

.raza-mobile-acc__content.is-open {
  display: block;
}

.raza-mobile-acc__content a {
  display: block;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-size: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--raza-font);
  transition: background var(--raza-transition), color var(--raza-transition);
}

.raza-mobile-acc__content a:hover {
  background: rgba(255,255,255,0.07);
  color: var(--raza-white);
}

/* ============================================
   RESPONSIVE — TABLET (≤ 900px)
   ============================================ */

@media (max-width: 900px) {
  .raza-header__nav {
    display: none;
  }
  .raza-header__search {
    min-width: 130px;
    flex: 1 1 130px;
  }
}

/* ============================================
   RESPONSIVE — MOBILE (≤ 650px)
   ============================================ */

@media (max-width: 650px) {
  .raza-header__inner {
    padding: 0 14px;
    height: 60px;
  }

  .raza-header__dropdowns {
    display: none;
  }

  .raza-header__search {
    display: none;
  }

  .raza-header__hamburger {
    display: flex;
  }

  /* Ajusta top del menú al alto mobile */
  .raza-mobile-menu {
    top: 60px;
  }
}

/* ============================================
   FIX — ANULA .elementor img EN EL HEADER
   Elementor aplica border:none, border-radius:0,
   box-shadow:none, height:auto, max-width:100% a
   TODAS las <img> dentro de .elementor. Estas reglas
   ganan especificidad al prefijar con .raza-header
   para que el estilo custom del header no se rompa.
   ============================================ */

.raza-header .raza-header__logo img {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.raza-header .raza-dropdown__item-img {
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  box-shadow: none;
}

.raza-header .raza-mobile-acc img {
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  box-shadow: none;
}

/* Si Elementor sigue ganando por !important en el tema,
   descomenta este bloque y úsalo en su lugar: */

/*
.raza-header .raza-dropdown__item-img {
  border-radius: 50% !important;
}
.raza-header .raza-mobile-acc img {
  border-radius: 50% !important;
}
*//* End custom CSS */