/* ==========================================================================
   components.css — bloques .el-*. BEM, sin selectores frágiles.

   Estado: cubre cabecera, pie, blog y artículo, que es lo que necesita la
   migración de contenido. El resto de las secciones del mockup entra con el
   refactor página por página.
   ========================================================================== */

/* ----- Utilidades compartidas -------------------------------------------- */

.el-rotulo {
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    letter-spacing: var(--el-track-rotulo);
    text-transform: uppercase;
    color: var(--el-oliva);
}

/* Sobre fondo oscuro el oliva no contrasta: se usa lima apagada. */
.el-rotulo--claro {
    color: var(--el-crema-media);
}

/* Rótulo secundario: acompaña a otro sin competir con él. */
.el-rotulo--neutro {
    color: var(--el-tinta-suave);
}

/* En pastilla: se usa cuando el rótulo abre una sección y necesita peso
   propio, no cuando etiqueta algo que ya tiene titular al lado. */
.el-rotulo--pastilla {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--el-borde-pastilla);
    border-radius: var(--el-radio-pastilla);
    color: var(--el-tinta-media);
}

/* Etiqueta en pastilla: ciudades del pie, íconos de redes. */
.el-ficha {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--el-crema-suave);
    border-radius: var(--el-radio-pastilla);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    color: var(--el-crema-fuerte);
    text-decoration: none;
    transition: border-color var(--el-transicion), color var(--el-transicion);
}

a.el-ficha:hover {
    border-color: var(--el-lima);
    color: var(--el-lima);
}

.el-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--el-esp-2xs);
    padding: var(--el-esp-xs) var(--el-esp-m);
    border: 1px solid transparent;
    border-radius: var(--el-radio-pastilla);
    font-size: var(--el-txt-base);
    font-weight: var(--el-peso-fuerte);
    text-decoration: none;
    transition:
        background var(--el-transicion),
        color var(--el-transicion),
        box-shadow var(--el-transicion),
        transform var(--el-transicion),
        filter var(--el-transicion);
}

/* Todos los botones se levantan un poco. El halo lo pone cada variante. */
.el-btn:hover {
    transform: translateY(-2px);
}

/* La flecha acompaña al botón en diagonal. */
.el-btn span {
    transition: transform var(--el-transicion);
}

.el-btn:hover span {
    transform: translate(2px, -2px);
}

.el-btn--lima {
    background: var(--el-lima);
    color: var(--el-tinta);
}

/* Sobre fondo claro, cuando el lima competiría con el resto de la sección. */
.el-btn--tinta {
    background: var(--el-tinta);
    color: var(--el-crema-alta);
}

.el-btn--tinta:hover {
    background: var(--el-tinta-clara);
    box-shadow: var(--el-sombra-tinta);
}

/* Contorno sobre fondo oscuro: acompaña al botón lima sin competir. */
.el-btn--contorno,
.el-btn--contorno-claro {
    border-color: var(--el-crema-media);
    color: var(--el-crema-alta);
    font-weight: var(--el-peso-medio);
}

.el-btn--contorno:hover,
.el-btn--contorno-claro:hover {
    background: rgb(244 244 240 / .12);
    border-color: rgb(244 244 240 / .62);
}

/* Junto a un campo de formulario el botón deja de ser pastilla: acompaña la
   forma del input en vez de competir con ella. */
.el-btn--bloque {
    padding: 14px 26px;
    border-radius: var(--el-radio-campo);
    font-size: var(--el-txt-base);
}

/* El lima no se oscurece: se aclara y proyecta su propio color. */
.el-btn--lima:hover {
    filter: brightness(1.06);
    box-shadow: var(--el-sombra-lima);
}

/* Rótulo sobre fondo oscuro, cuando tiene que resaltar. */
.el-rotulo--lima {
    color: var(--el-lima);
}

/* Campo fuera de la vista, para atrapar bots. No usa display:none porque
   varios lo detectan y lo saltan. */
.el-trampa {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ----- Cabecera ----------------------------------------------------------- */

/* Fija y transparente sobre el hero oscuro: el contenido del hero va abajo,
   así que el header flota sobre la parte alta de la imagen. Al bajar (o abrir
   el menú móvil) se vuelve sólida —cabecera.js pone .es-solida—. Las páginas
   que abren claras nacen con .el-cabecera--solida y no dependen del scroll. */
.el-cabecera {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
}

/* El fondo sólido va en un pseudo-elemento cuya opacidad transiciona de 0 a 1.
   Transicionar `background` de transparent a color-mix() se comporta mal; la
   opacidad interpola limpio. El contenido va sobre él con su propio z-index. */
.el-cabecera::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--el-crema) 94%, transparent);
    backdrop-filter: blur(16px);
    border-block-end: 1px solid var(--el-borde-tenue);
    opacity: 0;
    transition: opacity var(--el-transicion);
    pointer-events: none;
}

.el-cabecera.es-solida::before,
.el-cabecera--solida::before,
.el-cabecera.es-abierta::before {
    opacity: 1;
}

.el-cabecera__interior,
.el-cabecera__panel {
    position: relative;
    z-index: 1;
}

/* Las páginas oscuras dejan que el hero suba bajo el header transparente. Las
   claras no tienen hero a sangre, así que el contenido despeja la altura del
   header fijo (72px) con una sola regla. Sus cabeceras no deben sumar ese
   despeje de nuevo o quedaría aire doble. */
.con-cabecera-solida #contenido {
    padding-block-start: 72px;
}

/* Tres bloques repartidos: logo a la izquierda, acciones a la derecha y el nav
   en el medio —space-between, como el mockup—, no pegado al botón. */
.el-cabecera__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--el-esp-l);
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    height: 72px;
    padding-inline: var(--el-borde-lateral);
}

.el-cabecera__marca {
    display: inline-flex;
}

/* El color del logotipo sigue al estado: blanco sobre el hero, tinta al
   solidificarse. El isotipo se queda lima siempre (lo fija .el-logo). */
.el-cabecera .el-logo__palabra {
    fill: var(--el-crema-alta);
    transition: fill var(--el-transicion);
}

.el-cabecera.es-solida .el-logo__palabra,
.el-cabecera--solida .el-logo__palabra,
.el-cabecera.es-abierta .el-logo__palabra {
    fill: var(--el-tinta);
}

.el-cabecera__acciones {
    display: flex;
    align-items: center;
    gap: var(--el-esp-xs);
}

/* En la barra el botón compite con el nav: va más chico que en el cuerpo. */
.el-cabecera__cta {
    font-size: var(--el-txt-boton);
}

/* ----- Nav de escritorio -------------------------------------------------- */

.el-cabecera__nav {
    display: none;
    align-items: center;
    gap: clamp(0.875rem, 2vw, 1.875rem);
    font-size: var(--el-txt-menor);
    font-weight: var(--el-peso-medio);
}

.el-cabecera__nav > a,
.el-menu-sol__disparador {
    color: var(--el-crema-fuerte);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--el-transicion);
}

/* Sobre fondo sólido los enlaces pasan a tinta. */
.el-cabecera.es-solida .el-cabecera__nav > a,
.el-cabecera--solida .el-cabecera__nav > a,
.el-cabecera.es-solida .el-menu-sol__disparador,
.el-cabecera--solida .el-menu-sol__disparador {
    color: var(--el-tinta-media);
}

.el-cabecera__nav > a:hover,
.el-menu-sol__disparador:hover,
.el-cabecera.es-solida .el-cabecera__nav > a:hover,
.el-cabecera--solida .el-cabecera__nav > a:hover {
    color: var(--el-lima);
}

.el-cabecera.es-solida .el-cabecera__nav > a:hover,
.el-cabecera--solida .el-cabecera__nav > a:hover,
.el-cabecera.es-solida .el-menu-sol__disparador:hover,
.el-cabecera--solida .el-menu-sol__disparador:hover {
    color: var(--el-oliva);
}

/* ----- Dropdown de Soluciones (CSS puro) ---------------------------------- */

.el-menu-sol {
    position: relative;
    display: flex;
    align-items: center;
}

.el-menu-sol__disparador {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.el-menu-sol__caret {
    font-size: 9px;
    opacity: 0.7;
    transition: transform var(--el-transicion);
}

/* El panel cuelga del disparador con un colchón superior invisible (el
   padding-top del panel) para que el mouse cruce sin que se cierre. */
.el-menu-sol__panel {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    translate: -50% 0;
    padding-block-start: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity var(--el-transicion),
        transform var(--el-transicion),
        visibility var(--el-transicion);
}

.el-menu-sol:hover .el-menu-sol__panel,
.el-menu-sol:focus-within .el-menu-sol__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.el-menu-sol:hover .el-menu-sol__caret,
.el-menu-sol:focus-within .el-menu-sol__caret {
    transform: rotate(180deg);
}

.el-menu-sol__tarjeta {
    min-width: 262px;
    padding: 8px;
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: 14px;
    box-shadow: 0 18px 44px -18px rgb(20 20 20 / .35);
}

.el-menu-sol__destacado {
    display: block;
    padding: 12px 14px;
    border-radius: 9px;
    font-weight: var(--el-peso-fuerte);
    color: var(--el-tinta);
    text-decoration: none;
    transition: background var(--el-transicion);
}

.el-menu-sol__destacado span {
    display: block;
    margin-block-start: 2px;
    font-weight: var(--el-peso-normal);
    font-size: var(--el-txt-mini);
    color: var(--el-tinta-suave);
}

.el-menu-sol__destacado:hover {
    background: var(--el-crema);
}

.el-menu-sol__sub {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 6px 6px;
}

.el-menu-sol__sub a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: var(--el-txt-menor);
    color: var(--el-tinta-media);
    text-decoration: none;
    transition: background var(--el-transicion);
}

.el-menu-sol__sub a span {
    color: var(--el-oliva);
}

.el-menu-sol__sub a:hover {
    background: var(--el-crema);
}

.el-menu-sol__linea {
    height: 1px;
    margin: 4px 8px 6px;
    background: var(--el-borde-tenue);
}

/* ----- Burger y panel móvil ----------------------------------------------- */

.el-cabecera__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--el-crema-alta);
}

.el-cabecera.es-solida .el-cabecera__burger,
.el-cabecera--solida .el-cabecera__burger,
.el-cabecera.es-abierta .el-cabecera__burger {
    color: var(--el-tinta);
}

.el-cabecera__burger span {
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition:
        transform var(--el-transicion),
        opacity var(--el-transicion);
}

/* Abierto: las tres líneas se cruzan en una X. */
.el-cabecera.es-abierta .el-cabecera__burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.el-cabecera.es-abierta .el-cabecera__burger span:nth-child(2) {
    opacity: 0;
}

.el-cabecera.es-abierta .el-cabecera__burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.el-cabecera__panel {
    display: none;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    background: var(--el-crema);
    border-block-start: 1px solid var(--el-borde-tenue);
}

.el-cabecera.es-abierta .el-cabecera__panel {
    display: block;
}

.el-panel-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px 18px;
}

.el-panel-nav__item {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: var(--el-txt-lead);
    font-weight: var(--el-peso-fuerte);
    color: var(--el-tinta);
    text-decoration: none;
    transition: background var(--el-transicion);
}

.el-panel-nav__item:hover {
    background: color-mix(in srgb, var(--el-tinta) 6%, transparent);
}

.el-panel-nav__item--sub {
    padding-inline-start: 26px;
    font-size: var(--el-txt-base);
    font-weight: var(--el-peso-medio);
    color: var(--el-tinta-media);
}

.el-panel-nav__grupo {
    padding: 14px 14px 6px;
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    letter-spacing: var(--el-track-rotulo);
    text-transform: uppercase;
    color: var(--el-tinta-tenue);
}

.el-panel-nav__linea {
    height: 1px;
    margin: 10px 8px;
    background: var(--el-borde-tenue);
}

.el-panel-nav__cta {
    margin-block-start: 12px;
}

/* Umbral propio de la cabecera, más alto que los 60rem del resto del sitio:
   los siete ítems del nav más el logo y el botón Cotizar necesitan ~1125px de
   ventana. Por debajo de 72rem el nav se desborda, así que ahí manda el burger.
   Si se agrega o alarga un ítem, hay que volver a medir este número. */
@media (width >= 72rem) {
    .el-cabecera__nav {
        display: flex;
    }

    .el-cabecera__burger,
    .el-cabecera__panel {
        display: none;
    }
}

/* El dropdown de escritorio no existe en móvil: el panel lo reemplaza. */
@media (width < 72rem) {
    .el-menu-sol__panel {
        display: none;
    }
}

/* ----- Newsletter ---------------------------------------------------------
   Bloque oscuro sobre el fondo claro del sitio. Reusable en cualquier página.
*/

/* El aire de arriba lo pone la sección anterior, como en todo el sitio.
   El de abajo es suyo, porque el pie no aporta margen. */
.el-newsletter {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding-inline: var(--el-borde-lateral);
    padding-block-end: var(--el-esp-seccion);
}

.el-newsletter__caja {
    display: grid;
    grid-template-columns: 1.22fr 1fr;
    align-items: center;
    gap: clamp(var(--el-esp-l), 4vw, 3.5rem);
    padding: clamp(var(--el-esp-l), 5vw, 4.5rem) clamp(var(--el-esp-m), 4.4vw, 4rem);
    background: var(--el-tinta-pie);
    color: var(--el-crema-alta);
    border-radius: var(--el-radio-2xl);
}

@media (width < 52rem) {
    .el-newsletter__caja {
        grid-template-columns: 1fr;
    }
}

.el-newsletter__titulo {
    font-size: var(--el-txt-h2-menor);
    margin-block: var(--el-esp-2xs) var(--el-esp-s);
}

.el-newsletter__bajada {
    color: var(--el-crema-fuerte);
}

