/* =====================================================================
   ZENIT ACADEMIA DENTAL — Landing
   Pure CSS. Editorial · minimal · architectural.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --white:      #ffffff;
  --paper:      #f6f6f4;   /* very light warm grey */
  --paper-2:    #efefec;
  --ink:        #0b0b0c;   /* near-black */
  --ink-2:      #2a2a2c;
  --muted:      #7c7c7f;   /* grey text */
  --line:       #e4e4e0;   /* hairlines */

  --petrol:     #1c5f6f;   /* azul petróleo — un tono más claro */
  --petrol-2:   #26808f;
  --petrol-3:   #46a2b3;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter",
          "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --r: 18px;   /* card radius */
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}
body{
  font-family:var(--font);
  background:var(--white);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
::selection{ background:var(--petrol); color:#fff; }

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

/* Gradient text — same family as the "Próximamente" treatment */
.grad{
  background:linear-gradient(115deg, var(--ink) 16%, var(--petrol-2) 92%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
@media (forced-colors: active){
  .grad, .soon__title, .hero__title em, .progress__value{
    -webkit-text-fill-color:currentColor; color:CanvasText; background:none;
  }
}

/* Accessibility helpers */
.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:10px;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:16px; }
:focus-visible{ outline:2px solid var(--petrol); outline-offset:3px; border-radius:4px; }

/* =====================================================================
   Reveal system  (JS toggles .is-in)
   Defensive: if JS never runs, content still shows (see :root fallbacks)
   ===================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:calc(var(--d,0) * 90ms);
  will-change:opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* Split-text safety net (skill gotcha A.4.5): never let text stay invisible */
[data-split]{ opacity:1; transform:none; }

.no-js [data-reveal]{ opacity:1; transform:none; }

/* =====================================================================
   Scroll progress bar
   ===================================================================== */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  background:transparent; pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--petrol), var(--petrol-3));
}

/* =====================================================================
   Custom cursor (added by JS on fine pointers)
   ===================================================================== */
.cursor{
  position:fixed; top:0; left:0; z-index:150; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1px solid rgba(16,58,69,.5);
  transform:translate3d(-100px,-100px,0) scale(1);
  transition:transform .18s var(--ease-out), width .25s var(--ease), height .25s var(--ease), background-color .25s var(--ease), border-color .25s;
  opacity:0;
}
body.has-cursor .cursor{ opacity:1; }
body.has-cursor.cursor-hover .cursor{
  background:rgba(16,58,69,.08);
  border-color:rgba(16,58,69,.8);
}
body.has-cursor.cursor-down .cursor{ transform:translate3d(var(--cx,0),var(--cy,0),0) scale(.8); }
@media (pointer:coarse){ .cursor{ display:none !important; } }

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:18px 0;
  transition:padding .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  padding:12px 0;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__iso{ width:42px; height:auto; }
