/*
Theme Name: Catalina Buitrago
Theme URI: https://catalinabuitrago.com
Author: M · Brand & Web
Description: Tema a medida para la consulta de psicologia de Catalina Buitrago. Sistema visual "Profundidad y claridad": Cormorant Garamond + Neue Haas Grotesk, paleta Deep Teal / Bone / Sand, simbolo Eclipse. No usar page builders: el diseno vive aqui.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: catalina-buitrago
*/

/* ============================================================
   NEUE HAAS GROTESK  (autoalojar con tu licencia comercial)
   1) Sube los .woff2 a  /wp-content/themes/catalina-buitrago/fonts/
   2) Descomenta este bloque. Mientras tanto, el fallback (Inter)
      mantiene el aspecto casi identico.
   ------------------------------------------------------------
   @font-face{
     font-family:"Neue Haas Grotesk Display Pro";
     src:url("fonts/NeueHaasDisplayRoman.woff2") format("woff2");
     font-weight:400; font-style:normal; font-display:swap;
   }
   @font-face{
     font-family:"Neue Haas Grotesk Display Pro";
     src:url("fonts/NeueHaasDisplayMedium.woff2") format("woff2");
     font-weight:500; font-style:normal; font-display:swap;
   }
   ============================================================ */

/* =========================================================
   CATALINA BUITRAGO · SISTEMA VISUAL
   Marca existente — respetada, no reinventada.
   Concepto: "Profundidad y claridad" (Eclipse)
   ========================================================= */
:root{
  /* Paleta de marca */
  --bone:#EFE8DD;
  --midnight:#12393D;
  --teal:#0E4A53;
  --sand:#C8A97E;
  --moss:#6D7C69;

  /* Derivados de trabajo */
  --ink:#16302E;               /* texto principal sobre bone */
  --ink-soft:#3E524E;          /* texto secundario */
  --line:#DED3C3;              /* filetes sobre bone */
  --bone-2:#E7DECF;            /* superficie cálida alterna */
  --sand-deep:#B9975F;         /* hover del acento */

  /* Tipografía */
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Neue Haas Grotesk Display Pro","Neue Haas Grotesk","Inter","Helvetica Neue",Arial,sans-serif;

  /* Escala tipográfica editorial */
  --t-label:.72rem;
  --t-sm:.875rem;
  --t-body:1.0625rem;
  --t-lead:1.3rem;
  --t-h3:1.5rem;
  --t-h2:clamp(2.1rem,4.4vw,3.35rem);
  --t-hero:clamp(2.9rem,7.6vw,6.4rem);

  /* Ritmo */
  --gap:clamp(1.25rem,5vw,4rem);
  --sec:clamp(5rem,10vw,8.5rem);
  --maxw:1280px;
  --prose:64ch;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* --------- Tipografía base --------- */
.serif{font-family:var(--serif)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.012em;color:var(--midnight)}
.label{
  font-family:var(--sans);
  font-size:var(--t-label);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:500;
  color:var(--moss);
}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-soft)}
p{max-width:var(--prose)}

/* --------- Layout --------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4rem)}
.section{padding-block:var(--sec)}
.eyebrow-row{display:flex;align-items:center;gap:1rem;margin-bottom:2.2rem}
.eyebrow-row .rule{flex:1;height:1px;background:var(--line)}

/* --------- Eclipse (símbolo) --------- */
.eclipse{display:inline-block;color:currentColor;line-height:0}
.eclipse svg{display:block;width:100%;height:100%;overflow:visible}