.el-newsletter__forma {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* El mensaje de error vive dentro del formulario, así que ocupa su propia
   fila completa debajo del campo y el botón. */
.el-newsletter__error {
    flex-basis: 100%;
}

.el-newsletter__nota,
.el-newsletter__error,
.el-newsletter__exito {
    margin-block-start: var(--el-esp-xs);
    font-size: var(--el-txt-nota);
}

.el-newsletter__nota {
    color: var(--el-crema-media);
}

.el-newsletter__error:empty {
    display: none;
}

.el-newsletter__error {
    color: var(--el-lima);
}

.el-newsletter__exito {
    color: var(--el-lima);
    font-weight: var(--el-peso-fuerte);
}

/* ----- Campo de formulario ------------------------------------------------ */

/* La base es el formulario sobre claro —contacto—, con la etiqueta a la vista.
   El newsletter va sobre oscuro y sin etiqueta: es la variante, más abajo. */
.el-campo {
    flex: 1 1 14rem;
    min-width: 0;
    border: 0;
    padding: 0;
    margin: 0;
}

.el-campo__etiqueta {
    display: block;
    line-height: normal;
    margin-block-end: var(--el-esp-2xs);
    font-size: var(--el-txt-micro);
    font-weight: var(--el-peso-medio);
    color: var(--el-tinta-media);
}

.el-campo__control {
    width: 100%;
    padding: 13px 15px;
    background: var(--el-crema);
    border: 1px solid var(--el-borde-campo);
    border-radius: var(--el-radio-campo);
    color: var(--el-tinta);
    font-family: inherit;
    font-size: var(--el-txt-base);
    transition: border-color var(--el-transicion);
}

.el-campo__control::placeholder {
    color: var(--el-tinta-tenue);
}

.el-campo__control:focus {
    border-color: var(--el-oliva);
    outline: none;
}

/* Asterisco de campo obligatorio. */
.el-campo__req {
    color: var(--el-oliva);
}

/* Campo que ocupa el ancho completo dentro de la rejilla de pares. */
.el-campo--ancho {
    grid-column: 1 / -1;
}

/* Desplegables: misma caja que los inputs, con flecha propia. */
.el-campo__control--select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-inline-end: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23232323' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

/* El mensaje de validación aparece bajo su campo. Vacío no ocupa espacio. */
.el-campo__error:not(:empty) {
    margin-block-start: var(--el-esp-3xs);
    font-size: var(--el-txt-mini);
    color: var(--el-alerta);
}

/* Variante sobre oscuro: la usa el newsletter, donde el diseño reemplaza la
   etiqueta por el placeholder. */
.el-newsletter .el-campo__etiqueta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.el-newsletter .el-campo__control {
    padding: 14px 16px;
    background: rgb(244 244 240 / .06);
    border-color: rgb(244 244 240 / .22);
    color: var(--el-crema-alta);
}

.el-newsletter .el-campo__control::placeholder {
    color: var(--el-crema-media);
}

.el-newsletter .el-campo__control:focus {
    border-color: var(--el-lima);
}

/* ----- Pie ---------------------------------------------------------------- */

.el-pie {
    position: relative;
    overflow: hidden;
    background: var(--el-tinta-pie);
    color: var(--el-crema-alta);
}

/* Resplandor de lima muy tenue, anclado a la esquina inferior derecha.
   Antes era una franja diagonal (linear-gradient) que el borde cortaba y se
   veía como un rayo truncado. Un resplandor radial desde la esquina se
   desvanece hacia adentro y nunca queda cortado. */
.el-pie::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(100%, 62rem);
    aspect-ratio: 2 / 1;
    background: radial-gradient(
        120% 135% at bottom right,
        rgb(187 239 37 / .11),
        transparent 60%
    );
    pointer-events: none;
}

.el-pie__interior {
    position: relative;   /* por encima de la franja */
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    /* El aire de arriba es generoso a propósito: además de dar el respiro del
       diseño, alarga el pie lo suficiente para que la franja diagonal quede
       contenida abajo a la derecha en vez de trepar por el borde. */
    padding: var(--el-esp-2xl) var(--el-borde-lateral) var(--el-esp-l);
}

.el-pie__rejilla {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(1.75rem, 4vw, 3.5rem);
}

@media (width < 60rem) {
    .el-pie__rejilla {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    }

    .el-pie__marca-col {
        grid-column: 1 / -1;
    }
}

/* ----- Logo ---------------------------------------------------------------
   Un solo SVG para los dos fondos. El brand kit trae dos archivos que solo
   difieren en color: acá esa diferencia la resuelve el CSS.

   El logotipo tiene letras dibujadas, no tipografía: no se puede reemplazar
   por texto ni escalarlo con font-size.
*/

.el-logo {
    display: block;
    height: var(--el-logo-alto);
    width: auto;
}

.el-logo__simbolo {
    fill: var(--el-lima);
}

.el-logo__palabra {
    fill: var(--el-tinta);
}

/* Sobre fondo oscuro solo cambia el logotipo: el isotipo se queda en lima. */
.el-logo--claro .el-logo__palabra {
    fill: var(--el-blanco);
}

.el-pie__cobertura {
    max-width: 30ch;
    margin-block-start: var(--el-esp-m);
    font-size: var(--el-txt-menor);
    color: var(--el-crema-fuerte);
}

.el-pie__cobertura strong {
    color: var(--el-crema-alta);
    font-weight: var(--el-peso-fuerte);
}

.el-pie__redes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--el-esp-2xs);
    list-style: none;
    padding: 0;
    margin-block-start: var(--el-esp-m);
}

/* Banda de sucursales: fila propia entre las columnas y la barra de legales. */
.el-pie__sucursales {
    margin-block-start: var(--el-esp-xl);
    padding-block-start: var(--el-esp-l);
    border-block-start: 1px solid var(--el-crema-suave);
}
.el-pie__oficinas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--el-esp-m);
    list-style: none;
    padding: 0;
    margin-block-start: var(--el-esp-m);
}
.el-pie__oficina-ciudad {
    font-weight: var(--el-peso-fuerte);
    font-size: var(--el-txt-menor);
    color: var(--el-crema-alta);
}
.el-pie__oficina-dir {
    display: inline-flex;
    gap: 4px;
    margin-block-start: var(--el-esp-3xs);
    font-size: var(--el-txt-menor);
    color: var(--el-crema-fuerte);
    text-decoration: none;
}
a.el-pie__oficina-dir:hover { color: var(--el-lima); }

.el-pie__columna ul {
    list-style: none;
    padding: 0;
    margin-block-start: var(--el-esp-s);
}

/* Solo las listas apiladas (contacto, soluciones, empresa) separan sus ítems;
   las redes van en fila y este margen las escalonaría. */
.el-pie__columna ul:not(.el-pie__redes) li + li {
    margin-block-start: var(--el-esp-2xs);
}

.el-pie__columna a {
    font-size: var(--el-txt-menor);
    color: var(--el-crema-fuerte);
    text-decoration: none;
}

.el-pie__columna a:hover {
    color: var(--el-lima);
}

.el-pie__columna .el-pie__cotizar {
    color: var(--el-lima);
    font-weight: var(--el-peso-fuerte);
}

.el-pie__barra {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--el-esp-s);
    margin-block-start: var(--el-esp-xl);
    padding-block-start: var(--el-esp-m);
    border-block-start: 1px solid var(--el-crema-suave);
    font-size: var(--el-txt-nota);
    color: var(--el-crema-media);
}

.el-pie__legales {
    display: flex;
    gap: var(--el-esp-m);
}

.el-pie__legales a {
    color: inherit;
    text-decoration: none;
}

.el-pie__legales a:hover {
    color: var(--el-lima);
}

/* ==========================================================================
   PORTADA
   ========================================================================== */

/* Contenedor común de las secciones de la portada. */
.el-franja {
    padding-block: var(--el-esp-seccion);
}

/* Tecnología y Ahorro forman un bloque: la segunda no repite el aire de
   arriba, si no queda un vacío doble entre las dos. */
.el-franja--pegada {
    padding-block-start: 0;
}

.el-franja > * {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding-inline: var(--el-borde-lateral);
}

.el-franja--blanca {
    background: var(--el-blanco);
}

/* La cabecera va en el mismo carril de 1248 que el contenido de su sección:
   hereda el `margin-inline: auto` de .el-franja > * y no lleva ancho propio.
   Un `max-width` más angosto acá la despegaba del bloque de abajo. */
.el-seccion__cabecera {
    margin-block-end: 44px;
}

/* Centrada: la usan las secciones que abren con el titular al medio. */
/* Centrada sí lleva ancho máximo: una medida larga centrada se lee mal. */
.el-seccion__cabecera--centrada {
    max-width: var(--el-ancho-texto);
    margin-inline: auto;
    margin-block-end: 52px;
    text-align: center;
}

.el-seccion__cabecera h2 {
    margin-block: var(--el-esp-2xs) var(--el-esp-s);
}

/* Cabecera a la izquierda —las interiores—: el rótulo separa 14 y el titular
   cierra con 40. El ancho de 20ch viene del mockup y no es decorativo: obliga
   a quebrar el titular en dos líneas, que es como está diseñado. La portada
   no lo lleva, por eso va acotado a la variante no centrada. */
.el-seccion__cabecera:not(.el-seccion__cabecera--centrada) {
    margin-block-end: 0;
}

.el-seccion__cabecera:not(.el-seccion__cabecera--centrada) h2 {
    max-width: 20ch;
    margin-block: 14px 40px;
}

.el-seccion__bajada {
    font-size: var(--el-txt-base);
    color: var(--el-tinta-media);
}

/* ----- 1 · Hero ------------------------------------------------------------
   Alto de pantalla, con la imagen de fondo bajo dos capas: un degradado
   horizontal que oscurece el lado del texto, y un resplandor cálido que imita
   el sol. Sin la primera capa el titular no se lee sobre según qué foto.
*/

.el-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: min(100svh, 56rem);
    overflow: hidden;
    background: var(--el-tinta-honda);
    color: var(--el-crema-alta);
}

.el-hero__fondo,
.el-hero__velo,
.el-hero__brillo {
    position: absolute;
    inset: 0;
}

.el-hero__fondo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.el-hero__velo {
    background: linear-gradient(
        90deg,
        rgb(12 12 12 / .90) 0%,
        rgb(12 12 12 / .55) 42%,
        rgb(12 12 12 / .15) 72%,
        rgb(12 12 12 / .50) 100%
    );
}

.el-hero__brillo {
    background: radial-gradient(
        40% 42% at 76% 62%,
        rgb(255 196 92 / .34),
        transparent 70%
    );
}

.el-hero__interior {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--el-esp-xl);
    width: 100%;
    max-width: var(--el-ancho-sitio);
    min-height: inherit;
    margin-inline: auto;
    padding: var(--el-esp-2xl) var(--el-borde-lateral);
}

.el-hero__texto {
    margin-block-start: auto;
}

.el-hero__titulo {
    font-size: var(--el-txt-display);
    font-weight: var(--el-peso-medio);
    line-height: var(--el-alto-apretado);
    margin-block: var(--el-esp-s) var(--el-esp-m);
}

.el-hero__bajada {
    max-width: 34ch;
    font-size: var(--el-txt-lead);
    color: var(--el-crema-fuerte);
}

.el-hero__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--el-esp-xs);
    margin-block-start: var(--el-esp-l);
}

.el-hero__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--el-esp-l);
}

.el-resenas {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    list-style: none;
    padding: 0;
}

.el-resena__estrellas {
    color: var(--el-lima);
    letter-spacing: 0.1em;
}

.el-resena__nombre {
    font-size: var(--el-txt-mini);
    font-weight: var(--el-peso-fuerte);
}

.el-resena__frase {
    font-size: var(--el-txt-micro);
    color: var(--el-crema-media);
}

.el-marcas {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    list-style: none;
    padding: 0;
    font-size: var(--el-txt-marca);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.01em;
    color: var(--el-crema-fuerte);
}

/* ----- 2 · Introducción ----------------------------------------------------
   Foto en vertical a la izquierda, declaración de misión a la derecha con las
   cifras debajo.
*/

.el-intro__rejilla {
    display: grid;
    grid-template-columns: 1fr 1.44fr;
    gap: var(--el-esp-xl);
    align-items: center;
    margin-block-start: var(--el-esp-l);
}

.el-intro__marco {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--el-radio-foto);
}

.el-intro__marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* El texto arranca en color pleno y sigue en gris muy claro. No es decoración:
   ordena la lectura, primero la promesa y después el matiz. */
.el-intro__texto {
    font-size: var(--el-txt-mision);
    font-weight: var(--el-peso-medio);
    letter-spacing: -0.02em;
    line-height: 1.28;
    text-wrap: pretty;
}

.el-intro__texto-suave {
    color: var(--el-tinta-tenue);
}

.el-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 56px;
    list-style: none;
    padding: 0;
    margin-block-start: 40px;
}

.el-cifra {
    padding-inline-start: var(--el-esp-s);
    border-inline-start: 2px solid var(--el-lima);
}

.el-cifra__valor {
    font-size: var(--el-txt-cifra);
    font-weight: var(--el-peso-fuerte);
    line-height: 1;
}

.el-cifra__etiqueta {
    margin-block-start: var(--el-esp-3xs);
    font-size: var(--el-txt-micro);
    color: var(--el-tinta-suave);
}

@media (width < 52rem) {
    .el-intro__rejilla {
        grid-template-columns: 1fr;
        gap: var(--el-esp-m);
    }
}

/* ----- 3 · Soluciones ------------------------------------------------------
   En reposo cada solución es una fila con una línea divisoria. Al pasar el
   mouse se convierte en un panel lima y aparece la foto por la derecha.

   La foto vive siempre en el DOM y se despliega con CSS. El mockup la inyecta
   con JavaScript; así funciona igual sin depender de él y además anima.
*/

.el-soluciones__lista {
    list-style: none;
    padding-inline: var(--el-borde-lateral);
}

.el-soluciones__lista li {
    border-block-start: 1px solid var(--el-borde-tenue);
}

.el-soluciones__lista li:first-child {
    border-block-start: none;
}

/* La fila activa se despega: su línea y la de la siguiente estorban. */
.el-soluciones__lista li:has(.el-solucion:hover),
.el-soluciones__lista li:has(.el-solucion:hover) + li {
    border-color: transparent;
}

.el-solucion {
    display: flex;
    align-items: center;
    gap: var(--el-esp-m);
    padding: 28px var(--el-esp-2xs);
    border-radius: var(--el-radio-l);
    text-decoration: none;
    transition:
        background var(--el-transicion-suave),
        padding var(--el-transicion-suave);
}

.el-solucion:hover {
    background: var(--el-lima);
    padding: var(--el-esp-m);
}

.el-solucion__texto {
    flex: 1;
}

.el-solucion__titulo {
    font-size: var(--el-txt-solucion);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.02em;
}

.el-solucion__descripcion {
    font-size: var(--el-txt-menor);
    margin-block-start: var(--el-esp-3xs);
    color: var(--el-tinta-media);
    transition: color var(--el-transicion-suave);
}

/* Sobre lima el gris pierde contraste: el texto vuelve a tinta plena. */
.el-solucion:hover .el-solucion__descripcion {
    color: var(--el-tinta);
}

.el-solucion__marco {
    flex-shrink: 0;
    width: 0;
    height: 120px;
    overflow: hidden;
    border-radius: var(--el-radio-campo);
    opacity: 0;
    transition:
        width var(--el-transicion-suave),
        opacity var(--el-transicion-suave);
}

