/* ============================================================
   drandros.com — Dr. Andros Rodríguez López
   Sistema visual: "Augen Pro" — clínico, ingrávido, azul señal
   ============================================================ */

:root{
  /* Colors */
  --color-off-black:#0f1012;
  --color-pure-black:#020201;
  --color-off-white:#f2f2f4;
  --color-pure-white:#fdfdfd;
  --color-steel-gray:#5e5e5e;
  --color-ash-gray:#8f8f8f;
  --color-signal-blue:#0071e3;

  /* Surfaces */
  --surface-canvas:#f2f2f4;
  --surface-panel:#fdfdfd;
  --surface-dark:#0f1012;

  /* Borders */
  --hairline:0.5px solid rgba(0,0,0,.06);
  --hairline-strong:0.5px solid rgba(0,0,0,.12);
  --hairline-blue:0.5px solid var(--color-signal-blue);
  --hairline-invert:0.5px solid rgba(255,255,255,.12);

  /* Type */
  --font-sans:'Inter','PP Neue Montreal',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --text-caption:10px;
  --text-micro:12px;
  --text-small:13px;
  --text-label:14px;
  --text-body:16px;
  --text-subheading:18px;
  --text-heading:27px;
  --w350:350;
  --w400:400;

  /* Spacing */
  --s4:4px; --s6:6px; --s10:10px; --s11:11px; --s22:22px; --s30:30px;
  --s34:34px; --s35:35px; --s50:50px; --s69:69px; --s94:94px;
  --s113:113px; --s130:130px; --s144:144px; --s220:220px;

  /* Layout */
  --page-max-width:1200px;
  --section-gap:94px;
  --card-padding:69px;
  --gutter:30px;

  /* Radii */
  --r-hairline:1.8px;
  --r-nav:10px;
  --r-button:26px;
  --r-card:54px;
  --r-container:63px;
  --r-pill:9999px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.55s;
}

*,*::before,*::after{box-sizing:border-box}

html{
  color-scheme:light;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:104px;
}

body{
  margin:0;
  background:var(--surface-canvas);
  color:var(--color-off-black);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  font-weight:var(--w350);
  line-height:1.2;
  letter-spacing:-.02em;
  font-feature-settings:"ss01" on,"ss02" on,"cv01" on,"cv11" on;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4,h5,h6{font-weight:var(--w350);letter-spacing:-.02em;line-height:1.08}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
a{color:inherit;text-decoration:none}

::selection{background:rgba(0,113,227,.14);color:var(--color-pure-black)}

:focus-visible{
  outline:1px solid var(--color-signal-blue);
  outline-offset:3px;
  border-radius:var(--r-hairline);
}

/* ---------- Primitives ---------- */

.shell{
  width:100%;
  max-width:var(--page-max-width);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:var(--section-gap)}
.section--tight{padding-block:calc(var(--section-gap) * .62)}

.eyebrow{
  font-size:var(--text-micro);
  line-height:1.2;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--color-ash-gray);
}

.display{
  font-size:clamp(38px,6.4vw,76px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:var(--w350);
}

.title{
  font-size:clamp(27px,3.4vw,44px);
  line-height:1.08;
  letter-spacing:-.03em;
}

.subtitle{font-size:var(--text-subheading);line-height:1.2;letter-spacing:-.02em}

.lede{
  font-size:var(--text-subheading);
  line-height:1.5;
  color:var(--color-steel-gray);
  max-width:62ch;
}

.body{font-size:var(--text-body);line-height:1.55;color:var(--color-steel-gray);max-width:66ch}
.fine{font-size:var(--text-micro);line-height:1.5;color:var(--color-ash-gray)}

.section-head{
  display:grid;
  gap:var(--s22);
  margin-bottom:var(--s69);
  max-width:820px;
}
.section-head .eyebrow + .title{margin-top:calc(var(--s10) * -1 + 4px)}

/* ---------- Tags, links, buttons ---------- */

.tag{
  display:inline-flex;
  align-items:center;
  gap:var(--s6);
  border-radius:var(--r-pill);
  border:var(--hairline-blue);
  color:var(--color-signal-blue);
  font-size:var(--text-micro);
  line-height:1;
  padding:6px var(--s10);
  white-space:nowrap;
  background:transparent;
}
.tag--invert{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.72)}

.link{
  color:var(--color-signal-blue);
  display:inline-flex;
  align-items:center;
  gap:var(--s6);
  border-bottom:0.5px solid transparent;
  transition:border-color .3s var(--ease),opacity .3s var(--ease);
  line-height:1.3;
}
.link:hover{border-bottom-color:var(--color-signal-blue)}
.link svg{flex:none;width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.2}

.ghost{
  color:var(--color-off-black);
  border-bottom:0.5px solid transparent;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.ghost:hover{border-bottom-color:currentColor}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s10);
  border-radius:var(--r-button);
  border:var(--hairline-strong);
  background:transparent;
  color:var(--color-pure-black);
  font-size:var(--text-small);
  font-weight:var(--w400);
  line-height:1;
  padding:15px var(--s22);
  cursor:pointer;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:rgba(12,13,15,.05);border-color:rgba(0,0,0,.2)}
.btn:active{transform:scale(.985)}
.btn svg{width:13px;height:13px;stroke:var(--color-signal-blue);fill:none;stroke-width:1.3;flex:none}

.btn--solid{background:rgba(12,13,15,.05);border-color:transparent}
.btn--solid:hover{background:rgba(12,13,15,.09)}

