/* =============================================================================
   Foodly — página pública
   -----------------------------------------------------------------------------
   DIRECCIÓN: ficha de producto profesional.

   El referente es una página de producto corporativa: claridad, aire, secciones
   que se turnan, y las descargas donde se ven. La piel viene del oficio —papel
   cálido y tinta profunda, no el gris azulado de cualquier panel de control— con
   la frambuesa de la marca como único acento y una sola banda oscura, reservada
   para la sección de protección de datos.

   TIPOGRAFÍA: Instrument Serif para los titulares, Instrument Sans para todo lo
   demás. Misma superfamilia y mismos diseñadores: están hechas para convivir, y
   el contraste entre la serif de trazo fino y la sans precisa es el que da el
   aire de documento serio. Nada de Inter.

   COLOR: la frambuesa aparece en tres sitios —acciones, cifras que importan y la
   banda oscura—. Repartida por todas partes dejaría de señalar nada.
   ========================================================================== */

:root {
    /* Papel: blanco cálido, con algo de crema. El blanco puro y el gris azulado
       enfrían la página; este producto es de harina, no de acero. */
    --papel:     #fbf8f4;
    --papel-2:   #f4efe8;
    --blanco:    #ffffff;

    --tinta:     #191512;
    --tinta-2:   #4b423b;

    /* Los grises estan medidos, no elegidos a ojo.
       Los valores anteriores -#857a72 y #a89d95- daban 3,65 y 2,32 de contraste
       sobre el papel mas oscuro de la pagina, por debajo del 4,5 que exige WCAG AA
       para texto normal. Como este gris viste media pagina -etiquetas, ayudas de
       formulario, cabeceras de tabla, notas al pie- eran 59 elementos ilegibles a
       la vez, y se lee en un mostrador con luz de tarde. Medidos contra #f4efe8,
       que es el fondo claro mas oscuro y por tanto el peor caso:
         #6b6058 -> 5,34    #71665e -> 4,88 */
    --gris:      #6b6058;
    --gris-claro:#71665e;

    --linea:     #e6ded4;
    --linea-2:   #f0e9e0;

    /* La marca, tal cual sale del logo. El tono para texto es más oscuro: el
       original sobre papel claro no llega al contraste que exige leerlo. */
    --marca:      #c2213c;
    --marca-texto:#a5182f;
    --marca-honda:#8e1429;
    --marca-tinte:#fcf1f2;

    --exito:      #1f7a45;
    --exito-tinte:#eaf4ee;
    --aviso:      #8a5c08;   /* era #b07a12: 3,46 sobre su tinte */
    --aviso-tinte:#fdf6e6;

    --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --sans:  'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
    --cod:   ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --ancho: 1160px;
    --angosto: 760px;
    --canal: clamp(1.15rem, 5vw, 3.5rem);

    --r: 10px;
    --r-sm: 6px;

    /* Sombras neutras y bajas. Una sombra de color es lo que convierte una página
       de producto en una plantilla. */
    --sombra:    0 1px 2px rgba(25, 21, 18, .05), 0 8px 24px -12px rgba(25, 21, 18, .12);
    --sombra-alta: 0 2px 4px rgba(25, 21, 18, .05), 0 24px 60px -24px rgba(25, 21, 18, .22);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -.015em;
    margin: 0;
}
h1 { font-size: clamp(2.7rem, 6vw, 4.5rem); }
h1 em { font-style: italic; color: var(--marca-texto); }

h2 { font-size: clamp(1.95rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.cod { font-family: var(--cod); font-size: .92em; }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 3px; }

.salto {
    position: absolute; left: -9999px; top: 0; z-index: 300;
    padding: .7rem 1.1rem; background: var(--marca); color: #fff;
    font-weight: 600; text-decoration: none;
}
.salto:focus { left: .5rem; top: .5rem; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--canal); }
.contenedor--angosto { max-width: calc(var(--angosto) + var(--canal) * 2); }

/* ============================ Barra ============================ */

.barra {
    position: sticky; top: 0; z-index: 100;
    background: rgba(251, 248, 244, .88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--linea);
}
.barra-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: .7rem var(--canal);
    display: flex; align-items: center; gap: 2rem;
}

.marca {
    display: inline-flex; align-items: center; gap: .55rem;
    text-decoration: none; font-weight: 600; font-size: 1.05rem;
    letter-spacing: -.01em; margin-right: auto;
}
.marca img { border-radius: 50%; flex: none; }

.barra-nav { display: flex; gap: 1.55rem; font-size: .93rem; }
.barra-nav a {
    text-decoration: none; color: var(--tinta-2);
    padding: .25rem 0; border-bottom: 2px solid transparent;
    transition: color .16s, border-color .16s;
}
.barra-nav a:hover { color: var(--tinta); border-bottom-color: var(--marca); }