.el-solucion:hover .el-solucion__marco {
    width: 200px;
    opacity: 1;
}

.el-solucion__marco img {
    width: 200px;
    height: 100%;
    object-fit: cover;
}

.el-solucion__flecha {
    font-size: var(--el-txt-h2);
    transition: transform var(--el-transicion);
}

/* Acá la flecha corre en horizontal: la fila entera se desplaza, no sube. */
.el-solucion:hover .el-solucion__flecha {
    transform: translateX(6px);
}

/* Bajo 48rem la foto no cabe junto al texto y se oculta del todo. */
@media (width < 48rem) {
    .el-solucion:hover .el-solucion__marco {
        width: 0;
        opacity: 0;
    }
}

/* ----- 4 · Tecnología ------------------------------------------------------ */

 /* Tecnología abre más apretado que Soluciones: 44 contra 52. */
.el-tecno .el-seccion__cabecera {
    margin-block-end: 44px;
}

.el-tecno__rejilla {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--el-esp-s);
}

/* Panel con foto de fondo y contenido encima. Lo usan Tecnología y Ahorro. */
.el-panel-foto {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    min-height: 21.25rem;
    border-radius: var(--el-radio-foto);
    color: var(--el-crema-alta);
}

.el-panel-foto--alto {
    min-height: clamp(21.25rem, 44vw, 32.5rem);
    border-radius: var(--el-radio-xl);
}

.el-panel-foto__fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sin este velo el dato no se lee sobre según qué foto. */
.el-panel-foto__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgb(18 18 18 / .1) 40%, rgb(18 18 18 / .8));
}

.el-panel-foto__dato {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--el-esp-s);
    padding: 26px;
}

.el-dato__etiqueta {
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    letter-spacing: var(--el-track-rotulo);
    text-transform: uppercase;
    color: var(--el-crema-media);
}

.el-dato__valor {
    font-size: var(--el-txt-dato);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--el-lima);
}

/* La unidad va bastante más chica que el número: el dato es la cifra. */
.el-dato__unidad {
    font-size: var(--el-txt-base);
    font-weight: var(--el-peso-normal);
}

/* Medidor de arco junto al dato. Decorativo: el nivel es fijo. */
.el-medidor {
    flex-shrink: 0;
    width: 76px;
    height: 46px;
    color: var(--el-crema-alta);
}

.el-bloque {
    display: flex;
    flex-direction: column;
    gap: var(--el-esp-s);
    padding: 30px;
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-foto);
}

/* Alternar fondo entre los dos bloques evita que la fila se vea plana. */
.el-bloque--oscuro {
    background: var(--el-tinta);
    border-color: transparent;
    color: var(--el-crema-alta);
}

.el-bloque__icono {
    display: block;
    width: 22px;
    height: 22px;
    color: var(--el-tinta);
}

/* Sobre fondo oscuro el ícono se monta en una baldosa y va en lima. */
.el-bloque--oscuro .el-bloque__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--el-radio-campo);
    background: rgb(244 244 240 / .1);
    color: var(--el-lima);
}

.el-bloque--oscuro .el-bloque__icono .el-icono {
    width: 20px;
    height: 20px;
}

.el-icono {
    display: block;
    width: 100%;
    height: 100%;
}

.el-bloque--oscuro .el-bloque__texto {
    color: var(--el-crema-fuerte);
}

.el-bloque__titulo {
    font-size: var(--el-txt-h4);
}

.el-bloque__texto {
    color: var(--el-tinta-media);
}

@media (width < 60rem) {
    .el-tecno__rejilla {
        grid-template-columns: 1fr;
    }
}

/* ----- 5 · Ahorro ---------------------------------------------------------- */

/* Tarjeta blanca con todo el texto a la izquierda, foto a la derecha. */
.el-ahorro__rejilla {
    display: grid;
    grid-template-columns: 1fr 1.22fr;
    gap: var(--el-esp-s);
    align-items: stretch;
}

.el-ahorro__tarjeta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.875rem, 4vw, 3.25rem);
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-xl);
}

.el-ahorro__titulo {
    font-size: var(--el-txt-h2-menor);
    margin-block: var(--el-esp-2xs) var(--el-esp-s);
}

.el-ahorro__boton {
    align-self: flex-start;
    margin-block-start: 28px;
    padding: 14px 24px;
    font-size: var(--el-txt-base);
}

.el-puntos {
    list-style: none;
    padding: 0;
    margin-block-start: var(--el-esp-m);
}

.el-puntos li {
    position: relative;
    padding-inline-start: 1.625rem;
    padding-block: var(--el-esp-2xs);
    font-size: var(--el-txt-menor);
}

.el-puntos li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: var(--el-oliva);
    font-weight: var(--el-peso-fuerte);
}

/* Placa translúcida sobre la foto. El desenfoque la despega del fondo sin
   taparlo del todo. */
.el-placa {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: var(--el-esp-s);
    padding: 18px 22px;
    background: rgb(20 20 20 / .62);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    color: var(--el-crema-alta);
}

.el-placa__icono {
    display: block;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    color: var(--el-lima);
}

.el-placa__etiqueta {
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    letter-spacing: var(--el-track-rotulo);
    text-transform: uppercase;
    color: var(--el-crema-media);
}

.el-placa__valor {
    font-size: var(--el-txt-placa);
    font-weight: var(--el-peso-fuerte);
    line-height: 1;
}

@media (width < 52rem) {
    .el-ahorro__rejilla {
        grid-template-columns: 1fr;
    }
}

/* ----- 6 · Portafolio ------------------------------------------------------ */

.el-portafolio__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-block-end: var(--el-esp-xl);
}

.el-portafolio__cabecera h2 {
    margin-block-start: var(--el-esp-2xs);
}

.el-enlace-flecha {
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-menor);
    text-decoration: none;
    white-space: nowrap;
}

.el-enlace-flecha span {
    display: inline-block;
    transition: transform var(--el-transicion);
}

.el-enlace-flecha:hover span {
    transform: translateX(5px);
}

.el-proyectos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--el-esp-s);
    list-style: none;
    padding-inline: var(--el-borde-lateral);
}

.el-proyecto {
    overflow: hidden;
    border-radius: var(--el-radio-l);
    background: var(--el-crema);
    transition:
        transform var(--el-transicion-suave),
        box-shadow var(--el-transicion-suave);
}

.el-proyecto:hover {
    transform: translateY(-8px);
    box-shadow: var(--el-sombra-flotante);
}

/* La tarjeta enlaza al detalle del proyecto; el enlace es todo el bloque. */
.el-proyecto__enlace {
    display: block;
    color: inherit;
    text-decoration: none;
}

.el-proyecto__marco {
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.el-proyecto__marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--el-transicion-lenta);
}

.el-proyecto:hover .el-proyecto__marco img {
    transform: scale(1.05);
}

.el-proyecto__pie {
    padding: 18px 20px;
}

.el-proyecto__nombre {
    font-size: var(--el-txt-base);
}

.el-proyecto__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-block-start: var(--el-esp-3xs);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-mini);
    color: var(--el-tinta-suave);
}

.el-proyecto__potencia {
    font-size: var(--el-txt-nota);
}

.el-proyecto__potencia {
    color: var(--el-oliva);
}

/* ----- 7 · Cierre ---------------------------------------------------------- */

.el-cierre {
    padding-block-start: 90px;
}

/* El ancho lo pone .el-cierre__interior, que es el hijo de la franja. */
.el-cierre__caja {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem);
    background: var(--el-tinta-pie);
    color: var(--el-crema-alta);
    border-radius: var(--el-radio-2xl);
    text-align: center;
}

/* Franja de lima cruzando la caja. Más marcada que la del pie: acá es el
   único color de una sección que si no sería un rectángulo negro. */
.el-cierre__brillo {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 42%,
        rgb(187 239 37 / .2) 66%,
        rgb(187 239 37 / .05) 80%,
        transparent 92%
    );
    pointer-events: none;
}

/* El isotipo gira una vuelta cada 22 segundos: se nota como movimiento de
   fondo, no como animación. base.css lo detiene si el sistema pide menos
   movimiento. */
/* El aire bajo el isotipo lo pone el isotipo, no el titular: así una caja sin
   sol —el cierre de Empresas— cierra sola contra el borde de arriba. */
.el-cierre__sol {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 56px;
    margin-block-end: var(--el-esp-m);
    color: var(--el-lima);
    animation: el-girar 22s linear infinite;
}

@keyframes el-girar {
    to { rotate: 360deg; }
}

.el-cierre__titulo {
    position: relative;
    font-size: var(--el-txt-cierre);
    line-height: 1.02;
}

.el-cierre__bajada {
    position: relative;
    max-width: 52ch;
    margin: 18px auto 0;
    font-size: var(--el-txt-cierre-bajada);
    line-height: 1.5;
    color: var(--el-crema-media-alta);
}

.el-cierre__botones {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
    margin-block-start: 32px;
}

/* En las interiores el cierre va más compacto que en la portada: sin aire
   arriba —la sección anterior ya trae el suyo—, caja de 90 en vez de 96,
   isotipo de 52 y titular un escalón menor. */
.el-cierre--interior {
    padding-block-start: 0;
}

.el-cierre--interior .el-cierre__caja {
    padding-block: clamp(3rem, 7vw, 5.625rem);
}

.el-cierre--interior .el-cierre__sol {
    width: 52px;
    height: 52px;
    margin-block-end: 22px;
}

.el-cierre--interior .el-cierre__titulo {
    font-size: var(--el-txt-cierre-menor);
    line-height: 1.03;
}

.el-cierre--interior .el-cierre__botones {
    margin-block-start: 30px;
}

/* ----- Página 404 ---------------------------------------------------------- */

.el-vacio {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: var(--el-esp-2xl) var(--el-borde-lateral);
}

/* ----- Blog: listado ------------------------------------------------------ */

.el-blog {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: var(--el-esp-xl) var(--el-borde-lateral) var(--el-esp-seccion);
}

.el-blog__cabecera {
    max-width: var(--el-ancho-texto);
    margin-block-end: var(--el-esp-xl);
}

/* Centrada: la usan las secciones que abren con el titular al medio. */
/* Centrada sí lleva ancho máximo: una medida larga centrada se lee mal. */
.el-seccion__cabecera--centrada {
    max-width: var(--el-ancho-texto);
    margin-inline: auto;
    margin-block-end: 52px;
    text-align: center;
}

.el-blog__cabecera h1 {
    margin-block: var(--el-esp-2xs) var(--el-esp-s);
}

.el-blog__bajada {
    font-size: var(--el-txt-lead);
    color: var(--el-tinta-media);
}

/* ----- Blog: artículo destacado ------------------------------------------
   Encabeza el listado: imagen a la izquierda, panel a la derecha. Comparte
   el gesto de hover con las tarjetas, pero sin el zoom de imagen: a este
   tamaño el movimiento se nota demasiado.
*/

.el-destacado {
    display: grid;
    grid-template-columns: 1.22fr 1fr;
    overflow: hidden;
    margin-block-end: var(--el-esp-xl);
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-xl);
    text-decoration: none;
    transition:
        transform var(--el-transicion-suave),
        box-shadow var(--el-transicion-suave);
}

.el-destacado:hover {
    transform: translateY(-8px);
    box-shadow: var(--el-sombra-flotante);
}

.el-destacado__marco {
    overflow: hidden;
}

.el-destacado__imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.el-destacado__panel {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--el-esp-m), 3.6vw, 3.25rem);
}

.el-destacado__rotulos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--el-esp-2xs);
}

.el-destacado__titulo {
    font-size: var(--el-txt-destacado);
    margin-block: var(--el-esp-s) var(--el-esp-m);
}

/* Tope de líneas: la bajada se edita desde el panel y una muy larga
   desbalancearía la tarjeta contra la imagen. */
.el-destacado__bajada {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    color: var(--el-tinta-media);
}

.el-destacado__meta {
    margin-block-start: auto;
    padding-block-start: var(--el-esp-m);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    color: var(--el-tinta-suave);
}

@media (width < 48rem) {
    .el-destacado {
        grid-template-columns: 1fr;
    }

    .el-destacado__marco {
        aspect-ratio: 3 / 2;
    }
}

/* ----- Blog: filtro por categoría -----------------------------------------
   El filtro es por enlace, no por JavaScript: con 256 artículos paginados de
   a 12, filtrar en el cliente solo alcanzaría la página visible.
*/

.el-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--el-esp-s);
    margin-block-end: var(--el-esp-l);
}

.el-filtros__pastillas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.el-pastilla {
    padding: 9px 16px;
    border: 1px solid var(--el-borde-pastilla);
    border-radius: var(--el-radio-pastilla);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--el-tinta-media);
    transition: border-color var(--el-transicion), color var(--el-transicion);
}

.el-pastilla:hover {
    border-color: var(--el-tinta);
    color: var(--el-tinta);
}

.el-pastilla[aria-current="page"] {
    background: var(--el-tinta);
    border-color: var(--el-tinta);
    color: var(--el-crema);
}

.el-filtros__cuenta {
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    color: var(--el-tinta-suave);
}

/* ----- Blog: grilla de artículos ------------------------------------------ */

.el-blog__vacio {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--el-esp-s);
    padding-block: var(--el-esp-xl);
    color: var(--el-tinta-media);
}

.el-blog__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--el-esp-l);
    list-style: none;
    padding: 0;
}

.el-tarjeta__enlace {
    /* Columna a altura completa: si no, las tarjetas de título corto quedan
       más bajas que su celda y la fila se ve despareja. */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;                   /* recorta el zoom de la imagen */
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-xl);
    text-decoration: none;
    transition:
        transform var(--el-transicion-suave),
        box-shadow var(--el-transicion-suave);
}

.el-tarjeta__enlace:hover {
    transform: translateY(-8px);
    box-shadow: var(--el-sombra-flotante);
}

.el-tarjeta__marco {
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.el-tarjeta__imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--el-transicion-lenta);
}

.el-tarjeta__enlace:hover .el-tarjeta__imagen {
    transform: scale(1.05);
}

.el-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--el-esp-m);
}

.el-tarjeta__titulo {
    font-size: var(--el-txt-h3);
    margin-block: var(--el-esp-2xs);
}

/* La fecha se ancla abajo, así queda alineada entre tarjetas de la misma fila. */
.el-tarjeta__meta {
    margin-block-start: auto;
    padding-block-start: var(--el-esp-2xs);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    color: var(--el-tinta-suave);
}