.btn--ink{background:var(--color-off-black);color:var(--color-pure-white);border-color:transparent}
.btn--ink:hover{background:#000;border-color:transparent}
.btn--ink svg{stroke:#fff}

.btn--invert{border-color:rgba(255,255,255,.16);color:var(--color-pure-white)}
.btn--invert:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28)}
.btn--invert svg{stroke:#fff}

.btn--wide{width:100%}

/* ---------- Announcement ---------- */

/* El aviso y el nav viven dentro de un contenedor sticky. Nada usa
   position:fixed con top:0, que se solapa con cualquier barra que el
   navegador o un visor incrustado pongan encima. */
.topbar{
  position:sticky;
  top:0;
  z-index:70;
}

.announce{
  background:var(--surface-panel);
  border-bottom:var(--hairline);
  overflow:hidden;
  max-height:120px;
  transition:max-height .5s var(--ease),opacity .35s var(--ease);
}
.announce__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s10);
  padding:9px var(--gutter);
  font-size:var(--text-micro);
  color:var(--color-steel-gray);
  text-align:center;
}
.announce .tag{padding:3px 8px;font-size:var(--text-caption)}
.announce.is-hidden{max-height:0;opacity:0;border-bottom-color:transparent}

/* ---------- Navigation ---------- */

.nav{
  width:calc(100% - var(--s22) * 2);
  max-width:var(--page-max-width);
  margin-inline:auto;
  padding-top:var(--s22);
  transition:padding-top .45s var(--ease);
}
.nav.is-raised{padding-top:var(--s10)}

.nav__bar{
  display:flex;
  align-items:center;
  gap:var(--s22);
  background:rgba(253,253,253,.82);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border:var(--hairline);
  border-radius:var(--r-nav);
  padding:var(--s11) var(--s22);
  transition:border-color .4s var(--ease),background-color .4s var(--ease);
}
.nav.is-scrolled .nav__bar{border-color:rgba(0,0,0,.1)}

.brand{
  display:flex;
  align-items:center;
  gap:var(--s10);
  margin-right:auto;
  min-width:0;
}
.brand__mark{width:15px;height:15px;fill:var(--color-off-black);flex:none;transition:transform .6s var(--ease)}
.brand:hover .brand__mark{transform:rotate(90deg)}
.brand__name{font-size:var(--text-body);line-height:1.1;white-space:nowrap}
.brand__suffix{color:var(--color-ash-gray)}

.nav__links{display:flex;align-items:center;gap:var(--s22)}
.nav__links a{
  font-size:var(--text-body);
  color:var(--color-off-black);
  position:relative;
  padding-block:2px;
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:0.5px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__links a:hover::after,.nav__links a[aria-current="true"]::after{transform:scaleX(1)}
.nav__links a[aria-current="true"]{color:var(--color-signal-blue)}

.nav__aside{display:flex;align-items:center;gap:var(--s10)}

.lang{
  display:inline-flex;
  align-items:center;
  border:var(--hairline-strong);
  border-radius:var(--r-pill);
  padding:2px;
  gap:2px;
}
.lang button,.lang a{
  border:0;
  background:transparent;
  border-radius:var(--r-pill);
  padding:5px var(--s10);
  font-size:var(--text-micro);
  font-weight:var(--w400);
  color:var(--color-ash-gray);
  cursor:pointer;
  line-height:1;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.lang button[aria-pressed="true"],.lang a[aria-current="page"]{color:var(--color-pure-black);background:rgba(12,13,15,.06)}

.nav__cta{padding:11px 18px;font-size:var(--text-micro)}

.burger{
  display:none;
  width:36px;height:36px;
  border:var(--hairline-strong);
  border-radius:var(--r-pill);
  background:transparent;
  cursor:pointer;
  position:relative;
}
.burger span{
  position:absolute;
  left:11px;right:11px;
  height:0.5px;
  background:var(--color-off-black);
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:20px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}

.nav__drawer{
  display:none;
  margin-top:var(--s6);
  background:rgba(253,253,253,.94);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border:var(--hairline);
  border-radius:var(--r-button);
  padding:var(--s22);
  gap:var(--s22);
  flex-direction:column;
}
.nav__drawer.is-open{display:flex}
.nav__drawer a{font-size:var(--text-subheading)}
.nav__drawer .btn{margin-top:var(--s6)}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  padding-top:var(--s69);
  padding-bottom:var(--s94);
  overflow:hidden;
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--s69);
  align-items:center;
}

.hero__label{display:flex;align-items:center;gap:var(--s10);flex-wrap:wrap;margin-bottom:var(--s30)}

.hero h1{margin-bottom:var(--s30)}
.hero h1 em{font-style:normal;color:var(--color-ash-gray)}

.hero__lede{margin-bottom:var(--s35)}
.hero__actions{display:flex;align-items:center;gap:var(--s22);flex-wrap:wrap}

.hero__meta{
  margin-top:var(--s50);
  display:flex;
  gap:var(--s30);
  flex-wrap:wrap;
  font-size:var(--text-micro);
  color:var(--color-ash-gray);
}
.hero__meta li{display:flex;align-items:center;gap:var(--s6)}
.hero__meta svg{width:12px;height:12px;stroke:var(--color-signal-blue);fill:none;stroke-width:1.2}

