/*
 * TUS ESTILOS. Aquí va todo el CSS propio de la web, para no tocar style.css ni bootstrap.min.css
 * (esos dos son del tema: el panel los recolorea al cambiar los colores corporativos).
 *
 * Reglas para que tus cambios sigan los colores del panel:
 *   - Usa las variables del tema en vez de escribir un color:
 *       color: var(--bs-primary);                       (color principal)
 *       background: rgba(var(--bs-primary-rgb), .1);    (el mismo, translúcido)
 *   Importante: dentro de un comentario NO escribas otro comentario: el primer cierre lo termina y el navegador
 *   descarta la regla que venga después.
 *   - Para el texto y los grises usa colores neutros normales (#212529, #6c757d, #f8f9fa).
 *   - Si de verdad necesitas un color fijo que NO debe cambiar con el panel, escríbelo aquí y comenta por qué.
 *
 * Guía completa: docs/editar-landing.md
 */

/* ───────── Hero de la portada: menos espacio en blanco ─────────
 * El tema deja 170 px arriba y abajo (más 48 px de la fila) y una ilustración muy alta; en una laptop el título
 * quedaba bajo la mitad de la pantalla. Aquí se compacta sin cambiar nada más. */
.hero-inicio { padding: 104px 0 56px; }
.hero-inicio .row.mt-5 { margin-top: 0 !important; }
.hero-inicio .row > div:last-child img { display: block; width: 100%; height: auto; max-height: min(460px, calc(100vh - 250px)); object-fit: contain; object-position: right center; }
@media (max-width: 991.98px) {
    .hero-inicio { padding: 108px 0 44px; }
    .hero-inicio .row > div:last-child img { max-height: none; object-position: center; }
}

/* ───────── Encabezado de las páginas internas (Nosotros, Servicios, Precios, Equipo, Portafolio, Blog, Contacto, Legales) ─────────
 * Se administra desde el panel: Página Web > Contenido de Páginas > «Encabezado — …» (título, subtítulo e imagen).
 * Sin imagen es una franja de color suave (hero-interna--suave); con imagen es un banner (hero-interna--banner).
 * La estructura está en includes/hero-interna.blade.php. Solo se usan variables del tema: sigue los colores del panel. */
.hero-interna { position: relative; padding: 116px 0 76px; }
.hero-interna .row.mt-5 { margin-top: 0 !important; position: relative; z-index: 1; }
.hero-interna .pages-heading .title { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); font-weight: 700; letter-spacing: -.01em; }
.hero-interna__subtitulo { max-width: 40rem; margin: .7rem auto 0; font-size: 1.1rem; line-height: 1.6; }

