/* ==========================================================================
   Transcaribe Design System — capa base (Tanda 1)
   Solo tokens. No redefine botones, headings, cards, tablas, inputs, calendario ni wizard.
   Valores basados en evidencia real del sitio (kit Elementor 5773, CSS de tema/venta).
   Marca: el primario #E72816 NO se modifica.
   ========================================================================== */
:root {
  /* Color */
  --tc-color-primary: #E72816;
  --tc-color-secondary: #152B6A;
  --tc-color-text: #161921;
  --tc-color-text-muted: #4B5563;
  --tc-color-surface: #FFFFFF;
  --tc-color-surface-alt: #F7F9FB;
  --tc-color-border: #E5E5E5;

  /* Tipografía (definición de tokens; todavía no se aplica a elementos) */
  --tc-font-heading: "Raleway", sans-serif;
  --tc-font-body: "Open Sans", sans-serif;

  /* Radios */
  --tc-radius-sm: 4px;
  --tc-radius-md: 6px;
  --tc-radius-lg: 12px;

  /* Espaciado (base 4 px) */
  --tc-space-1: 4px;
  --tc-space-2: 8px;
  --tc-space-3: 12px;
  --tc-space-4: 16px;
  --tc-space-6: 24px;
  --tc-space-8: 32px;

  /* Movimiento */
  --tc-transition-fast: 120ms;
  --tc-transition-standard: 200ms;
}

/* ==========================================================================
   T2 — Foco visible (teclado) · WCAG 2.4.7
   Anillo de dos tonos (blanco interior + azul marino exterior): visible sobre fondos
   claros, oscuros y sobre el rojo de marca. Solo :focus-visible: no cambia hover,
   estado normal ni el foco por ratón. Sin !important.
   ========================================================================== */
html body :is(a[href], button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--tc-color-surface, #FFFFFF);
  outline-offset: 0;
  box-shadow: 0 0 0 5px var(--tc-color-secondary, #152B6A);
}

/* Botones con efecto de relleno (.btnWave): en foco de teclado se rellenan igual que en
   hover; así el texto nunca queda del mismo color que el fondo (rojo sobre rojo). */
.btnWave a:focus-visible:before { transform: translateX(0); }
.btnWave a:focus-visible { transform: translateX(0); color: #ffffff; }

/* ==========================================================================
   T3 — prefers-reduced-motion
   Solo animaciones DECORATIVAS e infinitas observadas en la home (10):
     · 8 olas SVG        .parallax > use   (move-forever, 7–25 s)
     · 1 barco           .boatWinjet       (boatMove, 8–15 s)
     · 1 pulso de CTA    .anpulse/.btnSearch (pulseBtn, 1,7 s)
   No se tocan loaders ni transiciones funcionales de estado (spinners de carga,
   desplegables, calendario, acordeones). Sin !important.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html .parallax > use { animation: none; }
  /* El barco queda quieto en una posición visible (sin animación base está fuera de pantalla) */
  html .boatWinjet { animation: none; -webkit-animation: none; transform: translate(200px, 0); }
  html .anpulse, html .btnSearch { animation: none; }
  /* El relleno de los botones .btnWave se mantiene, pero sin barrido animado */
  html .btnWave a, html .btnWave a:before { transition-duration: 0.01ms; }
}

/* ==========================================================================
   TANDA 2 - Header y navegacion responsive
   T2.2 / T2.4  Toggle movil como <button> real (js/tc-header-nav.js)
   Solo reseteo de estilos nativos de <button> y area tactil minima 44x44.
   No se toca display/visibility: los controla HFE (visible solo <= 1024px).
   ========================================================================== */
html body #masthead button.hfe-nav-menu__toggle {
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 3px 5px;
  background: transparent;
  border: 0;
  border-radius: var(--tc-radius-sm, 4px);
  box-shadow: none;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 22px; /* mismo tamano que define HFE para el icono (.hfe-nav-menu__toggle) */
  font-weight: normal;
  line-height: 1;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
html body #masthead button.hfe-nav-menu__toggle:hover,
html body #masthead button.hfe-nav-menu__toggle:active {
  background: transparent;
  color: #FFFFFF;
}
html body #masthead button.hfe-nav-menu__toggle .hfe-nav-menu-icon {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   T2.1  Menu desktop en una sola fila (> 1024px; <= 1024px lo gobierna HFE).
   Causa: columnas Elementor con anchos porcentuales fijos (logo 15%, menu 77%,
   carrito 6%) dejaban al menu sin los 1041px que necesita (8 items, padding 15px)
   hasta ~1391px. Se reparte el ancho segun contenido (logo y carrito al ancho de
   su contenido, menu ocupa el resto) y se reduce el padding horizontal de los items.
   No se cambia ningun texto, opcion ni tamano de fuente en este tramo.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  html body #masthead #mainMenu > .elementor-container {
    flex-wrap: nowrap;
  }
  html body #masthead #mainMenu > .elementor-container > .elementor-element-15b2f3c3,
  html body #masthead #mainMenu > .elementor-container > .elementor-element-8c65b36 {
    width: auto;
    flex: 0 0 auto;
  }
  html body #masthead #mainMenu > .elementor-container > .elementor-element-b7065ba {
    width: auto;
    flex: 1 1 0%;
    min-width: 0;
  }
  html body #masthead .hfe-nav-menu .menu-item a.hfe-menu-item {
    padding-left: var(--tc-space-3, 12px);
    padding-right: var(--tc-space-3, 12px);
  }
}

