/* znrapp · landing v7
   Grilla de 12 columnas (1120 px, canaletas de 24) y ritmo de 8 px: todo margen, relleno
   e interlineado es múltiplo de 4/8. Un solo color de acción (azul marino), el ámbar sólo
   como detalle, fondos blanco / gris azulado para separar secciones. */

:root{
  --ink:#0E1A2B;        /* texto · 17:1 sobre blanco */
  --ink-2:#3D4859;      /* texto secundario · 9.3:1 sobre blanco, 8.2:1 sobre --tint */
  --navy:#132F4C;       /* botones, marca, tarjeta destacada · 13:1 con blanco */
  --navy-700:#0B2036;
  --navy-50:#E8EEF5;
  --navy-100:#D5DFEB;
  --on-navy-2:#C8D3E0;  /* texto secundario sobre azul · 9:1 */
  --amber:#F4B942;      /* detalle; 7.7:1 contra el azul */
  --tint:#EEF2F6;
  --line:#D6DEE8;
  --line-2:#B9C4D2;
  --control:#7D8898;    /* borde de campos y opciones · 3.6:1 */
  --error:#B42318;

  --pad:32px;
  --gutter:24px;
  --cols8:calc((100% - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter));
  --radius:16px;
  --radius-sm:10px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px rgba(14,26,43,.05), 0 4px 12px -4px rgba(14,26,43,.08);
  --shadow:0 2px 4px rgba(14,26,43,.04), 0 24px 48px -24px rgba(14,26,43,.32);
  --shadow-lg:0 4px 8px rgba(14,26,43,.06), 0 32px 64px -24px rgba(14,26,43,.42);
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width:1024px){ :root{ --pad:24px; } }
@media (max-width:640px){ :root{ --pad:16px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:17px; line-height:28px; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3{ margin:0; text-wrap:balance; }
p, li, summary{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
:focus-visible{ outline:3px solid var(--navy); outline-offset:3px; border-radius:4px; }
.plan-main :focus-visible, .quote-intro :focus-visible{ outline-color:var(--amber); }

.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-999px; top:8px; z-index:100; padding:8px 16px; border-radius:8px; background:var(--navy); color:#fff; }
.skip:focus{ left:8px; }

.wrap{ width:100%; max-width:calc(1120px + 2 * var(--pad)); margin:0 auto; padding:0 var(--pad); }
.grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter); }

/* ---------- tipografía ---------- */
h1{ font-size:60px; line-height:64px; font-weight:800; letter-spacing:-.03em; }
h2{ font-size:44px; line-height:52px; font-weight:800; letter-spacing:-.025em; }
@media (max-width:1199px){ h1{ font-size:52px; line-height:56px; } h2{ font-size:40px; line-height:48px; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:13px; line-height:20px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--navy);
}
.eyebrow::before{ content:""; width:24px; height:3px; border-radius:2px; background:var(--amber); }

/* lista con tilde (el tilde es una máscara: toma el color de cada contexto) */
.list{ --lh:24px; display:grid; gap:12px; font-size:16px; line-height:var(--lh); }
.list li, .assurances li{ position:relative; padding-left:32px; }
.list li::before, .assurances li::before{
  content:""; position:absolute; left:0; top:calc((var(--lh, 24px) - 20px) / 2); width:20px; height:20px;
  background-color:var(--navy); -webkit-mask:var(--check) center / 20px no-repeat; mask:var(--check) center / 20px no-repeat;
}

/* ---------- botones y enlaces ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px; border:1.5px solid transparent; border-radius:var(--radius-sm);
  font:inherit; font-size:16px; line-height:24px; font-weight:700; white-space:nowrap;
  text-decoration:none; cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s, transform .15s var(--ease-out);
}
.btn:active{ transform:scale(.97); }
.btn svg{ width:20px; height:20px; flex:none; }
.btn-lg{ min-height:56px; padding:0 32px; font-size:17px; }
.btn-sm{ min-height:40px; padding:0 16px; border-radius:8px; }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-700); }
.btn-ghost{ background:#fff; color:var(--navy); border-color:var(--navy); }
.btn-ghost:hover{ background:var(--navy-50); }
.btn-light{ background:#fff; color:var(--navy); }
.btn-light:hover{ background:var(--navy-50); }

.link{
  position:relative; display:inline-block;
  color:var(--navy); font-weight:700; text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:6px; text-decoration-color:rgba(19,47,76,.3); transition:text-decoration-color .2s;
}
.link:hover{ text-decoration-color:var(--navy); }
.link::before, .wordmark::before{ content:""; position:absolute; inset:-10px -4px; }

/* ---------- encabezado ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  transition:box-shadow .3s;
}
.header.scrolled{ box-shadow:0 1px 0 var(--line), 0 12px 24px -20px rgba(14,26,43,.3); }
.header-row{ display:flex; align-items:center; gap:40px; height:72px; }
.wordmark{ position:relative; font-size:24px; line-height:32px; font-weight:800; letter-spacing:-.04em; color:var(--ink); text-decoration:none; }
.nav{ display:flex; gap:32px; margin-left:auto; }
.nav a{ position:relative; padding:8px 0; font-size:16px; line-height:24px; font-weight:500; color:var(--ink-2); text-decoration:none; transition:color .2s; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:4px; height:2px; border-radius:1px; background:var(--navy);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out);
}
.nav a:hover, .nav a[aria-current="true"]{ color:var(--ink); }
.nav a:hover::after, .nav a[aria-current="true"]::after{ transform:scaleX(1); }
@media (max-width:900px){ .nav{ display:none; } .header-row .btn{ margin-left:auto; } }

/* ---------- secciones ---------- */
.section{ padding:112px 0; }
.tint{ background:var(--tint); }
.section-head{ width:var(--cols8); max-width:100%; margin:0 auto 64px; text-align:center; }
.section-head h2{ margin-top:16px; }
.section-head p:not(.eyebrow){ margin-top:16px; font-size:20px; line-height:32px; color:var(--ink-2); }
/* en los títulos centrados la rayita va a los dos lados, así el rótulo queda en el eje */
.section-head .eyebrow::after{ content:""; width:24px; height:3px; border-radius:2px; background:var(--amber); }

/* ---------- 1 · inicio ---------- */
.hero{ padding:80px 0 112px; }
.hero-grid{ align-items:center; row-gap:56px; }
.hero-text{ grid-column:1 / span 6; }
.hero-media{ grid-column:7 / span 6; }
.hero h1{ margin-top:24px; }
.lede{ margin-top:24px; font-size:20px; line-height:32px; color:var(--ink-2); }
.actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:40px; }
.assurances{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--gutter);
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  font-size:16px; line-height:24px;
}
.assurances strong{ display:block; font-weight:700; }
.assurances span{ display:block; color:var(--ink-2); }