.barra-acciones { display: flex; gap: .5rem; flex: none; }

@media (max-width: 1040px) { .barra-nav { display: none; } }
@media (max-width: 520px) {
    .barra-acciones .btn--linea { display: none; }
}

/* ============================ Botones ============================ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .72rem 1.35rem;
    border: 1px solid transparent; border-radius: var(--r-sm);
    font-family: var(--sans); font-size: .97rem; font-weight: 600;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .16s, border-color .16s, color .16s, transform .12s, box-shadow .16s;
}
.btn--sm { padding: .5rem 1rem; font-size: .9rem; }
.btn--lg { padding: .92rem 1.8rem; font-size: 1.02rem; }
.btn--bloque { width: 100%; }

.btn--solido {
    background: var(--marca); border-color: var(--marca); color: #fff;
    box-shadow: 0 1px 2px rgba(142, 20, 41, .2);
}
.btn--solido:hover { background: var(--marca-honda); border-color: var(--marca-honda); }
.btn--solido:active { transform: translateY(1px); }

.btn--linea {
    background: var(--blanco); border-color: var(--linea); color: var(--tinta);
}
.btn--linea:hover { border-color: var(--marca); color: var(--marca-texto); }

.btn--texto {
    background: transparent; color: var(--marca-texto);
    padding-left: .4rem; padding-right: .4rem;
}
.btn--texto::after { content: "→"; transition: transform .16s; }
.btn--texto:hover::after { transform: translateX(3px); }

.btn[disabled] { opacity: .6; cursor: progress; }
.btn.cargando .boton-texto::after { content: "…"; }

/* ============================ Ceja y cabezas ============================ */

.ceja {
    margin: 0 0 1rem;
    font-size: .78rem; font-weight: 700;
    letter-spacing: .11em; text-transform: uppercase;
    color: var(--marca-texto);
}
.ceja--claro { color: #f0a8b4; }
.ceja--exito { color: var(--exito); }

.cabeza { max-width: 66ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.cabeza--centro { margin-left: auto; margin-right: auto; text-align: center; }
.cabeza h2 { margin-bottom: 1rem; }
.cabeza-bajada { color: var(--tinta-2); font-size: 1.04rem; margin: 0; }
.cabeza--claro .cabeza-bajada { color: #cdbfb8; }

/* ============================ Secciones ============================ */

.seccion { padding: clamp(3.4rem, 7vw, 6rem) 0; }
.seccion--papel2 { background: var(--papel-2); border-block: 1px solid var(--linea); }

/* ============================ Portada ============================ */

.portada { padding: clamp(2.8rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }

.portada-interior {
    max-width: var(--ancho); margin: 0 auto; padding: 0 var(--canal);
    display: grid;
    /* La columna de la captura pesa mas que la del texto.
     *
     * Con las dos casi iguales -1.02fr y 1fr- la imagen salia a 407 px en una
     * pantalla de 1440 y, siendo apaisada 16:9, quedaba una franja bajita al lado
     * de una columna de texto alta: se leia como una miniatura perdida, no como lo
     * que se vende. La maqueta dibujada a mano no tenia ese problema porque se
     * estiraba a lo alto; una captura tiene su proporcion y hay que darle ancho. */
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (max-width: 980px) {
    .portada-interior { grid-template-columns: 1fr; }
}

.destacado {
    max-width: 48ch; margin: 1.5rem 0 2rem;
    font-size: clamp(1.05rem, 1.6vw, 1.18rem);
    color: var(--tinta-2);
}

.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }

.portada-sellos {
    list-style: none; margin: 1.9rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    font-size: .89rem; color: var(--gris);
}
.portada-sellos li { position: relative; padding-left: 1.15rem; }
.portada-sellos li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--marca);
}

/* Entrada al cargar: un solo movimiento escalonado, corto y suave. */
[data-entra] { opacity: 0; transform: translateY(14px); animation: entra .7s cubic-bezier(.22,.8,.24,1) forwards; }
[data-entra="1"] { animation-delay: .04s; }
[data-entra="2"] { animation-delay: .12s; }
[data-entra="3"] { animation-delay: .22s; }
[data-entra="4"] { animation-delay: .32s; }
[data-entra="5"] { animation-delay: .40s; }
[data-entra="6"] { animation-delay: .26s; }
@keyframes entra { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    [data-entra] { animation: none; opacity: 1; transform: none; }
}

/* --------------------------- La maqueta --------------------------- */

/* La captura del programa. Antes aqui iba una ventana dibujada a mano con HTML;
 * ahora es una imagen, asi que el marco -borde, sombra, esquinas- lo lleva el
 * <figure> y la imagen solo tiene que caber dentro. */
.portada-vista {
    position: relative;
    margin: 0;
    padding-bottom: 2rem;
}

.portada-vista img {
    display: block;
    width: 100%;
    /* Un pelin mas ancha que su columna hacia la derecha: es el gesto que usan
     * las paginas de producto para que la captura se lea como una ventana que
     * sigue mas alla del borde, en vez de un recorte pegado en un hueco. Se
     * desactiva en pantallas estrechas, donde no hay borde al que ir. */
    max-width: none;
    height: auto;
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--sombra-alta);
    /* Que la esquina redondeada recorte la captura y no se vea el pico blanco. */
    overflow: hidden;
}

@media (min-width: 981px) {
    .portada-vista img { width: calc(100% + clamp(1rem, 4vw, 5rem)); }
}

.portada-vista-pie {
    margin-top: .7rem;
    font-size: .82rem;
    color: var(--gris);
    text-align: center;
}

.vista-escritorio {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--sombra-alta);
    overflow: hidden;
}

