/* Sebastián Terán — landing page.
   Layout and component rules implementing the "Mockups - Desktop y Móvil" design.
   All values come from the design system tokens in tokens.css. */

/* The page is its own query container, so every clamp() below reacts to the
   rendered width rather than the viewport. That keeps the layout identical
   when the page is embedded in a fixed-width mockup frame. */
/* overflow-x:clip, not hidden: hidden would make .page a scroll container and
   break position:sticky on the header. */
.page{background:var(--surface-page);overflow-x:clip;container-type:inline-size}

html{scroll-behavior:smooth}
/* Sections are anchor targets; keep them clear of the sticky header. */
[id]{scroll-margin-top:calc(var(--header-h) + 12px)}

.container{max-width:var(--container-max);margin:0 auto;padding-inline:clamp(20px,5cqi,40px)}
.section{border-bottom:1px solid var(--border-hairline)}
.section > .container{padding-block:clamp(52px,7cqi,96px)}
.section--inverse{background:var(--surface-inverse);color:var(--white);border-bottom:0}

.stack{display:flex;flex-direction:column}
.rule-accent{width:56px;height:2px;background:var(--accent)}

.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--text-accent)}
.eyebrow--inverse{color:var(--gold-300)}

.lead{font-size:var(--fs-body-lg);color:var(--grey-700);max-width:46ch}
.note{font-size:var(--fs-body-sm);color:var(--text-muted)}

.display{font-family:var(--font-display);font-weight:var(--fw-regular);letter-spacing:var(--tracking-display);color:var(--text-strong)}
.display--inverse{color:var(--white)}

/* Section headers: eyebrow + title + accent rule */
.section-head{display:flex;flex-direction:column;gap:14px;max-width:62ch}
.section-head h2{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:clamp(26px,3.2cqi,34px);line-height:var(--lh-heading);color:var(--text-strong)}

/* ---------- Button (design system: components/core/Button) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-button);
  text-transform:uppercase;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  transition:var(--transition-control);text-decoration:none;white-space:nowrap;
  height:var(--control-h-md);padding:0 26px;font-size:12.5px}
.btn--sm{height:var(--control-h-sm);padding:0 18px;font-size:11.5px}
.btn--lg{height:var(--control-h-lg);padding:0 34px;font-size:13.5px}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--ring)}

.btn--primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-accent)}
.btn--secondary{background:transparent;color:var(--text-strong);border-color:var(--navy-800)}
.btn--secondary:hover{background:var(--navy-800);color:var(--white)}
.btn--inverse-outline{background:transparent;color:var(--white);border-color:var(--border-inverse)}
.btn--inverse-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:var(--white)}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:rgba(251,250,247,.9);
  backdrop-filter:var(--blur-veil);-webkit-backdrop-filter:var(--blur-veil);
  border-bottom:1px solid var(--border-hairline)}
.site-header .container{padding-block:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.site-header .logo-link{display:flex}
.logo{display:block;width:auto;max-width:100%;align-self:flex-start}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  font-size:11.5px;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:var(--fw-semibold)}
.site-nav a{color:var(--navy-800)}
.site-nav a:hover{color:var(--gold-600)}

/* ---------- Hero ---------- */
.hero > .container{padding-block:clamp(44px,7cqi,92px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,5cqi,64px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero-copy h1{font-size:clamp(34px,5.2cqi,60px);line-height:1.12}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:20px;
  border-top:1px solid var(--border-hairline);font-size:var(--fs-caption);color:var(--text-muted);letter-spacing:.04em}
.hero-figure{position:relative;min-width:0}
.photo-frame{border:1px solid var(--border-hairline);background:var(--white);padding:10px}
.photo-frame img{display:block;width:100%;object-fit:cover;filter:saturate(.92)}
.hero-figure .photo-frame{box-shadow:var(--shadow-2)}
.hero-figure img{aspect-ratio:4/5;object-position:center 22%}
.name-plate{position:absolute;left:-1px;bottom:-1px;background:var(--surface-inverse);color:var(--white);
  padding:14px 20px;display:flex;flex-direction:column;gap:3px;max-width:80%}
.name-plate strong{font-family:var(--font-display);font-size:18px;font-weight:var(--fw-regular)}
.name-plate span{font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gold-300);font-weight:var(--fw-semibold)}

/* ---------- Two-column statement ---------- */
.statement > .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(28px,4cqi,56px);align-items:start}
.statement h2{font-size:clamp(26px,3.6cqi,42px);line-height:1.2}
.statement-body{display:flex;flex-direction:column;gap:18px;padding-top:8px}
.statement-body .lead{max-width:52ch}
.statement-body .note{max-width:52ch}