.nav__word{ height:34px; width:auto; }
.nav__cta{
  font-size:.86rem; font-weight:500; letter-spacing:.01em;
  padding:10px 20px; border-radius:100px;
  border:1px solid var(--ink); color:var(--ink);
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.nav__cta:hover{ background:var(--ink); color:#fff; }
@media (max-width:520px){
  .nav__word{ display:none; }
  .nav__cta{ padding:9px 16px; font-size:.8rem; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:120px 0 80px;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__img{
  width:100%; height:100%; object-fit:cover;
  filter:blur(2px) saturate(1.05);
  scale:1.12;                 /* individual property: composes with JS translate */
  animation:heroZoom 26s var(--ease-out) forwards;
}
@keyframes heroZoom{ to{ scale:1.03; } }
.hero__veil{
  position:absolute; inset:0;
  /* Lighter veil, heavier on the left (behind the text) and near-clear on the
     right so the real clinic photo reads through. */
  background:
    linear-gradient(105deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.40) 44%, rgba(255,255,255,.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.44) 100%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

.hero__content{ position:relative; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.8rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--petrol);
  margin-bottom:clamp(22px,4vw,40px);
}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background:var(--petrol);
  box-shadow:0 0 0 0 rgba(16,58,69,.5);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(16,58,69,.45);} 70%{ box-shadow:0 0 0 12px rgba(16,58,69,0);} 100%{ box-shadow:0 0 0 0 rgba(16,58,69,0);} }

.hero__title{
  font-size:clamp(2.5rem, 6.4vw, 5.7rem);
  line-height:1.02;
  font-weight:600;
  letter-spacing:-.03em;
  max-width:19ch;
  text-wrap:balance;
}
.hero__title em{
  font-style:italic; font-weight:500;
  background:linear-gradient(100deg, var(--petrol), var(--petrol-3));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Hero flags: categoría + insignia "Próxima apertura" */
.hero__flags{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-bottom:26px; }
.hero__kicker{
  font-size:.95rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 13px; border-radius:100px;
  background:rgba(28,95,111,.10); border:1px solid rgba(28,95,111,.30);
  color:var(--petrol); font-size:.82rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.pill__dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--petrol); flex:0 0 auto; }
.pill__dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--petrol);
  animation:pillPulse 2.2s var(--ease-out) infinite;
}
@keyframes pillPulse{ 0%{ transform:scale(1); opacity:.55; } 80%,100%{ transform:scale(3.2); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .pill__dot::after{ animation:none; } }
.hero__sub strong{ color:var(--ink); font-weight:600; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:block;
  transform:translateY(110%);
  transition:transform 1.05s var(--ease-out);
  transition-delay:calc(var(--i,0) * 120ms + 200ms);
}
.hero.is-ready .line > span{ transform:translateY(0); }
.line--accent > span{ color:var(--petrol); font-style:italic; font-weight:500; }

.hero__sub{
  margin-top:clamp(26px,4vw,38px);
  font-size:clamp(1.05rem, 2.1vw, 1.4rem);
  color:var(--ink-2);
  max-width:34ch;
  line-height:1.45;
}
.hero__actions{
  margin-top:clamp(34px,5vw,48px);
  display:flex; flex-wrap:wrap; gap:14px;
}

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
}
.hero__scroll i{
  width:1px; height:46px;
  background:linear-gradient(var(--muted), transparent);
  position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:var(--petrol); animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} }
@media (max-width:640px){ .hero__scroll{ display:none; } }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{
  --pad:16px 30px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--pad); border-radius:100px;
  font-size:.98rem; font-weight:500; letter-spacing:.005em;
  transition:transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{
  background:var(--ink); color:#fff;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
}
.btn--primary:hover{ background:var(--petrol); box-shadow:0 18px 40px -14px rgba(16,58,69,.6); }
.btn--ghost{
  background:rgba(255,255,255,.5); color:var(--ink);
  border:1px solid var(--ink);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--ghost svg{ transition:transform .4s var(--ease); }
.btn--ghost:hover svg{ transform:translateY(3px); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--petrol); }

/* =====================================================================
   Section head
   ===================================================================== */
.section-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(30px,5vw,56px); }
.section-head__num{
  font-size:.8rem; font-weight:600; letter-spacing:.2em; color:var(--petrol);
  font-variant-numeric:tabular-nums;
}
.section-head__title{
  font-size:clamp(1.4rem,3vw,2rem); font-weight:600; letter-spacing:-.02em; color:var(--ink);
}

/* =====================================================================
   MANIFESTO
   ===================================================================== */
.manifesto{
  padding:clamp(120px,20vw,240px) 0;
  background:var(--white);
  text-align:center;
}
.manifesto__text{
  font-size:clamp(2rem, 6.2vw, 5rem);
  line-height:1.04;
  font-weight:600;
  letter-spacing:-.03em;
  max-width:16ch;
  margin-inline:auto;
  color:var(--ink);
}
.manifesto__text em{ color:var(--petrol); font-style:italic; font-weight:500; }
/* word-by-word reveal for split text */
.manifesto__text .w{ display:inline-block; }

