/* ============================================================
   juanserantes.com — estilos de páginas a medida (HTML directo)
   Scope raíz: .jsw   ·   iter12 (2026-07-07)
   Tokens como variables propias (sin theme.json).
   ============================================================ */

.jsw{
  /* Paleta de marca */
  --turquesa:#58A8B3; --turquesa-osc:#2E6D77; --celeste:#95D2DC;
  --amarillo:#DCE385; --lima:#AFCA21; --naranja:#D5711F;
  --marron:#B89474; --tinta:#333333; --blanco:#FFFFFF;
  /* Tipos fluidos */
  --fs-kicker:clamp(0.8125rem,0.78rem + 0.15vw,0.875rem);
  --fs-pie:clamp(0.875rem,0.85rem + 0.15vw,0.9375rem);
  --fs-cuerpo:clamp(1.125rem,1.05rem + 0.35vw,1.3125rem);
  --fs-destacado:clamp(1.375rem,1.24rem + 0.7vw,1.75rem);
  --fs-h4:clamp(1.25rem,1.19rem + 0.3vw,1.5rem);
  --fs-h3:clamp(1.5rem,1.36rem + 0.7vw,1.875rem);
  --fs-h2:clamp(2rem,1.66rem + 1.7vw,3rem);
  --fs-h1:clamp(2.625rem,2rem + 3.1vw,4.25rem);
  --fs-cita:clamp(1.5rem,1.3rem + 1.1vw,2.125rem);
  /* Layout */
  --content:1440px; --wide:1560px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --seccion:clamp(4rem,2.5rem + 3.5vw,7rem);
  --seccion-xl:clamp(5rem,3rem + 4.5vw,8.5rem);
  --corte:clamp(2.2rem,2.6vw,3.4rem);

  font-family:'Roboto',sans-serif; color:var(--tinta);
  font-size:var(--fs-cuerpo); line-height:1.65;
  overflow-x:hidden;
}
.jsw *{ box-sizing:border-box; }
.jsw img{ max-width:100%; display:block; }

/* — Contenedores — */
.jsw .envoltura{ max-width:var(--content); margin-inline:auto; padding-inline:var(--pad); }
.jsw .envoltura--wide{ max-width:var(--wide); }
.jsw .prosa{ max-width:76ch; }
.jsw .prosa p, .jsw .prosa li{ text-wrap:pretty; }

/* — Intro editorial: titular en raíl izquierdo, entradilla a la derecha — */
.jsw .intro-editorial{
  display:grid; grid-template-columns:minmax(0,30fr) minmax(0,70fr);
  gap:clamp(1.75rem,4.5vw,4.5rem); align-items:start;
  margin-bottom:clamp(1.6rem,3vw,2.6rem);
}
.jsw .intro-editorial > h2, .jsw .intro-editorial > h3{ margin:0; }
.jsw .intro-editorial .prosa{ max-width:64ch; margin:0; }
.jsw .intro-editorial .prosa > :first-child{ margin-top:0; }
.jsw .intro-editorial .prosa > :last-child{ margin-bottom:0; }
@media (max-width:781px){
  .jsw .intro-editorial{ grid-template-columns:1fr; gap:.7rem; }
}

/* — Tipografía — */
.jsw h1,.jsw h2,.jsw h3,.jsw h4{
  font-family:'Montserrat',sans-serif; color:var(--turquesa-osc);
  text-wrap:balance; margin:0 0 .5em;
}
.jsw h1{ font-size:var(--fs-h1); font-weight:800; line-height:1.08; }
.jsw h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.15; }
.jsw h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.25; margin-bottom:0; }
.jsw h4{ font-size:var(--fs-h4); font-weight:600; line-height:1.3; }
.jsw p{ margin:0 0 1em; }
.jsw ul,.jsw ol{ font-size:inherit; line-height:1.6; }
.jsw li{ margin-bottom:.35em; }
.jsw a{ color:var(--turquesa-osc); }
.jsw a:hover{ color:var(--naranja); }
.jsw :focus-visible{ outline:3px solid var(--turquesa-osc); outline-offset:2px; }
.jsw .kicker{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:var(--fs-kicker);
  text-transform:uppercase; letter-spacing:.12em; color:var(--turquesa-osc); margin:0 0 .4em; }
.jsw .destacado{ font-size:var(--fs-destacado); line-height:1.45; }

/* — Secciones — */
.jsw .seccion{ padding-block:var(--seccion); }

/* — HERO (cover propio) — */
.jsw .hero{ position:relative; background:var(--turquesa-osc); color:#fff; overflow:hidden; }
.jsw .hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.jsw .hero__velo{ position:absolute; inset:0; background:var(--turquesa-osc); opacity:.72; }
.jsw .hero__inner{ position:relative; max-width:var(--content); margin-inline:auto;
  padding:clamp(3.5rem,7vw,7rem) var(--pad); }
.jsw .hero--sec .hero__inner{ padding-block:clamp(3rem,5vw,5rem); }
.jsw .hero h1{ color:#fff; max-width:20ch; }
.jsw .hero .destacado{ max-width:38ch; }
.jsw .hero p{ color:#fff; }

/* — Línea de servicio (cabecera con placa + icono) — */
.jsw .linea{ padding-block:var(--seccion); }
.jsw .linea + .linea{ border-top:1px solid var(--celeste); }
.jsw .linea-cab{ display:grid; grid-template-columns:116px 1fr; gap:1.5rem; align-items:center; margin-bottom:1.6rem; }
.jsw .placa{ width:116px; height:116px; border-radius:50%; background:var(--celeste);
  display:flex; align-items:center; justify-content:center; }
.jsw .placa img{ width:70px; height:70px; object-fit:contain; }

/* — Dupla texto + foto (alturas iguales por grid) — */
.jsw .dupla{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:stretch; }
.jsw .dupla--55-45{ grid-template-columns:55fr 45fr; }
.jsw .dupla--50-50{ grid-template-columns:1fr 1fr; }

/* — Trío de fotos (galería 3) — */
.jsw .trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); margin:1.5rem 0; }
.jsw .trio figure{ margin:0; }
.jsw .trio img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; }
.jsw .dupla .col-foto{ margin:0; }
.jsw .dupla .col-foto img{ width:100%; height:100%; object-fit:cover; border-radius:6px; min-height:240px; }
.jsw .dupla--foto-izq .col-texto{ order:2; }
.jsw .dupla--foto-izq .col-foto{ order:1; }
.jsw .dupla .col-texto{ align-self:center; }
.jsw figcaption, .jsw .pie{ font-size:var(--fs-pie); color:var(--tinta); opacity:.72;
  border-left:3px solid var(--turquesa); padding-left:.75rem; margin-top:.6rem; }

/* — Franja de foto a sangre (borde a borde del viewport) — */
.jsw .franja{ margin:0; width:100vw; margin-left:calc(50% - 50vw); }
.jsw .franja img{ width:100%; height:clamp(360px,52vh,600px); object-fit:cover; }

/* — Bandas de color con corte diagonal (regla del taco) — */
.jsw .banda{ position:relative; }
.jsw .banda--celeste{ background:var(--celeste); }
.jsw .banda--amarillo{ background:var(--amarillo); }
.jsw .banda--lima{ background:var(--lima); }
.jsw .banda--turquesa-osc{ background:var(--turquesa-osc); color:#fff; }
.jsw .banda--turquesa-osc :is(h1,h2,h3,h4){ color:#fff; }
.jsw .banda--turquesa-osc .kicker{ color:#fff; opacity:.8; }
.jsw .banda--turquesa-osc a:not(.boton){ color:#fff; text-decoration-color:var(--lima); }
.jsw .banda--turquesa-osc figcaption{ color:#fff; opacity:.85; border-left-color:var(--lima); }
.jsw .corte-arriba{ clip-path:polygon(0 var(--corte),100% 0,100% 100%,0 100%);
  margin-top:calc(-1 * var(--corte)); padding-top:calc(var(--seccion) + var(--corte)); padding-bottom:var(--seccion); }
.jsw .corte-abajo{ clip-path:polygon(0 0,100% 0,100% calc(100% - var(--corte)),0 100%);
  padding-bottom:calc(var(--seccion) + var(--corte)); }

/* — Cita de marca — */
.jsw .cita{ border:0; margin:0 auto; max-width:46rem; text-align:center; padding:0; }
.jsw .cita::before{ content:"\00AB"; display:block; font-family:'Montserrat',sans-serif;
  font-weight:800; font-size:3.5rem; line-height:1; color:var(--turquesa-osc); opacity:.35; }
.jsw .cita p{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:var(--fs-cita);
  line-height:1.35; color:var(--turquesa-osc); margin:0; }

/* — Cómo trabajo: numerales — */
.jsw .pasos{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); margin:1.5rem 0; }
.jsw .num{ font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:clamp(2.5rem,4vw,3.5rem); line-height:1; color:var(--turquesa-osc); margin:0 0 .2em; }

/* — Puertas (3 tarjetas de acceso) — */
.jsw .puertas{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); margin-top:1rem; }
.jsw .puertas figure{ margin:0; }
.jsw .puertas figure img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:8px; }
.jsw .puertas h3{ margin:.9rem 0 .3rem; }

/* — Trío / pareja de fotos (galería) — */
.jsw .galeria{ display:grid; gap:clamp(1rem,2vw,1.5rem); }
.jsw .galeria--3{ grid-template-columns:repeat(3,1fr); }
.jsw .galeria--2{ grid-template-columns:repeat(2,1fr); }
.jsw .galeria figure{ margin:0; }
.jsw .galeria img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; }
.jsw .galeria--2 img{ aspect-ratio:3/2; }
.jsw .foto-ancha img{ width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:8px; }

/* — Tarjetas de vídeo con fachada (sin iframe hasta el clic) — */
.jsw .video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); margin-top:1.5rem; }
.jsw .video-fachada{ margin:0; }
.jsw .vf-caja{ position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#000; }
.jsw .vf-caja img{ width:100%; height:100%; object-fit:cover; display:block; }
.jsw .vf-caja iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.jsw .vf-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:var(--lima); display:flex; align-items:center; justify-content:center; transition:background-color .15s; }
.jsw .vf-caja:hover .vf-play, .jsw .vf-caja:focus-visible .vf-play{ background:var(--naranja); }
.jsw .vf-play::before{ content:""; border-style:solid; border-width:11px 0 11px 19px;
  border-color:transparent transparent transparent var(--tinta); margin-left:4px; }