/* Hero visual — abstract arch render, no photography */
.hero__visual{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.hero__visual svg{width:100%;height:auto;overflow:visible}
.arch-line{fill:none;stroke:var(--color-off-black);stroke-width:.6;stroke-linecap:round;opacity:.9}
.arch-line--soft{stroke:rgba(15,16,18,.22)}
.arch-line--blue{stroke:var(--color-signal-blue)}
.arch-dot{fill:var(--color-signal-blue)}
.arch-grid{stroke:rgba(15,16,18,.07);stroke-width:.4}

/* ---------- Stats ---------- */

.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:var(--hairline);
  border-bottom:var(--hairline);
}
.stats li{padding:var(--s35) 0;display:grid;gap:var(--s10);position:relative}
.stats li + li{padding-left:var(--s30)}
.stats li + li::before{
  content:"";
  position:absolute;
  left:0;top:var(--s35);bottom:var(--s35);
  width:0.5px;background:rgba(0,0,0,.06);
}
.stats__num{font-size:clamp(27px,3vw,38px);line-height:1;letter-spacing:-.03em}
.stats__num sup{font-size:.45em;vertical-align:super;color:var(--color-signal-blue);letter-spacing:0}
.stats__cap{font-size:var(--text-micro);color:var(--color-ash-gray);line-height:1.4;max-width:22ch}

/* ---------- Cards ---------- */

.card{
  background:var(--surface-panel);
  border:var(--hairline);
  border-radius:var(--r-card);
  padding:var(--card-padding);
}

.grid{display:grid;gap:var(--s22)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Treatments */
.treat{
  background:var(--surface-panel);
  border:var(--hairline);
  border-radius:var(--r-card);
  padding:var(--s35);
  display:flex;
  flex-direction:column;
  gap:var(--s22);
  min-height:290px;
  transition:border-color .45s var(--ease),transform .45s var(--ease),background-color .45s var(--ease);
}
.treat:hover{border-color:rgba(0,113,227,.35);transform:translateY(-3px)}
.treat__icon{width:26px;height:26px;stroke:var(--color-off-black);fill:none;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.treat h3{font-size:var(--text-subheading);line-height:1.2}
.treat p{font-size:var(--text-label);line-height:1.5;color:var(--color-steel-gray)}
.treat__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s10);padding-top:var(--s22);border-top:var(--hairline)}
.treat__price{font-size:var(--text-micro);color:var(--color-ash-gray)}
.treat__price b{font-weight:var(--w400);color:var(--color-off-black)}

/* ---------- Price table ---------- */

.pricing{
  background:var(--surface-panel);
  border:var(--hairline);
  border-radius:var(--r-container);
  padding:var(--s50) var(--s50) var(--s35);
  overflow:hidden;
}
.ptable{width:100%;border-collapse:collapse;font-size:var(--text-label)}
.ptable th{
  text-align:left;
  font-weight:var(--w400);
  font-size:var(--text-micro);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--color-ash-gray);
  padding-bottom:var(--s11);
  border-bottom:var(--hairline-strong);
  white-space:nowrap;
}
.ptable td{padding:var(--s22) 0;border-bottom:var(--hairline);vertical-align:middle}
.ptable tr:last-child td{border-bottom:0}
.ptable td:first-child{color:var(--color-off-black);font-size:var(--text-body);padding-right:var(--s22)}
.ptable .c-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ptable .c-us{color:var(--color-ash-gray);text-decoration:line-through;text-decoration-thickness:.5px}
.ptable .c-mx{color:var(--color-off-black)}
.ptable .c-save{text-align:right}
.ptable tbody tr{transition:background-color .3s var(--ease)}
.save{
  display:inline-flex;
  border:var(--hairline-blue);
  color:var(--color-signal-blue);
  border-radius:var(--r-pill);
  padding:4px var(--s10);
  font-size:var(--text-micro);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.pricing__foot{display:flex;justify-content:space-between;gap:var(--s22);flex-wrap:wrap;padding-top:var(--s30)}

/* ---------- Process ---------- */

.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s22)}
.step{
  border-top:1px solid rgba(0,0,0,.14);
  padding-top:var(--s22);
  display:grid;
  gap:var(--s11);
  align-content:start;
}
.step__n{font-size:var(--text-caption);letter-spacing:.06em;color:var(--color-signal-blue)}
.step h3{font-size:var(--text-subheading)}
.step p{font-size:var(--text-label);line-height:1.5;color:var(--color-steel-gray)}

/* ---------- Feature list ---------- */

.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s22) var(--s50)}
.feature{display:grid;gap:var(--s10);padding-top:var(--s22);border-top:var(--hairline)}
.feature h4{font-size:var(--text-body)}
.feature p{font-size:var(--text-label);line-height:1.5;color:var(--color-steel-gray)}
.quote{
  background:var(--surface-panel);
  border:var(--hairline);
  border-radius:var(--r-card);
  padding:var(--s35);
  display:flex;
  flex-direction:column;
  gap:var(--s22);
}
.quote p{font-size:var(--text-body);line-height:1.5;color:var(--color-off-black)}
.quote footer{margin-top:auto;display:grid;gap:2px;padding-top:var(--s22);border-top:var(--hairline)}
.quote cite{font-style:normal;font-size:var(--text-label)}
.quote span{font-size:var(--text-micro);color:var(--color-ash-gray)}
.stars{display:flex;gap:3px}
.stars svg{width:11px;height:11px;fill:var(--color-signal-blue)}

/* ---------- FAQ ---------- */

.faq{border-top:var(--hairline)}
.faq details{border-bottom:var(--hairline)}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:var(--s30) var(--s50) var(--s30) 0;
  font-size:var(--text-subheading);
  position:relative;
  transition:color .3s var(--ease);
  display:block;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--color-signal-blue)}