/* Tramo 1025-1264px: ni con el reparto anterior caben los 8 items a 16px, asi que
   (ultimo recurso, rango acotado) fuente 14px, padding 8px, logo 110px y menos
   padding en las columnas del header. Sigue siendo uppercase 600 y legible. */
@media (min-width: 1025px) and (max-width: 1264px) {
  html body #masthead #mainMenu > .elementor-container > .elementor-column > .elementor-element-populated {
    padding-left: var(--tc-space-2, 8px);
    padding-right: var(--tc-space-2, 8px);
  }
  html body #masthead #mainMenu .elementor-widget-image img {
    width: 110px;
  }
  html body #masthead .hfe-nav-menu a.hfe-menu-item,
  html body #masthead .hfe-nav-menu a.hfe-sub-menu-item {
    font-size: 14px;
  }
  html body #masthead .hfe-nav-menu .menu-item a.hfe-menu-item {
    padding-left: var(--tc-space-2, 8px);
    padding-right: var(--tc-space-2, 8px);
  }
}

/* Tramo 1025-1060px (tablets en horizontal ~1024-1060): un paso mas de padding. */
@media (min-width: 1025px) and (max-width: 1060px) {
  html body #masthead .hfe-nav-menu .menu-item a.hfe-menu-item {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* --------------------------------------------------------------------------
   T2.3  Estado activo / foco del menu: contraste.
   Medido (Chromium): item actual #003283 sobre #E72816 = 2.64:1; ancestro/subitem
   activo #152B6A sobre #E72816 = 2.97:1; texto :focus #003283 = 2.64:1.
   El resto del menu es #FFFFFF sobre #E72816 (4.46:1). Los estados activo y foco
   pasan a blanco; el activo se distingue por una barra inferior blanca (en vez de
   azul) y los subitems activos por peso 700. No se cambia el token primario.
   !important solo donde custom.css ya lo usa (.current-menu-parent, subitem activo).
   -------------------------------------------------------------------------- */
html body #masthead .hfe-nav-menu .menu-item.current-menu-item > a.hfe-menu-item,
html body #masthead .hfe-nav-menu .menu-item.current-menu-ancestor > a.hfe-menu-item,
html body #masthead .hfe-nav-menu .menu-item.current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item,
html body #masthead .hfe-nav-menu .menu-item a.hfe-menu-item:focus,
html body #masthead nav .current-menu-parent a.hfe-menu-item,
html body #masthead nav .sub-menu .hfe-sub-menu-item-active,
html body #masthead .hfe-nav-menu .sub-menu .current-menu-item > a.hfe-sub-menu-item {
  color: var(--tc-color-surface, #FFFFFF) !important;
}
html body #masthead nav .sub-menu .hfe-sub-menu-item-active,
html body #masthead .hfe-nav-menu .sub-menu .current-menu-item > a.hfe-sub-menu-item {
  font-weight: 700;
}
html body #masthead .hfe-pointer__underline .menu-item.parent.current-menu-item > a.hfe-menu-item:after,
html body #masthead .hfe-pointer__underline .menu-item.parent.current-menu-ancestor > a.hfe-menu-item:after,
html body #masthead .hfe-pointer__underline .menu-item.parent.current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item:after {
  background-color: var(--tc-color-surface, #FFFFFF);
}