/* --- Tipografía auto-hospedada -------------------------------------------
   Misma decisión que en LARSACEROS: el archivo se sirve desde el propio dominio.
   La cadena googleapis → gstatic bloquea el render cientos de ms en móvil.
   Archivo VARIABLE: 35 KB cubren de 400 a 900, subset latin. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ==========================================================================
   VIGAFORM — hoja de estilo única

   El fondo es el AZUL DE LA CASA (#16163D), medido con cuentagotas sobre
   polinmonten. Así el sitio pertenece a la casa aunque la marca sea nueva.
   El azul #24549C y el coral #E44030 salen del logo de VIGAFORM.
   Estructura y ritmo tomados de LARSACEROS: tipografía pesada en caja alta,
   botones píldora, filetes de un pixel, cifras tabulares.
   Mobile-first. Sin framework: el comprador abre esto desde la obra.
   ========================================================================== */

:root {
  --noche:   #16163D;   /* azul de la casa. Header, hero, pie. */
  --noche-2: #1D1D4E;   /* tarjetas sobre fondo oscuro */
  --noche-3: #0F0F2C;   /* cinta superior */
  --tinta:   #14171C;   /* títulos sobre blanco */
  --texto:   #34363C;
  --suave:   #6C7079;
  --azul:    #24549C;   /* azul del logo. Sobre BLANCO. */
  --azul-h:  #1B4079;
  /* El azul del logo sobre el navy da 2.6:1 y reprueba. Este aclarado da 6.1:1. */
  --azul-claro: #7FA6E8;
  --coral:   #E44030;
  /* Blanco sobre #E44030 da 4.14:1, corto de AA. Este relleno da 4.72:1 y a
     simple vista es el mismo color. Sólo como fondo de botón. */
  --coral-solido: #D63823;
  --coral-h: #B92E1B;

  --borde:   #DFDFE0;
  --gris-bg: #F5F6F8;
  --blanco:  #FFFFFF;

  --ancho:   1200px;
  --radio:   4px;
  --header-h: 92px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px; line-height: 1.65;
  color: var(--texto); background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 12px; top: 12px; z-index: 100; background: var(--blanco); padding: 10px 16px; border-radius: var(--radio); }

/* --- Tipografía ---
   La caja alta se quedó SÓLO en el h1 y en las etiquetas diminutas (eyebrow,
   h4 del pie). En h2 y h3 sobraba: con este peso, párrafos enteros en
   mayúsculas se leen como grito y cansan. El contraste ahora lo carga el peso,
   no la caja. */
h1, h2, h3, h4 { color: var(--tinta); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.6rem, 7.4vw, 5.4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.75rem, 4vw, 2.9rem); letter-spacing: -0.03em; }
h3 { font-size: 1.16rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; }

.eyebrow {
  display: block; color: var(--azul);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; margin-bottom: 14px;
}
.plomo { color: var(--suave); font-size: 1.02rem; max-width: 60ch; }

