/* ==========================================================
 * TEMA ORDENA — "Azulejo"
 * Superficie de marketing de Ordena Compralink (/restaurantes).
 * ==========================================================
 * Se carga SOLO en /restaurantes y todo cuelga de `body.lp-theme-ordena`,
 * la clase que marketing/layout.blade.php pone en esa ruta. Ni / ni
 * /negocios cargan este archivo, asi que no hay forma de que un cambio
 * de aqui se filtre al tema H2U.
 *
 * La paleta es la del producto — Talavera, la misma que corre dentro de
 * ordena.compralink.app — no una paleta de marketing inventada aparte:
 *   cobalto  = estructura y superficies profundas
 *   coral    = la accion (todo CTA primario)
 *   verde    = lo confirmado, lo cobrado, lo que cuadra
 *   magenta  = lo que acaba de entrar, lo destacado
 *   ambar    = en curso, en camino
 * Un solo acento por bloque, con una excepcion declarada: la reticula de
 * funciones es policroma a proposito — ahi el vidriado distinto por pieza ES
 * el azulejo. El cobalto no cuenta como acento en ningun caso: es el muro.
 *
 * El azulejo (la retícula de talavera) tiene tres intensidades y ninguna
 * es decoracion suelta: profunda sobre cobalto, susurro sobre porcelana,
 * y la cenefa como separador entre secciones.
 * ========================================================== */

/* ------------------------------------------------------- 0 · TIPOGRAFIA */
/*
 * Auto-alojadas, no desde fonts.googleapis.com.
 *
 * Con el CDN de Google el camino critico era: HTML -> CSS de Google (DNS +
 * TLS a un tercero) -> recien ahi se descubren las URLs de los woff2 -> DNS
 * + TLS a un SEGUNDO tercero (gstatic) -> descarga. Dos handshakes y una
 * dependencia en serie antes de que empiece a bajar la primera letra, y este
 * servidor habla HTTP/1.1, asi que no hay multiplexacion que lo disimule.
 *
 * Sirviendolas desde aqui, el @font-face viaja dentro de esta misma hoja y
 * los archivos salen de una conexion que ya esta abierta.
 *
 * ⚠️ En bytes esto NO gana: los subsets de Google pesan ~55 KB y estos ~62 KB.
 * Lo que gana es latencia — dos origenes menos y un round trip menos en serie.
 * Si alguna vez el sitio pasa a HTTP/2 conviene volver a medirlo.
 *
 * Los cinco pesos de Hind Siliguri son el subset latin que ya usa la app
 * (provider-app/static/fonts). Solo latin: el subset bengali es la mayor parte
 * de la familia y aqui no se usa. Licencia SIL OFL 1.1 las dos.
 */