.faq summary::after,.faq summary::before{
  content:"";
  position:absolute;
  right:var(--s10);
  top:50%;
  background:var(--color-signal-blue);
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.faq summary::before{width:11px;height:0.5px;margin-top:-.25px;transform:translateX(0)}
.faq summary::after{width:0.5px;height:11px;margin-top:-5.5px;right:calc(var(--s10) + 5.25px)}
.faq details[open] summary::after{transform:scaleY(0)}
.faq__body{padding:0 var(--s69) var(--s30) 0}
.faq__body p{font-size:var(--text-body);line-height:1.55;color:var(--color-steel-gray);max-width:72ch}

/* ---------- Contact ---------- */

.contact{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s22);
}
.panel{
  background:var(--surface-panel);
  border:var(--hairline);
  border-radius:var(--r-card);
  padding:var(--s50);
}
.panel--dark{background:var(--surface-dark);color:var(--color-pure-white);border-color:transparent}
.panel--dark .eyebrow{color:rgba(255,255,255,.45)}
.panel--dark .body,.panel--dark p{color:rgba(255,255,255,.62)}

.field{display:grid;gap:var(--s10);margin-bottom:var(--s22)}
.field label{font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.04em;color:var(--color-ash-gray)}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--surface-canvas);
  border:var(--hairline);
  border-radius:var(--r-button);
  padding:15px var(--s22);
  font-size:var(--text-body);
  font-weight:var(--w350);
  color:var(--color-off-black);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
  appearance:none;
}
.field textarea{border-radius:26px;min-height:104px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--color-ash-gray)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-signal-blue);background:var(--surface-panel)}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230071e3' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--s22) center;
  background-size:11px;
  padding-right:var(--s50);
}

.infoline{display:flex;gap:var(--s22);padding:var(--s22) 0;border-bottom:var(--hairline-invert);align-items:baseline}
.infoline:last-of-type{border-bottom:0}
.infoline dt{flex:0 0 96px;font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.45)}
.infoline dd{margin:0;font-size:var(--text-body);line-height:1.5;color:var(--color-pure-white)}
.infoline dd small{display:block;font-size:var(--text-micro);color:rgba(255,255,255,.5);margin-top:3px}

.mapcard{
  margin-top:var(--s30);
  border:var(--hairline-invert);
  border-radius:var(--r-button);
  padding:var(--s22);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s22);
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.mapcard:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.22)}
.mapcard__t{font-size:var(--text-label);color:var(--color-pure-white)}
.mapcard__s{font-size:var(--text-micro);color:rgba(255,255,255,.5);margin-top:3px}

/* ---------- CTA band ---------- */

.band{
  background:var(--surface-dark);
  border-radius:var(--r-container);
  padding:var(--s113) var(--s69);
  color:var(--color-pure-white);
  text-align:center;
  display:grid;
  gap:var(--s30);
  justify-items:center;
}
.band .title{max-width:20ch}
.band p{color:rgba(255,255,255,.6);max-width:52ch;line-height:1.55}
.band__actions{display:flex;gap:var(--s11);flex-wrap:wrap;justify-content:center;margin-top:var(--s10)}

/* ---------- Footer ---------- */

.footer{background:var(--surface-dark);color:var(--color-pure-white);padding-top:var(--s94);margin-top:var(--section-gap)}
.footer__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s50);padding-bottom:var(--s69)}
.footer__brand{display:flex;align-items:center;gap:var(--s10);margin-bottom:var(--s22)}
.footer__brand svg{width:15px;height:15px;fill:var(--color-pure-white)}
.footer p{font-size:var(--text-label);line-height:1.6;color:rgba(255,255,255,.55);max-width:34ch}
.footer h5{font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.4);margin-bottom:var(--s22);font-weight:var(--w400)}
.footer__links{display:grid;gap:var(--s11)}
.footer__links a{font-size:var(--text-label);color:rgba(255,255,255,.72);transition:color .3s var(--ease)}
.footer__links a:hover{color:var(--color-pure-white)}
.footer__bottom{
  border-top:var(--hairline-invert);
  padding-block:var(--s30) var(--s50);
  display:flex;
  justify-content:space-between;
  gap:var(--s22);
  flex-wrap:wrap;
  font-size:var(--text-caption);
  letter-spacing:.03em;
  color:rgba(255,255,255,.38);
  text-transform:uppercase;
}

/* ---------- Floating WhatsApp ---------- */

.fab{
  position:fixed;
  right:var(--s22);
  bottom:var(--s22);
  z-index:65;
  display:inline-flex;
  align-items:center;
  gap:var(--s10);
  background:var(--color-off-black);
  color:var(--color-pure-white);
  border-radius:var(--r-pill);
  padding:13px 20px;
  font-size:var(--text-micro);
  font-weight:var(--w400);
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),background-color .3s var(--ease);
}
.fab.is-visible{opacity:1;transform:none;pointer-events:auto}
.fab:hover{background:#000}
.fab svg{width:14px;height:14px;fill:currentColor}

/* ---------- Reveal ---------- */

/* El contenido es visible por defecto. Solo se esconde para animarlo
   si el JavaScript llegó a ejecutarse y marcó <html class="reveal">.
   Sin JS —o si el JS falla— la página se lee completa igual. */
.reveal [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.reveal [data-reveal].is-in{opacity:1;transform:none}

/* ---------- Responsive ---------- */

@media (max-width:1040px){
  :root{--section-gap:78px;--card-padding:50px}
  .hero__grid{grid-template-columns:1fr;gap:var(--s50)}
  .hero__visual{max-width:460px;margin-inline:auto;width:100%}
  .doctor{grid-template-columns:1fr;gap:var(--s50)}
  .portrait{max-width:420px}
  .grid--4,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quotes{grid-template-columns:1fr;gap:var(--s22)}
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s35)}
}