/* =========================================================
   NAVBAR DEL SITIO
   ========================================================= */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(239,232,221,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s,background .4s;
}
.nav.scrolled{border-color:var(--line);background:rgba(239,232,221,.94)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin-inline:auto;padding:1rem clamp(1.25rem,5vw,4rem)}
.brand{display:flex;align-items:center;gap:.7rem}
.brand .eclipse{width:26px;height:26px;color:var(--midnight)}
.brand-name{font-family:var(--serif);font-size:1.4rem;color:var(--midnight);line-height:1;letter-spacing:.01em}
.brand-tag{display:block;font-family:var(--sans);font-size:.56rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--moss);margin-top:.28rem}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.9rem;color:var(--ink);letter-spacing:.01em;position:relative;padding:.2rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--midnight);transition:width .35s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:inline-flex;align-items:center;gap:.55rem}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--sans);font-size:.9rem;font-weight:500;letter-spacing:.015em;
  padding:.92em 1.7em;border-radius:2px;transition:all .35s var(--ease);
  border:1px solid transparent;white-space:nowrap;
}
.btn--primary{background:var(--sand);color:var(--midnight)}
.btn--primary:hover{background:var(--sand-deep);transform:translateY(-1px)}
.btn--ghost{border-color:var(--midnight);color:var(--midnight)}
.btn--ghost:hover{background:var(--midnight);color:var(--bone)}
.btn--light{background:var(--bone);color:var(--midnight)}
.btn--light:hover{background:#fff;transform:translateY(-1px)}
.btn--ghost-light{border-color:rgba(239,232,221,.5);color:var(--bone)}
.btn--ghost-light:hover{background:rgba(239,232,221,.1)}
.btn-arrow{font-size:1.05em;transition:transform .35s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(3px)}

.nav-burger{display:none;width:30px;height:22px;position:relative}
.nav-burger span{position:absolute;left:0;width:100%;height:1.5px;background:var(--midnight);transition:.3s}
.nav-burger span:nth-child(1){top:2px}
.nav-burger span:nth-child(2){top:10px}
.nav-burger span:nth-child(3){top:18px}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;overflow:hidden;background:var(--bone)}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;min-height:calc(100vh - 120px);
  padding-block:clamp(3rem,8vw,7rem);
}
.hero-copy{max-width:34rem}
.hero h1{font-size:var(--t-hero);margin:1.6rem 0 1.8rem}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero .lead{max-width:30rem;margin-bottom:2.4rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hero-reassure{margin-top:2rem;font-size:.82rem;color:var(--moss);letter-spacing:.02em;
  display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.hero-reassure span{display:inline-flex;align-items:center;gap:.5rem}
.hero-reassure span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--sand)}

/* Eclipse visual del hero */
.hero-visual{position:relative;aspect-ratio:4/5;border-radius:3px;overflow:hidden}
.hero-eclipse{
  position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 70% 20%, #17474C 0%, var(--midnight) 55%, #0C2A2E 100%);
}
.hero-eclipse .eclipse{width:62%;height:62%;color:var(--sand);
  filter:drop-shadow(0 0 60px rgba(200,169,126,.28))}
.hero-visual .foto-cap{position:absolute;left:1.1rem;bottom:1.1rem;z-index:3}

/* =========================================================
   FOTOGRAFÍA (dirección de arte — placeholders intencionales)
   ========================================================= */
.foto{position:relative;overflow:hidden;border-radius:3px;isolation:isolate;
  background:linear-gradient(150deg,var(--midnight),var(--teal) 70%)}
.foto::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 70% at 75% 15%, rgba(200,169,126,.30), transparent 60%)}
.foto::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
.foto--warm{background:linear-gradient(150deg,#B9975F,#8A7A57 70%)}
.foto--warm::before{background:radial-gradient(80% 70% at 25% 20%, rgba(239,232,221,.4), transparent 60%)}
.foto-cap{font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,232,221,.8);font-style:normal;display:inline-flex;align-items:center;gap:.5rem}
.foto-cap::before{content:"";width:14px;height:1px;background:rgba(239,232,221,.6)}
.foto .watermark{position:absolute;right:-6%;bottom:-8%;width:45%;color:rgba(239,232,221,.08);z-index:0}

/* =========================================================
   MANIFIESTO
   ========================================================= */
.manifesto{background:var(--bone-2);border-block:1px solid var(--line)}
.manifesto .wrap{max-width:960px;text-align:center}
.manifesto blockquote{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.7rem,4vw,3rem);line-height:1.22;color:var(--midnight);letter-spacing:-.01em}
.manifesto blockquote em{font-style:italic;color:var(--teal)}
.manifesto .divider-eclipse{width:34px;height:34px;color:var(--sand);margin:0 auto 2rem}

/* =========================================================
   SOBRE CATALINA
   ========================================================= */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.about-photo{aspect-ratio:4/5}
.about h2{font-size:var(--t-h2);margin:1.4rem 0 1.6rem;max-width:16ch}
.about p+p{margin-top:1.1rem}
.creds{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.chip{font-size:.78rem;letter-spacing:.03em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:2px;padding:.5em .9em;background:var(--bone)}
.about .signature{font-family:var(--serif);font-style:italic;font-size:1.7rem;
  color:var(--teal);margin-top:2rem}

/* =========================================================
   PROBLEMAS QUE RESUELVE
   ========================================================= */
.section--dark{background:var(--midnight);color:var(--bone)}
.section--dark h2,.section--dark h3{color:var(--bone)}
.section--dark .label{color:var(--sand)}
.section--dark .eyebrow-row .rule{background:rgba(239,232,221,.2)}
.problems h2{font-size:var(--t-h2);max-width:20ch;margin-bottom:3.2rem}
.problems h2 em{font-style:italic;color:var(--sand)}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(239,232,221,.16);border-left:1px solid rgba(239,232,221,.16)}
.prob{padding:clamp(1.6rem,3vw,2.4rem);border-right:1px solid rgba(239,232,221,.16);
  border-bottom:1px solid rgba(239,232,221,.16);min-height:150px;
  display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;
  transition:background .4s}
