/* ═══════════════════════════════════════════════════════════════════════════
 *  LANDING
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * A SANGRE. Cada franja ocupa todo el ancho del body --la cabecera, el héroe,
 * la banda de cifras, la llamada final y el pie-- y lo único que se recoge en
 * una medida legible es el CONTENIDO, con `.lp-ancho`. Va con `layout('full')`,
 * que es el modo sin cabecera, sin pie y sin relleno.
 *
 * ── LOS TONOS SALEN MEDIDOS DE LA MAQUETA ───────────────────────────
 *
 * Muestreados de `landpage.png` con PIL, que es la regla del proyecto: el verde
 * de los botones es #236e30, el del texto destacado #2a7a38 y el pie #122f18.
 *
 * ── Y NO HEREDA NADA DE LA TIENDA ───────────────────────────────────
 *
 * Es una página de marketing, no el escaparate: trae sus propios tokens y no da
 * por hecho ninguna hoja del sitio. Lo único que comparte es la familia de
 * iconos, Lucide, como todo el proyecto.
 */

.lp{
    --lp-verde:        #236e30;
    --lp-verde-vivo:   #2a7a38;
    --lp-verde-oscuro: #16491f;
    --lp-verde-claro:  #eef6ec;
    --lp-verde-borde:  #d3e7cf;

    --lp-tinta:  #16211a;
    --lp-texto:  #3f4a43;
    --lp-suave:  #6b7a70;
    --lp-tenue:  #93a399;

    --lp-papel:  #ffffff;
    --lp-crema:  #f6f9f4;
    --lp-borde:  #e6ebe6;

    --lp-pie:    #122f18;   /* el verde oscuro, que sigue usándose de acento */
    --lp-pie-fondo: #faf8f2; /* el fondo del pie, claro desde el 25/08/2026 */

    --lp-radio:  16px;

    /* LA ALTURA DE LAS PORTADAS INTERIORES, UNA SOLA PARA LAS TRES.
       «Cómo funciona», «Para agricultores» y «Para compradores» son el mismo
       tipo de página y se visitan seguidas --las tres cuelgan de la misma
       barra--, así que una portada de 340px y otra de 510 se nota al saltar
       de una a otra aunque cada una, sola, parezca bien. Aquí y no en cada
       hoja para que cambiarla sea un número, no tres.

       La portada de la PORTADA (`--lp-heroe`, 640px) no entra: esa es la
       primera pantalla del sitio y le toca ser más alta. */
    --lp-portada-alto: 500px;

    container-type: inline-size;

    background: var(--lp-papel);
    color: var(--lp-texto);
    font-size: 15px;
    line-height: 1.6;
}

.lp *{ box-sizing: border-box; }

/* La regla global `.TComponentES6 button{height:25px}` aplasta cualquier botón
   con icono: aquí el alto lo pone cada uno. */
.lp button{ height: auto; cursor: pointer; font-family: inherit; }

.lp img{ max-width: 100%; display: block; }

/* LOS ENLACES NO LLEVAN BORDE, Y HAY QUE DECIRLO.
 *
 * El sitio tiene una regla global sobre `a` --y otra sobre `a:visited`-- que
 * pinta un borde inferior: en el pie salía una raya bajo cada icono social y
 * bajo cada enlace de los legales, y en las tarjetas de categoría una línea
 * suelta en cuanto se visitaban. `getComputedStyle` no lo delata a simple
 * vista porque el color es casi el del fondo.
 *
 * EL `:hover` NO TOCA EL BORDE. Lo quitaba con `border: 0` y, con tres clases
 * y un tipo, le ganaba al borde propio de cualquier enlace-tarjeta o entrada
 * de índice: al pasar el ratón perdía su píxel, la caja encogía y la rejilla
 * o las columnas se recolocaban -- el texto «saltaba». Ninguna regla global
 * pone borde en `a:hover`, así que no había nada que quitar ahí; el reposo ya
 * lo limpian las dos primeras. */
.lp a,
.lp a:visited{ border: 0; text-decoration: none; }
.lp a:not(.lp-btn):hover{ text-decoration: none; }

/* Y EL COLOR DEL TEXTO DE LOS BOTONES, QUE TAMBIÉN LO PISA `:visited`.
 *
 * Un botón es un `<a>`, así que en cuanto se visita su destino el `a:visited`
 * global le cambia el color y «Soy comprador» sale en MORADO dentro de un
 * botón blanco. Se declara el color de cada variante también en `:visited`,
 * que es lo único que gana ahí -- en ese estado el navegador solo deja aplicar
 * colores, y el que se aplica es el último que casa.
 *
 * Y NO SE VE CON `getComputedStyle`: por privacidad devuelve siempre los
 * valores del enlace SIN visitar. Hay que mirarlo en pantalla. */