@media (max-width:860px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .burger{display:block}
  .contact{grid-template-columns:1fr}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width:720px){
  :root{--section-gap:64px;--gutter:22px;--card-padding:35px;--r-card:38px;--r-container:38px}
  html{scroll-padding-top:88px}
  .hero{padding-top:calc(var(--s113) + var(--s22))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats li{padding:var(--s30) 0}
  .stats li + li{padding-left:0}
  .stats li:nth-child(even){padding-left:var(--s22)}
  .stats li + li::before{display:none}
  .stats li:nth-child(even)::before{display:block;left:0;top:var(--s30);bottom:var(--s30)}
  .stats li:nth-child(3),.stats li:nth-child(4){border-top:var(--hairline)}.grid--3,.steps,.features{grid-template-columns:1fr}
  .pricing{padding:var(--s35) var(--s22) var(--s22)}
  .ptable td:first-child{font-size:var(--text-label)}
  .ptable .c-us{display:none}
  .ptable th.c-us{display:none}
  .band{padding:var(--s69) var(--s30)}
  .faq summary{font-size:var(--text-body);padding-right:var(--s35)}
  .faq__body{padding-right:0}
  .fab{right:var(--s11);bottom:var(--s11)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal [data-reveal]{opacity:1;transform:none}}

@media print{
  .nav,.announce,.fab{display:none}
  body{background:#fff}}

/* ============================================================
   El doctor como protagonista — bloques añadidos
   ============================================================ */

/* Retrato en el hero ---------------------------------------- */
.hero__portrait{
  position:relative;
  border-radius:var(--r-card);
  border:var(--hairline);
  background:var(--surface-panel);
  aspect-ratio:4/5;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.hero__portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%}

.hero__portrait-ph{
  display:grid;
  place-items:center;
  gap:var(--s30);
  padding:var(--s50);
  text-align:center;
  width:100%;
}
.hero__portrait-ph svg{width:62%;max-width:230px;height:auto;overflow:visible}
.monogram{
  width:96px;height:96px;
  border-radius:var(--r-pill);
  border:var(--hairline-strong);
  display:grid;place-items:center;
  font-size:var(--text-subheading);
  letter-spacing:.06em;
  color:var(--color-off-black);
}

/* Placa de credenciales bajo el retrato --------------------- */
.plate{
  position:absolute;
  left:var(--s22);right:var(--s22);bottom:var(--s22);
  background:rgba(253,253,253,.86);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border:var(--hairline);
  border-radius:var(--r-button);
  padding:var(--s22);
  display:grid;
  gap:var(--s6);
}
.plate__name{font-size:var(--text-body);line-height:1.2}
.plate__role{font-size:var(--text-micro);color:var(--color-steel-gray);line-height:1.4}
.plate__lic{font-size:var(--text-caption);color:var(--color-ash-gray);letter-spacing:.03em}

/* Firma / nombre en el hero --------------------------------- */
.hero__name{display:grid;gap:var(--s11);margin-bottom:var(--s30)}
.hero__name .display{margin:0}
.hero__role{
  font-size:clamp(18px,2.2vw,27px);
  line-height:1.2;
  letter-spacing:-.025em;
  color:var(--color-steel-gray);
  max-width:24ch;
}

/* Datos rápidos — extraíbles por buscadores de IA ------------ */
.keyfacts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--s50);
  border-top:var(--hairline);
}
.keyfacts div{
  display:flex;
  gap:var(--s22);
  align-items:baseline;
  padding:var(--s22) 0;
  border-bottom:var(--hairline);
}
.keyfacts dt{
  flex:0 0 108px;
  font-size:var(--text-micro);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--color-ash-gray);
}
.keyfacts dd{margin:0;font-size:var(--text-label);line-height:1.5;color:var(--color-off-black)}

/* Biografía --------------------------------------------------- */
.bio{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s69);align-items:start}
.bio__body{display:grid;gap:var(--s22)}
.bio__body p{font-size:var(--text-body);line-height:1.6;color:var(--color-steel-gray);max-width:64ch}
.bio__body p:first-of-type{color:var(--color-off-black);font-size:var(--text-subheading);line-height:1.5}


/* Respuesta directa — primera frase autocontenida para IA ---- */
.faq__body .answer{
  color:var(--color-off-black);
  font-size:var(--text-body);
  line-height:1.55;
}
.faq__body .answer + p{margin-top:var(--s11)}

/* Cita del doctor -------------------------------------------- */
.pullquote{
  border-left:1px solid var(--color-signal-blue);
  padding:var(--s10) 0 var(--s10) var(--s30);
  margin-top:var(--s35);
}
.pullquote p{
  font-size:var(--text-subheading);
  line-height:1.45;
  color:var(--color-off-black);
  max-width:46ch;
}
.pullquote footer{margin-top:var(--s11);font-size:var(--text-micro);color:var(--color-ash-gray)}

@media (max-width:1040px){
  .bio{grid-template-columns:1fr;gap:var(--s50)}
  .hero__portrait{max-width:440px;margin-inline:auto;width:100%}}