@font-face {
	font-family: 'Hind Siliguri';
	font-style: normal; font-weight: 300;
	font-display: swap;
	src: url('/fonts/hind-siliguri-latin-300.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Hind Siliguri';
	font-style: normal; font-weight: 400;
	font-display: swap;
	src: url('/fonts/hind-siliguri-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Hind Siliguri';
	font-style: normal; font-weight: 500;
	font-display: swap;
	src: url('/fonts/hind-siliguri-latin-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Hind Siliguri';
	font-style: normal; font-weight: 600;
	font-display: swap;
	src: url('/fonts/hind-siliguri-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Hind Siliguri';
	font-style: normal; font-weight: 700;
	font-display: swap;
	src: url('/fonts/hind-siliguri-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Instrument Serif';
	font-style: italic; font-weight: 400;
	font-display: swap;
	src: url('/fonts/instrument-serif-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ------------------------------------------------ 0 · CHROME COMPARTIDO */
/*
 * Reset, contenedor, barra, menu movil, pie y scroll-reveal, copiados VERBATIM
 * de landing.css. No es duplicacion por comodidad: /restaurantes usaba 19 de
 * las 128 clases `.lp-*` de ese archivo y cargaba las 128 igual — 55 KB que
 * bloqueaban el render para usar 6.
 *
 * Con esto la ruta carga UN solo CSS (este) en vez de tres, y no ve ni la
 * paleta Caja Fuerte ni el tema H2U, que son de / y /negocios.
 *
 * ⚠️ Estas reglas son un espejo. Si tocas la barra, el pie o el menu movil en
 * landing.css, hay que reflejarlo aqui: no hay nada que lo haga automatico y
 * el sintoma es un pie distinto entre /negocios y /restaurantes.
 *
 * Va ANTES del bloque de tokens a proposito: `body.lp-body` y
 * `body.lp-theme-ordena` tienen la misma especificidad y las dos pintan color
 * y fondo, asi que decide el orden de aparicion — el tema tiene que ir despues.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.lp-body {
    font-family: var(--lp-font-body);
    color: var(--lp-gray-900);
    background: var(--lp-white);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
.lp-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.lp-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 0.8rem 0;
    background: var(--lp-glass-bg);
    backdrop-filter: blur(var(--lp-glass-blur));
    -webkit-backdrop-filter: blur(var(--lp-glass-blur));
    border-bottom: 1px solid var(--lp-glass-border);
    transition: box-shadow var(--lp-transition-base);
}
.lp-header.scrolled {
    box-shadow: 0 4px 30px rgba(15,23,42,0.08);
}
.lp-header-inner {
    display: flex; align-items: center; justify-content: space-between;
}
.lp-logo { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.lp-logo picture { display: block; }
.lp-logo img { height: 32px; width: auto; }
.lp-logo-text {
    font-family: var(--lp-font-heading); font-weight: 700;
    font-size: 1.15rem; color: var(--lp-gray-900);
}
.lp-nav { display: flex; align-items: center; gap: 2rem; }
.lp-nav a {
    font-size: 0.9rem; font-weight: 500; color: var(--lp-gray-600);
    transition: color var(--lp-transition-fast);
    position: relative;
}
.lp-nav a:hover { color: var(--lp-primary); }
.lp-nav-cta {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 1.4rem; border-radius: var(--lp-radius-full);
    background: var(--lp-gold); color: var(--lp-gold-ink) !important;
    font-weight: 700; font-size: 0.88rem;
    transition: all var(--lp-transition-fast);
    box-shadow: 0 2px 12px var(--lp-gold-glow);
}
.lp-nav-cta:hover {
    background: var(--lp-gold-soft);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px var(--lp-gold-glow);
}
.lp-mobile-toggle {
    display: none; width: 44px; height: 44px;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.lp-mobile-toggle span {
    width: 22px; height: 2px; background: var(--lp-gray-700);
    border-radius: 2px; transition: all var(--lp-transition-fast);
}
.lp-mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translateY(5px); }
.lp-mobile-toggle.active span:nth-child(2) { opacity: 0; }
.lp-mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }
.lp-footer {
    background: var(--lp-gray-900); color: var(--lp-gray-400);
    padding: 4rem 0 2rem; position: relative;
}
.lp-footer::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--lp-primary), var(--lp-secondary), transparent);
}
.lp-footer-grid {
    /* Cinco columnas desde que existe /guias: marca + Productos + Aprende +
       Empresa + Acceso. Con las cuatro de antes, la quinta caia sola a un
       segundo renglon. */
    display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.25rem;
    margin-bottom: 3rem;
}
.lp-footer-brand p {
    font-size: 0.9rem; line-height: 1.65; margin-top: 1rem;
    color: var(--lp-gray-400); max-width: 300px;
}
.lp-footer-col h2 {
    font-family: var(--lp-font-heading); font-weight: 700;
    font-size: 0.95rem; color: var(--lp-white); margin-bottom: 1.2rem;
}
.lp-footer-col a {
    display: block; padding: 0.3rem 0;
    font-size: 0.88rem; color: var(--lp-gray-400);
    transition: color var(--lp-transition-fast);
}
.lp-footer-col a:hover { color: var(--lp-white); }
.lp-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 2rem;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.82rem;
}
.lp-footer-logo { display: flex; align-items: center; gap: 0.5rem; }
.lp-footer-logo img { height: 68px; filter: brightness(0) invert(1); }
.lp-reveal {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-reveal.visible {
    opacity: 1; transform: translateY(0);
}
.lp-reveal-delay-1 { transition-delay: 0.1s; }
.lp-reveal-delay-2 { transition-delay: 0.2s; }
.lp-reveal-delay-3 { transition-delay: 0.3s; }
.lp-reveal-delay-4 { transition-delay: 0.4s; }
.lp-mobile-menu {
    display: none; position: fixed; inset: 0; z-index: 99;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--lp-transition-base);
}
.lp-mobile-menu.open { opacity: 1; pointer-events: all; }
.lp-mobile-menu-inner {
    position: absolute; top: 0; right: 0;
    width: 280px; height: 100%;
    background: var(--lp-white);
    padding: 5rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform var(--lp-transition-base);
    box-shadow: -10px 0 40px rgba(0,0,0,0.1);
}
.lp-mobile-menu.open .lp-mobile-menu-inner { transform: translateX(0); }
.lp-mobile-menu-inner a {
    display: block; padding: 0.8rem 0;
    min-height: 44px;
    font-size: 1.05rem; font-weight: 500;
    color: var(--lp-gray-700); border-bottom: 1px solid var(--lp-gray-100);
}
.lp-mobile-menu-inner .lp-nav-cta {
    margin-top: 1.5rem; text-align: center; justify-content: center;
    width: 100%; display: flex;
}
@media (max-width: 1024px) {
    .lp-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
    .lp-nav { display: none; }
    .lp-mobile-toggle { display: flex; }
    .lp-mobile-menu { display: block; }
    .lp-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .lp-footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}
@media (max-width: 480px) {
    .lp-container { padding: 0 1rem; }
}

/* ---------------------------------------------------------- 1 · TOKENS */

body.lp-theme-ordena {
    /* Paleta Talavera cruda (mismos hex que provider-app/src/app.css) */
    --ord-primary: #1e3a8a;
    --ord-primary-deep: #142766;
    --ord-primary-soft: #dde5f5;
    --ord-accent: #e2553a;
    --ord-accent-deep: #b53c24;
    --ord-accent-soft: #fceae3;
    --ord-success: #00963d;
    --ord-success-deep: #006e2c;
    --ord-success-soft: #d9efde;
    --ord-magenta: #e4007c;
    --ord-magenta-deep: #b0005f;
    --ord-magenta-soft: #fbddec;
    --ord-warning: #d89d2d;
    --ord-warning-deep: #8c6618;
    --ord-warning-soft: #f8eed8;
    --ord-error: #c03a2e;

    /* Tinta accesible. Sobre blanco el coral da 3.75:1, el verde 3.87:1 y el
       ambar 2.39:1: los tres reprueban WCAG 1.4.3 en cuanto son texto pequeno.
       Las variantes -deep de arriba si pasan (5.8 / 6.4 / 5.2), asi que no hay
       que inventar colores — hay que usar los que ya estaban. El tono vivo
       sigue siendo el correcto para rellenos, filetes e iconos, que se rigen
       por 1.4.11 y su piso es 3:1.
       Regla: si va en `color:`, va la variante -deep. Si va en `background:`
       o en un borde, va el tono vivo. */

    --ord-ink: #0f1f3d;
    --ord-mute: #5c6a82;
    --ord-line: #dce3f0;
    --ord-line-strong: #b5c3dc;
    --ord-porcelana: #f4f6fa;

    /* La sombra cinematica de Talavera, verbatim del SKILL. */
    --ord-shadow: 0 1px 2px rgba(15,31,61,0.04), 0 8px 24px -16px rgba(15,31,61,0.18);
    --ord-shadow-lift: 0 2px 4px rgba(15,31,61,0.05), 0 22px 48px -24px rgba(15,31,61,0.34);

    /* Puente al chrome compartido (header, footer, menu movil) que ya
       lee tokens --lp-*: reasignarlos es mas barato y menos fragil que
       reescribir sus reglas. */
    --lp-primary: #1e3a8a;
    --lp-primary-light: #2a4ba0;
    --lp-primary-dark: #142766;
    --lp-primary-glow: rgba(30,58,138,0.28);
    --lp-secondary: #e2553a;
    --lp-secondary-light: #ed6447;
    --lp-accent: #e2553a;
    --lp-gold: #e2553a;              /* el CTA de la barra es coral, no oro */
    --lp-gold-dark: #b53c24;
    --lp-gold-soft: #ed6447;
    --lp-gold-tint: #fceae3;
    --lp-gold-glow: rgba(226,85,58,0.40);
    --lp-gold-ink: #ffffff;
    --lp-success: #00963d;

    --lp-white: #ffffff;
    --lp-off-white: #f4f6fa;
    --lp-gray-50: #f4f6fa;
    --lp-gray-100: #e5eaf2;
    --lp-gray-200: #dce3f0;
    --lp-gray-300: #b5c3dc;
    --lp-gray-400: #8e9bb3;
    --lp-gray-500: #5c6a82;
    --lp-gray-600: #46536b;
    --lp-gray-700: #2b3a5c;
    --lp-gray-800: #1a2947;
    --lp-gray-900: #0f1f3d;
    --lp-black: #0a1631;

    --lp-font-heading: 'Hind Siliguri', system-ui, sans-serif;
    --lp-font-body: 'Hind Siliguri', system-ui, -apple-system, sans-serif;
    --lp-font-mono: 'Hind Siliguri', system-ui, sans-serif;
    --ord-font-editorial: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    /* Pila condensada del sistema para cifras: a 390px una cifra de 40px
       solo cabe si es estrecha. Es la misma de --talavera-num. */
    --ord-font-num: 'Roboto Condensed', 'Avenir Next Condensed', 'Arial Narrow', 'Hind Siliguri', sans-serif;

    --lp-radius-sm: 8px;
    --lp-radius-md: 12px;
    --lp-radius-lg: 16px;
    --lp-radius-xl: 22px;
    --lp-radius-full: 9999px;

    --lp-shadow-sm: 0 1px 2px rgba(15,31,61,0.04), 0 8px 24px -16px rgba(15,31,61,0.18);
    --lp-shadow-md: 0 2px 4px rgba(15,31,61,0.05), 0 22px 48px -24px rgba(15,31,61,0.34);
    --lp-shadow-lg: 0 30px 70px -32px rgba(15,31,61,0.45);

    --lp-glass-bg: rgba(255,255,255,0.86);
    --lp-glass-border: rgba(15,31,61,0.08);
    --lp-glass-blur: 14px;

    --lp-transition-fast: 0.18s cubic-bezier(0.4,0,0.2,1);
    --lp-transition-base: 0.24s cubic-bezier(0.4,0,0.2,1);
    --lp-transition-slow: 0.7s cubic-bezier(0.22,1,0.36,1);

    --lp-section-py: 6rem;

    color: var(--ord-ink);
    background: #ffffff;
    font-family: var(--lp-font-body);
    line-height: 1.68;
}

body.lp-theme-ordena h1,
body.lp-theme-ordena h2,
body.lp-theme-ordena h3,
body.lp-theme-ordena h4 {
    font-family: var(--lp-font-heading);
    letter-spacing: -0.025em;
    text-wrap: balance;
}

/* Hind Siliguri se acaba en 700: pedirle 800/900 hace que el navegador
   sintetice el peso y a 60px eso se emborrona. Ninguna regla de este
   archivo pasa de 700. */
body.lp-theme-ordena strong,
body.lp-theme-ordena b { font-weight: 600; }

/* ---------------------------------------------------- 2 · EL AZULEJO */

/* Profundo: el muro de talavera. Dos retículas de circunferencias
   desfasadas media celda mas la trama diagonal — es el mismo dibujo que
   un azulejo de 4 pulgadas, a escala de pantalla. */
.ord-tile-deep {
    background-color: var(--ord-primary-deep);
    background-image:
        radial-gradient(circle at 0 0, transparent 10px, rgba(255,255,255,0.055) 10px, rgba(255,255,255,0.055) 12px, transparent 12px),
        radial-gradient(circle at 28px 28px, transparent 10px, rgba(255,255,255,0.055) 10px, rgba(255,255,255,0.055) 12px, transparent 12px),
        linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.035) 75%);
    background-size: 28px 28px;
}

/* Susurro: el punteado sobre porcelana. Va en ::before y no en el fondo
   del elemento para poder bajarle la opacidad sin tocar el contenido. */
.ord-tile-soft { position: relative; }
.ord-tile-soft::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
    opacity: 0.75;
    background-image: radial-gradient(circle at 14px 14px, var(--ord-primary-soft) 1.6px, transparent 1.6px);
    background-size: 28px 28px;
    /* Se desvanece hacia abajo para que la seccion no termine en un corte
       seco de puntitos. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
.ord-tile-soft > * { position: relative; z-index: 1; }

/* La cenefa: la franja de rombos que en una cocina mexicana separa el
   azulejo del muro. Aqui separa secciones. Cuatro vidriados en la banda,
   uno por color del sistema. */
.ord-cenefa {
    height: 14px;
    background-color: var(--ord-primary);
    background-image:
        repeating-linear-gradient(45deg,  var(--ord-accent)  0 7px, transparent 7px 14px),
        repeating-linear-gradient(-45deg, var(--ord-success) 0 7px, transparent 7px 14px),
        repeating-linear-gradient(90deg,  var(--ord-magenta) 0 2px, transparent 2px 28px);
    background-size: 14px 14px, 14px 14px, 28px 100%;
    opacity: 0.92;
}
.ord-cenefa--thin { height: 8px; background-size: 8px 8px, 8px 8px, 16px 100%; }

/* --------------------------------------------------- 3 · TIPOGRAFIA */

.ord-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ord-mute);
}
.ord-eyebrow--on-deep { color: rgba(255,255,255,0.62); }

/* La palabra en cursiva del titular. Instrument Serif tiene cursiva de
   verdad; Hind Siliguri no tiene ninguna y el navegador se la inventa
   inclinando la romana — a 70px se nota y se ve mal. El producto usa esa
   cursiva sintetica a 34px, donde pasa; una landing pinta a 70px. */
.ord-em {
    font-family: var(--ord-font-editorial);
    font-style: italic; font-weight: 400;
    letter-spacing: -0.01em;
    font-size: 1.08em; line-height: 0.9;
    color: var(--ord-accent);
}
.ord-em--magenta { color: var(--ord-magenta); }
.ord-em--verde { color: var(--ord-success); }
.ord-em--on-deep { color: #ffb9a6; }

.ord-num {
    font-family: var(--ord-font-num);
    font-weight: 700; font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.ord-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.28rem 0.7rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; line-height: 1.4;
    background: var(--ord-primary-soft); color: var(--ord-primary);
}
.ord-chip--coral   { background: var(--ord-accent-soft);  color: var(--ord-accent-deep); }
.ord-chip--verde   { background: var(--ord-success-soft); color: var(--ord-success-deep); }
.ord-chip--magenta { background: var(--ord-magenta-soft); color: var(--ord-magenta-deep); }
.ord-chip--ambar   { background: var(--ord-warning-soft); color: var(--ord-warning-deep); }

/* ------------------------------------------------------- 4 · CHROME */

/* Sobre el heroe la barra es transparente y el logo va invertido; al
   bajar entra el vidrio y el logo vuelve a su tinta. Sin `.scrolled` el
   wordmark es tinta oscura sobre cobalto y desaparece. */
body.lp-theme-ordena .lp-header {
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 0;
    transition: background var(--lp-transition-fast), box-shadow var(--lp-transition-fast);
}
body.lp-theme-ordena .lp-header.scrolled {
    background: var(--lp-glass-bg);
    backdrop-filter: blur(var(--lp-glass-blur));
    -webkit-backdrop-filter: blur(var(--lp-glass-blur));
    box-shadow: inset 0 -1px 0 var(--lp-glass-border), var(--ord-shadow);
}
body.lp-theme-ordena .lp-header:not(.scrolled) .lp-logo img { filter: brightness(0) invert(1); }
body.lp-theme-ordena .lp-header:not(.scrolled) .lp-nav a { color: rgba(255,255,255,0.74); }
body.lp-theme-ordena .lp-header:not(.scrolled) .lp-nav a:hover { color: #fff; }
body.lp-theme-ordena .lp-header:not(.scrolled) .lp-nav a[aria-current="page"] { color: #fff; font-weight: 600; }
body.lp-theme-ordena .lp-header:not(.scrolled) .lp-mobile-toggle span { background: #fff; }
body.lp-theme-ordena .lp-nav a[aria-current="page"] { color: var(--ord-primary); font-weight: 600; }
body.lp-theme-ordena .lp-nav a:hover { color: var(--ord-primary); }
body.lp-theme-ordena .lp-nav-cta,
body.lp-theme-ordena .lp-header:not(.scrolled) .lp-nav-cta {
    border-radius: 10px;
    padding: 0.6rem 1.15rem;
    background: var(--ord-accent-deep); color: #fff !important;
    font-weight: 600;
    box-shadow: 0 2px 0 #8a2d1a, 0 12px 24px -14px rgba(138,45,26,0.7);
}
body.lp-theme-ordena .lp-nav-cta:hover {
    background: #c9462c; transform: translateY(-1px);
    box-shadow: 0 2px 0 #8a2d1a, 0 16px 30px -14px rgba(138,45,26,0.75);
}
body.lp-theme-ordena .lp-nav-cta:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 #8a2d1a, inset 0 3px 6px rgba(0,0,0,0.18);
}

body.lp-theme-ordena .lp-mobile-menu { background: rgba(15,31,61,0.5); }
body.lp-theme-ordena .lp-mobile-menu-inner { background: #fff; }
body.lp-theme-ordena .lp-mobile-menu-inner a { color: var(--ord-ink); border-bottom-color: var(--ord-line); }

body.lp-theme-ordena .lp-footer {
    background-color: var(--ord-primary-deep);
    background-image:
        radial-gradient(circle at 0 0, transparent 10px, rgba(255,255,255,0.045) 10px, rgba(255,255,255,0.045) 12px, transparent 12px),
        radial-gradient(circle at 28px 28px, transparent 10px, rgba(255,255,255,0.045) 10px, rgba(255,255,255,0.045) 12px, transparent 12px);
    background-size: 28px 28px;
}
body.lp-theme-ordena .lp-footer::before { display: none; }
body.lp-theme-ordena .lp-footer-brand p,
body.lp-theme-ordena .lp-footer-col a { color: rgba(255,255,255,0.66); }
body.lp-theme-ordena .lp-footer-col a:hover { color: #fff; }
body.lp-theme-ordena .lp-footer-col h2 { color: #fff; }
body.lp-theme-ordena .lp-footer-bottom { border-top-color: rgba(255,255,255,0.12); }

/* --------------------------------------------------- 5 · ESTRUCTURA */

.ord-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.ord-section { padding: 5.5rem 0; position: relative; }
.ord-section--tight { padding: 4rem 0; }
.ord-section--porcelana { background: var(--ord-porcelana); }

.ord-head { max-width: 720px; margin-bottom: 3rem; }
.ord-head h2 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 700; line-height: 1.06; margin-top: 0.8rem;
}
.ord-head p {
    font-size: 1.08rem; color: var(--ord-mute);
    margin-top: 1rem; max-width: 58ch;
}
.ord-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.ord-head--center p { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------- 6 · CTAs */

/* El sello: se hunde al presionar. El borde inferior solido es la pared
   del sello, y al hacer :active desaparece y el boton baja esos 2px. */
.ord-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.95rem 1.6rem; border-radius: 12px;
    font-family: var(--lp-font-heading);
    font-size: 1rem; font-weight: 600; line-height: 1.2;
    border: 1px solid transparent; cursor: pointer;
    transition: transform 90ms cubic-bezier(0.4,0,0.2,1), box-shadow 90ms cubic-bezier(0.4,0,0.2,1), background-color 160ms ease;
}
.ord-btn svg { flex-shrink: 0; }
/* El relleno baja a coral profundo: blanco sobre el coral vivo da 3.75:1 y
   el texto de un boton de 16px/600 necesita 4.5. #b53c24 da 5.77 y sigue
   siendo guayabo — el vivo se conserva donde es grafico: la cursiva del
   titular, los iconos, la cenefa y el marco del telefono.
   El hover ACLARA a #c9462c (4.78), que tambien pasa. */
.ord-btn--coral {
    background: var(--ord-accent-deep); color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 3px 0 #8a2d1a, 0 16px 28px -14px rgba(138,45,26,0.7);
}
.ord-btn--coral:hover { background: #c9462c; }
.ord-btn--coral:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #8a2d1a, inset 0 3px 6px rgba(0,0,0,0.2);
}
.ord-btn--cobalto {
    background: var(--ord-primary); color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 3px 0 var(--ord-primary-deep), 0 16px 28px -14px rgba(20,39,102,0.6);
}
.ord-btn--cobalto:hover { background: #2a4ba0; }
.ord-btn--cobalto:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--ord-primary-deep), inset 0 3px 6px rgba(0,0,0,0.2);
}
.ord-btn--ghost-light {
    background: rgba(255,255,255,0.06); color: #fff;
    border-color: rgba(255,255,255,0.28);
}
.ord-btn--ghost-light:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.45); }
.ord-btn--ghost {
    background: #fff; color: var(--ord-primary);
    border-color: var(--ord-line-strong);
    box-shadow: var(--ord-shadow);
}
.ord-btn--ghost:hover { border-color: var(--ord-primary); }

body.lp-theme-ordena a:focus-visible,
body.lp-theme-ordena button:focus-visible {
    outline: 2px solid var(--ord-accent); outline-offset: 3px; border-radius: 6px;
}

/* -------------------------------------------------------- 7 · HEROE */

.ord-hero {
    position: relative; overflow: hidden;
    padding: 9rem 0 5.5rem;
    color: #fff;
}
/* Sin el grano, cuatro degradados sobre cobalto bandean en pantallas de
   8 bits. Va en overlay para no aclarar el muro. */
.ord-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    pointer-events: none; opacity: 0.45; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
.ord-hero-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(42rem 32rem at 12% 0%, rgba(226,85,58,0.30), transparent 62%),
        radial-gradient(38rem 30rem at 92% 12%, rgba(228,0,124,0.22), transparent 60%),
        radial-gradient(40rem 30rem at 72% 108%, rgba(0,150,61,0.20), transparent 60%);
}
.ord-hero-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.06fr 0.94fr;
    gap: 4rem; align-items: center;
}
.ord-hero h1 {
    font-size: clamp(2.7rem, 6.2vw, 4.6rem);
    font-weight: 700; line-height: 0.98; letter-spacing: -0.035em;
    margin: 1.2rem 0 0;
}
.ord-hero-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: rgba(255,255,255,0.78);
    margin-top: 1.5rem; max-width: 34ch;
}
.ord-hero-note {
    margin-top: 1.1rem; max-width: 40ch;
    font-size: 0.98rem; color: rgba(255,255,255,0.66);
    padding-left: 1rem; border-left: 2px solid var(--ord-accent);
}
.ord-hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.ord-hero-trust {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
    margin-top: 2rem; font-size: 0.86rem; color: rgba(255,255,255,0.6);
}
.ord-hero-trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
.ord-hero-trust svg { color: var(--ord-success); flex-shrink: 0; }

