/* ============================================================================
   La capa de marca del sitio web (work item 803, docs/web/README.md)

   Metronic 8 pone la cuadrícula, los formularios, los botones y la validación;
   esto solo SOBRESCRIBE sus variables con los valores del prototipo aprobado y
   agrega las pocas clases que Metronic no tiene. Lo carga solo KosherClick.Web,
   DESPUÉS de style.bundle.css: con la misma especificidad, gana el que va al
   final.

   El sitio es solo de tema claro: no carga tema.js ni ofrece selector, así que
   aquí no hay bloque de [data-bs-theme=dark].
   ============================================================================ */

:root,
[data-bs-theme=light] {
    /* Naranja de acción: botones con texto blanco y enlaces. Con blanco encima da 5:1. */
    --bs-primary: #c25511;
    --bs-primary-rgb: 194, 85, 17;
    --bs-primary-active: #8f3d0b;
    --bs-primary-light: #fbeee6;
    --bs-primary-inverse: #ffffff;
    --bs-primary-clarity: rgba(194, 85, 17, 0.2);
    --bs-primary-bg-subtle: #f3d5c3;
    --bs-primary-border-subtle: #e7ab87;
    --bs-primary-text-emphasis: #4e2207;
    --bs-text-primary: #c25511;
    --bs-component-hover-color: #c25511;
    --bs-link-color: #c25511;
    --bs-link-color-rgb: 194, 85, 17;
    --bs-link-hover-color: #8f3d0b;
    --bs-link-hover-color-rgb: 143, 61, 11;
    --bs-focus-ring-color: rgba(194, 85, 17, 0.25);

    /* Texto y texto secundario. */
    --bs-body-color: #404040;
    --bs-heading-color: #111111;
    --bs-text-muted: #6b6b6b;
    --bs-gray-600: #6b6b6b;
    --bs-gray-900: #111111;

    /* Barlow para el texto; Barlow Condensed en los títulos (abajo). */
    --bs-font-sans-serif: "Barlow", Helvetica, Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);

    /* Radios: 10–12 px en controles, 16–24 px en tarjetas. */
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 10px;
    --bs-border-radius-lg: 12px;
    --bs-border-radius-xl: 16px;
    --bs-border-radius-xxl: 24px;

    /* Los dos de la marca que Bootstrap no tiene. */
    --kc-oscuro: #111111;
    /* El de los encabezados con el fondo de hexágonos: un punto más negro que el pie. */
    --kc-negro: #0a0a0a;
    --kc-acento: #f3732c;
}

.btn {
    --bs-btn-border-radius: 10px;
}

.card {
    --bs-card-border-radius: 16px;
    --bs-card-inner-border-radius: 16px;
}

/* Títulos en Barlow Condensed y en mayúsculas, como el prototipo. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .titulo-marca {
    font-family: "Barlow Condensed", "Barlow", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

/* --- El fondo oficial de hexágonos ---------------------------------------
   El mismo archivo que la página de la V1 y la pantalla de acceso de los
   portales. Va en los heros y en los encabezados oscuros, siempre sobre
   #111111: si la imagen tarda en el celular, lo que se ve es el oscuro y no un
   hueco blanco. */
.fondo-marca {
    background-color: var(--kc-negro);
    background-image: url("../_content/KosherClick.Components/marca/login-background.png");
    background-size: cover;
    background-position: center;
    color: #ffffff;
}

/* El acento es para fondos oscuros, con texto #111111 encima. */
.text-acento {
    color: var(--kc-acento) !important;
}

.btn.btn-acento {
    color: var(--kc-oscuro);
    background-color: var(--kc-acento);
    border-color: var(--kc-acento);
}

.btn.btn-acento:hover,
.btn.btn-acento:focus-visible {
    color: var(--kc-oscuro);
    background-color: #f58a4d;
    border-color: #f58a4d;
}


/* --- Los layouts ------------------------------------------------------------
   Medidas del prototipo aprobado (work item 814): contenido de 1200 px con
   24 px a los lados, y todo blanco táctil de al menos 44 px —casi todos llegan
   desde el celular—. */

.sitio-contenedor {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
}

.sitio-fondo-claro {
    background-color: #f7f7f7;
}

/* Encabezado del sitio */
.sitio-encabezado {
    border-bottom: 1px solid #262626;
    padding-block: 20px;
}

.sitio-logo {
    display: block;
    height: 32px;
    width: auto;
    max-width: 100%;
}