/* ----- Paginación ---------------------------------------------------------
   Ventana alrededor de la página actual, no la lista completa: con 22 páginas
   la fila entera es ilegible y se desarma en móvil.
*/

.el-paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--el-esp-2xs) var(--el-esp-s);
    margin-block-start: var(--el-esp-xl);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
}

.el-paginacion__numeros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--el-esp-3xs);
    list-style: none;
    padding: 0;
    margin: 0;
}

.el-paginacion a {
    display: block;
    min-width: 2.25rem;
    padding: var(--el-esp-2xs);
    border: 1px solid transparent;
    border-radius: var(--el-radio-s);
    text-align: center;
    text-decoration: none;
    color: var(--el-tinta-media);
    transition: border-color var(--el-transicion), color var(--el-transicion);
}

.el-paginacion a:hover {
    border-color: var(--el-borde-pastilla);
    color: var(--el-tinta);
}

.el-paginacion a[aria-current="page"] {
    background: var(--el-tinta);
    border-color: var(--el-tinta);
    color: var(--el-crema);
}

.el-paginacion__hueco {
    display: block;
    min-width: 1.5rem;
    text-align: center;
    color: var(--el-tinta-suave);
}

/* Anterior y siguiente van a los extremos y no necesitan el ancho mínimo. */
.el-paginacion__salto {
    min-width: 0;
    white-space: nowrap;
}

@media (width < 34rem) {
    .el-paginacion__salto {
        display: none;
    }
}

/* ----- Artículo ----------------------------------------------------------- */

.el-articulo {
    max-width: var(--el-ancho-texto);
    margin-inline: auto;
    padding: var(--el-esp-xl) var(--el-borde-lateral);
}

.el-articulo__volver {
    display: inline-block;
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    letter-spacing: var(--el-track-rotulo);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--el-tinta-suave);
    margin-block-end: var(--el-esp-m);
}

.el-articulo__titulo {
    margin-block: var(--el-esp-2xs) var(--el-esp-m);
}

.el-articulo__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--el-esp-2xs);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    color: var(--el-tinta-suave);
}

.el-articulo__portada {
    margin-block: var(--el-esp-l);
}

.el-articulo__portada img {
    width: 100%;
    border-radius: var(--el-radio-m);
}

/* ----- Prosa: el HTML que llega desde la migración -----------------------
   Los artículos importados traen p, h2, h3, ul, ol, strong, em, a, img,
   blockquote y table. Todo eso se estiliza acá, no en el contenido.
*/

.el-prosa {
    font-size: var(--el-txt-lead);
}

.el-prosa > * + * {
    margin-block-start: var(--el-esp-m);
}

.el-prosa h2 {
    margin-block-start: var(--el-esp-xl);
}

.el-prosa h3 {
    margin-block-start: var(--el-esp-l);
}

.el-prosa a {
    text-decoration: underline;
}

.el-prosa img {
    width: 100%;
    border-radius: var(--el-radio-m);
}

.el-prosa li + li {
    margin-block-start: var(--el-esp-2xs);
}

.el-prosa blockquote {
    padding-inline-start: var(--el-esp-m);
    border-inline-start: 3px solid var(--el-lima);
    font-size: var(--el-txt-h3);
    line-height: var(--el-alto-titular);
    color: var(--el-tinta-fuerte);
}

.el-prosa table {
    font-size: var(--el-txt-menor);
}

.el-prosa th,
.el-prosa td {
    padding: var(--el-esp-2xs) var(--el-esp-xs);
    border-block-end: 1px solid var(--el-tinta-suave);
    text-align: start;
}

/* ==========================================================================
   PÁGINAS INTERIORES
   ========================================================================== */

/* ----- Hero interior --------------------------------------------------------
   Foto a sangre con el contenido anclado abajo. Menos alto que el de la
   portada: acá el titular abre la página, no la protagoniza.
*/

.el-hero-int {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 74vh;
    overflow: hidden;
    background: var(--el-tinta-honda);
    color: var(--el-crema-alta);
}

.el-hero-int__fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Oscurece arriba para que respire la cabecera, aclara al medio para que se
   vea la foto, y cierra abajo para que el texto se lea. */
.el-hero-int__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgb(15 15 15 / .5) 0%,
        rgb(15 15 15 / .15) 42%,
        rgb(15 15 15 / .82) 100%
    );
}

.el-hero-int__interior {
    position: relative;
    width: 100%;
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding-inline: var(--el-borde-lateral);
    padding-block-end: clamp(2.875rem, 6vw, 5.375rem);
}

.el-hero-int__titulo {
    max-width: 15ch;
    margin-block-start: var(--el-esp-s);
}

.el-hero-int__bajada {
    max-width: 54ch;
    margin-block-start: 20px;
    font-size: var(--el-txt-lead);
    line-height: 1.5;
    color: var(--el-crema-fuerte);
}

.el-hero-int__boton {
    margin-block-start: var(--el-esp-m);
    padding: 15px 26px;
}

/* Fila de dos botones (soluciones): mismo aire respecto a la bajada, con
   separación entre ambos. Sin esto quedaba pegada al texto. */
.el-hero-int__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--el-esp-s);
    margin-block-start: var(--el-esp-l);
}

/* ----- Pasos numerados ------------------------------------------------------ */

/* El titular de este bloque quiebra un poco antes que el resto. */
.el-pasos .el-seccion__cabecera h2 {
    max-width: 18ch;
}

.el-pasos__lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--el-esp-s);
    list-style: none;
    padding-inline: var(--el-borde-lateral);
}

/* La línea de arriba es la firma del bloque: marca cada paso como un tramo
   de una secuencia, no como una tarjeta suelta. */
.el-paso {
    border-block-start: 2px solid var(--el-tinta);
    padding-block-start: 20px;
}

.el-paso__numero {
    margin-block-end: 14px;
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-base);
    color: var(--el-oliva);
}

.el-paso__titulo {
    margin-block-end: var(--el-esp-2xs);
    font-size: var(--el-txt-h4);
    letter-spacing: -0.01em;
}

.el-paso__texto {
    font-size: var(--el-txt-menor);
    line-height: 1.5;
    color: var(--el-tinta-media);
}

@media (width < 52rem) {
    .el-pasos__lista {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width < 30rem) {
    .el-pasos__lista {
        grid-template-columns: 1fr;
    }
}

/* ----- Beneficios ----------------------------------------------------------- */

/* Bento de 12 columnas: el dato principal manda por tamaño y color, no por
   estar primero. Las piezas ocupan 5 + 4 + 3 arriba y 5 + 2 + 2 + 3 abajo. */
.el-beneficios__rejilla {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 158px;
    gap: var(--el-esp-s);
    list-style: none;
    padding-inline: var(--el-borde-lateral);
}

.el-beneficio {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-row: 2;
    padding: 24px;
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-foto);
}

/* Posiciones explícitas, no flujo automático: la foto va al final del HTML
   pero ocupa la columna derecha completa, y dejándolo al flujo se empujaba a
   una tercera fila. */

/* El primero es el argumento de venta: ocupa el doble de alto y va en lima. */
.el-beneficio--principal {
    grid-column: 1 / 6;
    grid-row: 1 / 3;
    padding: 34px;
    background: var(--el-lima);
    border-color: transparent;
}

.el-beneficio--oscura {
    grid-column: 6 / 10;
    grid-row: 1;
    padding: 26px;
    background: var(--el-tinta);
    border-color: transparent;
    color: var(--el-crema-alta);
}

.el-beneficio:nth-of-type(3) { grid-column: 6 / 8; }
.el-beneficio:nth-of-type(4) { grid-column: 8 / 10; }

.el-beneficio__valor {
    margin-block: auto var(--el-esp-3xs);
    font-size: var(--el-txt-dato);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.02em;
    line-height: 1;
}

.el-beneficio--principal .el-beneficio__valor {
    font-size: var(--el-txt-cierre);
}

.el-beneficio--oscura .el-beneficio__valor {
    color: var(--el-lima);
}

.el-beneficio__texto {
    font-size: var(--el-txt-menor);
    color: var(--el-tinta-media);
}

.el-beneficio--oscura .el-beneficio__texto {
    color: var(--el-crema-fuerte);
}

.el-beneficios__foto {
    position: relative;
    grid-column: 10 / -1;
    grid-row: 1 / 3;
    overflow: hidden;
    border-radius: var(--el-radio-foto);
}

.el-beneficios__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.el-beneficios__rotulo {
    position: absolute;
    inset-inline-start: 24px;
    inset-block-end: 24px;
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    letter-spacing: var(--el-track-rotulo);
    text-transform: uppercase;
    color: var(--el-crema-alta);
}

@media (width < 60rem) {
    .el-beneficios__rejilla {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
    }

    .el-beneficio,
    .el-beneficio--principal,
    .el-beneficio--oscura,
    .el-beneficios__foto {
        grid-column: span 1;
        grid-row: auto;
    }

    .el-beneficios__foto {
        grid-column: span 2;
        aspect-ratio: 16 / 9;
    }
}

/* ----- Modelos -------------------------------------------------------------- */

/* La sección no es una franja: es una tarjeta blanca despegada del fondo por
   un margen, con esquinas grandes. Por eso lleva su propio contenedor en vez
   de .el-franja, que pone el aire con padding. */
.el-modelos {
    margin: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.75rem);
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-tarjeton);
}

.el-modelos__interior {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: var(--el-esp-seccion) var(--el-borde-lateral);
}

.el-modelos__interior h2 {
    max-width: 20ch;
    margin-block: 14px 40px;
}

/* Lista apilada, no tarjetas en grilla: cada modelo es una fila separada por
   una línea. La fila destacada rompe el patrón con fondo oscuro. */
.el-modelos__lista {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.el-modelo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px 8px;
    border-block-start: 1px solid var(--el-borde-tenue);
    color: inherit;
    text-decoration: none;
    transition: background var(--el-transicion);
}

/* La última cierra la lista por abajo. */
.el-modelo:not(.el-modelo--destacado):last-child {
    border-block-end: 1px solid var(--el-borde-tenue);
}

.el-modelo:hover {
    background: var(--el-crema);
}

.el-modelo--destacado {
    overflow: hidden;
    gap: 18px;
    margin-block: 8px;
    padding: 26px 24px;
    background: var(--el-tinta);
    color: var(--el-crema-alta);
    border-block-start: 0;
    border-radius: var(--el-radio-l);
}

/* El mismo barrido de lima que la caja de cierre y la tarjeta de monitoreo. */
.el-modelo--destacado::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        transparent 55%,
        rgb(187 239 37 / .16) 78%,
        transparent 92%
    );
    pointer-events: none;
}

.el-modelo--destacado:hover {
    background: var(--el-tinta-honda);
}

.el-modelo__cuerpo {
    position: relative;
    flex: 1;
}

.el-modelo__encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
}

.el-modelo__titulo {
    font-size: var(--el-txt-modelo);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.el-modelo__subtitulo {
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    color: var(--el-oliva);
}

.el-modelo--destacado .el-modelo__subtitulo {
    color: var(--el-lima);
}

.el-modelo__texto {
    max-width: 62ch;
    margin-block-start: var(--el-esp-2xs);
    font-size: var(--el-txt-menor);
    line-height: 1.5;
    color: var(--el-tinta-media);
}

.el-modelo--destacado .el-modelo__texto {
    color: var(--el-crema-media-alta);
}

/* Distintivo: contorno en las filas claras, lima sólido en la destacada. */
.el-modelo__distintivo {
    position: relative;
    padding: 6px 12px;
    border: 1px solid var(--el-borde-pastilla);
    border-radius: var(--el-radio-pastilla);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    color: var(--el-tinta-suave);
    white-space: nowrap;
}

.el-modelo--destacado .el-modelo__distintivo {
    background: var(--el-lima);
    border-color: transparent;
    color: var(--el-tinta);
}

.el-modelo__flecha {
    position: relative;
    font-size: var(--el-txt-h3);
    transition: transform var(--el-transicion);
}

.el-modelo--destacado .el-modelo__flecha {
    color: var(--el-lima);
}

.el-modelo:hover .el-modelo__flecha {
    transform: translate(2px, -2px);
}

/* ----- Monitoreo ------------------------------------------------------------ */

/* Dos tarjetas parejas: el texto va dentro de la oscura, no al lado. */
.el-monitoreo {
    padding-block-start: 0;
}

.el-monitoreo__rejilla {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--el-esp-s);
    align-items: stretch;
}

.el-monitoreo__tarjeta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
    padding: clamp(1.875rem, 4vw, 3.25rem);
    background: var(--el-tinta-pie);
    color: var(--el-crema-alta);
    border-radius: var(--el-radio-xl);
}

.el-monitoreo__tarjeta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 48%,
        rgb(187 239 37 / .16) 74%,
        transparent 92%
    );
    pointer-events: none;
}

.el-monitoreo__texto {
    position: relative;
}

.el-monitoreo__titulo {
    max-width: 20ch;
    margin-block-start: 14px;
    font-size: var(--el-txt-panel);
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.el-monitoreo__bajada {
    max-width: 42ch;
    margin-block-start: var(--el-esp-s);
    font-size: var(--el-txt-base);
    line-height: 1.55;
    color: var(--el-crema-media-alta);
}

/* El índice es una píldora lima, no una línea de texto. */
.el-monitoreo__indice {
    position: relative;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--el-esp-2xs);
    margin-block-start: var(--el-esp-m);
    padding: 10px 18px;
    background: var(--el-lima);
    color: var(--el-tinta);
    border-radius: var(--el-radio-pastilla);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-base);
    /* El mockup pide 500 acá, pero DM Mono no es variable y solo tenemos el
       400 autohospedado. Pedir 500 no rinde nada —el navegador usa el 400
       igual, sin sintetizar— y un archivo extra por una sola píldora no paga
       contra el LCP. Queda en el peso que de verdad se dibuja. */
    font-weight: var(--el-peso-normal);
}

.el-monitoreo__ahorro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
    padding: clamp(1.875rem, 4vw, 3.25rem);
    background: var(--el-amarillo);
    color: var(--el-tinta);
    border-radius: var(--el-radio-xl);
}

.el-monitoreo__cifra {
    font-size: var(--el-txt-cifra-mayor);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.04em;
    line-height: 0.9;
}

.el-monitoreo__nota {
    margin-block-start: 10px;
    font-size: var(--el-txt-base);
    color: var(--el-tinta-media);
}

@media (width < 52rem) {
    .el-monitoreo__rejilla {
        grid-template-columns: 1fr;
    }

    .el-modelo {
        flex-wrap: wrap;
    }
}

/* ----- Propuesta de valor (Empresas) ---------------------------------------- */