.ord-hero-badge {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.4rem 0.9rem 0.4rem 0.5rem; border-radius: 999px;
    background: rgba(255,255,255,0.09);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: #fff;
}
.ord-hero-badge i {
    width: 22px; height: 22px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ord-accent); font-style: normal;
}

/* ---- La comanda: el pedido viajando, a la derecha del heroe ---- */

.ord-hero-visual { position: relative; }
.ord-comanda {
    position: relative;
    background: #fff; color: var(--ord-ink);
    border-radius: 18px;
    box-shadow: 0 40px 80px -40px rgba(5,12,33,0.85), 0 2px 0 rgba(255,255,255,0.06);
    overflow: hidden;
}
.ord-comanda-top {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--ord-line);
    background: var(--ord-porcelana);
}
.ord-comanda-mesa {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--ord-primary-soft); color: var(--ord-primary);
    font-weight: 700; font-size: 0.82rem;
}
.ord-comanda-top small { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ord-mute); }
.ord-comanda-top strong { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.ord-comanda-body { padding: 0.85rem 1.1rem 1.1rem; }

.ord-step {
    position: relative;
    display: flex; gap: 0.85rem; align-items: flex-start;
    padding: 0.7rem 0;
}
/* La linea que une los pasos: el pedido es un recorrido, no una lista. */
.ord-step:not(:last-child)::before {
    content: ''; position: absolute;
    left: 13px; top: 2.1rem; bottom: -0.35rem; width: 2px;
    background: var(--ord-line);
}
.ord-step-dot {
    position: relative; z-index: 1; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.ord-step-dot svg { width: 15px; height: 15px; }
.ord-step-body { min-width: 0; padding-top: 0.15rem; }
.ord-step-body b { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.35; }
.ord-step-body span { display: block; font-size: 0.82rem; color: var(--ord-mute); line-height: 1.45; }
.ord-step-time {
    margin-left: auto; flex-shrink: 0; padding-top: 0.3rem;
    font-family: var(--ord-font-num); font-size: 0.78rem; font-weight: 700;
    color: var(--ord-mute); font-variant-numeric: tabular-nums;
}

.ord-comanda-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.9rem 1.1rem;
    border-top: 1px dashed var(--ord-line-strong);
    background: var(--ord-success-soft);
}
.ord-comanda-foot small { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ord-success-deep); font-weight: 600; }
.ord-comanda-total { font-family: var(--ord-font-num); font-size: 1.55rem; font-weight: 700; color: var(--ord-success-deep); }

