/* ============================================================
   Sereno Virtual — hoja de estilos compartida
   Deriva de marca/design-system.json (extension calida v1.2)
   La usan: index, empresas, tratamientos, privacidad, consentimiento
   ============================================================ */

:root{
  /* --- tokens vigentes --- */
  --forest:#16302A; --forest-deep:#0E211C;
  --sage:#7FA88C; --sage-light:#AFC9B4; --mint:#EEF3EC;
  --cream:#F9F8F4; --paper:#FFFFFF;
  --ink:#1B2620; --ink-soft:#4B554E; --line:#E3E0D5;
  --gold:#C9A15A; --gold-soft:#FBF6EC;
  /* --- extension calida v1.2 --- */
  --clay:#A8543C;        /* acento sobre fondo claro · 4.94 sobre crema */
  --clay-light:#E0A98C;  /* acento sobre verde · 6.86 sobre forest */
  --arena:#F2E7DC;       /* superficie calida, reemplaza al mint frio */
  --arena-soft:#FAF3EC;
  --serif:'Literata', Georgia, 'Times New Roman', serif;
  --sans:'Public Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--cream); line-height:1.62; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1140px; margin:0 auto; padding:0 28px; }
.wrap-angosto{ max-width:780px; margin:0 auto; padding:0 28px; }

h1,h2,h3{ font-family:var(--serif); font-weight:600; letter-spacing:-.008em; color:var(--forest-deep); margin:0; text-wrap:balance; }
em.acento{ font-style:italic; font-weight:600; color:var(--clay); }
.sobre-oscuro em.acento{ color:var(--clay-light); }
.sobre-oscuro h2, .sobre-oscuro h3{ color:var(--cream); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--clay); font-weight:700;
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--clay); display:block; }
.sobre-oscuro .eyebrow{ color:var(--clay-light); }
.sobre-oscuro .eyebrow::before{ background:var(--clay-light); }