/* Una tarjeta lima con la cifra grande, y al lado una columna de tres puntos
   numerados. La lima es más angosta: el peso lo pone el color, no el ancho. */
.el-propuesta__rejilla {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--el-esp-s);
    align-items: stretch;
}

.el-propuesta__cifra {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--el-lima);
    color: var(--el-tinta);
    border-radius: var(--el-radio-xl);
}

.el-propuesta__valor {
    font-size: var(--el-txt-cifra-mayor);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.04em;
    line-height: 0.9;
}

.el-propuesta__valor-titulo {
    margin-block-start: 12px;
    font-size: var(--el-txt-lead);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.01em;
}

.el-propuesta__valor-texto {
    max-width: 32ch;
    margin-block-start: var(--el-esp-2xs);
    font-size: var(--el-txt-menor);
    line-height: 1.5;
    color: var(--el-tinta-fuerte);
}

.el-propuesta__puntos {
    display: flex;
    flex-direction: column;
    gap: var(--el-esp-s);
    list-style: none;
}

.el-punto {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 28px;
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-l);
}

.el-punto__numero {
    padding-block-start: 3px;
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-mini);
    color: var(--el-oliva);
}

.el-punto__titulo {
    margin-block-end: 6px;
    font-size: var(--el-txt-h4);
    letter-spacing: -0.01em;
}

.el-punto__texto {
    font-size: var(--el-txt-menor);
    line-height: 1.5;
    color: var(--el-tinta-media);
}

/* ----- Sectores (Empresas) --------------------------------------------------- */

/* Mismo tarjetón blanco que Modelos en Residencial. */
.el-sectores {
    margin: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.75rem);
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-tarjeton);
}

.el-sectores__interior {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: var(--el-esp-seccion) var(--el-borde-lateral);
}

.el-sectores__interior h2 {
    max-width: 20ch;
    margin-block: 14px 36px;
}

.el-sectores__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--el-esp-xs);
    list-style: none;
}

/* No son enlaces ni filtros: es una nómina. Por eso no llevan hover. */
.el-sector {
    padding: 12px 22px;
    border: 1px solid var(--el-borde-pastilla);
    border-radius: var(--el-radio-pastilla);
    font-size: var(--el-txt-sector);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.el-sector--oscura {
    background: var(--el-tinta);
    border-color: transparent;
    color: var(--el-crema-alta);
}

.el-sector--lima {
    background: var(--el-lima);
    border-color: transparent;
    color: var(--el-tinta);
}

/* ----- Casos y respaldo (Empresas) ------------------------------------------- */

.el-casos {
    padding-block-start: 0;
}

.el-casos__lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--el-esp-s);
    margin-block-end: var(--el-esp-s);
    list-style: none;
}

.el-caso {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    border-radius: var(--el-radio-foto);
    color: var(--el-crema-alta);
}

/* La tarjeta enlaza al detalle. `display: contents` deja que foto/velo/pie
   sigan siendo hijos directos de .el-caso: no altera el overlay, solo hace
   clicable toda la tarjeta. */
.el-caso__enlace {
    display: contents;
    color: inherit;
    text-decoration: none;
}

.el-caso__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Casi transparente arriba para que se vea la foto, y opaco abajo para que
   el dato se lea sobre cualquier imagen. */
.el-caso__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgb(18 18 18 / .05) 40%,
        rgb(18 18 18 / .82)
    );
}

.el-caso__pie {
    position: relative;
    padding: 28px;
}

.el-caso__etiqueta {
    margin-block-end: var(--el-esp-2xs);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    color: var(--el-lima);
}

.el-caso__titulo {
    font-size: var(--el-txt-h3);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.02em;
}

.el-respaldo {
    position: relative;
    overflow: hidden;
    padding: clamp(1.875rem, 4vw, 3.25rem);
    background: var(--el-tinta-pie);
    color: var(--el-crema-alta);
    border-radius: var(--el-radio-xl);
}

.el-respaldo__trama {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        rgb(187 239 37 / .12) 1.4px,
        transparent 1.5px
    );
    background-size: 24px 24px;
    opacity: .55;
}

.el-respaldo__rejilla {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.25rem, 3vw, 3rem);
    align-items: center;
}

.el-respaldo__titulo {
    margin-block-start: 14px;
    font-size: var(--el-txt-panel);
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.el-respaldo__texto {
    font-size: var(--el-txt-base);
    line-height: 1.6;
    color: var(--el-crema-media-alta);
}

@media (width < 60rem) {
    .el-propuesta__rejilla,
    .el-respaldo__rejilla {
        grid-template-columns: 1fr;
    }
}

@media (width < 40rem) {
    .el-casos__lista {
        grid-template-columns: 1fr;
    }
}

/* ----- Contacto: encabezado ------------------------------------------------- */

/* El despeje del header fijo lo pone #contenido (72px); acá va solo el aire de
   la sección, sin volver a contar el header. */
.el-contacto-cab__interior {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: clamp(2.5rem, 4vw, 3.5rem) var(--el-borde-lateral)
             clamp(1.75rem, 3vw, 2.75rem);
}

.el-contacto-cab__titulo {
    max-width: 16ch;
    margin-block-start: 14px;
    line-height: 1;
}

.el-contacto-cab__bajada {
    max-width: 56ch;
    margin-block-start: 20px;
    font-size: var(--el-txt-lead);
    line-height: 1.5;
    color: var(--el-tinta-media);
}

.el-enlace-oliva {
    color: var(--el-oliva);
    font-weight: var(--el-peso-fuerte);
}

/* ----- Contacto: formulario y barra lateral --------------------------------- */

.el-contacto__rejilla {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: var(--el-esp-s);
    align-items: start;
}

.el-forma {
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-xl);
}

.el-forma__pares {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--el-esp-s);
}

.el-forma__tipo,
.el-forma .el-campo:not(.el-forma__pares .el-campo) {
    margin-block-start: var(--el-esp-s);
}

.el-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Cada opción es toda la caja, no solo el punto: más fácil de acertar. */
.el-opcion {
    flex: 1;
    line-height: normal;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    background: var(--el-crema);
    border: 1px solid var(--el-borde-campo);
    border-radius: var(--el-radio-campo);
    font-size: var(--el-txt-menor);
    cursor: pointer;
    transition: border-color var(--el-transicion);
}

.el-opcion input {
    accent-color: var(--el-oliva);
}

.el-opcion:has(input:checked) {
    border-color: var(--el-oliva);
}

.el-opcion:has(input:focus-visible) {
    outline: 2px solid var(--el-oliva);
    outline-offset: 2px;
}

.el-forma .el-btn--bloque {
    margin-block-start: 20px;
}

.el-forma__nota {
    margin-block-start: var(--el-esp-xs);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    color: var(--el-tinta-tenue);
    text-align: center;
}

/* Consentimiento: checkbox propio (el nativo no se puede teñir) con el visto
   en lima. El input real queda oculto pero accesible. */
.el-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: var(--el-txt-menor);
    line-height: 1.5;
    color: var(--el-tinta-fuerte);
}

.el-consent__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.el-consent__marca {
    flex: none;
    inline-size: 22px;
    block-size: 22px;
    margin-block-start: 1px;
    border: 1.5px solid var(--el-borde-campo);
    border-radius: 6px;
    background: var(--el-blanco);
    display: grid;
    place-items: center;
    transition: background-color .15s ease, border-color .15s ease;
}

.el-consent__marca::after {
    content: "";
    inline-size: 11px;
    block-size: 6px;
    border-inline-start: 2px solid var(--el-tinta);
    border-block-end: 2px solid var(--el-tinta);
    transform: translateY(-1px) rotate(-45deg) scale(0);
    transition: transform .15s ease;
}

.el-consent__input:checked + .el-consent__marca {
    background: var(--el-lima);
    border-color: var(--el-lima);
}

.el-consent__input:checked + .el-consent__marca::after {
    transform: translateY(-1px) rotate(-45deg) scale(1);
}

.el-consent__input:focus-visible + .el-consent__marca {
    outline: 2px solid var(--el-oliva);
    outline-offset: 2px;
}

/* Baja del newsletter: mini encuesta de motivo + acciones. */
.el-baja {
    margin-block-start: var(--el-esp-l);
    max-width: 460px;
}

.el-baja__opciones {
    list-style: none;
    margin: 0 0 var(--el-esp-m);
    padding: 0;
    display: grid;
    gap: 10px;
}

.el-baja__opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--el-borde-campo);
    border-radius: 12px;
    cursor: pointer;
    font-size: var(--el-txt-menor);
    color: var(--el-tinta-fuerte);
    transition: border-color .15s ease, background-color .15s ease;
}

.el-baja__opcion:hover {
    border-color: var(--el-oliva);
}

.el-baja__opcion input {
    accent-color: var(--el-oliva);
}

.el-baja__opcion:has(input:checked) {
    border-color: var(--el-oliva);
    background: rgb(122 158 24 / .06);
}

.el-baja__acciones {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.el-baja__cancelar {
    font-size: var(--el-txt-menor);
    color: var(--el-tinta-media);
    text-decoration: underline;
}

.el-baja__cancelar:hover {
    color: var(--el-tinta);
}

/* Acuse de recibo: ocupa el lugar del formulario, no un aviso sobre él. */
.el-forma--exito {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--el-esp-s);
    min-height: 20rem;
    text-align: center;
}

.el-forma__marca {
    display: block;
    width: 48px;
    height: 48px;
    color: var(--el-oliva);
}

.el-forma__exito {
    max-width: 34ch;
    font-size: var(--el-txt-lead);
    line-height: 1.45;
}

.el-lateral {
    display: flex;
    flex-direction: column;
    gap: var(--el-esp-s);
}

.el-lateral__whatsapp {
    display: block;
    padding: 26px;
    background: var(--el-tinta);
    color: var(--el-crema-alta);
    border-radius: var(--el-radio-l);
    text-decoration: none;
    transition: background var(--el-transicion);
}

.el-lateral__whatsapp:hover {
    background: var(--el-tinta-honda);
}

.el-lateral__destacado {
    margin-block-start: 10px;
    font-size: var(--el-txt-lead);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.01em;
}

.el-lateral__destacado span {
    color: var(--el-lima);
}

.el-lateral__tarjeta {
    padding: 26px;
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-l);
}

.el-lateral__datos,
.el-lateral__oficinas {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin-block-start: 14px;
}

.el-lateral__datos {
    gap: 10px;
    line-height: normal;
    font-size: var(--el-txt-base);
}

.el-lateral__datos a {
    color: var(--el-tinta);
    text-decoration: none;
}

.el-lateral__datos a:hover {
    color: var(--el-oliva);
}

.el-lateral__horario {
    line-height: normal;
    font-size: var(--el-txt-menor);
    color: var(--el-tinta-suave);
}

.el-lateral__oficinas {
    gap: var(--el-esp-xs);
}

.el-oficina__ciudad {
    line-height: normal;
    font-size: var(--el-txt-menor);
    font-weight: var(--el-peso-fuerte);
}

.el-oficina__direccion {
    display: block;
    line-height: normal;
    font-size: var(--el-txt-mini);
    color: var(--el-tinta-suave);
}

/* Con enlace al mapa: la dirección se ilumina al pasar y la flecha se separa. */
.el-oficina__direccion--mapa {
    text-decoration: none;
    transition: color var(--el-transicion);
}

.el-oficina__direccion--mapa:hover {
    color: var(--el-oliva);
}

.el-oficina__pin {
    margin-inline-start: 2px;
    font-size: 0.85em;
}

/* ----- Preguntas frecuentes -------------------------------------------------- */

.el-faq__rejilla {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.el-faq__titulo {
    margin-block-start: 14px;
    font-size: var(--el-txt-h2-menor);
    line-height: 1.05;
}

.el-faq__bajada {
    max-width: 38ch;
    margin-block-start: 18px;
    font-size: var(--el-txt-base);
    line-height: 1.55;
    color: var(--el-tinta-media);
}

.el-faq__lista {
    display: flex;
    flex-direction: column;
    gap: var(--el-esp-xs);
    list-style: none;
}

/* Sin acordeón a propósito: son cuatro respuestas cortas y esconderlas
   obliga a un clic para leer lo que cabe entero. */
.el-pregunta {
    padding: 24px 28px;
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-tarjeta);
}

.el-pregunta__titulo {
    margin-block-end: var(--el-esp-2xs);
    font-size: var(--el-txt-h4);
    letter-spacing: -0.01em;
}

.el-pregunta__texto {
    font-size: var(--el-txt-menor);
    line-height: 1.55;
    color: var(--el-tinta-media);
}

@media (width < 60rem) {
    .el-contacto__rejilla,
    .el-faq__rejilla {
        grid-template-columns: 1fr;
    }
}

@media (width < 34rem) {
    .el-forma__pares {
        grid-template-columns: 1fr;
    }
}

/* ----- Soluciones: migaja del hero ------------------------------------------ */

.el-migaja {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-end: 18px;
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-rotulo-hero);
    letter-spacing: var(--el-track-rotulo);
    text-transform: uppercase;
}

.el-migaja a {
    color: var(--el-crema-fuerte);
    text-decoration: none;
}

.el-migaja a:hover {
    color: var(--el-lima);
}

.el-migaja__barra {
    color: var(--el-crema-media);
}

.el-migaja__actual {
    color: var(--el-lima);
}

/* ----- Soluciones: qué es ---------------------------------------------------- */

.el-quees__rejilla {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(1.75rem, 4vw, 4rem);
    align-items: start;
}

.el-quees__titulo {
    margin-block-start: 14px;
    font-size: var(--el-txt-h2-quees);
    line-height: 1.05;
}

.el-quees__texto {
    font-size: var(--el-txt-parrafo-mayor);
    line-height: 1.55;
    color: var(--el-tinta-fuerte);
}

.el-quees__texto-menor {
    margin-block-start: 18px;
    font-size: var(--el-txt-base);
    line-height: 1.6;
    color: var(--el-tinta-media);
}

.el-quees__etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 28px;
    list-style: none;
}

.el-etiqueta {
    padding: 9px 16px;
    border: 1px solid var(--el-borde-pastilla);
    border-radius: var(--el-radio-pastilla);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-micro);
    line-height: normal;
}

/* ----- Soluciones: el ciclo (cómo funciona) ---------------------------------- */

/* Tarjeta negra despegada del fondo, como el tarjetón blanco de Modelos pero
   invertida. La trama de puntos es la misma del panel de respaldo. */
.el-ciclo {
    position: relative;
    overflow: hidden;
    margin: clamp(1.25rem, 3vw, 2.5rem) clamp(0.75rem, 2vw, 1.75rem);
    background: var(--el-tinta-pie);
    color: var(--el-crema-alta);
    border-radius: var(--el-radio-tarjeton);
}