/* Los dos avisos flotantes. Absolutos sobre la comanda: la interfaz
   real avisa encima de lo que estas viendo, no en otra pantalla. */
.ord-float {
    position: absolute; z-index: 3;
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.85rem; border-radius: 12px;
    background: #fff; color: var(--ord-ink);
    box-shadow: 0 18px 38px -18px rgba(5,12,33,0.6);
    font-size: 0.8rem; line-height: 1.35;
    animation: ord-bob 6s ease-in-out infinite;
}
.ord-float small { display: block; font-size: 0.68rem; color: var(--ord-mute); }
.ord-float b { font-weight: 600; }
.ord-float i {
    width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
/* Uno arriba a la izquierda y otro abajo a la derecha: enmarcan la comanda
   en diagonal y ninguno se para encima de un dato. Cualquier posicion que
   invada la tarjeta tapa un renglon — el encabezado de la mesa o el total,
   que son justo lo que hay que leer. */
.ord-float--a { top: -3.9rem; left: -1.8rem; }
.ord-float--b { bottom: -3.9rem; right: -1.8rem; animation-delay: -3s; }
@keyframes ord-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* Entrada del heroe: una sola coreografia escalonada al cargar. El
   resto de la pagina usa .lp-reveal, que ya observa el layout. */
.ord-in { opacity: 0; transform: translateY(22px); animation: ord-enter 0.8s cubic-bezier(0.22,1,0.36,1) forwards; }
.ord-in-1 { animation-delay: 0.05s; }
.ord-in-2 { animation-delay: 0.14s; }
.ord-in-3 { animation-delay: 0.23s; }
.ord-in-4 { animation-delay: 0.32s; }
.ord-in-5 { animation-delay: 0.41s; }
@keyframes ord-enter { to { opacity: 1; transform: none; } }

/* -------------------------------------------------- 8 · LA RUTA */

.ord-ruta {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
    border: 1px solid var(--ord-line); border-radius: 16px;
    background: #fff; overflow: hidden;
    box-shadow: var(--ord-shadow);
}
.ord-ruta-paso {
    position: relative;
    padding: 1.6rem 1.15rem 1.5rem;
    border-right: 1px solid var(--ord-line);
}
.ord-ruta-paso:last-child { border-right: 0; }
/* El vidriado va arriba, como el filo esmaltado de una loseta. */
.ord-ruta-paso::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--ord-paso-color, var(--ord-primary));
}
.ord-ruta-num {
    font-family: var(--ord-font-num); font-size: 1.05rem; font-weight: 700;
    /* --ord-paso-ink, no --ord-paso-color: el filete de arriba lleva el tono
       vivo (es un grafico); la cifra es texto y necesita 4.5:1. */
    color: var(--ord-paso-ink, var(--ord-paso-color, var(--ord-primary)));
    letter-spacing: 0.04em;
}
.ord-ruta-paso h3 { font-size: 1.02rem; font-weight: 600; line-height: 1.3; margin: 0.5rem 0 0.4rem; }
.ord-ruta-paso p { font-size: 0.86rem; color: var(--ord-mute); line-height: 1.55; }