@media (max-width:720px){
  .keyfacts{grid-template-columns:1fr;gap:0}
  .keyfacts dt{flex:0 0 96px}
  .plate{left:var(--s11);right:var(--s11);bottom:var(--s11);padding:var(--s11) var(--s22)}}

/* ============================================================
   Membresía profesional — American Dental Association
   ============================================================ */
.member{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--s35);
  align-items:center;
  background:var(--surface-panel);
  border:var(--hairline);
  border-radius:var(--r-card);
  padding:var(--s35) var(--s50);
  margin-top:var(--s50);
}
.member__seal{width:54px;height:54px;flex:none}
.member__seal circle,.member__seal path,.member__seal line{fill:none;stroke:var(--color-off-black);stroke-width:.8}
.member__seal .seal-ring{stroke:rgba(15,16,18,.18)}
.member__seal .seal-star{fill:var(--color-signal-blue);stroke:none}
.member h3{font-size:var(--text-subheading);line-height:1.25;max-width:36ch}
.member h3 + p{margin-top:var(--s10)}
.member p{font-size:var(--text-label);line-height:1.5;color:var(--color-steel-gray);max-width:56ch}
.member__id{
  display:grid;
  gap:var(--s10);
  text-align:right;
  border-left:var(--hairline);
  padding-left:var(--s35);
}
.member__id dt{
  font-size:var(--text-caption);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--color-ash-gray);
  margin-bottom:2px;
}
.member__id dd{
  margin:0;
  font-size:var(--text-body);
  line-height:1.1;
  color:var(--color-off-black);
  font-variant-numeric:tabular-nums;
}
.member__id .is-active{color:var(--color-signal-blue);font-size:var(--text-micro)}

@media (max-width:1040px){
  .member{grid-template-columns:auto minmax(0,1fr);gap:var(--s22) var(--s30);padding:var(--s35)}
  .member__id{
    grid-column:1 / -1;
    text-align:left;
    border-left:0;
    padding-left:0;
    padding-top:var(--s22);
    border-top:var(--hairline);
    grid-template-columns:repeat(2,minmax(0,1fr));
  }}
@media (max-width:720px){
  .member{grid-template-columns:1fr;gap:var(--s22)}
  .member__id{grid-template-columns:1fr;gap:var(--s11)}}

/* ============================================================
   Carrusel de reseñas — deriva continua a sangre completa
   ============================================================ */
.marquee{
  position:relative;
  overflow:hidden;
  padding-block:var(--s35) var(--s50);
}

/* Las tarjetas se disuelven en el lienzo por los costados.
   Degradados encima en vez de mask-image: pintar es barato,
   enmascarar una capa de 5000 px no lo es. */
.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:clamp(28px,7%,110px);
  z-index:2;
  pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--surface-canvas),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--surface-canvas),transparent)}

.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee-drift 72s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{animation-play-state:paused}

.marquee__set{
  display:flex;
  gap:var(--s22);
  padding-right:var(--s22);
  align-items:stretch;
}

@keyframes marquee-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* Una sola línea: mismo borde superior, misma altura */
.marquee .quote{
  width:clamp(290px,31vw,392px);
  flex:none;
  transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.marquee .quote:hover{
  transform:translateY(-5px);
  border-color:rgba(0,113,227,.35);
}

/* Pista de lectura: el pie del carrusel */
.marquee__hint{
  display:flex;
  align-items:center;
  gap:var(--s10);
  font-size:var(--text-micro);
  color:var(--color-ash-gray);
}
.marquee__hint svg{width:12px;height:12px;stroke:var(--color-signal-blue);fill:none;stroke-width:1.2}

/* Sin animación: el carrusel se vuelve un carril desplazable normal */
@media (prefers-reduced-motion:reduce){
  .marquee{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-inline:var(--gutter);
  }
  .marquee::before,.marquee::after{display:none}
  .marquee__track{animation:none;width:auto}
  .marquee__set--clone{display:none}
  .marquee .quote{scroll-snap-align:start}
  .marquee .quote:hover{transform:none}
}

@media (max-width:720px){
  .marquee__track{animation-duration:56s}}

/* ============================================================
   Atribución a Google Reviews
   El logotipo de Google es marca registrada de Google LLC y se
   usa sin modificar, únicamente para enlazar al perfil real.
   ============================================================ */
.gmark{width:20px;height:20px;flex:none;display:block}
.gmark--sm{width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:6px}

.reviews-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--s35);
  flex-wrap:wrap;
  margin-bottom:var(--s50);
}
.reviews-head .section-head{margin-bottom:0}

.gbadge{
  display:inline-flex;
  align-items:center;
  gap:var(--s11);
  background:var(--surface-panel);
  border:var(--hairline);
  border-radius:var(--r-button);
  padding:var(--s11) var(--s22);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
  flex:none;
}
.gbadge:hover{border-color:rgba(0,113,227,.35);transform:translateY(-2px)}
.gbadge__t{display:block;font-size:var(--text-label);line-height:1.25;color:var(--color-off-black)}
.gbadge__s{display:block;font-size:var(--text-micro);line-height:1.3;color:var(--color-signal-blue);margin-top:2px}

.quote .src{display:flex;align-items:center}
.quote .src .gmark--sm{margin-right:7px}

@media (max-width:720px){
  .reviews-head{gap:var(--s30)}
  .gbadge{width:100%;justify-content:flex-start}}

/* ============================================================
   Formulario de contacto por correo
   ============================================================ */
[hidden]{display:none !important}