.hero-shot{ position:relative; }
.hero-shot .frame{ width:86%; }
.hero-phone{
  position:absolute; right:0; bottom:-32px; width:28%;
  border:6px solid var(--ink); border-radius:24px; background:#fff; box-shadow:var(--shadow-lg);
}
.hero-media figcaption{ margin-top:16px; font-size:14px; line-height:20px; color:var(--ink-2); }

/* marco de navegador para las capturas */
.frame{ overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); }
.frame-bar{ display:flex; align-items:center; gap:8px; height:32px; padding:0 16px; background:#F3F5F8; border-bottom:1px solid var(--line); }
.frame-bar i{ width:10px; height:10px; border-radius:50%; background:#CBD3DD; }
.frame-bar span{ margin-left:8px; font-size:12px; line-height:16px; font-weight:600; color:var(--ink-2); }

/* ---------- 2 · qué hacemos / precios ----------
   Las tarjetas comparten filas (subgrid): título, precio, lista y botón quedan a la misma altura. */
.plans{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--gutter); }
.plan{
  position:relative; display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:0;
  padding:40px 32px 32px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.plan h3{ font-size:24px; line-height:32px; font-weight:800; letter-spacing:-.015em; }
.plan-for{ margin-top:8px; color:var(--ink-2); }
.price{ margin-top:24px; font-size:40px; line-height:48px; font-weight:800; letter-spacing:-.03em; color:var(--navy); }
.price .from{ font-size:16px; line-height:24px; font-weight:600; letter-spacing:0; color:var(--ink-2); }
.plan-time{ margin-top:4px; font-size:16px; line-height:24px; color:var(--ink-2); }
.plan .list{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
.plan .btn{ align-self:end; margin-top:32px; width:100%; }

.plan-main{ background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:var(--shadow-lg); }
.plan-main .plan-for, .plan-main .plan-time, .plan-main .price .from{ color:var(--on-navy-2); }
.plan-main .price{ color:#fff; }
.plan-main .list{ border-top-color:rgba(255,255,255,.2); }
.plan-main .list li::before{ background-color:var(--amber); }
.plan-flag{
  position:absolute; top:-14px; left:32px; padding:4px 12px; border-radius:999px;
  background:var(--amber); color:var(--navy); font-size:13px; line-height:20px; font-weight:800; letter-spacing:.02em;
}

/* mantenimiento: alineado con las columnas de las tarjetas de arriba */
.care{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--gutter);
  margin-top:64px; padding-top:64px; border-top:1px solid var(--line-2);
}
.care-intro{ padding-top:32px; }
.care-intro h3{ font-size:24px; line-height:32px; font-weight:800; letter-spacing:-.015em; }
.care-intro p{ margin-top:8px; color:var(--ink-2); }
.care-intro .link{ margin-top:24px; }
.care-plan{ padding:32px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.care-name{ font-weight:700; }
.care-plan .price{ margin-top:4px; font-size:32px; line-height:40px; }
.care-plan .list{ margin-top:24px; }

/* ---------- 3 · trabajos ---------- */
.work{ align-items:center; }
.work + .work{ margin-top:112px; }
.work-media{ grid-column:1 / span 7; }
.work-text{ grid-column:9 / span 4; }
.work-flip .work-media{ grid-column:6 / span 7; grid-row:1; }
.work-flip .work-text{ grid-column:1 / span 4; grid-row:1; }
.tag{ display:inline-block; padding:4px 12px; border-radius:999px; background:var(--navy-50); color:var(--navy); font-size:14px; line-height:20px; font-weight:700; }
.work-text h3{ margin-top:16px; font-size:32px; line-height:40px; font-weight:800; letter-spacing:-.025em; }
.work-text > p:not(.tag):not(.note){ margin-top:16px; color:var(--ink-2); }
.work-text .list{ --lh:28px; margin-top:24px; font-size:17px; }
.work-text .link{ margin-top:32px; }
.note{ margin-top:32px; font-size:14px; line-height:20px; color:var(--ink-2); }

/* ---------- 4 · cómo trabajamos (línea de tiempo) ---------- */
.steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:var(--gutter); }
.step{ position:relative; }
.step-n{
  display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:18px; line-height:24px; font-weight:800;
}
/* tramo que une cada paso con el siguiente: de 16 px después del círculo a 16 px antes del próximo */
.step:not(:last-child)::after{
  content:""; position:absolute; top:23px; left:64px; right:-8px; height:2px; border-radius:1px;
  background:rgba(19,47,76,.35); transform-origin:left center;
}
.step h3{ margin-top:24px; font-size:20px; line-height:28px; font-weight:800; letter-spacing:-.01em; }
.step p{ margin-top:8px; font-size:16px; line-height:24px; color:var(--ink-2); }

/* ---------- 5 · preguntas ---------- */
.faq{ width:var(--cols8); max-width:100%; margin:0 auto; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 0; font-size:20px; line-height:28px; font-weight:700; cursor:pointer; list-style:none; transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--navy); }
.faq summary::after{
  content:""; flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--navy-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 10v12M10 16h12' stroke='%23132F4C' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 32px no-repeat;
  transition:transform .35s var(--ease-out), background-color .2s;
}
.faq summary:hover::after{ background-color:var(--navy-100); }
.faq details[open]:not(.closing) summary::after{ transform:rotate(45deg); }
.faq-body{ overflow:hidden; }
.faq-body p{ padding:0 56px 24px 0; color:var(--ink-2); }

/* ---------- 6 · presupuesto ---------- */
.dark{ background:var(--navy); color:#fff; }
.dark .eyebrow{ color:#fff; }
.quote-grid{ align-items:center; row-gap:48px; }
.quote-intro{ grid-column:1 / span 5; }
.quote{ grid-column:7 / span 6; }
.quote-intro h2{ margin-top:16px; }
.quote-intro p:not(.eyebrow){ margin-top:16px; font-size:20px; line-height:32px; color:var(--on-navy-2); }
.quote-intro .alt{ margin-top:32px; font-size:16px; line-height:24px; }
.quote-intro .alt a{ color:#fff; font-weight:700; text-underline-offset:4px; }

.quote{
  position:relative; display:grid; gap:32px; padding:40px; border-radius:var(--radius);
  background:#fff; color:var(--ink); box-shadow:0 40px 80px -32px rgba(0,0,0,.5);
}
.quote::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.quote.flash::after{ animation:ring 1.6s var(--ease-out); }
@keyframes ring{
  0%{ box-shadow:0 0 0 0 rgba(244,185,66,0); }
  20%{ box-shadow:0 0 0 8px rgba(244,185,66,.95); }
  100%{ box-shadow:0 0 0 16px rgba(244,185,66,0); }
}
.quote fieldset{ min-width:0; margin:0; padding:0; border:0; }
.quote legend{ margin-bottom:16px; padding:0; font-size:18px; line-height:28px; font-weight:700; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips label{ position:relative; }
.chips input{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.chips span{
  display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:999px;
  border:1.5px solid var(--control); background:#fff; color:var(--ink); font-size:16px; line-height:24px; font-weight:600;
  transition:background-color .2s, border-color .2s, color .2s, transform .15s var(--ease-out);
}
.chips label:hover span{ border-color:var(--navy); }
.chips label:active span{ transform:scale(.96); }
.chips input:checked + span{ background:var(--navy); border-color:var(--navy); color:#fff; }
.chips input:focus-visible + span{ outline:3px solid var(--navy); outline-offset:2px; }
.q-error{ margin-top:12px; font-size:16px; line-height:24px; font-weight:700; color:var(--error); }
.field{ display:grid; gap:8px; }
.field > span{ font-size:18px; line-height:28px; font-weight:700; }
.field em{ font-style:normal; font-size:16px; font-weight:500; color:var(--ink-2); }
.field input{
  width:100%; min-width:0; height:48px; padding:0 16px; border:1.5px solid var(--control); border-radius:var(--radius-sm);
  background:#fff; color:var(--ink); font:inherit; font-size:17px; transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder{ color:#6B7584; }
.field input:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 4px rgba(19,47,76,.15); }
.quote .btn{ width:100%; }

/* ---------- pie ---------- */
.footer{ padding:32px 0; }
.footer-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 32px; }
.footer .wordmark{ font-size:20px; line-height:28px; }
.footer p{ font-size:16px; line-height:24px; color:var(--ink-2); }
.footer-copy{ margin-left:auto; }

/* ---------- accesos flotantes ---------- */
.fab, .mobile-cta{ visibility:hidden; transition:transform .45s var(--ease-out), opacity .3s, visibility 0s .45s; }
.fab.show, .mobile-cta.show{ visibility:visible; transition:transform .45s var(--ease-out), opacity .3s, visibility 0s; }
.fab{
  position:fixed; right:32px; bottom:32px; z-index:40; display:none; align-items:center; gap:8px;
  min-height:56px; padding:0 24px; border-radius:999px; background:var(--navy); color:#fff;
  font-size:16px; line-height:24px; font-weight:700; text-decoration:none;
  box-shadow:0 16px 32px -12px rgba(14,26,43,.55); transform:translateY(calc(100% + 48px));
}
.fab:hover{ background:var(--navy-700); }
.fab svg{ width:20px; height:20px; }
.fab.show{ transform:none; }
@media (min-width:821px){ .fab{ display:inline-flex; } }
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line);
  transform:translateY(110%);
}
.mobile-cta.show{ transform:none; }
.mobile-cta .btn{ padding:0 16px; }
.mobile-cta .btn-primary{ flex:1; }
@media (max-width:820px){ .mobile-cta{ display:flex; gap:8px; } .footer{ padding-bottom:104px; } }
/* en pantallas muy angostas el botón de WhatsApp queda sólo con el ícono */
@media (max-width:359px){ .mobile-cta [data-label]{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } }

/* ---------- movimiento ----------
   Cada bloque aparece al entrar en pantalla (main.js le pone .is-in y un retraso escalonado --d).
   Con "reducir movimiento" del sistema se conserva el fundido, sin desplazamientos. */
@keyframes rise{ from{ opacity:0; transform:translateY(32px); } }
@keyframes fade{ from{ opacity:0; } }
@keyframes phone-in{ from{ opacity:0; transform:translate(24px, 64px) rotate(4deg); } }
@keyframes settle{ from{ transform:scale(1.08); } }
@keyframes pop{ from{ opacity:0; transform:scale(.4); } }
@keyframes draw-x{ from{ transform:scaleX(0); } }
@keyframes draw-y{ from{ transform:scaleY(0); } }

.js .reveal:not(.is-in){ opacity:0; }
.js .reveal.is-in{ animation:rise .9s var(--ease-out) var(--d, 0ms) backwards; }
.js .hero-media.is-in .hero-phone{ animation:phone-in 1.1s var(--ease-out) calc(var(--d, 0ms) + 400ms) backwards; }
.js .is-in .frame img{ animation:settle 1.8s var(--ease-out) var(--d, 0ms) backwards; }
.js .step.is-in .step-n{ animation:pop .7s cubic-bezier(.34,1.56,.64,1) var(--d, 0ms) backwards; }
.js .step.is-in::after{ animation:draw-x .8s var(--ease-out) calc(var(--d, 0ms) + 350ms) backwards; }

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .plan, .care-plan{ transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
  .plan:hover, .care-plan:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal.is-in{ animation-name:fade; animation-duration:.7s; }
  .js .hero-media.is-in .hero-phone, .js .step.is-in .step-n, .js .step.is-in::after{ animation-name:fade; }
  .js .is-in .frame img{ animation:none; }
  .fab, .mobile-cta{ transform:none; opacity:0; }
  .fab.show, .mobile-cta.show{ transform:none; opacity:1; }
  .btn:active, .chips label:active span{ transform:none; }
}

@media print{
  .js .reveal{ opacity:1 !important; animation:none !important; }
  .header, .fab, .mobile-cta{ display:none !important; }
}

/* ---------- tableta ---------- */
@media (max-width:1024px){
  .section{ padding:96px 0; }
  .hero{ padding:56px 0 104px; }
  .hero-text, .hero-media{ grid-column:1 / -1; }
  .hero-text{ max-width:720px; }
  .work, .quote-grid{ row-gap:40px; }
  .work .work-media, .work .work-text{ grid-column:1 / -1; grid-row:auto; }
  .work-text{ max-width:640px; }
  .quote-intro, .quote{ grid-column:1 / -1; }
  .quote-intro{ max-width:640px; }

  /* la línea de tiempo pasa a vertical */
  .steps{ grid-template-columns:minmax(0,1fr); row-gap:32px; width:var(--cols8); max-width:100%; margin:0 auto; }
  .step{ display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:24px; }
  .step-n{ grid-row:1 / span 2; }
  .step h3{ margin-top:12px; }
  .step:not(:last-child)::after{ top:64px; bottom:-16px; left:23px; right:auto; width:2px; height:auto; transform-origin:center top; }
  .js .step.is-in::after{ animation-name:draw-y; }
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){ .js .step.is-in::after{ animation-name:fade; } }

@media (max-width:900px){
  .plans{ grid-template-columns:minmax(0,1fr); row-gap:40px; max-width:560px; margin:0 auto; }
  .plan{ display:flex; flex-direction:column; grid-row:auto; }
  .care{ grid-template-columns:minmax(0,1fr); row-gap:24px; max-width:560px; margin-left:auto; margin-right:auto; }
  .care-intro{ padding-top:0; }
}

/* ---------- celular ---------- */
@media (max-width:640px){
  body{ font-size:16px; line-height:24px; }
  h1{ font-size:40px; line-height:44px; }
  h2{ font-size:32px; line-height:40px; }
  .header-row{ height:64px; }
  .header-row .btn-sm{ min-height:44px; }
  .wordmark{ font-size:22px; }
  .section{ padding:72px 0; }
  .section-head, .faq, .steps{ width:100%; }
  .section-head{ margin-bottom:40px; }
  .section-head p:not(.eyebrow){ font-size:17px; line-height:28px; }
  .hero{ padding:40px 0 80px; }
  .hero h1{ margin-top:16px; }
  .lede{ margin-top:16px; font-size:18px; line-height:28px; }
  .actions{ margin-top:32px; }
  .actions .btn{ flex:1 1 100%; }
  .assurances{ grid-template-columns:minmax(0,1fr); row-gap:12px; margin-top:32px; }
  .assurances strong, .assurances span{ display:inline; }
  .hero-shot .frame{ width:88%; }
  .hero-phone{ bottom:-24px; border-width:4px; border-radius:16px; }
  /* el teléfono ocupa el 28 % derecho y cuelga del marco: la leyenda corta antes para no quedar tapada */
  .hero-media figcaption{ max-width:68%; text-wrap:balance; }
  .plan{ padding:32px 24px 24px; }
  .plan-flag{ left:24px; }
  .price{ font-size:36px; line-height:44px; }
  .care-plan{ padding:24px; }
  .work + .work{ margin-top:80px; }
  .work-text h3{ font-size:30px; line-height:36px; }
  .work-text .list{ --lh:24px; font-size:16px; }
  .faq summary{ padding:20px 0; font-size:17px; line-height:24px; }
  .faq-body p{ padding-right:0; }
  .quote-intro p:not(.eyebrow){ font-size:17px; line-height:28px; }
  .quote{ padding:24px; }
  .footer-copy{ margin-left:0; }
}