.el-ciclo__trama {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        rgb(187 239 37 / .13) 1.4px,
        transparent 1.5px
    );
    background-size: 24px 24px;
    opacity: .55;
}

.el-ciclo__interior {
    position: relative;
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: var(--el-esp-seccion) clamp(1.5rem, 4vw, 3.5rem);
}

.el-ciclo__titulo {
    max-width: 22ch;
    margin-block: 14px var(--el-esp-s);
}

.el-ciclo__bajada {
    max-width: 60ch;
    margin-block-end: 48px;
    font-size: var(--el-txt-base);
    line-height: 1.55;
    color: var(--el-crema-media-alta);
}

/* Dentro del ciclo la lista no lleva el borde lateral: ya lo pone la caja. */
.el-pasos__lista--suelta {
    padding-inline: 0;
}

/* Sobre oscuro la línea es fina y clara: 2px negros no existen acá. */
.el-paso--oscuro {
    border-block-start: 1px solid var(--el-crema-suave);
    padding-block-start: 22px;
}

.el-paso--oscuro .el-paso__numero {
    margin-block-end: var(--el-esp-s);
    color: var(--el-lima);
}

.el-paso--oscuro .el-paso__texto {
    color: var(--el-crema-media-alta);
}

/* ----- Soluciones: ventajas (bento) ------------------------------------------ */

/* Mismo esqueleto que el bento de Beneficios, con otro reparto: la pieza
   principal ocupa 5 columnas y dos filas, la foto 3 y dos filas, y la última
   se queda en 5 de 12 dejando aire a la derecha. Es del diseño, no un hueco. */
.el-ventajas__rejilla {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 158px;
    gap: var(--el-esp-s);
    list-style: none;
}

.el-ventaja {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 26px;
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-foto);
}

.el-ventaja:nth-of-type(1) {
    grid-column: 1 / 6;
    grid-row: 1 / 3;
    padding: 34px;
    border: 0;
}

.el-ventaja:nth-of-type(2) {
    grid-column: 6 / 10;
    grid-row: 1;
    border: 0;
}

.el-ventaja:nth-of-type(3) {
    grid-column: 6 / 10;
    grid-row: 2;
}

.el-ventaja:nth-of-type(4) {
    grid-column: 1 / 6;
    grid-row: 3;
}

.el-ventaja--lima {
    background: var(--el-lima);
    color: var(--el-tinta);
}

.el-ventaja--oscura {
    background: var(--el-tinta);
    color: var(--el-crema-alta);
}

/* La cifra grande es solo la de la pieza principal; el resto van a media. */
.el-ventaja__valor {
    font-size: var(--el-txt-ventaja);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.02em;
    line-height: 1;
}

.el-ventaja:nth-of-type(1) .el-ventaja__valor {
    font-size: var(--el-txt-cifra-mayor);
    letter-spacing: -0.04em;
    line-height: 0.9;
}

.el-ventaja--oscura .el-ventaja__valor {
    color: var(--el-lima);
}

.el-ventaja__texto {
    max-width: 26ch;
    margin-block-start: var(--el-esp-3xs);
    font-size: var(--el-txt-mini);
    line-height: 1.45;
    color: var(--el-tinta-media);
}

.el-ventaja:nth-of-type(1) .el-ventaja__texto {
    margin-block-start: 10px;
    font-size: var(--el-txt-base);
    color: var(--el-tinta-fuerte);
}

.el-ventaja--oscura .el-ventaja__texto {
    color: var(--el-crema-media-alta);
}

.el-ventajas__foto {
    position: relative;
    overflow: hidden;
    grid-column: 10 / -1;
    grid-row: 1 / 3;
    border-radius: var(--el-radio-foto);
}

.el-ventajas__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.el-ventajas__rotulo {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 14px 16px;
    background: linear-gradient(transparent, rgb(15 15 15 / .7));
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-diminuto);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--el-crema-alta);
}

/* ----- Soluciones: ¿es para mí? ---------------------------------------------- */

.el-conviene {
    margin: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.75rem);
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-tarjeton);
}

.el-conviene__interior {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: var(--el-esp-seccion) var(--el-borde-lateral);
}

.el-conviene__interior h2 {
    max-width: 20ch;
    margin-block: 14px 40px;
}

.el-conviene__rejilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--el-esp-s);
}

.el-conviene__si {
    padding: 32px;
    background: var(--el-crema);
    border-radius: var(--el-radio-foto);
}

.el-conviene__no {
    position: relative;
    overflow: hidden;
    padding: 32px;
    background: var(--el-tinta);
    color: var(--el-crema-alta);
    border-radius: var(--el-radio-foto);
}

.el-conviene__brillo {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        transparent 55%,
        rgb(187 239 37 / .12) 78%,
        transparent 92%
    );
    pointer-events: none;
}

.el-conviene__cuerpo {
    position: relative;
}

.el-conviene__marca {
    display: flex;
    align-items: center;
    gap: var(--el-esp-2xs);
    margin-block-end: 18px;
}

.el-conviene__signo {
    font-size: var(--el-txt-h4);
    color: var(--el-oliva);
}

.el-conviene__signo--lima {
    color: var(--el-lima);
}

.el-conviene__lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    font-size: var(--el-txt-lista);
    line-height: 1.5;
    color: var(--el-tinta-fuerte);
}

.el-conviene__otras {
    display: flex;
    flex-direction: column;
    gap: var(--el-esp-s);
    list-style: none;
}

.el-conviene__otras a {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* La línea separa la segunda alternativa de la primera, no la encierra. */
.el-conviene__otras li + li a {
    padding-block-start: var(--el-esp-s);
    border-block-start: 1px solid var(--el-crema-suave);
}

.el-conviene__otra-titulo {
    display: block;
    font-size: var(--el-txt-h4);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.01em;
}

.el-conviene__otra-titulo span {
    color: var(--el-lima);
}

.el-conviene__otra-texto {
    display: block;
    margin-block-start: var(--el-esp-3xs);
    font-size: var(--el-txt-menor);
    color: var(--el-crema-media-alta);
}

@media (width < 60rem) {
    .el-quees__rejilla,
    .el-conviene__rejilla {
        grid-template-columns: 1fr;
    }

    .el-ventajas__rejilla {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: auto;
    }

    .el-ventaja,
    .el-ventajas__foto {
        grid-column: span 6;
        grid-row: auto;
    }

    .el-ventajas__foto {
        aspect-ratio: 16 / 9;
    }
}

/* ----- Portafolio: píldoras compartidas ------------------------------------- */

.el-pildora-lima,
.el-pildora-oscura {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: var(--el-radio-pastilla);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-diminuto);
    letter-spacing: 0.08em;
    line-height: normal;
    text-transform: uppercase;
}

.el-pildora-lima {
    background: var(--el-lima);
    color: var(--el-tinta);
}

.el-pildora-oscura {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 10px;
    background: rgb(20 20 20 / .6);
    color: var(--el-crema-alta);
}

/* ----- Portafolio: impacto acumulado ---------------------------------------- */

/* El aire lateral lo pone la sección: si lo pusiera la caja, su fondo saldría
   más ancho que el contenido del resto de la página. */
.el-impacto {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 4rem) var(--el-borde-lateral) 0;
}

.el-impacto__caja {
    position: relative;
    overflow: hidden;
    padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
    background: var(--el-tinta-pie);
    color: var(--el-crema-alta);
    border-radius: clamp(1.375rem, 3vw, 2rem);
}

.el-impacto__trama {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        rgb(187 239 37 / .12) 1.4px,
        transparent 1.5px
    );
    background-size: 24px 24px;
    opacity: .55;
}

.el-impacto__cuerpo {
    position: relative;
}

.el-impacto__lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--el-esp-m);
    margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
    list-style: none;
}

.el-impacto__dato {
    border-block-start: 1px solid var(--el-crema-suave);
    padding-block-start: 18px;
}

.el-impacto__valor {
    font-size: var(--el-txt-impacto);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: var(--el-track-titular);
    line-height: 1;
}

.el-impacto__valor--lima {
    color: var(--el-lima);
}

.el-impacto__etiqueta {
    margin-block-start: 6px;
    font-size: var(--el-txt-mini);
    color: var(--el-crema-media-alta);
}

/* ----- Portafolio: proyecto destacado --------------------------------------- */

.el-proyecto-destacado {
    padding-block-start: clamp(3.5rem, 7vw, 5.625rem);
}

.el-proyecto-destacado__interior {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding-inline: var(--el-borde-lateral);
}

.el-proyecto-destacado__rejilla {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--el-esp-s);
    align-items: stretch;
    margin-block-start: var(--el-esp-m);
}

.el-proyecto-destacado__foto {
    position: relative;
    overflow: hidden;
    display: block;
    min-height: 420px;
    border-radius: var(--el-radio-xl);
    color: var(--el-crema-alta);
    text-decoration: none;
}

.el-proyecto-destacado__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--el-transicion-suave);
}

.el-proyecto-destacado__foto:hover img {
    transform: scale(1.03);
}

.el-proyecto-destacado__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(15 15 15 / .12) 28%, rgb(15 15 15 / .8));
}

.el-proyecto-destacado__pie {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.el-proyecto-destacado__nombre {
    margin-block-start: 14px;
    font-size: var(--el-txt-panel);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.el-proyecto-destacado__lugar {
    margin-block-start: var(--el-esp-2xs);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-mini);
    color: var(--el-crema-fuerte);
}

.el-proyecto-destacado__ficha {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-xl);
}

.el-proyecto-destacado__texto {
    font-size: var(--el-txt-cierre-bajada);
    line-height: 1.55;
    color: var(--el-tinta-media);
}

.el-proyecto-destacado__datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--el-esp-l);
    list-style: none;
}

.el-proyecto-destacado__dato {
    font-size: var(--el-txt-dato);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.02em;
    line-height: 1;
}

.el-proyecto-destacado__boton {
    margin-block-start: var(--el-esp-m);
}

/* ----- Portafolio: listado y filtro ------------------------------------------ */

/* El filtro no usa JavaScript: son tres radios ocultos y el CSS decide qué
   tarjetas se ven. Funciona con el navegador como venga, y sin salto. */
.el-filtro > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.el-filtro > label {
    display: inline-flex;
    margin-block-end: 32px;
    margin-inline-end: 10px;
    padding: 10px 18px;
    border: 1px solid var(--el-borde-pastilla);
    border-radius: var(--el-radio-pastilla);
    font-size: var(--el-txt-menor);
    font-weight: var(--el-peso-medio);
    line-height: normal;
    cursor: pointer;
    transition:
        background var(--el-transicion),
        border-color var(--el-transicion);
}

.el-filtro > label:hover {
    border-color: var(--el-tinta);
}

.el-filtro > input:checked + label {
    background: var(--el-tinta);
    border-color: transparent;
    color: var(--el-crema-alta);
}

.el-filtro > input:focus-visible + label {
    outline: 2px solid var(--el-oliva);
    outline-offset: 2px;
}

.el-filtro__cuenta {
    display: inline-block;
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    color: var(--el-tinta-suave);
}

.el-proyectos-rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--el-esp-s);
    list-style: none;
}

/* Cada radio esconde las tarjetas del otro tipo. */
#el-tipo-residencial:checked ~ .el-proyectos-rejilla .el-tarjeta-proyecto--empresa,
#el-tipo-empresa:checked ~ .el-proyectos-rejilla .el-tarjeta-proyecto--residencial {
    display: none;
}

.el-tarjeta-proyecto a {
    display: block;
    overflow: hidden;
    height: 100%;
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-l);
    color: inherit;
    text-decoration: none;
    transition:
        transform var(--el-transicion-suave),
        box-shadow var(--el-transicion-suave);
}

.el-tarjeta-proyecto a:hover {
    transform: translateY(-6px);
    box-shadow: var(--el-sombra-flotante);
}

.el-tarjeta-proyecto__marco {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.el-tarjeta-proyecto__marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.el-tarjeta-proyecto__cuerpo {
    padding: 20px 22px;
}

.el-tarjeta-proyecto__cabeza {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.el-tarjeta-proyecto__nombre {
    font-size: var(--el-txt-h4);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.01em;
    line-height: normal;
}

.el-tarjeta-proyecto__potencia {
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-mini);
    color: var(--el-oliva);
    white-space: nowrap;
}

.el-tarjeta-proyecto__lugar {
    margin-block-start: var(--el-esp-3xs);
    font-size: var(--el-txt-mini);
    color: var(--el-tinta-suave);
}

.el-tarjeta-proyecto__pie {
    display: flex;
    justify-content: space-between;
    gap: var(--el-esp-2xs);
    margin-block-start: 14px;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--el-borde-tenue);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-mini);
    color: var(--el-tinta-media);
}

.el-tarjeta-proyecto__ver {
    color: var(--el-oliva);
    white-space: nowrap;
}

/* ----- Portafolio: testimonio ------------------------------------------------ */

/* El envoltorio toma el padding lateral de la franja; la caja lo llena. Así
   queda en el carril de 1152, no en el de 1248. Mismo patrón que el cierre. */
.el-testimonio__caja {
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.75rem, 5vw, 4.5rem);
    background: var(--el-amarillo);
    color: var(--el-tinta);
    border-radius: var(--el-radio-2xl);
}

.el-testimonio__cita {
    margin-block-start: 26px;
    max-width: 820px;
    font-size: var(--el-txt-testimonio);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.02em;
    line-height: 1.16;
}

.el-testimonio__autor {
    display: flex;
    align-items: center;
    gap: var(--el-esp-xs);
    margin-block-start: 32px;
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-mini);
    color: var(--el-tinta-media);
}

.el-testimonio__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--el-tinta);
}

/* ----- Ficha de proyecto ------------------------------------------------------ */

.el-hero-int--ficha,
.el-hero-int--portafolio {
    min-height: 62vh;
}

.el-detalle__titulo {
    max-width: 20ch;
    margin-block-start: var(--el-esp-s);
    font-size: var(--el-txt-cierre-menor);
    font-weight: var(--el-peso-medio);
    line-height: 1.04;
}

.el-detalle__lugar {
    margin-block-start: 12px;
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-menor);
    color: var(--el-crema-fuerte);
}

.el-detalle__rejilla {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: clamp(3rem, 6vw, 4.5rem) var(--el-borde-lateral) 0;
}

.el-detalle__texto {
    max-width: 56ch;
    font-size: var(--el-txt-parrafo-mayor);
    line-height: 1.6;
    color: var(--el-tinta-fuerte);
    white-space: pre-line;
}