/* Trampa para bots: fuera de la vista, fuera del foco */
.hp{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

.field__hint{font-size:var(--text-micro);color:var(--color-ash-gray);letter-spacing:0;text-transform:none}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s10)}

.field.is-invalid input,
.field.is-invalid textarea{border-color:var(--color-signal-blue)}

.form__foot{display:grid;gap:var(--s22);margin-top:var(--s22)}

.form__status{
  font-size:var(--text-label);
  line-height:1.5;
  min-height:1px;
}
.form__status[data-state="error"]{color:var(--color-signal-blue)}
.form__status[data-state="sending"]{color:var(--color-ash-gray)}
.form__status a{color:var(--color-signal-blue);border-bottom:0.5px solid currentColor}

.btn[aria-busy="true"]{opacity:.55;pointer-events:none}

.form__alt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s22);
  flex-wrap:wrap;
  padding-top:var(--s22);
  border-top:var(--hairline);
}

/* Confirmación de envío */
.sent{display:grid;gap:var(--s22);justify-items:start;padding-block:var(--s22)}
.sent__mark{
  width:46px;height:46px;
  border-radius:var(--r-pill);
  border:var(--hairline-blue);
  display:grid;place-items:center;
}
.sent__mark svg{width:18px;height:18px;stroke:var(--color-signal-blue);fill:none;stroke-width:1.2}
.sent h3{font-size:var(--text-heading);line-height:1.2;letter-spacing:-.03em;max-width:20ch}
.sent p{font-size:var(--text-body);line-height:1.55;color:var(--color-steel-gray);max-width:46ch}
.sent b{font-weight:var(--w400);color:var(--color-off-black)}

/* ============================================================
   MÓVIL — pasada completa
   El sitio se diseñó de escritorio hacia abajo; esto corrige
   todo lo que a esa escala deja de funcionar.
   ============================================================ */

/* ---- Bases táctiles ------------------------------------- */
*{-webkit-tap-highlight-color:transparent}
a,button,summary,label,select,input,textarea{touch-action:manipulation}
body{overscroll-behavior-y:none}

/* Filas de dos columnas que deben poder colapsar */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s22)}
.rowsplit{display:flex;justify-content:space-between;gap:var(--s22);flex-wrap:wrap;align-items:center}

/* Nada de desbordes horizontales por palabras largas */
.body,.lede,.quote p,.faq__body p,.bio__body p,.infoline dd,.footer p{overflow-wrap:break-word}
.infoline dd a,.footer__links a{overflow-wrap:anywhere}