/* =====================================================================
   PILLARS
   ===================================================================== */
.pillars{ padding:clamp(80px,12vw,140px) 0; background:var(--paper); }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.card{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(28px,3vw,40px);
  min-height:300px;
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s;
  transform-style:preserve-3d;
}
.card::after{ /* petrol glow on hover */
  content:""; position:absolute; inset:0; border-radius:var(--r);
  box-shadow:0 30px 60px -30px rgba(16,58,69,.35);
  opacity:0; transition:opacity .5s var(--ease); pointer-events:none;
}
.card:hover{ transform:translateY(-10px); border-color:#d3d3ce; box-shadow:0 26px 50px -30px rgba(0,0,0,.28); }
.card:hover::after{ opacity:1; }
.card__icon{
  width:62px; height:62px; border-radius:14px;
  display:grid; place-items:center;
  color:var(--petrol);
  background:linear-gradient(160deg, #fff, var(--paper-2));
  border:1px solid var(--line);
  margin-bottom:26px;
}
.card__icon svg{ width:34px; height:34px; }
.card__title{
  font-size:1.3rem; font-weight:600; letter-spacing:-.01em;
}
.card__text{ margin-top:14px; color:#55565c; font-size:1rem; line-height:1.62; }
@media (max-width:820px){
  .cards{ grid-template-columns:1fr; }
  .card{ min-height:0; }
}

/* =====================================================================
   FACULTY (cuerpo docente)
   ===================================================================== */
.faculty{
  padding:clamp(90px,15vw,180px) 0; text-align:center;
  background:linear-gradient(160deg, #206576 0%, #123f49 100%);
  color:#fff;
}
.faculty__inner{ max-width:800px; margin-inline:auto; }
.faculty__eyebrow{
  display:inline-block; margin-bottom:22px;
  font-size:.8rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#aee0ea;
}
.faculty__title{
  font-size:clamp(1.9rem,4.4vw,3.2rem); font-weight:600; letter-spacing:-.03em; line-height:1.08;
  text-wrap:balance; color:#fff;
}
.faculty__text{
  margin-top:26px; margin-inline:auto; max-width:52ch;
  font-size:clamp(1.05rem,1.9vw,1.32rem); line-height:1.6; color:rgba(255,255,255,.82);
}
.faculty__text strong{ color:#fff; font-weight:600; }

/* =====================================================================
   SPACE (photo + copy)
   ===================================================================== */
.space{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(30px,5vw,80px);
  padding:clamp(80px,12vw,150px) var(--gutter);
  max-width:calc(var(--maxw) + 120px); margin-inline:auto;
  background:var(--white);
}
.space__media{
  border-radius:22px; overflow:hidden;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.5);
  will-change:transform;
}
.space__media img{ width:100%; height:100%; object-fit:cover; }
.space__title{
  font-size:clamp(1.9rem,4.4vw,3.3rem); font-weight:600; letter-spacing:-.03em; line-height:1.05;
  margin:18px 0 26px; max-width:16ch;
}
.space__body p{ color:var(--ink-2); font-size:clamp(1rem,1.6vw,1.15rem); line-height:1.6; max-width:44ch; }
.space__body p + p{ margin-top:16px; }
@media (max-width:900px){
  .space{ grid-template-columns:1fr; }
  .space__media{ order:-1; }
}

/* Progress — avance de la construcción */
.progress{ margin-top:clamp(30px,4vw,46px); max-width:460px; }
.manifesto .progress{ margin-inline:auto; margin-top:clamp(44px,6vw,72px); }
.progress__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.progress__label{
  font-size:.95rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}
.progress__value{
  font-size:clamp(1.7rem,3.4vw,2.1rem); font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg, var(--petrol), var(--petrol-3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.progress__track{
  height:8px; border-radius:100px; background:var(--paper-2);
  overflow:hidden; box-shadow:inset 0 0 0 1px var(--line);
}
.progress__fill{
  display:block; height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg, var(--petrol), var(--petrol-3));
  box-shadow:0 0 18px -2px rgba(38,128,143,.5);
  transition:width 1.7s cubic-bezier(.16,1,.3,1);
}
.progress__note{ margin-top:16px; font-size:clamp(1rem,1.6vw,1.15rem); line-height:1.55; color:var(--ink-2); }

/* =====================================================================
   SOON
   ===================================================================== */
.soon{
  position:relative;
  background:var(--ink);
  color:#fff;
  padding:clamp(130px,22vw,260px) 0;
  text-align:center;
  overflow:hidden;
}
.soon::before{ /* subtle petrol aurora */
  content:""; position:absolute; inset:-30% -10% auto -10%; height:80%;
  background:radial-gradient(50% 60% at 50% 0%, rgba(70,162,179,.34), transparent 70%);
  pointer-events:none;
}
.soon__inner{ position:relative; }
.soon__iso{ width:58px; margin:0 auto clamp(28px,4vw,44px); opacity:.9; }
.soon__title{
  font-size:clamp(3.2rem,15vw,12rem);
  font-weight:600; letter-spacing:-.05em; line-height:.9;
  background:linear-gradient(180deg,#fff 28%, #83b7c6 128%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.soon__sub{
  margin-top:clamp(20px,3vw,30px);
  font-size:clamp(1rem,2vw,1.3rem); letter-spacing:.02em; color:#a9b6bb;
}

/* =====================================================================
   SIGNUP
   ===================================================================== */
.signup{ padding:clamp(90px,14vw,170px) 0; background:var(--paper); }
.signup__inner{ max-width:640px; margin-inline:auto; text-align:center; }
.signup__inner .section-head{ justify-content:center; margin-bottom:24px; }
.signup__title{
  font-size:clamp(1.9rem,4.6vw,3.1rem); font-weight:600; letter-spacing:-.03em; line-height:1.08;
  margin-bottom:clamp(34px,5vw,50px);
}
.form{ display:grid; gap:18px; text-align:left; }
.form[hidden]{ display:none; }   /* beats .form{display:grid} so hidden actually hides */
.field{ display:grid; gap:8px; }
.field label{ font-size:.82rem; font-weight:500; letter-spacing:.02em; color:var(--muted); padding-left:2px; }
.field input{
  width:100%; padding:16px 18px;
  font-size:1rem; color:var(--ink);
  background:var(--white);
  border:1px solid var(--line); border-radius:14px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s;
}
.field input::placeholder{ color:#b6b6b6; }
.field input:focus{
  outline:none; border-color:var(--petrol);
  box-shadow:0 0 0 4px rgba(16,58,69,.10);
}
.field input:user-invalid{ border-color:#c4514b; }
.form__hp{ position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.form__submit{ width:100%; margin-top:6px; position:relative; }
.form__spinner{
  position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  opacity:0; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.form.is-loading .form__submit-label{ opacity:0; }
.form.is-loading .form__spinner{ opacity:1; }
.form__note{ text-align:center; font-size:.8rem; color:var(--muted); margin-top:2px; }
.form__error{ text-align:center; font-size:.85rem; color:#c4514b; min-height:0; }
.form__error:empty{ display:none; }

/* success */
.success{ text-align:center; padding:20px 0; }
.success__mark{ width:76px; height:76px; margin:0 auto 26px; }
.success__mark svg{ width:100%; height:100%; }
.success__circle{
  stroke:var(--petrol); stroke-width:2.4;
  stroke-dasharray:151; stroke-dashoffset:151;
  animation:draw .7s var(--ease-out) forwards;
}
.success__check{
  stroke:var(--petrol); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:44; stroke-dashoffset:44;
  animation:draw .5s var(--ease-out) .55s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.success__text{
  font-size:clamp(1.3rem,3vw,1.9rem); font-weight:600; letter-spacing:-.02em; line-height:1.25;
  max-width:20ch; margin-inline:auto;
}
.success[hidden]{ display:none; }
.success:not([hidden]){ animation:fadeUp .7s var(--ease-out) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none; } }

/* =====================================================================
   FOOTER
   ===================================================================== */
/* =====================================================================
   FAQ (preguntas frecuentes)
   ===================================================================== */
.faq{ padding:clamp(80px,12vw,150px) 0; background:var(--paper); }
.faq__inner{ max-width:840px; margin-inline:auto; }
.faq__list{ margin-top:clamp(28px,5vw,52px); border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:24px 2px;
  font-size:clamp(1.05rem,2vw,1.28rem); font-weight:600; letter-spacing:-.01em; color:var(--ink);
  transition:color .25s var(--ease-out);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--petrol); }
.faq__item summary:focus-visible{ outline:2px solid var(--petrol); outline-offset:4px; border-radius:6px; }
.faq__item summary i{ position:relative; width:16px; height:16px; flex:0 0 auto; }
.faq__item summary i::before,
.faq__item summary i::after{
  content:""; position:absolute; background:var(--petrol); border-radius:2px;
  transition:transform .3s var(--ease-out);
}
.faq__item summary i::before{ left:0; top:7px; width:16px; height:2px; }
.faq__item summary i::after{ left:7px; top:0; width:2px; height:16px; }
.faq__item[open] summary i::after{ transform:scaleY(0); }
.faq__answer{ padding:2px 2px 26px; }
.faq__answer p{ max-width:70ch; color:#55565c; line-height:1.65; font-size:1.02rem; }
.faq__answer a{ color:var(--petrol); text-decoration:underline; text-underline-offset:3px; }

/* =====================================================================
   RESPALDO (un proyecto de Odontología Laura Camelo)
   ===================================================================== */
.backed{ padding:clamp(48px,7vw,80px) 0; background:var(--paper); border-top:1px solid var(--line); text-align:center; }
.backed__inner{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.backed__label{ font-size:.76rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.backed__link{
  display:inline-block; position:relative; padding-bottom:12px; border-radius:6px;
  transition:transform .35s var(--ease-out);
}
.backed__link::after{            /* línea petróleo que crece al pasar el cursor */
  content:""; position:absolute; left:50%; bottom:0; height:2px; width:0;
  background:var(--petrol); border-radius:2px; transform:translateX(-50%);
  transition:width .35s var(--ease-out);
}
.backed__link:hover,
.backed__link:focus-visible{ transform:translateY(-3px); }
.backed__link:hover::after,
.backed__link:focus-visible::after{ width:72px; }
.backed__link:focus-visible{ outline:2px solid var(--petrol); outline-offset:6px; }
.backed__logo{ height:clamp(40px,6vw,58px); width:auto; opacity:.8; transition:opacity .35s var(--ease-out); }
.backed__link:hover .backed__logo,
.backed__link:focus-visible .backed__logo{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .backed__link,
  .backed__link:hover,
  .backed__link:focus-visible{ transform:none; }
}

.footer{ background:var(--ink); color:#fff; padding:clamp(48px,7vw,72px) 0; }
.footer__inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.footer__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; max-width:440px; }
.footer__logo{ height:30px; width:auto; opacity:.95; }
.footer__about{ font-size:.85rem; line-height:1.6; color:#9aa4a8; max-width:46ch; }
.footer__meta{ display:flex; flex-direction:column; gap:4px; text-align:right; font-size:.85rem; color:#9aa4a8; }
@media (max-width:560px){
  .footer__inner{ flex-direction:column; align-items:flex-start; }
  .footer__meta{ text-align:left; }
}

/* =====================================================================
   Reduced motion — keep content visible, drop the motion
   (never hide content; Windows ships reduce ON for many users)
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__title .line > span{ transform:none !important; }
  .hero__img{ scale:1.03 !important; translate:0 !important; filter:blur(2px); }
  .cursor{ display:none !important; }
}