/* ══════════════════════════════════════════════════════════════
   Endodoncia Santiago — hoja de estilos única

   Dirección visual: "NEGATOSCOPIO".
   La página se lee como el panel retroiluminado donde el endodoncista
   mira las radiografías: fondo espresso, tarjetas que parecen paneles
   encendidos y una escala milimetrada que recorre el costado de cada
   sección. La paleta es la de siempre: porcelana, espresso y cobre.

   Tres voces tipográficas:
     · display (Palatino)  → los titulares
     · sans (del sistema)  → el texto que se lee
     · mono (del sistema)  → todo lo que se MIDE: mm, horas, etiquetas

   Todo lo editable vive en el bloque :root de aquí abajo.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */

:root{
  /* — tema oscuro (por defecto) — */
  --bg:      #13100E;   /* fondo general, negro espresso     */
  --bg-2:    #1A1614;   /* secciones alternas                */
  --bg-3:    #221C18;   /* tarjetas: el panel encendido      */
  --ink:     #F1EBE2;   /* texto principal, porcelana        */
  --ink-2:   #B4A89C;   /* texto secundario                  */
  --ink-3:   #8B8075;   /* etiquetas y datos menores         */
  --line:    rgba(241,235,226,.11);
  --line-2:  rgba(241,235,226,.22);
  --accent:  #D08A4B;   /* cobre bruñido: el único color     */
  --accent-2:#E8C68F;   /* champán: el ápice encendido       */
  --on-accent:#17120E;
  --glow:    rgba(208,138,75,.30);
  --lift:    inset 0 1px 0 rgba(241,235,226,.055), 0 20px 40px -30px rgba(0,0,0,.85);
  --shadow:  0 24px 60px -30px rgba(0,0,0,.85);

  /* — tipografía — */
  --display: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style",
             "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans:    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo,
             "DejaVu Sans Mono", monospace;

  /* — medidas — */
  --wrap: 1200px;
  --pad:  clamp(20px, 5vw, 52px);
  --sec:  clamp(76px, 9vw, 132px);
  --r:    4px;
  --mm:   11.07px;      /* un milímetro de la escala: se usa en los rieles */
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    /* — porcelana verdosa: el campo quirúrgico — */
    --bg:      #E7EAE5;
    --bg-2:    #F0F2ED;
    --bg-3:    #F9FAF7;
    --ink:     #16201A;
    --ink-2:   #4B564E;
    --ink-3:   #5A665F;
    --line:    rgba(22,32,26,.13);
    --line-2:  rgba(22,32,26,.24);
    --accent:  #96551F;
    --accent-2:#7A4416;
    --on-accent:#F9FAF7;
    --glow:    rgba(150,85,31,.14);
    --lift:    inset 0 1px 0 rgba(255,255,255,.9), 0 18px 34px -30px rgba(22,32,26,.45);
    --shadow:  0 22px 50px -32px rgba(22,32,26,.45);
  }
}

:root[data-theme="light"]{
  --bg:#E7EAE5; --bg-2:#F0F2ED; --bg-3:#F9FAF7;
  --ink:#16201A; --ink-2:#4B564E; --ink-3:#5A665F;
  --line:rgba(22,32,26,.13); --line-2:rgba(22,32,26,.24);
  --accent:#96551F; --accent-2:#7A4416; --on-accent:#F9FAF7;
  --glow:rgba(150,85,31,.14);
  --lift:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 34px -30px rgba(22,32,26,.45);
  --shadow:0 22px 50px -32px rgba(22,32,26,.45);
}

/* ── 2. BASE ───────────────────────────────────────────────── */

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

html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.024em;
  line-height:1.05;
  text-wrap:balance;
  margin:0;
}
h1{ font-size:clamp(2.7rem, 6.6vw, 4.9rem); }
h2{ font-size:clamp(1.95rem, 3.7vw, 2.95rem); line-height:1.12; }
h3{ font-size:1.22rem; line-height:1.28; letter-spacing:-.012em; }
p{ margin:0; }