.el-detalle__datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--el-esp-m);
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--el-tinta-pie);
    color: var(--el-crema-alta);
    border-radius: var(--el-radio-foto);
    list-style: none;
}

.el-detalle__dato {
    font-size: var(--el-txt-ficha-dato);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.02em;
    line-height: normal;
}

.el-detalle__dato--lima {
    color: var(--el-lima);
}

/* Cierra con el aire de una sección abajo: el cierre interior no pone el suyo
   arriba, así que si la galería no lo pusiera quedaría pegada a la caja. */
.el-galeria__interior {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: clamp(3rem, 6vw, 5rem) var(--el-borde-lateral) var(--el-esp-seccion);
}

/* Sin galería, la que queda pegada al cierre es la descripción: le damos el
   mismo aire cuando es la última antes de la caja. */
.el-detalle:has(+ .el-cierre) .el-detalle__rejilla {
    padding-block-end: var(--el-esp-seccion);
}

.el-galeria__rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--el-esp-s);
    margin-block-start: 20px;
    list-style: none;
}

.el-galeria__rejilla li {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--el-radio-l);
}

/* El enlace es el marco: llena la celda y sube un poco la foto al pasar. */
.el-galeria__enlace {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.el-galeria__rejilla img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--el-transicion-suave);
}

.el-galeria__enlace:hover img {
    transform: scale(1.04);
}

/* El video ocupa un bloque de 2×2: dos columnas y dos filas. Al llenar dos
   filas queda en 4:3 como las fotos —lo dan las dos filas de 4:3 apiladas— y
   deja la tercera columna para dos fotos, sin el hueco que dejaba en 16:9. El
   `li` en el selector le gana en especificidad al aspect-ratio de las celdas. */
.el-galeria__rejilla li.el-galeria__video {
    position: relative;
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

.el-galeria__video a {
    display: block;
    height: 100%;
}

.el-galeria__velo {
    position: absolute;
    inset: 0;
    background: rgb(15 15 15 / .32);
}

.el-galeria__play {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 64px;
    height: 64px;
    background: rgb(244 244 240 / .92);
    border-radius: 50%;
}

/* El triángulo del play, sin imagen ni icono aparte. */
.el-galeria__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -40% -50%;
    border-block: 11px solid transparent;
    border-inline-start: 18px solid var(--el-tinta-pie);
}

.el-galeria__etiqueta {
    position: absolute;
    inset-block-end: 14px;
    inset-inline-start: 14px;
    padding: 6px 12px;
    background: rgb(20 20 20 / .65);
    border-radius: var(--el-radio-pastilla);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--el-crema-alta);
}

@media (width < 60rem) {
    .el-impacto__lista,
    .el-proyectos-rejilla,
    .el-galeria__rejilla {
        grid-template-columns: repeat(2, 1fr);
    }

    .el-destacado__rejilla,
    .el-detalle__rejilla {
        grid-template-columns: 1fr;
    }

    /* Con dos columnas el video ocupa la fila entera y vuelve a 16:9: ya no
       hay tercera columna donde apilar fotos. */
    .el-galeria__rejilla li.el-galeria__video {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 16 / 9;
    }
}

@media (width < 34rem) {
    .el-impacto__lista,
    .el-proyectos-rejilla,
    .el-galeria__rejilla {
        grid-template-columns: 1fr;
    }

    .el-galeria__rejilla li.el-galeria__video {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 16 / 9;
    }
}

/* ----- Nosotros: relato ----------------------------------------------------- */

/* Misma estructura que «qué es» de las soluciones, con cifras en vez de
   píldoras. Reusa el-quees__titulo y el-quees__texto. */
.el-relato__rejilla {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(1.75rem, 4vw, 4rem);
    align-items: start;
}

.el-relato__cifras {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--el-esp-m);
    margin-block-start: 40px;
    list-style: none;
}

/* La línea lima arriba es la firma del bloque. */
.el-relato__cifra {
    border-block-start: 2px solid var(--el-lima);
    padding-block-start: 14px;
}

.el-relato__valor {
    font-size: var(--el-txt-cifra-relato);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: var(--el-track-titular);
    line-height: 1;
}

.el-relato__etiqueta {
    margin-block-start: var(--el-esp-3xs);
    font-size: var(--el-txt-nota);
    color: var(--el-tinta-suave);
}

/* ----- Nosotros: cobertura y mapa ------------------------------------------- */

.el-cobertura__rejilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

.el-cobertura__titulo {
    margin-block-start: 14px;
    font-size: var(--el-txt-h2-quees);
    line-height: 1.05;
}

.el-cobertura__texto {
    max-width: 50ch;
    margin-block: 18px 24px;
    font-size: var(--el-txt-base);
    line-height: 1.55;
    color: var(--el-tinta-media);
}

/* Mapa decorativo: no es una foto, es una trama diagonal con el isotipo al
   centro. Se dibuja entero con CSS. */
.el-mapa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: #E7E7DF;
    background-image: repeating-linear-gradient(
        135deg,
        rgb(35 35 35 / .06) 0 1px,
        transparent 1px 13px
    );
    border-radius: var(--el-radio-xl);
}

.el-mapa__pin {
    display: block;
    width: 44px;
    height: 44px;
    color: var(--el-oliva);
}

.el-mapa__nota {
    margin-block-start: 12px;
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--el-tinta-suave);
}

/* ----- Nosotros: valores ---------------------------------------------------- */

.el-valores {
    margin: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.75rem);
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-tarjeton);
}

.el-valores__interior {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: var(--el-esp-seccion) var(--el-borde-lateral);
}

.el-valores__rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--el-esp-s);
    margin-block-start: 36px;
    list-style: none;
}

.el-valor {
    padding: 30px;
    background: var(--el-crema);
    border-radius: var(--el-radio-l);
}

.el-valor--oscuro {
    background: var(--el-tinta);
    color: var(--el-crema-alta);
}

.el-valor__titulo {
    margin-block-end: 10px;
    font-size: var(--el-txt-h4);
    letter-spacing: -0.01em;
}

.el-valor--oscuro .el-valor__titulo {
    color: var(--el-lima);
}

.el-valor__texto {
    font-size: var(--el-txt-menor);
    line-height: 1.55;
    color: var(--el-tinta-media);
}

.el-valor--oscuro .el-valor__texto {
    color: var(--el-crema-media-alta);
}

/* ----- Financiamiento: la idea ---------------------------------------------- */

/* Texto a la izquierda, tarjeta lima con cifras a la derecha. */
.el-idea__rejilla {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(1.75rem, 4vw, 4rem);
    align-items: center;
}

.el-idea__titulo {
    margin-block-start: 14px;
    font-size: var(--el-txt-h2-quees);
    line-height: 1.05;
}

.el-idea__texto {
    max-width: 50ch;
    margin-block-start: 20px;
    font-size: var(--el-txt-base);
    line-height: 1.6;
    color: var(--el-tinta-media);
}

.el-idea__tarjeta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--el-esp-l);
    min-height: 280px;
    padding: clamp(1.875rem, 4vw, 3rem);
    background: var(--el-lima);
    color: var(--el-tinta);
    border-radius: var(--el-radio-xl);
}

.el-idea__cifras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    list-style: none;
}

.el-idea__valor {
    font-size: var(--el-txt-idea-cifra);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: var(--el-track-titular);
    line-height: 0.95;
}

.el-idea__etiqueta {
    margin-block-start: 6px;
    font-size: var(--el-txt-mini);
    color: var(--el-tinta-fuerte);
}

/* ----- Financiamiento: opciones de pago ------------------------------------- */

/* Tarjetón blanco, mismo patrón que Modelos y Sectores: las tarjetas de opción
   son crema y necesitan el blanco detrás para verse. */
.el-opciones {
    margin: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.75rem);
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-tarjeton);
}

.el-opciones__interior {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: var(--el-esp-seccion) var(--el-borde-lateral);
}

.el-opciones__lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--el-esp-s);
    list-style: none;
}

.el-opcion-pago {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 320px;
    padding: 32px;
    background: var(--el-crema);
    border-radius: var(--el-radio-foto);
}

.el-opcion-pago--oscura {
    position: relative;
    overflow: hidden;
    background: var(--el-tinta);
    color: var(--el-crema-alta);
    border-color: transparent;
}

.el-opcion-pago--oscura::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        transparent 55%,
        rgb(187 239 37 / .12) 78%,
        transparent 92%
    );
    pointer-events: none;
}

/* Número o distintivo abren la tarjeta: el número en las normales, la píldora
   lima en la destacada. */
.el-opcion-pago__numero {
    position: relative;
    display: block;
    margin-block-end: 16px;
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-mini);
    color: var(--el-oliva);
}

.el-opcion-pago--oscura .el-opcion-pago__numero {
    color: var(--el-lima);
}

.el-opcion-pago__distintivo {
    position: relative;
    display: inline-flex;
    margin-block-end: 16px;
    padding: 6px 12px;
    background: var(--el-lima);
    border-radius: var(--el-radio-pastilla);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    letter-spacing: var(--el-track-rotulo);
    text-transform: uppercase;
    color: var(--el-tinta);
}

.el-opcion-pago__titulo {
    position: relative;
    margin-block-end: 10px;
    font-size: var(--el-txt-solucion);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.02em;
}

.el-opcion-pago__texto {
    position: relative;
    font-size: var(--el-txt-menor);
    line-height: 1.55;
    color: var(--el-tinta-media);
}

.el-opcion-pago--oscura .el-opcion-pago__texto {
    color: var(--el-crema-media-alta);
}

/* La línea al pie: el dato práctico —plazo, condición— separado por una regla. */
.el-opcion-pago__pie {
    position: relative;
    margin-block-start: 24px;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--el-borde-tenue);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-mini);
    color: var(--el-tinta-suave);
}

.el-opcion-pago--oscura .el-opcion-pago__pie {
    border-block-start-color: var(--el-crema-suave);
    color: var(--el-crema-media-alta);
}

/* ----- Financiamiento: ejemplo ---------------------------------------------- */

.el-ejemplo__caja {
    position: relative;
    overflow: hidden;
    padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
    background: var(--el-tinta-pie);
    color: var(--el-crema-alta);
    border-radius: var(--el-radio-2xl);
}

.el-ejemplo__trama {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        rgb(187 239 37 / .12) 1.4px,
        transparent 1.5px
    );
    background-size: 24px 24px;
    opacity: .5;
}

.el-ejemplo__cabecera {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--el-esp-xs);
    margin-block-end: 36px;
}

.el-ejemplo__nota {
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-nota);
    color: var(--el-crema-media);
}

.el-ejemplo__lista {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--el-esp-l);
    list-style: none;
}

.el-ejemplo__dato {
    border-block-start: 1px solid var(--el-crema-suave);
    padding-block-start: 18px;
}

.el-ejemplo__valor {
    font-size: var(--el-txt-ejemplo);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: var(--el-track-titular);
    line-height: 1;
}

.el-ejemplo__valor--lima {
    color: var(--el-lima);
}

.el-ejemplo__etiqueta {
    margin-block-start: 6px;
    font-size: var(--el-txt-mini);
    color: var(--el-crema-media-alta);
}

@media (width < 60rem) {
    .el-relato__rejilla,
    .el-cobertura__rejilla,
    .el-quees__rejilla {
        grid-template-columns: 1fr;
    }

    .el-opciones__lista,
    .el-valores__rejilla {
        grid-template-columns: 1fr;
    }

    .el-ejemplo__lista {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width < 34rem) {
    .el-relato__cifras {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----- Lightbox de galería -------------------------------------------------- */

/* La capa la crea galeria.js y vive al final del body. Cubre la pantalla con
   un velo oscuro; la imagen va centrada y los controles en los bordes. */
.el-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgb(15 15 15 / .92);
    backdrop-filter: blur(6px);
}

.el-lightbox[hidden] {
    display: none;
}

.el-lightbox__marco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--el-esp-s);
    margin: 0;
    max-width: 100%;
    max-height: 100%;
}

.el-lightbox__contenido {
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-lightbox__imagen {
    max-width: min(92vw, 1100px);
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--el-radio-l);
    box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6);
}

/* El video mantiene 16:9 dentro del mismo ancho que la imagen. */
.el-lightbox__video {
    position: relative;
    width: min(92vw, 1100px);
    max-height: 82vh;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--el-radio-l);
    box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6);
}

.el-lightbox__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.el-lightbox__cuenta {
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-mini);
    letter-spacing: 0.08em;
    color: var(--el-crema-media-alta);
}

/* Controles: círculos translúcidos que se encienden al pasar el mouse. */
.el-lightbox__cerrar,
.el-lightbox__nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(244 244 240 / .1);
    border: 1px solid var(--el-crema-suave);
    border-radius: 50%;
    color: var(--el-crema-alta);
    cursor: pointer;
    transition:
        background var(--el-transicion),
        border-color var(--el-transicion);
}

.el-lightbox__cerrar:hover,
.el-lightbox__nav:hover {
    background: rgb(244 244 240 / .2);
    border-color: var(--el-crema-media-alta);
}

.el-lightbox__cerrar:focus-visible,
.el-lightbox__nav:focus-visible {
    outline: 2px solid var(--el-lima);
    outline-offset: 2px;
}

.el-lightbox__cerrar {
    top: clamp(1rem, 3vw, 1.75rem);
    right: clamp(1rem, 3vw, 1.75rem);
    width: 44px;
    height: 44px;
    font-size: 18px;
}

.el-lightbox__nav {
    top: 50%;
    translate: 0 -50%;
    width: 52px;
    height: 52px;
    font-size: 30px;
    line-height: 1;
}

.el-lightbox__nav[hidden] {
    display: none;
}

.el-lightbox__nav--prev {
    left: clamp(0.5rem, 3vw, 2rem);
}

.el-lightbox__nav--next {
    right: clamp(0.5rem, 3vw, 2rem);
}

/* En pantallas chicas las flechas bajan a los pies para no tapar la foto. */
@media (width < 40rem) {
    .el-lightbox__nav {
        top: auto;
        bottom: clamp(1rem, 5vw, 2rem);
        translate: 0 0;
    }

    .el-lightbox__nav--prev {
        left: 25%;
    }

    .el-lightbox__nav--next {
        right: 25%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .el-lightbox {
        backdrop-filter: none;
    }
}

/* ----- Post-venta ----------------------------------------------------------- */

/* Abre sobre claro con el header sólido: el aire lo pone la cabecera. */
.el-postventa-hero__interior {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 4rem) var(--el-borde-lateral) clamp(1.5rem, 3vw, 2.5rem);
}