/* --- Botones --- */
.btn {
  display: inline-block; padding: 14px 30px; border-radius: 999px;
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer; border: 1.5px solid transparent;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn--solido { background: var(--coral-solido); color: var(--blanco); }
.btn--solido:hover, .btn--solido:focus-visible { background: var(--coral-h); }
.btn--linea { border-color: var(--azul); color: var(--azul); background: transparent; }
.btn--linea:hover, .btn--linea:focus-visible { background: var(--azul); color: var(--blanco); }
.btn--claro { border-color: rgba(255,255,255,.45); color: var(--blanco); }
.btn--claro:hover, .btn--claro:focus-visible { background: var(--blanco); color: var(--noche); }

/* --- Cinta superior ---
   Delgada: iconos sociales a la izquierda, correo y teléfono a la derecha.
   Los iconos se dibujan en línea, sólo los que tienen URL. */
.cinta { background: var(--noche-3); color: rgba(255,255,255,.62); font-size: .76rem; }
.cinta .contenedor { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-block: 6px; flex-wrap: wrap; }
.cinta a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.68); }
.cinta a:hover, .cinta a:focus-visible { color: var(--blanco); }
.cinta svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.cinta-redes { display: flex; align-items: center; gap: 2px; margin-left: -6px; }
.cinta-redes a { padding: 6px; color: rgba(255,255,255,.75); }
.cinta-datos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* WhatsApp es la acción de más intención de la barra: se le da el verde. */
.cinta-wa { color: #5BD07A; }
.cinta-wa:hover, .cinta-wa:focus-visible { color: #86E6A0; }
/* En móvil el correo es demasiado largo; queda el icono como enlace. */
@media (max-width: 620px) { .cinta-datos a:first-child span { display: none; } .cinta-datos { gap: 13px; } }
@media (max-width: 430px) { .cinta-datos a[href^="tel:"] span { display: none; } }

.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h); background: var(--noche);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.header .contenedor { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: block; flex: none; }
.logo-img { height: 54px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { color: rgba(255,255,255,.8); font-size: 0.92rem; font-weight: 600; letter-spacing: 0; }
.nav a:hover, .nav a:focus-visible { color: var(--blanco); }
.nav .btn { letter-spacing: .02em; padding: 11px 24px; }
/* "COTIZADOR 24/7" es bastante más largo que "Cotizar". Sin esto, en móvil el
   botón parte en dos renglones y empuja el logo fuera de la barra. Se le baja
   el tamaño y el aire, y se le prohíbe partirse. */
.nav-cta { white-space: nowrap; }
@media (max-width: 900px) { .nav .oculta-movil { display: none; } .logo-img { height: 42px; } }
@media (max-width: 700px) { .nav-cta { padding: 10px 14px; font-size: .78rem; letter-spacing: 0; } }
@media (max-width: 380px) { .nav-cta { padding: 9px 11px; font-size: .72rem; } }

/* --- Hero. Sin foto: tipografía, dato y el marco que el cliente construye. --- */
.hero { background: var(--noche); color: var(--blanco); position: relative; overflow: hidden;
        padding: clamp(56px, 8vw, 104px) 0 0; }
.hero-caja { position: relative; z-index: 2; }
.hero h1 { color: var(--blanco); max-width: 13ch; }
.hero h1 em { font-style: normal; color: var(--azul-claro); }
.hero .eyebrow { color: #93B2EE; }
.hero .plomo { color: rgba(255,255,255,.74); margin-top: 24px; font-size: 1.06rem; }
.hero .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* --- La viga del hero -----------------------------------------------------
   Render isométrico con las partes anotadas. Los puntos son <label> sobre
   radios ocultos: responden a clic y a teclado, y el sitio conserva su
   cero-JavaScript. La descripción vive en un panel fijo debajo del dibujo —
   con globos flotantes el texto chocaba contra el titular. */
.viga-wrap { position: absolute; right: -2%; top: 50%; transform: translateY(-54%);
             width: 56%; max-width: 720px; z-index: 3; pointer-events: none; }
.viga { width: 100%; height: auto; display: block; }
.vp-radio { position: absolute; opacity: 0; pointer-events: none; }

.vp-halo   { fill: var(--coral); opacity: .14; transition: opacity .22s, r .22s; }
.vp-anillo { fill: none; stroke: var(--coral); stroke-width: 1.6; opacity: .5; transition: opacity .22s, r .22s, stroke-width .22s; }
.vp-dot    { fill: var(--coral-solido); stroke: #fff; stroke-width: 1.6; transition: r .22s; }
.vp-punto  { pointer-events: none; }
.vp-guia   { opacity: 0; transition: opacity .28s ease; }
.vp-pista  { font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 800;
             letter-spacing: .14em; text-transform: uppercase; fill: #E44030; opacity: .75; }
/* La cota del peralte sólo aparece con esa parte elegida: es la forma en que
   un plano marca una altura total, y un punto suelto no la comunicaba. */
.vp-cota { opacity: 0; transition: opacity .28s ease; }
.vp-cota path { stroke: var(--coral); stroke-width: 1.4; fill: none; opacity: .85; }

.vp-hits { position: absolute; inset: 0; }
.vp-hit { position: absolute; width: 46px; height: 46px; transform: translate(-50%, -50%);
          border-radius: 50%; cursor: pointer; pointer-events: auto; }
.vp-hit span { position: absolute; left: -9999px; }      /* nombre para lectores de pantalla */
.vp-hit:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* Panel de la parte elegida. Las cinco líneas se apilan en la misma celda para
   que la altura no salte al cambiar de parte. */
/* El panel arranca donde muere la guía: así se lee como una sola pieza. */
.vp-panel { display: grid; margin-top: -14px; padding-left: 14%; pointer-events: none; }
.vp-txt { grid-area: 1 / 1; opacity: 0; transition: opacity .22s ease; }
.vp-txt b { display: block; color: #fff; font-size: 1.22rem; font-weight: 900; letter-spacing: -.02em; }
.vp-txt span { display: block; color: #A9BEE6; font-size: .87rem; line-height: 1.5; margin-top: 3px; max-width: 40ch; }

/* Enlace radio → punto y panel. Se escribe explícito: el selector no puede
   saltar del input al SVG sin nombrar cada caso. */
#vp-peralte:checked ~ .viga .vp-guia[data-p="peralte"],
#vp-patin:checked   ~ .viga .vp-guia[data-p="patin"],
#vp-alma:checked    ~ .viga .vp-guia[data-p="alma"],
#vp-filete:checked  ~ .viga .vp-guia[data-p="filete"],
#vp-largo:checked   ~ .viga .vp-guia[data-p="largo"] { opacity: 1; }

#vp-peralte:checked ~ .viga .vp-cota[data-p="peralte"] { opacity: 1; }

#vp-peralte:checked ~ .viga .vp-punto[data-p="peralte"] .vp-dot,
#vp-patin:checked   ~ .viga .vp-punto[data-p="patin"] .vp-dot,
#vp-alma:checked    ~ .viga .vp-punto[data-p="alma"] .vp-dot,
#vp-filete:checked  ~ .viga .vp-punto[data-p="filete"] .vp-dot,
#vp-largo:checked   ~ .viga .vp-punto[data-p="largo"] .vp-dot { r: 7; }

#vp-peralte:checked ~ .viga .vp-punto[data-p="peralte"] .vp-anillo,
#vp-patin:checked   ~ .viga .vp-punto[data-p="patin"] .vp-anillo,
#vp-alma:checked    ~ .viga .vp-punto[data-p="alma"] .vp-anillo,
#vp-filete:checked  ~ .viga .vp-punto[data-p="filete"] .vp-anillo,
#vp-largo:checked   ~ .viga .vp-punto[data-p="largo"] .vp-anillo { opacity: 1; r: 13; stroke-width: 2.2; }

#vp-peralte:checked ~ .viga .vp-punto[data-p="peralte"] .vp-halo,
#vp-patin:checked   ~ .viga .vp-punto[data-p="patin"] .vp-halo,
#vp-alma:checked    ~ .viga .vp-punto[data-p="alma"] .vp-halo,
#vp-filete:checked  ~ .viga .vp-punto[data-p="filete"] .vp-halo,
#vp-largo:checked   ~ .viga .vp-punto[data-p="largo"] .vp-halo { opacity: .34; r: 21; }

#vp-peralte:checked ~ .vp-panel .vp-txt[data-p="peralte"],
#vp-patin:checked   ~ .vp-panel .vp-txt[data-p="patin"],
#vp-alma:checked    ~ .vp-panel .vp-txt[data-p="alma"],
#vp-filete:checked  ~ .vp-panel .vp-txt[data-p="filete"],
#vp-largo:checked   ~ .vp-panel .vp-txt[data-p="largo"] { opacity: 1; }

/* Latido suave: es lo que le dice al visitante que los puntos se tocan. */
@keyframes vp-latido { 0%,100% { opacity: .16; } 50% { opacity: .34; } }
.vp-punto .vp-halo { animation: vp-latido 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .vp-punto .vp-halo { animation: none; } }

@media (max-width: 1080px) {
  .viga-wrap { opacity: .22; right: -14%; width: 104%; max-width: none; }
  .vp-hits, .vp-panel { display: none; }        /* sin espacio para leer el panel */
}

.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
          background: rgba(255,255,255,.15); margin-top: clamp(48px, 7vw, 88px); position: relative; z-index: 2; }
@media (max-width: 720px) { .cifras { grid-template-columns: repeat(2, 1fr); } }
.cifra { background: var(--noche); padding: 24px 6px; }
.cifra dt { color: rgba(255,255,255,.55); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cifra dd { color: var(--blanco); font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 900; margin-top: 5px; line-height: 1.1; }

/* --- Secciones --- */
.seccion { padding: clamp(60px, 8vw, 96px) 0; }
.seccion--gris { background: var(--gris-bg); }
.seccion--noche { background: var(--noche); }
.seccion--noche h2, .seccion--noche h3 { color: var(--blanco); }
.seccion--noche .eyebrow { color: #93B2EE; }
.seccion--noche .plomo { color: rgba(255,255,255,.7); }
.seccion-cab { max-width: 700px; margin-bottom: clamp(36px, 5vw, 54px); }
.seccion-cab .plomo { margin-top: 18px; }

/* --- Tarjetas --- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.tarjeta {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 13px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.tarjeta:hover { border-color: var(--azul); transform: translateY(-3px); box-shadow: 0 12px 34px rgba(22,22,61,.11); }
.tarjeta p { font-size: .93rem; color: var(--suave); }
.tarjeta .mas { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--azul); margin-top: auto; padding-top: 4px; }
.tarjeta .mas::after { content: " →"; }
.seccion--noche .tarjeta { background: var(--noche-2); border-color: rgba(255,255,255,.15); }
.seccion--noche .tarjeta:hover { border-color: var(--azul-claro); box-shadow: none; }
.seccion--noche .tarjeta p { color: rgba(255,255,255,.68); }
.seccion--noche .tarjeta .mas { color: var(--azul-claro); }

/* --- Perfiles ---
   Cinco columnas fijas por tres renglones. `auto-fill` dejaba el último renglón
   incompleto según el ancho; con columnas fijas la retícula siempre cierra. */
.perfiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1080px) { .perfiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .perfiles { grid-template-columns: repeat(2, 1fr); } }
.perfil {
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco);
  padding: 18px 17px 16px; display: flex; flex-direction: column; gap: 3px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.perfil:hover { border-color: var(--azul); box-shadow: 0 8px 22px rgba(22,22,61,.09); transform: translateY(-2px); }

/* La silueta va a escala contra el peralte mayor del catálogo: un 24″ se dibuja
   al cuádruple de alto que un 6″, y un 12×4 se ve angosto junto a un 12×8.
   Ocupa su propio renglón para que todas las siluetas de una fila compartan la
   misma base y la comparación se lea sin esfuerzo. Encimada con la etiqueta de
   disponibilidad chocaban en las tarjetas angostas. */
.perfil-sil { width: 100%; height: 72px; margin-bottom: 12px; display: block;
              fill: #C0CBDC; transition: fill .18s; }
.perfil:hover .perfil-sil { fill: var(--azul); }
.perfil .med { font-size: 1.2rem; font-weight: 900; color: var(--tinta); letter-spacing: -.03em; line-height: 1.12; white-space: nowrap; }
.perfil .peso { font-size: .74rem; color: var(--suave); }
.perfil .disp { font-size: .73rem; font-weight: 700; display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 14px; }
.punto { width: 8px; height: 8px; flex: none; }
.p-amplia { background: #1E7A5A; } .p-media { background: #B4741A; } .p-poca { background: var(--coral); }
.disp--amplia { color: #1E7A5A; } .disp--media { color: #8F5D0E; } .disp--poca { color: var(--coral); }
.perfiles-pie { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.perfiles-pie p { font-size: .82rem; color: var(--suave); }

/* --- Aviso de fraude ---
   Único bloque con coral de fondo. Se gana el color: aquí se advierte de algo
   que ya le costó dinero a gente que después vino a preguntarnos. */
.alerta { display: grid; grid-template-columns: auto 1fr auto; gap: 20px 24px; align-items: start;
          margin-top: 34px; padding: 26px 28px;
          background: #FDF1EF; border: 1px solid #F3C9C2; border-left: 4px solid var(--coral);
          border-radius: var(--radio); }
.alerta-icono { width: 30px; height: 30px; flex: none; fill: var(--coral); margin-top: 2px; }

/* --- Mapa de cobertura ---
   Silueta en el azul de la casa, pines en coral. El contorno se proyecta desde
   coordenadas reales (src/mapa.js): un México dibujado a ojo se nota deforme y
   en un bloque sobre confianza eso trabaja en contra. */
.alerta-mapa { align-self: center; }
.mapa { width: 380px; max-width: 100%; height: auto; display: block; }
.mapa-tierra { fill: #24549C; fill-opacity: .16; stroke: var(--azul); stroke-width: 1.4;
               stroke-linejoin: round; }
.pin-halo { fill: var(--coral); opacity: .16; }
.pin-punto { fill: var(--coral-solido); }
.pin text { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 800;
            fill: #7A3B2E; letter-spacing: .01em; }
@media (max-width: 1000px) {
  .alerta { grid-template-columns: auto 1fr; }
  .alerta-mapa { grid-column: 1 / -1; justify-self: center; }
}
.alerta h3 { color: var(--coral-h); font-size: 1.06rem; text-transform: uppercase; letter-spacing: .04em; }
.alerta p { color: #6B3D36; font-size: .92rem; margin-top: 9px; max-width: 74ch; line-height: 1.6; }
/* Las seis plazas como fichas: son lo comprobable de la advertencia. */
.alerta-plazas { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.alerta-plazas b { color: var(--coral-h); font-weight: 800; font-size: .84rem; margin-right: 3px; }
.alerta-plazas span { background: var(--blanco); border: 1px solid #F0C4BC; border-radius: 999px;
                      padding: 5px 13px; font-size: .8rem; font-weight: 700; color: #8C4436; }
.alerta-txt .btn { margin-top: 18px; }
.btn--coral { background: var(--coral-solido); color: var(--blanco); }
.btn--coral:hover, .btn--coral:focus-visible { background: var(--coral-h); }
@media (max-width: 620px) { .alerta { flex-direction: column; gap: 12px; padding: 22px; } }

/* --- Lista con viñeta cuadrada --- */
.lista-check { list-style: none; display: grid; gap: 11px; font-size: .96rem; margin-top: 28px; }
.lista-check li { position: relative; padding-left: 22px; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; background: var(--coral); }

/* --- FAQ --- */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary {
  cursor: pointer; list-style: none; padding: 21px 0;
  font-size: 1.02rem; font-weight: 800; color: var(--tinta);
  display: flex; justify-content: space-between; gap: 20px; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; font-weight: 400; line-height: .9; color: var(--coral); flex: none; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 23px; color: var(--suave); font-size: .95rem; max-width: 70ch; }

/* Dos secciones oscuras seguidas se leían como una sola losa larguísima.
   Un filete de un pixel las separa sin meter otro color. */
.seccion--noche + .seccion--noche { border-top: 1px solid rgba(255,255,255,.13); }

/* --- Muro de entregas ---
   El dato manda: el tonelaje es lo primero que se lee y va en cifra grande.
   Números tabulares para que la columna de toneladas se alinee sola. */
.entregas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.15); }
@media (max-width: 860px) { .entregas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .entregas { grid-template-columns: 1fr; } }

.entrega { position: relative; background: var(--noche-2); padding: 26px 24px; display: grid; gap: 5px; }
/* Miniatura arriba a la derecha. Chica a propósito: la prueba es el dato, la
   foto sólo lo respalda. Cuando no hay foto la tarjeta se ve igual de completa. */
.entrega-foto { position: absolute; top: 22px; right: 22px;
                width: 86px; height: 64px; object-fit: cover;
                border-radius: 3px; border: 1px solid rgba(255,255,255,.18); }
.entrega:has(.entrega-foto) .entrega-destino,
.entrega:has(.entrega-foto) .entrega-ton { padding-right: 96px; }
.entrega-ton {
  font-size: clamp(2rem, 4.4vw, 2.7rem); font-weight: 900; color: var(--blanco);
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.entrega-ton i { font-style: normal; font-size: .38em; font-weight: 800; color: var(--azul-claro);
                 letter-spacing: .1em; text-transform: uppercase; margin-left: 7px; vertical-align: .35em; }
.entrega-destino { color: rgba(255,255,255,.9); font-weight: 700; font-size: 1rem; margin-top: 8px; }
.entrega-horas { color: var(--azul-claro); font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.entregas-pie { color: rgba(255,255,255,.45); font-size: .8rem; margin-top: 18px; }

/* MODO SIMPLE — sólo fotos, sin tonelaje ni destino.
   La miniatura normal va `position:absolute` en la esquina de una tarjeta cuyo
   alto lo daba el texto. Sin texto, la tarjeta se colapsa y la foto queda
   flotando encima de la siguiente: es exactamente lo que se vio en el sitio el
   17-ago. Aquí la foto ES la tarjeta, así que vuelve al flujo, ocupa el ancho
   completo y fija su propia proporción 4:3. */
.entrega--simple { padding: 0; display: block; aspect-ratio: 4 / 3; overflow: hidden; }

/* CINCO FOTOS EN TRES COLUMNAS DEJAN UN HUECO, y el hueco se ve: es un
   rectángulo vacío abajo a la derecha que parece una foto que no cargó.
   La rejilla pasa a SEIS columnas: las tres de arriba ocupan dos cada una y
   las dos de abajo ocupan tres. 3x2 = 6 y 2x3 = 6, así que las dos filas
   quedan llenas sin recortar ninguna foto ni inventar una sexta.

   Se aplica sólo cuando hay exactamente cinco, que es el caso de hoy. Con otro
   número la rejilla de tres columnas sigue mandando. */
.entregas:has(.entrega--simple:nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
.entregas:has(.entrega--simple:nth-child(5):last-child) .entrega--simple:nth-child(-n+3) { grid-column: span 2; }
.entregas:has(.entrega--simple:nth-child(5):last-child) .entrega--simple:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 860px) {
  .entregas:has(.entrega--simple:nth-child(5):last-child) { grid-template-columns: repeat(2, 1fr); }
  .entregas:has(.entrega--simple:nth-child(5):last-child) .entrega--simple { grid-column: span 1; }
  .entregas:has(.entrega--simple:nth-child(5):last-child) .entrega--simple:last-child { grid-column: span 2; }
}
@media (max-width: 520px) {
  .entregas:has(.entrega--simple:nth-child(5):last-child) { grid-template-columns: 1fr; }
  .entregas:has(.entrega--simple:nth-child(5):last-child) .entrega--simple,
  .entregas:has(.entrega--simple:nth-child(5):last-child) .entrega--simple:last-child { grid-column: span 1; }
}
.entrega--simple .entrega-foto {
  position: static; width: 100%; height: 100%; object-fit: cover;
  border-radius: 0; box-shadow: none; display: block;
  transition: transform .5s ease;
}
.entrega--simple:hover .entrega-foto { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .entrega--simple .entrega-foto { transition: none; }
  .entrega--simple:hover .entrega-foto { transform: none; }
}
/* Sello de "esto todavía no es real". Sólo existe en el build local. */
.marca-ejemplo { display: inline-block; margin-bottom: 14px; padding: 6px 13px; border-radius: 999px;
  background: #2A2410; border: 1px dashed #6B5A22; color: #E3CF8A; font-size: .74rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* --- Venta cruzada. Franja delgada: informa sin robarle aire al cotizador. --- */
.cruzada { background: var(--gris-bg); border-top: 1px solid var(--borde); padding: clamp(42px, 5vw, 60px) 0; }
.cruzada-rej { display: grid; grid-template-columns: 1fr auto; gap: 20px 48px; align-items: center; }
.cruzada h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.cruzada p { color: var(--suave); font-size: .95rem; margin-top: 9px; max-width: 46ch; }
/* Cinco tarjetas con foto arriba. A partir de 5 columnas cada una queda muy
   angosta, así que abajo de 1020 px pasan a 3 y luego a 2. */
.cruzada-lista { grid-column: 1 / -1; margin-top: 26px;
                 display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1020px) { .cruzada-lista { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .cruzada-lista { grid-template-columns: repeat(2, 1fr); } }

.cruzada-lista li { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
                    padding: 14px 16px 17px; display: grid; gap: 3px; align-content: start; }
.cruzada-foto { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 12px;
                background: var(--gris-bg); border-radius: 3px; overflow: hidden; }
.cruzada-foto img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
/* Hueco visible mientras falte la foto: mejor un espacio marcado que una
   tarjeta que parece rota o, peor, que se ve completa y no lo está. */
.cruzada-foto--vacia { border: 1px dashed #C6C8CC; background: transparent; }
.sin-foto { color: #9A9DA3; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
            text-transform: uppercase; text-align: center; line-height: 1.4; }
/* Relleno del sitio publicado mientras falte la foto real. */
.foto-marca { opacity: .12; padding: 22px !important; }
.cruzada-lista b { color: var(--tinta); font-size: .95rem; font-weight: 800; line-height: 1.25; }
.cruzada-bajada { color: var(--suave); font-size: .78rem; }
/* Tarjeta-enlace (hoy sólo el panel → panelform.mx). El <a> hereda la rejilla
   del li para que el clic valga en toda la tarjeta, y el hover levanta la
   tarjeta igual que en panelform: mismo gesto en los dos sitios. */
.cruzada-li--liga { padding: 0; transition: transform .15s, box-shadow .15s; }
.cruzada-liga { display: grid; gap: 3px; align-content: start; padding: 14px 16px 17px;
                text-decoration: none; color: inherit; height: 100%; }
.cruzada-li--liga:hover, .cruzada-li--liga:focus-within {
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
/* El botón cae en una celda 1fr y se estiraba de lado a lado. */
.cruzada .btn { justify-self: end; align-self: center; }
@media (max-width: 760px) { .cruzada-rej { grid-template-columns: 1fr; } .cruzada .btn { justify-self: start; } }

/* --- Quiénes somos ---
   Va en claro a propósito. En navy quedaba pegada al cierre y al pie y las tres
   se leían como un solo bloque oscuro; el cambio de fondo las separa sin
   necesidad de filetes ni de aire extra. */
.nosotros { background: var(--blanco); }
.nosotros h2 { max-width: 18ch; }
.nosotros-rej { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.nosotros-txt p { color: var(--texto); margin-top: 18px; max-width: 62ch; font-size: 1rem; }
/* Tres hechos, sin caja. Las tarjetas competían con las del resto de la página
   y convertían un dato en un adorno; un filete arriba basta para separarlos. */
.nosotros-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 38px; }
@media (max-width: 780px) { .nosotros-cifras { grid-template-columns: 1fr; gap: 22px; } }
.nosotros-cifras > div { border-top: 2px solid var(--azul); padding-top: 15px; }
.nosotros-cifras b { display: block; color: var(--tinta); font-size: 1.06rem;
                     font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.nosotros-cifras span { display: block; color: var(--suave); font-size: .87rem; margin-top: 7px; line-height: 1.5; }
.nosotros-marca img { width: 100%; max-width: 290px; height: auto; display: block; margin-inline: auto; }
@media (max-width: 900px) {
  .nosotros-rej { grid-template-columns: 1fr; }
  .nosotros-marca { order: -1; }
  .nosotros-marca img { max-width: 148px; margin-inline: 0; }
  .nosotros-cifras { grid-template-columns: repeat(2, 1fr); }
}

/* --- Cierre --- */
.cierre { background: var(--noche); color: var(--blanco); padding: clamp(60px, 8vw, 96px) 0; }
.cierre h2 { color: var(--blanco); }
.cierre .plomo { color: rgba(255,255,255,.74); margin-top: 16px; }
.cierre-rej { display: grid; grid-template-columns: 1.25fr .75fr; gap: 52px; align-items: center; }
@media (max-width: 900px) { .cierre-rej { grid-template-columns: 1fr; gap: 34px; } }
.cierre .lista-check { color: rgba(255,255,255,.86); }
.cierre .acciones { display: flex; flex-direction: column; gap: 12px; }
.cierre .acciones .btn { text-align: center; padding: 17px 28px; font-size: .95rem; }
.cierre .fina { color: rgba(255,255,255,.45); font-size: .8rem; text-align: center; margin-top: 4px; }

/* --- Nota de trabajo. Nunca se publica: build.js la omite con --publicar. --- */
.nota-alan { background: #FFF8E1; border: 1px dashed #E0BC5A; border-radius: var(--radio);
             padding: 16px 18px; font-size: .85rem; color: #6B5407; margin-top: 26px; }
.nota-alan b { color: #8A6D0B; }
.seccion--noche .nota-alan { background: #2A2410; border-color: #6B5A22; color: #E3CF8A; }
.seccion--noche .nota-alan b { color: #F0D98A; }

/* --- Pie ---
   El navy arranca aquí y nada más aquí: logo, columnas y la línea legal.
   Compacto a propósito — es referencia, no una sección de contenido. */
.footer { background: var(--noche); color: rgba(255,255,255,.58); padding: 38px 0 20px; font-size: .8rem; }
/* La marca más una columna por bloque de S.pie.columnas. Al entrar "También
   manejamos" eran cuatro y la última se caía de renglón. */
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 20px 36px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 1020px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 620px) { .footer-top { grid-template-columns: 1fr; gap: 20px; } }
/* h2 por jerarquía, tamaño de h4 por diseño. Ver la nota en pie() de build.js:
   el <h4> hacía saltar la secuencia de encabezados en las 40 páginas. */
.footer h2 { color: var(--blanco); font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 9px; }
.footer a { display: block; padding: 3px 0; }
.footer a:hover { color: var(--blanco); }
.footer p { max-width: 38ch; line-height: 1.55; }
.logo-pie { height: 42px; margin-bottom: 12px; }
.footer-legal { padding-top: 15px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .74rem; color: rgba(255,255,255,.42); }

/* ==========================================================================
   PÁGINAS INTERNAS
   El sitio dejó de ser una landing: 37 páginas con la misma piel.
   ========================================================================== */

/* --- Encabezado de interna. Navy, para que la interna pertenezca al sitio. --- */
.cabeza-int { background: var(--noche); color: var(--blanco); padding: clamp(38px, 5vw, 60px) 0 clamp(34px, 4.5vw, 52px); }
.cabeza-int h1 { color: var(--blanco); font-size: clamp(2rem, 5vw, 3.4rem); max-width: 20ch; }
.cabeza-int .plomo { color: rgba(255,255,255,.76); margin-top: 18px; max-width: 62ch; }
.cabeza-int .plomo b { color: var(--blanco); font-weight: 700; }

.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 16px;
         font-size: .78rem; color: rgba(255,255,255,.55); }
.migas a { color: var(--azul-claro); }
.migas a:hover { color: var(--blanco); }
.migas i { font-style: normal; opacity: .5; }
.migas [aria-current] { color: rgba(255,255,255,.8); }

/* --- Cuerpo de guía y artículo. Medida de línea corta: es texto para leer. ---
   VA DENTRO de .contenedor, nunca en el mismo div. Los dos declaran max-width y
   .articulo se define después, así que ganaba la cascada: el contenedor perdía
   sus 1200px, se quedaba en 74ch, y su `margin: 0 auto` centraba la columna en
   la ventana en vez de alinearla con el encabezado. Eso era el "empujado a la
   derecha" de las 35 páginas internas. */
.articulo { max-width: 74ch; }
.articulo h2 { font-size: clamp(1.35rem, 2.8vw, 1.9rem); margin: 44px 0 14px; }
.articulo h2:first-child { margin-top: 0; }
.articulo p { margin-bottom: 15px; color: var(--texto); }
.articulo p b { color: var(--tinta); font-weight: 700; }
.articulo a { color: var(--azul); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.articulo a:hover { color: var(--azul-h); }
.lista-def { list-style: none; margin: 4px 0 18px; }
.lista-def li { padding: 9px 0 9px 20px; border-left: 2px solid var(--borde); margin-bottom: 6px; color: var(--texto); }
.lista-def b { color: var(--azul); font-weight: 800; }
.aviso { background: var(--gris-bg); border-left: 3px solid var(--azul); padding: 14px 18px;
         font-size: .9rem; color: var(--texto); border-radius: 0 3px 3px 0; }

/* Las tablas hacen scroll ellas, nunca el cuerpo de la página. */
.tabla-env { overflow-x: auto; margin: 20px 0 24px; border: 1px solid var(--borde); border-radius: var(--radio); }
.articulo table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 520px; }
.articulo th, .articulo td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--borde); }
.articulo thead th { background: var(--gris-bg); font-size: .72rem; font-weight: 800;
                     letter-spacing: .08em; text-transform: uppercase; color: var(--suave); white-space: nowrap; }
.articulo tbody th { font-weight: 700; color: var(--tinta); }
.articulo tbody td { color: var(--texto); font-variant-numeric: tabular-nums; }
.articulo tbody tr:last-child th, .articulo tbody tr:last-child td { border-bottom: 0; }
.articulo tbody tr:hover { background: #FAFBFC; }

/* --- Cierre de interna --- */
.cierre-int { background: var(--noche); color: var(--blanco); padding: clamp(44px, 6vw, 68px) 0; }
.cierre-int h2 { color: var(--blanco); font-size: clamp(1.5rem, 3.2vw, 2.2rem); max-width: 22ch; }
.cierre-int p { color: rgba(255,255,255,.74); margin-top: 12px; max-width: 58ch; }
.cierre-int .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* --- Índice del blog --- */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.post { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco);
        transition: border-color .18s, box-shadow .18s, transform .18s; }
.post:hover { border-color: var(--azul); box-shadow: 0 8px 22px rgba(22,22,61,.09); transform: translateY(-2px); }
.post a { display: block; padding: 24px 24px 22px; }
.post h2 { font-size: 1.08rem; line-height: 1.3; }
.post p { color: var(--suave); font-size: .9rem; margin-top: 10px; }
.post .mas { display: inline-block; margin-top: 14px; color: var(--azul); font-size: .84rem; font-weight: 700; }

/* --- Contacto --- */
.contacto-rej { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(30px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .contacto-rej { grid-template-columns: 1fr; } }
.contacto-rej h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.contacto-rej .lista-check { margin: 18px 0; }
.contacto-rej .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.contacto-datos { background: var(--gris-bg); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px 28px; }
.contacto-datos h3 { font-size: .72rem; font-weight: 800; letter-spacing: .16em;
                     text-transform: uppercase; color: var(--suave); margin-bottom: 14px; }
.contacto-datos h3 + p { color: var(--texto); font-size: .92rem; }
.contacto-datos dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin-bottom: 26px; }
.contacto-datos dt { color: var(--suave); font-size: .82rem; font-weight: 700; }
.contacto-datos dd { color: var(--tinta); font-size: .92rem; font-weight: 600; }
.contacto-datos a { color: var(--azul); }

/* La medida de lectura (74ch) aprieta una tabla de seis columnas. Como .articulo
   va alineado a la izquierda dentro del contenedor, la tabla puede crecer hacia
   la derecha sin desbordar la página.
   El tope es el ancho interior del contenedor, no `100vw - 40px`: 100vw incluye
   la barra de desplazamiento, y en una ventana angosta ese cálculo se pasaba
   unos pixeles y sacaba scroll horizontal. Los 56px son el relleno (40) más la
   barra (16). */
@media (min-width: 980px) {
  .articulo .tabla-env { width: 148%; max-width: calc(min(var(--ancho), 100vw) - 56px); }
}
.articulo tbody th { white-space: nowrap; }

/* --- Artículos del blog (reescritura 11 ago 2026) --- */

/* "En corto": respuesta autocontenida arriba del artículo. Es lo primero que
   lee la persona con prisa y lo primero que extrae un motor de respuesta. */
.claves { background: var(--noche); color: var(--blanco); border-radius: var(--radio);
          padding: 24px 28px; margin-bottom: 34px; }
.claves h2 { color: var(--blanco); font-size: .72rem !important; font-weight: 800;
             letter-spacing: .18em; text-transform: uppercase; margin: 0 0 14px !important; }
.claves ul { list-style: none; display: grid; gap: 10px; }
.claves li { color: rgba(255,255,255,.82); font-size: .93rem; line-height: 1.55; padding-left: 20px; position: relative; }
.claves li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--coral); }
.claves b { color: var(--blanco); font-weight: 700; }

/* Cápsula citable: el pasaje que un LLM puede extraer y atribuir. Se distingue
   del cuerpo para que también le sirva al lector que sólo escanea. */
.capsula { border-left: 3px solid var(--azul); background: #F4F7FC;
           padding: 16px 20px; margin: 20px 0 22px; border-radius: 0 3px 3px 0;
           font-size: .95rem; line-height: 1.62; color: var(--texto); }
.capsula b { color: var(--azul-h); font-weight: 700; }

.lista-p, .lista-num { margin: 4px 0 20px 0; padding-left: 22px; }
.lista-p li, .lista-num li { margin-bottom: 9px; color: var(--texto); }
.lista-p { list-style: none; padding-left: 20px; }
.lista-p li { position: relative; padding-left: 16px; }
.lista-p li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 2px; background: var(--coral); }

.fuentes { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--borde); }
.fuentes h2 { font-size: .72rem !important; font-weight: 800; letter-spacing: .18em;
              text-transform: uppercase; color: var(--suave); margin: 0 0 14px !important; }
.fuentes ol { padding-left: 20px; }
.fuentes li { font-size: .87rem; margin-bottom: 8px; color: var(--texto); }
.fuentes-nota { font-size: .8rem; color: var(--suave); margin-top: 14px; }

.firma { margin-top: 30px; padding: 20px 22px; background: var(--gris-bg);
         border-radius: var(--radio); border: 1px solid var(--borde); }
.firma p { font-size: .88rem; color: var(--texto); margin-bottom: 6px; }
.firma p:last-child { margin-bottom: 0; }
.firma b { color: var(--tinta); }
.firma-fecha { color: var(--suave); font-size: .8rem !important; }

/* Las preguntas del artículo reutilizan el acordeón del FAQ de portada. */
.seccion--gris .articulo details { border-bottom: 1px solid var(--borde); }
.seccion--gris .articulo summary { cursor: pointer; list-style: none; padding: 18px 0;
  font-size: .98rem; font-weight: 800; color: var(--tinta);
  display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.seccion--gris .articulo summary::-webkit-details-marker { display: none; }
.seccion--gris .articulo summary::after { content: "+"; font-size: 1.5rem; font-weight: 400;
  line-height: .9; color: var(--coral); flex: none; transition: transform .2s; }
.seccion--gris .articulo details[open] summary::after { transform: rotate(45deg); }
.seccion--gris .articulo details p { padding-bottom: 20px; color: var(--suave); font-size: .93rem; }

/* Diagramas de artículo. Explican algo que el texto sólo puede describir. */
.figura { margin: 26px 0 28px; }
.figura svg { width: 100%; height: auto; display: block;
              border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); padding: 14px; }
.figura figcaption { font-size: .83rem; color: var(--suave); margin-top: 10px; text-align: center; }
@media (min-width: 980px) { .articulo .figura { width: 128%; max-width: calc(min(var(--ancho), 100vw) - 56px); } }

/* --- Calidad del material --- */
.material-tabla { margin-top: 34px; padding: 26px 28px; background: var(--noche-2);
                  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radio); }
.material-tabla h3 { color: var(--blanco); font-size: .72rem; font-weight: 800;
                     letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.material-tabla table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 460px; }
.material-tabla th, .material-tabla td { padding: 11px 14px; text-align: left;
                                         border-bottom: 1px solid rgba(255,255,255,.12); }
.material-tabla thead th { color: rgba(255,255,255,.55); font-size: .68rem; font-weight: 800;
                           letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.material-tabla tbody th { color: var(--blanco); font-weight: 700; }
.material-tabla tbody td { color: var(--azul-claro); font-weight: 700; font-variant-numeric: tabular-nums; }
.material-tabla tbody td:first-of-type { color: rgba(255,255,255,.6); font-weight: 500; }
.material-tabla .tabla-env { border: 0; margin: 0 0 14px; overflow-x: auto; }
.material-pie { color: rgba(255,255,255,.5); font-size: .8rem; margin-bottom: 18px; }

/* ══════════════════════════════════════════════════════════════════════════
   COTIZADOR  (/cotizador/)
   La única página con JavaScript. Se cotiza en obra, con guantes y a media
   luz: campos altos, contraste alto, teclado numérico donde toca.
   El coral se reserva para tres cosas — WhatsApp, la condición de pago
   anticipado y "pocas piezas". El botón de enviar va en azul a propósito:
   si el coral está en todos lados deja de significar algo.
   ══════════════════════════════════════════════════════════════════════════ */
.cot-env { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
           gap: 34px; align-items: start; }
@media (max-width: 940px) { .cot-env { grid-template-columns: 1fr; } }

.cot { display: grid; gap: 26px; }
.cot-paso { border: 1px solid var(--borde); border-radius: var(--radio);
            background: var(--blanco); padding: 22px 22px 24px; }
.cot-paso > h2 { font-size: 1.02rem; letter-spacing: -.01em; display: flex; gap: 10px; align-items: baseline; }
.cot-paso > h2 i { font-style: normal; color: var(--azul); font-weight: 900; font-size: .84rem; }
.cot-paso > p { color: var(--suave); font-size: .87rem; margin-top: 5px; }

.cot-fila { display: grid; grid-template-columns: 1fr 108px 44px; gap: 12px; align-items: start;
            margin-top: 16px; }
@media (max-width: 520px) { .cot-fila { grid-template-columns: 1fr 92px 40px; gap: 8px; } }

.cot-campo { position: relative; display: grid; gap: 6px; }
.cot-campo label { font-size: .72rem; font-weight: 800; letter-spacing: .1em;
                   text-transform: uppercase; color: var(--suave); }
.cot input {
  width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 1rem;
  color: var(--tinta); background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--radio); -webkit-appearance: none;
}
.cot input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.cot input::placeholder { color: #A6A9AF; }
.cot-pz { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.cot-quitar { align-self: end; min-height: 52px; width: 100%; border: 1px solid var(--borde);
              background: var(--blanco); border-radius: var(--radio); color: var(--suave);
              font-size: 1.3rem; line-height: 1; cursor: pointer; }
.cot-quitar:hover { border-color: var(--coral); color: var(--coral); }
.cot-mas { margin-top: 14px; background: none; border: 0; padding: 8px 0; cursor: pointer;
           color: var(--azul); font: inherit; font-size: .87rem; font-weight: 700; }
.cot-mas:hover { color: var(--azul-h); text-decoration: underline; }
.cot-disp { font-size: .76rem; font-weight: 700; color: #1E7A5A; min-height: 1em; }
.cot-disp--poca { color: var(--coral); }
.cot-ton { margin-top: 14px; font-size: 1.02rem; font-weight: 900; color: var(--tinta);
           font-variant-numeric: tabular-nums; min-height: 1.4em; }

/* La foto del artículo. `aspect-ratio` además del width/height del <img>:
   así el hueco existe antes de que baje el archivo y el texto no salta. */
.art-foto { margin: 0 0 28px; }
.art-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630;
                object-fit: cover; border-radius: var(--radio); background: var(--gris-bg); }

/* Lista de sugerencias: propia y no <datalist>, que en Android casi no se ve. */
.cot-sug { position: absolute; z-index: 20; top: calc(100% + 2px); left: 0; right: 0;
           max-height: 296px; overflow-y: auto; list-style: none; margin: 0; padding: 4px;
           background: var(--blanco); border: 1px solid var(--azul); border-radius: var(--radio);
           box-shadow: 0 14px 34px rgba(22,22,61,.16); }
.cot-sug li { display: flex; justify-content: space-between; align-items: center; gap: 12px;
              min-height: 48px; padding: 10px 12px; cursor: pointer; border-radius: 3px; }
.cot-sug li b { font-size: .95rem; color: var(--tinta); font-weight: 700; }
.cot-sug li span { font-size: .76rem; color: var(--suave); text-align: right; flex: none; }
.cot-sug li:hover, .cot-sug li.sel { background: var(--gris-bg); }

/* Los dos <select> del destino. Mismo alto de 52 px que los inputs porque se
   tocan con guante: por debajo de eso el pulgar falla y se elige el renglón de
   arriba, que aquí significa mandar el pedido a otra ciudad.
   `appearance:none` + flecha propia para que Android no pinte su control gris,
   que en pantalla a media luz no se distingue del fondo.                      */
.cot select {
  width: 100%; min-height: 52px; padding: 12px 40px 12px 14px; font: inherit; font-size: 1rem;
  color: var(--tinta); background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--radio);
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236C7079' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.cot select:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.cot select:disabled { background-color: var(--gris-bg); color: var(--suave); cursor: default; }
.cot-campo--ancho { grid-column: 1 / -1; }
.cot-ayuda { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--suave); }

.cot-rej { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 620px) { .cot-rej { grid-template-columns: 1fr; } }
.cot-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cot-enviar { min-height: 60px; width: 100%; border: 0; cursor: pointer;
              background: var(--azul); color: var(--blanco); font-size: 1.02rem; }
.cot-enviar:hover, .cot-enviar:focus-visible { background: var(--azul-h); }
.cot-enviar[disabled] { opacity: .6; cursor: progress; }
.cot-nota { font-size: .8rem; color: var(--suave); text-align: center; }

/* La salida humana, arriba del formulario. Un cotizador automático no puede ser
   una puerta que obliga: quien prefiera hablar con alguien tiene el botón antes
   de teclear nada. */
.cot-humano { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
              margin-bottom: 26px; font-size: .95rem; color: var(--texto); }

/* Art. 16 fr. II: el aviso simplificado va donde se capturan los datos, antes
   del botón. Discreto pero legible — un aviso a 10 px no es un aviso. */
.cot-privacidad { margin: 20px 0 16px; padding: 13px 15px; border-radius: var(--radio);
                  background: var(--gris-bg); border: 1px solid var(--borde);
                  font-size: .8rem; color: var(--suave); line-height: 1.6; }
.cot-privacidad b { color: var(--texto); }
.cot-privacidad a { color: var(--azul); text-decoration: underline; }

/* ---- el resultado ---- */
.cot-res { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco);
           padding: 26px; position: sticky; top: 108px; }
.cot-res--ok { border-color: var(--azul); box-shadow: 0 14px 40px rgba(22,22,61,.10); }
.cot-res--consulta, .cot-res--aviso { border-color: #E9C9C2; background: #FDF7F5; }
.cot-folio { font-size: .72rem; font-weight: 800; letter-spacing: .14em;
             text-transform: uppercase; color: var(--suave); }
.cot-res h2 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin-top: 8px; letter-spacing: -.02em; }
.cot-cuenta { margin-top: 20px; border-top: 1px solid var(--borde); }
.cot-cuenta div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
                  padding: 11px 0; border-bottom: 1px solid var(--borde); }
.cot-cuenta dt { font-size: .89rem; color: var(--texto); }
.cot-cuenta dd { font-size: .95rem; font-weight: 700; color: var(--tinta);
                 font-variant-numeric: tabular-nums; white-space: nowrap; }
.cot-cuenta .fuerte dt { font-weight: 800; color: var(--tinta); }
.cot-cuenta .fuerte dd { font-size: 1.24rem; font-weight: 900; }
/* La promesa de la garantía, con su monto. En azul y no en coral: el coral es
   para acción y urgencia, y esto es una afirmación de respaldo. Si el coral
   está en todos lados deja de significar algo. */
.cot-garantia { margin-top: 16px; padding: 13px 16px; border-radius: var(--radio);
                background: #EEF3FC; border-left: 3px solid var(--azul);
                color: var(--azul-h); font-size: .98rem; font-weight: 700; line-height: 1.5; }

.cot-condicion { margin-top: 16px; padding: 11px 14px; border-radius: var(--radio);
                 background: #FDECE9; border: 1px solid #F0C4BC;
                 color: var(--coral-h); font-size: .95rem; font-weight: 700; }
.cot-consulta { margin-top: 14px; font-size: .95rem; color: var(--texto); line-height: 1.62; }
.cot-lineas { list-style: none; margin-top: 20px; display: grid; gap: 10px; }
.cot-lineas li { display: grid; gap: 3px; padding: 11px 0; border-top: 1px solid var(--borde); }
.cot-lineas b { font-size: .9rem; color: var(--tinta); }
.cot-banda { font-size: .76rem; font-weight: 700; color: #1E7A5A; }
.cot-banda--poca { color: var(--coral); }
.cot-sust { font-size: .84rem; color: var(--texto); margin-top: 5px; padding-left: 12px;
            border-left: 2px solid var(--azul); }
/* La nota de disponibilidad va AL LADO del número, nunca en su lugar. Por eso
   es un renglón discreto dentro de la partida y no un recuadro que compita con
   el total: el precio no depende de la existencia. */
.cot-confirmar { font-size: .82rem; color: var(--coral-h); font-weight: 700;
                 margin-top: 5px; line-height: 1.5; }
.cot-sust { font-size: .84rem; color: var(--texto); margin-top: 5px; padding-left: 12px;
            border-left: 2px solid var(--azul); }

/* El envío como decisión del cliente. Objetivos táctiles grandes: esto se toca
   en obra, con guantes. */
.cot-envio { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--borde); }
.cot-envio-t { font-size: .92rem; color: var(--texto); line-height: 1.6; margin-bottom: 12px; }
.cot-opcion { display: block; width: 100%; text-align: left; cursor: pointer;
              min-height: 60px; padding: 13px 15px; margin-bottom: 10px;
              border: 1px solid var(--borde); border-radius: var(--radio);
              background: var(--blanco); font: inherit; color: var(--texto); }
.cot-opcion:hover, .cot-opcion:focus-visible { border-color: var(--azul); }
.cot-opcion b { display: block; font-size: .95rem; color: var(--tinta); margin-bottom: 3px; }
.cot-opcion span { display: block; font-size: .82rem; line-height: 1.55; color: var(--suave); }
.cot-opcion.sel { border-color: var(--azul); border-width: 2px; background: var(--gris-bg); }

.cot-sugerencia { margin-top: 18px; padding: 14px 16px; background: var(--gris-bg);
                  border-left: 3px solid var(--azul); font-size: .92rem; color: var(--texto); }
.cot-legal { margin-top: 16px; font-size: .8rem; color: var(--suave); line-height: 1.6; }
.cot-wa { margin-top: 20px; width: 100%; }

.cot-hueso { height: 15px; margin-bottom: 12px; border-radius: 3px;
             background: linear-gradient(90deg, #EDEEF1 25%, #F6F7F9 50%, #EDEEF1 75%);
             background-size: 300% 100%; animation: cot-late 1.3s linear infinite; }
.cot-hueso--t { height: 30px; width: 72%; margin-bottom: 20px; }
.cot-hueso--c { width: 55%; }
.cot-espera { font-size: .84rem; color: var(--suave); margin-top: 16px; }
@keyframes cot-late { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .cot-hueso { animation: none; } }

/* --- Aviso de privacidad. Documento legal: se lee, no se decora. ----------- */
.priv-lista { margin: 16px 0 22px; }
.priv-lista dt { font-weight: 800; color: var(--tinta); font-size: .95rem; margin-top: 12px; }
.priv-lista dd { color: var(--texto); line-height: 1.7; margin-top: 3px; }
.priv-aviso { margin: 18px 0 22px; padding: 14px 16px; background: var(--gris-bg);
              border-left: 3px solid var(--azul); line-height: 1.7; }
.footer-legal a { color: rgba(255,255,255,.75); text-decoration: underline; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--blanco); }

/* ── Botón flotante de WhatsApp ────────────────────────────────────────────
   El dato que lo justifica está en la nota de botonFlotante() en build.js:
   en las fichas el primer CTA vivía tras 826 de 832 palabras, y en 6 días de
   campaña sólo 4 de 234 visitantes abrieron el cotizador.
   Coral porque es acción y urgencia — la regla de color del CLAUDE.md §11.
   56px de lado: el mínimo táctil cómodo para quien cotiza en obra con guantes. */
.wa-flota {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--coral); color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-flota:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.34); }
.wa-flota:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wa-flota { transition: none; } }
/* En pantalla chica se sube un poco: ahí el pulgar cae más arriba del borde. */
@media (max-width: 620px) { .wa-flota { right: 14px; bottom: 20px; } }

/* ── CTA arriba del fold en las fichas ─────────────────────────────────────
   Va inmediatamente después del H1 y de la entrada, antes de la tabla técnica.
   El comprador llega de un anuncio de «viga ipr 12x4 precio»: lo primero que
   debe encontrar es por dónde pedir su precio, no la explicación de cómo se
   lamina un perfil. */
.cta-alto { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); }
.cta-alto p { color: rgba(255,255,255,.86); font-size: .95rem; margin-bottom: 12px; max-width: 46ch; }
.cta-alto .acciones { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 620px) {
  .cta-alto .acciones { flex-direction: column; }
  .cta-alto .acciones .btn { width: 100%; text-align: center; }
}