/* --------------------------------------------- 9 · BLOQUE RESPUESTA */

.ord-ficha {
    background: #fff;
    border: 1px solid var(--ord-line);
    border-left: 4px solid var(--ord-primary);
    border-radius: 14px;
    padding: 2.4rem 2.6rem;
    box-shadow: var(--ord-shadow);
    max-width: 900px;
}
.ord-ficha h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.25; margin: 0.6rem 0 1rem; }
.ord-ficha p { color: #33405c; font-size: 1.02rem; line-height: 1.78; }

/* ------------------------------------------------- 10 · FUNCIONES */

.ord-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ord-card {
    position: relative; overflow: hidden;
    background: #fff; border: 1px solid var(--ord-line);
    border-radius: 16px; padding: 1.8rem 1.6rem 1.7rem;
    box-shadow: var(--ord-shadow);
    transition: transform var(--lp-transition-base), box-shadow var(--lp-transition-base), border-color var(--lp-transition-base);
}
.ord-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ord-shadow-lift);
    border-color: var(--ord-line-strong);
}
/* Cuarto de roseta asomando en la esquina: el mismo motivo del azulejo a
   escala de tarjeta. Anillos concentricos, no una mancha — una mancha se
   lee como un degradado suelto y no como parte del sistema. */
.ord-card::after {
    content: ''; position: absolute; right: -46px; top: -46px;
    width: 132px; height: 132px; border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, var(--ord-card-tint, var(--ord-primary-soft)) 0 12px, transparent 12px),
        radial-gradient(circle at 50% 50%, transparent 0 24px, var(--ord-card-tint, var(--ord-primary-soft)) 24px 31px, transparent 31px),
        radial-gradient(circle at 50% 50%, transparent 0 45px, var(--ord-card-tint, var(--ord-primary-soft)) 45px 52px, transparent 52px);
    opacity: 0.9; transition: transform var(--lp-transition-base), opacity var(--lp-transition-base);
}
.ord-card:hover::after { transform: rotate(22deg) scale(1.1); }
.ord-card > * { position: relative; z-index: 1; }
/* La reticula estira las tarjetas a la altura de la mas alta de su fila.
   Sin esto la nota queda flotando a media tarjeta y la fila se ve rota. */