.lp .lp-btn-verde:visited{ color: #fff; }
.lp .lp-btn-blanco:visited{ color: var(--lp-tinta); }
.lp .lp-btn-linea:visited{ color: var(--lp-tinta); }

/* Y EL COLOR DEL BORDE, APARTE.
 *
 * El `border:0` de arriba mata el borde que pone la hoja global, pero una
 * tarjeta que declara el SUYO --una tarjeta-enlace, como las de la guía del
 * agricultor-- se lo encuentra pintado de morado en cuanto se visita: en
 * `:visited` el navegador solo deja aplicar colores, y el que gana es el del
 * `a:visited` global.
 *
 * Y NO SE VE CON `getComputedStyle`: por privacidad, el navegador devuelve
 * siempre los valores del enlace SIN visitar. Hay que mirarlo en pantalla. */
.lp a:visited{ border-color: inherit; }


/* EL CONTENIDO SE RECOGE, LA FRANJA NO. Es la única medida de página que hay
   en toda la hoja: todo lo demás va de borde a borde. */
.lp .lp-ancho{
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

/* ── BOTONES ─────────────────────────────────────────────────────────── */

.lp .lp-btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 11px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.lp .lp-btn iconify-icon{ font-size: 17px; }

.lp .lp-btn-grande{ padding: 14px 26px; font-size: 15px; }

.lp .lp-btn-verde{ background: var(--lp-verde); color: #fff; }
.lp .lp-btn-verde:hover{ background: var(--lp-verde-oscuro); color: #fff; }

.lp .lp-btn-blanco{ background: #fff; color: var(--lp-tinta); border-color: #fff; }
.lp .lp-btn-blanco:hover{ background: #f2f5f1; }

/* «Iniciar sesión»: blanco con borde, como en la maqueta. */
.lp .lp-btn-linea{ background: #fff; color: var(--lp-tinta); border-color: var(--lp-borde); }
.lp .lp-btn-linea:hover{ background: var(--lp-crema); }

/* ── TODO `<header>` DE AQUÍ DENTRO EMPIEZA LIMPIO ───────────────────
 *
 * `base.php` declara `header{ position:sticky; top:-92px; z-index:1000;
 * width:100%; background:#fff }` para la cabecera de la tienda, y esa regla la
 * coge CUALQUIER `<header>`. En esta página hay varios --la barra de arriba y
 * el título de cada sección-- y el efecto era que los TÍTULOS DE SECCIÓN se
 * quedaban pegados arriba con `z-index:1000`, o sea POR ENCIMA de la barra:
 * medido, «Un proceso simple, transparente y seguro para todos» pintándose
 * sobre el menú. No era un problema de z-index de la barra, era que el título
 * se había convertido en otra cabecera pegajosa.
 *
 * Se limpian todos y luego la barra declara lo suyo, que gana por clase. */
.lp header{
    position: static;
    top: auto; left: auto; right: auto;
    z-index: auto;
    width: auto;
    background: transparent;
    clear: none;
}

/* ── CABECERA ────────────────────────────────────────────────────────
 *
 * DE EXTREMO A EXTREMO DEL BODY (decisión del usuario): el logo pegado al
 * borde izquierdo y los botones al derecho, sin ninguna caja que los recoja.
 * Flota sobre la foto del héroe y se vuelve sólida al bajar. */
.lp .lp-cab{
    position: fixed;
    top: 0; left: 0; right: 0;

    /* POR ENCIMA DE TODO LO DE LA PÁGINA, y con sitio de sobra por debajo: la
       tarjeta de categorías va en 5 y el texto del héroe en 2. No hace falta
       llegar a 1000 --eso es lo que usa la cabecera de la tienda, que aquí no
       existe-- pero sí quedar claramente arriba. */
    z-index: 900;

    display: flex; align-items: center; gap: 28px;
    padding: 16px 32px;

    background: transparent;
    transition: background .2s, box-shadow .2s, padding .2s;
}

/* PEGADA, Y QUE SE NOTE. El .10 de antes era invisible sobre el blanco de la
   página --medido en pantalla: no se distinguía de la cabecera sin pegar-- y
   entonces el contenido parecía pasar POR ENCIMA de la barra en vez de por
   debajo. Con dos sombras, una corta y pegada para dibujar el borde y otra
   larga y suave para levantarla, la barra se separa de la página sin ensuciar
   el fondo. */
.lp .lp-cab.pegada{
    background: rgba(255,255,255,.97);
    box-shadow: 0 1px 0 rgba(20, 38, 26, .07),
                0 6px 24px rgba(20, 38, 26, .13);
    padding-block: 11px;
}

/* EL LOGO ES UNA IMAGEN, y se mide por el ALTO: el ancho lo pone su
   proporción. Con un `width` fijo, un logo que cambie de proporción --y este ya
   ha cambiado una vez-- saldría estirado. */
.lp .lp-marca{
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--lp-tinta);
    text-decoration: none;
    font-size: 19px; font-weight: 800; letter-spacing: -.3px;
}
.lp .lp-marca img{ height: 40px; width: auto; }

/* En el pie el fondo es verde oscuro y el logotipo lleva el «Agro» en verde
   oscuro también: ahí no se leería. Se usa la versión de icono + texto en
   blanco, que es la misma marca dicha de otra forma. */
.lp .lp-marca-ico{ display: flex; font-size: 24px; color: var(--lp-verde); }
.lp .lp-marca b em{ color: var(--lp-verde); font-style: normal; }

/* OJO: ESTO ES UN `<nav>`, Y EL SITIO YA TIENE REGLAS PARA `nav`.
 *
 * `base.php` declara `nav{ background-color:#FFF; z-index:1 }` para la barra de
 * categorías de la tienda, y esa regla la coge CUALQUIER `<nav>` de cualquier
 * componente. Aquí el efecto era una BARRA BLANCA de 897px atravesando la
 * cabecera --medido: `backgroundColor: rgb(255,255,255)` sobre un elemento al
 * que nadie le había puesto fondo-- que tapaba la foto y se comía los enlaces.
 *
 * Se anula. Es el mismo tropiezo que el `<header>` del alta de cliente: antes de
 * usar una etiqueta con nombre --`header`, `nav`, `main`, `footer`, `section`--
 * hay que mirar si `base.php` le tiene una regla global. */
.lp .lp-menu{
    flex: 1;
    display: flex; align-items: center; gap: 26px;

    background: transparent;
    background-color: transparent;
    z-index: auto;
}

/* EL TEXTO DE LA CABECERA ES OSCURO DESDE EL PRINCIPIO, como en la maqueta.
   La foto del héroe entra por la derecha y su mitad izquierda está velada en
   blanco, así que un menú en blanco sería invisible justo donde vive. */
.lp .lp-menu a{
    color: var(--lp-texto);
    text-decoration: none;
    font-size: 14px; font-weight: 600;
}
.lp .lp-menu a:hover{ color: var(--lp-verde); }

.lp .lp-cab-acciones{ display: flex; align-items: center; gap: 10px; }

/* ══ EL MENÚ DE CUENTA EN ESTA CABECERA (26/09/2026) ═══════════════════
 *
 * `TAccountMenu` --el carrito, los avisos y el avatar-- es el MISMO componente
 * que la cabecera de la tienda. Aquí solo se le dice de qué color va.
 *
 * Y se le dice SIN TOCAR SU HOJA: el componente declara sus colores como
 * `var(--sh-verde, #16a34a)`, o sea «el verde de la cabecera de la tienda, y si
 * no existe, este». Aquí no existe --esta página tiene su propia paleta-- así
 * que caía en el de respaldo, que es OTRO verde: #16a34a al lado de #236e30 no
 * se lee como un tono distinto, se lee como un componente traído de otro sitio.
 *
 * Declarando las variables de la tienda sobre este nodo, el componente las
 * encuentra y se viste solo. Es lo que hace que un componente compartido no
 * necesite una segunda hoja por cada sitio donde se use.
 */
.lp .lp-cab .TAccountMenu{
    --sh-verde:       var(--lp-verde);
    --sh-verde-hondo: var(--lp-verde-oscuro);
    --sh-verde-suave: var(--lp-verde-claro);
    --sh-verde-linea: var(--lp-verde-borde);

    --sh-tinta:       var(--lp-tinta);
    --sh-tinta-suave: var(--lp-suave);
    --sh-linea:       var(--lp-borde);

    /* EL ARO DE LAS PASTILLAS DE NÚMERO. En la tienda es el crema de su franja;
       aquí la barra es TRANSPARENTE sobre la foto del héroe y blanca al bajar
       (`.pegada`), así que el blanco vale para los dos: sobre la foto el aro
       separa la pastilla del icono, y sobre el blanco no se ve. */
    --sh-fondo: #fff;
}

/* Un poco de aire antes de los botones de alta, que son la conversión de estas
   páginas: pegados a la cesta parecían parte del mismo grupo. */
.lp .lp-cab .TAccountMenu{ margin-right: 4px; }

/*
 * EL DISPARADOR LLEVA SU PÍLDORA BLANCA SIEMPRE, Y AQUÍ SÍ HACE FALTA.
 *
 * En la tienda el fondo solo aparece al pasar por encima, porque debajo hay una
 * franja crema lisa. Esta barra es TRANSPARENTE SOBRE LA FOTO del héroe, y el
 * rótulo «MI CUENTA» va a 10,5 px en `--lp-suave` (#6b7a70): sobre un cielo
 * claro se lee mal y sobre una foto oscura no se lee. No es una preferencia,
 * es el contraste de la WCAG, y una foto de fondo no tiene un valor fijo contra
 * el que medirlo -- así que el fondo lo pone la píldora.
 *
 * Blanca con borde, que es exactamente `.lp-btn-linea`, el botón de al lado: la
 * esquina de esta cabecera ya tiene esa forma y no hace falta inventar otra.
 * La campana y la cesta se quedan desnudas a propósito -- son iconos en verde
 * oscuro, del mismo peso que los rótulos del menú que tienen al lado, y tres
 * píldoras seguidas convierten la barra en una botonera.
 */
.lp .lp-cab .TAccountMenu .am-disparo{
    background: var(--lp-papel);
    border-color: var(--lp-borde);
}

.lp .lp-cab .TAccountMenu .am-disparo:hover,
.lp .lp-cab .TAccountMenu[data-abierto="1"] .am-disparo{
    background: var(--lp-crema);
    border-color: var(--lp-verde-borde);
}

/* ── EL ☰, CENTRADO DE VERDAD ────────────────────────────────────────
 *
 * El BOTÓN ya estaba centrado en la cabecera --su centro y el de la barra
 * caían los dos en 38--, pero el ICONO de dentro no: medido a 820, el botón
 * iba de 26 a 51 y el icono de 42 a 62, o sea **13,5 px por debajo del centro
 * y sobresaliendo del botón por abajo**.
 *
 * El motivo es que el botón era `display: block` y el icono `inline-block`:
 * la caja de línea la manda entonces el `line-height` heredado --32px, con
 * 13 px de contenido en el botón-- y el icono se alinea por su base, no por
 * su centro. Un `align-items: center` en el padre no hacía nada porque el
 * padre no era flex.
 *
 * Se resuelve haciendo flex el propio botón. Y de paso la caja pasa a 40×40,
 * la misma que la campana y la cesta de al lado: así los cuatro comparten
 * centro y tamaño de pulsación, en vez de tener uno de 37×25 en medio. */
.lp .lp-hamburguesa{
    display: none;                  /* se enciende en el `@media` de abajo */
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    padding: 0;
    line-height: 1;
    border: 0; background: transparent;
    color: var(--lp-tinta); font-size: 26px;
}

/* ── HÉROE ───────────────────────────────────────────────────────────
 *
 * La foto va de fondo y no como `<img>`: así el degradado que hace legible el
 * texto es una capa más de la misma declaración y no un `::before` que haya que
 * apilar. El velo es por la IZQUIERDA, que es donde está el texto; la figura
 * queda limpia a la derecha, como en la maqueta. */
.lp .lp-heroe{
    position: relative;
    display: flex; align-items: center;
    min-height: 640px;
    padding: 120px 0 190px;

    background-image:
        linear-gradient(100deg,
            rgba(255,255,255,.92) 0%,
            rgba(255,255,255,.78) 26%,
            rgba(255,255,255,.30) 48%,
            rgba(255,255,255,0)   66%),
        url('/assets/landing/hero.jpg');
    background-size: auto, cover;
    background-position: center, center right;
    background-repeat: no-repeat, no-repeat;
}

.lp .lp-heroe-txt{ position: relative; z-index: 2; }

.lp .lp-heroe h1{
    margin: 0 0 18px;
    font-size: clamp(30px, 4.1cqw, 52px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -1.2px;
    color: var(--lp-tinta);
}
.lp .lp-heroe h1 em{ color: var(--lp-verde-vivo); font-style: normal; }

.lp .lp-heroe-sub{
    margin: 0 0 28px;
    max-width: 480px;
    font-size: clamp(14px, 1.25cqw, 17px);
    color: var(--lp-texto);
}

.lp .lp-heroe-botones{ display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

/* La prueba social: caras y una línea. Icono en su columna y el texto en la
   segunda, para que las dos líneas arranquen en la misma vertical. */
.lp .lp-prueba{ display: flex; align-items: center; gap: 12px; }

.lp .lp-caras{ display: flex; flex: 0 0 auto; }
.lp .lp-caras i{
    width: 32px; height: 32px;
    margin-left: -10px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--lp-verde-claro);
    color: var(--lp-verde);
    font-size: 15px;
}
.lp .lp-caras i:first-child{ margin-left: 0; }

.lp .lp-prueba small{
    flex: 1; min-width: 0;
    font-size: 12.5px; color: var(--lp-texto); line-height: 1.4;
}

/* ── CATEGORÍAS ──────────────────────────────────────────────────────
 *
 * La tarjeta PISA la unión entre el héroe y la franja de abajo, como en la
 * maqueta: por eso el margen negativo y el `z-index`. */
.lp .lp-cats-zona{ position: relative; z-index: 5; margin-top: -110px; }

.lp .lp-cats{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    background: #fff;
    border: 1px solid var(--lp-borde);
    border-radius: 20px;
    box-shadow: 0 16px 44px rgba(20, 38, 26, .10);
    overflow: hidden;
}

.lp .lp-cat{
    display: flex; align-items: center; gap: 12px;
    padding: 18px 16px;
    border-right: 1px solid var(--lp-borde);
    text-decoration: none;
    color: inherit;
}
.lp .lp-cat:last-child{ border-right: 0; }
.lp .lp-cat:hover{ background: var(--lp-crema); }

.lp .lp-cat-foto{
    flex: 0 0 auto;
    width: 54px; height: 54px;
    border-radius: 12px;
    object-fit: contain;
}

.lp .lp-cat-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp .lp-cat-txt b{ font-size: 13.5px; font-weight: 700; color: var(--lp-tinta); }
.lp .lp-cat-txt small{ font-size: 11.5px; color: var(--lp-suave); }

/* «Ver todas» es la última celda, con su flecha en círculo. */
.lp .lp-cat--todas{ justify-content: center; text-align: center; }
.lp .lp-cat--todas span{
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--lp-borde);
    color: var(--lp-verde);
}

/* ── LAS DOS CARAS ───────────────────────────────────────────────── */

.lp .lp-dual{
    position: relative;
    padding: 70px 0 0;

    background-image:
        linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.90) 60%, rgba(255,255,255,.96) 100%),
        url('/assets/landing/franja-dual.jpg');
    background-size: auto, cover;
    background-position: center, center;
}

/* LAS DOS CAJAS DE LOS LADOS.
 *
 * Asoman por los bordes y se quedan DETRÁS del contenido (`z-index:0` contra el
 * `1` de la rejilla): son atrezo, y taparlo sería justo al revés. `pointer-
 * events:none` para que no se coman un clic del texto que tienen al lado. */
.lp .lp-caja{
    position: absolute;
    bottom: 96px;
    z-index: 0;
    width: clamp(140px, 18cqw, 260px);
    pointer-events: none;
    filter: drop-shadow(0 14px 26px rgba(20, 38, 26, .18));
}
.lp .lp-caja--izq{ left: -28px; }
.lp .lp-caja--der{ right: -28px; }

.lp .lp-dual-rejilla{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr minmax(220px, 300px) 1fr;
    gap: 40px;
    align-items: center;
}

.lp .lp-etiqueta{
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--lp-verde-claro);
    border: 1px solid var(--lp-verde-borde);
    color: var(--lp-verde-oscuro);
    font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
}

.lp .lp-dual-col h2{
    margin: 0 0 20px;
    font-size: clamp(22px, 2.4cqw, 30px);
    font-weight: 800; line-height: 1.2; letter-spacing: -.6px;
    color: var(--lp-tinta);
}

/* Icono en su columna y el texto en la segunda: todas las líneas arrancan en
   la misma vertical aunque una ocupe dos renglones. */
.lp .lp-ticks{ list-style: none; margin: 0 0 26px; padding: 0; }
.lp .lp-ticks li{
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 11px;
    font-size: 14px; color: var(--lp-texto);
}
.lp .lp-ticks iconify-icon{ flex: 0 0 auto; margin-top: 2px; font-size: 17px; color: var(--lp-verde); }

.lp .lp-movil img{ width: 100%; filter: drop-shadow(0 22px 44px rgba(20, 38, 26, .22)); }

/* ── CIFRAS ──────────────────────────────────────────────────────────
 *
 * Banda oscura sobre la foto, dentro del ancho de página: en la maqueta no
 * llega a los bordes, se apoya sobre la franja de arriba. */
.lp .lp-cifras{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;

    margin-top: 60px;
    border-radius: 18px 18px 0 0;
    overflow: hidden;

    background-image:
        linear-gradient(rgba(14, 34, 17, .82), rgba(14, 34, 17, .82)),
        url('/assets/landing/cifras.jpg');
    background-size: cover;
    background-position: center;
}

.lp .lp-cifra{
    display: flex; align-items: center; gap: 13px;
    padding: 26px 22px;
    border-right: 1px solid rgba(255,255,255,.14);
}
.lp .lp-cifra:last-child{ border-right: 0; }

.lp .lp-cifra > span{
    flex: 0 0 auto;
    color: #9fdcab;
    font-size: 26px;
    display: flex;
}
.lp .lp-cifra > div{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp .lp-cifra b{ font-size: 24px; font-weight: 800; color: #fff; line-height: 1.1; }
.lp .lp-cifra small{ font-size: 12px; color: rgba(255,255,255,.78); }

/* ── SECCIONES CON TÍTULO ────────────────────────────────────────── */

.lp .lp-seccion{ padding: 74px 0; background: #fff; }
.lp .lp-seccion--clara{ background: var(--lp-crema); }

/* EL CENTRADO SE DECLARA EN CADA TÍTULO, NO SOLO EN SU CAJA.
 *
 * Una hoja global del sitio pone `text-align:left` a los encabezados --medido:
 * `.lp-titulo` en `center` y su `<h2>` en `left`-- así que heredarlo no basta y
 * el título salía pegado a la izquierda con la hojita centrada debajo. Se dice
 * en cada uno. */
.lp .lp-titulo{ text-align: center; margin-bottom: 44px; }
.lp .lp-titulo h2,
.lp .lp-titulo p{ text-align: center; }
.lp .lp-titulo h2{
    margin: 0 0 12px;
    font-size: clamp(24px, 2.8cqw, 34px);
    font-weight: 800; letter-spacing: -.7px;
    color: var(--lp-tinta);
}

/* La hojita con sus dos rayas, como en la maqueta. Las rayas son
   pseudoelementos porque son decoración: no tienen que leerse. */
.lp .lp-hoja{
    display: flex; align-items: center; justify-content: center; gap: 12px;
    color: var(--lp-verde);
    font-size: 16px;
}
.lp .lp-hoja::before,
.lp .lp-hoja::after{
    content: ''; width: 54px; height: 1px; background: var(--lp-borde);
}

.lp .lp-titulo p{ margin: 12px 0 0; font-size: 14px; color: var(--lp-suave); }

/* ── CÓMO FUNCIONA ──────────────────────────────────────────────── */

.lp .lp-pasos{
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: stretch; gap: 10px;
}

.lp .lp-pasos li{
    flex: 1; min-width: 0;
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 34px 18px 24px;
    text-align: center;
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    background: #fff;
}

.lp .lp-paso-num{
    position: absolute;
    top: -15px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--lp-verde);
    color: #fff;
    font-size: 13px; font-weight: 800;
}

/* LAS ILUSTRACIONES DE LA MAQUETA, y no un icono en un círculo.
 *
 * Vienen recortadas del PNG que las trae las cuatro juntas, sin el número
 * --ese lo dibuja la tarjeta, y así se puede reordenar o traducir sin volver a
 * exportar la imagen--. Alto fijo para que las cuatro tarjetas midan lo mismo
 * aunque los recortes no tengan la misma proporción. */
.lp .lp-paso-ilus{
    display: flex; align-items: flex-end; justify-content: center;
    width: 100%; height: 108px;
    margin-bottom: 16px;
}
.lp .lp-paso-ilus img{ max-height: 100%; width: auto; object-fit: contain; }

.lp .lp-paso-ico{
    width: 74px; height: 74px;
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--lp-verde-claro);
    border: 1px solid var(--lp-verde-borde);
    color: var(--lp-verde);
    font-size: 32px;
}

.lp .lp-pasos b,
.lp .lp-pasos small{ text-align: center; }
.lp .lp-pasos b{ font-size: 15px; font-weight: 700; color: var(--lp-tinta); margin-bottom: 6px; }
.lp .lp-pasos small{ font-size: 12.5px; color: var(--lp-suave); line-height: 1.5; }

.lp .lp-flecha{
    display: flex; align-items: center;
    color: var(--lp-tenue);
    font-size: 18px;
}

/* ── SIN COMENTARIOS TODAVÍA ───────────────────────────────────────
   La zona de testimonios SE QUEDA, vacía, hasta que haya valoraciones de
   compras reales (28/09/2026): las citas que había eran texto de maqueta con
   nombres inventados, y publicarlas como opiniones reales está prohibido.
   Mismo dibujo que `.cn-sin-opiniones` de `/para-tu-negocio` --icono en su
   círculo, rótulo y mensaje en un recuadro discontinuo--, con los tokens de
   esta hoja. Candidato a la hoja común del área pública. */
.lp .lp-sin-opiniones{
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 4px; padding: 34px 20px 30px;
    background: var(--lp-crema);
    border: 1px dashed var(--lp-verde-borde);
    border-radius: var(--lp-radio);
}
.lp .lp-sin-icono{
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 6px;
    border-radius: 50%; background: #fff; border: 1px solid var(--lp-verde-borde);
}
.lp .lp-sin-icono iconify-icon{ font-size: 24px; color: var(--lp-verde); }
.lp .lp-sin-opiniones b{ font-size: 15px; font-weight: 800; color: var(--lp-tinta); }
.lp .lp-sin-opiniones p{ margin: 2px 0 0; max-width: 460px; font-size: 13px; line-height: 1.5; color: var(--lp-suave); text-align: center; }

/* ── TESTIMONIOS ────────────────────────────────────────────────── */

.lp .lp-testimonios{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.lp .lp-testi{
    margin: 0;
    padding: 24px;
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    background: #fff;
}

.lp .lp-testi blockquote{
    margin: 0 0 18px;
    font-size: 14px; color: var(--lp-texto); line-height: 1.6;
}

.lp .lp-testi figcaption{ display: flex; align-items: center; gap: 12px; }

.lp .lp-avatar{
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--lp-verde-claro);
    border: 1px solid var(--lp-verde-borde);
    color: var(--lp-verde-oscuro);
    font-size: 13px; font-weight: 800;
}

.lp .lp-testi figcaption > div{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp .lp-testi figcaption b{ font-size: 13.5px; color: var(--lp-tinta); }
.lp .lp-testi figcaption small{ font-size: 11.5px; color: var(--lp-suave); line-height: 1.35; }

/* ── LLAMADA FINAL ──────────────────────────────────────────────── */

.lp .lp-cta{
    padding: 40px 0;
    background-image:
        linear-gradient(rgba(14, 34, 17, .30), rgba(14, 34, 17, .30)),
        url('/assets/landing/cta.jpg');
    background-size: cover;
    background-position: center;
}

.lp .lp-cta-tarjeta{
    position: relative;
    max-width: 620px;
    margin-inline: auto;
    padding: 44px 32px 34px;
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 20px 50px rgba(20, 38, 26, .18);
    text-align: center;
}

.lp .lp-cta-hoja{
    position: absolute;
    top: -26px; left: 50%; transform: translateX(-50%);
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(20, 38, 26, .14);
    color: var(--lp-verde);
    font-size: 24px;
}

.lp .lp-cta-tarjeta h2,
.lp .lp-cta-tarjeta p{ text-align: center; }
.lp .lp-cta-tarjeta h2{
    margin: 0 0 8px;
    font-size: clamp(20px, 2.4cqw, 28px);
    font-weight: 800; letter-spacing: -.6px;
    color: var(--lp-tinta);
}
.lp .lp-cta-tarjeta p{ margin: 0 0 24px; font-size: 14px; color: var(--lp-suave); }

.lp .lp-cta-botones{ display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.lp .lp-cta-botones .lp-btn-blanco{ border-color: var(--lp-borde); }

/* ── GARANTÍAS ──────────────────────────────────────────────────── */

/* Se fueron a `TPlataforma/css/TGarantias.css`, colgadas de `.ac-garantias`:
   la franja la pinta ahora `base.php` para todo el sitio y aquí solo existía
   dentro de un `.lp`. Mismo camino que hizo el pie a `TPie.css`. */

/* ── PIE ────────────────────────────────────────────────────────── */

/* EL PIE, CLARO (25/08/2026).
 *
 * Era una franja de verde oscuro a sangre, y ocupando el final de todas las
 * páginas se comía el remate: la página terminaba en un bloque pesado y el
 * logo, que ahí abajo tenía que ir en verde claro para leerse, salía en un
 * tono que no es el de la marca.
 *
 * Ahora es crema con tinta verde, así que la marca se escribe con SUS colores
 * --los mismos que en la cabecera-- y la página acaba donde acaba el
 * contenido, sin un telón oscuro detrás.
 *
 * La raya de arriba hace el trabajo que hacía el contraste: separa el pie de
 * la última sección sin necesidad de cambiar de peso. */
/* EL `<nav>` DEL MENÚ, LIMPIO. `base.php` declara `nav{background:#FFF;
   border-bottom:1px solid #bbb; z-index:1}` para la barra de categorías, y eso
   le dibujaba un rectángulo blanco con raya gris al menú del landing. */
.lp .lp-menu{ background: transparent; border: 0; z-index: auto; }

/* ── ESTRECHO ───────────────────────────────────────────────────── */

@container (max-width: 1020px){

    .lp .lp-menu{ display: none; }
    .lp .lp-menu.abierto{
        display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
        position: absolute;
        top: 100%; left: 0; right: 0;
        padding: 18px 32px 22px;
        background: #fff;
        box-shadow: 0 12px 26px rgba(20, 38, 26, .12);
    }
    .lp .lp-menu.abierto a{ color: var(--lp-texto); }

    /* ── DESPLEGADO, EN COLUMNA (24/09/2026) ───────────────────────────
       Desde que la barra sale del gestor de zonas, los enlaces cuelgan de
       `ul.nav-zona-lista`, que es un `display:flex` en FILA con 26px entre
       entradas: el panel abierto los ponía de lado, «Productos» y «Precios»
       quedaban fuera de la pantalla y se leían a trozos. Aquí, uno debajo de
       otro y a la izquierda, con una zona de toque de 44px --es un dedo, no un
       ratón--. */
    .lp .lp-menu.abierto .nav-zona-lista{
        flex-direction: column; align-items: stretch; gap: 0;
        width: 100%;
    }
    .lp .lp-menu.abierto .nav-zona-item > a{
        display: flex; align-items: center;
        min-height: 44px;
        font-size: 16px;
        color: var(--lp-texto);
    }
    /* El `<span>` del rótulo trae `font: 12px` de la hoja global (el shorthand
       `font:` fija el tamaño y no lo hereda del `<a>`): sin esto, 16px puestos
       en el enlace no llegaban al texto. */
    .lp .lp-menu.abierto .nav-zona-item > a > span{ font: inherit; }
    .lp .lp-menu.abierto .nav-zona-item + .nav-zona-item{ border-top: 1px solid var(--lp-borde); }

    /* `inline-flex` Y NO `block`: es lo que centra el icono dentro del botón.
       Ver la nota de la regla de arriba. */
    .lp .lp-hamburguesa{ display: inline-flex; order: 3; }
    .lp .lp-cab-acciones{ margin-left: auto; }

    /* El móvil se va: en una columna, el texto de las dos caras es lo que hay
       que leer, y la foto del teléfono lo empujaría fuera de la pantalla. */
    .lp .lp-dual-rejilla{ grid-template-columns: 1fr; gap: 44px; }
    .lp .lp-movil{ display: none; }

    /* Las cajas de los lados se van con el móvil: en una columna se meterían
       debajo del texto. */
    .lp .lp-caja{ display: none; }

    .lp .lp-pasos{ flex-wrap: wrap; }
    .lp .lp-pasos li{ flex: 1 1 240px; }
    .lp .lp-flecha{ display: none; }

}

@container (max-width: 620px){
    .lp .lp-heroe{ min-height: 0; padding: 104px 0 150px; }
    .lp .lp-cab{ padding-inline: 18px; }
    .lp .lp-ancho{ padding-inline: 18px; }

    /* LA HAMBURGUESA SE SALÍA DE LA PANTALLA (14/09/2026). A 400 px no caben el
       logo, dos botones y el menú con 28 px entre cada uno: medido, el botón del
       menú acababa en x=466, así que en el móvil las páginas de plataforma no
       tenían menú. Se juntan las piezas y «Iniciar sesión» se va: sigue dentro
       del alta y del propio menú. */
    .lp .lp-cab{ gap: 10px; }
    .lp .lp-cab-acciones{ gap: 6px; }
    .lp .lp-cab-acciones .lp-btn-linea{ display: none; }
    .lp .lp-cab-acciones .lp-btn{ padding-inline: 12px; }
    .lp .lp-marca img{ max-width: 128px; height: auto; }
    .lp .lp-cat{ border-right: 0; border-bottom: 1px solid var(--lp-borde); }
}

/* ════════════════════════════════════════════════════════════════════════
   LA NAVEGACIÓN, DESDE EL GESTOR DE ZONAS  (25/08/2026)
   ════════════════════════════════════════════════════════════════════════

   La barra, las cuatro columnas del pie y la línea de legales las pinta ahora
   `NavigationRender`, que envuelve los enlaces en `<nav><ul><li>`. La hoja de
   siempre apuntaba a `.lp-menu a` --el enlace colgando directo del `nav`-- así
   que aquí se hace el puente: mismo aspecto, marcado nuevo.

   No se han tocado las reglas de arriba: siguen sirviendo a cualquier bloque
   que se escriba a mano. */

.lp .nav-zona-lista{
    display: flex;
    align-items: center;
    gap: 26px;

    margin: 0;
    padding: 0;
    list-style: none;
}

/* EL `<nav>` GLOBAL TRAE FONDO BLANCO Y BORDE --`base.php` los declara para la
   barra de categorías de la tienda-- y cualquier `<nav>` de cualquier pantalla
   los hereda: sobre la foto de la portada era un rectángulo blanco, y sobre el
   verde del pie, una raya gris. Es la misma nota que ya estaba escrita para
   `.lp-menu` y `.lp-social`; ahora alcanza también a las zonas. */
.lp .nav-zona{ background: transparent; border: 0; z-index: auto; }
.lp .nav-zona-item{ position: static; background: transparent; }

/* ── LA BARRA DE ARRIBA ─────────────────────────────────────────────── */
.lp .lp-menu .nav-zona-item > a{
    color: var(--lp-texto);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
/* AL PASAR EL RATÓN, EL MISMO SUBRAYADO QUE LLEVA LA ENTRADA ACTIVA.
 *
 * Solo cambiaba el color, y un verde sobre gris oscuro es un cambio que hay que
 * mirar para verlo: la barra no respondía al ratón. El subrayado sí se ve de
 * refilón, que es justo lo que tiene que hacer un hover.
 *
 * MISMO GROSOR Y MISMA SEPARACIÓN que el activo (`text-underline-offset: 6px`,
 * más abajo). No es por simetría: con medidas distintas, la raya salta de sitio
 * al pasar de una entrada a otra si una de ellas es la activa.
 *
 * Y sí, mientras el ratón está encima hay DOS entradas subrayadas --la activa y
 * la señalada--. Es correcto: una dice dónde estás y la otra dónde vas a ir, y
 * la segunda desaparece al retirar el ratón. Quitarle el subrayado al hover
 * para «no confundir» es quedarse sin señal por miedo a tener dos. */
.lp .lp-menu a:hover,
.lp .lp-menu .nav-zona-item > a:hover{
    color: var(--lp-verde);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--lp-verde);
}

/* El color se declara TAMBIÉN en el `<span>` de dentro: la hoja global pinta
   de morado lo visitado, y en `:visited` el navegador no deja cambiar el color
   desde cualquier regla. Se viste el hijo, que no tiene esa restricción. */
.lp .lp-menu .nav-zona-item > a > span{ color: var(--lp-texto); }
.lp .lp-menu .nav-zona-item > a:hover > span{ color: var(--lp-verde); }

/* ── LAS COLUMNAS DEL PIE ───────────────────────────────────────────── */
.lp .nav-zona-col{ display: flex; flex-direction: column; gap: 9px; }

/* EL TÍTULO DE COLUMNA. Con el pie claro va en tinta, no en blanco: era el
   resto de cuando el pie era verde oscuro y, al cambiar el fondo, dejaba los
   cinco rótulos en blanco sobre crema -- ilegibles y sin dar error. */
.lp .nav-zona-titulo{
    color: var(--lp-tinta);
    font-size: 13px;
    margin-bottom: 3px;
}

.lp .nav-zona--columna .nav-zona-lista{
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.lp .nav-zona-col .nav-zona-item > a > span{ color: var(--lp-texto); font-size: 12.5px; }
.lp .nav-zona-col .nav-zona-item > a:hover > span{ color: var(--lp-verde); }
.lp .nav-zona-col .nav-zona-item > a{ text-decoration: none; }

/* ── LA LÍNEA DE LEGALES ────────────────────────────────────────────── */
.lp .lp-legal .nav-zona-lista{ gap: 16px; }
.lp .lp-legal .nav-zona-item > a > span{ color: var(--lp-suave); font-size: 11.5px; }
.lp .lp-legal .nav-zona-item > a:hover{ text-decoration: underline; }
.lp .lp-legal .nav-zona-item > a:hover > span{ color: var(--lp-verde); }

/* El pie ya no vive aquí: su hoja es `TPlataforma/css/TPie.css`, que carga
   `base.php` para todo el sitio. Se sacó de aquí porque colgaba de `.lp` y por
   eso solo existía en el landing. */


/* ══ EL BOTÓN DE VOLVER ARRIBA ═════════════════════════════════════
 *
 * Va en el `body` y se coloca por JS encima del badge de soporte, que no mide
 * siempre lo mismo. Aquí solo su aspecto y su aparición.
 *
 * `z-index` POR DEBAJO DEL CHAT (9000): si empatara, el botón se pondría
 * delante de una conversación abierta al pasar el ratón, y lo que se está
 * leyendo manda sobre un atajo de navegación. */
.pg-arriba{
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 8900;

    width: 42px; height: 42px;          /* el global `button{height:25px}` */
    display: grid; place-items: center;

    border: 1px solid var(--lp-verde-borde, #d3e7cf);
    border-radius: 50%;
    background: #fff;
    color: var(--lp-verde, #236e30);
    font-size: 19px;
    cursor: pointer;

    box-shadow: 0 6px 20px rgba(16, 50, 24, .18);

    /* ESCONDIDO DE VERDAD MIENTRAS NO TOCA: `visibility` además de la opacidad
       y el desplazamiento, porque un botón a opacidad 0 sigue recibiendo el
       clic -- y este está justo encima del chat de soporte. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s, transform .18s, visibility .18s, bottom .18s;
}

.pg-arriba.es-visible{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pg-arriba:hover{
    background: var(--lp-verde-claro, #eef6ec);
    border-color: var(--lp-verde, #236e30);
}

/* Quien pide no animarse, no se anima: el botón aparece y desaparece sin
   transición, pero sigue apareciendo. */
@media (prefers-reduced-motion: reduce){
    .pg-arriba{ transition: none; transform: none; }
    .pg-arriba.es-visible{ transform: none; }
}


/* ── LA ENTRADA DEL MENÚ EN LA QUE SE ESTÁ ──────────────────────────
 *
 * Subrayada, y con el subrayado SEPARADO del texto --`text-underline-offset`--
 * porque a ras de las letras se confunde con el subrayado del hover y con las
 * colas de la «g» y la «p», que en «Para agricultores» son tres.
 *
 * El color también cambia: el subrayado solo lo ve quien lo busca, y esta marca
 * tiene que leerse de un vistazo al entrar en la página.
 *
 * SE DECLARA PARA LAS DOS FORMAS de la barra --el enlace suelto de siempre y el
 * que envuelve el gestor de zonas en `<li>`-- porque conviven: es la misma nota
 * que ya está escrita unas líneas más arriba. */
.lp .lp-menu a.es-activo,
.lp .lp-menu .nav-zona-item > a.es-activo{
    color: var(--lp-verde);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--lp-verde);
}

/* Y al pasar por encima de la que ya está activa, no cambia nada: parpadear
   sobre la página en la que ya estás no informa de nada. */
.lp .lp-menu a.es-activo:hover,
.lp .lp-menu .nav-zona-item > a.es-activo:hover{ color: var(--lp-verde); }

/* El `a:visited` global pinta de magenta lo ya visitado, y la entrada activa es
   por definición una página visitada. */
.lp .lp-menu a.es-activo:visited,
.lp .lp-menu .nav-zona-item > a.es-activo:visited{ color: var(--lp-verde); }



/* ═══════════════════════════════════════════════════════════════════════════
 *  EL PIE DEL SITIO   ·   uno solo, para todas las páginas
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ── POR QUÉ SALE DE `TLanding.css` ─────────────────────────────────
 *
 * El pie bueno --el de la portada-- vivía dentro de la hoja del landing y
 * colgaba de `.lp`, así que solo existía donde había un landing. El resto del
 * sitio arrastraba OTRO pie (`www_oneway/footer.php`), y la tienda no tenía
 * ninguno. Tres pies para un sitio son tres sitios donde cambiar un enlace
 * legal, y ya se veía: el de la portada llevaba las columnas del gestor de
 * zonas y el otro no.
 *
 * Aquí está el único, autocontenido: declara sus propias variables y no
 * depende de que alguien haya cargado la hoja del landing. Lo pinta `base.php`
 * para toda la web.
 *
 * ── SE COLGABA DE `.lp` Y AHORA DE `.ac-pie` ───────────────────────
 *
 * `pie.php` envuelve el pie en `.ac-pie`, así que las páginas de plataforma
 * --que ya viven dentro de un `.lp`-- siguen viéndose igual y el resto lo
 * hereda sin tener que envolverse en nada.
 *
 * ── Y CON `@media`, NO CON `@container` ────────────────────────────
 *
 * La hoja del landing usa consultas de contenedor porque su raíz declara un
 * `container-type`. Fuera de ahí no hay contenedor que consultar y esas reglas
 * NO SE APLICAN NUNCA -- sin error, y en un pie no se nota hasta que alguien
 * abre el sitio en un móvil.
 */

.ac-pie{
    --acp-verde:      #2f7d3f;
    --acp-tinta:      #16241a;
    --acp-texto:      #3f4a43;
    --acp-suave:      #6b7a70;
    --acp-borde:      #e6ebe6;
    --acp-crema:      #f6f9f4;
    --acp-verde-borde:#bcdcc4;
    --acp-fondo:      #faf8f2;
}

.ac-pie .lp-pie{
    padding: 46px 0 0;
    background: var(--acp-fondo);
    color: var(--acp-texto);
    border-top: 1px solid var(--acp-borde);
}

/* La única medida de página del pie. Se declara aquí y no se hereda del
   landing: fuera de él, `.lp-ancho` no existe. */
.ac-pie .lp-ancho{
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

.ac-pie .lp-pie-rejilla{
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 34px;
}

/* ── LA MARCA ───────────────────────────────────────────────────── */

.ac-pie .lp-marca{
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--acp-tinta);
    text-decoration: none;
    font-size: 19px; font-weight: 800; letter-spacing: -.3px;
    margin-bottom: 12px;
}
.ac-pie .lp-marca img{ height: 40px; width: auto; }

/* El `<b>` se lo llevaba la regla global `b,strong{color:#000}`, y el color no
   se hereda cuando alguien lo declara por debajo: hay que decirlo aquí. */
.ac-pie .lp-pie-marca .lp-marca b{ color: var(--acp-tinta); font-size: 19px; letter-spacing: -.2px; }
.ac-pie .lp-pie-marca .lp-marca b em{ color: var(--acp-verde); font-style: normal; }
.ac-pie .lp-pie-marca .lp-marca-ico{ display: flex; color: var(--acp-verde); font-size: 26px; }

.ac-pie .lp-pie-marca p{
    margin: 0 0 16px;
    font-size: 12.5px; line-height: 1.55;
    max-width: 260px; color: var(--acp-suave);
}

/* ── LOS DOS `<nav>` ────────────────────────────────────────────────
   `base.php` declara `nav{ background:#FFF; border-bottom:1px solid #bbb;
   z-index:1 }` para la barra de categorías, y eso dibujaba un rectángulo
   blanco con una raya gris debajo de los iconos sociales y de los legales.
   Medido, no supuesto. */
.ac-pie nav{ background: transparent; border: 0; z-index: auto; padding: 0; }

/* Y SUS ENLACES NO SON LOS DEL MENÚ. `base.php` declara además
   `nav a{ font: bold 15px Arial; color:#808080; padding:8px }` para la barra de
   categorías: sin desdecirlo, los enlaces del pie salen en Arial gris con ocho
   píxeles de relleno cada uno, y las columnas se separan como si fueran
   botones. */
.ac-pie nav a{ font: inherit; padding: 0; color: inherit; }

.ac-pie .lp-social{ display: flex; gap: 10px; }
.ac-pie .lp-social a{
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--acp-borde);
    color: var(--acp-verde);
    font-size: 15px;
    text-decoration: none;
}
.ac-pie .lp-social a:hover{ background: var(--acp-crema); border-color: var(--acp-verde-borde); }

/* ── LAS COLUMNAS ───────────────────────────────────────────────── */

/* ── EL TITULO DE LA COLUMNA ESTA FUERA DE LA COLUMNA ───────────────
 *
 * El gestor de zonas monta
 * `div.nav-zona-col > b.nav-zona-titulo + nav.lp-pie-col > ul > li > a > span`,
 * o sea que el rotulo **es hermano** del `<nav>`, no hijo. Vestirlo con
 * `.lp-pie-col b` --que es lo que parecia natural-- no aplicaba a nada: el
 * titulo se quedaba con la letra heredada y, sobre todo, PEGADO a su primer
 * enlace, mientras entre enlaces si habia 9px. Se leia como si «Plataforma» y
 * «Como funciona» fueran la misma cosa.
 *
 * Quien manda la separacion es el contenedor `.nav-zona-col`, y el titulo
 * necesita MAS aire que el que hay entre items: si tiene el mismo, deja de
 * parecer un titulo. */
.ac-pie .nav-zona-col{ display: flex; flex-direction: column; }
.ac-pie .nav-zona-titulo{
    display: block;
    color: var(--acp-tinta);
    font-size: 13px; font-weight: 700;
    margin-bottom: 14px;
}

.ac-pie .lp-pie-col{ display: flex; flex-direction: column; gap: 9px; }
/* EL COLOR VA TAMBIÉN AL `<span>` DE DENTRO, Y NO ES UN DETALLE.
   El gestor de zonas envuelve cada rótulo en un `<span>`, y la regla global es
   `a, .link, a:active, a:focus, a:visited, a span { color:#910c88 }` -- con
   `a span` dentro. Vestir solo el `<a>` deja el enlace del color correcto y el
   texto que se lee, magenta: el color lo pone el hijo, que es quien pinta. Es
   la misma trampa de la cabecera. */
.ac-pie .lp-pie-col a,
.ac-pie .lp-pie-col a span{ color: var(--acp-texto); font-size: 12.5px; text-decoration: none; font-weight: 400; }
.ac-pie .lp-pie-col a:hover,
.ac-pie .lp-pie-col a:hover span{ color: var(--acp-verde); text-decoration: underline; }
.ac-pie .lp-pie-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ac-pie .lp-pie-col li{ margin: 0; padding: 0; }

/* ── LA LÍNEA DE LEGALES ────────────────────────────────────────── */

.ac-pie .lp-pie-legal{
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding-block: 16px;
    border-top: 1px solid var(--acp-borde);
    font-size: 11.5px;
    color: var(--acp-suave);
}
.ac-pie .lp-pie-legal nav{ display: flex; gap: 20px; flex-wrap: wrap; }
.ac-pie .lp-pie-legal ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.ac-pie .lp-pie-legal li{ margin: 0; padding: 0; }
.ac-pie .lp-pie-legal a,
.ac-pie .lp-pie-legal a span{ color: var(--acp-suave); text-decoration: none; font-weight: 400; font-size: 11.5px; }
.ac-pie .lp-pie-legal a:hover,
.ac-pie .lp-pie-legal a:hover span{ color: var(--acp-verde); text-decoration: underline; }

/* ── LO YA VISITADO ─────────────────────────────────────────────────
   La regla global `a:visited{ color:#910c88; border:0 !important }` pinta de
   magenta los enlaces del pie --que es justo lo que se visita-- y deja el
   `border-color` en `currentColor`. Se dice aquí, como en las tarjetas. */
/* CON EL COLOR LITERAL, NO CON `var()`: el navegador no resuelve variables
   dentro de una regla `:visited` --limita a propósito lo que ahí se puede
   cambiar, para que una página no pueda deducir tu historial-- y la regla se
   queda sin efecto, sin error y sin aviso. Son los valores de `--acp-texto` y
   `--acp-suave`. */
.ac-pie a:visited,
.ac-pie a:visited span{ color: inherit; border-color: inherit; }
.ac-pie .lp-pie-col a:visited,
.ac-pie .lp-pie-col a:visited span{ color: #3f4a43; }
.ac-pie .lp-pie-legal a:visited,
.ac-pie .lp-pie-legal a:visited span{ color: #6b7a70; }
.ac-pie .lp-pie-marca .lp-marca:visited b{ color: #16241a; }

/* ── ESTRECHO ───────────────────────────────────────────────────── */

@media (max-width: 1020px){
    .ac-pie .lp-pie-rejilla{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px){
    .ac-pie .lp-ancho{ padding-inline: 18px; }
    .ac-pie .lp-pie-rejilla{ grid-template-columns: 1fr; }
}


/**
 * ═══════════════════════════════════════════════════════════════════════════
 *  EL DOCUMENTO LEGAL — la hoja común de TODOS los textos legales
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Condiciones de uso, privacidad, cookies, condiciones de venta, devoluciones,
 * Compra protegida, reglas, valoraciones, pagos, vendedores, aviso legal y las
 * condiciones particulares de cada vendedor se pintan con el mismo armazón
 * (`LegalLayout/abrir.php` + `cerrar.php`) y esta hoja. Nació en
 * `TReturnTerms.css` (14/09/2026) y se generalizó al llegar el resto: doce copias
 * de la misma hoja son doce sitios donde arreglar el mismo descuadre.
 *
 * La raíz es `.lp.lg`: la página de plataforma (`.lp`) marcada como documento.
 *
 * Tokens, botones y cabecera del sitio salen de `TLanding.css`. Aquí, dos
 * bloques con dos reglas distintas:
 *
 *   · LA PANTALLA (`.lp.lg .lg-cab`, `.lg-rejilla`, `.lg-indice`…):
 *     cabecera del documento, índice pegajoso y cierre.
 *   · EL DOCUMENTO (`.lg-doc …`): SIN la raíz del componente delante, porque
 *     `slImprimir` copia ese nodo a un iframe donde `.lp.lg` no existe y
 *     recoge las reglas que mencionan `.lg-`. Colgado de la raíz, el papel
 *     saldría sin un solo estilo.
 *
 * Tipografía de texto largo: 15,5 px, interlineado 1,75 y una columna de ~72
 * caracteres, que es lo que se lee sin cansar. Nada por debajo de 10 px.
 */

.lp.lg .lp-ancho{ max-width: 1320px; }

.lp.lg h1,
.lp.lg h2{ padding-left: 0; padding-right: 0; }

.lp.lg a:focus-visible,
.lp.lg button:focus-visible{
    outline: 3px solid var(--lp-verde-vivo);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ══ CABECERA DEL DOCUMENTO ════════════════════════════════════════ */
.lp.lg .lg-cab{
    padding: 118px 0 34px;
    background: linear-gradient(180deg, var(--lp-verde-claro), #fff);
    border-bottom: 1px solid var(--lp-borde);
}

.lp.lg .lg-migas{
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-bottom: 18px;
    font-size: 13px; color: var(--lp-suave);
}
.lp.lg .lg-migas a{ color: var(--lp-verde-oscuro); font-weight: 600; text-decoration: none; }
.lp.lg .lg-migas a:hover{ text-decoration: underline; }
.lp.lg .lg-migas iconify-icon{ font-size: 14px; color: var(--lp-tenue); }

/* Icono en su columna y todo el texto en la segunda. */
.lp.lg .lg-cab-fila{ display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.lp.lg .lg-cab-texto{ flex: 1 1 520px; min-width: 0; }
.lp.lg .lg-cab-ico{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--lp-verde); color: #fff;
}
.lp.lg .lg-cab-ico iconify-icon{ font-size: 28px; }

.lp.lg .lg-cab h1{
    margin: 0 0 10px;
    font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.15; letter-spacing: -.8px;
    color: var(--lp-tinta); text-align: left;
}
.lp.lg .lg-cab-texto > p{ max-width: 760px; margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--lp-texto); text-align: left; }

.lp.lg .lg-cab-datos{ display: flex; flex-wrap: wrap; gap: 8px; }
.lp.lg .lg-cab-datos span{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--lp-borde); border-radius: 999px;
    background: #fff;
    font-size: 12.5px; color: var(--lp-texto);
}
.lp.lg .lg-cab-datos iconify-icon{ font-size: 14px; color: var(--lp-verde); }

.lp.lg .lg-cab-botones{ display: flex; flex-wrap: wrap; gap: 10px; align-self: center; }
.lp.lg .lg-btn iconify-icon{ font-size: 17px; }

/* ══ CUERPO: índice pegajoso + documento ═══════════════════════════ */
.lp.lg .lg-cuerpo{ padding: 40px 0 60px; background: #fff; }

.lp.lg .lg-rejilla{
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.lp.lg .lg-indice{
    position: sticky; top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 18px 16px;
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    background: var(--lp-crema);
}
.lp.lg .lg-indice-rot{
    margin: 0 0 10px;
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--lp-suave);
}
.lp.lg .lg-indice ol{ margin: 0; padding: 0; list-style: none; }
.lp.lg .lg-indice li + li{ margin-top: 2px; }
.lp.lg .lg-indice a{
    display: flex; gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px; line-height: 1.4;
    color: var(--lp-texto); text-decoration: none;
}
.lp.lg .lg-indice a:visited{ color: var(--lp-texto); }
.lp.lg .lg-indice a span{ flex: 0 0 22px; font-weight: 700; color: var(--lp-verde-oscuro); }
.lp.lg .lg-indice a:hover,
.lp.lg .lg-indice a.es-actual{ background: #fff; color: var(--lp-tinta); }
.lp.lg .lg-indice a.es-actual{ box-shadow: inset 3px 0 0 var(--lp-verde); font-weight: 600; }

/* ══ EL DOCUMENTO (también en papel) ═══════════════════════════════ */
.lg-doc{
    max-width: 780px;
    font-size: 15.5px; line-height: 1.75;
    color: #2c3530;
}
.lg-doc p{ margin: 0 0 12px; font-size: 15.5px; line-height: 1.75; color: #2c3530; text-align: left; }
.lg-doc b{ color: #16211a; }
.lg-doc a{ color: #16491f; text-decoration: underline; text-underline-offset: 2px; }
.lg-doc a:visited{ color: #16491f; }
.lg-doc i{ font-style: italic; }

.lg-doc .lg-doc-cab{
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px;
    margin-bottom: 22px; padding-bottom: 12px;
    border-bottom: 2px solid #16211a;
}
.lg-doc .lg-doc-cab p{ margin: 0; font-size: 12.5px; line-height: 1.5; color: #56645b; }
.lg-doc .lg-doc-marca{ font-weight: 700; letter-spacing: .02em; }

.lg-doc .lg-aviso{
    margin: 0 0 30px;
    padding: 14px 18px;
    border-left: 4px solid #236e30;
    background: #eef6ec;
    font-size: 14.5px; line-height: 1.7; color: #2c3530;
}

.lg-doc .lg-clausula{ padding-top: 8px; margin-bottom: 30px; scroll-margin-top: 90px; }
.lg-doc .lg-clausula + .lg-clausula{ border-top: 1px solid #e6ebe6; padding-top: 26px; }

.lg-doc h2{
    display: flex; gap: 10px; align-items: baseline;
    margin: 0 0 14px; padding: 0;
    font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -.3px;
    color: #16211a; text-align: left;
    background: none; border: 0;
}
.lg-doc h2 span{ flex: 0 0 auto; color: #236e30; font-variant-numeric: tabular-nums; }

.lg-doc .lg-lista{ margin: 4px 0 14px; padding-left: 26px; }
.lg-doc .lg-lista li{ margin-bottom: 6px; font-size: 15.5px; line-height: 1.7; color: #2c3530; }

.lg-doc .lg-definiciones{ margin: 6px 0 0; }
.lg-doc .lg-definiciones dt{ margin-top: 12px; font-weight: 800; color: #16211a; font-size: 15.5px; }
.lg-doc .lg-definiciones dd{ margin: 2px 0 0; padding-left: 16px; border-left: 2px solid #d3e7cf; font-size: 15px; line-height: 1.7; color: #2c3530; }

.lg-doc .lg-tabla{
    width: 100%;
    margin: 6px 0 16px;
    border-collapse: collapse;
    font-size: 14.5px;
}
.lg-doc .lg-tabla th,
.lg-doc .lg-tabla td{
    padding: 10px 12px;
    border: 1px solid #dfe6df;
    text-align: left; vertical-align: top;
    line-height: 1.55; color: #2c3530;
    background: #fff;
}
.lg-doc .lg-tabla th{ background: #f6f9f4; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #16211a; }

.lg-doc .lg-doc-pie{
    margin-top: 36px; padding-top: 14px;
    border-top: 2px solid #16211a;
}
.lg-doc .lg-doc-pie p{ margin: 0 0 4px; font-size: 12.5px; line-height: 1.5; color: #56645b; }

/* EN PAPEL: sin sombras ni fondos que se coman la tinta, y sin partir una
   cláusula por el título. */
@media print{
    .lg-doc{ max-width: none; font-size: 11pt; }
    .lg-doc p, .lg-doc .lg-lista li, .lg-doc .lg-definiciones dd{ font-size: 11pt; line-height: 1.5; }
    .lg-doc h2{ font-size: 14pt; page-break-after: avoid; break-after: avoid; }
    .lg-doc .lg-tabla{ page-break-inside: avoid; break-inside: avoid; }
    .lg-doc .lg-aviso{ background: none; }
    .lg-doc a{ color: #000; }
}

/* ══ CIERRE ════════════════════════════════════════════════════════ */
.lp.lg .lg-cierre{ padding: 0 0 60px; background: #fff; }
.lp.lg .lg-cierre-caja{
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
    padding: 24px 28px;
    border-radius: var(--lp-radio);
    background: var(--lp-verde-oscuro);
}
.lp.lg .lg-cierre-txt{ display: flex; align-items: flex-start; gap: 14px; }
.lp.lg .lg-cierre-txt > div{ flex: 1; min-width: 0; }
.lp.lg .lg-cierre-txt .lg-cab-ico{ width: 46px; height: 46px; background: rgba(255,255,255,.12); }
.lp.lg .lg-cierre-txt b{ display: block; font-size: 17px; color: #fff; }
.lp.lg .lg-cierre-txt p{ margin: 3px 0 0; font-size: 13.5px; color: #d6e8d3; }
.lp.lg .lg-cierre-botones{ display: flex; flex-wrap: wrap; gap: 10px; }

/* ══ ESTRECHO: el índice pasa arriba y deja de ser pegajoso ════════ */
@media (max-width: 980px){
    .lp.lg .lg-rejilla{ grid-template-columns: 1fr; gap: 24px; }
    .lp.lg .lg-indice{ position: static; max-height: none; }
    .lp.lg .lg-cab{ padding-top: 96px; }
}

/* ══ DOS HERENCIAS QUE NO LLEGAN ═══════════════════════════════════
   · Una regla global con el atajo `font:` fija los `span` a 12 px: el número
     de la cláusula salía diminuto al lado de su título. Se dice el tamaño.
   · El sitio quita las viñetas a las listas: las letras a), b), c) de los
     supuestos --que es por lo que se citan-- desaparecían. */
.lg-doc h2 span{ font-size: 21px; font-weight: 800; line-height: 1.3; }
.lg-doc ol.lg-lista{ list-style: lower-alpha outside; }
.lg-doc ol.lg-lista{ padding-left: 30px; }
.lg-doc ol.lg-lista > li{ display: list-item; list-style: lower-alpha outside; padding-left: 4px; }
.lg-doc ol.lg-lista li::marker{ font-weight: 700; color: #236e30; }
.lp.lg .lg-indice a span{ font-size: 13px; }
@media print{ .lg-doc h2 span{ font-size: 14pt; } }

/* ══ LO ESENCIAL (nivel 1) ═════════════════════════════════════════
   Entre la cabecera y el documento. Tarjetas planas, icono en su columna y
   todo el texto en la segunda. */
.lp.lg .lg-esencial{ padding: 28px 0 6px; background: #fff; }
.lp.lg .lg-esencial-cab{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
.lp.lg .lg-esencial-cab b{ font-size: 18px; font-weight: 800; color: var(--lp-tinta); }
.lp.lg .lg-esencial-cab small{ font-size: 13px; color: var(--lp-suave); }
.lp.lg .lg-esencial-rejilla{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.lp.lg .lg-esencial-item{
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--lp-borde);
    border-radius: 14px;
    background: var(--lp-crema);
}
.lp.lg .lg-esencial-item > div{ flex: 1; min-width: 0; }
.lp.lg .lg-esencial-ico{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--lp-verde-claro); color: var(--lp-verde);
}
.lp.lg .lg-esencial-ico iconify-icon{ font-size: 19px; width: 19px; height: 19px; }
.lp.lg .lg-esencial-item b{ display: block; margin-bottom: 3px; font-size: 14px; color: var(--lp-tinta); }
.lp.lg .lg-esencial-item p{ margin: 0; font-size: 13px; line-height: 1.55; color: var(--lp-texto); text-align: left; }
.lp.lg .lg-esencial-item p b{ display: inline; margin: 0; font-size: inherit; }
.lp.lg .lg-esencial-item p a{ color: var(--lp-verde-oscuro); font-weight: 600; }

/* ══ LAS PIEZAS DEL DOCUMENTO QUE AÑADEN LOS DEMÁS TEXTOS ══════════ */
.lg-doc h3{ margin: 18px 0 8px; padding: 0; font-size: 16.5px; font-weight: 800; color: #16211a; text-align: left; background: none; border: 0; }
.lg-doc ul.lg-lista-puntos{ margin: 4px 0 14px; padding-left: 22px; }
.lg-doc ul.lg-lista-puntos > li{ display: list-item; list-style: disc outside; margin-bottom: 6px; font-size: 15.5px; line-height: 1.7; color: #2c3530; }
.lg-doc .lg-nota{ margin: 6px 0 16px; padding: 10px 14px; border-radius: 8px; background: #f6f9f4; border: 1px solid #dfe6df; font-size: 14px; line-height: 1.65; color: #2c3530; }
.lg-doc .lg-vacio{ font-style: italic; color: #56645b; }

/* ══ LOS DEMÁS TEXTOS LEGALES ══════════════════════════════════════ */
.lp.lg .lg-relacionados{ padding: 10px 0 60px; background: #fff; }
.lp.lg .lg-relacionados-tit{ margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--lp-tinta); text-align: left; }
.lp.lg .lg-relacionados-rejilla{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
.lp.lg .lg-relacionados-grupo{ padding: 16px; border: 1px solid var(--lp-borde); border-radius: var(--lp-radio); background: var(--lp-crema); }
.lp.lg .lg-relacionados-grupo ul{ margin: 0; padding: 0; list-style: none; }
.lp.lg .lg-relacionados-grupo li > a,
.lp.lg .lg-relacionados-grupo li > a:visited{
    display: flex; align-items: center; gap: 9px;
    padding: 7px 8px; border-radius: 8px;
    font-size: 13.5px; color: var(--lp-texto); text-decoration: none;
}
/* `color: inherit`, EXPLÍCITO: sin él, la regla histórica de todo el sitio
   `a, a:visited, a span { color: #910c88; }` (Tjquery/css/index.css) le gana
   al color de `.lg-relacionados-grupo li > a` de aquí arriba -- lo heredado
   pierde siempre contra cualquier regla que apunte al propio `<span>`, por
   poco específica que sea. Es el mismo motivo por el que `.lg-indice a span`
   (más arriba en este fichero) ya fija su color a mano: aquí faltaba. */
.lp.lg .lg-relacionados-grupo li > a > span{ flex: 1; min-width: 0; font-size: 13.5px; color: inherit; }
.lp.lg .lg-relacionados-grupo li > a:hover{ background: #fff; color: var(--lp-tinta); text-decoration: underline; }
.lp.lg .lg-relacionados-grupo li.es-actual > a{ background: #fff; font-weight: 700; color: var(--lp-tinta); box-shadow: inset 3px 0 0 var(--lp-verde); }
.lp.lg .lg-relacionados-grupo iconify-icon{ flex: 0 0 auto; font-size: 16px; width: 16px; height: 16px; color: var(--lp-verde); }

/* ══ CAMBIOS DE ESTA VERSIÓN ═══════════════════════════════════════
   Dentro de `.lg-doc`, debajo del aviso de prevalencia: se imprime con el
   documento. Icono en su columna y todo el texto en la segunda. */
.lg-doc .lg-cambios{
    display: flex; align-items: flex-start; gap: 12px;
    margin: 0 0 30px;
    padding: 16px 18px;
    border: 1px solid #dfe6df;
    border-radius: 12px;
    background: #fff;
}
.lg-doc .lg-cambios.es-proxima{ border-color: #e7c98a; background: #fffaf0; }
.lg-doc .lg-cambios-ico{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #eef6ec; color: #236e30;
}
.lg-doc .lg-cambios.es-proxima .lg-cambios-ico{ background: #fdf0d5; color: #8a5a00; }
.lg-doc .lg-cambios-ico iconify-icon{ font-size: 18px; width: 18px; height: 18px; }
.lg-doc .lg-cambios-txt{ flex: 1; min-width: 0; }
.lg-doc h2.lg-cambios-tit{ display: block; margin: 0 0 2px; font-size: 16px; letter-spacing: 0; }
.lg-doc .lg-cambios-txt p{ margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.lg-doc .lg-cambios-txt p.lg-cambios-meta{ font-size: 12.5px; color: #56645b; }
.lg-doc .lg-cambios-txt p.lg-cambios-aviso{ color: #6b4700; }
.lg-doc .lg-cambios-lista{ margin: 0 0 8px; padding-left: 20px; }
.lg-doc .lg-cambios-lista > li{ display: list-item; list-style: disc outside; margin-bottom: 4px; font-size: 14.5px; line-height: 1.6; color: #2c3530; }
.lg-doc .lg-cambios-txt p.lg-cambios-nota{ margin: 0; font-size: 13px; color: #56645b; }
@media print{
    .lg-doc .lg-cambios, .lg-doc .lg-cambios.es-proxima{ background: none; }
    .lg-doc .lg-cambios-txt p.lg-cambios-nota:last-child{ display: none; }
}


/**
 * ═══════════════════════════════════════════════════════════════════════════
 *  LAS PIEZAS COMUNES DE LAS PÁGINAS DE PLATAFORMA
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Cómo funciona, Precios, Para agricultores, Para compradores y Ayuda comparten
 * cabecera, pie y estas piezas. Todo lo demás --secciones, títulos, etiquetas,
 * botones, ticks, tarjetas duales y testimonios-- ya lo trae `TLanding.css`,
 * que es la hoja de la portada: estas páginas son la misma web, no otra.
 *
 * Prefijo `pg-`. Salen de la maqueta `tmp-maquetas/landing-paginas.php`, donde
 * se llamaban `mq-`.
 *
 * ── POR QUÉ UNA HOJA COMPARTIDA Y NO UNA POR PÁGINA ────────────────
 *
 * Porque son las mismas piezas: la tarjeta con icono, la tabla de tarifas, el
 * acordeón de preguntas, la tarjeta de artículo y el formulario. Cinco copias
 * son cinco sitios donde arreglar el mismo descuadre, y es exactamente lo que
 * el proyecto ya tiene apuntado como deuda en el área de cliente.
 */

/* ── REJILLAS DE TARJETAS ──────────────────────────────────────── */
.pg-rejilla{ display: grid; gap: 20px; }
.pg-rejilla--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-rejilla--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-rejilla--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px){ .pg-rejilla{ grid-template-columns: 1fr !important; } }

.pg-tarjeta{
    padding: 22px;
    background: #fff;
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
}
.pg-tarjeta h3{ margin: 12px 0 8px; font-size: 16px; color: var(--lp-tinta); }
.pg-tarjeta p{ margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--lp-texto); }
.pg-tarjeta-ico{
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--lp-verde-claro); color: var(--lp-verde);
}
.pg-tarjeta-ico iconify-icon{ font-size: 21px; }

/* ── LA TARIFA ─────────────────────────────────────────────────── */
.pg-tarifa{ width: 100%; border-collapse: collapse; background: #fff;
    border: 1px solid var(--lp-borde); border-radius: var(--lp-radio); overflow: hidden; }
.pg-tarifa th, .pg-tarifa td{ padding: 14px 16px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--lp-borde); }
.pg-tarifa th{ background: var(--lp-crema); color: var(--lp-tinta); font-size: 12px; letter-spacing: .3px; text-transform: uppercase; }
.pg-tarifa td b{ color: var(--lp-verde-oscuro); }
.pg-tarifa tr:last-child td{ border-bottom: 0; }

.pg-niveles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
@media (max-width: 900px){ .pg-niveles{ grid-template-columns: repeat(2, 1fr); } }
.pg-nivel{ padding: 18px; border: 1px solid var(--lp-borde); border-radius: 14px; background: #fff; text-align: center; }
.pg-nivel b{ display: block; font-size: 14px; color: var(--lp-tinta); }
.pg-nivel .pg-tope{ display: block; margin: 8px 0 2px; font-size: 25px; font-weight: 800; color: var(--lp-verde); }
.pg-nivel small{ color: var(--lp-suave); font-size: 12px; }

/* ── PREGUNTAS ─────────────────────────────────────────────────── */
.pg-faq{ max-width: 780px; margin: 0 auto; }
.pg-faq details{
    padding: 16px 18px; margin-bottom: 10px;
    background: #fff; border: 1px solid var(--lp-borde); border-radius: 12px;
}
.pg-faq summary{ cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--lp-tinta); }
.pg-faq p{ margin: 10px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--lp-texto); }

/* ── ARTÍCULOS Y AYUDA ─────────────────────────────────────────── */
.pg-articulo{ border: 1px solid var(--lp-borde); border-radius: var(--lp-radio); overflow: hidden; background: #fff; }
.pg-articulo .pg-foto{ height: 140px; background: linear-gradient(120deg, #dbeadb, #eef6ec); display: grid; place-items: center; color: var(--lp-tenue); font-size: 12px; }
.pg-articulo-txt{ padding: 16px 18px; }
.pg-articulo-txt small{ color: var(--lp-verde); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.pg-articulo-txt h3{ margin: 7px 0 6px; font-size: 15px; color: var(--lp-tinta); }
.pg-articulo-txt p{ margin: 0; font-size: 13px; line-height: 1.55; color: var(--lp-texto); }

.pg-buscador-ayuda{
    max-width: 620px; margin: 0 auto 34px;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; background: #fff;
    border: 1px solid var(--lp-borde); border-radius: 999px;
}
.pg-buscador-ayuda input{ flex: 1; border: 0; outline: 0; font: 14px system-ui, sans-serif; }
.pg-buscador-ayuda iconify-icon{ font-size: 19px; color: var(--lp-verde); }

/* ── FORMULARIO ────────────────────────────────────────────────── */
.pg-form{ display: grid; gap: 14px; }
.pg-form-fila{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px){ .pg-form-fila{ grid-template-columns: 1fr; } }
.pg-campo label{ display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--lp-texto); }
.pg-campo input, .pg-campo textarea, .pg-campo select{
    width: 100%; box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid var(--lp-borde); border-radius: 10px;
    font: 14px system-ui, sans-serif; color: var(--lp-tinta); background: #fff;
}
.pg-campo textarea{ min-height: 130px; resize: vertical; }

/* ── PASOS EN DOS CARRILES ─────────────────────────────────────── */
.pg-carril{ position: relative; padding-left: 30px; }
.pg-carril::before{
    content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px;
    width: 2px; background: var(--lp-verde-borde);
}
.pg-hito{ position: relative; margin-bottom: 24px; }
.pg-hito::before{
    content: ''; position: absolute; left: -25px; top: 4px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--lp-verde); box-shadow: 0 0 0 4px var(--lp-verde-claro);
}
.pg-hito b{ display: block; font-size: 15px; color: var(--lp-tinta); margin-bottom: 5px; }
.pg-hito p{ margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--lp-texto); }

.pg-nota{
    margin-top: 26px; padding: 16px 18px;
    background: var(--lp-verde-claro); border: 1px solid var(--lp-verde-borde);
    border-radius: 12px;
    font-size: 13.5px; line-height: 1.6; color: var(--lp-verde-oscuro);
}
.pg-nota b{ color: var(--lp-verde-oscuro); }

/* Cabecera de página interior: como el héroe del landing pero sin foto. */
.pg-cab{
    padding: 66px 0 54px;
    background: linear-gradient(180deg, var(--lp-verde-claro), #fff);
    border-bottom: 1px solid var(--lp-borde);
    text-align: center;
}
/* EL CENTRADO SE DECLARA EN CADA HIJO, NO SOLO EN LA CAJA.
 *
 * Una hoja global del sitio pone `text-align:left` a encabezados y párrafos, y
 * heredarlo de `.pg-cab` no basta: medido, la caja salía en `center` y su `h1` y
 * su `p` en `left`. Es la misma nota que ya lleva `.lp-titulo` en la hoja de la
 * portada, y por el mismo motivo. */
.pg-cab h1{ margin: 0 0 14px; font-size: 40px; line-height: 1.14; color: var(--lp-tinta); text-align: center; }
.pg-cab h1 em{ color: var(--lp-verde); font-style: normal; }
.pg-cab p{ max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 1.6; color: var(--lp-texto); text-align: center; }

/* ── LA LISTA DE VENTAJAS, EN COLUMNAS ────────────────────────────────
 *
 * Cada línea son tres cosas: el tick, el titular en negrita y la explicación.
 * Como texto corrido las tres fluyen juntas y cada fila rompe por donde le toca:
 * «Precio real de mercado.» se partía en dos líneas mientras la de al lado
 * cabía en una, y las explicaciones arrancaban cada una en una vertical
 * distinta. Se leía como una tabla mal montada.
 *
 * ── DOS COLUMNAS Y NO TRES, Y ESTÁ MEDIDO ────────────────────────
 *
 * La tentación es poner el titular en una columna y la explicación en otra. No
 * cabe: esta lista vive en la mitad izquierda de `.lp-dual-rejilla`, que en una
 * ventana de 1920px mide **376px** -- probado, con tres columnas quedaban 224px
 * para el titular y 106px para la explicación, o sea seis palabras por línea.
 *
 * Así que las columnas son las del proyecto: **el tick en la suya y TODO el
 * texto en la segunda**, con el titular encima de su explicación. Las dos
 * líneas arrancan en la misma vertical y las cinco filas son iguales, que es lo
 * que se venía a arreglar.
 */
.lp .pg-ticks-cols li{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 2px 10px;

    margin-bottom: 15px;
}

/* El icono ocupa la primera columna y las DOS filas: sin esto se lleva una fila
   para él solo y el titular baja a la segunda. */
.lp .pg-ticks-cols li iconify-icon{ grid-row: 1 / span 2; margin-top: 3px; }

.lp .pg-ticks-cols li b{ grid-column: 2; color: var(--lp-tinta); line-height: 1.4; }
.lp .pg-ticks-cols li span{ grid-column: 2; color: var(--lp-suave); line-height: 1.5; }

/*
 * Y CUANDO SÍ HAY SITIO, las dos en la misma línea: el titular en su columna y
 * la explicación al lado. Se activa por el ANCHO DE LA LISTA --no por el de la
 * ventana-- porque lo que decide aquí es el contenedor, y en esta página el
 * contenedor mide lo mismo con 1280 que con 1920.
 */
@supports (container-type: inline-size){

    .lp .pg-ticks-cols{ container-type: inline-size; }

    @container (min-width: 560px){
        .lp .pg-ticks-cols li{ grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr); }
        .lp .pg-ticks-cols li iconify-icon{ grid-row: auto; }
        .lp .pg-ticks-cols li b{ grid-column: 2; }
        .lp .pg-ticks-cols li span{ grid-column: 3; }
    }
}

/* ── LA MEDALLA DE CADA NIVEL ─────────────────────────────────────────
 *
 * Las piezas de verdad: `/assets/sellers/{code}.png`, con su cinta y su
 * relieve. No se dibuja ningún icono en su lugar --serían dos sellos distintos
 * contando lo mismo-- y por eso aquí no hay ni discos ni colores de fondo: el
 * arte ya los trae.
 *
 * SE MIDE POR EL ALTO. Las cuatro medallas son más altas que anchas y cada una
 * mide un poco distinto (279-297px de ancho por 360 de alto), así que fijar el
 * ancho las dejaría a alturas diferentes en la misma fila. */
.lp .pg-medalla{
    display: block;
    margin: 0 auto 12px;
}

.lp .pg-medalla img{
    height: 78px;
    width: auto;
    margin: 0 auto;
    display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════
 *  LA FRANJA DE GARANTÍAS   ·   una sola, encima del pie de todas las páginas
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ── POR QUÉ SALE DE `TLanding.css` ─────────────────────────────────
 *
 * Colgaba de `.lp`, así que solo existía en la portada: las cuatro promesas
 * que hacen que alguien se atreva a pagar --dinero protegido, comisiones a la
 * vista, soporte y logística-- no se leían en la ficha ni en la cesta, que es
 * donde se decide. Es el mismo camino que hizo el pie hacia `TPie.css`.
 *
 * Aquí está la única, autocontenida: declara sus propias variables y no depende
 * de que alguien haya cargado la hoja del landing. La pinta `base.php`.
 *
 * ── Y CON `@media`, NO CON `@container` ────────────────────────────
 *
 * Igual que en el pie: la hoja del landing usa consultas de contenedor porque
 * su raíz declara un `container-type`. Fuera de ahí no hay contenedor que
 * consultar y esas reglas NO SE APLICAN NUNCA, sin error.
 */

.ac-garantias{
    /* ── AIRE ENCIMA, EN TODAS LAS PÁGINAS ───────────────────────────
       La franja se pegaba al contenido: el papel blanco de una ficha de la
       cuenta --o el último bloque de cualquier página-- terminaba y sin un
       píxel de separación empezaba la franja, que se leía como parte del mismo
       bloque. Va en la franja y no en cada página porque la pinta `base.php`
       debajo de TODO: así el hueco es el mismo en la ficha, en la cesta y en la
       portada. Ajustarlo es tocar esta sola propiedad. */
    margin-top: 40px;

    --acg-verde:       #2f7d3f;
    --acg-verde-claro: #eaf4ec;
    --acg-tinta:       #16241a;
    --acg-suave:       #6b7a70;
    --acg-borde:       #e6ebe6;
}

.ac-garantias .lp-garantias{
    padding: 26px 0;
    background: #fff;
    border-top: 1px solid var(--acg-borde);
}

/* La única medida de página de la franja, la MISMA que la del pie: van pegadas
   una encima de otra y con dos carriles distintos el corte se ve. Se declara
   aquí y no se hereda del landing: fuera de él, `.lp-ancho` no existe. */
.ac-garantias .lp-ancho{
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

.ac-garantias .lp-garantias-rejilla{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

/* LAS DOS COLUMNAS DE SIEMPRE: el icono en la suya y TODO el texto en la otra,
   para que el titular y su línea de debajo arranquen en la misma vertical. */
.ac-garantias .lp-garantias-rejilla > div{
    display: flex;
    align-items: center;
    gap: 11px;
}

.ac-garantias .lp-garantias-rejilla span{
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--acg-verde-claro);
    color: var(--acg-verde);
    font-size: 17px;
}

/* El tamaño se le dice AL ICONO, no a su caja: `iconify-icon` no hereda el
   `font-size` del padre y todos saldrían al defecto de 20px. */
.ac-garantias .lp-garantias-rejilla span iconify-icon{ font-size: 17px; }

.ac-garantias .lp-garantias-rejilla > div > div{
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
}

/* El color se dice aquí porque la regla global `b,strong{color:#000}` se lo
   lleva, y el color no se hereda cuando alguien lo declara por debajo. */
.ac-garantias .lp-garantias-rejilla b{ font-size: 12.5px; color: var(--acg-tinta); }
.ac-garantias .lp-garantias-rejilla small{ font-size: 11.5px; color: var(--acg-suave); }

@media (max-width: 620px){
    .ac-garantias .lp-garantias{ padding: 20px 0; }
    .ac-garantias .lp-garantias-rejilla{ gap: 14px; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   PRECIOS   ·   /precios
   ═══════════════════════════════════════════════════════════════════════════

   SOLO LO QUE ESTA PANTALLA TIENE Y NINGUNA OTRA, con el prefijo `pc-`. Lo
   demás --el ancho, las secciones, los botones, los tonos-- sale de
   `TLanding.css` y de `TPlataforma.css`: esto es la misma web, no otra.

   Hoja propia y no un añadido a `TPlataforma.css` porque una rejilla de cinco
   tarjetas de plan no la quiere ninguna de las otras cuatro páginas, y metida
   en la hoja compartida se les cuela.

   ── LOS TONOS SALEN MEDIDOS DE LA MAQUETA ───────────────────────────

   Con PIL sobre `tmp-maquetas/precios/planes de precios.png`, que es la regla
   del proyecto: el naranja de COMPRADORES es #d55d03, su crema #fdf0da, el
   círculo verde de los iconos #edf4ed y la banda alterna de la tabla #f8f8f8.
   Los verdes NO se remuestrean: se usan los de `TLanding.css`, que ya son los
   de la marca, para no acabar con dos verdes casi iguales.
   ═══════════════════════════════════════════════════════════════════════════ */

.lp{
    --pc-naranja:       #d55d03;
    --pc-naranja-suave: #fdf0da;
    --pc-naranja-borde: #f2d3a6;
    --pc-crema-calida:  #fefaf3;

    --pc-ico-fondo:     #edf4ed;
    --pc-banda:         #f8f8f8;
    --pc-caja-fondo:    #faf9f6;
}

/* Solo para lectores de pantalla: el tick y la raya de la tabla son dibujos, y
   sin esto una fila entera se lee como celdas vacías. */
.lp .pc-oculto{
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══ EL HÉROE ══════════════════════════════════════════════════════════
   La foto ocupa la franja entera y el texto se lee encima gracias a un velo
   blanco que se apaga hacia la derecha. Velo y no una caja opaca: la foto es
   media pieza del mensaje --un agricultor con su caja-- y taparla con un
   rectángulo la desperdicia.

   `overflow: visible` a propósito: el conmutador se monta sobre el borde de
   abajo y tiene que poder salirse. */
.lp .pc-heroe{
    position: relative;
    padding: 104px 0 92px;
    background: var(--lp-crema);
    overflow: visible;
}

.lp .pc-heroe-foto{
    position: absolute; inset: 0;
    background: url('/assets/landing/hero.jpg') center 34% / cover no-repeat;
}

/* EL VELO, EN SU PROPIA CAPA. Puesto como segundo fondo del mismo elemento se
   pelea con el `background-size: cover` de la foto; separado, cada uno hace lo
   suyo. Se apaga hacia la derecha, que es donde está el agricultor. */
.lp .pc-heroe-foto::after{
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg,
                rgba(255,255,255,.97) 0%,
                rgba(255,255,255,.95) 30%,
                rgba(255,255,255,.72) 46%,
                rgba(255,255,255,.18) 62%,
                rgba(255,255,255,0)   76%);
}

/* EL MISMO ANCHO QUE LA FILA DE TARJETAS, Y NO ES UN CAPRICHO.
   `.lp-ancho` mide 1180 y la fila de planes 1340: con el defecto, el titular
   arrancaba 80px a la derecha del borde de la primera tarjeta -- medido. Un
   bloque con dos verticales se lee torcido aunque cada línea esté bien puesta,
   que es la regla de alineación del proyecto aplicada a la página entera.

   Y de paso el medallón se va a su sitio: dentro de 1180 caía sobre la cara del
   agricultor. */
.lp .pc-heroe .lp-ancho{ max-width: 1340px; }

.lp .pc-heroe-caja{
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 40px;
}

.lp .pc-heroe-txt{ max-width: 560px; }

.lp .pc-heroe-txt h1{
    margin: 0 0 18px;
    font-size: clamp(30px, 3.4cqw, 44px);
    line-height: 1.12; font-weight: 800; letter-spacing: -1px;
    color: var(--lp-tinta);
    /* EL ALINEADO SE DICE AQUÍ. Una hoja global del sitio pone `text-align:left`
       a los encabezados; es la misma nota que ya llevan `.lp-titulo` y
       `.pg-cab`, y por el mismo motivo. */
    text-align: left;
}
.lp .pc-heroe-txt h1 em{ color: var(--lp-verde); font-style: normal; }

.lp .pc-heroe-txt p{
    margin: 0; max-width: 470px;
    font-size: 15.5px; line-height: 1.62;
    color: var(--lp-texto); text-align: left;
}

/* ── EL MEDALLÓN DE PROTECCIÓN ──────────────────────────────────────
   Redondo, blanco y sobre la foto, como en la maqueta. Es el sello de confianza
   puesto donde se está decidiendo si merece la pena entrar. */
.lp .pc-medallon{
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    width: 168px; height: 168px; padding: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,.93);
    box-shadow: 0 10px 34px rgba(18,47,24,.16);
    text-align: center;
}
.lp .pc-medallon-ico{
    display: flex; font-size: 22px; color: var(--lp-verde);
}
.lp .pc-medallon b{
    font-size: 12.5px; line-height: 1.25; font-weight: 700; color: var(--lp-tinta);
}
.lp .pc-medallon small{
    font-size: 10.5px; line-height: 1.35; color: var(--lp-suave);
}

/* ── EL CONMUTADOR MENSUAL / ANUAL ──────────────────────────────────
   A caballo del borde de la franja, que es donde lo pone la maqueta: quien
   viene buscando el precio anual lo busca ANTES de leer ninguna cifra. */
.lp .pc-ciclo{
    position: absolute; left: 50%; bottom: -22px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex; align-items: center; gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(18,47,24,.13);
}

.lp .pc-ciclo-op{
    padding: 8px 20px;
    border: 0; border-radius: 999px;
    background: transparent;
    font: inherit; font-size: 13px; font-weight: 600;
    color: var(--lp-suave);
    cursor: pointer;
}
.lp .pc-ciclo-op:hover{ color: var(--lp-tinta); }
.lp .pc-ciclo-op.is-on{
    background: var(--lp-crema);
    color: var(--lp-tinta);
    box-shadow: inset 0 0 0 1px var(--lp-borde);
}

.lp .pc-ciclo-ahorro{
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--lp-verde-claro);
    font-size: 12px; font-weight: 700;
    color: var(--lp-verde);
    white-space: nowrap;
}

/* ══ LAS CINCO TARJETAS ════════════════════════════════════════════════
   CINCO COLUMNAS IGUALES, y el ancho de la fila se sale del `.lp-ancho` de
   1180px a propósito: con cinco tarjetas dentro de 1180 cada una se queda en
   210px y las listas de siete líneas rompen por todas partes. Aquí la medida
   legible no es el texto corrido, son las columnas.

   `align-items: stretch` (el defecto) para que las cinco midan lo mismo aunque
   una tenga ocho puntos y otra cinco: una fila de tarjetas con los pies a
   distinta altura se lee como un error de carga. */
.lp .pc-planes-zona{ padding: 56px 0 18px; background: #fff; }
.lp .pc-planes-zona .lp-ancho{ max-width: 1340px; }

/* ── «PRECIOS SIN IVA» ──────────────────────────────────────────────
   Centrada y en gris: es una advertencia necesaria, no un reclamo. En negro y
   a tamaño de texto competiría con las cifras, que es justo lo que se viene a
   leer; tan tenue que no se vea sería peor todavía, porque el que se entera al
   pagar ya no vuelve. */
.lp .pc-iva{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 20px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--lp-suave);
    text-align: center;
}

.lp .pc-iva iconify-icon{
    /* `iconify-icon` NO hereda el font-size de su caja: sin esto sale a 20px y
       pesa más que la frase que acompaña. */
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--lp-tenue);
}

.lp .pc-iva-nota{ color: var(--lp-tenue); }

@media (max-width: 700px){
    /* En una sola línea se parte por donde caiga y el icono se queda solo
       arriba; así el texto entero baja junto. */
    .lp .pc-iva{ flex-wrap: wrap; }
}

.lp .pc-planes{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.lp .pc-plan{
    position: relative;
    display: flex; flex-direction: column;
    padding: 26px 22px 24px;

    /* EL BORDE, SIEMPRE DEL MISMO GROSOR EN LAS CINCO.
       La destacada lo lleva verde (ver abajo), y si las demás lo llevaran más
       fino la diferencia no sería solo de color: la caja de la destacada
       mediría menos por dentro y su texto arrancaría en otra vertical que el
       de sus vecinas. Se declara grueso en todas y lo que cambia es el COLOR
       --aquí casi invisible-- así que las cinco miden lo mismo.

       4px y no 3 (25/08/2026): a 3 el marco de la elegida se leía como una
       línea, no como una selección. */
    border: 4px solid var(--lp-borde);
    border-radius: 15px;
    background: #fff;

    /* Solo la sombra: es lo único que cambia al pasar el ratón. El `scale` de la
       destacada no se anima --nace ya agrandada-- así que no hace falta
       nombrarlo aquí. */
    transition: box-shadow .18s ease;
}

/* ── LA DESTACADA: BORDE FUERTE Y UN PASO POR DELANTE ───────────────
   Verde de marca a 3px --no el verde pálido del resto de bordes del sitio, que
   a esta distancia no se distingue del gris-- y agrandada un 4 % sobre las
   demás.

   EL ZOOM ES `transform`, Y ESO IMPORTA: `scale()` no ocupa sitio en la
   maqueta, así que la tarjeta crece SIN mover a sus vecinas ni cambiar la
   altura de la fila. Hacerlo con `padding` o con `width` empujaría las otras
   cuatro y descuadraría la rejilla entera.

   Y con `z-index`, porque al crecer se mete por debajo de las de al lado: sin
   él, el borde grueso queda tapado justo por los lados donde se está mirando. */
/* Y UN ARO POR DENTRO, ademas del borde.
   El `box-shadow: inset` no ocupa sitio --no es borde, es sombra-- asi que
   engorda el marco de la elegida SIN cambiar la caja: sigue midiendo por
   dentro lo mismo que las otras cuatro y su contenido arranca en la misma
   vertical. Es la unica forma de que se vea mas gruesa solo ella. */
.lp .pc-plan.es-destacado{
    z-index: 1;
    border-color: var(--lp-verde);
    box-shadow: inset 0 0 0 2px var(--lp-verde),
                0 12px 34px rgba(35,110,48,.16);
    transform: scale(1.05);
}

/* AL PASAR EL RATÓN, LA SOMBRA. EL ZOOM NO.
   El tamaño lo reserva la destacada: es lo que dice cuál es el plan elegido por
   defecto, y si cualquiera de las otras cuatro se pusiera a su altura con solo
   pasar por encima, dejaría de decirlo. La respuesta al ratón es la sombra, que
   se ve igual de bien y no compite con esa jerarquía.

   Así que aquí NO hay `transform` a propósito: las cinco tarjetas se quedan
   donde están y solo se levanta la que está bajo el cursor.

   `:focus-within` va con el `:hover` y no es opcional: quien recorre la página
   con el tabulador tiene que ver lo mismo que quien la recorre con el ratón. */
.lp .pc-plan:hover,
.lp .pc-plan:focus-within{
    z-index: 2;
    box-shadow: 0 12px 32px rgba(18,47,24,.13);
}
.lp .pc-plan.es-destacado:hover,
.lp .pc-plan.es-destacado:focus-within{
    /* El aro se repite: `box-shadow` se sustituye entero, y sin volver a
       nombrarlo el marco de la elegida adelgazaba al pasar el ratón. */
    box-shadow: inset 0 0 0 2px var(--lp-verde),
                0 16px 40px rgba(35,110,48,.22);
}

/* QUIEN PIDE NO ANIMARSE, NO SE ANIMA. El zoom de la destacada se queda --es
   jerarquía, no movimiento: no se mueve nada, ya está agrandada al cargar--;
   lo que se apaga es la transición de la sombra. */
@media (prefers-reduced-motion: reduce){
    .lp .pc-plan{ transition: none; }
}

.lp .pc-cinta{
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--lp-verde);
    font-size: 11.5px; font-weight: 700; color: #fff;
    white-space: nowrap;
}

/* La de compradores: crema y naranja. De otro color a propósito -- no es un
   escalón más de la escalera, es la respuesta a otra pregunta. */
.lp .pc-plan--compradores{
    background: var(--pc-crema-calida);
    border-color: var(--pc-naranja-borde);
}

/* SITIO PARA QUE EL ZOOM QUEPA.
   La fila crece un 4 % por arriba y por abajo al agrandarse la destacada, y sin
   este aire la cinta de «Más popular» se sube por encima del borde de la
   sección y la sombra de abajo se come el arranque de la comparativa. */
.lp .pc-planes{ padding: 14px 0 18px; }

/* ── LA CABECERA DE LA TARJETA ──────────────────────────────────────
   DOS COLUMNAS, EL ICONO EN LA IZQUIERDA Y TODO EL TEXTO EN LA DERECHA. Es la
   regla de alineación del proyecto: el rótulo y el precio arrancan en la misma
   vertical porque viven los dos en la segunda columna, no porque se les haya
   dado un margen a ojo. */
.lp .pc-plan-cab{
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 14px;
}

.lp .pc-plan-ico{
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--pc-ico-fondo);
    color: var(--lp-verde);
    /* EL TAMAÑO SE DECLARA EN EL ICONO, NO EN SU CAJA: `iconify-icon` no hereda
       el `font-size` del padre y sale a 20px se ponga lo que se ponga fuera. */
}
.lp .pc-plan-ico iconify-icon{ font-size: 21px; }

.lp .pc-plan-id{ flex: 1; min-width: 0; }

.lp .pc-plan-rotulo{
    display: block;
    font-size: 17px; font-weight: 800; letter-spacing: .3px;
    color: var(--lp-verde);
}
.lp .pc-plan--compradores .pc-plan-rotulo{ color: var(--pc-naranja); }

.lp .pc-plan-precio{
    display: flex; align-items: baseline; gap: 5px;
    margin: 4px 0 0;
    text-align: left;
}
.lp .pc-cifra{
    font-size: 27px; font-weight: 800; letter-spacing: -.6px;
    color: var(--lp-tinta);
    /* La cifra cambia al pasar a anual: sin esto el salto se ve como un
       parpadeo del bloque entero. */
    transition: opacity .12s;
}
.lp .pc-periodo{ font-size: 12.5px; color: var(--lp-suave); }

/* ENTERPRISE y COMPRADORES no ponen cifra sino palabra --«A medida»,
   «Gratis»--, y a 27px con el peso de un número quedaban gritando. */
.lp .pc-plan--enterprise .pc-cifra,
.lp .pc-plan--compradores .pc-cifra{ font-size: 24px; letter-spacing: -.4px; }

.lp .pc-plan-lema{
    margin: 0 0 16px;
    font-size: 13px; line-height: 1.5;
    color: var(--lp-texto); text-align: left;
}

/* ── EL BOTÓN ───────────────────────────────────────────────────────
   Sólido el que lleva a pagar, de línea el que no. Es la misma jerarquía que la
   del proyecto en cualquier pareja de botones: sin ella, «Contactar ventas»
   pesa lo mismo que «Elegir plan». */
.lp .pc-btn{
    display: block;
    margin-bottom: 18px; padding: 11px 16px;
    border: 1px solid transparent; border-radius: 9px;
    font-size: 13.5px; font-weight: 700; text-align: center; text-decoration: none;
    cursor: pointer;
}
.lp .pc-btn--solido{ background: var(--lp-verde); color: #fff; }
.lp .pc-btn--solido:hover{ background: var(--lp-verde-oscuro); color: #fff; }

.lp .pc-btn--linea{
    background: #fff; color: var(--lp-verde); border-color: var(--lp-verde-borde);
}
.lp .pc-btn--linea:hover{ background: var(--lp-verde-claro); color: var(--lp-verde); }

.lp .pc-plan--compradores .pc-btn--linea{
    color: var(--pc-naranja); border-color: var(--pc-naranja-borde); background: #fff;
}
.lp .pc-plan--compradores .pc-btn--linea:hover{ background: var(--pc-naranja-suave); }

/* ── LA LISTA DE PUNTOS ─────────────────────────────────────────────
   Otra vez dos columnas: el tick en la primera y TODO el texto en la segunda.
   Un punto que ocupa dos líneas mantiene su segunda línea alineada con la
   primera, que es justo lo que un `margin-left` a ojo no consigue.

   `margin-top: auto` en la lista empuja los puntos hacia abajo, así que en una
   fila de tarjetas de distinta altura los botones quedan a la misma altura. */
.lp .pc-lista{
    margin: 0; padding: 0; list-style: none;
}
.lp .pc-lista li{
    display: flex; align-items: flex-start; gap: 9px;
    padding: 4px 0;
    font-size: 12.5px; line-height: 1.45;
    color: var(--lp-texto);
}
.lp .pc-lista li iconify-icon{
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 14px;
    color: var(--lp-verde);
}
.lp .pc-lista li span{ flex: 1; min-width: 0; }

/* ══ LA COMPARATIVA ════════════════════════════════════════════════════
   Repite lo de las tarjetas y no sobra: en las tarjetas cada plan se lee entero
   pero por separado; aquí se ve QUÉ CAMBIA entre PRO y BUSINESS, que es la
   decisión que se está tomando de verdad.

   ES LA TABLA DEL SITIO (`TDataTable`, piel `tdt--escaparate`, 13/10/2026): la
   cabecera de fila, los sí/no, la columna destacada con su cinta y la nota son
   piezas de la tabla (Tbasic/css/TDataTable.css). Aquí solo lo propio de esta
   pantalla. Ya no hay `min-width:940px` ni caja con `overflow-x`: la tabla se
   mide sola. */
.lp .pc-tabla-zona{ padding: 26px 0 10px; background: #fff; }
.lp .pc-tabla-zona .lp-ancho{ max-width: 1340px; }
.lp .pc-tabla-tit{ margin: 0 0 12px; font-size: 18px; font-weight: 800; color: var(--lp-tinta); letter-spacing: -.2px; }

/* Los rótulos de los planes no se parten («ENTERPRISE» entero). */
.lp .pc-comparativa .tdt-tabla thead th{ white-space: nowrap; }

/* EN TARJETAS, LOS CUATRO PLANES DE DOS EN DOS: la tarjeta de una
   funcionalidad se lee como un cuadro de 2 × 2 y no como una lista larga, y
   BUSINESS sobre verde. */
.lp .pc-comparativa.tdt--tarjetas .tdt-fila{ grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); row-gap: 4px; column-gap: 6px; }
.lp .pc-comparativa.tdt--tarjetas .tdt-fila > .tdt-t-tick{ border-radius: 6px; padding-left: 8px !important; padding-right: 8px !important; }
/* El rótulo del plan entero («ENTERPRISE»): con el 45 % de la tabla se partía. */
.lp .pc-comparativa.tdt--tarjetas .tdt-fila > .tdt-t-tick::before{ max-width: none; white-space: nowrap; }

/* ══ LAS TRES CAJAS DEL FINAL ══════════════════════════════════════════
   `1fr 1.15fr 1.15fr`: la de los sellos es la más corta --cuatro medallas y dos
   líneas-- y con las tres iguales le sobraba la mitad del ancho. */
.lp .pc-cierre-zona{ padding: 26px 0 66px; background: #fff; }
.lp .pc-cierre-zona .lp-ancho{ max-width: 1340px; }

.lp .pc-cierre{
    display: grid;
    grid-template-columns: 1fr 1.15fr 1.15fr;
    gap: 18px;
    align-items: stretch;
}

.lp .pc-caja{
    padding: 24px 24px 22px;
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    background: var(--pc-caja-fondo);
}
.lp .pc-caja h2{
    margin: 0 0 8px;
    font-size: 16px; font-weight: 800; letter-spacing: -.2px;
    color: var(--lp-tinta); text-align: left;
}
.lp .pc-caja p{
    margin: 0 0 14px;
    font-size: 13px; line-height: 1.55;
    color: var(--lp-texto); text-align: left;
}

/* ── 1. LOS SELLOS ──────────────────────────────────────────────────
   Centrada, que es como la pone la maqueta: son cuatro piezas de marca en fila
   y alineadas a la izquierda quedaban colgando del borde. */
.lp .pc-caja--sellos{ text-align: center; }
.lp .pc-caja--sellos h2,
.lp .pc-caja--sellos p{ text-align: center; }

.lp .pc-sellos{
    display: flex; align-items: flex-end; justify-content: center; gap: 18px;
    margin: 0; padding: 0; list-style: none;
}
.lp .pc-sellos li{
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.lp .pc-sellos img{
    /* 62px: la escarapela tiene cinta, aro, rótulo «SELLER» y cinco estrellas.
       Por debajo de 50 no se lee nada de eso y quedan cuatro manchas de color,
       que es justo lo que hace dudar de si el sello está o no. */
    height: 62px; width: auto; display: block;
}
.lp .pc-sellos b{ font-size: 11.5px; font-weight: 700; color: var(--lp-texto); }

/* ── 2. PROTECCIÓN ──────────────────────────────────────────────────
   Escudo a la izquierda, TODO el texto en la segunda columna. La regla de
   alineación otra vez: título, párrafo y enlace arrancan en la misma vertical. */
.lp .pc-caja--proteccion{ display: flex; align-items: flex-start; gap: 18px; }

.lp .pc-escudo{
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px;
    color: var(--lp-verde);
}
.lp .pc-escudo iconify-icon{ font-size: 46px; }

.lp .pc-caja-txt{ flex: 1; min-width: 0; }

/* ── 3. LAS PREGUNTAS ───────────────────────────────────────────────
   Con `<details>`: se abre y se cierra sin una línea de JS y funciona con el
   teclado igual que con el ratón. */
.lp .pc-faq{ margin-bottom: 14px; }

.lp .pc-faq details{ border-bottom: 1px solid var(--lp-borde); }
.lp .pc-faq details:last-child{ border-bottom: 0; }

.lp .pc-faq summary{
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 0;
    font-size: 13px; color: var(--lp-tinta);
    cursor: pointer;
    list-style: none;
}
/* El triángulo del navegador, fuera: la flecha la pone el icono. Hacen falta
   las dos reglas -- WebKit usa su pseudoelemento propio. */
.lp .pc-faq summary::-webkit-details-marker{ display: none; }
.lp .pc-faq summary::marker{ content: ''; }

.lp .pc-faq summary iconify-icon{
    flex: 0 0 auto;
    font-size: 16px; color: var(--lp-suave);
    transition: transform .18s;
}
.lp .pc-faq details[open] summary iconify-icon{ transform: rotate(180deg); }

.lp .pc-faq details p{
    margin: 0 0 11px;
    font-size: 12.5px; line-height: 1.6;
    color: var(--lp-texto);
}

.lp .pc-enlace{
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700;
    color: var(--lp-verde); text-decoration: none;
}
.lp .pc-enlace:hover{ color: var(--lp-verde-oscuro); text-decoration: underline; }
.lp .pc-enlace iconify-icon{ font-size: 15px; }

/* ══ PANTALLAS ESTRECHAS ═══════════════════════════════════════════════
   Los cortes salen de dónde ROMPE cada bloque, no de una lista de tamaños de
   móvil: la fila de cinco tarjetas aguanta hasta ~1180, las tres cajas hasta
   ~980 y el héroe hasta ~860. */
/* ══ DE 1180 A 621: UN CARRIL QUE SE ARRASTRA ═════════════════════════
 *
 * En tablet las cinco tarjetas se apilaban en dos columnas y la zona medía
 * 1.490 px --medido a 820: una pantalla y media solo de planes--. Comparar
 * cinco planes obliga entonces a recordar el primero mientras se lee el
 * quinto, que es justo lo que una tabla de precios existe para evitar.
 *
 * Se resolvía como la tabla comparativa de más abajo (hasta el 13/10/2026, que pasó a `TDataTable`): una
 * sola fila y el scroll DENTRO de su caja, no en la página. Se ve media
 * tarjeta cortada a la derecha, que es lo que dice que hay más.
 *
 * ── DOS COSAS QUE ROMPE `overflow-x` Y NO AVISAN ───────────────────
 *
 * 1. `overflow-x: auto` obliga al OTRO eje: por norma, si un eje deja de ser
 *    `visible`, el otro pasa de `visible` a `auto`. Así que la cinta de «Más
 *    popular» --que va en `top:-13px`, fuera de su tarjeta-- se recortaría, y
 *    encima saldría una barra vertical en un carril horizontal. Por eso el
 *    relleno de arriba: la cinta cae DENTRO de la caja de relleno y no hay
 *    nada que recortar. El de abajo es para la sombra de la destacada.
 * 2. El `scale(1.05)` de la destacada se sale del carril y lo recorta por el
 *    mismo motivo. Se quita, como ya se hacía en una columna: cuál es el plan
 *    elegido lo sigue diciendo el borde verde.
 *
 * Por debajo de 620 NO se aplica: ahí ya está decidido que va en una columna
 * --con su motivo escrito más abajo-- y en un móvil un carril de tarjetas de
 * 262 px deja ver una y pico. */
@media (max-width: 1180px) and (min-width: 621px){
    .lp .pc-planes{
        display: flex;
        overflow-x: auto;
        padding-top: 16px;                  /* el hueco de la cinta */
        padding-bottom: 10px;               /* la sombra de la destacada */
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;     /* que no arrastre la página detrás */
    }

    /* EL FOCO, DECLARADO. Al carril se llega ahora con el tabulador --lo pide
       WCAG 2.1.1, porque si no los planes de la derecha quedan fuera del
       alcance de quien no usa ratón-- y medido en el navegador el anillo del
       navegador NO sale: algo de las hojas de arriba deja `outline-style` en
       `none`. Un punto de tabulación al que no se le ve el foco es peor que
       no tenerlo: se navega a ciegas. */
    .lp .pc-planes:focus-visible{
        outline: 3px solid var(--lp-verde);
        outline-offset: 4px;
        border-radius: var(--lp-radio);
    }

    /* NI SE ENCOGEN NI SE ESTIRAN: es un carril, no una rejilla. Con `1fr` las
       cinco cabrían a la fuerza y volveríamos al punto de partida. */
    .lp .pc-planes .pc-plan{
        flex: 0 0 262px;
        scroll-snap-align: start;
    }

    .lp .pc-plan.es-destacado{ transform: none; }
}

@media (max-width: 980px){
    .lp .pc-cierre{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
    .lp .pc-heroe{ padding: 76px 0 70px; }
    /* El medallón se retira: sobre la foto y con el texto ya a todo el ancho se
       le come el sitio al titular, que es lo que se ha venido a leer. */
    .lp .pc-medallon{ display: none; }
}

/* ── EL VELO EN TABLET: ENCUADRADO EN EL TEXTO, NO A TODO EL ANCHO ────
 *
 * De 861 hacia abajo el velo pasaba a un degradado VERTICAL de .95 a .62 que
 * blanqueaba la foto ENTERA de arriba abajo: el agricultor quedaba lavado y
 * la cara casi no se veía. Y no hacía falta: el bloque de texto mide 470 px
 * fijos hasta los ~560 de ventana, o sea que entre 621 y 860 ocupa del 58 %
 * al 72 % --medido--, y queda foto de sobra a la derecha que no hay ninguna
 * razón para tapar.
 *
 * ── Y LAS PARADAS VAN EN PÍXELES, NO EN PORCENTAJE ────────────────
 *
 * Porque el texto NO se estira: son 470 px fijos pegados al borde izquierdo.
 * Un porcentaje se estira con la ventana --el mismo 62 % son 500 px a 820 y
 * 420 a 680-- y el velo se desencuadraría del texto en cuanto se gira la
 * tableta. En píxeles tapa siempre lo mismo: sólido hasta donde acaba el
 * texto y transparente 150 px después.
 *
 * ── POR QUÉ NO SE HACE ESTO TAMBIÉN EN ESCRITORIO ─────────────────
 *
 * Ahí el contenedor se centra: a 1920 el texto va de 307 a 777, no pegado al
 * borde. Unas paradas en píxeles contadas desde la izquierda dejarían sin
 * velo justo la mitad derecha del titular. El porcentaje es lo correcto
 * cuando el bloque se mueve con el ancho, y el píxel cuando no se mueve.
 *
 * `90deg` y no `100deg` como arriba: con el degradado inclinado las paradas
 * se miden a lo largo de la diagonal y dejan de coincidir con la vertical por
 * la que acaba el texto, que es lo que se está encuadrando.
 *
 * ── EL .80 NO ES UN GUSTO: ES EL SUELO MENOS UN MARGEN ────────────
 *
 * El párrafo es gris de 15,5 px --texto normal, pide 4,5:1-- y llega hasta los
 * 484 px. Detrás hay follaje, y el píxel MÁS OSCURO de toda la zona del texto
 * es (0,3,0), o sea negro. Medido llevando la foto a un canvas y muestreando
 * ese rectángulo entero, esto es lo que da cada opacidad contra ese píxel:
 *
 *     .70 → 4,41   NO LLEGA        .78 → 5,51
 *     .74 → 4,92   justo           .80 → 5,70
 *
 * Así que por debajo de .74 el párrafo deja de cumplir AA sobre la parte
 * oscura de la foto. Se usa .80 para no ir al filo, y por eso la caída
 * empieza en 490 y no antes: antes pillaría el final del párrafo.
 * Si alguien quiere el velo más transparente, lo que hay que cambiar primero
 * es el color del párrafo, no la opacidad. */
@media (max-width: 860px) and (min-width: 621px){
    .lp .pc-heroe-foto::after{
        background: linear-gradient(90deg,
                    rgba(255,255,255,.86) 0,
                    rgba(255,255,255,.84) 320px,
                    rgba(255,255,255,.80) 490px,
                    rgba(255,255,255,.30) 545px,
                    rgba(255,255,255,0)   590px);
    }
}

/* En el móvil sí va el velo entero: por debajo de 620 el texto ocupa del 80 %
   al 96 % del ancho --medido-- y ya no hay «columna de la izquierda» que
   encuadrar; lo que hay es un titular sobre una foto, y sin velo no se lee. */
@media (max-width: 620px){
    .lp .pc-heroe-foto::after{
        background: linear-gradient(180deg,
                    rgba(255,255,255,.95) 0%,
                    rgba(255,255,255,.88) 55%,
                    rgba(255,255,255,.62) 100%);
    }
}

@media (max-width: 620px){
    .lp .pc-planes{ grid-template-columns: minmax(0, 1fr); }

    /* EN UNA COLUMNA, EL ZOOM SE QUITA.
       Agrandar un 5 % sirve cuando hay cuatro tarjetas al lado con las que
       compararse; apiladas no hay comparación posible y lo único que hace es
       sacar la destacada de la columna -- medido a 600px: 587 de ancho contra
       559 de las demás, y el borde izquierdo en -1, o sea fuera del contenedor.
       Cuál es el plan elegido lo sigue diciendo el borde verde de 3px.

       La cinta de «Más popular» sí conserva su hueco de arriba, que es lo que
       evita que la corte la tarjeta anterior. */
    .lp .pc-plan.es-destacado{ transform: none; margin-top: 8px; }

    .lp .pc-ciclo{ flex-wrap: wrap; justify-content: center; width: min(92%, 340px); }
    .lp .pc-sellos{ flex-wrap: wrap; gap: 14px; }
}


/* El enlace de la caja de sellos hacia `/sellos`. El color se declara también
   para `:visited` porque la hoja global del sitio pinta `a, a:visited, a span`
   de magenta, y esta es una página que se visita. */
.lp .pc-sellos-mas{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    color: var(--lp-verde);
    font-size: 12.5px;
    font-weight: 700;
}
.lp .pc-sellos-mas:visited{ color: var(--lp-verde); }
.lp .pc-sellos-mas:hover{ color: var(--lp-verde-oscuro); }



/* ══════════════════════════════════════════════════════════════════════
   TContentReportForm — «Denunciar contenido»

   Esta hoja VIAJA CON TODA PÁGINA (pageComponents), y por eso el botón se
   define aquí: lo ponen la ficha de producto, el perfil del vendedor y cada
   valoración, y así los tres se ven igual sin que ninguno lo redefina.

   ── DISCRETO, PERO ACCESIBLE ─────────────────────────────────────────
   Es una opción que casi nadie usa y que no puede competir con «Añadir a la
   cesta»: texto pequeño, sin fondo ni borde. Pero el gris cumple AA
   (#556259 sobre blanco, 6,3:1) y el foco se ve.

   ── LA CLASE DOBLADA ─────────────────────────────────────────────────
   `.TComponentES6 button` impone display:flex y 25px de alto a todo botón
   dentro de un componente, y la hoja de la ficha arrastra reglas globales
   sobre `button`: con `button.crf-boton.crf-boton` se gana sin depender del
   orden de carga.

   Candidato a la hoja común del área pública cuando se extraiga.
   ══════════════════════════════════════════════════════════════════════ */

button.crf-boton.crf-boton{
    display: inline-flex; align-items: center; gap: 5px;
    height: auto; min-height: 0; width: auto;
    margin: 0; padding: 4px 2px;
    background: none; border: 0; border-radius: 4px; box-shadow: none;
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3;
    color: #556259; cursor: pointer;
    text-decoration: none;
}
button.crf-boton.crf-boton:hover{ color: #9b1c14; text-decoration: underline; }
button.crf-boton.crf-boton:focus-visible{ outline: 2px solid #04713a; outline-offset: 2px; }
button.crf-boton.crf-boton iconify-icon{ font-size: 13px; flex: 0 0 auto; }

/* La fila que lo coloca al final de un bloque, alineado a la derecha. */
.crf-fila{ display: flex; justify-content: flex-end; margin-top: 10px; }

/* La variante de la página /denunciar-contenido: aquí SÍ es la acción principal. */
button.crf-boton.crf-boton--principal{
    padding: 10px 18px; border-radius: 8px;
    background: #04713a; color: #fff; font-size: 14px;
}
button.crf-boton.crf-boton--principal:hover{ background: #005c2d; color: #fff; text-decoration: none; }
button.crf-boton.crf-boton--principal iconify-icon{ font-size: 16px; }

/* ── LA PÁGINA ───────────────────────────────────────────────────────── */

.crf [hidden]{ display: none !important; }

.crf .crf-pagina{
    max-width: 880px; margin: 34px auto; padding: 0 16px;
    color: #16211a; font-size: 14px;
}

.crf .crf-cab{ display: flex; gap: 14px; align-items: flex-start; margin-bottom: 26px; }
.crf .crf-cab-ico{
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #eef6ee; color: #04713a;
}
.crf .crf-cab-ico iconify-icon{ font-size: 24px; }
.crf .crf-cab-txt{ flex: 1; min-width: 0; }
.crf .crf-cab-txt h1{ margin: 0 0 6px; font-size: 24px; line-height: 1.25; }
.crf .crf-cab-txt p{ margin: 0; color: #4a564e; line-height: 1.5; font-size: 14px; }

.crf .crf-pasos{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.crf .crf-paso{
    display: flex; gap: 10px; align-items: flex-start;
    padding: 14px; border: 1px solid #e3e9e4; border-radius: 12px; background: #fff;
}
.crf .crf-paso-ico{ flex: 0 0 auto; color: #04713a; }
.crf .crf-paso-ico iconify-icon{ font-size: 20px; }
.crf .crf-paso > div{ flex: 1; min-width: 0; }
.crf .crf-paso b{ display: block; margin-bottom: 4px; font-size: 14px; }
.crf .crf-paso small{ display: block; color: #4a564e; font-size: 13px; line-height: 1.45; }

.crf .crf-accion{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.crf .crf-accion small{ color: #4a564e; font-size: 12px; }
.crf .crf-accion a{ color: #04713a; }

/* ── EL FORMULARIO ──────────────────────────────────────────────────────
   `rows` no pinta nada: una regla global le fija 22px a todo textarea y la de
   los controles un min-height de 60px. La altura se pide por clase. */
.crf-explicacion textarea,
textarea.crf-explicacion{ min-height: 120px !important; height: 120px !important; }

p.crf-nota{
    margin: 4px 0 0; padding: 9px 11px; border-radius: 8px;
    background: #f3f6f4; color: #3f4a43; font-size: 12.5px; line-height: 1.45;
}

/* ── EL ACUSE ───────────────────────────────────────────────────────── */

.crf-acuse{ max-width: 520px; padding: 4px 2px; color: #16211a; font-size: 14px; }
.crf-acuse .crf-acuse-fila{ display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.crf-acuse .crf-acuse-ico{ flex: 0 0 auto; color: #04713a; }
.crf-acuse .crf-acuse-ico iconify-icon{ font-size: 26px; }
.crf-acuse .crf-acuse-txt{ flex: 1; min-width: 0; }
.crf-acuse .crf-acuse-txt b{ display: block; font-size: 16px; margin-bottom: 3px; }
.crf-acuse .crf-acuse-txt small{ display: block; font-size: 13px; color: #4a564e; }
.crf-acuse p{ margin: 0 0 10px; line-height: 1.5; font-size: 14px; }
.crf-acuse .crf-acuse-pie{ display: flex; justify-content: flex-end; margin-top: 14px; }



/* ═══════════════════════════════════════════════════════════════════════════
 *  RECUPERAR LA CONTRASEÑA — la ficha dentro de la ventana
 *
 *  Copia la ficha de la pantalla (`TRegisterQuick`, `.rqk-solo-form`): el
 *  logotipo a 44 px, el título de 26 px, el campo de 11 px de radio con el
 *  verde de foco y el botón verde a todo lo ancho. CANDIDATO A LA HOJA COMÚN
 *  del área pública, junto con aquella: hoy son dos copias de los mismos
 *  valores (tokens `--rq-*` allí, `--fgp-*` aquí).
 * ═══════════════════════════════════════════════════════════════════════════ */

.fgp{
    --fgp-verde:        #2d6a2f;
    --fgp-verde-vivo:   #3f8f43;
    --fgp-verde-oscuro: #14532d;
    --fgp-verde-borde:  #dbe8d6;
    --fgp-verde-caja:   #f5faf3;
    --fgp-texto: #14261a;
    --fgp-suave: #5b6b60;
    --fgp-tenue: #93a399;

    padding: 18px 28px 26px;
    color: var(--fgp-texto);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.fgp .fgp-marca{ display: block; height: 44px; width: auto; margin: 0 0 22px; }

.fgp .fgp-titulo{
    margin: 0 0 5px;
    font-size: 26px; font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.2;
    color: #07090d;
}

.fgp .fgp-sub{ margin: 0 0 14px; font-size: 13px; color: var(--fgp-suave); }

/* `!important` COMO EN `.rqk-campo`: una regla global del sitio pone los
   `label` en fila con `!important`, y sin esto el rótulo y el campo salían
   uno al lado del otro y el campo a media anchura (medido: 225 de 400 px). */
.fgp .fgp-campo{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px;
    margin: 0 0 14px;
}

.fgp .fgp-rotulo{ align-self: stretch; font-size: 12px; font-weight: 600; }

.fgp .fgp-con-ico{ position: relative; display: block; width: 100%; }
.fgp .fgp-con-ico > iconify-icon{
    position: absolute; left: 13px; top: 50%;
    transform: translateY(-50%);
    font-size: 15px; color: var(--fgp-tenue);
    pointer-events: none;
}

.fgp .fgp-con-ico input{
    width: 100%;
    box-sizing: border-box;
    height: auto;
    padding: 12px 14px 12px 38px;
    border: 1px solid #dbe4dd;
    border-radius: 11px;
    background: #fff;
    font-size: 13px; font-family: inherit;
    color: var(--fgp-texto);
}
.fgp .fgp-con-ico input::placeholder{ color: var(--fgp-tenue); }
.fgp .fgp-con-ico input:focus{
    outline: none;
    border-color: var(--fgp-verde-vivo);
    box-shadow: 0 0 0 3px rgba(63,143,67,.12);
}

.fgp .fgp-error{ display: none; font-size: 11px; color: #b91c1c; font-style: normal; }
.fgp .fgp-campo.mal input{ border-color: #f87171; background: #fef2f2; }
.fgp .fgp-campo.mal .fgp-error{ display: block; }

/* EL BOTÓN, EL DE LA FICHA (`.rqk-btn-crear`). `height:auto` porque la regla
   global `.TComponentES6 button{height:25px}` lo aplastaría. */
.fgp .fgp-btn{
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    height: auto;
    padding: 13px;
    border: 0;
    border-radius: 11px;
    background: var(--fgp-verde);
    color: #fff;
    font-size: 14.5px; font-weight: 700; font-family: inherit;
    cursor: pointer;
}
.fgp .fgp-btn:hover{ background: var(--fgp-verde-oscuro); }
.fgp .fgp-btn:focus-visible{ outline: 3px solid rgba(63,143,67,.35); outline-offset: 2px; }
.fgp .fgp-btn:disabled{ opacity: .7; cursor: default; }
.fgp .fgp-btn iconify-icon{ font-size: 17px; }

/* EL AVISO: la misma caja verde que el de la pantalla (`.rqk-olv-hecho`). */
.fgp .fgp-hecho{
    display: none;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid var(--fgp-verde-borde);
    background: var(--fgp-verde-caja);
    color: #2f5136;
    font-size: 12.5px; line-height: 1.5;
}
.fgp .fgp-hecho.on{ display: flex; }
.fgp .fgp-hecho > iconify-icon{ flex: 0 0 auto; font-size: 18px; color: var(--fgp-verde-vivo); }
.fgp .fgp-hecho > div{ flex: 1; min-width: 0; }

.fgp .fgp-ya{ margin: 14px 0 0; text-align: center; font-size: 12.5px; }
.fgp .fgp-ya a{ color: var(--fgp-verde); font-weight: 700; text-decoration: underline; }

/* LA VENTANA, CON LAS ESQUINAS DE LA TARJETA de la pantalla (`--rq-radio`,
   30 px; algo menos aquí porque la ventana es más pequeña). Va por la
   `hostClass` que pone `open()`: el overlay vive fuera del árbol de `.fgp`. */
.TOverlayWin.fgp-ventana{ border-radius: 24px; overflow: hidden; }

@media (max-width: 600px){
    .fgp{ padding: 14px 18px 22px; }
    .fgp .fgp-marca{ height: 32px; }
    .fgp .fgp-titulo{ font-size: 22px; }
}