/* ---------- Services ---------- */
.services > .container{display:flex;flex-direction:column;gap:clamp(28px,4cqi,44px)}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:20px}
.service-card{display:flex;flex-direction:column;gap:12px;background:var(--white);
  border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:28px;min-height:214px;color:inherit;
  transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.service-card:hover{border-color:var(--border-accent);box-shadow:var(--shadow-2);transform:translateY(-2px);color:inherit}
.service-card .num{font-family:var(--font-display);font-size:15px;color:var(--gold-300)}
.service-card h3{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:var(--fs-h3);color:var(--text-strong);line-height:1.25}
.service-card p{font-size:var(--fs-body-sm);color:var(--grey-700);flex:1}

/* ---------- Diagnóstico (inverse) ---------- */
.diagnostico > .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(32px,5cqi,64px);align-items:start}
.diagnostico-copy{display:flex;flex-direction:column;gap:22px}
.diagnostico-copy h2{font-size:clamp(28px,3.8cqi,44px);line-height:1.16}
.diagnostico-copy .lead{color:var(--navy-200)}
.findings{border:1px solid var(--border-inverse);display:flex;flex-direction:column}
.finding{display:flex;gap:18px;align-items:flex-start;padding:26px clamp(20px,3cqi,32px)}
.finding + .finding{border-top:1px solid var(--border-inverse)}
.finding .dot{width:11px;height:11px;border-radius:50%;margin-top:7px;flex:0 0 auto}
.finding--ok .dot{background:var(--success-500)}
.finding--warn .dot{background:var(--warning-500)}
.finding--risk .dot{background:var(--danger-500)}
.finding-text{display:flex;flex-direction:column;gap:5px}
.finding-text strong{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--white);font-weight:var(--fw-regular)}
.finding-text span{font-size:var(--fs-body-sm);color:var(--navy-200)}

/* ---------- Para quién ---------- */
.audience > .container{display:flex;flex-direction:column;gap:clamp(28px,4cqi,40px)}
.chip-row{display:flex;flex-wrap:wrap;gap:12px}
.chip{padding:14px 20px;border:1px solid var(--border-hairline);border-radius:var(--radius-md);
  background:var(--white);font-size:var(--fs-body);color:var(--text-strong)}
.audience .note{max-width:60ch}

/* ---------- Sobre mí ---------- */
.about > .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(32px,5cqi,64px);align-items:center}
.about img{aspect-ratio:1/1}
.about-copy{display:flex;flex-direction:column;gap:20px}
.about-copy h2{font-size:clamp(26px,3.4cqi,40px);line-height:1.18}
.about-copy .lead{max-width:52ch}
.credentials{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:4px}
.credential{padding-top:14px;border-top:1px solid var(--border-hairline);display:flex;flex-direction:column;gap:5px}
.credential span{font-size:var(--fs-body-sm);color:var(--grey-700)}

/* ---------- Metodología ---------- */
.method > .container{display:flex;flex-direction:column;gap:clamp(28px,4cqi,44px)}
.steps{overflow:hidden;margin-left:-1px;border-top:1px solid var(--border-hairline)}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.step{padding:28px 26px;border-left:1px solid var(--border-hairline);display:flex;flex-direction:column;gap:10px}
.step .num{font-family:var(--font-display);font-size:clamp(30px,4cqi,38px);color:var(--gold-300);line-height:1}
.step h3{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:var(--fs-h4);color:var(--text-strong)}
.step p{font-size:var(--fs-body-sm);color:var(--grey-700)}

/* ---------- Testimonios ---------- */
.testimonials > .container{display:flex;flex-direction:column;gap:clamp(28px,4cqi,40px)}
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.testimonial{background:var(--white);border:1px dashed var(--border-strong);border-radius:var(--radius-md);
  padding:32px;display:flex;flex-direction:column;gap:20px;min-height:230px}
.testimonial .quote-mark{font-family:var(--font-display);font-size:34px;color:var(--gold-300);line-height:.6}
.testimonial blockquote{margin:0;font-family:var(--font-display);font-size:21px;line-height:1.42;color:var(--navy-300);flex:1}
.testimonial figcaption{display:flex;flex-direction:column;gap:2px;padding-top:16px;border-top:1px solid var(--border-hairline)}
.testimonial figcaption strong{font-size:var(--fs-body-sm);color:var(--text-strong);font-weight:var(--fw-regular)}
.testimonial figcaption span{font-size:var(--fs-caption);color:var(--text-muted)}

/* ---------- Contacto ---------- */
.contact > .container{max-width:900px;padding-block:clamp(56px,8cqi,104px);
  display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.contact h2{font-size:clamp(28px,4.4cqi,52px);line-height:1.14}
.contact .lead{color:var(--navy-200)}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface-inverse-deep);color:var(--white);padding:clamp(48px,6cqi,72px) 0 30px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px;align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:16px}
.footer-brand p{font-size:var(--fs-body-sm);color:var(--navy-200);max-width:34ch}
.footer-col{display:flex;flex-direction:column;gap:12px}
.footer-col span,.footer-col a{font-size:var(--fs-body-sm);color:var(--navy-200)}
.footer-col a:hover{color:var(--gold-300)}
.footer-divider{height:1px;background:var(--border-inverse);margin:clamp(28px,4cqi,44px) 0 18px;border:0}
.footer-legal{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:var(--fs-caption);color:var(--navy-300)}
.footer-legal a{color:var(--navy-300)}
.footer-legal a:hover{color:var(--gold-300)}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .service-card:hover{transform:none}
}