.prob:hover{background:rgba(200,169,126,.07)}
.prob .n{font-size:.72rem;letter-spacing:.2em;color:var(--sand);opacity:.8}
.prob p{font-family:var(--serif);font-size:1.5rem;line-height:1.25;color:var(--bone);max-width:none}

/* =========================================================
   PROCESO (secuencia real — numeración justificada)
   ========================================================= */
.process h2{font-size:var(--t-h2);margin-bottom:.6rem}
.process .sub{color:var(--ink-soft);margin-bottom:3.4rem;max-width:40ch}
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:baseline;padding:2.2rem 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .step-n{font-family:var(--serif);font-size:2.6rem;color:var(--sand);line-height:1;min-width:2.4ch}
.step .step-body h3{font-size:1.55rem;margin-bottom:.5rem}
.step .step-body p{color:var(--ink-soft)}
.step .step-meta{font-size:.8rem;color:var(--moss);letter-spacing:.03em;text-align:right;white-space:nowrap}
@media(max-width:640px){.step{grid-template-columns:auto 1fr}.step .step-meta{display:none}}

/* =========================================================
   ESPECIALIDADES
   ========================================================= */
.spec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.spec-head h2{font-size:var(--t-h2)}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.spec{position:relative;overflow:hidden;border-radius:3px;padding:clamp(1.8rem,3vw,2.6rem);
  background:var(--bone-2);border:1px solid var(--line);min-height:270px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .5s var(--ease),background .5s}
.spec:hover{transform:translateY(-4px);background:#fff}
.spec .spec-ecl{width:30px;height:30px;color:var(--teal);margin-bottom:auto}
.spec h3{font-size:1.7rem;margin:1.6rem 0 .7rem}
.spec p{font-size:.98rem;color:var(--ink-soft)}
.spec .spec-link{margin-top:1.4rem;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal);display:inline-flex;align-items:center;gap:.5rem}
.spec .spec-link .btn-arrow{transition:transform .35s var(--ease)}
.spec:hover .spec-link .btn-arrow{transform:translateX(4px)}

/* =========================================================
   BENEFICIOS
   ========================================================= */
.benefits{background:var(--teal);color:var(--bone)}
.benefits h2{color:var(--bone);font-size:var(--t-h2);max-width:16ch;margin-bottom:3rem}
.benefits .label{color:var(--sand)}
.benefits .eyebrow-row .rule{background:rgba(239,232,221,.2)}
.ben-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid rgba(239,232,221,.18)}
.ben{display:flex;align-items:baseline;gap:1.2rem;padding:1.5rem .5rem;
  border-bottom:1px solid rgba(239,232,221,.18)}
.ben .b-ecl{width:14px;height:14px;color:var(--sand);flex:none;position:relative;top:3px}
.ben p{font-family:var(--serif);font-size:1.55rem;color:var(--bone);line-height:1.2;max-width:none}
@media(min-width:721px){.ben:nth-child(odd){padding-right:2.5rem;border-right:1px solid rgba(239,232,221,.18)}
  .ben:nth-child(even){padding-left:2.5rem}}

/* =========================================================
   TESTIMONIOS
   ========================================================= */
.testi h2{font-size:var(--t-h2);margin-bottom:3rem;max-width:18ch}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.quote{background:var(--bone-2);border:1px solid var(--line);border-radius:3px;
  padding:clamp(1.8rem,3vw,2.4rem);display:flex;flex-direction:column;gap:1.6rem}
.quote .q-mark{font-family:var(--serif);font-size:3rem;line-height:.5;color:var(--sand);height:1.2rem}
.quote p{font-family:var(--serif);font-size:1.35rem;line-height:1.35;color:var(--midnight)}
.quote .q-by{margin-top:auto;font-size:.78rem;letter-spacing:.04em;color:var(--moss);text-transform:uppercase}
.testi-note{margin-top:2rem;font-size:.8rem;color:var(--moss);font-style:italic}