.vista-barra {
    display: flex; align-items: center; gap: .4rem;
    padding: .6rem .85rem;
    background: var(--papel-2);
    border-bottom: 1px solid var(--linea);
}
.vista-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--linea); flex: none; }
.vista-punto:first-child { background: #dcb0b7; }
.vista-ruta { margin-left: .6rem; font-size: .76rem; color: var(--gris); }

.vista-cuerpo { padding: .9rem; }

.vista-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .8rem; }
@media (max-width: 560px) { .vista-kpis { grid-template-columns: repeat(2, 1fr); } }

.kpi {
    padding: .6rem .7rem;
    border: 1px solid var(--linea-2); border-radius: var(--r-sm);
    background: var(--papel);
    display: grid; gap: .1rem;
}
.kpi span { font-size: .66rem; color: var(--gris); letter-spacing: .02em; }
.kpi b { font-size: 1rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi--alerta { background: var(--aviso-tinte); border-color: #eddcb4; }
.kpi--alerta b { color: var(--aviso); }
.kpi--marca { background: var(--marca-tinte); border-color: #f2cfd5; }
.kpi--marca b { color: var(--marca-texto); }

.vista-tabla { width: 100%; border-collapse: collapse; font-size: .78rem; }
.vista-tabla th {
    text-align: left; padding: .4rem .5rem;
    font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gris); border-bottom: 1px solid var(--linea);
}
.vista-tabla td {
    padding: .5rem; border-bottom: 1px solid var(--linea-2);
    font-variant-numeric: tabular-nums; color: var(--tinta-2);
}
.vista-tabla td:last-child, .vista-tabla th:last-child { text-align: right; }
.vista-tabla tr:last-child td { border-bottom: 0; }

.pin {
    display: inline-block; font-style: normal;
    padding: .1rem .45rem; border-radius: 99px;
    font-size: .66rem; font-weight: 600; white-space: nowrap;
}
.pin--proceso { background: var(--aviso-tinte); color: var(--aviso); }
.pin--listo   { background: var(--exito-tinte); color: var(--exito); }
.pin--espera  { background: var(--papel-2); color: var(--gris); }
.pin--alerta  { background: var(--marca-tinte); color: var(--marca-texto); }

.vista-movil {
    position: absolute; right: -8px; bottom: 0; width: 148px;
    background: var(--blanco);
    border: 1px solid var(--linea); border-radius: 18px;
    box-shadow: var(--sombra-alta);
    overflow: hidden;
}
.vista-movil-barra { width: 38px; height: 4px; border-radius: 99px; background: var(--linea); margin: .55rem auto .2rem; }
.vista-movil-cuerpo { padding: .5rem .6rem .7rem; }
.vista-movil-titulo { font-size: .66rem; color: var(--gris); margin: 0 0 .4rem; font-weight: 600; }
.mini {
    display: flex; gap: .45rem; align-items: baseline;
    padding: .32rem .45rem; border-radius: 5px; background: var(--papel);
    margin-bottom: .25rem;
}
.mini b { font-size: .7rem; font-variant-numeric: tabular-nums; }
.mini span { font-size: .66rem; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini--marca { background: var(--marca-tinte); }
.mini--marca b { color: var(--marca-texto); }

@media (max-width: 700px) { .vista-movil { display: none; } }

/* ============================ Descargas ============================ */

.descargas {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.2rem;
}

.descarga {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    padding: 1.5rem 1.6rem 1.4rem;
    box-shadow: var(--sombra);
    display: flex; flex-direction: column;
    transition: border-color .18s, box-shadow .18s;
}
.descarga:hover { border-color: #d9cec1; box-shadow: var(--sombra-alta); }

/* La plataforma del visitante se señala con un filete superior, no con un fondo:
   marca sin desequilibrar las dos tarjetas. */
.descarga.es-la-tuya { border-top: 3px solid var(--marca); }

.descarga-cabeza { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.2rem; }
.descarga-icono { width: 30px; height: 30px; fill: var(--tinta); flex: none; margin-top: .15rem; }
.descarga.es-la-tuya .descarga-icono { fill: var(--marca); }
.descarga-cabeza h3 { font-size: 1.5rem; }
.descarga-sub { margin: .1rem 0 0; font-size: .88rem; color: var(--gris); }

.descarga-datos { margin: 0 0 1.4rem; border-top: 1px solid var(--linea-2); }
.descarga-datos > div {
    display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem;
    padding: .55rem 0; border-bottom: 1px solid var(--linea-2);
    font-size: .9rem;
}
.descarga-datos dt { color: var(--gris); }
.descarga-datos dd { margin: 0; color: var(--tinta); }

.descarga .btn { margin-top: auto; }
.descarga-pie { margin: .8rem 0 0; font-size: .82rem; color: var(--gris); }

/* ============================ Avisos ============================ */

.aviso {
    max-width: 78ch;
    margin: 2.2rem 0 0;
    padding: 1rem 1.2rem;
    background: var(--marca-tinte);
    border: 1px solid #f2cfd5;
    border-radius: var(--r-sm);
    font-size: .94rem; color: var(--tinta-2);
}
.aviso b { color: var(--marca-texto); }
.aviso--neutro { background: var(--blanco); border-color: var(--linea); }
.aviso--neutro b { color: var(--tinta); }

/* ============================ Bloques alternados ============================ */

.bloque {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: clamp(2rem, 4vw, 3.2rem);
}
.bloque + .bloque { border-top: 1px solid var(--linea); }

@media (max-width: 900px) {
    .bloque { grid-template-columns: 1fr; }
    .bloque--invertido .bloque-vista { order: 2; }
}
.bloque--invertido .bloque-texto { order: 2; }
@media (max-width: 900px) {
    .bloque--invertido .bloque-texto { order: 1; }
}

.orden {
    font-family: var(--serif); font-size: 1.1rem;
    color: var(--marca); margin: 0 0 .6rem;
    font-variant-numeric: tabular-nums;
}
.bloque-texto h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .9rem; }
.bloque-texto p { color: var(--tinta-2); max-width: 52ch; }

.lista-chulos { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.lista-chulos li {
    position: relative; padding-left: 1.6rem;
    font-size: .95rem; color: var(--tinta-2);
}
.lista-chulos li::before {
    content: ""; position: absolute; left: 0; top: .48em;
    width: 9px; height: 6px;
    border-left: 2px solid var(--marca); border-bottom: 2px solid var(--marca);
    transform: rotate(-45deg);
}

.bloque-vista { margin: 0; }

.panel {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    padding: 1.3rem 1.4rem;
    box-shadow: var(--sombra);
}
.panel-titulo {
    margin: 0 0 1rem; font-size: .74rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
    padding-bottom: .7rem; border-bottom: 1px solid var(--linea-2);
}

.barra-meta {
    height: 30px; border-radius: var(--r-sm);
    background: var(--papel-2); border: 1px solid var(--linea-2);
    overflow: hidden; margin-bottom: 1.1rem;
}
.barra-meta-relleno {
    height: 100%; background: var(--marca);
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: .55rem;
}
.barra-meta-relleno span { color: #fff; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.panel-datos { margin: 0; }
.panel-datos > div {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .48rem 0; border-bottom: 1px solid var(--linea-2);
    font-size: .9rem;
}
.panel-datos > div:last-child { border-bottom: 0; }
.panel-datos dt { color: var(--gris); }
.panel-datos dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.panel-datos .dd-marca { color: var(--marca-texto); }

.panel-tabla { width: 100%; border-collapse: collapse; font-size: .87rem; }
.panel-tabla th {
    text-align: left; padding: .35rem .4rem;
    font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--gris); border-bottom: 1px solid var(--linea);
}
.panel-tabla td {
    padding: .5rem .4rem; border-bottom: 1px solid var(--linea-2);
    font-variant-numeric: tabular-nums; color: var(--tinta-2);
}
.panel-tabla tr:last-child td { border-bottom: 0; }
.panel-tabla .der { text-align: right; }
.fila-alerta td { background: var(--marca-tinte); }

.panel-nota {
    margin: .9rem 0 0; padding-top: .8rem;
    border-top: 1px dashed var(--linea);
    font-size: .84rem; color: var(--gris);
}

/* Un bloque sin vista al lado.
 *
 * Los otros dos llevan una captura del programa. Este llevaba un documento
 * dibujado a mano que no se parecia al que imprime la aplicacion, y despues una
 * captura del PDF de verdad, que al lado de un texto es una hoja A4 en blanco.
 * Se quitaron los dos. Para que la segunda columna no quede vacia no se pone un
 * adorno: se pasa a ella la lista de lo que incluye, que ya era contenido. */
.bloque--sin-vista { align-items: start; }

.lista-chulos--columna {
    align-self: center;
    padding: 1.6rem 1.8rem;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--sombra);
}

@media (max-width: 900px) {
    /* En una columna el recuadro pierde sentido: queda pegado bajo el texto y
       parece otra seccion. Se deja como la lista que es. */
    .lista-chulos--columna {
        padding: 0; background: none; border: 0; box-shadow: none;
    }
}

/* ============================ Sectores ============================ */

.sectores { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }

.sector {
    background: var(--blanco); border: 1px solid var(--linea);
    border-radius: var(--r); padding: 1.7rem 1.8rem;
}
.sector h3 { font-size: 1.6rem; margin-bottom: .7rem; }
.sector-intro { color: var(--tinta-2); font-size: .96rem; margin: 0; }

/* ============================ Banda oscura ============================ */

/* La única sección oscura de la página, y por eso funciona: rompe el ritmo justo
   donde el mensaje cambia de "qué hace" a "en quién confía usted". */
.banda {
    background: var(--tinta);
    color: #efe7e1;
    padding: clamp(3.4rem, 7vw, 6rem) 0;
}
.banda h2 { color: #fff; }
.banda h3 { font-family: var(--sans); font-size: 1.06rem; font-weight: 600; letter-spacing: -.005em; }

.banda-rejilla {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1px;
    background: rgba(239, 231, 225, .13);
    border: 1px solid rgba(239, 231, 225, .13);
    border-radius: var(--r);
    overflow: hidden;
}
.banda-item { background: var(--tinta); padding: 1.5rem 1.6rem; }
.banda-item h3 { margin-bottom: .5rem; color: #fff; }
.banda-item p { margin: 0; font-size: .93rem; color: #bfb2ab; }

.banda-pie { margin: 1.9rem 0 0; text-align: center; font-size: .93rem; color: #bfb2ab; }
.banda-pie a { color: #f0a8b4; text-decoration: underline; text-underline-offset: 3px; }

/* ============================ Planes ============================ */

.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; max-width: 880px; margin: 0 auto; }

.plan {
    position: relative;
    background: var(--blanco); border: 1px solid var(--linea);
    border-radius: var(--r); padding: 1.9rem 1.8rem;
    display: flex; flex-direction: column;
}
.plan--destacado { border-color: var(--marca); box-shadow: var(--sombra-alta); }

.plan-cinta {
    position: absolute; top: -.75rem; left: 1.8rem;
    margin: 0; padding: .2rem .7rem;
    background: var(--marca); color: #fff; border-radius: 99px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

.plan-nombre {
    margin: 0 0 .5rem; font-size: .8rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
}
.plan-valor {
    margin: 0 0 .4rem; font-family: var(--serif);
    font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.plan-valor span { font-size: .42em; vertical-align: super; color: var(--marca); margin-right: .08em; }
.plan-valor small { font-family: var(--sans); font-size: .98rem; font-weight: 500; color: var(--gris); letter-spacing: 0; }
.plan-nota { margin: 0 0 1.2rem; font-size: .88rem; color: var(--gris); }
.plan .lista-chulos { margin-bottom: 1.8rem; }
.plan .btn { margin-top: auto; }

/* ============================ Registro ============================ */

.seccion--papel2#registro { scroll-margin-top: 64px; }

.pasos {
    list-style: none; counter-reset: p; margin: 0 0 1.4rem; padding: 0;
    display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
    font-size: .87rem; color: var(--gris);
}
.pasos li { counter-increment: p; display: flex; align-items: center; gap: .45rem; }
.pasos li::before {
    content: counter(p);
    display: grid; place-items: center;
    width: 1.45rem; height: 1.45rem; flex: none;
    border: 1px solid var(--linea); border-radius: 50%;
    background: var(--blanco);
    font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pasos .pasos-actual { color: var(--tinta); font-weight: 600; }
.pasos .pasos-actual::before { background: var(--marca); border-color: var(--marca); color: #fff; }
.pasos .pasos-hecho { color: var(--exito); }
.pasos .pasos-hecho::before { content: "✓"; background: var(--exito-tinte); border-color: #bfdecb; color: var(--exito); }

.tarjeta-form {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    padding: clamp(1.5rem, 3.5vw, 2.4rem);
    box-shadow: var(--sombra);
}

.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1.4rem; }
@media (max-width: 620px) { .formulario { grid-template-columns: 1fr; } }

.campo { display: grid; gap: .35rem; align-content: start; }
.campo--ancho { grid-column: 1 / -1; }

.campo label { font-size: .89rem; font-weight: 600; color: var(--tinta); }

.campo input {
    padding: .68rem .85rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans); font-size: 1rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.campo input::placeholder { color: var(--gris-claro); }
.campo input:focus {
    outline: 0;
    background: var(--blanco);
    border-color: var(--marca);
    box-shadow: 0 0 0 3px rgba(194, 33, 60, .13);
}

/* El campo con error se distingue por la FORMA del borde -discontinuo- y no solo
   por el color, así que también se advierte sin distinguir colores. */
.campo input[aria-invalid="true"] {
    border: 1px dashed var(--marca);
    background: var(--marca-tinte);
}

/* EL FOCO GANA SIEMPRE, incluso sobre el error.
   Sin esta regla la anterior se impone por ir después, y un campo con error y con
   el cursor dentro se vería igual que otro con error y sin cursor. Importa justo
   cuando más: tras un envío rechazado hay varios campos marcados a la vez y hay
   que saber en cuál se está escribiendo. El error no se pierde: sigue escrito
   debajo, en .campo-error. */
.campo input[aria-invalid="true"]:focus {
    border: 1px solid var(--marca);
    background: var(--blanco);
    box-shadow: 0 0 0 3px rgba(194, 33, 60, .22);
}

.campo-ayuda { margin: 0; font-size: .83rem; color: var(--gris); }
.campo-error { margin: 0; font-size: .85rem; font-weight: 600; color: var(--marca-texto); }
.campo-error:empty { display: none; }

.recuadro {
    margin: 0; padding: 1rem 1.2rem;
    background: var(--papel-2); border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    font-size: .95rem; color: var(--tinta-2);
}
.recuadro b { color: var(--tinta); }

.formulario-pie {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
    margin-top: .5rem; padding-top: 1.3rem;
    border-top: 1px solid var(--linea-2);
}
.formulario-legal { margin: 0; flex: 1 1 24ch; font-size: .84rem; color: var(--gris); }
.formulario-legal a { color: var(--marca-texto); text-decoration: underline; text-underline-offset: 3px; }

.mensaje {
    grid-column: 1 / -1; margin: .3rem 0 0;
    padding: .85rem 1.1rem;
    border: 1px solid #f2cfd5; border-left: 3px solid var(--marca);
    border-radius: var(--r-sm);
    background: var(--marca-tinte);
    font-size: .93rem; color: var(--tinta);
}
.mensaje.es-bueno {
    background: var(--exito-tinte); border-color: #bfdecb; border-left-color: var(--exito);
}

.listo-titulo { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: .7rem; }

.credenciales { margin: 1.6rem 0; border-top: 1px solid var(--linea); }
.credenciales > div {
    display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 1rem;
    align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--linea-2);
}
@media (max-width: 520px) { .credenciales > div { grid-template-columns: 1fr; gap: .2rem; } }
.credenciales dt { font-size: .82rem; font-weight: 600; color: var(--gris); }
.credenciales dd {
    margin: 0; font-family: var(--cod); font-size: 1.1rem; font-weight: 600;
    color: var(--marca-texto); word-break: break-all;
}

.listo-descargas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

/* ============================ Preguntas ============================ */

.preguntas { border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
    display: flex; align-items: baseline; gap: .8rem;
    padding: 1.1rem 0; cursor: pointer; list-style: none;
    font-weight: 600; font-size: 1.02rem;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::before {
    content: "+"; flex: none; width: 1ch;
    color: var(--marca); font-weight: 700; font-size: 1.15rem;
}
.preguntas details[open] summary::before { content: "–"; }
.preguntas summary:hover { color: var(--marca-texto); }
.preguntas details > div { padding: 0 0 1.25rem 1.8rem; }
.preguntas p { color: var(--tinta-2); font-size: .96rem; max-width: 70ch; }
@media (max-width: 520px) { .preguntas details > div { padding-left: 0; } }

/* ============================ Cierre ============================ */

.cierre {
    background: var(--papel-2);
    border-top: 1px solid var(--linea);
    padding: clamp(3rem, 6vw, 4.6rem) 0;
    text-align: center;
}
.cierre h2 { margin-bottom: .7rem; }
.cierre p { color: var(--tinta-2); margin-bottom: 1.7rem; }
.cierre-acciones { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ============================ Pie ============================ */

.pie { background: var(--tinta); color: #bfb2ab; padding: clamp(2.6rem, 5vw, 3.6rem) 0 1.6rem; }

.pie-alto {
    display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem;
}
@media (max-width: 820px) { .pie-alto { grid-template-columns: 1fr 1fr; } }

.pie .marca { color: #fff; margin-right: 0; }
.pie-marca p { margin: .8rem 0 0; font-size: .89rem; max-width: 34ch; }

.pie-col { display: grid; gap: .45rem; align-content: start; }
.pie-col h3 {
    font-family: var(--sans); font-size: .76rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: #8d817b;
    margin-bottom: .35rem;
}
.pie-col a { font-size: .91rem; color: #bfb2ab; text-decoration: none; }
.pie-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.pie-bajo {
    margin-top: 2.6rem; padding-top: 1.3rem;
    border-top: 1px solid rgba(239, 231, 225, .12);
    display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
    font-size: .84rem; color: #8d817b;
}
.pie-bajo p { margin: 0; }

/* ============================ En el móvil ============================ */

/* Las etiquetas en mayúsculas con letra espaciada se leen bien pequeñas en una
   pantalla grande; en un móvil la más chica caía por debajo de 12 px. Este
   producto lo administra gente que lleva años en un negocio de alimentos, no
   necesariamente con vista de veinte años. */
@media (max-width: 620px) {
    .ceja, .plan-nombre, .pie-col h3, .panel-titulo,
    .descarga-datos dt, .credenciales dt, .plan-cinta {
        font-size: .82rem;
        letter-spacing: .08em;
    }
    .campo-ayuda, .formulario-legal, .descarga-pie { font-size: .87rem; }
    .portada-sellos { font-size: .92rem; }
    .btn--sm { padding: .6rem 1rem; }

    /* Los enlaces del pie median 24 px de alto: poco para un dedo, y el pie es
       justo donde está el teléfono de soporte. Se les da alto sin separarlos
       tanto que la columna se estire. */
    .pie-col a { padding: .55rem 0; }
    .pie-col { gap: 0; }

    /* Los paneles ilustrativos SÍ se quedan en el móvil -al contrario que la
       maqueta de la portada- porque son simples: una barra, una tabla de tres
       columnas, un documento. Pero su letra estaba calculada para verse en
       pequeño al lado de un texto grande, y aquí ocupan el ancho completo, así
       que suben. Un panel con letra de 10 px es un adorno, no una explicación. */
    .panel-tabla th { font-size: .78rem; letter-spacing: .05em; }
    .panel-tabla td { font-size: .92rem; }
    .panel-nota { font-size: .88rem; }
    .panel-datos > div { font-size: .94rem; }

    /* La etiqueta «Primero» del panel de lotes lleva informacion -cual se consume
       antes-, asi que no puede quedarse en 10,6 px. */
    .pin { font-size: .78rem; padding: .14rem .5rem; }
    .barra-meta-relleno span { font-size: .86rem; }
}

/* LA MAQUETA SE RETIRA EN PANTALLA ESTRECHA.
   No es una rendición: es la decisión correcta. Es una interfaz de escritorio
   -tabla de cinco columnas y tarjetas de indicadores- y comprimida a 375 px su
   texto cae a 10 px, ilegible. Va marcada como decorativa (aria-hidden), así que
   retirarla no quita información: la concreta está en la sección de Descargas,
   que en el móvil queda inmediatamente debajo. */
@media (max-width: 700px) {
    .portada-vista { display: none; }
    .portada { padding-bottom: clamp(2rem, 5vw, 3rem); }
}

/* Los medios de pago, justo debajo de los planes.
 *
 * En Colombia el medio decide la venta: quien no ve Nequi o PSE da por hecho que
 * le van a pedir tarjeta de credito, y mucha panaderia de barrio no tiene. Va
 * centrado y en gris medio, para que se lea sin competir con el precio. */
.medios-de-pago {
    margin: 20px auto 0;
    max-width: 62ch;
    text-align: center;
    color: var(--gris);
    font-size: 0.94rem;
}

.medios-de-pago b {
    color: var(--tinta);
    font-weight: 600;
}

/* EL `hidden` DEL HTML TIENE QUE GANAR, SIEMPRE.
 *
 * El navegador esconde `[hidden]` con `display: none`, pero esa regla vive en su
 * hoja por defecto y CUALQUIER regla de autor que fije `display` la pisa. Aqui
 * `.formulario { display: grid }` lo hacia: el segundo paso del registro llevaba
 * su atributo `hidden` puesto y aun asi se veia, 312 px de formulario de
 * confirmacion debajo del boton de crear la cuenta.
 *
 * Se veia el "Se envio un codigo de confirmacion a ." con el hueco del correo
 * vacio -porque todavia no habia correo que poner- y el campo del codigo pidiendo
 * algo que nadie habia recibido. Los tres pasos existian y estaban bien
 * separados; lo que fallaba era esconderlos.
 *
 * Va con !important a proposito y es de los pocos sitios donde se justifica:
 * `hidden` es una afirmacion del HTML sobre si algo existe en la pagina, y
 * ninguna regla de presentacion deberia poder discutirla.
 */
[hidden] {
    display: none !important;
}

/* Las capturas dentro de los bloques de capacidades.
 *
 * Comparten el marco con la de la portada: borde, esquina y sombra en el propio
 * <figure>, y la imagen solo tiene que caber. Las maquetas que habia aqui se
 * dibujaban con HTML y se adaptaban solas; una captura tiene su proporcion, asi
 * que se le deja ocupar el ancho entero de su columna. */
.bloque-vista--captura {
    margin: 0;
}

.bloque-vista--captura img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--sombra-alta);
}

.bloque-vista-pie {
    margin-top: .7rem;
    font-size: .82rem;
    color: var(--gris);
}

/* La pagina en la que se esta, senalada en el menu.
 *
 * Al partir el sitio en varias paginas, el menu dejo de ser una lista de saltos
 * dentro de un documento y paso a ser navegacion de verdad. Sin marcar donde
 * esta uno, seis paginas con la misma cabecera se confunden entre ellas. */
/* SE REUSA EL SUBRAYADO QUE YA EXISTIA, no se anade otro.
 *
 * `.barra-nav a` ya trae `border-bottom: 2px solid transparent` y el hover lo
 * colorea: el mecanismo estaba, solo faltaba encenderlo para la pagina actual.
 * La primera version pintaba ademas una barra con ::after, asi que el enlace de
 * la pagina en la que estabas salia con DOS rayas, una encima de otra. */
.barra-nav a.activo {
    color: var(--marca-texto);
    font-weight: 600;
    border-bottom-color: var(--marca);
}

/* ============================ Pagina de error ============================ */

/* No hay nada que ensenar aqui, asi que la pagina no compite con nada: se centra
   la columna y se deja aire. Lo unico que importa es que se pueda salir. */
.seccion-error {
    max-width: 44rem;
    padding-block: clamp(3.5rem, 9vw, 7rem);
    text-align: center;
}
.seccion-error h1 { margin: .3rem 0 1rem; }
.seccion-error .portada-acciones { justify-content: center; margin-top: 2rem; }

/* Lista propia y no `.lista-chulos`.
   Se intento reutilizarla cambiandole el `content` del ::before y salio mal: el
   chulo de esa lista no es un caracter, son dos BORDES de una caja girada 45
   grados. Al meterle una flecha dentro se veian las dos cosas a la vez, torcidas.
   Y ademas aqui no son caracteristicas del producto sino sitios a los que ir,
   que es otra cosa y merece otra marca. */
.lista-error {
    margin: 2.6rem auto 0;
    max-width: 26rem;
    padding: 0;
    list-style: none;
    text-align: left;
    display: grid;
    gap: .6rem;
}
.lista-error li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--tinta-2);
}
.lista-error li::before {
    content: "→";
    position: absolute; left: 0;
    color: var(--gris);
}
.lista-error a { font-weight: 600; }

.nota-error {
    margin-top: 2.6rem; padding-top: 1.4rem;
    border-top: 1px solid var(--linea);
    font-size: .9rem; color: var(--gris);
}

/* ==================== Politica de tratamiento de datos ==================== */

/* Un documento legal se lee de arriba abajo, no se ojea: columna estrecha, una
   sola, y jerarquia clara entre los diez apartados. Nada de rejillas ni tarjetas
   aqui -convertir una politica en tarjetas la vuelve imposible de citar-. */
.seccion-politica {
    max-width: 46rem;
    padding-block: clamp(3rem, 7vw, 5rem);
    border-top: 1px solid var(--linea);
}
.seccion-politica h2 { margin: .3rem 0 .8rem; }

.politica-cuerpo { margin-top: 2.4rem; }
/* El tamano NO se toca: hereda el h3 del sitio.
   Estaba en 1.05rem, que con la base de esta pagina son 16,8 px: MENOS que los
   17 px del texto y muy por debajo de los 28 px que miden los h3 en el resto del
   sitio. El resultado era una jerarquia al reves -«Responsable del tratamiento:»
   en negrita de 700 pesaba mas que el titulo de su propia seccion- y en un
   documento que se consulta buscando un apartado concreto, eso lo vuelve
   ilegible de un vistazo. */
.politica-cuerpo h3 {
    margin: 2.8rem 0 1rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--linea-2);
}
.politica-cuerpo h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.politica-cuerpo p { margin: 0 0 1rem; }
.politica-cuerpo ul { margin: 0 0 1.2rem; }
.politica-cuerpo li { margin-bottom: .5rem; }

/* Lo que todavia falta se ve, y se ve MAL a proposito.

   Ahora mismo no la usa nadie -no queda ningun hueco- y se conserva a proposito:
   el dia que haya que dejar otro dato pendiente, esto es lo que impide que salga
   publicado disimulado entre el texto normal.
   Un domicilio o un correo inventados en una politica de datos son peores que
   un hueco: el hueco se nota y se llena, el dato falso se publica y se queda. */
.por-completar {
    background: #fff3b0;
    color: #6b4e00;
    padding: .1rem .45rem;
    border: 1px dashed #c9a227;
    border-radius: var(--r-sm);
    font-size: .85em;
    font-weight: 600;
}