/* Páginas de tratamiento: comparte variables, botones y barra con index.html (copiados de su <style>). */
  :root {
    --sc-canvas:     #F6F4F9;
    --sc-surface:    #FFFFFF;
    --sc-ink:        #24163A;
    --sc-ink-soft:   #5E5370;
    --sc-accent:     #632B95;
    --sc-accent-ink: #FFFFFF;
    --sc-font-display: "Fraunces", Georgia, serif;
    --sc-font-text:    "Montserrat", system-ui, sans-serif;
    --sc-shadow-color: 275 35% 22%;
    --sc-edge: inset 0 1px 0 rgba(255,255,255,0.6);
    --celeste: #429ED6;
    --celeste-texto: #2A73A5;
    --morado: #632B95;
    --morado-hondo: #3F1A63;
    --lila: #EEE8F5;
  }
  .sc-display { font-weight: 400; font-variation-settings: "opsz" 144; }
  /* ---------- barra ---------- */
  .barra {
    position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sc-4) var(--sc-gutter);
  }
  /* fondo opaco detrás del logo (el texto no se trasluce al bajar) que se desvanece abajo, sin borde duro */
  .barra::before { content: ""; position: absolute; inset: 0 0 -2.5rem 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, var(--sc-canvas) calc(100% - 2.5rem), transparent); }
  .menu { display: flex; gap: var(--sc-6); margin-left: auto; margin-right: var(--sc-6); }
  .menu a { color: var(--sc-ink); text-decoration: none; font-size: var(--sc-t-sm); font-weight: 500; padding: 6px 2px;
    background: linear-gradient(var(--celeste), var(--celeste)) 0 100% / 0 2px no-repeat; transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
  @media (hover: hover) { .menu a:hover { background-size: 100% 2px; } }
  @media (max-width: 900px) { .menu { display: none; } }
  .marca { display: inline-block; line-height: 0; }
  /* El logo arranca grande y se achica al bajar, como en Odyssée (la barra deja de tapar contenido) */
  .marca img { height: 92px; width: auto; transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  .barra.chica .marca img { height: 58px; }
  @media (max-width: 700px) { .marca img { height: 62px; } .barra.chica .marca img { height: 46px; } }
  /* CTA único (estilo Overtake): píldora morada, círculo celeste con WhatsApp que se estira al pasar el mouse */
  .ctas { display: flex; flex-wrap: wrap; gap: var(--sc-3); align-items: center; }
  .cta, .cta2 { display: inline-flex; align-items: center; min-height: 52px; border-radius: var(--sc-r-pill); white-space: nowrap;
    font-size: var(--sc-t-sm); font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out), color 0.35s var(--sc-ease-out); }
  .cta { position: relative; isolation: isolate; overflow: hidden; gap: var(--sc-3); padding: 6px 8px 6px 1.5rem;
    background: var(--morado); color: #fff; box-shadow: var(--sc-e2), var(--sc-edge); }
  /* Al pasar el mouse, el celeste barre el botón desde el ícono y el texto pasa a tinta */
  .cta::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--celeste);
    clip-path: circle(0% at calc(100% - 28px) 50%); transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
  .cta__circulo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35); transition: box-shadow 0.4s; }
  .cta__circulo svg { width: 20px; height: 20px; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
  .cta2 { gap: var(--sc-2); padding: 0 1.35rem; color: var(--sc-ink); background: color-mix(in oklab, #fff 70%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--sc-ink) 28%, transparent); }
  .cta2 svg { width: 18px; height: 18px; }
  .cta--claro { background: #fff; color: var(--morado); }
  .cta--claro .cta__circulo { color: var(--morado); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--morado) 30%, transparent); }
  .cta2--claro { color: #fff; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6); }
  .cta:active, .cta2:active { transform: scale(0.97); }
  .cta:focus-visible, .cta2:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) {
    .cta:hover { color: var(--sc-ink); }
    .cta:hover::before { clip-path: circle(150% at calc(100% - 28px) 50%); }
    .cta:hover .cta__circulo { color: var(--sc-ink); box-shadow: inset 0 0 0 1.5px rgba(36,22,58,0.35); }
    .cta:hover .cta__circulo svg { transform: rotate(-12deg) scale(1.08); }
    .cta2:hover { background: #fff; }
    .cta2--claro:hover { background: rgba(255,255,255,0.12); }
  }
  .barra .cta { min-height: 46px; font-size: var(--sc-t-xs); padding-left: 1.2rem; }
  .barra .cta__circulo { width: 34px; height: 34px; }
  /* Celular: barra fija abajo con los dos botones cuando la portada ya pasó */
  .barra-cita { position: fixed; z-index: var(--sc-z-chrome); left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: none; gap: 8px; padding: 6px; border-radius: var(--sc-r-pill);
    background: color-mix(in oklab, #fff 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: var(--sc-e3, 0 10px 30px rgba(40,20,70,0.18)); transform: translateY(160%); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
  .barra-cita.visible { transform: none; }
  .barra-cita .cta { flex: 1; min-width: 0; justify-content: space-between; font-size: var(--sc-t-xs); padding-left: 1.1rem; }
  .barra-cita .cta__texto { overflow: hidden; text-overflow: ellipsis; }
  .barra-cita .cta2 { padding: 0 1rem; }
  @media (max-width: 700px) { .barra-cita { display: flex; } .barra .cta { display: none; } }

  /* "Abierto ahora" con el horario real, en hora de Costa Rica; el punto late */
  .abierto { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 10px; border-radius: var(--sc-r-pill); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: none; font-weight: 600; }
  .abierto:empty { display: none; }
  .abierto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .abierto.si { color: #1F7A4C; background: #E3F4EA; }
  .abierto.no { color: #6B5E7B; background: #EEE8F5; }
  @media (prefers-reduced-motion: no-preference) { .abierto.si::before { animation: latido 1.8s ease-in-out infinite; } }
    @keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,122,76,0.45); } 50% { box-shadow: 0 0 0 6px rgba(31,122,76,0); } }

  @view-transition { navigation: auto; }
  body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); }
  .barra { background: color-mix(in oklab, var(--sc-canvas) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .ctas--barra .cta2 { display: none; }
  @media (max-width: 700px) { .ctas--barra { display: none; } }
  main { padding-top: 140px; }
  .cabecera { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sc-8); align-items: center; padding-block: var(--sc-7) var(--sc-9); }
  .migas { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-bottom: var(--sc-5); }
  .migas a { color: inherit; }
  .cabecera h1 { font-size: clamp(2.6rem, 1.4rem + 2.8vw, 4.2rem); line-height: 1; margin: 0 0 var(--sc-5); color: var(--sc-ink); }
  .intro { font-size: var(--sc-t-lg); line-height: 1.55; color: var(--sc-ink-soft); margin: 0 0 var(--sc-6); max-width: 34rem; }
  .cabecera__foto { position: relative; margin: 0; }
  .cabecera__foto img { display: block; width: 100%; height: auto; border-radius: 32px; box-shadow: 0 40px 80px -40px rgba(40,20,70,0.55); }
  .marco { max-width: none; position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); overflow: visible; pointer-events: none; }
  .marco rect { fill: none; stroke: var(--celeste); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
  .cabecera__foto.sc-in .marco rect { stroke-dashoffset: 0; }
  .bloque { padding-block: var(--sc-9); }
  .bloque h2 { font-size: var(--sc-t-3xl); margin: 0 0 var(--sc-6); color: var(--sc-ink); }
  .bloque--lila { background: var(--lila); }
  .para { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-5); }
  .para li { display: grid; gap: var(--sc-3); padding: var(--sc-6); background: #fff; border-radius: 24px; box-shadow: var(--sc-e1), inset 0 0 0 1px var(--sc-hairline); font-size: var(--sc-t-lg); line-height: 1.35; }
  .para .num { font-family: var(--sc-font-display); font-size: 2.6rem; line-height: 1; color: var(--celeste-texto); }
  .proceso { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--sc-8); align-items: start; }
  .nota { color: var(--sc-ink-soft); margin: 0 0 var(--sc-4); }
  .pendiente { display: inline-block; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--morado); background: transparent; border: 1.5px dashed color-mix(in oklab, var(--morado) 40%, transparent); border-radius: var(--sc-r-pill); padding: 4px 12px; }
  /* Pasos: una línea vertical que se dibuja y un punto por paso que se enciende en cadena */
  .pasos { list-style: none; margin: 0; padding: 0 0 0 2.2rem; position: relative; display: grid; gap: var(--sc-6); }
  .pasos::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--morado); transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1); }
  .pasos.sc-in::before { transform: scaleY(1); }
  .pasos li { position: relative; }
  .paso__punto { position: absolute; left: -2.2rem; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--sc-canvas); box-shadow: inset 0 0 0 2px var(--morado); transition: background-color 0.3s; }
  .pasos.sc-in li:nth-child(1) .paso__punto { background: var(--celeste); transition-delay: 0.2s; }
  .pasos.sc-in li:nth-child(2) .paso__punto { background: var(--celeste); transition-delay: 0.55s; }
  .pasos.sc-in li:nth-child(3) .paso__punto { background: var(--celeste); transition-delay: 0.9s; }
  .pasos.sc-in li:nth-child(4) .paso__punto { background: var(--celeste); transition-delay: 1.25s; }
  .pasos h3 { margin: 0 0 6px; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); color: var(--morado); }
  .pasos p { margin: 0; color: var(--sc-ink-soft); line-height: 1.5; }
  .faq__lista { display: grid; gap: var(--sc-3); max-width: 52rem; }
  .faq details { background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--sc-hairline); }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--sc-4); align-items: center; padding: var(--sc-5) var(--sc-6); font-weight: 600; font-size: var(--sc-t-base); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary span { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--lila); position: relative; transition: transform 0.35s, background-color 0.35s; }
  .faq summary span::before, .faq summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--morado); border-radius: 2px; }
  .faq summary span::after { transform: rotate(90deg); transition: transform 0.35s; }
  .faq details[open] summary span { background: var(--celeste); }
  .faq details[open] summary span::after { transform: rotate(0); }
  .faq details p { margin: 0; padding: 0 var(--sc-6) var(--sc-5); color: var(--sc-ink-soft); line-height: 1.55; }
  .rels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-5); }
  .rel { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 24px; overflow: hidden; background: #fff; text-decoration: none; color: var(--sc-ink); box-shadow: var(--sc-e1); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
  .rel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
  .rel span:not(.rel__flecha) { padding: var(--sc-4) var(--sc-5) var(--sc-5); font-family: var(--sc-font-display); font-size: var(--sc-t-xl); }
  .rel__flecha { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--morado); transition: transform 0.35s; }
  @media (hover: hover) { .rel:hover { transform: translateY(-6px); } .rel:hover .rel__flecha { transform: rotate(-45deg); } }
  .cierre-t { background: var(--morado); color: #fff; padding-block: var(--sc-9); }
  .cierre-t__caja { display: flex; flex-wrap: wrap; gap: var(--sc-6); align-items: center; justify-content: space-between; }
  .cierre-t h2 { color: #fff; font-size: var(--sc-t-3xl); margin: 0 0 var(--sc-3); }
  .cierre-t p { margin: 0; color: #E7DCF2; line-height: 1.6; }
  .pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3) var(--sc-6); padding-block: var(--sc-5); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
  .pie a { color: inherit; }
  @media (max-width: 860px) {
    main { padding-top: 96px; }
    .cabecera, .proceso { grid-template-columns: 1fr; }
    .para, .rels { grid-template-columns: 1fr; }
    .pie { padding-bottom: 96px; }
  }

  /* ---------- pulido (ronda 3) ---------- */
  :root { --sc-maxw: 1440px; }
  .sc-display { letter-spacing: -0.012em; }
  .cabecera { padding-block: var(--sc-6) var(--sc-8); }
  .cabecera__foto img { aspect-ratio: 4 / 5; max-height: 62svh; object-fit: cover; }
  .faq__rejilla { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sc-6); align-items: start; }
  .faq__lista { max-width: none; }
  .dudas { position: sticky; top: 120px; padding: var(--sc-6); border-radius: 24px; background: var(--lila); }
  .dudas h3 { margin: 0 0 var(--sc-3); font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); color: var(--morado); }
  .dudas p { margin: 0 0 var(--sc-5); color: var(--sc-ink-soft); line-height: 1.5; }
  .dudas .cta2 { display: none; }
  .rel img { aspect-ratio: 16 / 10; height: auto; }
  .rel span.rel__nombre { padding: var(--sc-4) var(--sc-5) 4px; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); }
  .rel span.rel__desc { padding: 0 var(--sc-5) var(--sc-5); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.45; font-family: var(--sc-font-text); }
  .cierre-t__caja { flex-direction: column; text-align: center; }
  .cierre-t .ctas { justify-content: center; }
  @media (max-width: 860px) {
    .cabecera__foto { order: -1; }
    .cabecera__foto img { aspect-ratio: 16 / 10; max-height: none; }
    .faq__rejilla { grid-template-columns: 1fr; }
    .dudas { position: static; }
  }