.jsw .vf-badge{ position:absolute; top:.75rem; left:.75rem; background:#fff; border-radius:6px;
  padding:.25em .7em; font-family:'Montserrat',sans-serif; font-weight:700; font-size:var(--fs-kicker);
  text-transform:uppercase; letter-spacing:.1em; color:var(--tinta); }
.jsw .video-fachada h4{ margin:.8rem 0 .2rem; }
.jsw .vf-fuente{ font-size:var(--fs-pie); opacity:.72; margin:0; }

/* — Píldoras — */
.jsw .pildoras{ display:flex; flex-wrap:wrap; gap:.6rem; padding:0; list-style:none; margin:1rem 0 0; }
.jsw .pildoras li :is(a,span){ display:inline-block; border:1px solid var(--celeste); border-radius:6px;
  padding:.35em .9em; font-size:17px; text-decoration:none; color:var(--turquesa-osc); }
.jsw .pildoras li a:hover{ background:var(--celeste); color:var(--tinta); }

/* — Botones — */
.jsw .boton{ display:inline-block; font-family:'Montserrat',sans-serif; font-weight:600;
  font-size:clamp(1.0625rem,1rem + 0.2vw,1.125rem); padding:.9em 1.9em; border-radius:6px;
  background:var(--lima); color:var(--tinta); text-decoration:none; transition:background-color .15s,color .15s; }
.jsw .boton:hover{ background:var(--naranja); color:#fff; }

/* — Formulario en tarjeta — */
.jsw .form-tarjeta{ background:#fff; max-width:560px; margin:1.6rem auto 0; border-radius:8px;
  padding:2rem 2.25rem; box-shadow:0 8px 24px rgba(51,51,51,.08); text-align:left; }
.jsw .form-tarjeta label{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:15px;
  display:block; margin-bottom:1rem; }
.jsw .form-tarjeta input,.jsw .form-tarjeta textarea{ width:100%; margin-top:.3rem; padding:.55rem .7rem;
  border:1px solid #ccc; border-radius:6px; font:inherit; font-size:var(--fs-cuerpo); }
.jsw .form-tarjeta .consent{ font-weight:400; font-size:14px; display:flex; gap:.5rem; align-items:flex-start; }
.jsw .form-tarjeta .consent input{ width:auto; margin-top:.2rem; }
.jsw .form-tarjeta button{ background:var(--turquesa-osc); color:#fff; font-family:'Montserrat',sans-serif;
  font-weight:600; border:0; border-radius:6px; padding:.9em 1.9em; cursor:pointer; }
.jsw .form-tarjeta button:hover{ background:var(--naranja); }
.jsw .form-nota{ font-size:13px; opacity:.6; margin:.8rem 0 0; }
.jsw .form-tarjeta .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.jsw .jsw-ok{ background:#eef7e6; border:1px solid var(--lima); border-radius:6px; padding:.7rem .9rem; margin:.8rem 0 0; font-size:15px; color:var(--tinta); }
.jsw .jsw-err{ background:#fdeee6; border:1px solid var(--naranja); border-radius:6px; padding:.7rem .9rem; margin:.8rem 0 0; font-size:15px; color:var(--tinta); }

/* — Utilidades — */
.jsw .centro{ text-align:center; }
.jsw .prosa.centro{ margin-inline:auto; }

/* — Móvil — */
@media (max-width:781px){
  .jsw .dupla{ grid-template-columns:1fr; }
  .jsw .dupla--foto-izq .col-texto{ order:1; }
  .jsw .dupla--foto-izq .col-foto{ order:2; }
  .jsw .linea-cab{ grid-template-columns:84px 1fr; gap:1.1rem; }
  .jsw .placa{ width:84px; height:84px; }
  .jsw .placa img{ width:50px; height:50px; }
  .jsw .pasos{ grid-template-columns:1fr; }
  .jsw .puertas{ grid-template-columns:1fr; }
  .jsw .galeria--3, .jsw .galeria--2{ grid-template-columns:1fr; }
  .jsw .trio{ grid-template-columns:1fr 1fr; }
  .jsw .video-grid{ grid-template-columns:1fr; }
  .jsw .franja img{ height:clamp(220px,32vh,320px); }
}