.ord-card { display: flex; flex-direction: column; }
.ord-card .ord-card-note { margin-top: auto; }
.ord-card-icon {
    width: 44px; height: 44px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; margin-bottom: 1.1rem;
    background: var(--ord-card-color, var(--ord-primary));
    box-shadow: 0 8px 18px -10px var(--ord-card-color, var(--ord-primary));
}
.ord-card h3 { font-size: 1.13rem; font-weight: 600; line-height: 1.32; margin-bottom: 0.55rem; }
.ord-card p { font-size: 0.94rem; color: var(--ord-mute); line-height: 1.62; }
.ord-card-note {
    display: block; margin-top: 0.85rem; padding-top: 0.8rem;
    border-top: 1px dashed var(--ord-line);
    font-size: 0.84rem; color: var(--ord-card-ink, var(--ord-card-color, var(--ord-primary))); font-weight: 600;
}

/* ----------------------------------------------------- 11 · ROLES */

.ord-roles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.ord-rol {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px; padding: 1.4rem 1.2rem;
    transition: background var(--lp-transition-base), border-color var(--lp-transition-base), transform var(--lp-transition-base);
}
.ord-rol:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.24); transform: translateY(-3px); }
.ord-rol-icon {
    width: 38px; height: 38px; border-radius: 11px; margin-bottom: 0.9rem;
    display: flex; align-items: center; justify-content: center; color: #fff;
    background: var(--ord-rol-color, var(--ord-accent));
}
.ord-rol h3 { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 0.4rem; }
.ord-rol p { font-size: 0.85rem; color: rgba(255,255,255,0.62); line-height: 1.55; }

