/* Identidad visual: la del Instagram de la Dra. Bonin (azul noche, amarillo y beige; titulares en serif con marcador amarillo).
   Se carga al final y manda sobre el resto. */
:root {
  --bg: #f4f0e7;
  --surface: #fffdf8;
  --ink: #0e1626;
  --muted: #5a6070;
  --line: #e5dac4;
  --brand: #14213d;
  --brand-dark: #0b1426;
  --brand-deep: #0b1426;
  --brand-soft: #eee3cc;
  --accent: #8a6500;
  --accent-soft: #fff3c2;
  --sun: #fcd52a;
  --sun-dark: #efc200;
  --sun-soft: #fff6cf;
  --charcoal: #0e1626;
  --navy: #0b1426;
  --navy-2: #14213d;
  --cream: #f4f0e7;
  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Montserrat", "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --petrol: #2e6073;
}
body { background: var(--bg); font-family: var(--sans); }
h1, h2, h3 { color: var(--ink); }
h1, h2 { font-weight: 700; letter-spacing: -.015em; }
a { color: var(--navy-2); }

/* Marcador amarillo, como en las publicaciones */
.hl { background: linear-gradient(transparent 60%, var(--sun) 60%, var(--sun) 94%, transparent 94%); padding: 0 .1em; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-dark .hl { background: none; color: var(--sun); box-shadow: none; padding: 0; }
.hero-dark h1 em, .hl-text { font-style: italic; color: var(--sun); }

.eyebrow { color: var(--accent); }
.eyebrow::before { background: var(--sun-dark); height: 3px; width: 26px; }
.eyebrow.light { color: var(--sun); }
.eyebrow.light::before { background: var(--sun); }

/* Cabecera */
.demo-banner { background: var(--sun); color: var(--navy); font-weight: 600; }
.site-head { background: rgba(245, 238, 226, .94); border-bottom: 1px solid var(--line); }
.brand { color: var(--navy); }
.brand strong { color: var(--navy); }
.site-nav a { color: var(--ink); }
.site-nav a:hover { background: rgba(252, 213, 42, .35); }
.head-link { color: var(--ink); font-weight: 600; text-decoration: none; padding: 8px 12px; border-radius: 999px; }
.head-link:hover { background: rgba(252, 213, 42, .35); }

/* Botones: amarillo con tinta azul noche */
.btn { background: var(--sun); color: var(--navy); }
.btn:hover { background: var(--sun-dark); }
.btn.secondary { background: var(--navy); color: #fff; }
.btn.secondary:hover { background: var(--navy-2); }
.btn.ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn.ghost:hover { background: var(--navy); color: #fff; }
.btn.ghost-light { background: transparent; color: #fff; }
.info-box .btn.secondary, .faq-more .btn.secondary { background: var(--sun); color: var(--navy); }
:focus-visible { outline: 3px solid var(--sun-dark); outline-offset: 2px; }

/* Portada */
.hero.hero-dark {
  background:
    radial-gradient(circle at 82% 18%, rgba(252, 213, 42, .20) 0, rgba(252, 213, 42, 0) 36%),
    radial-gradient(circle at 8% 90%, rgba(252, 213, 42, .08) 0, rgba(252, 213, 42, 0) 32%),
    linear-gradient(160deg, #070d1a 0%, #0b1426 55%, #14213d 100%);
}
.hero-dark .lead { color: #e8e1d2; }
.hero-dark .trust { color: #cfc7b4; }
.portrait { background: var(--navy-2); border: 3px solid var(--sun); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.portrait-ph { background: radial-gradient(circle at 50% 38%, #2a3d6e 0, #14213d 42%, #0b1426 100%); }
.portrait-ph .ini { color: var(--sun); }
.portrait figcaption { background: var(--cream); }
.chip { background: var(--cream); color: var(--navy); }
.chip svg { color: var(--accent); }

/* Lo importante */
.important { background: var(--navy); border-block: 0; color: #fff; }
.important h2 { color: #fff; }
.imp { background: rgba(255, 255, 255, .06); border-color: rgba(252, 213, 42, .28); }
.imp strong { color: #fff; }
.imp p { color: #cfc7b4; }
.imp p a { color: var(--sun); }
.imp.urgent-imp { background: #fde2e2; border-color: #f2bcbc; }
.imp.urgent-imp strong { color: #6e1f26; }
.imp.urgent-imp p { color: #6e2229; }

/* Secciones: fondo beige alternando con blanco cálido */
.section.tint { background: var(--surface); border-block: 1px solid var(--line); }
.card, .service, .goals li { background: var(--surface); }
.section.tint .service, .section.tint .goals li { background: var(--bg); }
.service:hover { border-color: var(--sun-dark); }
.service .more, .imp p a { color: var(--navy-2); }
.quote { background: var(--navy); }
.info-box, .faq-more, .chat-hero { background: var(--navy); }
.info-box { align-items: center; gap: 28px 56px; padding: 44px 48px;
  background: radial-gradient(circle at 100% 0, rgba(252, 213, 42, .16), transparent 42%), radial-gradient(circle at 0 100%, rgba(216, 27, 96, .14), transparent 40%), var(--navy); }
.info-box h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); text-wrap: balance; }
.info-box .cta-stack { min-width: 260px; }
.action .ico, .pillar .ico, .service .ico { background: var(--sun); box-shadow: none; }
.pillar h3 { color: var(--ink); }
.goals .n, .checklist svg { background: var(--sun); color: var(--navy); }

/* Fotos: marco circular tipo "historia" del Instagram (anillo amarillo) */
.avatar { width: 96px; height: 96px; font-size: 1.9rem; color: var(--navy); background: var(--sun-soft); box-shadow: 0 0 0 3px var(--sun), 0 0 0 7px var(--cream); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person h3 { font-family: var(--serif); font-size: 1.25rem; }

.photo-band { position: relative; border-radius: 26px; overflow: hidden; background: var(--navy-2); aspect-ratio: 16 / 9; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pie */
.site-foot { background: var(--navy); color: #cfc7b4; }
.site-foot h3 { color: var(--sun); }
.foot-brand .brand, .foot-brand .brand strong { color: #fff; }
.foot-list a:hover { color: var(--sun); }

/* Chat */
/* El botón del chat va en fucsia: no está en la paleta a propósito, para que resalte sobre el amarillo, el beige y el azul */
:root { --pop: #d81b60; --pop-2: #f43f73; --pop-glow: rgba(216, 27, 96, .45); }
.chat-launcher { --lbg: var(--pop); background: linear-gradient(120deg, var(--pop-2), var(--pop) 70%); box-shadow: 0 10px 26px var(--pop-glow);
  transition: transform .2s ease, box-shadow .2s ease; }
.chat-launcher:hover { --lbg: var(--pop); transform: translateY(-2px); box-shadow: 0 14px 32px var(--pop-glow); }
.chat-launcher::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: chat-glow 2.6s ease-out infinite; }
@keyframes chat-glow { 0% { box-shadow: 0 0 0 0 var(--pop-glow); } 70%, 100% { box-shadow: 0 0 0 14px rgba(216, 27, 96, 0); } }
.chat-launcher-ico { background: #fff; color: var(--pop); }
.chat-launcher-txt small { opacity: 1; }
.chat-launcher:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.chat-head { background: var(--navy); cursor: pointer; user-select: none; }
.chat-head:hover .chat-close { color: var(--sun); }
.chat-avatar { background: linear-gradient(120deg, var(--pop-2), var(--pop)); }
/* los otros botones que abren el chat llevan el mismo color, así se reconoce */
.info-box .btn[data-open-chat] { background: linear-gradient(120deg, var(--pop-2), var(--pop) 70%); color: #fff; box-shadow: 0 8px 22px var(--pop-glow); }
.info-box .btn[data-open-chat]:hover { background: var(--pop); color: #fff; }
@media (max-width: 860px) { .info-box { padding: 30px 26px; } .info-box .cta-stack { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .chat-launcher::after { animation: none; } .chat-launcher:hover { transform: none; } }
.chat-msg.user { background: var(--navy); color: #fff; }
.chat-opt { border-color: var(--navy); color: var(--navy); }
.chat-opt:hover { background: var(--sun-soft); }
.chat-opt.primary { background: var(--sun); color: var(--navy); }
.chat-opt.primary:hover { background: var(--sun-dark); }
.chat-log { background: var(--bg); }

/* Formularios */
input:focus, select:focus, textarea:focus { border-color: var(--navy-2); outline: 3px solid var(--sun-soft); }
.check { background: var(--bg); }
.stepper .done .n { background: var(--navy); border-color: var(--navy); }
.stepper .current .n { border-color: var(--navy); box-shadow: 0 0 0 4px var(--sun-soft); }
.daycard[aria-current="true"] { background: var(--navy); border-color: var(--navy); }
.daycard:hover { border-color: var(--navy); }
.slot { border-color: var(--navy); color: var(--navy); }
.slot:hover { background: var(--sun); color: var(--navy); border-color: var(--sun-dark); }
.seg a[aria-current="true"] { color: var(--navy); }
.ticket-top { background: var(--navy); }
.aside-card { background: var(--sun-soft); border-color: #f2e29b; }
.timeline .dot { box-shadow: 0 0 0 1px #f2e29b; color: var(--navy); }
.notice { background: var(--sun-soft); border-color: #f2e29b; }

/* Enfoque con foto */
.approach-side { display: grid; gap: 16px; }
.approach-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; border: 3px solid var(--sun); box-shadow: var(--shadow); display: block; }

/* Contenido: tarjetas con el estilo de las publicaciones */
.topics-sec { background: var(--navy); color: #fff; }
.topics-sec h2 { color: #fff; }
.topics-sec .lead { color: #e8e1d2; }
.topic-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); margin-top: 30px; }
.topic { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 250px; padding: 22px; border-radius: 20px; text-decoration: none; color: #fff; background: linear-gradient(160deg, #14213d 0%, #0e1830 100%); border: 1px solid rgba(252, 213, 42, .28); overflow: hidden; transition: transform .2s, border-color .2s, background .2s; }
.topic::after { content: ""; position: absolute; right: -36px; bottom: -36px; width: 120px; height: 120px; border-radius: 50%; background: rgba(252, 213, 42, .14); transition: transform .3s; }
.topic:hover { transform: translateY(-4px); border-color: var(--sun); }
.topic:hover::after { transform: scale(1.5); }
.topic-n { font-family: var(--serif); font-size: .95rem; color: var(--sun); letter-spacing: .08em; }
.topic strong { font-family: var(--serif); font-size: 1.55rem; line-height: 1.15; font-weight: 700; }
.topic strong::after { content: ""; display: block; width: 46px; height: 5px; margin-top: 10px; border-radius: 3px; background: var(--sun); }
.topic-t { color: #cfc7b4; font-size: .92rem; flex: 1; }
.topic-go { display: inline-flex; align-items: center; gap: 6px; color: var(--sun); font-weight: 700; font-size: .88rem; position: relative; z-index: 1; }
@media (max-width: 1000px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .topic-grid { grid-template-columns: 1fr; } .topic { min-height: 0; } }

/* Cirugía: el camino que más importa, con peso propio en la portada */
.surgery { background: var(--sun); color: var(--navy); padding: 64px 0; position: relative; overflow: hidden; scroll-margin-top: 76px; }
.surgery::before { content: ""; position: absolute; right: -140px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: rgba(11, 20, 38, .06); }
.surgery-grid { position: relative; display: grid; gap: 44px; grid-template-columns: 1.15fr .85fr; align-items: center; }
.surgery .eyebrow { color: var(--navy); }
.surgery .eyebrow::before { background: var(--navy); }
.surgery h2 { color: var(--navy); font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.1; }
.surgery .hl { background: linear-gradient(transparent 62%, #fff 62%, #fff 94%, transparent 94%); }
.surgery .lead { color: #2a2f3c; }
.surgery-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.surgery-facts li { padding: 7px 14px; border-radius: 999px; background: rgba(11, 20, 38, .1); font-weight: 650; font-size: .9rem; }
.surgery .btn { background: var(--navy); color: #fff; }
.surgery .btn:hover { background: var(--navy-2); }
.surgery .btn.ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.surgery .btn.ghost:hover { background: var(--navy); color: #fff; }
.surgery-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: sp; }
.surgery-path li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; padding: 18px 20px; background: var(--cream); border-radius: 20px; box-shadow: 0 14px 34px rgba(11, 20, 38, .16); }
.surgery-path .n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: var(--sun); font-family: var(--serif); font-weight: 700; font-size: 1.25rem; }
.surgery-path strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.surgery-path span:not(.n) { color: #4a4f5c; font-size: .93rem; line-height: 1.45; }
@media (max-width: 900px) { .surgery { padding: 44px 0; } .surgery-grid { grid-template-columns: 1fr; gap: 28px; } }

.surgery-line { margin: 14px 0 0; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--navy); }
.foot-legal { margin: 0 0 6px; color: #cfc7b4; }
.foot-bottom p { margin: 0 0 6px; }

/* Tipografías del manual de marca: las declara fonts.css cuando los archivos están en /static/fonts. */
h3, .btn, .eyebrow, .brand small, label { font-family: var(--sans); }

/* En el celular el globo de ayuda tapaba los botones de la portada: se queda solo el botón del chat */
@media (max-width: 560px) { .chat-teaser { display: none; } }

/* Retrato de la Dra.: encuadre desde arriba para que no se corte la cara */
.portrait img { object-position: 50% 18%; }