/* ═══════════════════════════════════════════════════════════════════════
   Rotermeller — landing v2. HTML/CSS/JS vanilla, sin build, sin CDN.
   Identidad: Compartido/Tema.swift (marfil, coral, tinta, radios 26/20/14).

   Nota sobre el coral: la marca es #FF594D, pero blanco sobre ese coral da
   3,09:1 y WCAG AA pide 4,5:1 para texto normal. Por eso hay tres tokens:
     --coral         relleno decorativo y trazos (nunca lleva texto encima)
     --coral-fuerte  relleno de botones y burbujas (texto blanco encima)
     --coral-txt     texto coral pequeño sobre fondos claros
     --coral-grande  texto coral de 24px+ sobre rosa (titular del cierre)
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --marfil:#FEF9F8;
  --marfil-2:#FDF7F5;
  --marfil-calido:#FDF4F1;
  --marfil-pie:#FBFAF9;
  --rosa-suave:#FBE1DB;
  --rosa-hero:#FBDFD9;
  --rosa-bisel:#F6D9D3;
  --coral:#FF594D;
  --coral-fuerte:#D14031;
  --coral-grande:#DC4433;
  --coral-txt:#C43A2E;
  --tinta:#161A24;
  --tinta-2:#3A3A42;
  --gris:#63636A;
  --blanco:#FFFFFF;
  --linea:#F1E8E4;
  --r-xl:26px; --r-l:20px; --r-m:14px;

  --sans:ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Rounded",system-ui,"Segoe UI",Roboto,sans-serif;
  --serif:ui-serif,"New York",Charter,"Iowan Old Style",Georgia,"Times New Roman",serif;

  --sombra-s:0 2px 10px rgba(22,26,36,.04), 0 12px 30px rgba(22,26,36,.05);
  --sombra-m:0 4px 14px rgba(22,26,36,.05), 0 20px 44px rgba(22,26,36,.07);
  --sombra-tel:0 30px 60px rgba(22,26,36,.18), 0 8px 20px rgba(22,26,36,.09);
  --contenedor:1320px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--marfil); color:var(--tinta);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}

/* Tinta, no coral: sobre el rosa del hero y del cierre un anillo coral se
   queda en 2,4:1 y desaparece justo donde más falta hace. */
:focus-visible{outline:3px solid var(--tinta); outline-offset:3px; border-radius:6px}

/* Ojo: .sr-only es position:absolute, así que si ningún antepasado está
   posicionado su bloque contenedor es el documento entero y NO lo recorta el
   carrusel — su posición estática, ya fuera de la pantalla, estiraba el
   scrollWidth del documento a 894 px en un móvil de 415. Por eso los padres
   de cada .sr-only llevan position:relative. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.saltar{
  position:absolute; left:-9999px; top:12px; z-index:100;
  background:var(--coral-fuerte); color:#fff; padding:10px 18px; border-radius:999px; font-weight:600;
}
.saltar:focus{left:16px}

.cont{width:100%; max-width:var(--contenedor); margin-inline:auto; padding-inline:24px}
/* Los dos bloques finales van casi a sangre, como en el mockup. */
.cont--ancho{max-width:none; padding-inline:24px}

/* ── Tipografía compartida ───────────────────────────────────────────── */
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral-txt); margin:0 0 14px; line-height:1.4;
}
h1,h2,h3{margin:0}
.h2{
  font-family:var(--serif); font-weight:700; font-size:29px; line-height:1.24;
  color:var(--tinta); letter-spacing:-.018em; margin:0;
}
.quehace .h2{font-size:27px}
.dentro .h2, .opiniones .h2{font-size:33px}
.parrafo{ color:var(--gris); font-size:16px; line-height:1.7; margin:16px 0 0 }
.parrafo--s{ font-size:15px }
.coral{ color:var(--coral-txt) }

/* ── 1 · Barra superior ──────────────────────────────────────────────── */
.barra{position:relative; z-index:20; height:80px; display:flex; align-items:center}
/* El hijo flex de .cont es el <nav>, no el <ul>: el margin-inline:auto tiene
   que ir aquí o el menú se amontona contra el logo. */
