/* Landing pública de DENTIKORE. CSS plano: no requiere compilar con npm. */
:root {
    --tinta: #0b1b3a;
    --tinta-suave: #42506b;
    --gris: #6b7891;
    --borde: #e4e9f2;
    --fondo: #f6f8fc;
    --blanco: #fff;
    --primario: #0284c7;
    --primario-2: #0ea5e9;
    --menta: #10b981;
    --coral: #f43f5e;
    --ambar: #f59e0b;
    --radio: 22px;
    --sombra: 0 1px 2px rgba(11, 27, 58, .06), 0 12px 32px -12px rgba(11, 27, 58, .18);
    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; font-family: var(--sans); color: var(--tinta); background: var(--blanco); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.sin-scroll { overflow: hidden; }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); font-weight: 800; }
h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--primario); }
p { margin: 0 0 1em; }

.contenedor { width: min(1200px, 100% - 32px); margin-inline: auto; }
.contenedor--angosto { width: min(820px, 100% - 32px); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border: 0; border-radius: 999px; padding: .8em 1.4em; font: 700 .95rem var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap; }
.boton:hover { transform: translateY(-1px); }
.boton:disabled { opacity: .6; cursor: wait; }
.boton--sm { padding: .55em 1.1em; font-size: .88rem; }
.boton--lg { padding: 1em 1.7em; font-size: 1.02rem; }
.boton--bloque { width: 100%; }
.boton--primario { background: var(--tinta); color: #fff; box-shadow: 0 8px 20px -8px rgba(11, 27, 58, .5); }
.boton--urgente { background: linear-gradient(135deg, #f43f5e, #e11d48); color: #fff; box-shadow: 0 10px 24px -10px rgba(225, 29, 72, .7); }
.boton--blanco { background: #fff; color: var(--tinta); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35); }
.boton--fantasma { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(8px); }

.pildora { display: inline-block; padding: .35em .9em; border-radius: 999px; background: #e0f2fe; color: var(--primario); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; }
.pildora--clara { background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(6px); }
.pildora--coral { background: #ffe4e6; color: #e11d48; }

.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.punto--rojo { background: var(--coral); }
.punto--verde { background: var(--menta); }
.punto--vivo { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: latido 1.8s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* Navegación */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; transition: background .25s, box-shadow .25s; }
.nav--scrolled { background: rgba(255, 255, 255, .85); backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 var(--borde); }
.nav__barra { display: flex; align-items: center; gap: 2rem; height: 76px; }
.marca { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.2rem; letter-spacing: .02em; text-decoration: none; color: #fff; transition: color .25s; }
.nav--scrolled .marca, .marca--clara { color: var(--tinta); }
.pie .marca--clara { color: #fff; }
.marca__logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, var(--primario-2), var(--menta)); color: #fff; }
.marca__logo svg { width: 22px; }
.nav__links { display: flex; gap: 1.6rem; margin-right: auto; }
.nav__links a { color: rgba(255, 255, 255, .85); text-decoration: none; font-weight: 600; font-size: .93rem; }
.nav--scrolled .nav__links a { color: var(--tinta-suave); }
.nav__links a:hover { color: var(--primario-2); }
.nav__acciones { display: flex; align-items: center; gap: 1rem; }
.nav__tel { color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; }
.nav--scrolled .nav__tel { color: var(--tinta); }
.nav__menu { display: none; background: none; border: 0; font-size: 1.5rem; color: inherit; cursor: pointer; }

/* Slider */
.hero { position: relative; background: var(--tinta); overflow: hidden; }
.hero__pista { display: grid; }
.slide { grid-area: 1 / 1; min-height: min(800px, 100vh); display: flex; align-items: center; padding: 120px 0 150px; color: #fff; position: relative; isolation: isolate; }
.slide::before { content: ''; position: absolute; inset: 0; z-index: -2; }
.slide--oceano::before { background: radial-gradient(1200px 600px at 85% 20%, #38bdf8 0%, transparent 55%), radial-gradient(900px 500px at 10% 110%, #10b981 0%, transparent 55%), linear-gradient(135deg, #0b1b3a 10%, #0c4a6e 100%); }
.slide--menta::before { background: radial-gradient(1000px 600px at 80% 10%, #6ee7b7 0%, transparent 55%), radial-gradient(800px 500px at 0% 100%, #22d3ee 0%, transparent 55%), linear-gradient(135deg, #064e3b 0%, #0f766e 100%); }
.slide--coral::before { background: radial-gradient(1000px 600px at 85% 15%, #fb7185 0%, transparent 55%), radial-gradient(800px 500px at 0% 100%, #f59e0b 0%, transparent 50%), linear-gradient(135deg, #4c0519 0%, #9f1239 100%); }
.slide--noche::before { background: radial-gradient(1000px 600px at 80% 0%, #6366f1 0%, transparent 55%), linear-gradient(135deg, #020617 0%, #1e1b4b 100%); }
.slide--imagen::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2, 6, 23, .82) 0%, rgba(2, 6, 23, .45) 55%, rgba(2, 6, 23, .1) 100%), var(--imagen) center / cover no-repeat; }
.slide--imagen .slide__arte { visibility: hidden; }
.slide__contenido { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 3rem; }
.slide__titulo { font-size: clamp(2.4rem, 5.6vw, 4.6rem); font-weight: 800; letter-spacing: -.035em; margin-bottom: .35em; }
.slide__subtitulo { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255, 255, 255, .85); max-width: 34em; }
.slide__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.slide__arte { position: relative; height: 420px; }
.diente-gigante { position: absolute; inset: 8% 10%; width: 80%; height: 84%; fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .35); stroke-width: .15; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .25)); animation: flotar 7s ease-in-out infinite; }
.orbe { position: absolute; border-radius: 50%; filter: blur(2px); }
.orbe--1 { width: 180px; height: 180px; right: 0; top: 0; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .05)); animation: flotar 9s ease-in-out infinite reverse; }
.orbe--2 { width: 90px; height: 90px; left: 6%; bottom: 8%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, .04)); animation: flotar 6s ease-in-out infinite; }
.tarjeta-flotante { position: absolute; z-index: 2; display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; border-radius: 16px; background: rgba(255, 255, 255, .92); color: var(--tinta); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .35); font-size: .9rem; }
.tarjeta-flotante strong { display: block; }
.tarjeta-flotante small { color: var(--gris); }
.tarjeta-flotante--1 { left: -4%; top: 22%; animation: flotar 6s ease-in-out infinite; }
.tarjeta-flotante--2 { right: -2%; bottom: 14%; animation: flotar 7s ease-in-out infinite reverse; }
.tarjeta-flotante--2 > span { font-size: 1.5rem; }
@keyframes flotar { 50% { transform: translateY(-14px); } }
.slide-entra { transition: opacity .7s ease, transform .7s ease; }
.slide-entra-desde { opacity: 0; transform: scale(1.03); }
.slide-entra-hasta { opacity: 1; transform: none; }
.hero__controles { position: absolute; left: 0; right: 0; bottom: 76px; display: flex; justify-content: space-between; align-items: center; }
.hero__puntos { display: flex; gap: .5rem; }
.hero__puntos button { width: 44px; height: 5px; border: 0; padding: 0; border-radius: 99px; background: rgba(255, 255, 255, .3); cursor: pointer; overflow: hidden; }
.hero__puntos button span { display: block; height: 100%; width: 0; background: #fff; }
.hero__puntos button.activo span { animation: progreso linear forwards; }
@keyframes progreso { to { width: 100%; } }
.hero__flechas { display: flex; gap: .5rem; }
.hero__flechas button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.1rem; cursor: pointer; backdrop-filter: blur(8px); }
.hero__flechas button:hover { background: rgba(255, 255, 255, .2); }

/* Secciones */
.seccion { padding: clamp(64px, 9vw, 120px) 0; }
.encabezado { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.encabezado p { color: var(--tinta-suave); font-size: 1.08rem; }
.encabezado--claro h2 { color: #fff; }

.seccion--urgencias { background: var(--fondo); position: relative; }
.filtros { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.4rem; }
.filtros button { display: inline-flex; align-items: center; gap: .5rem; padding: .65em 1.2em; border-radius: 999px; border: 1px solid var(--borde); background: #fff; font: 600 .92rem var(--sans); color: var(--tinta-suave); cursor: pointer; transition: all .15s; }
.filtros button span { background: var(--fondo); border-radius: 99px; padding: 0 .55em; font-size: .8rem; }
.filtros button.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.filtros button.activo span { background: rgba(255, 255, 255, .15); }
.rejilla-urgencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.urgencia { display: flex; flex-direction: column; padding: 1.5rem; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra); transition: transform .2s, box-shadow .2s, border-color .2s; position: relative; overflow: hidden; }
.urgencia:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(11, 27, 58, .35); }
.urgencia::after { content: ''; position: absolute; inset: 0 0 auto; height: 4px; }
.urgencia--inmediata::after { background: linear-gradient(90deg, #f43f5e, #fb923c); }
.urgencia--prioritaria::after { background: linear-gradient(90deg, #f59e0b, #facc15); }
.urgencia--programable::after { background: linear-gradient(90deg, #10b981, #22d3ee); }
.urgencia--destacada { border-color: #bae6fd; }
.urgencia__cabeza { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.urgencia__icono { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--fondo); font-size: 1.7rem; }
.urgencia h3 { font-size: 1.12rem; }
.urgencia p { color: var(--tinta-suave); font-size: .93rem; flex: 1; }
.urgencia .boton { align-self: flex-start; }
.etiqueta { display: inline-block; padding: .3em .75em; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.etiqueta--inmediata { background: #ffe4e6; color: #be123c; }
.etiqueta--prioritaria { background: #fef3c7; color: #b45309; }
.etiqueta--programable { background: #d1fae5; color: #047857; }
.aviso-hospital { margin: 2.5rem auto 0; max-width: 760px; text-align: center; font-size: .9rem; color: var(--tinta-suave); background: #fff; border: 1px dashed #fecdd3; border-radius: 16px; padding: 1rem 1.25rem; }
.vacio { grid-column: 1 / -1; text-align: center; color: var(--gris); }

.seccion--pasos { background: radial-gradient(900px 400px at 100% 0%, rgba(14, 165, 233, .35), transparent 60%), var(--tinta); color: #fff; }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: paso; }
.pasos li { padding: 2rem; border-radius: var(--radio); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.pasos p { color: rgba(255, 255, 255, .72); margin: 0; }
.pasos__numero { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 1.2rem; background: linear-gradient(135deg, var(--primario-2), var(--menta)); font-weight: 800; font-size: 1.2rem; }

.rejilla-beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.beneficio { padding: 2rem; border-radius: var(--radio); background: var(--fondo); transition: background .2s; }
.beneficio:hover { background: #eef6fd; }
.beneficio__icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; box-shadow: var(--sombra); font-size: 1.5rem; margin-bottom: 1.2rem; }
.beneficio h3 { font-size: 1.15rem; }
.beneficio p { color: var(--tinta-suave); margin: 0; }

.seccion--editorial { background: linear-gradient(180deg, #fff 0%, #f0f9ff 100%); }
.editorial { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
.editorial__articulo { padding: 2.4rem; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); }
.editorial__articulo--principal { padding: 0; border: 0; background: none; }
.editorial__articulo--principal h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); }
.editorial__articulo--principal p:first-of-type::first-letter { float: left; font-family: var(--serif); font-size: 3.6em; line-height: .9; padding: .05em .12em 0 0; color: var(--primario); }
.editorial__articulo p { color: var(--tinta-suave); font-size: 1.05rem; }
.editorial__articulo h2 { font-size: 1.5rem; }
.editorial__icono { font-size: 2rem; display: block; margin-bottom: .6rem; }

.seccion--consejos { background: #fff7f8; }
.rejilla-consejos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.consejo { display: flex; gap: 1rem; padding: 1.5rem; border-radius: var(--radio); background: #fff; border: 1px solid #ffe4e6; }
.consejo > span { font-size: 1.8rem; }
.consejo h3 { font-size: 1.05rem; margin-bottom: .3em; }
.consejo p { margin: 0; color: var(--tinta-suave); }

.preguntas details { border-bottom: 1px solid var(--borde); padding: 1.2rem 0; }
.preguntas summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--primario); transition: transform .2s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas p { margin: .8rem 0 0; color: var(--tinta-suave); }

.cta-final { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: clamp(2rem, 5vw, 4rem); border-radius: 32px; color: #fff; background: radial-gradient(700px 300px at 100% 0%, rgba(251, 113, 133, .7), transparent 60%), linear-gradient(135deg, #0b1b3a, #0c4a6e); }
.cta-final h2 { color: #fff; }
.cta-final p { color: rgba(255, 255, 255, .8); margin: 0; }

.pie { background: var(--tinta); color: rgba(255, 255, 255, .7); padding: 64px 0 28px; font-size: .93rem; }
.pie__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
.pie h4 { color: #fff; font-size: 1rem; }
.pie p { margin: 0 0 .4em; }
.pie a { color: #fff; text-decoration: none; }
.pie__legal { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 3rem; padding-top: 1.5rem; font-size: .82rem; }


/* Ventana de agendamiento */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal__fondo { position: absolute; inset: 0; background: rgba(2, 6, 23, .55); backdrop-filter: blur(6px); animation: aparecer .2s ease; }
.modal__panel { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -20px rgba(2, 6, 23, .5); animation: subir .3s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.modal__cerrar { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .2); color: #fff; font-size: 1rem; cursor: pointer; }
.modal__cabeza { display: flex; gap: 1rem; align-items: center; padding: 1.8rem 1.8rem 1.6rem; color: #fff; }
.modal__cabeza h2 { font-size: 1.5rem; margin: .35rem 0 .2rem; color: #fff; }
.modal__cabeza p { margin: 0; color: rgba(255, 255, 255, .8); font-size: .9rem; }
.modal__cabeza--inmediata { background: linear-gradient(135deg, #9f1239, #f43f5e); }
.modal__cabeza--prioritaria { background: linear-gradient(135deg, #92400e, #f59e0b); }
.modal__cabeza--programable { background: linear-gradient(135deg, #0b1b3a, #0e7490); }
.modal__icono { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .18); font-size: 2rem; }
.modal__cuerpo { padding: 1.4rem 1.8rem 1.8rem; }
.progreso { display: flex; list-style: none; margin: 0; padding: 0 1.8rem; border-bottom: 1px solid var(--borde); }
.progreso li { flex: 1; padding: .9rem 0; font-size: .82rem; font-weight: 700; color: var(--gris); border-bottom: 3px solid transparent; text-align: center; }
.progreso li.activo { color: var(--tinta); border-color: var(--primario-2); }
.progreso li.hecho { color: var(--menta); }

.recomendacion { padding: 1rem 1.1rem; border-radius: 16px; background: #f0f9ff; font-size: .9rem; color: var(--tinta-suave); margin-bottom: 1.2rem; }
.recomendacion p { margin: 0 0 .5em; }
.recomendacion p:last-child { margin: 0; }
.recomendacion__alarma { color: #9f1239; }
.campo__etiqueta { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin: 1.2rem 0 .6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips--dias { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; }
.chip { padding: .55em 1em; border-radius: 12px; border: 1px solid var(--borde); background: #fff; font: 600 .9rem var(--sans); color: var(--tinta); cursor: pointer; }
.chip.activo { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.chip--dia { display: flex; flex-direction: column; align-items: center; min-width: 62px; line-height: 1.2; }
.chip--dia strong { font-size: 1.3rem; }
.chip--dia small { font-size: .72rem; opacity: .75; text-transform: capitalize; }
.cupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; transition: opacity .2s; }
.cupos.cargando { opacity: .4; pointer-events: none; }
.cupos__dia { grid-column: 1 / -1; margin: .4rem 0 0; font-weight: 700; font-size: .9rem; }
.cupo { display: flex; flex-direction: column; align-items: flex-start; padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--borde); background: #fff; cursor: pointer; text-align: left; font-family: var(--sans); transition: all .15s; }
.cupo:hover { border-color: var(--primario-2); background: #f0f9ff; transform: translateY(-1px); }
.cupo strong { font-size: 1.15rem; color: var(--tinta); }
.cupo strong small { font-size: .75rem; color: var(--gris); }
.cupo span { font-size: .78rem; color: var(--gris); }
.sin-cupos { grid-column: 1 / -1; text-align: center; padding: 1.5rem; border-radius: 16px; background: var(--fondo); }
.resumen { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 16px; background: #f0f9ff; margin-bottom: 1.2rem; }
.resumen small { display: block; color: var(--gris); font-size: .78rem; }
.resumen strong { display: block; }
.resumen span { font-size: .88rem; color: var(--tinta-suave); }
.enlace { background: none; border: 0; color: var(--primario); font-weight: 700; cursor: pointer; font-family: var(--sans); }
.formulario { display: grid; gap: .9rem; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.campo { display: grid; gap: .35rem; }
.campo > span { font-size: .82rem; font-weight: 600; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea { width: 100%; padding: .75em .9em; border-radius: 12px; border: 1px solid var(--borde); background: var(--fondo); font: 500 .95rem var(--sans); color: var(--tinta); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid #bae6fd; border-color: var(--primario-2); background: #fff; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .86rem; color: var(--tinta-suave); cursor: pointer; }
.check input { margin-top: .25em; width: 18px; height: 18px; accent-color: var(--primario); flex: none; }
.error { color: #be123c; font-size: .8rem; font-style: normal; }
.error--caja { background: #fff1f2; padding: .7rem 1rem; border-radius: 12px; }
.nota { font-size: .82rem; color: var(--gris); margin: 0; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.listo { text-align: center; padding: 1rem 0; }
.listo__check { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; background: #d1fae5; color: #047857; font-size: 2rem; font-weight: 800; animation: subir .4s; }
.listo__fecha { font-size: 1.2rem; font-weight: 700; margin-bottom: .3rem; }
.listo__codigo { display: inline-block; margin: 1rem 0; padding: .8rem 1.6rem; border-radius: 16px; background: var(--fondo); border: 2px dashed var(--borde); }
.listo__codigo small { display: block; color: var(--gris); font-size: .75rem; }
.listo__codigo strong { font-size: 1.6rem; letter-spacing: .12em; }
.listo .boton { margin-top: 1.2rem; }

/* Responsive */
@media (max-width: 960px) {
    .slide__contenido { grid-template-columns: 1fr; }
    .slide__arte { display: none; }
    .pasos, .rejilla-beneficios { grid-template-columns: 1fr 1fr; }
    .editorial { grid-template-columns: 1fr; }
    .nav__tel { display: none; }
}
@media (max-width: 720px) {
    .nav__links { display: none; position: absolute; top: 76px; left: 16px; right: 16px; flex-direction: column; gap: 0; padding: .5rem; border-radius: 18px; background: #fff; box-shadow: var(--sombra); }
    .nav__links a { color: var(--tinta) !important; padding: .8rem 1rem; }
    .nav__links--abierto { display: flex; }
    .nav__menu { display: block; color: #fff; }
    .nav--scrolled .nav__menu { color: var(--tinta); }
    .nav__acciones .boton { display: none; }
    .slide { min-height: 620px; padding: 110px 0 100px; }
    .pasos, .rejilla-beneficios, .rejilla-consejos, .fila { grid-template-columns: 1fr; }
    .cta-final { flex-direction: column; align-items: flex-start; }
    .modal { padding: 0; align-items: end; }
    .modal__panel { border-radius: 24px 24px 0 0; max-height: 92vh; }
    .modal__cabeza, .modal__cuerpo { padding-left: 1.2rem; padding-right: 1.2rem; }
    .progreso { padding: 0 1.2rem; }
    .hero__flechas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .revelar { opacity: 1 !important; transform: none !important; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Marca de la clínica y sedes con mapa */
.marca__imagen { height: 38px; width: auto; border-radius: 10px; background: #fff; padding: 3px; }
.seccion--sedes { background: var(--fondo); }
.rejilla-sedes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.sede { border-radius: var(--radio); overflow: hidden; background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra); }
.sede__mapa { display: block; }
.sede__datos { padding: 1.4rem 1.6rem; }
.sede__datos p { margin: 0 0 .3em; color: var(--tinta-suave); }
.sede__datos a { color: inherit; }
.enlace-mapa { display: inline-block; margin-top: .6rem; font-weight: 700; color: var(--primario) !important; text-decoration: none; }

/* ——— Pasada de conversión ——— */
:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; border-radius: 6px; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; padding: .7em 1.2em; border-radius: 12px; background: var(--tinta); color: #fff; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }

.cinta { position: fixed; inset: 0 0 auto; z-index: 41; height: 36px; display: flex; align-items: center; justify-content: center; gap: .55rem; padding: 0 16px; background: #052e1c; color: #d1fae5; font-size: .85rem; white-space: nowrap; overflow: hidden; }
.cinta strong { color: #fff; }
.cinta a { color: #6ee7b7; font-weight: 700; text-decoration: none; }
.nav--con-cinta { top: 36px; }
.nav--con-cinta ~ main .slide { padding-top: 150px; }

.atajos { margin-top: 2.2rem; }
.atajos__titulo { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .75); margin-bottom: .7rem; }
.atajos__lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.atajo { display: inline-flex; align-items: center; gap: .45rem; padding: .6em 1em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); color: #fff; font: 600 .88rem var(--sans); cursor: pointer; backdrop-filter: blur(10px); white-space: nowrap; transition: background .15s, transform .15s; }
.atajo:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }

.confianza { position: relative; z-index: 2; margin-top: -44px; }
.confianza__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border-radius: 22px; background: var(--borde); box-shadow: 0 30px 60px -30px rgba(11, 27, 58, .35); }
.confianza__item { display: grid; gap: .15rem; padding: 1.3rem 1.4rem; background: #fff; }
.confianza__item strong { font-size: 1.15rem; letter-spacing: -.01em; }
.confianza__item span { font-size: .85rem; color: var(--gris); }
.seccion--urgencias { padding-top: clamp(56px, 7vw, 96px); }

.urgencia__pie { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.urgencia__precio { font-size: .8rem; color: var(--gris); }
.urgencia__precio strong { display: block; font-size: 1rem; color: var(--tinta); }

.seccion--testimonios { background: linear-gradient(180deg, #fff, var(--fondo)); }
.rejilla-testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.testimonio { margin: 0; padding: 2rem; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra); }
.testimonio__estrellas { color: #f59e0b; letter-spacing: .15em; margin-bottom: .8rem; }
.testimonio blockquote { margin: 0 0 1.2rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; }
.testimonio figcaption { font-weight: 700; font-size: .9rem; color: var(--tinta-suave); }

.editorial__articulo--principal .boton { margin-top: .6rem; }
.cta-final__botones { display: flex; flex-wrap: wrap; gap: .8rem; }

.barra-accion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; gap: .5rem; padding: .6rem 12px calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); box-shadow: 0 -8px 30px -12px rgba(11, 27, 58, .3); }
.barra-accion__boton { flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 48px; border-radius: 14px; background: var(--fondo); color: var(--tinta); font-weight: 700; font-size: .92rem; text-decoration: none; }
.barra-accion__boton--wa { background: #dcfce7; color: #166534; }
.barra-accion__boton--principal { flex: 1.4; background: linear-gradient(135deg, #f43f5e, #e11d48); color: #fff; }
.wa-flotante { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 16px 30px -10px rgba(37, 211, 102, .7); transition: transform .2s; }
.wa-flotante:hover { transform: scale(1.07); }
.wa-flotante svg { width: 32px; height: 32px; }

.primer-cupo { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem 1.2rem; border: 0; border-radius: 18px; background: linear-gradient(135deg, #0b1b3a, #0c4a6e); color: #fff; text-align: left; font-family: var(--sans); cursor: pointer; box-shadow: 0 16px 30px -16px rgba(11, 27, 58, .8); transition: transform .15s; }
.primer-cupo:hover { transform: translateY(-2px); }
.primer-cupo > span:nth-child(2) { flex: 1; display: grid; }
.primer-cupo small { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #7dd3fc; font-weight: 700; }
.primer-cupo strong { font-size: 1.25rem; }
.primer-cupo em { font-style: normal; font-size: .82rem; color: rgba(255, 255, 255, .7); }
.primer-cupo__rayo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .12); font-size: 1.3rem; }
.cupos__o { text-align: center; font-size: .8rem; color: var(--gris); margin: .9rem 0 .5rem; }
.nota--fuerte { color: var(--tinta-suave); font-size: .86rem; }

.con-revelado .revelar { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.con-revelado .revelar.visible { opacity: 1; transform: none; }
.pasos li.revelar:nth-child(2), .rejilla-beneficios .revelar:nth-child(3n+2) { transition-delay: .1s; }
.pasos li.revelar:nth-child(3), .rejilla-beneficios .revelar:nth-child(3n) { transition-delay: .2s; }

/* Celular: va al final para ganarle a las reglas de arriba */
@media (max-width: 720px) {
    body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .barra-accion { display: flex; }
    .wa-flotante { display: none; }
    .cinta { font-size: .78rem; }
    .cinta a { display: none; }
    .atajos__lista { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
    .confianza__rejilla { grid-template-columns: 1fr 1fr; }
    .cta-final__botones { width: 100%; }
    .cta-final__botones .boton { width: 100%; }
    .slide__botones { flex-wrap: nowrap; }
    .slide__botones .boton--lg { padding: .95em 1.2em; font-size: .95rem; }
    .slide__titulo { font-size: 2.5rem; }
    .confianza { margin-top: -28px; }
    .confianza__item { padding: 1rem; }
    .hero__controles { bottom: 52px; }
}
.recomendacion { margin: 1.4rem 0 0; }
.recomendacion summary { cursor: pointer; font-weight: 700; color: var(--tinta); margin-bottom: .5rem; }
.slide__contenido { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.slide__texto { min-width: 0; }
@media (max-width: 960px) { .slide__contenido { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .slide__botones .boton--lg { flex: 0 1 auto; min-width: 0; } }

/* Valoración gratis, promociones, tratamientos y "te llamamos" */
.pildora--menta { background: #d1fae5; color: #047857; }
.centrado { text-align: center; margin-top: 2rem; }
.seccion--oferta { padding: clamp(40px, 6vw, 72px) 0 0; }
.oferta { display: flex; align-items: center; gap: 1.6rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 28px; background: linear-gradient(135deg, #ecfdf5, #f0f9ff); border: 1px solid #a7f3d0; }
.oferta__icono { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 22px; background: #fff; font-size: 2.2rem; box-shadow: var(--sombra); }
.oferta__texto { flex: 1; }
.oferta__texto .pildora { margin-bottom: .6rem; }
.oferta__texto h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.oferta__texto p { margin: 0; color: var(--tinta-suave); }

.seccion--promociones { background: #fff7f8; }
.rejilla-promociones { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.rejilla-promociones--angosta { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 1rem; }
.promocion { display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; background: #fff; border: 1px solid #fecdd3; box-shadow: var(--sombra); }
.promocion__imagen { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.promocion__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.promocion__descuento { align-self: flex-start; margin-bottom: .8rem; padding: .3em .8em; border-radius: 999px; background: linear-gradient(135deg, #f43f5e, #e11d48); color: #fff; font-weight: 800; font-size: .95rem; }
.promocion__cuerpo p { color: var(--tinta-suave); }
.promocion__vigencia { font-size: .85rem; font-weight: 600; color: #be123c !important; }
.promocion__condiciones { font-size: .82rem; color: var(--gris); margin-bottom: 1rem; }
.promocion__condiciones summary { cursor: pointer; font-weight: 600; }
.promocion__botones { display: flex; align-items: center; gap: 1rem; margin-top: auto; flex-wrap: wrap; }
.promocion__botones .enlace { text-decoration: none; }

.rejilla-tratamientos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; }
.tratamiento { display: flex; flex-direction: column; padding: 1.5rem; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra); text-decoration: none; transition: transform .2s, border-color .2s; }
.tratamiento:hover { transform: translateY(-3px); border-color: var(--primario-2); }
.tratamiento__icono { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 16px; background: #e0f2fe; font-size: 1.6rem; }
.tratamiento__imagen { width: calc(100% + 3rem); margin: -1.5rem -1.5rem 1rem; aspect-ratio: 16 / 9; object-fit: cover; }
.tratamiento p { color: var(--tinta-suave); font-size: .93rem; }
.tratamiento__mas { margin-top: auto; font-weight: 700; color: var(--primario); font-size: .9rem; }

.seccion--llamada { background: var(--fondo); }
.llamada-bloque { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.llamada-bloque > .llamada { padding: 1.8rem; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra); }
.llamada-bloque__texto p { color: var(--tinta-suave); }
.check a { color: var(--primario); font-weight: 600; }

/* Páginas internas: tratamientos y textos legales */
.cabecera-pagina { padding: 140px 0 64px; color: #fff; background: radial-gradient(900px 400px at 100% 0%, rgba(14, 165, 233, .35), transparent 60%), var(--tinta); }
.cabecera-pagina h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; margin: .3em 0; }
.cabecera-pagina p { max-width: 680px; color: rgba(255, 255, 255, .8); font-size: 1.08rem; }
.cabecera-pagina__icono { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-top: 1rem; border-radius: 18px; background: rgba(255, 255, 255, .12); font-size: 2rem; }
.migas { font-size: .85rem; color: rgba(255, 255, 255, .65); }
.migas a { color: #fff; text-decoration: none; font-weight: 600; }
.pagina-detalle { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.pagina-detalle__lateral { position: sticky; top: 100px; }
.caja-lateral { padding: 1.6rem; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra); }
.caja-lateral h2 { font-size: 1.35rem; }
.caja-lateral .nota { margin-bottom: 1rem; }
.texto-largo { font-size: 1.05rem; color: var(--tinta-suave); }
.texto-largo h2 { font-size: 1.4rem; color: var(--tinta); margin-top: 2rem; }
.texto-largo__imagen { width: 100%; border-radius: var(--radio); margin-bottom: 1.5rem; }
.seccion--suave { background: var(--fondo); }
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.pie a { color: inherit; }

@media (max-width: 960px) {
    .pagina-detalle, .llamada-bloque { grid-template-columns: 1fr; }
    .pagina-detalle__lateral { position: static; }
}
@media (max-width: 720px) {
    .oferta { flex-direction: column; align-items: flex-start; }
    .cabecera-pagina { padding: 110px 0 48px; }
}