/* ============================================================
   Dra. Gabriela Otero — Sitio web
   Estilos basados en el Design System (Manual de Marca, Feb 2026)
   Display: Cormorant Garamond (sustituto de IvyMode) · Body: Quicksand
   ============================================================ */

:root {
  /* ---- Paleta de marca ---- */
  --c-navy:      #021351;
  --c-navy-80:   #1b2a63;
  --c-blanco:    #F9F9F9;
  --c-white:     #ffffff;
  --c-turquesa:  #03D8D4;
  --c-lila:      #9DACFF;
  --c-naranja:   #F86513;

  /* ---- Roles ---- */
  --color-bg:        var(--c-blanco);
  --color-surface:   var(--c-white);
  --color-dark:      var(--c-navy);
  --color-text:      var(--c-navy);
  --color-text-muted:#4F566B;
  --color-on-dark:   #EAEEFF;
  --color-on-dark-muted:#B9C2E8;
  --color-primary:   var(--c-turquesa);
  --color-secondary: var(--c-lila);
  --color-accent:    var(--c-naranja);
  --color-accent-text: #C0480D;   /* naranja oscuro para texto: 4.78:1 sobre blanco (AA) */
  --color-line:      #E2E6F1;

  /* tintes */
  --tint-turquesa: #E2FBFA;
  --tint-lila:     #EEF1FF;
  --tint-naranja:  #FEEDE3;

  /* ---- Degradados ---- */
  --grad-hero:        linear-gradient(155deg, #021351 0%, #142a78 55%, #2c3f93 100%);
  --grad-azul-turq:   linear-gradient(155deg, #021351 0%, #0A5B72 55%, #03D8D4 100%);
  --grad-azul-lila:   linear-gradient(155deg, #021351 0%, #2E3E8C 55%, #9DACFF 100%);
  --grad-soft:        linear-gradient(155deg, #C8F6F4 0%, #F9F9F9 50%, #E7ECFF 100%);

  /* ---- Tipografía ---- */
  --font-display: "Cormorant Garamond", Georgia, serif; /* sustituto de IvyMode */
  --font-body:    "Quicksand", system-ui, -apple-system, sans-serif;

  --fs-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  --fs-sm:   clamp(0.875rem, 0.82rem + 0.25vw, 0.95rem);
  --fs-base: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
  --fs-lg:   clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  --fs-h3:   clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h2:   clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  --fs-h1:   clamp(2.6rem, 1.6rem + 4vw, 4.4rem);
  --fs-hero: clamp(3rem, 1.6rem + 6vw, 6.5rem);
  --ls-over: 0.18em;

  /* ---- Espaciado ---- */
  --space-xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.6vw, 1.2rem);
  --space-md: clamp(1.5rem, 1rem + 2vw, 3rem);
  --space-lg: clamp(3rem, 2rem + 4vw, 6rem);
  --space-xl: clamp(5rem, 3rem + 7vw, 9rem);

  /* ---- Layout ---- */
  --container: 1440px;
  --container-narrow: 820px;
  --pad: clamp(1.2rem, 3vw, 3.5rem);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(2,19,81,.06), 0 1px 2px rgba(2,19,81,.08);
  --shadow-md: 0 10px 30px rgba(2,19,81,.10);
  --shadow-lg: 0 24px 60px rgba(2,19,81,.16);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-q: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: .2s; --dur: .4s; --dur-slow: .8s;
}

/* ============ RESET ============ */
*,*::before,*::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
/* Íconos de marca: siempre conservar proporción dentro de su caja (nunca aplastar) */
img[src*="Icono_"] { object-fit: contain !important; aspect-ratio: auto !important; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }

/* ============ HELPERS ============ */
.container { width: min(100% - 2 * var(--pad), var(--container)); margin-inline: auto; }
.narrow { max-width: var(--container-narrow); }
.section { padding: var(--space-xl) 0; }
.section:has(.cta-band) { padding-top: calc(var(--space-xl) * 0.2); }
.overline { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-over); text-transform: uppercase; color: var(--color-accent-text); }
.eyebrow-line { display:flex; align-items:center; gap:.6rem; }
.lead { font-size: var(--fs-lg); color: var(--color-text-muted); font-weight: 400; }
.muted { color: var(--color-text-muted); }
.center { text-align: center; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--c-navy); color:#fff; padding:.6rem 1rem; z-index:10001; }
.skip-link:focus { left:1rem; top:1rem; }

/* subrayado naranja del manual */
.heading-underline { display:inline-block; position:relative; padding-bottom:.35rem; }
/* subrayado naranja eliminado a pedido */

/* grano / textura sutil */
.grain::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ============ BUTTONS ============ */
.btn { display:inline-flex; align-items:center; gap:.6rem; font-weight:600; font-size:var(--fs-sm); padding:.9rem 1.7rem; border-radius:var(--radius-pill); border:2px solid transparent; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); will-change: transform; }
.btn:hover { transform: none; }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(157,172,255,.6); }
a:focus-visible, button:focus-visible { outline:2px solid var(--c-lila); outline-offset:3px; border-radius:4px; }
.btn--primary { background:var(--color-accent); color:#fff; }
.btn--primary:hover { background:#e0560c; box-shadow:0 0 22px rgba(248,101,19,.55); }
.btn--ghost { border-color:currentColor; }
.btn--ghost:hover { background:var(--c-navy); color:#fff; border-color:var(--c-navy); }
.btn--on-dark { background:#fff; color:var(--c-navy); }
.btn--on-dark:hover { background:var(--c-lila); }
.btn--brand { background:var(--c-turquesa); color:var(--c-navy); }
.btn--brand:hover { background:#04bdb9; }
.btn svg { width:18px; height:18px; }

/* Destellos al hover en TODOS los botones (sin flotar) */
.btn { position:relative; }
.btn::after { content:""; position:absolute; top:50%; left:50%; width:5px; height:5px; border-radius:50%; background:#fff; opacity:0; pointer-events:none; box-shadow:-46px -16px 0 -1px #fff, 50px -12px 0 -1px rgba(255,255,255,.95), 34px 18px 0 -1px #fff, -38px 16px 0 -1px rgba(255,255,255,.9), 64px 6px 0 -2px #fff, -62px 2px 0 -2px #fff, 10px -24px 0 -2px #fff, -6px 24px 0 -2px rgba(255,255,255,.9); }
.btn:hover::after { animation:btn-sparkles .9s ease-out; }
@keyframes btn-sparkles { 0%{opacity:0; transform:translate(-50%,-50%) scale(.4)} 35%{opacity:1; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.7)} }
@media (prefers-reduced-motion:reduce){ .btn:hover::after { animation:none; } }

/* ============ NAVBAR ============ */
.navbar { position:fixed; inset:0 0 auto 0; z-index:1000; padding:.9rem 0; transition: background var(--dur) var(--ease-q), padding var(--dur) var(--ease-q), box-shadow var(--dur); }
.navbar__container { width:min(100% - 2*var(--pad), var(--container)); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; }
.navbar__logo { position:relative; z-index:1001; }
.navbar__logo img { height:52.5px; transition:filter var(--dur); }
.navbar--scrolled { background:hsla(0,0%,100%,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow-sm); padding:.5rem 0; }
.navbar__menu { display:flex; align-items:center; gap:clamp(1rem, 1.5vw, 1.6rem); }
.navbar__link { color:var(--color-on-dark); font-size:var(--fs-sm); font-weight:500; position:relative; }
.navbar--scrolled .navbar__link { color:var(--color-text); }
.navbar--scrolled .navbar__logo img { } /* logo color works on light */
.navbar__link::after { content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px; background:var(--color-accent); transition:width var(--dur) var(--ease); }
.navbar__link:hover::after, .navbar__link--active::after { width:100%; }
.navbar__hamburger { display:none; background:none; border:none; padding:.5rem; z-index:1001; min-width:44px; min-height:44px; }
.navbar__hamburger span { display:block; width:26px; height:2px; background:currentColor; color:var(--color-on-dark); margin:6px 0; transition:transform var(--dur) var(--ease), opacity var(--dur-fast); }
.navbar--scrolled .navbar__hamburger span { color:var(--color-text); }

@media (max-width:1024px){
  .navbar__hamburger { display:block; }
  .navbar__menu { position:fixed; inset:0; flex-direction:column; justify-content:center; align-items:flex-start; gap:var(--space-md); padding-left:var(--pad); background:var(--grad-hero); transform:translateX(-100%); opacity:0; visibility:hidden; transition:transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), visibility var(--dur-slow); }
  .navbar__menu--open { transform:translateX(0); opacity:1; visibility:visible; }
  .navbar__menu .navbar__link { color:#fff; font-family:var(--font-display); font-size:var(--fs-h3); display:inline-block; padding:.55rem .9rem; }
  .navbar__hamburger--active span { color:#fff; }
  .navbar__hamburger--active span:nth-child(1){ transform:rotate(45deg) translate(6px,6px); }
  .navbar__hamburger--active span:nth-child(2){ opacity:0; }
  .navbar__hamburger--active span:nth-child(3){ transform:rotate(-45deg) translate(6px,-6px); }
}

/* ============ HERO ============ */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; background:var(--grad-hero); color:#fff; overflow:hidden; isolation:isolate; }
.hero__media { position:absolute; inset:0; z-index:-2; }
.hero__media img, .hero__media video { width:100%; height:100%; object-fit:cover; }
.hero__media img { opacity:.28; }
.hero__media video { opacity:.5; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, rgba(2,19,81,.6) 18%, rgba(2,19,81,.47) 50%, rgba(2,19,81,.27) 100%); }
.hero__watermark { position:absolute; right:-8%; top:50%; transform:translateY(-50%); width:min(60vw,720px); opacity:.07; z-index:-1; }
.hero__inner { padding-top:8rem; padding-bottom:4rem; max-width:var(--container); }
.hero__eyebrow { color:var(--c-turquesa); margin-bottom:1.4rem; font-weight:300; }
.hero h1 { font-size:var(--fs-hero); font-weight:500; margin-bottom:1.5rem; }
.hero h1 em { font-style:italic; color:var(--c-lila); }
.hero__sub { font-size:var(--fs-lg); color:var(--color-on-dark-muted); max-width:48ch; margin-bottom:2.2rem; }
.hero__cta { display:flex; flex-wrap:wrap; gap:1rem; }
.hero__scroll { position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:var(--fs-xs); letter-spacing:.15em; text-transform:uppercase; color:var(--color-on-dark-muted); }
.hero__scroll span { width:1px; height:42px; background:linear-gradient(var(--c-turquesa),transparent); animation:scrollcue 1.8s var(--ease) infinite; }
@keyframes scrollcue { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* split words */
.split-word { display:inline-block; overflow:hidden; vertical-align:bottom; }
.split-word__inner { display:inline-block; }

/* ============ PILARES ============ */
.pillars { background:var(--color-surface); }
.pillars__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:var(--space-lg); }
.pillar { padding:var(--space-md); border-radius:0; background:transparent; border-right:1px solid var(--color-line); transition:background var(--dur); }
.pillar:nth-child(3n), .pillar:last-child { border-right:none; }
.pillar__icon { width:62px; height:62px; border-radius:16px; display:grid; place-items:center; background:var(--tint-turquesa); margin-bottom:1.2rem; }
.pillar__icon img { width:34px; height:34px; }
.pillar h3 { font-size:var(--fs-h3); margin-bottom:.5rem; }
.pillar p { font-size:var(--fs-sm); color:var(--color-text-muted); }

/* Statement de pilares: frase sola, delicada, tamaño hero */
.pillars-statement { text-align:center; padding-bottom:var(--space-md); background:var(--color-surface); }
.statement { max-width:46rem; margin:0 auto; }
.statement__title { font-family:var(--font-display); font-size:var(--fs-hero); font-weight:500; line-height:1.05; color:var(--color-text); text-wrap:balance; }
.statement__eyebrow { display:block; margin-top:1.6rem; }
.pillars--grid-only { padding-top:var(--space-md); }
/* Desde 1280px: el título entra en una sola línea (ancho completo + tamaño atado al viewport) */
@media (min-width:1280px){
  .statement { max-width:none; }
  .statement__title { white-space:nowrap; font-size:min(var(--fs-hero), 7.4vw); }
}
@media (max-width:768px){
  .pillars-statement { text-align:left; }
}

/* ============ ABOUT ============ */
.about__grid { display:grid; grid-template-columns:1fr 1.1fr; gap:var(--space-lg); align-items:center; }
.about__media { position:relative; }
.about__media img { border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; aspect-ratio:4/5; object-fit:cover; }
.about__media::before { content:""; position:absolute; inset:-18px -18px auto auto; width:140px; height:140px; border-radius:20px; background:var(--grad-azul-turq); z-index:-1; }
.about__badge { position:absolute; left:-24px; bottom:24px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:1rem 1.3rem; display:flex; gap:.8rem; align-items:center; max-width:240px; }
.about__badge img { width:34px; height:34px; }
.about__badge b { font-family:var(--font-display); font-size:1.6rem; color:var(--c-navy); display:block; line-height:1; }
.about__badge span { font-size:var(--fs-xs); color:var(--color-text-muted); }
.about h2 { font-size:var(--fs-h2); margin:1rem 0 1.2rem; }
.about__creds { display:grid; gap:.7rem; margin:1.5rem 0; }
.about__creds li { display:flex; gap:.7rem; font-size:var(--fs-sm); }
.about__creds img { width:20px; height:20px; flex:none; margin-top:3px; }

/* ============ CATEGORÍAS ============ */
.cats { background:var(--c-navy); color:#fff; position:relative; }
.cats .heading-underline, .cats h2 { color:#fff; }
.cats__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-sm); margin-top:var(--space-lg); }
.cat { position:relative; border-radius:var(--radius-lg); padding:var(--space-md); min-height:260px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; color:#fff; transition:transform var(--dur) var(--ease); }
.cat:hover { transform:translateY(-8px); }
.cat:nth-child(1){ background:var(--grad-azul-turq); }
.cat:nth-child(2){ background:var(--grad-azul-lila); }
.cat:nth-child(3){ background:linear-gradient(155deg,#021351,#0A5B72); }
.cat:nth-child(4){ background:linear-gradient(155deg,#1b2a63,#9DACFF); }
.cat__icon { width:48px; height:48px; }
.cat h3 { font-size:var(--fs-h3); color:#fff; margin-bottom:.4rem; }
.cat p { font-size:var(--fs-sm); color:rgba(255,255,255,.82); margin-bottom:1rem; }
.cat__link { font-size:var(--fs-sm); font-weight:600; color:#fff; display:inline-flex; gap:.4rem; }
.cat__link::after { content:"→"; transition:transform var(--dur) var(--ease); }
.cat:hover .cat__link::after { transform:translateX(5px); }

/* ============ POR QUÉ / STATS ============ */
.why__head { text-align:center; max-width:720px; margin:0 auto var(--space-lg); }
.why__head .eyebrow-line { justify-content:center; }
.why__grid { display:grid; grid-template-columns:1fr; gap:var(--space-lg); }
.why__list { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.why__list li { display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; padding:var(--space-md); border-right:1px solid var(--color-line); }
.why__list li:nth-child(4n) { border-right:none; }
.why__list img { width:52px; height:52px; padding:13px; border-radius:14px; background:var(--tint-turquesa); flex:none; }
.why__list b { display:block; color:var(--color-text); }
.why__list span { font-size:var(--fs-sm); color:var(--color-text-muted); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-md); }
.stat { padding:var(--space-sm) var(--space-xs); text-align:center; }
.stat b { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,3.6rem); color:var(--c-navy); line-height:1; display:block; }
.stat span { font-size:var(--fs-sm); color:var(--color-text-muted); }
.stat:nth-child(odd) b { color:#0A8F8C; }

/* ============ CTA ============ */
.cta-band { background: linear-gradient(155deg, rgba(2,19,81,.9) 0%, rgba(10,91,114,.82) 60%, rgba(3,216,212,.6) 100%), url("../img/skin-cupping.jpg") center/cover; color:#fff; border-radius:var(--radius-lg); padding:var(--space-lg); text-align:center; position:relative; overflow:hidden; }
.cta-band--home { background-image: linear-gradient(155deg, rgba(2,19,81,.9) 0%, rgba(10,91,114,.82) 60%, rgba(3,216,212,.6) 100%), url("../img/cta-home.jpg"); }
.cta-band h2 { font-size:var(--fs-h2); color:#fff; margin-bottom:.8rem; }
.cta-band p { color:rgba(255,255,255,.88); max-width:46ch; margin:0 auto 2rem; }

/* ============ FOOTER ============ */
.footer { background:var(--c-navy); color:var(--color-on-dark); padding:var(--space-lg) 0 var(--space-md); }
.footer__top { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-md); padding-bottom:var(--space-md); border-bottom:1px solid rgba(255,255,255,.12); }
.footer__logo img { height:52px; margin-bottom:1rem; }
.footer p { color:var(--color-on-dark-muted); font-size:var(--fs-sm); }
.footer h4 { font-family:var(--font-body); font-size:var(--fs-sm); letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; color:#fff; }
.footer__nav li, .footer__contact li { margin-bottom:.6rem; font-size:var(--fs-sm); }
.footer__nav a:hover, .footer__contact a:hover { color:var(--c-lila); }
.footer__social { display:flex; gap:.8rem; margin-top:1rem; }
.footer__social a { width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; transition:background var(--dur), border-color var(--dur); }
.footer__social a:hover { background:var(--c-turquesa); border-color:var(--c-turquesa); color:var(--c-navy); }
.footer__social svg { width:18px; height:18px; }
.footer__bottom { padding-top:var(--space-md); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:var(--fs-xs); color:var(--color-on-dark-muted); }

/* ============ WHATSAPP FLOAT ============ */
.whatsapp-btn { position:fixed; bottom:1.6rem; right:1.6rem; width:58px; height:58px; background:#25D366; border-radius:50%; display:grid; place-items:center; color:#fff; z-index:998; box-shadow:0 8px 24px rgba(37,211,102,.45); transition:transform var(--dur-fast) var(--ease); }
.whatsapp-btn:hover { transform:scale(1.1); }
.whatsapp-btn svg { width:30px; height:30px; z-index:1; }
.whatsapp-btn::before { content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; animation:wa 2s infinite; z-index:0; }
@keyframes wa { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.6);opacity:0} }
@media (prefers-reduced-motion:reduce){ .whatsapp-btn::before{ animation:none; } .hero__scroll span{ animation:none; } }

/* ---------- Preguntas frecuentes (FAQ / AEO) ---------- */
.faq { max-width:820px; margin:var(--space-md) auto 0; }
.faq__item { border-bottom:1px solid var(--color-line); }
.faq__item summary { cursor:pointer; padding:1.1rem 0; font-family:var(--font-display); font-weight:500; font-size:var(--fs-lg); color:var(--color-text); list-style:none; display:flex; justify-content:space-between; gap:1.2rem; align-items:center; }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after { content:"+"; color:var(--color-accent-text); font-size:1.6em; line-height:1; flex:none; }
.faq__item[open] summary::after { content:"\2013"; }
.faq__item p { margin:0 0 1.2rem; color:var(--color-text-muted); }

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .about__grid, .why__grid { grid-template-columns:1fr; }
  .cats__grid { grid-template-columns:repeat(2,1fr); }
  .pillars__grid { grid-template-columns:1fr; }
  .pillar { border-right:none; border-bottom:1px solid var(--color-line); }
  .pillar:last-child { border-bottom:none; }
  .why__list, .stats { grid-template-columns:repeat(2,1fr); }
  .why__list li { border-bottom:1px solid var(--color-line); }
  .why__list li:nth-child(2n) { border-right:none; }
  .why__list li:nth-child(n+3) { border-bottom:none; }
}
@media (max-width:620px){
  .cats__grid { grid-template-columns:1fr; }
  .why__list { grid-template-columns:1fr; }
  .why__list li { border-right:none; }
  .why__list li:nth-child(n+3) { border-bottom:1px solid var(--color-line); }
  .why__list li:last-child { border-bottom:none; }
  .footer__top { grid-template-columns:1fr; }
  .about__badge { position:static; margin-top:1rem; max-width:none; }
}

/* reveal base (animations.js gestiona) */
[data-animate] { will-change: transform, opacity; }