/* =========================================================
   FAQ
   ========================================================= */
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.faq-grid h2{font-size:var(--t-h2);max-width:12ch}
.faq-grid .faq-intro{color:var(--ink-soft);margin-top:1.4rem;font-size:.98rem}
.acc-item{border-top:1px solid var(--line)}
.acc-item:last-child{border-bottom:1px solid var(--line)}
.acc-q{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.5rem 0;font-family:var(--serif);font-size:1.35rem;color:var(--midnight)}
.acc-icon{flex:none;width:20px;height:20px;position:relative}
.acc-icon::before,.acc-icon::after{content:"";position:absolute;background:var(--teal);transition:transform .35s var(--ease)}
.acc-icon::before{top:9px;left:0;width:100%;height:1.5px}
.acc-icon::after{left:9px;top:0;height:100%;width:1.5px}
.acc-item.open .acc-icon::after{transform:scaleY(0)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.acc-a p{padding-bottom:1.6rem;color:var(--ink-soft);max-width:60ch}

/* =========================================================
   CTA FINAL (eclipse inmersivo)
   ========================================================= */
.cta-final{position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 80% 10%, #17474C 0%, var(--midnight) 55%, #0B282C 100%);
  color:var(--bone);text-align:center}
.cta-final .wrap{max-width:760px}
.cta-final .eclipse{width:44px;height:44px;color:var(--sand);margin:0 auto 2.2rem;
  filter:drop-shadow(0 0 40px rgba(200,169,126,.35))}
.cta-final h2{color:var(--bone);font-size:clamp(2.3rem,5vw,3.8rem);margin-bottom:1.4rem}
.cta-final h2 em{font-style:italic;color:var(--sand)}
.cta-final p{color:rgba(239,232,221,.8);margin:0 auto 2.6rem;max-width:44ch;font-size:1.1rem}
.cta-final .hero-reassure{justify-content:center;margin-top:2.2rem;color:rgba(239,232,221,.65)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:#0C2A2E;color:rgba(239,232,221,.72);padding-block:clamp(3.5rem,7vw,6rem) 2.5rem}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;
  padding-bottom:3.5rem;border-bottom:1px solid rgba(239,232,221,.14)}
.footer .brand-name{color:var(--bone)}
.footer .brand .eclipse{color:var(--sand)}
.footer-brand p{margin-top:1.4rem;font-size:.9rem;max-width:34ch}
.footer-brand .f-tag{font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--sand);margin-top:1.2rem}
.footer h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--moss);margin-bottom:1.3rem;font-weight:600}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.footer ul a{font-size:.92rem;transition:color .3s}
.footer ul a:hover{color:var(--sand)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;padding-top:2rem;font-size:.78rem;color:rgba(239,232,221,.5)}

/* =========================================================
   PÁGINA · CONSULTA INICIAL
   ========================================================= */
.c-hero{background:var(--midnight);color:var(--bone);padding-block:clamp(5rem,9vw,8rem)}
.c-hero .wrap{max-width:var(--maxw)}
.c-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.c-hero .label{color:var(--sand)}
.c-hero h1{color:var(--bone);font-size:clamp(2.6rem,6vw,4.6rem);margin:1.4rem 0 1.6rem}
.c-hero h1 em{font-style:italic;color:var(--sand)}
.c-hero p{color:rgba(239,232,221,.82);max-width:38ch;margin-bottom:2.4rem;font-size:1.1rem}
.c-card{background:rgba(239,232,221,.06);border:1px solid rgba(239,232,221,.16);border-radius:3px;
  padding:clamp(1.8rem,3vw,2.6rem)}
.c-card .row{display:flex;justify-content:space-between;padding:1rem 0;border-bottom:1px solid rgba(239,232,221,.14);font-size:.95rem}
.c-card .row:last-child{border-bottom:none}
.c-card .row span:first-child{color:rgba(239,232,221,.6)}
.c-card .row span:last-child{color:var(--bone);font-family:var(--serif);font-size:1.15rem}

.incl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:1rem}
.incl{display:flex;gap:1rem;align-items:flex-start;padding:1.5rem;border:1px solid var(--line);border-radius:3px;background:var(--bone-2)}
.incl .i-ecl{width:22px;height:22px;color:var(--teal);flex:none;margin-top:2px}
.incl h3{font-size:1.2rem;margin-bottom:.35rem;font-family:var(--serif)}
.incl p{font-size:.92rem;color:var(--ink-soft)}

.prep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.prep{padding:1.8rem;background:var(--bone);border:1px solid var(--line);border-radius:3px}
.prep .p-n{font-family:var(--serif);font-size:2rem;color:var(--sand);line-height:1;margin-bottom:1rem}
.prep h3{font-size:1.25rem;margin-bottom:.5rem}
.prep p{font-size:.92rem;color:var(--ink-soft)}