/* La bajada del titular en cursiva: es la promesa, no el diagnóstico. */
h1 em, h2 em{ font-style:italic; color:var(--accent); }

:where(a,button,summary,details):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r);
}

.skip{
  position:fixed; top:-100px; left:14px; z-index:99;
  background:var(--accent); color:var(--on-accent);
  padding:11px 18px; border-radius:var(--r); text-decoration:none;
}
.skip:focus{ top:14px; }

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

/* Etiqueta de sección: voz de instrumento, no de folleto. */
.eyebrow{
  font-family:var(--mono);
  font-size:.688rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin:0;
  display:flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; flex:none;
  border:1px solid var(--accent); border-radius:50%;
}

.p{ color:var(--ink-2); max-width:60ch; margin-top:22px; }
.lede{ color:var(--ink-2); font-size:1.115rem; max-width:52ch; }

/* ── 3. BOTONES Y ENLACES ──────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--accent); color:var(--on-accent);
  font-size:.875rem; font-weight:600; letter-spacing:.005em;
  padding:14px 26px; border:1px solid var(--accent); border-radius:var(--r);
  text-decoration:none; white-space:nowrap;
  transition:transform .2s ease, box-shadow .25s ease, filter .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px var(--glow); filter:brightness(1.06); }
.btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--line-2);
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); box-shadow:none; filter:none; }
.btn--sm{ padding:10px 19px; font-size:.813rem; }

.lnk{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--accent);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; margin-top:auto; padding-top:18px;
}
.lnk i{ font-style:normal; transition:transform .22s ease; }
.lnk:hover i{ transform:translateX(4px); }

/* ── 4. NAVEGACIÓN ─────────────────────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.nav.is-fija{
  background:var(--bg);                                      /* respaldo */
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:var(--line);
}
.nav__in{ display:flex; align-items:center; gap:26px; height:76px; }

.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.logo__mark{
  display:grid; place-items:center; width:36px; height:36px; flex:none;
  border:1px solid var(--line-2); border-radius:var(--r); color:var(--accent);
  background:var(--bg-3);
}
.logo__txt{
  font-family:var(--display); font-size:1.05rem; line-height:1.15;
  display:flex; flex-direction:column;
}
.logo__txt em{
  font-family:var(--mono); font-style:normal;
  font-size:.594rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}

.nav__links{ display:flex; gap:24px; }
.nav__links a{
  font-size:.844rem; color:var(--ink-2); text-decoration:none; position:relative; padding:4px 0;
  transition:color .2s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); }

.burger{
  display:none; width:40px; height:40px; padding:0;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--r);
  cursor:pointer; place-content:center; gap:5px;
}
.burger span{ display:block; width:17px; height:1px; background:var(--ink); transition:transform .25s ease; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

.menu-movil{
  display:flex; flex-direction:column;
  background:var(--bg-3); border-top:1px solid var(--line);
  padding:14px var(--pad) 26px;
}
/* Sin esto, display:flex gana al atributo [hidden] y el menú queda siempre abierto. */
.menu-movil[hidden]{ display:none; }
.menu-movil a{
  padding:14px 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink-2); font-size:.938rem;
}
.menu-movil__cta{ color:var(--accent) !important; font-weight:600; border-bottom:0 !important; }

@media (max-width:980px){
  .nav__links{ display:none; }
  .nav .btn--sm{ display:none; }
  .burger{ display:grid; }
}
@media (min-width:981px){ .menu-movil{ display:none; } }

/* ── 5. HERO ───────────────────────────────────────────────── */