/* Respeta el notch y la barra de gestos (viewport-fit=cover) */
.topbar{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.announce__inner{
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.shell{
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.footer__bottom{padding-bottom:max(var(--s50),env(safe-area-inset-bottom))}
.fab{bottom:max(var(--s22),env(safe-area-inset-bottom))}

/* El menú desplegable nunca debe salirse de la pantalla */
.nav__drawer{max-height:calc(100svh - 150px);overflow-y:auto;-webkit-overflow-scrolling:touch}
body.is-locked{overflow:hidden}

/* El botón flotante se quita cuando el formulario está a la vista,
   para no taparle la esquina al botón de enviar */
.fab.is-tucked{opacity:0;transform:translateY(14px);pointer-events:none}

/* En pantallas táctiles el carrusel se pausa tocándolo */
.marquee.is-paused .marquee__track,
.marquee.is-offscreen .marquee__track{animation-play-state:paused}

/* ---- Tabletas y teléfonos en horizontal (≤860) ----------- */
@media (max-width:860px){
  .nav__bar{padding:var(--s10) var(--s11) var(--s10) var(--s22);gap:var(--s10)}
  .brand__name{
    max-width:52vw;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
  }
  /* Objetivos táctiles de 40px o más */
  .lang a{padding:9px 13px;font-size:var(--text-small)}
  .burger{width:40px;height:40px}
  .burger span{left:13px;right:13px}
  .burger span:nth-child(1){top:17px}
  .burger span:nth-child(2){top:22px}
  .nav__drawer a:not(.btn){padding-block:var(--s10)}
  .marquee .quote{width:min(78vw,340px)}
}

/* ---- Teléfonos (≤720) ------------------------------------ */
@media (max-width:720px){
  :root{--gutter:20px}

  /* El aviso superior no debe comerse media pantalla */
  .announce__inner{padding-block:7px;font-size:11px;line-height:1.35;gap:7px}
  .announce .tag{padding:2px 7px}

  .hero{padding-top:var(--s35);padding-bottom:var(--s50)}
  .hero__label{gap:var(--s6);margin-bottom:var(--s22)}
  .hero__name{gap:var(--s10)}
  .hero__lede{margin-bottom:var(--s30)}
  .hero__actions{gap:var(--s22);width:100%}
  .hero__actions .btn{width:100%}
  .hero__meta{gap:var(--s10) var(--s22);margin-top:var(--s35)}

  /* Retrato: alto controlado para que el hero no empuje todo hacia abajo */
  .hero__portrait{aspect-ratio:3/2;max-width:100%}
  .hero__portrait-ph{padding:var(--s22) var(--s22) 96px;gap:var(--s11)}
  .hero__portrait-ph svg{max-width:132px}
  .monogram{width:58px;height:58px;font-size:var(--text-label)}
  .plate{padding:var(--s11) var(--s22) 13px}
  .plate__lic{font-size:9px;line-height:1.35}

  /* Paneles y tarjetas: el relleno de escritorio ahoga la pantalla */
  .panel{padding:var(--s30) var(--s22)}
  .quote{padding:var(--s30) var(--s22);gap:var(--s11)}
  .quote p{font-size:var(--text-label)}
  .member{padding:var(--s30) var(--s22)}
  .pricing{padding:var(--s30) var(--s22) var(--s22)}
  .card{padding:var(--s30) var(--s22)}
  .band{padding:var(--s50) var(--s22);border-radius:32px}

  /* El formulario, en una sola columna */
  .pair{grid-template-columns:1fr;gap:0}
  .form__alt{flex-direction:column;align-items:flex-start;gap:var(--s10)}

  /* Precios: una tabla estrecha se lee mejor apretada */
  .ptable td{padding:var(--s11) 0}
  .ptable td:first-child{font-size:var(--text-label);line-height:1.35;padding-right:var(--s11)}
  .ptable .c-num{font-size:var(--text-label)}
  .save{padding:3px 8px;font-size:11px}
  .pricing__foot{gap:var(--s22);padding-top:var(--s22)}

  /* Carrusel: menos difuminado, más tarjeta visible */
  .marquee{padding-block:var(--s22) var(--s30)}
  .marquee::before,.marquee::after{width:24px}
  .reviews-head{margin-bottom:var(--s30)}
  .gbadge{padding:var(--s10) var(--s22)}

  .pullquote{padding-left:var(--s22);margin-top:var(--s30)}
  .pullquote p{font-size:var(--text-body)}
  .bio__body p:first-of-type{font-size:var(--text-body)}

  .steps{gap:var(--s30)}
  .treat{min-height:0;padding:var(--s30) var(--s22)}
  .section-head{margin-bottom:var(--s35);gap:var(--s11)}

  .footer{padding-top:var(--s69)}
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s35) var(--s22)}
  .footer__top > :first-child{grid-column:1 / -1}
  .footer__bottom{gap:var(--s10);font-size:9px}

  .fab{padding:12px 17px}
}

/* ---- Teléfonos pequeños (≤400) --------------------------- */
@media (max-width:400px){
  :root{--gutter:16px;--r-card:28px;--r-container:28px}
  .nav{width:calc(100% - var(--s22))}
  .nav__bar{padding:9px 9px 9px var(--s11)}
  .brand__name{max-width:40vw;font-size:var(--text-label)}
  .brand__mark{width:13px;height:13px}
  .lang a{padding:8px 11px;font-size:var(--text-micro)}
  .display{font-size:33px;letter-spacing:-.03em}
  .stats{grid-template-columns:1fr}
  .stats li:nth-child(even){padding-left:0}
  .stats li:nth-child(even)::before{display:none}
  .stats li + li{border-top:var(--hairline)}
  .stats li{padding:var(--s22) 0}
  .keyfacts div{flex-direction:column;gap:var(--s4)}
  .keyfacts dt{flex:none}
  .infoline{flex-direction:column;gap:var(--s6)}
  .infoline dt{flex:none}
  .footer__top{grid-template-columns:1fr}
  .footer__top > :first-child{grid-column:auto}
  .marquee .quote{width:84vw}
  .fab span{display:none}
  .fab{padding:14px;border-radius:var(--r-pill)}
  .fab svg{width:17px;height:17px}
}

/* ---- Teléfono en horizontal: hero muy bajo --------------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:var(--s22);padding-bottom:var(--s35)}
  .announce{display:none}
  .hero__visual{max-width:300px}
}
/* En pantallas táctiles no hay cursor: el carrusel se pausa tocando */
.marquee__hint .on-hover{display:inline}
.marquee__hint .on-touch{display:none}
@media (hover:none){
  .marquee__hint .on-hover{display:none}
  .marquee__hint .on-touch{display:inline}
}

/* Etiqueta sobre dato: en pantallas angostas la columna fija de
   etiquetas desalinea los valores cuando una palabra es más larga */
@media (max-width:620px){
  .keyfacts div,
  .infoline{flex-direction:column;gap:var(--s4)}
  .keyfacts dt,
  .infoline dt{flex:none}
  .infoline{gap:var(--s6)}
}

/* En teléfonos angostos el retrato no tiene alto para el dibujo
   y la placa de credenciales: se queda solo el monograma */
@media (max-width:460px){
  .hero__portrait{aspect-ratio:16/9}
  .hero__portrait-ph svg{display:none}
  .hero__portrait-ph{padding:var(--s22) var(--s22) 104px}
}

/* La tabla de precios en teléfonos angostos: encabezados cortos
   para que la columna de ahorro no se salga de la pantalla */
.th-tight{display:none}
@media (max-width:470px){
  .th-full{display:none}
  .th-tight{display:inline}
  .ptable th{font-size:10px;letter-spacing:.03em}
  .ptable td:first-child{font-size:13px;padding-right:var(--s6)}
  .ptable .c-num{font-size:13px;padding-left:var(--s6)}
  .ptable .c-save{padding-left:var(--s6)}
  .save{padding:3px 6px;font-size:10px}
  .pricing{padding:var(--s22) var(--s11) var(--s11)}
}

/* Calificación real dentro de la insignia de Google */
.gbadge__score{
  font-size:27px;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--color-off-black);
  font-variant-numeric:tabular-nums;
}
.gbadge .stars{margin-bottom:5px}
.gbadge .stars svg{width:10px;height:10px}
@media (max-width:720px){
  .gbadge__score{font-size:var(--text-subheading)}
}

/* El campo de edad sin los controles de incremento del navegador */
.field input[type="number"]{-moz-appearance:textfield}
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}