/* --------------------------------------------------- 12 · DETALLES */

.ord-detalles {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3.5rem;
    border-bottom: 1px solid var(--ord-line);
}
.ord-detalle {
    padding: 1.5rem 0;
    border-top: 1px solid var(--ord-line);
}
.ord-detalle h3 {
    display: flex; align-items: baseline; gap: 0.7rem;
    font-size: 1.05rem; font-weight: 600; margin-bottom: 0.45rem;
}
.ord-detalle h3 em {
    font-family: var(--ord-font-num); font-style: normal;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em;
    /* Era --ord-line-strong (1.78:1). Un color de borde no es un color de
       texto, y estas cifras numeran la lista. */
    color: var(--ord-mute); flex-shrink: 0;
}
.ord-detalle p { font-size: 0.95rem; color: var(--ord-mute); line-height: 1.65; padding-left: 1.9rem; }

/* --------------------------------------------------- 13 · COMENSAL */

.ord-split {
    display: grid; grid-template-columns: 0.95fr 1.05fr;
    gap: 4rem; align-items: center;
}
.ord-split--flip { grid-template-columns: 1.05fr 0.95fr; }

/* El telefono del comensal. Marco solido en coral: es la unica pieza de
   la pagina que le pertenece al cliente y no al restaurante. */