.hero{
  position:relative; overflow:hidden;
  padding:clamp(126px,15vh,172px) 0 clamp(58px,8vw,96px);
  /* la luz entra por detrás del instrumento */
  background:
    radial-gradient(62% 55% at 74% 24%, var(--glow) 0%, transparent 62%),
    radial-gradient(120% 90% at 72% 18%, var(--bg-3) 0%, transparent 64%),
    var(--bg);
}
.hero__in{
  position:relative; display:grid; align-items:center; gap:clamp(36px,6vw,64px);
  grid-template-columns:minmax(0,1.06fr) minmax(0,.78fr);
}
.hero__txt h1{ margin:22px 0 26px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.hero__nota{
  display:flex; align-items:center; gap:10px;
  margin-top:28px;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.04em; color:var(--ink-3);
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 0 var(--glow); animation:pulso 2.6s ease-out infinite;
}
@keyframes pulso{
  0%  { box-shadow:0 0 0 0 var(--glow); }
  70% { box-shadow:0 0 0 11px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* ── 5b. FIRMA: LA CONDUCTOMETRÍA ──────────────────────────────
   Un molar en corte junto a una regla milimetrada. Al cargar, una
   lima desciende por el conducto hasta el ápice mientras el
   localizador apical recorre su escala; después el conducto se
   sella con gutapercha. Es el gesto que define la especialidad:
   medir exacto y sellar hasta el final.                          */

.conducto{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:18px;
}
.conducto__svg{ width:min(310px,80%); height:auto; overflow:visible; }

/* regla */
.regla{ stroke:var(--ink-3); opacity:.55; }
.regla--menor{ stroke-width:8; stroke-dasharray:1 10.07; }
.regla--mayor{ stroke-width:17; stroke-dasharray:1.4 53.95; }
.regla__n{
  fill:var(--ink-3); font-family:var(--mono); font-size:8px; letter-spacing:.04em;
}

/* diente */
.molar__out{
  fill:transparent;                                          /* respaldo */
  fill:color-mix(in srgb, var(--ink) 4%, transparent);
  stroke:var(--line-2); stroke-width:1.1;
}
.molar__enamel{ fill:none; stroke:var(--ink-3); stroke-width:1.8; opacity:.5; }
.molar__camara{ fill:none; stroke:var(--line-2); stroke-width:1; }

/* la lima: baja, mide, se retira */
.lima{
  fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:limar 1.15s cubic-bezier(.45,0,.25,1) .5s forwards,
            retirar .5s ease 2.5s forwards;
}
@keyframes limar{ to{ stroke-dashoffset:0; } }
@keyframes retirar{ to{ opacity:0; } }

/* el sellado: la gutapercha es, literalmente, del color del cobre */
.gutta{
  fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:obturar 1s cubic-bezier(.5,0,.2,1) forwards;
  animation-delay:calc(2.65s + var(--i,0) * .18s);
}
@keyframes obturar{ to{ stroke-dashoffset:0; } }

/* El ápice se enciende en champán: es el instante de la medición,
   distinto del cobre del sellado. */
.apice{
  fill:var(--accent-2); opacity:0;
  animation:apice .5s ease 1.62s forwards;
}
@keyframes apice{
  0%  { opacity:0; r:3; }
  55% { opacity:1; r:6; }
  100%{ opacity:1; r:3.4; }
}

/* el localizador apical */
.apex{
  width:min(310px,86%);
  display:grid; grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--bg-3); box-shadow:var(--lift);
  overflow:hidden;
}
.apex span{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.08em;
  color:var(--ink-3); text-align:center; padding:8px 2px;
  border-right:1px solid var(--line);
  opacity:.45;
  animation:encender .01s linear forwards;
  animation-delay:calc(.6s + var(--i,0) * .26s);
}
.apex span:last-child{ border-right:0; }
@keyframes encender{ to{ opacity:1; color:var(--ink-2); } }

/* Va con el selector completo: si fuera solo .apex__fin, la regla
   .apex span de arriba le ganaría y el ápice nunca se encendería. */
.apex span.apex__fin{
  color:var(--accent-2);
  animation:apexfin .5s ease 1.62s forwards, latido 1.6s ease-in-out 2.1s 2;
}
@keyframes apexfin{
  to{ opacity:1; background:color-mix(in srgb, var(--accent) 18%, transparent); }
}
@keyframes latido{ 50%{ background:color-mix(in srgb, var(--accent) 36%, transparent); } }

.conducto__cap{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
  color:var(--ink-3); text-align:center; max-width:34ch; line-height:1.7;
}
.conducto__cap b{ color:var(--ink-2); font-weight:400; }

@media (max-width:940px){
  .hero__in{ grid-template-columns:1fr; }
  .conducto{ order:-1; }
  .conducto__svg{ width:min(190px,48%); }
  .apex{ width:min(280px,92%); }
  .hero__txt h1{ margin-top:14px; }
}

/* ── 6. CIFRAS: LA LECTURA DEL PANEL ───────────────────────── */

.datos{ border-block:1px solid var(--line); background:var(--bg-2); }
.datos__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.dato{
  padding:34px 30px 34px 0; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.dato:last-child{ border-right:0; }
.dato:not(:first-child){ padding-left:30px; }
.dato b{
  font-family:var(--mono); font-size:2.15rem; font-weight:400; line-height:1;
  letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums;
}
.dato b sub{ font-size:.5em; bottom:-.1em; color:inherit; }
.dato span{ font-size:.813rem; color:var(--ink-2); line-height:1.5; max-width:22ch; }

@media (max-width:760px){
  .datos__grid{ grid-template-columns:1fr 1fr; }
  .dato{ padding:26px 22px 26px 0 !important; }
  .dato:nth-child(2n){ border-right:0; padding-left:22px !important; }
  .dato:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}

/* ── 7. RIEL DE SECCIÓN: LA ESCALA MILIMETRADA ─────────────────
   El borde izquierdo del contenido lleva las mismas marcas de
   1 mm de la regla del hero. No es adorno: es la misma escala
   recorriendo la página entera.                                 */

.sec{ padding-block:var(--sec); }
.sec--alt{ background:var(--bg-2); border-block:1px solid var(--line); }
.sec--band{ background:var(--bg-3); border-block:1px solid var(--line); }

.rail{ display:grid; grid-template-columns:176px minmax(0,1fr); gap:clamp(26px,5vw,64px); }
.rail__lbl{ position:relative; border-right:1px solid var(--line); padding-right:20px; }
.rail__lbl::after{
  content:""; position:absolute; top:6px; bottom:0; right:0; width:7px;
  background:repeating-linear-gradient(
    to bottom, var(--line-2) 0 1px, transparent 1px var(--mm));
}
.rail__lbl .eyebrow{ position:sticky; top:108px; }
.rail__body > .btn{ margin-top:36px; }

@media (max-width:900px){
  .rail{ grid-template-columns:1fr; gap:18px; }
  .rail__lbl{ border-right:0; padding-right:0; }
  .rail__lbl::after{ display:none; }
  .rail__lbl .eyebrow{ position:static; }
}

/* ── 8. SEÑALES ────────────────────────────────────────────── */

.senales{ list-style:none; margin:38px 0 0; padding:0; display:grid; max-width:64ch; }
.senales li{
  padding:17px 0 17px 32px; border-top:1px solid var(--line);
  color:var(--ink-2); font-size:.969rem; position:relative;
}
.senales li:last-child{ border-bottom:1px solid var(--line); }
.senales li::before{
  content:""; position:absolute; left:0; top:26px;
  width:13px; height:1px; background:var(--accent);
}
.senales b{ color:var(--ink); font-weight:600; }

.aviso{
  margin-top:38px; padding:26px 28px;
  border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:var(--r);
  background:var(--bg-3); box-shadow:var(--lift);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.aviso p{ color:var(--ink-2); font-size:.938rem; max-width:52ch; }
.aviso b{ color:var(--ink); }
.sec--band .aviso{ background:var(--bg); }

/* ── 9. TARJETAS DE TRATAMIENTO ────────────────────────────── */

.cards{
  display:grid; gap:14px; margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
}
.card{
  display:flex; flex-direction:column;
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--lift);
  padding:28px 28px 26px; position:relative; overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.card:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.card:hover::before{ transform:scaleX(1); }
.card .ico{
  width:26px; height:26px; fill:none; stroke:var(--accent);
  stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round;
  margin-bottom:20px;
}
.card h3{ margin-bottom:11px; }
.card p{ color:var(--ink-2); font-size:.906rem; line-height:1.6; }
.card em{ font-style:italic; color:var(--ink); }

/* ── 10. TECNOLOGÍA ────────────────────────────────────────── */

.tech{ margin:44px 0 0; display:grid; }
.tech__row{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(18px,4vw,48px);
  padding:26px 0; border-top:1px solid var(--line);
}
.tech__row:last-child{ border-bottom:1px solid var(--line); }
.tech dt{
  font-family:var(--display); font-size:1.22rem; line-height:1.22;
  display:flex; flex-direction:column; gap:8px;
}
.tech dt span{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.tech dd{ margin:0; color:var(--ink-2); font-size:.938rem; }
.tech em{ font-style:italic; color:var(--ink); }

@media (max-width:700px){ .tech__row{ grid-template-columns:1fr; gap:10px; } }

/* ── 11. PROCESO ───────────────────────────────────────────── */

/* Aquí el orden sí es información: son cinco pasos de una sesión real.
   Cada uno reserva su fotografía en 4:3. */
.pasos{
  list-style:none; margin:clamp(38px,5vw,56px) 0 0; padding:0;
  display:grid; gap:clamp(20px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit, minmax(198px, 1fr));
}
.paso{ display:flex; flex-direction:column; }

.paso__foto{
  margin:0 0 18px; aspect-ratio:4/3; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r);
  display:grid; place-items:center;
  background:var(--bg-3);
  box-shadow:var(--lift);
}
.paso__foto span{
  font-family:var(--mono); font-size:.594rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
.paso__foto img{ width:100%; height:100%; object-fit:cover; display:block; }

.paso__n{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.688rem; letter-spacing:.12em; color:var(--accent);
  font-variant-numeric:tabular-nums; margin-bottom:12px;
}
.paso__n::after{ content:""; flex:1; height:1px; background:var(--line-2); }

.paso h3{ font-size:1.08rem; margin-bottom:10px; }
.paso p{ color:var(--ink-2); font-size:.875rem; line-height:1.55; }

/* ── 12. DERIVACIONES ──────────────────────────────────────── */

.deriv{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(236px,1fr));
  gap:14px; margin-top:44px;
}
.deriv__it{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 24px 26px;
}
.deriv__it b{
  display:block; font-family:var(--display); font-size:1.15rem; font-weight:400;
  margin-bottom:9px;
}
.deriv__it p{ color:var(--ink-2); font-size:.875rem; line-height:1.58; }

/* ── 13. SOBRE ─────────────────────────────────────────────── */

.sobre{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(28px,5vw,56px); align-items:start; }
.retrato{ margin:0; }
/* El retrato viene montado sobre blanco: sobre el panel queda como una
   placa de porcelana, así que lleva borde y sombra propios. */
.retrato img{
  width:100%; aspect-ratio:4/5; border-radius:var(--r); display:block; object-fit:cover;
  border:1px solid var(--line-2); box-shadow:var(--shadow);
}
.creds{ list-style:none; margin:30px 0 0; padding:0; display:grid; }
.creds li{
  padding:12px 0 12px 28px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.781rem; letter-spacing:.01em;
  color:var(--ink-2); position:relative;
}
.creds li:last-child{ border-bottom:1px solid var(--line); }
.creds li::before{
  content:""; position:absolute; left:0; top:21px; width:11px; height:1px; background:var(--accent);
}

@media (max-width:760px){
  .sobre{ grid-template-columns:1fr; }
  .retrato{ max-width:300px; }
}

/* ── 14. FAQ ───────────────────────────────────────────────── */

.faq{ margin-top:44px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 48px 22px 0; position:relative;
  font-family:var(--display); font-size:1.2rem; line-height:1.3;
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary::after,
.faq summary::before{
  content:""; position:absolute; right:6px; top:50%;
  background:var(--accent); transition:transform .28s ease, opacity .28s ease;
}
.faq summary::before{ width:13px; height:1px; margin-top:-.5px; }
.faq summary::after{ width:1px; height:13px; margin-top:-6.5px; right:12px; }
.faq details[open] summary::after{ transform:rotate(90deg); opacity:0; }
.faq details[open] summary{ color:var(--accent); }
.faq details > div{ padding:0 12% 26px 0; }
.faq details p{ color:var(--ink-2); font-size:.938rem; }
.faq em{ color:var(--ink); font-style:italic; }

@media (max-width:600px){ .faq details > div{ padding-right:0; } }

/* ── 15. CIERRE / AGENDAR ──────────────────────────────────── */

.cierre{
  position:relative; padding-block:var(--sec);
  border-top:1px solid var(--line);
  background:
    radial-gradient(90% 130% at 12% 0%, var(--glow) 0%, transparent 58%),
    radial-gradient(85% 120% at 14% 0%, var(--bg-3) 0%, transparent 60%),
    var(--bg);
}
.cierre__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(38px,6vw,80px); align-items:start;
}
.cierre h2{ margin:20px 0 24px; }

.ficha{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-3); box-shadow:var(--lift);
  padding:6px 26px;
}
.ficha__b{ padding:22px 0; border-bottom:1px solid var(--line); }
.ficha__b:last-child{ border-bottom:0; }
.ficha__b h3{
  font-family:var(--mono); font-size:.625rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:12px;
}
.ficha__b p{ color:var(--ink-2); font-size:.938rem; }
.ficha__b a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-2); }
.ficha__b a:hover{ color:var(--accent); border-color:var(--accent); }
.ficha .lnk{ border:0; padding-top:12px; }
.ficha .lnk:hover{ border:0; }

.horario{ width:100%; border-collapse:collapse; font-size:.938rem; }
.horario th{ text-align:left; font-weight:400; color:var(--ink-2); padding:5px 0; }
.horario td{
  text-align:right; color:var(--ink); padding:5px 0;
  font-family:var(--mono); font-size:.844rem; font-variant-numeric:tabular-nums;
}

@media (max-width:880px){ .cierre__in{ grid-template-columns:1fr; } }

/* ── 16. PIE ───────────────────────────────────────────────── */

.pie{ background:var(--bg-2); border-top:1px solid var(--line); padding-block:44px; }
.pie__in{ display:grid; gap:14px; }
.pie__marca{ font-family:var(--display); font-size:1.15rem; }
.pie__marca em{
  font-family:var(--mono); font-style:normal; font-size:.688rem;
  color:var(--ink-3); letter-spacing:.06em;
}
.pie__legal, .pie__copy{ font-size:.75rem; color:var(--ink-3); line-height:1.7; }
.pie__copy{ font-family:var(--mono); font-size:.688rem; }

/* ── 17. BOTÓN FLOTANTE WHATSAPP ───────────────────────────── */

.wa{
  position:fixed; right:20px; bottom:20px; z-index:45;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.wa.is-visible{ opacity:1; visibility:visible; transform:none; }
.wa:hover{ transform:scale(1.06); }

/* ── 18. REVELADO AL SCROLL ────────────────────────────────── */

/* Solo se ocultan si hay JavaScript: sin JS la página se ve completa. */
html.js .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d, 0s);
}
html.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html.js .reveal{ opacity:1; transform:none; }
  /* La conductometría se muestra terminada: lima fuera, conducto sellado. */
  .gutta{ stroke-dashoffset:0; }
  .lima{ opacity:0; }
  .apice{ opacity:1; }
  .apex span{ opacity:1; color:var(--ink-2); }
  .apex span.apex__fin{
    color:var(--accent-2);
    background:color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

/* ── 19. IMPRESIÓN ─────────────────────────────────────────── */

@media print{
  .nav,.wa,.menu-movil{ display:none !important; }
  body{ background:#fff; color:#000; }
  .reveal{ opacity:1; transform:none; }
}