/* NAV */
nav{ position:sticky; top:0; z-index:50; background:rgba(249,248,244,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 28px; flex-wrap:wrap; }
.brand{ flex:none; }
.brand-logo{ height:34px; width:auto; }
.nav-links{ display:flex; gap:26px; font-size:15px; font-weight:500; }
.nav-links a{ text-decoration:none; color:var(--forest); opacity:.85; white-space:nowrap; }
.nav-links a:hover{ opacity:1; color:var(--clay); }
.nav-cta{ display:inline-block; flex:none; background:var(--forest-deep); color:#fff !important; padding:11px 22px; border-radius:999px; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.nav-cta:hover{ background:var(--clay); }

/* Los enlaces NO se esconden en pantallas chicas: bajan a una segunda fila
   que se desliza en horizontal si no caben. Asi el menu existe en todo dispositivo. */
@media (max-width:1000px){
  nav .wrap{ padding:12px 20px 0; }
  .nav-links{
    order:3; width:100%; gap:22px; margin-top:10px;
    padding:11px 20px 12px; margin-left:-20px; margin-right:-20px;
    border-top:1px solid var(--line);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
}
@media (max-width:560px){
  /* abajo de este ancho los cinco enlaces ya no caben: se difumina el borde
     derecho para que se note que la fila corre, en vez de parecer cortada */
  .nav-links{
    -webkit-mask-image:linear-gradient(to right, #000 86%, transparent 100%);
            mask-image:linear-gradient(to right, #000 86%, transparent 100%);
  }
}
@media (max-width:420px){
  .brand-logo{ height:27px; }
  .nav-cta{ padding:10px 16px; font-size:13px; }
  .nav-links{ font-size:14.5px; gap:19px; }
}

/* BOTONES */
.btn{ display:inline-flex; align-items:center; gap:9px; padding:15px 28px; border-radius:999px; font-weight:600; font-size:15.5px; text-decoration:none; font-family:var(--sans); transition:transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btn-primary{ background:var(--clay); color:#fff; box-shadow:0 12px 26px -12px rgba(168,84,60,.65); }
.btn-primary:hover{ transform:translateY(-2px); background:#96492F; }
.btn-ghost{ background:transparent; color:var(--forest-deep); border:1.5px solid rgba(22,48,42,.28); }
.btn-ghost:hover{ border-color:var(--forest-deep); background:rgba(22,48,42,.04); }
.sobre-oscuro .btn-ghost{ color:var(--cream); border-color:rgba(255,255,255,.32); }
.sobre-oscuro .btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:var(--cream); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* HERO (portada) */
.hero{ position:relative; overflow:hidden; padding:76px 0 88px;
  background:
    radial-gradient(58% 62% at 88% 10%, rgba(224,169,140,.30), transparent 62%),
    radial-gradient(52% 55% at 4% 88%, rgba(127,168,140,.24), transparent 64%),
    var(--cream);
}
.hero .wrap{ display:grid; grid-template-columns:1.06fr .94fr; gap:64px; align-items:center; }
@media (max-width:920px){ .hero .wrap{ grid-template-columns:1fr; gap:48px; } }
.hero h1{ font-size:clamp(36px,4.9vw,56px); line-height:1.13; margin:20px 0 22px; }
.hero p.lead{ font-size:18.5px; color:var(--ink-soft); max-width:44ch; margin:0 0 26px; }
.precio-linea{ font-family:var(--sans); font-size:16px; color:var(--forest); margin:0 0 28px; padding-left:16px; border-left:2.5px solid var(--clay-light); }
.precio-linea b{ font-weight:700; color:var(--forest-deep); }

.confianza{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.confianza span{ font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.confianza span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--sage); flex:none; }

/* Retrato del hero */
.retrato-stage{ position:relative; }
.retrato{
  aspect-ratio:4/5; width:100%; border-radius:200px 200px 26px 26px; overflow:hidden;
  background:linear-gradient(170deg, var(--arena-soft), var(--arena) 60%, #E6D8C9);
  border:1px solid rgba(168,84,60,.16); position:relative;
}
.retrato img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
/* lava el gris de estudio hacia el calido de la marca, muy suave */
.retrato::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(165deg, rgba(224,169,140,.16), rgba(201,161,90,.06) 45%, rgba(22,48,42,.10));
  mix-blend-mode:multiply;
}
.credito{
  position:absolute; right:16px; bottom:16px;
  background:rgba(14,33,28,.82); color:var(--cream);
  font-family:var(--sans); font-size:12px; letter-spacing:.02em;
  padding:8px 14px; border-radius:999px; backdrop-filter:blur(4px);
}
.credito b{ font-weight:600; }
.credito span{ color:var(--clay-light); }
.tarjeta-flotante{
  position:absolute; left:-52px; bottom:20px; max-width:272px;
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding:20px 22px; box-shadow:0 26px 54px -26px rgba(22,48,42,.42);
}
.tarjeta-flotante p{ margin:0; font-family:var(--serif); font-size:16px; line-height:1.48; color:var(--forest-deep); }
.tarjeta-flotante .firma{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); margin-top:10px; letter-spacing:.02em; }
@media (max-width:920px){
  .tarjeta-flotante{ left:0; bottom:auto; position:relative; margin-top:-42px; max-width:none; }
  .credito{ top:16px; bottom:auto; }   /* la tarjeta tapa la esquina de abajo en movil */
}

/* CABECERA DE PAGINA INTERIOR */
.page-head{
  padding:72px 0 64px;
  background:
    radial-gradient(60% 70% at 86% 6%, rgba(224,169,140,.26), transparent 64%),
    var(--cream);
  border-bottom:1px solid var(--line);
}
.page-head h1{ font-size:clamp(32px,4.4vw,50px); line-height:1.15; margin:18px 0 20px; max-width:20ch; }
.page-head p{ font-size:18px; color:var(--ink-soft); max-width:56ch; margin:0; }
.migas{ font-size:13.5px; color:var(--ink-soft); margin-bottom:22px; }
.migas a{ text-decoration:none; color:var(--clay); font-weight:600; }
.migas a:hover{ text-decoration:underline; }

section{ padding:92px 0; }
/* el nav es sticky: sin esto, al hacer clic en Precios o Preguntas el titulo
   queda escondido debajo. En movil el nav ocupa dos filas, por eso el valor sube. */
section[id]{ scroll-margin-top:84px; }
@media (max-width:1000px){ section[id]{ scroll-margin-top:142px; } }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(28px,3.5vw,40px); line-height:1.2; margin-top:16px; }
.section-head p{ color:var(--ink-soft); font-size:17px; margin-top:14px; }
.sobre-oscuro .section-head p{ color:#BCCDC0; }

/* MODALIDADES — banda delgada */
.modalidades{ background:var(--arena-soft); border-top:1px solid #EDE0D2; border-bottom:1px solid #EDE0D2; padding:52px 0; }
.modalidades-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px){ .modalidades-grid{ grid-template-columns:1fr; } }
.modalidad{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; }
.modalidad .marca{
  width:44px; height:44px; border-radius:50%; flex:none;
  background:var(--forest-deep); color:var(--clay-light);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:17px; font-weight:600;
}
.modalidad h3{ font-size:19px; margin-bottom:5px; }
.modalidad p{ margin:0; font-size:15.5px; color:var(--ink-soft); }

/* COMO FUNCIONA — 3 pasos.
   Va en arena, no en blanco: quedo pegado a Paquetes (crema) y entre los dos
   no se veia el corte. */
.pasos{ background:var(--arena); }
.pasos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:900px){ .pasos-grid{ grid-template-columns:1fr; gap:0; } }
.paso{ padding-top:26px; border-top:2px solid var(--clay); }
@media (max-width:900px){ .paso{ padding:26px 0; border-top:1px solid var(--line); } .paso:first-child{ border-top:2px solid var(--clay); } }
.paso .n{ font-family:var(--serif); font-size:14px; font-weight:600; color:var(--clay); letter-spacing:.06em; display:block; margin-bottom:12px; }
.paso h3{ font-size:21px; margin-bottom:10px; }
.paso p{ margin:0; font-size:15.5px; color:var(--ink-soft); }

/* PRECIOS */
.precios{ background:var(--arena); }
.precios-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .precios-grid{ grid-template-columns:1fr; } }
.plan{ background:var(--paper); border:1px solid #E7DACB; border-radius:22px; overflow:hidden; display:flex; flex-direction:column; position:relative; }
.plan.destacado{ border-color:var(--clay); box-shadow:0 24px 46px -28px rgba(168,84,60,.45); }
.plan-foto{ aspect-ratio:16/10; position:relative; background:var(--arena); }
.plan-foto img{ width:100%; height:100%; object-fit:cover; }
.plan-foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(14,33,28,.28), transparent 55%); }
.plan-foto .badge{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--gold); color:#2A2110; font-family:var(--sans); font-size:12px; font-weight:700;
  padding:6px 13px; border-radius:999px; letter-spacing:.02em;
}
.plan-cuerpo{ padding:28px 28px 30px; display:flex; flex-direction:column; flex-grow:1; }
.plan h3{ font-size:21px; margin-bottom:5px; }
.plan .duracion{ color:#7A8A7E; font-size:14px; margin-bottom:20px; }
.plan .precio{ font-family:var(--serif); font-weight:600; font-size:40px; color:var(--forest-deep); line-height:1; font-variant-numeric:tabular-nums; }
.plan .precio small{ font-family:var(--sans); font-size:13.5px; font-weight:500; color:#7A8A7E; letter-spacing:.04em; }
.plan ul{ list-style:none; padding:0; margin:22px 0 28px; flex-grow:1; }
.plan li{ font-size:15px; color:#3C463F; padding-left:24px; position:relative; margin-bottom:11px; }
.plan li::before{ content:""; position:absolute; left:2px; top:10px; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--sage); }
.plan .btn{ justify-content:center; }
.nota-precio{ margin-top:30px; font-family:var(--serif); font-size:19px; line-height:1.6; color:var(--forest-deep); max-width:60ch; }

/* PAQUETES */
.paquetes{ background:var(--cream); }
.paquetes-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
@media (max-width:920px){ .paquetes-grid{ grid-template-columns:1fr; gap:44px; } }
.paquetes-grid h2{ font-size:clamp(28px,3.5vw,40px); line-height:1.2; margin-top:16px; }
.dos-tiempos{ margin-top:34px; }
.tiempo{ display:grid; grid-template-columns:auto 1fr; gap:20px; padding:20px 0; border-top:1px solid var(--line); }
.tiempo .n{ font-family:var(--serif); font-size:15px; font-weight:600; color:var(--clay); padding-top:2px; }
.tiempo h3{ font-size:18px; margin-bottom:5px; }
.tiempo p{ margin:0; font-size:15.5px; color:var(--ink-soft); }
.paquete-card{
  background:var(--forest-deep); color:#D9E4DB; border-radius:26px; padding:38px 34px;
  box-shadow:0 30px 60px -30px rgba(14,33,28,.6);
}
.paquete-card h3{ font-size:26px; margin:16px 0 6px; }
.paquete-card .sub{ font-size:15px; color:#B4C6B9; margin:0 0 24px; }
.paquete-precio{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.paquete-precio .ahora{ font-family:var(--serif); font-size:46px; font-weight:600; color:var(--cream); line-height:1; font-variant-numeric:tabular-nums; }
.paquete-precio .antes{ font-family:var(--serif); font-size:22px; font-weight:500; color:#B4C6B9; opacity:.55; text-decoration:line-through; font-variant-numeric:tabular-nums; }
.ahorro{ display:inline-block; margin-top:16px; background:rgba(224,169,140,.16); border:1px solid rgba(224,169,140,.4); color:var(--clay-light); font-size:13.5px; font-weight:600; padding:7px 14px; border-radius:999px; }
.paquete-card ul{ list-style:none; padding:0; margin:26px 0 28px; }
.paquete-card li{ font-size:15px; color:#B4C6B9; padding-left:24px; position:relative; margin-bottom:11px; }
.paquete-card li::before{ content:""; position:absolute; left:2px; top:9px; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--sage); }
.paquete-card .btn-primary{ width:100%; justify-content:center; }

/* TRATAMIENTOS */
.tratamientos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:960px){ .tratamientos-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:660px){ .tratamientos-grid{ grid-template-columns:1fr; } }
.tratamiento{ background:var(--paper); border:1px solid var(--line); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; }
.tratamiento .foto{ aspect-ratio:16/10; position:relative; background:var(--arena); }
.tratamiento .foto img{ width:100%; height:100%; object-fit:cover; }
.tratamiento .foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(14,33,28,.22), transparent 58%); }
.tratamiento .cuerpo{ padding:26px 26px 28px; flex-grow:1; display:flex; flex-direction:column; }
.tratamiento h3{ font-size:20px; margin-bottom:10px; }
.tratamiento p{ margin:0 0 16px; font-size:15.5px; color:var(--ink-soft); }
.tratamiento .senales{ list-style:none; padding:0; margin:0 0 4px; }
.tratamiento .senales li{ font-size:14.5px; color:#3C463F; padding-left:22px; position:relative; margin-bottom:8px; }
.tratamiento .senales li::before{ content:""; position:absolute; left:2px; top:9px; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--sage); }

/* B2B */
.b2b{ background:var(--forest-deep); color:#D9E4DB; }
.b2b-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
@media (max-width:920px){ .b2b-grid{ grid-template-columns:1fr; gap:40px; } }
.b2b-grid h2{ font-size:clamp(28px,3.5vw,40px); line-height:1.2; margin-top:16px; }
.b2b-grid p{ color:#BCCDC0; font-size:17px; margin:20px 0 0; max-width:52ch; }
.b2b-foto{ aspect-ratio:4/3; border-radius:26px; overflow:hidden; border:1px solid rgba(224,169,140,.28); position:relative; }
.b2b-foto img{ width:100%; height:100%; object-fit:cover; }
.b2b-lista{ list-style:none; padding:0; margin:30px 0 34px; }
.b2b-lista li{ font-size:16px; color:#B4C6B9; padding-left:26px; position:relative; margin-bottom:12px; }
.b2b-lista li::before{ content:""; position:absolute; left:2px; top:10px; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--clay-light); }

/* PREGUNTAS */
.preguntas{ background:var(--cream); }
.qa-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
@media (max-width:860px){ .qa-grid{ grid-template-columns:1fr; } }
.qa{ padding:26px 0; border-top:1px solid var(--line); }
.qa h3{ font-size:18.5px; margin-bottom:9px; line-height:1.4; }
.qa p{ margin:0; font-size:15.5px; color:var(--ink-soft); }
.aviso{
  margin-top:52px; background:var(--gold-soft); border:1px solid #EBDCBE; border-left:3px solid var(--gold);
  border-radius:14px; padding:22px 26px; font-size:15.5px; color:#4A3F28; max-width:70ch;
}
.aviso b{ color:var(--forest-deep); }

/* LEGAL — paginas de texto largo */
.legal{ padding:64px 0 88px; }
.legal h2{ font-size:26px; margin:52px 0 16px; padding-top:26px; border-top:1px solid var(--line); }
.legal h2:first-of-type{ margin-top:0; border-top:none; padding-top:0; }
.legal h3{ font-size:18px; margin:28px 0 10px; }
.legal p, .legal li{ font-size:16.5px; color:var(--ink-soft); }
.legal p{ margin:0 0 16px; }
.legal ul, .legal ol{ margin:0 0 20px; padding-left:22px; }
.legal li{ margin-bottom:9px; }
.legal strong{ color:var(--forest-deep); font-weight:600; }
.legal table{ width:100%; border-collapse:collapse; margin:0 0 22px; font-size:15.5px; }
.legal th{ text-align:left; background:var(--arena-soft); color:var(--forest-deep); font-weight:600; padding:12px 14px; border-bottom:1px solid var(--line); }
.legal td{ padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top; }
.meta-doc{ display:flex; flex-wrap:wrap; gap:10px 28px; padding:20px 24px; background:var(--arena-soft); border:1px solid #EDE0D2; border-radius:16px; margin-bottom:44px; font-size:14.5px; color:var(--ink-soft); }
.meta-doc b{ color:var(--forest-deep); font-weight:600; }
.callout{ background:var(--mint); border-left:3px solid var(--sage); border-radius:12px; padding:20px 24px; margin:0 0 24px; font-size:16px; color:#2E3A32; }
.callout b{ color:var(--forest-deep); }

/* CIERRE */
.cierre{ background:var(--forest-deep); text-align:center; position:relative; overflow:hidden; }
.cierre::before{ content:""; position:absolute; inset:0; background:radial-gradient(58% 62% at 50% 0%, rgba(224,169,140,.20), transparent 68%); }
.cierre .wrap{ position:relative; }
.cierre h2{ font-size:clamp(28px,4vw,42px); line-height:1.22; max-width:19ch; margin:18px auto 18px; }
.cierre p{ color:#BCCDC0; max-width:52ch; margin:0 auto 34px; font-size:17px; }
.cierre .btn-row{ justify-content:center; }
.horario-strip{ margin-top:30px; font-size:14px; color:#8FA396; }

/* FOOTER */
footer{ background:#0A1714; color:#8FA396; padding:44px 0 34px; font-size:13.5px; }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--clay-light); }
.footer-grid{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.10); }
.footer-col h4{ font-family:var(--sans); font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--clay-light); margin:0 0 12px; font-weight:700; }
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin-bottom:8px; }
.footer-base{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:22px; }

:focus-visible{ outline:2.5px solid var(--clay); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }