/* ============================================================
   juanserantes.com — cabecera y pie de sustitución (iter14)
   Reemplaza el header/footer que hoy pinta Elementor Theme Builder
   (plantillas 1445/1447), para poder desactivar Elementor.
   Scope propio: .jsw-site-header / .jsw-site-footer (NO usa ni pisa
   las variables del scope .jsw de estilos-jsw.css, porque header y
   footer viven FUERA de ese contenedor: los tokens se repiten aquí
   a propósito, ver NOTAS.md).
   Colores y tipos calcados del Kit de Elementor (post-116.css) el
   2026-07-11: primary #58A8B3, secondary #2E6D77, accent #AFCA21,
   marrón #B89474, blanco #FFFFFF, tinta #333333.
   ============================================================ */

/* ============================================================
   CABECERA
   ============================================================ */
.jsw-site-header{
  background:#FFFFFF; /* --e-global-color-blanc01 */
  position:relative;
  z-index:100;
}
.jsw-site-header__fila{
  max-width:1440px; /* mismo --content que estilos-jsw.css */
  margin-inline:auto;
  padding:14px clamp(1.25rem,4vw,2.5rem); /* 14px calcado del kit; horizontal = --pad */
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}
.jsw-site-header__logo{ display:block; line-height:0; }
.jsw-site-header__logo img{ width:150px; height:auto; display:block; } /* ancho calcado del kit (w0500xx img) */

/* — Menú — */
.jsw-nav{ display:flex; }
.jsw-nav__lista{
  display:flex; align-items:center; gap:clamp(1.25rem,2.2vw,2.25rem);
  list-style:none; margin:0; padding:0;
}
.jsw-nav__lista li{ margin:0; }
.jsw-nav__lista a{
  position:relative;
  display:inline-block;
  padding:.35em 0;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:16px;
  color:#2E6D77; /* --e-global-color-secondary */
  text-decoration:none;
}
.jsw-nav__lista a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:2px;
  background:#AFCA21; /* --e-global-color-accent */
  transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease;
}
.jsw-nav__lista a:hover,
.jsw-nav__lista a:focus-visible,
.jsw-nav__lista .current-menu-item > a:not([href*='#']){
  color:#58A8B3; /* --e-global-color-primary */
}
.jsw-nav__lista a:hover::after,
.jsw-nav__lista a:focus-visible::after,
.jsw-nav__lista .current-menu-item > a:not([href*='#'])::after{
  transform:scaleX(1);
}
.jsw-nav__lista a:focus-visible{
  outline:3px solid #2E6D77; outline-offset:4px;
}

/* — Botón hamburguesa (oculto en escritorio) — */
/* Estados explícitos: el reset del tema padre pinta button:focus/:hover
   con fondo #c36 (0,1,1); estos selectores (0,2,1) lo anulan siempre. */
button.jsw-menu-toggle:hover,
button.jsw-menu-toggle:focus,
button.jsw-menu-toggle:active{
  background:transparent;
  color:#2E6D77;
  border:0;
}
button.jsw-menu-toggle{
  display:none;
  width:44px; height:44px;
  border:0; background:transparent; cursor:pointer;
  padding:0; margin:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.jsw-menu-toggle__barra{
  display:block; width:26px; height:2px; background:#2E6D77;
  transition:transform .2s ease, opacity .2s ease;
}
.jsw-menu-toggle:focus-visible{ outline:3px solid #2E6D77; outline-offset:2px; }

/* — Móvil: mismo corte que el resto del sitio (781px) — */
@media (max-width:781px){
  button.jsw-menu-toggle{ display:inline-flex; }
  .jsw-nav{
    display:none;
    order:3;
    width:100%;
    padding-top:.75rem;
    border-top:1px solid #95D2DC; /* --celeste */
  }
  .jsw-nav__lista{
    flex-direction:column; align-items:flex-start; gap:0;
    width:100%;
  }
  .jsw-nav__lista li{ width:100%; }
  .jsw-nav__lista a{ display:block; padding:.7em 0; width:100%; }
  .jsw-nav__lista a::after{ display:none; } /* en móvil el estado activo basta con el color */

  .jsw-nav-abierto .jsw-nav{ display:block; }
  .jsw-nav-abierto .jsw-menu-toggle__barra:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .jsw-nav-abierto .jsw-menu-toggle__barra:nth-child(2){ opacity:0; }
  .jsw-nav-abierto .jsw-menu-toggle__barra:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   PIE
   ============================================================ */
.jsw-site-footer{
  background:#B89474; /* --e-global-color-b894741 (marrón) */
  color:#FFFFFF;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding:44px clamp(1.25rem,4vw,2.5rem) 36px; /* calcado del kit */
  font-family:'Roboto',sans-serif;
  font-size:18px; /* --e-global-typography-text-font-size */
}
.jsw-site-footer__logo{ display:block; line-height:0; margin-bottom:1.4rem; }
.jsw-site-footer__logo img{ width:170px; height:auto; display:block; } /* ancho calcado del kit (w0503xx img) */

.jsw-site-footer p{ margin:0; color:#FFFFFF; }
.jsw-site-footer__contacto{ margin-bottom:2.5rem; }
.jsw-site-footer__legal{ margin-top:0; }

/* Los enlaces del pie NO heredan el blanco del párrafo: en la web viva el
   Kit de Elementor fija a{color:secondary} de forma global (regla de baja
   especificidad pero aplicada directamente al elemento <a>, que gana a la
   herencia del contenedor) — comprobado por captura el 2026-07-11. Se
   replica aquí a propósito para que el pie se vea IGUAL que hoy. */
.jsw-site-footer a{
  color:#2E6D77; /* --e-global-color-secondary */
  text-decoration:none;
}
.jsw-site-footer a:hover,
.jsw-site-footer a:focus-visible{
  color:#D5711F; /* --naranja, convención de hover del resto del sitio */
  text-decoration:underline;
}
.jsw-site-footer a:focus-visible{
  outline:3px solid #FFFFFF; outline-offset:2px;
}

@media (max-width:781px){
  .jsw-site-footer{ padding:36px clamp(1.25rem,4vw,2.5rem) 28px; }
  .jsw-site-footer__logo img{ width:140px; }
}

/* ============================================================
   PÁGINAS SERVIDAS POR EL TEMA (las 4 legales)
   Al desactivar Elementor desaparece post-116.css (el Kit), que era
   quien daba tipografía y color a estas páginas. Este bloque lo
   sustituye. Scope: main#content.site-main solo existe en las páginas
   renderizadas por el tema (las plantillas tpl-jsw no lo usan).
   ============================================================ */
main#content.site-main{
  font-family:'Roboto',sans-serif;
  color:#333333;
  font-size:18px;
  line-height:1.6;
  max-width:900px;
  margin-inline:auto;
  padding:2.5rem clamp(1.25rem,4vw,2.5rem) 4rem;
}
main#content.site-main h1,
main#content.site-main h2,
main#content.site-main h3,
main#content.site-main h4,
main#content.site-main h5,
main#content.site-main h6{
  font-family:'Montserrat',sans-serif;
  color:#2E6D77;
}
/* tamaños/pesos calcados del Kit (post-116.css, resueltos 2026-07-11) */
main#content.site-main h1{ font-size:clamp(34px,4vw,52px); font-weight:800; line-height:1.12; }
main#content.site-main h2{ font-size:clamp(28px,3vw,34px); font-weight:700; line-height:1.2; }
main#content.site-main h3{ font-size:24px; font-weight:700; line-height:1.3; }
main#content.site-main h4{ font-size:20px; font-weight:600; line-height:1.35; }
main#content.site-main h5{ font-size:17px; font-weight:600; line-height:1.4; }
main#content.site-main h6{ font-size:15px; font-weight:600; line-height:1.4; }
main#content.site-main a{
  color:#2E6D77;
  text-decoration:underline;
}
main#content.site-main a:hover,
main#content.site-main a:focus-visible{
  color:#D5711F;
}

/* ============================================================
   CAMPOS DE FORMULARIO (paridad con el Kit de Elementor)
   El Kit estilaba input/textarea en todo el sitio (fondo #F0F0F0,
   Roboto 18, texto #202020); al desactivar Elementor se perdió.
   ============================================================ */
.jsw input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.jsw textarea{
  font-family:'Roboto',sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.65;
  color:#202020;
  background-color:#F0F0F0;
  border:1px solid #F0F0F0;
}

/* ============================================================
   iter17 (2026-07-13) — Banner de cookies (CookieYes) con los
   colores de marca. El plugin pinta los colores EN LÍNEA
   (azul #1863dc), así que hace falta !important para ganarles.
   Turquesa oscuro #2E6D77 sobre blanco = contraste AA.
   ============================================================ */
.cky-consent-container .cky-btn-accept,
.cky-modal .cky-btn-accept{
  background-color:#2E6D77 !important;
  border-color:#2E6D77 !important;
  color:#FFFFFF !important;
}
.cky-consent-container .cky-btn-accept:hover,
.cky-modal .cky-btn-accept:hover{
  background-color:#245861 !important;
  border-color:#245861 !important;
}
.cky-consent-container .cky-btn-reject,
.cky-consent-container .cky-btn-customize,
.cky-modal .cky-btn-reject,
.cky-modal .cky-btn-customize,
.cky-modal .cky-btn-preferences{
  color:#2E6D77 !important;
  border-color:#2E6D77 !important;
  background-color:transparent !important;
}
.cky-consent-container .cky-btn-reject:hover,
.cky-consent-container .cky-btn-customize:hover,
.cky-modal .cky-btn-reject:hover,
.cky-modal .cky-btn-customize:hover,
.cky-modal .cky-btn-preferences:hover{
  background-color:rgba(46,109,119,.08) !important;
}
.cky-consent-container a,
.cky-modal a,
.cky-notice-des a{ color:#2E6D77 !important; }
/* interruptores del panel de preferencias */
.cky-switch input[type="checkbox"]:checked{ background-color:#2E6D77 !important; }
.cky-accordion-btn:focus-visible,
.cky-btn:focus-visible{ outline:2px solid #2E6D77 !important; outline-offset:2px; }
/* botón flotante de «Preferencias de consentimiento» */
.cky-btn-revisit-wrapper{ background-color:#2E6D77 !important; }