.el-postventa-hero__titulo {
    max-width: 16ch;
    margin-block-start: 16px;
    line-height: 1.02;
}

.el-postventa-hero__bajada {
    max-width: 56ch;
    margin-block-start: 22px;
    font-size: var(--el-txt-lead);
    line-height: 1.55;
    color: var(--el-tinta-media);
}

/* Todas las bandas de post-venta cierran pegadas: el aire va dentro de sus
   tarjetas, no entre secciones. */
.el-postventa.el-franja {
    padding-block: 0 clamp(2.5rem, 5vw, 4rem);
}

.el-postventa__duo {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--el-esp-s);
    align-items: stretch;
}

/* --- Tarjeta del manual --- */
.el-tarjeta-manual {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(1.875rem, 4vw, 3rem);
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-xl);
}

.el-tarjeta-manual__texto {
    margin-block-start: 14px;
    font-size: var(--el-txt-h2-menor-suave, var(--el-txt-panel));
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.el-tarjeta-manual__boton {
    align-self: flex-start;
}

/* --- Tarjeta de WhatsApp --- */
.el-tarjeta-wa {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    padding: clamp(1.75rem, 3.5vw, 2.5rem);
    background: var(--el-tinta);
    color: var(--el-crema-alta);
    border-radius: var(--el-radio-xl);
}

.el-tarjeta-wa__titulo {
    font-size: var(--el-txt-h3);
    font-weight: var(--el-peso-fuerte);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.el-tarjeta-wa__enlace {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 14px;
    font-weight: var(--el-peso-fuerte);
    color: var(--el-lima);
    text-decoration: none;
}

/* --- Formulario de post-venta (nativo, crea el ticket) --- */
.el-postventa-form {
    max-width: var(--el-ancho-sitio);
    margin-inline: auto;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-xl);
}

.el-postventa-form__texto {
    margin-block: 10px 20px;
    font-size: var(--el-txt-menor);
    color: var(--el-tinta-media);
}

/* Número de ticket en el acuse: mono, para que se lea como un folio. */
.el-forma__ticket {
    max-width: 40ch;
    font-size: var(--el-txt-menor);
    line-height: 1.5;
    color: var(--el-tinta-media);
}

.el-forma__ticket strong {
    font-family: var(--el-fuente-mono);
    color: var(--el-tinta);
}

/* --- Contacto directo y oficinas --- */
.el-tarjeta-directo,
.el-tarjeta-oficinas {
    padding: clamp(1.75rem, 3.5vw, 2.5rem);
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-xl);
}

.el-tarjeta-directo__texto {
    max-width: 40ch;
    margin-block: 14px 22px;
    font-size: var(--el-txt-menor);
    line-height: 1.6;
    color: var(--el-tinta-media);
}

.el-tarjeta-directo__wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--el-crema);
    border-radius: var(--el-radio-pastilla);
    font-weight: var(--el-peso-fuerte);
    font-size: var(--el-txt-menor);
    color: var(--el-tinta);
    text-decoration: none;
    transition: background var(--el-transicion);
}

.el-tarjeta-directo__wa:hover {
    background: color-mix(in srgb, var(--el-tinta) 8%, var(--el-crema));
}

.el-tarjeta-directo__horario {
    margin-block-start: 20px;
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-mini);
    color: var(--el-tinta-suave);
}

.el-tarjeta-oficinas__lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-block-start: 18px;
    list-style: none;
}

@media (width < 52rem) {
    .el-postventa__duo {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Creador de firmas (/firma-de-correo) — herramienta interna con el sistema
   gráfico del sitio. Reusa .el-campo, .el-btn y .el-rotulo; acá solo lo propio
   del tool (rejilla, previa del correo, pasos, interruptor, toast).
   ========================================================================== */

.el-firma__intro {
    max-width: var(--el-ancho-texto);
}
.el-firma__titulo {
    font-size: var(--el-txt-h2);
    line-height: var(--el-alto-titular);
    letter-spacing: var(--el-track-titular);
    margin-block: var(--el-esp-2xs) var(--el-esp-s);
}
.el-firma__lede {
    font-size: var(--el-txt-lead);
    color: var(--el-tinta-media);
}

.el-firma__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
    gap: var(--el-esp-m);
    align-items: start;
}
.el-firma__columna {
    display: grid;
    gap: var(--el-esp-m);
}

.el-firma__tarjeta {
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-tarjeta);
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.el-firma__cab {
    display: flex;
    align-items: center;
    gap: var(--el-esp-xs);
    margin-block-end: var(--el-esp-m);
}
.el-firma__num {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--el-radio-s);
    background: var(--el-lima);
    color: var(--el-tinta);
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-mini);
    font-weight: var(--el-peso-fuerte);
    display: grid;
    place-items: center;
}
.el-firma__subtitulo {
    font-size: var(--el-txt-h4);
    letter-spacing: -0.01em;
}

/* Grid, no flex: así el `flex: 1 1 14rem` que traen los .el-campo (para el
   formulario de contacto en fila) no los estira para llenar el alto. */
.el-firma__campos {
    display: grid;
    gap: var(--el-esp-m);
}
/* Interruptor de la bajada */
.el-firma__switch {
    display: flex;
    align-items: center;
    gap: var(--el-esp-xs);
    cursor: pointer;
}
.el-firma__switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.el-firma__switch-riel {
    position: relative;
    flex: none;
    width: 42px;
    height: 24px;
    border-radius: var(--el-radio-pastilla);
    background: var(--el-borde-pastilla);
    transition: background var(--el-transicion);
}
.el-firma__switch-riel::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--el-blanco);
    box-shadow: 0 1px 2px rgb(20 20 20 / .3);
    transition: transform var(--el-transicion);
}
.el-firma__switch input:checked + .el-firma__switch-riel {
    background: var(--el-oliva);
}
.el-firma__switch input:checked + .el-firma__switch-riel::after {
    transform: translateX(18px);
}
.el-firma__switch input:focus-visible + .el-firma__switch-riel {
    outline: 2px solid var(--el-oliva);
    outline-offset: 2px;
}
.el-firma__switch-texto {
    font-size: var(--el-txt-menor);
    color: var(--el-tinta-media);
}

/* Previa del correo — simula el cliente, siempre en blanco */
.el-firma__mail {
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-campo);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    overflow-x: auto;
}
.el-firma__mail-meta {
    border-block-end: 1px solid var(--el-borde-tenue);
    padding-block-end: var(--el-esp-s);
    margin-block-end: var(--el-esp-m);
}
.el-firma__mail-meta div {
    font: 13px/1.6 Arial, sans-serif;
    color: var(--el-tinta-suave);
}
.el-firma__mail-meta strong { color: var(--el-tinta); font-weight: 700; }
.el-firma__mail-cuerpo {
    font: 14px/1.6 Arial, sans-serif;
    color: var(--el-tinta);
    margin-block-end: var(--el-esp-m);
}

.el-firma__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--el-esp-s);
    margin-block-start: var(--el-esp-m);
}
/* Confirmación al copiar: el botón se invierte un instante. */
.el-firma .el-btn.copied {
    background: var(--el-tinta);
    color: var(--el-lima);
    border-color: var(--el-tinta);
}

/* Pasos */
.el-firma__pasos {
    list-style: none;
    counter-reset: paso;
    margin: 0;
    padding: 0;
}
.el-firma__pasos li {
    counter-increment: paso;
    position: relative;
    padding: 0 0 var(--el-esp-m) 42px;
    font-size: var(--el-txt-menor);
    color: var(--el-tinta-media);
}
.el-firma__pasos li:last-child { padding-block-end: 0; }
.el-firma__pasos li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: -2px;
    width: 27px;
    height: 27px;
    border-radius: var(--el-radio-s);
    background: var(--el-crema);
    border: 1px solid var(--el-borde-tenue);
    color: var(--el-tinta);
    font-weight: var(--el-peso-fuerte);
    font-size: var(--el-txt-mini);
    display: grid;
    place-items: center;
}
.el-firma__pasos li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 13.5px;
    top: 31px;
    bottom: 8px;
    width: 1.5px;
    background: var(--el-borde-tenue);
}
.el-firma__pasos strong { color: var(--el-tinta); font-weight: var(--el-peso-fuerte); }
.el-firma__tecla {
    font-family: var(--el-fuente-mono);
    font-size: var(--el-txt-mini);
    background: var(--el-crema);
    border: 1px solid var(--el-borde-tenue);
    border-radius: 5px;
    padding: 1px 6px;
    color: var(--el-tinta);
}

.el-firma__nota {
    display: flex;
    gap: var(--el-esp-xs);
    align-items: flex-start;
    margin-block-start: var(--el-esp-m);
    padding: var(--el-esp-s) var(--el-esp-m);
    background: color-mix(in srgb, var(--el-lima) 18%, var(--el-blanco));
    border: 1px solid color-mix(in srgb, var(--el-oliva) 30%, transparent);
    border-radius: var(--el-radio-m);
    font-size: var(--el-txt-mini);
    color: var(--el-tinta-media);
}
.el-firma__nota strong { color: var(--el-tinta); }

/* Toast */
.el-firma__toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--el-tinta);
    color: var(--el-lima);
    padding: 12px 20px;
    border-radius: var(--el-radio-pastilla);
    font-size: var(--el-txt-menor);
    font-weight: var(--el-peso-medio);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--el-transicion), transform var(--el-transicion);
    z-index: 50;
}
.el-firma__toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (width < 56rem) {
    .el-firma__rejilla { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Legal — Política de Privacidad / Términos (páginas de texto largo)
   ========================================================================== */
.el-legal { background: var(--el-crema); }
.el-legal__interior {
    max-width: 860px;
    margin-inline: auto;
    padding: clamp(2.5rem, 7vw, 5.5rem) var(--el-borde-lateral) clamp(3rem, 8vw, 6rem);
}

/* ----- Hero ----- */
.el-legal__titulo-principal {
    font-size: clamp(32px, 5.4vw, 56px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.05;
    margin: .5rem 0 0;
    max-width: 22ch;
    text-wrap: pretty;
}
.el-legal__bajada {
    font-size: clamp(16px, 2vw, 19px);
    color: var(--el-tinta-media);
    line-height: 1.6;
    margin-block-start: 1.1rem;
    max-width: 62ch;
}
.el-legal__fechas {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-block-start: 1.5rem;
    font-family: var(--el-fuente-mono);
    font-size: 12px;
    color: var(--el-tinta-suave);
}

/* ----- Tabla de contenidos ----- */
.el-legal__toc {
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-xl);
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
    margin-block: clamp(2rem, 5vw, 3.5rem);
}
.el-legal__toc-titulo {
    font-family: var(--el-fuente-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--el-tinta-suave);
    margin: 0 0 1rem;
}
.el-legal__toc-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: .25rem 1.75rem;
    counter-reset: toc;
}
.el-legal__toc-lista li { counter-increment: toc; }
.el-legal__toc-lista a {
    display: flex;
    gap: .7rem;
    align-items: baseline;
    font-size: 14px;
    color: var(--el-tinta-fuerte);
    padding: .4rem 0;
    text-decoration: none;
    transition: color var(--el-transicion);
}
.el-legal__toc-lista a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--el-fuente-mono);
    font-size: 11px;
    color: var(--el-tinta-tenue);
}
.el-legal__toc-lista a:hover { color: var(--el-tinta); }

/* ----- Secciones numeradas ----- */
.el-legal__seccion {
    padding-block: clamp(1.75rem, 4vw, 2.75rem);
    border-block-start: 1px solid var(--el-borde-tenue);
    scroll-margin-top: 2rem;
}
.el-legal__num {
    font-family: var(--el-fuente-mono);
    font-size: 13px;
    color: var(--el-tinta-tenue);
    margin: 0;
}
.el-legal__titulo {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: .35rem 0 1rem;
}
.el-legal__sub {
    font-size: 17px;
    font-weight: 700;
    margin: 1.6rem 0 .5rem;
}
.el-legal p { color: var(--el-tinta-fuerte); line-height: 1.7; margin-block: .8rem; }
.el-legal ul { margin-block: .8rem; padding-inline-start: 1.25rem; }
.el-legal li { color: var(--el-tinta-fuerte); line-height: 1.7; margin-block: .45rem; }
.el-legal a { color: var(--el-tinta); text-decoration: underline; text-underline-offset: 2px; }
.el-legal a:hover { color: var(--el-tinta-clara); }

/* ----- Tablas ----- */
.el-legal__tabla-env { overflow-x: auto; margin-block: 1.1rem; }
.el-legal__tabla { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.el-legal__tabla th,
.el-legal__tabla td {
    text-align: left;
    padding: .75rem 1rem;
    border: 1px solid var(--el-borde-tenue);
    vertical-align: top;
    line-height: 1.5;
}
.el-legal__tabla th { background: var(--el-blanco); font-weight: 700; }
.el-legal__tabla td { color: var(--el-tinta-fuerte); }

/* ----- Ficha de identidad / contacto ----- */
.el-legal__ficha {
    background: var(--el-blanco);
    border: 1px solid var(--el-borde-tenue);
    border-radius: var(--el-radio-l);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    margin-block: 1.25rem;
    display: grid;
    gap: .7rem;
}
.el-legal__fila { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 14px; }
.el-legal__clave { min-width: 160px; color: var(--el-tinta-suave); font-weight: 600; }
.el-legal__valor { color: var(--el-tinta-fuerte); flex: 1; }

/* ----- Derechos (nombre + descripción) ----- */
.el-legal__derechos { margin-block: 1rem; display: grid; gap: .9rem; }
.el-legal__derecho { font-size: 14px; line-height: 1.6; color: var(--el-tinta-fuerte); }
.el-legal__derecho strong { color: var(--el-tinta); }

/* ----- Nota destacada ----- */
.el-legal__nota {
    background: rgb(187 239 37 / .14);
    border-left: 3px solid var(--el-lima);
    padding: 1rem 1.25rem;
    border-radius: var(--el-radio-s);
    font-size: 14px;
    color: var(--el-tinta-fuerte);
    margin-block: 1.1rem;
}

/* ----- CTA ----- */
/* Selector con `a.` para ganarle en especificidad a la regla genérica
   `.el-legal a` (que si no, pinta el texto oscuro sobre el fondo oscuro). */
.el-legal a.el-legal__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-block-start: 1rem;
    background: var(--el-tinta);
    color: var(--el-crema);
    font-weight: 600;
    font-size: 14px;
    padding: .8rem 1.6rem;
    border-radius: var(--el-radio-pastilla);
    text-decoration: none;
    transition: background var(--el-transicion);
}
.el-legal a.el-legal__cta:hover { background: var(--el-tinta-clara); color: var(--el-crema); }