/*
 * Sistema de diseño de las páginas públicas (rediseño 2026-09, mismo sistema que las
 * landings de Idoo Restaurant, en azul). Se carga después de core.min.css y
 * pages/front-page.css (que ya trae la barra y el pie). Lo propio de una sola página
 * va en un <style> de esa página, no aquí. Ver "Páginas públicas" en CLAUDE.md.
 */
:root {
    --primary-color: #2196F3;
    --primary-color-dark: #1976D2;
    --bs-primary: #2196F3;
    --bs-primary-rgb: 33, 150, 243;
    --accent-color: #21CBF3;
    --bg-gradient: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
    --soft-bg: #F0F7FE;

    --lv-ink: #1e293b;
    --lv-muted: #64748b;
    --lv-line: rgba(15, 23, 42, 0.08);
    --lv-dark: #0f1a2b;
    --lv-dark-2: #172438;
}
body { font-family: 'Inter', system-ui, sans-serif; color: var(--lv-ink); background-color: #fff; }
h1, h2, h3, h4, h5 { letter-spacing: -0.02em; }
.section-py { padding-block: 6.25rem; }
@media (max-width: 1199.98px) { .section-py { padding-block: 4rem; } }
@media (max-width: 767.98px) { .section-py { padding-block: 3rem; } }

/* Marca */
.text-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.bg-label-primary { background-color: rgba(33, 150, 243, 0.12) !important; color: var(--primary-color) !important; }
.btn-primary { background: var(--bg-gradient); border-color: var(--primary-color); box-shadow: 0 4px 14px 0 rgba(33, 150, 243, 0.39); }
.btn-primary:hover { background: var(--primary-color-dark); transform: translateY(-1px); }
.btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); }
.btn-outline-primary:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; }
/* El tema pone en mayúscula la inicial de cada palabra de los botones («Crear Cuenta Gratis»); en español no va */
.btn { text-transform: none; }
.btn-white { background: #fff; border-color: #fff; }
/* Botón blanco de contorno para fondos de color (no existe en core.min.css) */
.btn-outline-white { color: #fff; border: 1px solid rgba(255,255,255,.85); background: transparent; }
.btn-outline-white:hover, .btn-outline-white:focus { color: var(--primary-color-dark); background: #fff; border-color: #fff; }
/* Texto secundario sobre fondo oscuro (text-white-50 no existe en core.min.css) */
.lv-soft { color: #94a3b8; }

/* FAQ */
.accordion-item { border: 1px solid #eee; border-radius: 12px !important; margin-bottom: 1rem; overflow: hidden; }
.accordion-button:not(.collapsed) { background-color: rgba(33, 150, 243, 0.05); color: var(--primary-color-dark); }
.accordion-button:focus { box-shadow: none; border-color: rgba(33, 150, 243, 0.1); }

.bg-pattern {
    background-color: #f5faff;
    background-image: radial-gradient(rgba(33, 150, 243, 0.28) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Tipografía de sección */
.lv-eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: var(--primary-color-dark);
}
.lv-section-title { font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.15; }
.lv-lead { font-size: 1.125rem; color: var(--lv-muted); max-width: 42rem; }

/* Hero */
.lv-hero { padding-top: 7.5rem; padding-bottom: 4rem; overflow: hidden; background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(33,150,243,.16), transparent 60%),
    radial-gradient(40rem 25rem at -10% 110%, rgba(33,203,243,.12), transparent 60%), #fff; }
.lv-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.07; }
.lv-accent { background: var(--bg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lv-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px;
    background: #fff; border: 1px solid var(--lv-line); box-shadow: 0 2px 10px rgba(15,23,42,.05); font-size: .85rem; font-weight: 500; }
.lv-pill i { color: var(--primary-color); }
.lv-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9rem; color: var(--lv-muted); }
.lv-checks i { color: #16a34a; }
.lv-shot { position: relative; }
.lv-shot > img { border-radius: 18px; }
.lv-toast { position: absolute; display: flex; align-items: center; gap: .75rem; background: #fff; border-radius: 14px;
    padding: .7rem .9rem; box-shadow: 0 14px 34px rgba(15,23,42,.14); border: 1px solid var(--lv-line); font-size: .85rem; max-width: 260px; }
.lv-toast strong { display: block; font-size: .875rem; }
.lv-toast small { color: var(--lv-muted); }
.lv-toast .lv-ico { flex: 0 0 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; }
.lv-toast-1 { top: 2%; right: -2%; }
.lv-toast-2 { bottom: 10%; left: -6%; }
.lv-toast-3 { bottom: -6%; right: 10%; }
@media (max-width: 991.98px) { .lv-toast { display: none; } .lv-hero { padding-top: 6rem; } }

@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } }
.floating-img { animation: float 6s ease-in-out infinite; }

/* Lo que reemplaza */
.lv-replace { border-block: 1px solid var(--lv-line); background: #fff; }
.lv-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.lv-tool { padding: .35rem .8rem; border-radius: 999px; background: #f1f5f9; color: var(--lv-muted); font-size: .85rem;
    text-decoration: line-through; text-decoration-color: rgba(220,38,38,.55); }
.lv-arrow { font-size: 1.75rem; color: var(--primary-color); }
.lv-one { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-radius: 14px;
    background: var(--soft-bg); border: 1px solid rgba(33,150,243,.35); font-weight: 700; }

/* Pilares con pestañas */
.lv-tabs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.lv-tabs::-webkit-scrollbar { display: none; }
.lv-tabs .nav-link { white-space: nowrap; border-radius: 999px; padding: .6rem 1.1rem; font-weight: 600; color: var(--lv-ink);
    background: #fff; border: 1px solid var(--lv-line); }
.lv-tabs .nav-link.active { background: var(--lv-ink); color: #fff; border-color: var(--lv-ink); }
.lv-pane { background: #fff; border: 1px solid var(--lv-line); border-radius: 24px; padding: clamp(1.25rem, 4vw, 3rem);
    box-shadow: 0 20px 60px rgba(15,23,42,.06); }
.lv-pane h3 { line-height: 1.2; }
.lv-pain { font-size: .95rem; color: #b91c1c; background: #fef2f2; border-radius: 12px; padding: .75rem 1rem; }
.lv-gains { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.lv-gains li { display: flex; gap: .75rem; }
.lv-gains i { color: #16a34a; font-size: 1.25rem; line-height: 1.4; }

/* Banda oscura */
.lv-dark { background: radial-gradient(50rem 25rem at 100% 0, rgba(33,150,243,.25), transparent 60%), var(--lv-dark); color: #e2e8f0; }
.lv-dark .lv-section-title, .lv-dark h3, .lv-dark h4 { color: #fff; }
.lv-dark .lv-lead { color: #94a3b8; }
.lv-dark .lv-eyebrow { color: var(--accent-color); }
.lv-dark-card { background: var(--lv-dark-2); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; padding: 1.75rem; height: 100%; }

/* Conversación (WhatsApp y similares) */
.lv-chat { background: rgba(255,255,255,.04); border-radius: 16px; padding: 1rem; display: grid; gap: .6rem; font-size: .9rem; }
.lv-bubble { padding: .6rem .85rem; border-radius: 14px; max-width: 90%; }
.lv-bubble.me { justify-self: end; background: #25D366; color: #06290f; font-weight: 500; border-bottom-right-radius: 4px; }
.lv-bubble.them { background: rgba(255,255,255,.08); color: #e2e8f0; border-bottom-left-radius: 4px; }
.lv-bubble-btns { display: grid; gap: .35rem; margin-top: .6rem; }
.lv-bubble-btns span { display: block; text-align: center; padding: .4rem; border-radius: 10px; background: rgba(255,255,255,.08); color: #7dd3fc; font-weight: 600; font-size: .85rem; }

/* Línea de tiempo de estados */
.lv-timeline { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 2px solid rgba(148,163,184,.35); display: grid; gap: 1.1rem; }
.lv-timeline li { position: relative; }
.lv-timeline li::before { content: ""; position: absolute; left: calc(-1.4rem - 7px); top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; border: 2px solid var(--lv-dark-2); }
.lv-timeline li strong { display: block; font-size: .95rem; }
.lv-timeline li small { color: #94a3b8; }
.lv-timeline li.hecho::before { background: #22c55e; }
.lv-timeline li.actual::before { background: var(--accent-color); box-shadow: 0 0 0 4px rgba(33,203,243,.25); }

/* Pasos */
.lv-step { position: relative; padding: 1.75rem; border-radius: 20px; background: #fff; border: 1px solid var(--lv-line); height: 100%; }
.lv-step-n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800;
    background: var(--bg-gradient); color: #fff; margin-bottom: 1rem; }

/* Tarjetas de función */
.lv-cat { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem; border-radius: 14px; height: 100%;
    background: #fff; border: 1px solid var(--lv-line); }
.lv-cat-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; }
.lv-cat strong { display: block; font-size: .95rem; margin-bottom: .15rem; }
.lv-cat small { color: var(--lv-muted); }

/* Precio */
.lv-price { border-radius: 28px; overflow: hidden; box-shadow: 0 30px 80px rgba(25,118,210,.22); }
.lv-price-left { background: var(--bg-gradient); color: #fff; padding: clamp(1.5rem, 4vw, 3rem); height: 100%; }
.lv-price-right { background: #fff; padding: clamp(1.5rem, 4vw, 3rem); }
.lv-big { font-size: clamp(2.5rem, 6vw, 3.75rem); font-weight: 800; line-height: 1; }
.lv-price-list { columns: 2 220px; column-gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
.lv-price-list li { break-inside: avoid; padding: .3rem 0; font-size: .92rem; }
.lv-price-list i { color: #16a34a; margin-right: .4rem; }
.lv-pack { border: 1px solid var(--lv-line); border-radius: 18px; padding: 1.25rem; text-align: center; background: #fff; height: 100%; }
.lv-pack-n { display: block; font-size: 2rem; font-weight: 800; line-height: 1.1; }
@media (max-width: 575.98px) { .lv-pack { padding: 1rem .4rem; } .lv-pack-n { font-size: 1.5rem; } }
.lv-pack-destacado { border: 2px solid var(--primary-color); box-shadow: 0 16px 40px rgba(33,150,243,.15); }

/* Aparición al hacer scroll: necesita landing.js o la sección queda invisible */
.lv-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.lv-reveal.lv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .lv-reveal { opacity: 1; transform: none; transition: none; }
    .floating-img { animation: none; }
}

/* Texto largo de lectura (páginas legales) */
.lv-legal { max-width: 46rem; background: #fff; border: 1px solid var(--lv-line); border-radius: 24px; padding: clamp(1.5rem, 5vw, 3.5rem);
    box-shadow: 0 20px 60px rgba(15,23,42,.05); font-size: 1rem; line-height: 1.75; color: #334155; }
.lv-legal h2 { font-size: 1.3rem; font-weight: 700; color: var(--lv-ink); margin: 2.5rem 0 .75rem; padding-top: 1.5rem; border-top: 1px solid var(--lv-line); }
.lv-legal h2:first-of-type { margin-top: 1.5rem; }
.lv-legal h3 { font-size: 1.05rem; font-weight: 700; color: var(--lv-ink); margin: 1.5rem 0 .5rem; }
.lv-legal p, .lv-legal ul { margin-bottom: 1rem; }
.lv-legal ul { padding-left: 1.25rem; }
.lv-legal li { margin-bottom: .4rem; }
.lv-legal li::marker { color: var(--primary-color); }
.lv-legal strong { color: var(--lv-ink); }
.lv-legal .alert { border-radius: 14px; }

/* Páginas transaccionales: confirmar/cancelar cita, detalle, invitación a colega, 404 (views/publico/tx-*.php) */
.lv-tx-body { min-height: 100vh; display: flex; flex-direction: column;
    background: radial-gradient(50rem 25rem at 90% -10%, rgba(33,150,243,.12), transparent 60%), #f8fafc; }
.lv-tx-header { padding: 1.5rem 1rem .5rem; text-align: center; }
.lv-tx { flex: 1; width: 100%; max-width: 30rem; margin: 0 auto; padding: 1rem 1rem 2rem; }
.lv-tx-card { background: #fff; border: 1px solid var(--lv-line); border-radius: 24px; padding: clamp(1.5rem, 5vw, 2.25rem);
    box-shadow: 0 20px 60px rgba(15,23,42,.07); text-align: center; }
.lv-tx-estado { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 2.2rem; margin: 0 auto 1rem; }
.lv-tx-card h1 { font-size: 1.4rem; font-weight: 800; margin-bottom: .5rem; }
.lv-tx-cita { text-align: left; background: #f8fafc; border: 1px solid var(--lv-line); border-radius: 18px; padding: 1.1rem; margin: 1.5rem 0; }
.lv-tx-foto { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; object-fit: cover; }
.lv-tx-iniciales { display: grid; place-items: center; background: var(--bg-gradient); color: #fff; font-weight: 800; }
.lv-tx-datos { display: grid; grid-template-columns: 1.5rem 1fr; gap: .75rem .5rem; margin: 0; font-size: .92rem; }
.lv-tx-datos dt { color: var(--primary-color); font-size: 1.1rem; line-height: 1.3; }
.lv-tx-datos dd { margin: 0; }
.lv-tx-footer { text-align: center; padding: 1.5rem 1rem; font-size: .8rem; color: var(--lv-muted); }
.lv-tx-footer a { color: var(--lv-muted); }

/* Teléfono con lada (intl-tel-input) a todo el ancho de su columna, en la reserva del perfil y de la clínica */
.iti { width: 100%; }