.sitio-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
}

.sitio-nav-liga {
    color: #d4d4d4;
    font-weight: 500;
    font-size: 16px;
    padding-block: 10px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.sitio-nav-liga:hover,
.sitio-nav-liga:focus-visible {
    color: #ffffff;
}

.sitio-nav-liga.activa {
    color: #ffffff;
    font-weight: 600;
    border-bottom-color: var(--kc-acento);
}

.sitio-nav-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    border: 1px solid #333333;
    color: #d4d4d4;
}

.sitio-nav-whatsapp:hover,
.sitio-nav-whatsapp:focus-visible {
    color: var(--kc-acento);
    border-color: var(--kc-acento);
}

.btn.sitio-nav-factura {
    font-weight: 600;
    font-size: 16px;
    padding: 12px 20px;
    min-height: 44px;
}

/* Pie del sitio */
.sitio-pie {
    background-color: var(--kc-oscuro);
    color: #c4c4c4;
}

.sitio-pie-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-block: 64px 32px;
}

.sitio-pie-columnas {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    justify-content: space-between;
}

.sitio-pie-marca {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sitio-pie-marca img {
    width: 100%;
    max-width: 360px;
    height: auto;
}

.sitio-pie-marca p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    max-width: 380px;
}

.sitio-pie-columna {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 1 220px;
}

.sitio-pie-titulo {
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: 8px;
}

.sitio-pie-columna a {
    color: #c4c4c4;
    text-decoration: none;
    padding-block: 6px;
}

.sitio-pie-columna a:hover,
.sitio-pie-columna a:focus-visible {
    color: var(--kc-acento);
}

.sitio-pie-legal {
    border-top: 1px solid #2a2a2a;
    padding-top: 24px;
    font-size: 14px;
    color: #9a9a9a;
}

/* Encabezado y pie de facturación */
.facturacion-encabezado {
    padding-block: 18px;
}

.facturacion-marca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.facturacion-logo {
    display: block;
    height: 30px;
    width: auto;
    max-width: 100%;
}

.facturacion-etiqueta {
    color: var(--kc-acento);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-left: 1px solid #3a3a3a;
    padding-left: 18px;
}

.facturacion-dudas {
    color: #d4d4d4;
    text-decoration: none;
    font-size: 15px;
    padding-block: 10px;
}

.facturacion-dudas:hover,
.facturacion-dudas:focus-visible {
    color: #ffffff;
}

.facturacion-pie {
    background-color: #ffffff;
    border-top: 1px solid #e6e6e6;
    padding-block: 28px;
    font-size: 14px;
    color: #6b6b6b;
}