.barra .cont{display:flex; align-items:center; gap:24px}
.barra nav{margin-inline:auto}
.marca{display:flex; align-items:center; gap:11px; font-weight:700; font-size:20px; letter-spacing:-.012em}
.marca img{width:36px; height:36px; border-radius:50%; object-fit:cover; object-position:50% 12%;
  background:var(--rosa-suave); flex:none}
.menu{display:flex; gap:38px; list-style:none; padding:0; margin:0}
.menu a{font-size:15px; font-weight:500; transition:color .18s}
.menu a:hover{color:var(--coral-txt)}
.solo-corto{display:none}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:999px; border:0; cursor:pointer; font-weight:600; line-height:1;
  text-align:center; white-space:nowrap;
  transition:transform .18s, box-shadow .18s, background .18s;
}
.btn svg{flex:none}
.btn--coral{background:var(--coral-fuerte); color:#fff; box-shadow:0 8px 20px rgba(209,64,49,.26)}
.btn--coral:hover{background:#BC3A2C; transform:translateY(-1px)}
.btn--blanco{background:#fff; color:var(--tinta); border:1px solid var(--linea); box-shadow:var(--sombra-s)}
.btn--blanco:hover{transform:translateY(-1px)}
.btn--barra{height:42px; padding:0 20px; font-size:14.5px}
.btn--g{height:54px; padding:0 26px; font-size:16px}
@media (prefers-reduced-motion:reduce){ .btn:hover{transform:none} }

/* ── 2 · Hero ────────────────────────────────────────────────────────── */
.hero{
  position:relative; isolation:isolate; overflow:clip;
  /* Marfil arriba, rosa abajo: en el mockup la barra flota sobre blanco roto
     y el rosa se acumula al pie de la sección. */
  background:
    radial-gradient(64% 62% at 70% 46%, #FFD6CE 0%, rgba(255,214,206,0) 72%),
    linear-gradient(180deg, #FEFBFA 0%, #FEF3EF 38%, var(--rosa-hero) 100%);
  margin-top:-80px; padding-top:80px;
}
.hero .cont{
  display:grid; grid-template-columns:45% 45%; justify-content:space-between;
  align-items:center; gap:0; padding-top:30px; padding-bottom:34px;
}
.hero-txt{max-width:560px}
.pildora{
  display:inline-block; background:var(--rosa-suave); color:#B0342A;
  border-radius:999px; padding:7px 15px; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.4; margin:0;
}
.hero h1{
  font-family:var(--serif); font-weight:700; font-size:clamp(31px,3.35vw,47px);
  line-height:1.17; letter-spacing:-.026em; margin:24px 0 0;
}
/* Trazo dibujado, no una regla recta: sobresale un poco por los dos lados. */
.subrayado{position:relative; color:var(--coral-grande); white-space:nowrap}
.subrayado::after{
  content:""; position:absolute; left:-8%; right:-8%; bottom:-.09em; height:.13em;
  background:var(--coral);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7C22 3 44 2 62 4c18 2 36 4 56 1' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7C22 3 44 2 62 4c18 2 36 4 56 1' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.hero .parrafo{max-width:470px; margin-top:22px}
.hero-botones{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.hero-nota{display:flex; gap:14px; align-items:flex-start; margin-top:28px; max-width:480px}
.hero-nota .disco{
  width:42px; height:42px; flex:none; border-radius:50%; background:var(--rosa-suave);
  display:grid; place-items:center; color:var(--coral-txt)
}
.hero-nota p{margin:0; font-size:13.5px; line-height:1.65; color:var(--gris); padding-top:3px}
.hero-nota a{color:var(--coral-txt); font-weight:600; text-decoration:underline}

/* — composición de los dos iPhone —
   Medidas sacadas del mockup: el de delante ocupa el 46 % del ancho del arte
   y arranca arriba; el de atrás es un 39 %, empieza un 19 % más abajo, gira
   9° y se atenúa. La caja tiene aspect-ratio para que quepan ENTEROS: en la
   v1 la sección los cortaba en seco por el borde de abajo. */
.hero-arte{position:relative; aspect-ratio:356/368; align-self:center}
.doodle{position:absolute; z-index:1; pointer-events:none; color:var(--coral)}
.doodle path{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round;
  stroke-linejoin:round; opacity:.5}
.doodle--rizo{left:-15%; top:9%; width:16%; z-index:1}
.doodle--arco{left:55%; top:5%; width:26%; z-index:1}
@media (prefers-reduced-motion:no-preference){
  .doodle path{
    stroke-dasharray:var(--largo,900); stroke-dashoffset:var(--largo,900);
    animation:trazo 1.6s cubic-bezier(.4,0,.2,1) .35s forwards;
  }
  @keyframes trazo{ to{stroke-dashoffset:0} }
}

/* Marco de iPhone realista */
.tel{
  position:relative;
  background:linear-gradient(155deg,#4a4a52 0%,#17171c 26%,#2b2b31 62%,#111116 100%);
  border-radius:11.5%/5.6%; padding:1.9%; box-shadow:var(--sombra-tel);
}
.tel img{display:block; width:100%; height:auto; border-radius:9.6%/4.7%}
.tel::after{
  content:""; position:absolute; top:4.2%; left:50%; transform:translateX(-50%);
  width:30%; height:2.1%; background:#0b0b0e; border-radius:999px;
}
.hero-tel{position:absolute}
.tel--frente{width:46%; left:0; top:0; transform:rotate(-2deg); z-index:3}
.tel--fondo{
  width:39%; left:51%; top:19%; transform:rotate(9deg); z-index:2; opacity:.9;
  -webkit-mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,.12) 100%);
          mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,.12) 100%);
}

/* ── 3 · Qué hace ────────────────────────────────────────────────────── */
.quehace{background:var(--marfil); padding:96px 0}
.quehace .cont{display:grid; grid-template-columns:38% 1fr; gap:38px; align-items:start}
.quehace .cont > *{min-width:0}
.quehace .parrafo{max-width:440px}
.tarjetas4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.tarjeta{background:#fff; border-radius:var(--r-l); padding:20px; box-shadow:var(--sombra-s)}
/* Cuadrado redondeado, no círculo: así está en el mockup. */
.tarjeta .disco{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  color:var(--coral-txt); background:var(--rosa-suave);
}
.tarjeta h3{font-size:15.5px; font-weight:700; line-height:1.35; margin:18px 0 0; color:var(--tinta)}
.tarjeta p{font-size:13.5px; line-height:1.65; color:var(--gris); margin:10px 0 0}

/* ── 4 · Pensadas + Tutor ────────────────────────────────────────────── */
.banda{background:var(--marfil-2); padding:96px 0 0; overflow:hidden; position:relative}
.banda .cont{
  display:grid; grid-template-columns:31% 24% 1fr; gap:36px; align-items:start;
  min-height:520px;
}
.banda .cont > *{min-width:0}
.lista{list-style:none; margin:28px 0 96px; padding:0}
.lista li{display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--linea)}
.lista li:first-child{border-top:0; padding-top:6px}
.aro{
  width:31px; height:31px; flex:none; border-radius:50%; border:1.5px solid var(--coral);
  display:grid; place-items:center; color:var(--coral-txt);
}
.lista h3{font-size:15px; font-weight:700; margin:0; line-height:1.4}
.lista p{font-size:13.5px; line-height:1.55; color:var(--gris); margin:2px 0 0}

.banda-tel{align-self:start; margin-top:26px; margin-bottom:-190px}

.tutor{padding-bottom:96px; position:relative}
.tutor-top{display:flex; gap:24px; align-items:flex-start; position:relative}
/* En el mockup se ve cabeza Y torso dentro de un disco rosa grande. */
.tutor-foto{
  width:112px; height:112px; flex:none; border-radius:50%; overflow:hidden;
  background:radial-gradient(farthest-side,#FBD5CE 0%,#FDE9E5 100%);
  box-shadow:0 10px 26px rgba(22,26,36,.08);
}
.tutor-foto img{width:100%; height:100%; object-fit:cover; object-position:50% 4%; display:block}
.tutor .doodle--rizo2{position:absolute; left:-58px; top:2px; width:46px; color:var(--coral); z-index:0}
.burbujas{margin-top:28px; display:flex; flex-direction:column; gap:18px; max-width:66%}
.burbuja{border-radius:var(--r-l); padding:15px 20px; font-size:14px; line-height:1.5}
.burbuja p{margin:0}
.burbuja p+p{margin-top:6px}
.burbuja--coral{background:var(--coral-fuerte); color:#fff; box-shadow:0 10px 24px rgba(209,64,49,.2)}
.burbuja--coral p+p{color:#fff; opacity:.96}
/* La blanca va claramente sangrada a la derecha: es lo que da la conversación. */
.burbuja--blanca{
  background:#fff; border:1px solid var(--linea); color:var(--tinta); box-shadow:var(--sombra-s);
  align-self:flex-end; margin-right:-22%;
}
.burbuja--blanca p+p{color:var(--gris)}

/* ── 5 · Así se ve por dentro ────────────────────────────────────────── */
.dentro{background:var(--marfil-calido); padding:96px 0}
.pestanas{
  display:flex; gap:6px; background:#fff; border-radius:18px;
  padding:8px 10px; box-shadow:var(--sombra-s); margin:30px 14px 0;
}
.pest{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:9px;
  background:transparent; border:0; border-radius:12px; padding:13px 8px; cursor:pointer;
  font-size:14.5px; font-weight:500; color:var(--gris); position:relative; min-width:0;
  transition:background .18s, color .18s;
}
.pest svg{color:var(--tinta-2); flex:none; transition:color .18s}
.pest span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pest:hover{color:var(--tinta)}
/* Sin subrayado: en el mockup el estado activo es sólo la píldora blanca
   más el texto y el icono en coral. */
.pest[aria-current="true"]{
  background:#fff; color:var(--coral-txt);
  box-shadow:0 1px 3px rgba(22,26,36,.06), 0 6px 18px rgba(22,26,36,.09);
}
.pest[aria-current="true"] svg{color:var(--coral)}

.tira{
  display:flex; gap:20px; margin-top:34px; align-items:flex-start;
  overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px;
}
/* Base fija: al destapar la sexta pantalla la tira se desplaza en vez de
   encoger las cinco de golpe. */
.tira > *{flex:0 0 calc((100% - 80px)/5); min-width:0; scroll-snap-align:center}
.telb{
  position:relative; background:#fff; border:3px solid var(--rosa-bisel);
  border-radius:20px; padding:5px; box-shadow:var(--sombra-s);
}
.telb img{display:block; width:100%; height:auto; border-radius:15px}
.telb::before{
  content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:30%; height:9px; background:#14141a; border-radius:999px; z-index:2;
}
.telb::after{
  content:""; position:absolute; bottom:11px; left:50%; transform:translateX(-50%);
  width:32%; height:3px; background:rgba(20,20,26,.6); border-radius:999px; z-index:2;
}

/* ── 6 · Opiniones ───────────────────────────────────────────────────── */
.opiniones{background:#FDFAF8; padding:96px 0}
.opiniones .cont{display:grid; grid-template-columns:32% 1fr; gap:44px; align-items:start}
.opiniones .cont > *{min-width:0}
.opiniones .parrafo{font-size:14.5px; max-width:360px}
/* El descargo es lo más importante del bloque: va en tinta y legible,
   y bajo el párrafo de la izquierda para no descuadrar la fila. */
.aviso-ejemplo{
  display:inline-block; margin:20px 0 0; font-size:13px; font-weight:600; color:var(--tinta);
  background:var(--rosa-suave); border-radius:14px; padding:9px 14px; line-height:1.5;
  max-width:360px;
}
.citas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.cita{position:relative; background:#fff; border-radius:18px; padding:26px 24px; box-shadow:var(--sombra-s); margin:0;
  display:flex; flex-direction:column; justify-content:space-between; min-height:172px}
.cita blockquote{margin:0; font-size:14px; line-height:1.7; color:var(--gris)}
.cita figcaption{display:flex; align-items:center; gap:12px; margin-top:28px}
.cita img{width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--rosa-suave)}
.cita b{display:block; font-size:13.5px; font-weight:700; color:var(--tinta); line-height:1.4}
.cita small{display:block; font-size:12px; color:var(--gris)}
.puntos{display:flex; justify-content:center; gap:8px; margin-top:26px}
.puntos button{
  width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#E3DAD6;
  cursor:pointer; transition:background .18s, transform .18s;
}
.puntos button[aria-current="true"]{background:var(--coral); transform:scale(1.2)}
.puntos.decorativo button{cursor:default}

/* ── 7 · Cierre ──────────────────────────────────────────────────────── */
.cierre{padding:0; background:#FDFAF8}
.cierre-caja{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(100deg,#FCE6E2 0%,#FBDCD6 100%);
  display:grid; grid-template-columns:33% 34% 1fr; align-items:center;
  min-height:300px; padding:44px 48px;
}
.cierre h2{font-weight:800; font-size:35px; line-height:1.2; letter-spacing:-.02em;
  color:var(--coral-grande)}
.cierre-sub{margin:18px 0 0; font-size:15px; font-weight:600; color:var(--tinta)}
.form{position:relative; max-width:420px; width:100%}
.form input{
  width:100%; height:58px; border:0; border-radius:999px; padding:0 26px;
  background:#fff; font:inherit; font-size:15.5px; color:var(--tinta);
  box-shadow:0 2px 8px rgba(22,26,36,.05);
}
.form input::placeholder{color:var(--gris)}
.form .btn{width:100%; margin-top:14px; height:58px}
.form .letra-chica{margin:14px 0 0; font-size:12.5px; line-height:1.55; color:var(--gris); text-align:center}
.form .letra-chica a{color:var(--coral-txt); font-weight:600; text-decoration:underline}
.form-aviso{margin:12px 0 0; font-size:13.5px; font-weight:600; text-align:center; min-height:1px}
.form-aviso.ok{color:#1B6B45}
.form-aviso.mal{color:#A3211B}
.cierre-figura{position:absolute; right:2%; bottom:0; top:8px; z-index:1}
.cierre-figura img{display:block; height:100%; width:auto}

/* ── 8 · Pie ─────────────────────────────────────────────────────────── */
/* Tarjeta redondeada pegada al cierre, no una banda a sangre. */
.pie{padding:24px 0 28px; background:#FDFAF8}
.pie-caja{background:var(--marfil-pie); border:1px solid var(--linea);
  border-radius:var(--r-xl); padding:38px 44px 26px}
.pie-grid{display:grid; grid-template-columns:1.9fr 1fr 1.3fr 1.5fr; gap:32px}
.pie .marca{font-size:20px}
.pie .marca img{width:34px; height:34px}
.pie-desc{margin:16px 0 0; font-size:13.5px; line-height:1.75; color:var(--gris); max-width:290px}
.redes{display:flex; gap:18px; margin-top:22px; color:var(--tinta)}
.redes a{display:inline-flex; transition:color .18s}
.redes a:hover{color:var(--coral-txt)}
.pie h2{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris); margin:0 0 18px; font-family:var(--sans);
}
.pie ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.pie ul a{font-size:13.5px; color:var(--gris)}
.pie ul a:hover{color:var(--coral-txt)}
.pie-mail{font-size:15px; color:var(--tinta)}
.pie-mail:hover{color:var(--coral-txt)}
.pie-cierre{
  position:relative; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--linea); margin-top:34px; padding-top:22px;
  font-size:12.5px; color:var(--gris);
}
.pie-cierre .corazon{color:var(--coral-txt)}

/* ── Aparición al hacer scroll ───────────────────────────────────────── */
/* Con .con-js delante: si web.js no llega, nada se queda invisible. */
@media (prefers-reduced-motion:no-preference){
  .con-js .aparece{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
  .con-js .aparece.visible{opacity:1; transform:none}
}

/* ═══ Responsive ═════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .hero .cont{grid-template-columns:48% 48%}
  .hero h1 br{display:none}
  .hero h1{font-size:40px}
  .quehace .cont{grid-template-columns:1fr; gap:28px}
  .quehace .h2, .quehace .parrafo{max-width:640px}
  .tarjetas4{grid-template-columns:repeat(2,1fr)}
  .banda .cont{grid-template-columns:1fr 30%; gap:32px}
  .tutor{grid-column:1 / -1; padding-bottom:0}
  .burbujas{max-width:100%}
  .burbuja--blanca{margin-right:0; max-width:80%}
  .lista{margin-bottom:40px}
  .banda-tel{margin-bottom:0}
  .banda{padding-bottom:96px}
  .opiniones .cont{grid-template-columns:1fr}
  .aviso-ejemplo{max-width:none}
  .cierre-caja{grid-template-columns:1fr 1fr; padding:36px}
  .cierre-figura{display:none}
  .cierre h2{font-size:30px}
  .pie-grid{grid-template-columns:1fr 1fr; gap:36px}
  .tira > *{flex:0 0 calc((100% - 60px)/4)}
}

@media (max-width:900px){
  .doodle{display:none}
  .tira > *{flex:0 0 calc((100% - 40px)/3)}
}

@media (max-width:820px){
  /* Sin hamburguesa y sin JS: el menú pasa a una segunda fila desplazable,
     así ningún enlace desaparece en el móvil. */
  .barra{height:auto; padding:12px 0}
  .hero{margin-top:0; padding-top:0}
  .barra .cont{flex-wrap:wrap; gap:12px}
  .barra .marca{order:1}
  .barra .btn--barra{order:2; margin-left:auto}
  .barra nav{order:3; width:100%; margin:2px 0 0}
  .menu{gap:22px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu a{font-size:14.5px; white-space:nowrap}
  .hero .cont{grid-template-columns:1fr; padding-top:16px; padding-bottom:0}
  .hero-txt{max-width:none}
  .hero h1{font-size:33px}
  /* La caja tiene que ser al menos tan alta como el teléfono de delante
     (ancho x 2,13) o la sección lo corta en seco por abajo. */
  .hero-arte{aspect-ratio:1/1.15; margin:34px -8px 0; width:calc(100% + 16px)}
  .tel--frente{width:52%; left:4%; top:0}
  .tel--fondo{width:44%; left:50%; top:16%}
  .hero-botones .btn{width:100%}
  .banda .cont{grid-template-columns:1fr; min-height:0}
  .banda-tel{max-width:280px; margin:0 auto 40px; overflow:visible}
  .tira{margin-inline:-24px; padding:4px 24px 10px; scroll-snap-type:x mandatory}
  .tira > *{flex:0 0 62%}
  .pestanas{
    margin:30px -24px 0; padding-inline:24px; border-radius:0; overflow-x:auto;
    justify-content:flex-start; scroll-snap-type:x mandatory;
  }
  .pest{flex:0 0 auto; scroll-snap-align:center}
  .citas-grid{
    grid-template-columns:none; display:flex; margin-inline:-24px; padding:4px 24px 10px;
    overflow-x:auto; scroll-snap-type:x mandatory;
  }
  .citas-grid > *{flex:0 0 84%; scroll-snap-align:center}
  .cierre-caja{grid-template-columns:1fr; text-align:center; padding:34px 24px; gap:24px}
  .cierre .form{margin-inline:auto}
  .pie-caja{padding:30px 24px 22px}
  .pie-grid{grid-template-columns:1fr; gap:28px}
  .pie-cierre{flex-direction:column; gap:8px}
}

@media (max-width:560px){
  .cont, .cont--ancho{padding-inline:18px}
  section.quehace, .dentro, .opiniones, .banda{padding-top:60px; padding-bottom:60px}
  .h2, .quehace .h2, .dentro .h2, .opiniones .h2{font-size:26px}
  .cierre h2{font-size:27px}
  .pildora{font-size:10px; letter-spacing:.08em; padding:6px 12px}
  .btn--barra{height:40px; padding:0 15px; font-size:12.5px; gap:7px}
  .solo-ancho{display:none}
  .solo-corto{display:inline}
  .marca{font-size:18px}
  .marca img{width:32px; height:32px}
  .hero h1{font-size:31px}
  .hero-arte{aspect-ratio:1/1.25}
  .tel--frente{width:56%; left:2%}
  .tel--fondo{width:47%; left:48%}
  .tira{margin-inline:-18px; padding-inline:18px}
  .pestanas{margin-inline:-18px; padding-inline:18px}
  .citas-grid{margin-inline:-18px; padding-inline:18px}
}