.ord-phone {
    position: relative; width: 100%; max-width: 310px; margin: 0 auto;
    border-radius: 34px; padding: 10px;
    background: linear-gradient(160deg, var(--ord-accent) 0%, var(--ord-accent-deep) 100%);
    box-shadow: 0 40px 70px -34px rgba(140,44,24,0.7);
}
.ord-phone-screen {
    background: #fff; border-radius: 26px; overflow: hidden;
}
.ord-phone-head {
    padding: 1.1rem 1.1rem 0.9rem;
    background: var(--ord-accent-soft);
    border-bottom: 1px solid rgba(181,60,36,0.14);
}
.ord-phone-head strong { display: block; font-size: 1.02rem; font-weight: 600; }
.ord-phone-head small { font-size: 0.76rem; color: var(--ord-accent-deep); font-weight: 600; }
.ord-phone-body { padding: 0.85rem 1.1rem 1.1rem; }
.ord-dish {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.65rem 0; border-bottom: 1px solid var(--ord-line);
}
.ord-dish:last-of-type { border-bottom: 0; }
.ord-dish-img {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: var(--ord-dish-tint, var(--ord-porcelana));
}
.ord-dish b { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.ord-dish small { font-size: 0.76rem; color: var(--ord-mute); }
.ord-dish-price { margin-left: auto; font-family: var(--ord-font-num); font-weight: 700; font-size: 0.92rem; }
.ord-phone-cta {
    margin-top: 0.9rem; padding: 0.75rem; border-radius: 11px;
    background: var(--ord-accent-deep); color: #fff;
    text-align: center; font-size: 0.9rem; font-weight: 600;
}

.ord-list { margin-top: 1.6rem; display: grid; gap: 0.9rem; }
.ord-list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.98rem; color: #33405c; line-height: 1.6; }
.ord-list svg { flex-shrink: 0; margin-top: 0.25rem; color: var(--ord-success); }

/* ------------------------------------------------- 14 · TRASTIENDA */

.ord-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ord-strip-item {
    background: #fff; border: 1px solid var(--ord-line); border-radius: 13px;
    padding: 1.25rem 1.2rem;
}
.ord-strip-item h3 { font-size: 0.98rem; font-weight: 600; margin-bottom: 0.35rem; }
.ord-strip-item p { font-size: 0.86rem; color: var(--ord-mute); line-height: 1.55; }

/* --------------------------------------------------- 15 · PRECIO */

/* Un solo plan, un solo precio. La reticula de tres o cuatro tarjetas que usa
   Caja existe porque Caja tiene cuatro planes; aqui seria un adorno que sugiere
   una eleccion que no hay que hacer. */
.ord-precio {
    display: grid; grid-template-columns: 0.85fr 1.15fr;
    gap: 3rem; align-items: center;
    background: #fff;
    border: 1px solid var(--ord-line);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: var(--ord-shadow-lift);
}

.ord-precio-cifra { text-align: left; }
.ord-precio-monto {
    display: flex; align-items: baseline; gap: 0.35rem;
    font-family: var(--ord-font-num);
    color: var(--ord-primary);
    line-height: 1;
}
.ord-precio-monto .ord-precio-signo { font-size: 1.8rem; font-weight: 700; }
.ord-precio-monto .ord-precio-num {
    font-size: clamp(3.2rem, 7vw, 4.4rem); font-weight: 700;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.ord-precio-moneda {
    font-family: var(--lp-font-body, inherit);
    font-size: 1rem; font-weight: 600; color: var(--ord-mute);
    align-self: flex-end; padding-bottom: 0.5rem;
}
.ord-precio-periodo {
    margin-top: 0.5rem;
    font-size: 1.05rem; font-weight: 600; color: var(--ord-ink);
}
.ord-precio-equiv {
    margin-top: 0.35rem;
    font-size: 0.92rem; color: var(--ord-mute);
}
.ord-precio-acciones { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.6rem; }

.ord-precio-incluye { border-left: 1px solid var(--ord-line); padding-left: 3rem; }
.ord-precio-incluye .ord-eyebrow { display: block; margin-bottom: 1rem; }
.ord-precio-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem 1.4rem; }
.ord-precio-lista li { display: flex; gap: 0.6rem; align-items: flex-start; }
.ord-precio-lista svg { flex-shrink: 0; margin-top: 0.28rem; color: var(--ord-success-deep); }
.ord-precio-lista span { font-size: 0.95rem; line-height: 1.55; color: #33405c; }

/* Lo que NO trae. Va en la misma tarjeta y no en letra chica al pie: enterarse
   despues de contratar de que el sistema no factura es exactamente el problema
   que esta pagina deberia evitarle a alguien. */
.ord-precio-honesto {
    margin-top: 1.6rem; padding-top: 1.3rem;
    border-top: 1px dashed var(--ord-line-strong);
}
.ord-precio-honesto p {
    font-size: 0.92rem; line-height: 1.6; color: var(--ord-mute);
    display: flex; gap: 0.6rem; align-items: flex-start;
}
.ord-precio-honesto svg { flex-shrink: 0; margin-top: 0.2rem; color: var(--ord-warning-deep); }
.ord-precio-honesto a { color: var(--ord-primary); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
    .ord-precio { grid-template-columns: 1fr; gap: 2rem; padding: 1.8rem; }
    .ord-precio-incluye { border-left: 0; border-top: 1px solid var(--ord-line); padding-left: 0; padding-top: 1.8rem; }
}
@media (max-width: 560px) {
    .ord-precio-lista { grid-template-columns: 1fr; }
    .ord-precio-acciones .ord-btn { width: 100%; }
}

/* ---------------------------------------------------- 16 · CIERRE */

.ord-cierre { position: relative; overflow: hidden; padding: 5rem 0; color: #fff; }
/* Acotado por dentro del contenedor: a 1440 el space-between deja medio
   ancho de pantalla vacio entre la pregunta y los botones, y el bloque
   deja de leerse como una sola frase con su respuesta. */
.ord-cierre-inner {
    position: relative; z-index: 2;
    max-width: 1020px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 2.5rem;
}
.ord-cierre h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); font-weight: 700; line-height: 1.08; max-width: 18ch; }
.ord-cierre p { color: rgba(255,255,255,0.72); margin-top: 1rem; max-width: 46ch; font-size: 1.02rem; }
.ord-cierre-actions { display: flex; flex-direction: column; gap: 0.9rem; align-items: stretch; }
.ord-cierre-note { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: rgba(255,255,255,0.6); }
.ord-cierre-note svg { color: var(--ord-success); flex-shrink: 0; }

/* ------------------------------------------------ 17 · RESPONSIVE */

@media (max-width: 1024px) {
    .ord-hero-inner { grid-template-columns: 1fr; gap: 3.5rem; }
    .ord-hero { padding: 7.5rem 0 4rem; }
    .ord-hero-lead, .ord-hero-note { max-width: 52ch; }
    .ord-ruta { grid-template-columns: repeat(3, 1fr); }
    .ord-ruta-paso:nth-child(3) { border-right: 0; }
    .ord-ruta-paso:nth-child(-n+3) { border-bottom: 1px solid var(--ord-line); }
    .ord-grid { grid-template-columns: repeat(2, 1fr); }
    .ord-roles { grid-template-columns: repeat(3, 1fr); }
    .ord-split, .ord-split--flip { grid-template-columns: 1fr; gap: 3rem; }
    .ord-strip { grid-template-columns: repeat(2, 1fr); }
    /* Apilado, la comanda ocupaba el ancho completo y dejaba de leerse como
       un panel para parecer una tabla. Acotada y centrada conserva su forma. */
    .ord-hero-visual { max-width: 480px; margin: 0 auto; }
    /* Los avisos son un recurso de composicion de la version a dos columnas:
       colgados de una tarjeta centrada se salen por el borde izquierdo y se
       montan sobre la fila de garantias. Nada de lo que dicen se pierde —
       "pedido programado" tiene su propia tarjeta mas abajo. */
    .ord-float { display: none; }
}

@media (max-width: 768px) {
    .ord-section { padding: 4rem 0; }
    .ord-section--tight { padding: 3rem 0; }
    .ord-ficha { padding: 1.8rem 1.5rem; }
    .ord-detalles { grid-template-columns: 1fr; gap: 0; }
    .ord-cierre-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    .ord-hero { padding: 6.5rem 0 3.5rem; }
    .ord-hero-actions .ord-btn { width: 100%; }
    .ord-ruta { grid-template-columns: 1fr; }
    .ord-ruta-paso { border-right: 0; border-bottom: 1px solid var(--ord-line); }
    .ord-ruta-paso:last-child { border-bottom: 0; }
    .ord-ruta-paso:nth-child(3) { border-right: 0; }
    .ord-grid { grid-template-columns: 1fr; }
    .ord-roles { grid-template-columns: 1fr 1fr; }
    /* Son cinco: el ultimo se queda solo en media fila y la reticula se ve
       coja. Ocupando el ancho completo cierra el bloque. */
    .ord-roles > :last-child { grid-column: 1 / -1; }
    .ord-strip { grid-template-columns: 1fr; }
    .ord-comanda { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ord-float { animation: none; }
    .ord-in { opacity: 1; transform: none; animation: none; }
    .ord-card:hover { transform: none; }
    .ord-rol:hover { transform: none; }
}