.hero-interna--suave.bg-light { background-color: rgba(var(--bs-primary-rgb), .08) !important; }
.hero-interna--suave .pages-heading .title { color: color-mix(in srgb, var(--bs-footer) 69%, #000); }
.hero-interna--suave .hero-interna__subtitulo { color: #4a5368; }

.hero-interna--banner { background-color: var(--bs-footer); background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero-interna--banner::before { content: ""; position: absolute; inset: 0; background: rgba(var(--bs-footer-rgb), var(--capa, .62)); }
/* El menú de arriba usa texto oscuro: sobre un banner va en una barra blanca para que se lea. */
body:has(.hero-interna--banner) #topnav:not(.nav-sticky) { background-color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.hero-interna--banner .pages-heading .title { color: #fff; }
.hero-interna--banner .hero-interna__subtitulo { color: rgba(255, 255, 255, .9); }

@media (max-width: 575.98px) { .hero-interna { padding: 104px 0 64px; } }

/* ───────── Menú del celular: «Contacto» y «Acceder al Panel» ─────────
 * En el encabezado los dos botones se ocultan bajo 768 px: junto al logo no caben, y «Contacto» caía a una segunda fila y tapaba
 * el título. En el celular van dentro del menú desplegable, como botones completos separados de los enlaces (Contacto
 * relleno y Acceder al Panel con borde). Solo variables del tema: sigue los colores del panel. */
@media (max-width: 767.98px) {
    #topnav .navigation-menu > li.menu-contacto { margin-top: 6px; padding: 14px 20px 0; border-top: 1px solid rgba(var(--bs-footer-rgb), .12); }
    #topnav .navigation-menu > li.menu-acceso { padding: 10px 20px 18px; }
    #topnav .navigation-menu > li.menu-contacto > a,
    #topnav .navigation-menu > li.menu-acceso > a { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; font-size: 1rem; text-transform: none; border: 1px solid var(--bs-primary); border-radius: 8px; }
    /* El tema fuerza «background-color: transparent !important» en los enlaces del menú: aquí hace falta !important para ganarle. */
    #topnav .navigation-menu > li.menu-contacto > a { color: #fff; background-color: var(--bs-primary) !important; }
    #topnav .navigation-menu > li.menu-acceso > a { color: var(--bs-primary); background-color: transparent !important; }
    #topnav .navigation-menu > li.menu-contacto > a:hover,
    #topnav .navigation-menu > li.menu-contacto > a:focus { color: #fff; background-color: color-mix(in srgb, var(--bs-primary) 82%, #000) !important; border-color: color-mix(in srgb, var(--bs-primary) 82%, #000); }
    #topnav .navigation-menu > li.menu-acceso > a:hover,
    #topnav .navigation-menu > li.menu-acceso > a:focus { color: #fff; background-color: var(--bs-primary) !important; border-color: var(--bs-primary); }
    #topnav .navigation-menu > li.menu-contacto > a i,
    #topnav .navigation-menu > li.menu-acceso > a i { font-size: 1.15rem; }
}

/* ───────── Sin desplazamiento horizontal en el celular ─────────
 * Las animaciones de entrada del tema (animate.css «fadeInRight», «fadeInLeft»…) parten desde fuera de la pantalla y, mientras
 * duran, hacían la página más ancha que el celular (aparecía una barra de desplazamiento lateral y todo "bailaba").
 * Con la raíz sin overflow, esta regla de body se aplica a la ventana y no rompe el encabezado fijo. */
body { overflow-x: hidden; }


/* ───────── Compra y pago por pasos ─────────
 * Las páginas de compra y pago (datos, pago, comprobante, listo) usan la plantilla sin encabezado. El tema da a «.bg-home» una altura
 * fija de 100vh y centra el contenido: cuando el contenido era más alto que la pantalla se cortaba por arriba y no se podía subir
 * a verlo. Aquí la altura es un mínimo (crece con el contenido) y el centrado vertical lo hace el margen automático del contenedor,
 * que nunca empuja el contenido fuera de la pantalla. */
.pagina-compra { height: auto; min-height: 100vh; padding: 40px 0; }
.pagina-compra > .container { margin-block: auto; }

.pasos-compra { display: flex; justify-content: space-between; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; text-align: center; font-size: .85rem; color: #8492a6; }
.pasos-compra li { flex: 1 1 0; position: relative; }
.pasos-compra li + li::before { content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 2px; background: #e5e9f0; z-index: 0; }
.pasos-compra li.hecho + li::before, .pasos-compra li.actual::before { background: var(--bs-primary); }
.pasos-compra .numero { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #e5e9f0; font-weight: 600; }
.pasos-compra li.hecho .numero, .pasos-compra li.actual .numero { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.pasos-compra li.actual, .pasos-compra li.hecho { color: var(--bs-primary); font-weight: 600; }

.opcion-comprobante { display: block; height: 100%; padding: .85rem 1rem; border: 1px solid #dfe3ea; border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s; }
.opcion-comprobante:hover { border-color: var(--bs-primary); }
.btn-check:checked + .opcion-comprobante { border-color: var(--bs-primary); background-color: var(--bs-primary); color: #fff; }
.btn-check:checked + .opcion-comprobante .text-muted, .btn-check:checked + .opcion-comprobante .text-primary { color: #fff !important; }
.btn-check:focus-visible + .opcion-comprobante { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

.estado-documento { min-height: 1.25rem; font-size: .85rem; }
.pagina-compra .form-control[readonly] { background-color: #f6f8fb; }

/* Código de compra (CR-7K4Q-9XM2): letras de ancho fijo y separadas para leerlo, dictarlo y copiarlo sin errores. */
.codigo-compra { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; color: var(--bs-primary); }

/* ───────── Libro de Reclamaciones ─────────
 * Colores planos del tema: franja del proveedor en el color principal, secciones numeradas con cuadros sólidos. */
.libro-proveedor { background: var(--bs-primary); color: #fff; border-radius: 8px; }
.libro-proveedor .libro-titulo { font-size: 1.35rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.libro-proveedor dt { font-weight: 400; opacity: .85; }
.libro-paso { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.libro-paso .numero { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: var(--bs-primary); color: #fff; font-size: .95rem; }
.libro-leyenda { border-left: 4px solid var(--bs-primary); padding: .75rem 1rem; background: #fff; }
.libro-constancia-numero { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 2rem; font-weight: 800; letter-spacing: .06em; }
.enlace-libro { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border: 2px solid currentColor; border-radius: 6px; font-weight: 700; }
@media print {
    .navbar, #topnav, .footer, .back-to-top, .hero-interna, .whatsapp-float-wrap, .back-to-home, .d-print-none { display: none !important; }
    .libro-proveedor { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}