/* Formulario */
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.form-field{margin-bottom:1.3rem}
.form-field label{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--moss);margin-bottom:.6rem}
.form-field input,.form-field select,.form-field textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--bone);border:1px solid var(--line);border-radius:2px;padding:.9em 1em;transition:border-color .3s}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--teal)}
.form-field textarea{resize:vertical;min-height:110px}
.book-side{background:var(--bone-2);border:1px solid var(--line);border-radius:3px;padding:clamp(1.8rem,3vw,2.4rem)}
.book-side h3{font-size:1.5rem;margin-bottom:1rem}
.contact-line{display:flex;align-items:center;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.contact-line:last-of-type{border-bottom:none}
.contact-line .cl-ecl{width:18px;height:18px;color:var(--teal);flex:none}

/* =========================================================
   PÁGINA · SISTEMA DE DISEÑO
   ========================================================= */
.ds-hero{padding-block:clamp(4rem,8vw,6rem) 2rem}
.ds-hero h1{font-size:clamp(2.4rem,5vw,4rem);margin:1rem 0}
.ds-block{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.ds-block h2{font-size:1.8rem;margin-bottom:.4rem}
.ds-block .ds-note{color:var(--moss);font-size:.9rem;margin-bottom:2rem}
.sw-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.sw{border:1px solid var(--line);border-radius:3px;overflow:hidden}
.sw .chip-c{height:110px}
.sw .sw-meta{padding:.9rem;font-size:.78rem}
.sw .sw-name{font-weight:600;color:var(--ink)}
.sw .sw-hex{color:var(--moss);letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;margin-top:.2rem}
.sw .sw-use{color:var(--ink-soft);margin-top:.5rem;font-size:.72rem;line-height:1.4}
.type-spec{border-top:1px solid var(--line);padding:1.3rem 0;display:grid;grid-template-columns:.5fr 1.5fr;gap:1.5rem;align-items:baseline}
.type-spec .ts-meta{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--moss)}
.comp-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.comp-box{padding:2rem;border:1px solid var(--line);border-radius:3px;background:var(--bone-2);flex:1;min-width:240px}
.ds-eclipses{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.ds-eclipses .eclipse{width:56px;height:56px}

/* =========================================================
   REVEAL / MOTION
   ========================================================= */
.has-js .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.has-js .reveal.in{opacity:1;transform:none}
.hero-eclipse .eclipse{animation:eclipseIn 1.8s var(--ease) both}
@keyframes eclipseIn{from{opacity:0;transform:scale(.85) rotate(-8deg)}to{opacity:1;transform:none}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:960px){
  :root{--t-body:1rem}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:fixed;top:66px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;background:var(--bone);
    border-bottom:1px solid var(--line);padding:1rem clamp(1.25rem,5vw,4rem) 1.6rem}
  .nav-links.open a{width:100%;padding:1rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav-links.open a::after{display:none}
  .nav-links.open .nav-cta{margin-top:1rem;width:100%}
  .nav-links.open .btn{width:100%}
  .nav-burger{display:block}
  .hero-grid{grid-template-columns:1fr;gap:2.5rem;min-height:0}
  .hero-visual{aspect-ratio:16/12;order:-1}
  .about-grid,.faq-grid,.c-hero-grid,.book-grid{grid-template-columns:1fr}
  .about-photo{aspect-ratio:16/11;order:-1}
  .prob-grid,.spec-grid,.testi-grid,.ben-list,.incl-grid,.prep-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
  .sw-grid{grid-template-columns:repeat(3,1fr)}
  .type-spec{grid-template-columns:1fr}
}
@media(max-width:600px){
  
  
  .prob-grid,.spec-grid,.testi-grid,.ben-list,.incl-grid,.prep-grid,.footer-top,.sw-grid{grid-template-columns:1fr}
  .spec-head{flex-direction:column;align-items:flex-start}
  .hero-actions .btn{flex:1}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .has-js .reveal{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px;border-radius:1px}

.ecl-svg{stroke-width:1px}.hero-eclipse .ecl-svg{stroke-width:3px}

.cb-list{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-top:1.4rem}
.cb-list li{position:relative;padding-left:1.7rem;color:var(--ink-soft);line-height:1.5}
.cb-list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--sand)}
.cb-list--dark li{color:rgba(239,232,221,.82)}
.cb-prose p{margin-bottom:1.15rem}
.cb-prose h2,.cb-prose h3{margin:2.2rem 0 1rem}
.cb-two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:760px){.cb-two{grid-template-columns:1fr}}

/* Fotografías cargadas desde el Personalizador */
.hero-visual > img,.foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3px}
.foto:has(> img)::before,.foto:has(> img)::after{display:none}