/* En el celular la facturación apila: el logo a lo ancho y la etiqueta debajo, sin la raya. */
@media (max-width: 575.98px) {
    .sitio-contenedor {
        padding-inline: 16px;
    }

    .facturacion-encabezado {
        padding-block: 16px 14px;
    }

    .facturacion-marca {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .facturacion-logo {
        height: auto;
        width: 300px;
    }

    .facturacion-etiqueta {
        border-left: 0;
        padding-left: 0;
        font-size: 13px;
    }

    .facturacion-pie {
        padding-block: 18px;
        font-size: 13px;
    }
}

/* --- Las pantallas de facturación (work item 806) ---------------------------
   Del prototipo del 814: tarjetas blancas de 20-24 px de radio sobre #f7f7f7,
   títulos grandes en Barlow Condensed y campos de 50 px de alto. */

.facturacion-cuerpo {
    padding-block: 56px 88px;
}

.facturacion-titulo {
    margin: 0;
    font-weight: 700;
    font-size: clamp(40px, 6vw, 56px);
    line-height: 0.95;
    color: #111111;
}

.facturacion-subtitulo {
    margin: 0;
    font-weight: 600;
    font-size: 28px;
    color: #111111;
    text-transform: none;
}

.facturacion-tarjeta {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.facturacion-tarjeta-angosta { max-width: 680px; margin-inline: auto; }
.facturacion-tarjeta-mediana { max-width: 760px; margin-inline: auto; border-radius: 24px; padding: 48px; gap: 24px; }

.facturacion-pastilla {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 15px;
}

.facturacion-columnas {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}

.facturacion-compra { flex: 999 1 560px; min-width: 0; }
.facturacion-datos { flex: 1 1 400px; min-width: 0; border-top: 4px solid var(--kc-acento); }

.facturacion-tabla th {
    color: #6b6b6b;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.facturacion-totales {
    margin: 0;
    align-self: flex-end;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.facturacion-totales > div { display: flex; justify-content: space-between; gap: 24px; }
.facturacion-totales dt { color: #6b6b6b; font-weight: 400; }
.facturacion-totales dd { margin: 0; }
.facturacion-total { border-top: 1px solid #e6e6e6; padding-top: 10px; }
.facturacion-total dt { color: #111111; font-weight: 600; }
.facturacion-total dd { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; font-size: 30px; color: #111111; }

.facturacion-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
    font-size: 15px;
    color: #262626;
}

.facturacion-campo .form-control,
.facturacion-campo .form-select {
    font-weight: 400;
    min-height: 50px;
}

.facturacion-ayuda {
    font-weight: 400;
    font-size: 14px;
    color: #6b6b6b;
}

.facturacion-campo .validation-message {
    font-weight: 500;
    font-size: 14px;
    color: #b42318;
}

.facturacion-revision,
.facturacion-acuse {
    margin: 0;
    background: #f7f7f7;
    border-radius: 14px;
    padding: 20px;
}

.facturacion-revision { display: flex; flex-direction: column; gap: 12px; }
.facturacion-revision > div { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.facturacion-acuse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; border-radius: 16px; padding: 24px; }

.facturacion-revision dt,
.facturacion-acuse dt { color: #6b6b6b; font-weight: 400; font-size: 14px; }

.facturacion-revision dd,
.facturacion-acuse dd { margin: 4px 0 0; font-weight: 600; color: #111111; word-break: break-word; }

@media (max-width: 575.98px) {
    .facturacion-cuerpo { padding-block: 24px 32px; }
    .facturacion-tarjeta,
    .facturacion-tarjeta-mediana { padding: 20px 18px; border-radius: 16px; }
    .facturacion-acuse { grid-template-columns: minmax(0, 1fr); }
}

/* La confirmación de la factura emitida (work item 807). */
.facturacion-tarjeta-ancha { max-width: 860px; margin-inline: auto; border-radius: 24px; padding: 48px; gap: 28px; }

.facturacion-insignia {
    align-self: flex-start;
    background: #fdeee4;
    color: #8f3d0b;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
}

.facturacion-emitida {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 24px;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 24px;
}

.facturacion-emitida dt { color: #6b6b6b; font-weight: 400; font-size: 14px; }
.facturacion-emitida dd { margin: 4px 0 0; font-weight: 600; color: #111111; }
.facturacion-emitida-completa { grid-column: span 3; }
.facturacion-emitida-doble { grid-column: span 2; }

.facturacion-reenvio {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #e6e6e6;
    padding-top: 24px;
}

@media (max-width: 575.98px) {
    .facturacion-tarjeta-ancha { padding: 20px 18px; border-radius: 16px; }
    .facturacion-emitida { grid-template-columns: minmax(0, 1fr); }
    .facturacion-emitida-completa,
    .facturacion-emitida-doble { grid-column: auto; }
}

/* El motivo del rechazo del SAT en el acuse (work item 806). */
.facturacion-motivo {
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 14px;
    padding: 16px 20px;
    color: #7a271a;
    word-break: break-word;
}

.facturacion-motivo-titulo {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    color: #b42318;
}

/* El escáner del QR del ticket en la entrada de facturación (work item 851). */
.facturacion-escaner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.facturacion-visor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.facturacion-visor[hidden],
.facturacion-escaner [hidden] {
    display: none !important;
}

.facturacion-visor video {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #111111;
    border-radius: 16px;
}

/* --- Las páginas del sitio (work items 808 y 809) -------------------------
   Del prototipo del 814. Los tamaños de los títulos bajan con clamp() en el
   celular: un 84 px de escritorio en 360 px de ancho parte cada palabra. */

.sitio-ceja {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sitio-bloque {
    padding-block: 96px;
}

.sitio-titulo-seccion {
    margin: 0;
    font-weight: 700;
    font-size: clamp(38px, 6vw, 56px);
    line-height: 1;
    color: #111111;
    max-width: 720px;
}

.sitio-titulo-mediano {
    font-size: clamp(34px, 5vw, 48px);
}

.sitio-titulo-pagina {
    margin: 0;
    font-weight: 700;
    font-size: clamp(44px, 7vw, 72px);
    line-height: 0.95;
}

.btn.sitio-boton-grande {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 17px;
    padding: 14px 26px;
    min-height: 48px;
    border-radius: 12px;
}

/* Hero del inicio */
.sitio-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 56px;
    padding-block: 88px 104px;
}

.sitio-hero-texto {
    flex: 1 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sitio-hero-titulo {
    margin: 0;
    font-weight: 700;
    font-size: clamp(48px, 8vw, 84px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.sitio-hero-lema {
    margin: 0;
    font-size: clamp(18px, 2.4vw, 21px);
    line-height: 1.5;
    color: #c4c4c4;
    max-width: 560px;
}

.sitio-tiendas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 8px;
}

.sitio-tienda {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sitio-tienda-boton {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    color: #111111;
    text-decoration: none;
    padding: 10px 22px 10px 18px;
    border-radius: 14px;
    min-height: 60px;
}

.sitio-tienda-boton:hover,
.sitio-tienda-boton:focus-visible {
    color: #111111;
    background: #f3f3f3;
}

.sitio-tienda-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.sitio-tienda-texto > span:first-child {
    font-size: 12px;
    color: #555555;
}

.sitio-tienda-texto > span:last-child {
    font-size: 21px;
    font-weight: 600;
}

.sitio-tienda-version {
    font-size: 14px;
    color: #9a9a9a;
    padding-left: 4px;
}

.sitio-hero-video {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 17px;
    padding-block: 10px;
}

.sitio-hero-video:hover,
.sitio-hero-video:focus-visible {
    color: var(--kc-acento);
}

.sitio-hero-video-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 1.5px solid var(--kc-acento);
    color: var(--kc-acento);
}

.sitio-hero-telefono {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.sitio-telefono {
    width: 300px;
    max-width: 100%;
    aspect-ratio: 300 / 612;
    border-radius: 48px;
    background: #1f1f1f;
    border: 1px solid #3a3a3a;
    padding: 12px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

.sitio-telefono img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 38px;
}

/* Por qué comprar */
.sitio-razones {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-block: 96px;
}

.sitio-razones-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sitio-razones-lista li {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    font-size: 19px;
    line-height: 1.5;
    color: #262626;
}

.sitio-razones-lista svg {
    flex: none;
    color: var(--bs-primary);
}

.sitio-razones-lista span {
    padding-top: 8px;
}

/* La entrada a facturación del inicio */
.sitio-facturacion {
    border: 1px solid #e6e6e6;
    border-radius: 24px;
    padding: 48px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px;
}

.sitio-facturacion-texto {
    flex: 1 1 460px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sitio-facturacion-texto p {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
}

.sitio-facturacion-ticket {
    flex: 0 1 280px;
    display: flex;
    justify-content: center;
}

.sitio-ticket {
    width: 240px;
    background: #f7f7f7;
    border-radius: 6px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    transform: rotate(-3deg);
    box-shadow: 0 18px 40px rgba(17, 17, 17, 0.12);
}

.sitio-ticket img {
    width: 100%;
    height: auto;
}

.sitio-ticket-corte {
    width: 100%;
    border-top: 1px dashed #bdbdbd;
}

.sitio-ticket-renglon {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #6b6b6b;
}

.sitio-ticket-pie {
    font-size: 12px;
    color: #6b6b6b;
}

/* La banda de YouTube */
.sitio-banda-oscura {
    background: #1a1a1a;
}

.sitio-banda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-block: 72px;
}

.sitio-banda-texto {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sitio-banda-texto p {
    margin: 0;
    font-size: 19px;
    line-height: 1.5;
    color: #c4c4c4;
}

/* Acerca de */
.sitio-encabezado-pagina {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-block: 80px 88px;
}

.sitio-encabezado-pagina .sitio-titulo-pagina {
    color: #ffffff;
}

.sitio-encabezado-pagina p {
    margin: 0;
    font-size: clamp(18px, 2.4vw, 21px);
    line-height: 1.55;
    color: #c4c4c4;
    max-width: 780px;
}

.sitio-mision {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding-block: 88px 0;
}

.sitio-mision-columna {
    flex: 1 1 460px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 3px solid #111111;
    padding-top: 28px;
}

.sitio-mision-acento {
    border-top-color: var(--kc-acento);
}

.sitio-mision-columna h2 {
    margin: 0;
    font-weight: 700;
    font-size: 40px;
    color: #111111;
}

.sitio-mision-columna p {
    margin: 0;
    font-size: 19px;
    line-height: 1.65;
}

/* Los textos legales */
.sitio-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
    align-items: flex-start;
    padding-block: 64px 96px;
}

.sitio-legal-indice {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sitio-legal-indice-titulo {
    color: #6b6b6b;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.sitio-legal-liga {
    color: #404040;
    text-decoration: none;
    padding: 12px 16px;
    border-left: 3px solid transparent;
}

.sitio-legal-liga:hover,
.sitio-legal-liga:focus-visible {
    color: #111111;
}

.sitio-legal-liga.activa {
    color: #111111;
    font-weight: 600;
    border-left-color: var(--kc-acento);
    background: #f7f7f7;
    border-radius: 0 10px 10px 0;
}

.sitio-legal-texto {
    flex: 999 1 640px;
    min-width: 0;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.sitio-legal-texto .sitio-titulo-pagina {
    font-size: clamp(40px, 6vw, 60px);
    color: #111111;
}

.sitio-legal-vigencia {
    font-size: 15px;
    color: #6b6b6b;
}

.sitio-legal-cuerpo {
    font-size: 18px;
    line-height: 1.75;
    color: #262626;
    overflow-wrap: anywhere;
}

.sitio-legal-cuerpo p,
.sitio-legal-cuerpo ul,
.sitio-legal-cuerpo ol {
    margin: 0 0 22px;
}

@media (max-width: 575.98px) {
    .sitio-bloque,
    .sitio-razones {
        padding-block: 56px;
    }

    .sitio-hero {
        gap: 40px;
        padding-block: 48px 64px;
    }

    .sitio-facturacion {
        padding: 24px 20px;
        gap: 32px;
    }

    .sitio-encabezado-pagina {
        padding-block: 48px 56px;
    }

    .sitio-mision {
        padding-block: 56px 0;
    }

    .sitio-legal {
        gap: 32px;
        padding-block: 32px 56px;
    }

    .sitio-legal-cuerpo {
        font-size: 17px;
    }
}

/* --- Contacto (work item 810) ----------------------------------------------
   Del prototipo del 814: el formulario en una tarjeta blanca a la izquierda y
   los otros canales a la derecha; en el celular se apilan. Los campos reusan
   .facturacion-campo, que es el mismo control con su ayuda y su error. */

.contacto-cuerpo {
    padding-block: 72px 96px;
}

.contacto-columnas {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}

.contacto-tarjeta {
    flex: 999 1 560px;
    min-width: 0;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.contacto-formulario {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.contacto-renglon {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.contacto-renglon > .facturacion-campo {
    flex: 1 1 260px;
    min-width: 0;
}

.contacto-envio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.contacto-envio p {
    margin: 0;
    font-size: 14px;
    color: #6b6b6b;
    max-width: 420px;
}

.contacto-enviado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-block: 24px;
    color: var(--bs-primary);
}

.contacto-enviado h2 {
    margin: 0;
    font-weight: 700;
    font-size: 36px;
    color: #111111;
}

.contacto-enviado p {
    margin: 0;
    font-size: 18px;
    color: #404040;
}

/* El honeypot: fuera de la vista sin display:none, que algunos robots saltan. */
.contacto-trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contacto-canales {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contacto-canal {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #ffffff;
    color: #111111;
    text-decoration: none;
    border-radius: 20px;
    padding: 28px;
}

.contacto-canal:hover,
.contacto-canal:focus-visible {
    color: #111111;
    box-shadow: 0 0 0 2px var(--kc-acento);
}

.contacto-canal-oscuro,
.contacto-canal-oscuro:hover,
.contacto-canal-oscuro:focus-visible {
    background: var(--kc-oscuro);
    color: #ffffff;
}

.contacto-canal-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 26px;
    border: 1.5px solid var(--bs-primary);
    color: var(--bs-primary);
    flex: none;
}

.contacto-canal-oscuro .contacto-canal-icono {
    border: none;
    background: var(--kc-acento);
    color: #111111;
}

.contacto-canal-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.contacto-canal-texto > span:first-child {
    font-weight: 600;
    font-size: 19px;
}

.contacto-canal-texto > span:last-child {
    color: #6b6b6b;
    font-size: 16px;
}

.contacto-canal-oscuro .contacto-canal-texto > span:last-child {
    color: #c4c4c4;
}

@media (max-width: 575.98px) {
    .contacto-cuerpo {
        padding-block: 40px 64px;
    }

    .contacto-tarjeta {
        padding: 24px;
    }
}