/*
 * Alto de la cabecera fija del sitio, medido por el JS y escrito en la raiz.
 *
 * VA EN :root A PROPOSITO. Estuvo declarado dentro de .corp y entonces el
 * valor local ganaba al que el JS escribe en la raiz: en movil la cabecera
 * mide 150 px, la pagina reservaba 180 y la barra de secciones se quedaba
 * flotando a media altura sobre el heroe.
 */
:root { --corp-cab: 150px; }

/*
 * Landing corporativa (/empresas).
 *
 * TODO va dentro de .corp. La cabecera y el pie son los del sitio y usan
 * Brandon Grotesque; el cuerpo de esta pagina usa las tres familias del diseño
 * aprobado. Sin ese encierro, un `h2 { }` de aqui repintaria el pie de todas
 * las paginas.
 *
 * Ojo con index.css: lleva un `* { font-size: 16px }` que gana a cualquier
 * tamaño heredado. Por eso aqui TODOS los tamaños son explicitos y en px, sin
 * excepcion. Un `em` sin tamaño propio se queda en 16 y el titular sale como
 * un parrafo.
 *
 * La paleta sale del artboard v5. Es casi la misma familia que la hoja
 * etapa2.css del carrito (#8C6239 contra #8E5A33), asi que las dos paginas se
 * ven del mismo sitio.
 */

.corp {
    /* Fondos */
    --corp-papel:      #FBF6F1;
    --corp-papel-2:    #F5EFE7;
    --corp-blanco:     #FFFFFF;

    /* Trazos y superficies */
    --corp-borde:      #E4D6C6;
    --corp-borde-2:    #EDE0D2;

    /* Texto */
    --corp-tinta:      #2C1D16;
    --corp-tinta-2:    #3E2A20;
    --corp-suave:      #6B5346;
    --corp-tenue:      #9C8878;

    /* Marca */
    --corp-marron:     #8E5A33;
    --corp-marron-cl:  #C08A63;

    --corp-ancho:      1240px;
    --corp-radio:      14px;
    --corp-sombra:     0 1px 2px rgba(44, 29, 22, .04), 0 8px 24px rgba(44, 29, 22, .06);

    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;

    /*
     * `normal`, como el diseno, y NO 1.6.
     *
     * En /corporativo-banner/ nadie declara interlineado en la raiz: cada
     * elemento que lo necesita lo trae en su atributo style, y el resto se
     * queda en el `normal` del navegador. Con 1.6 aqui, todo lo que no lo
     * declara -precios, insignias, botones, "c/u"- heredaba un interlineado
     * que el diseno no tiene: el precio pasaba de 19 a 30.4 px de alto.
     *
     * Medido contra el diseno cargado al lado: 20 diferencias de interlineado
     * antes, 1 despues.
     */
    line-height: normal;
    /*
     * El texto heredado va en --corp-tinta-2 (#3E2A20), que es lo que hereda
     * el diseno desde su raiz. --corp-tinta (#2C1D16) es el casi negro de los
     * FONDOS oscuros; usarlo aqui tenia los titulos de producto, los precios y
     * las descripciones un tono mas oscuros de lo aprobado -14 diferencias de
     * color solo en las secciones medidas-.
     */
    color: var(--corp-tinta-2);
    background: var(--corp-papel);
    /*
     * clip y no hidden: `hidden` convertiria a este elemento en el contenedor
     * de scroll de todo lo que lleve position:sticky dentro, y la subnavegacion
     * dejaria de pegarse. Ya paso en el carrito.
     */
    overflow-x: clip;
    /*
     * La cabecera del sitio es fija y flota sobre el contenido. Sin este hueco
     * se come la barra de secciones y el arranque del heroe.
     */
    padding-top: var(--corp-cab);
}

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

.corp-ancho {
    width: 100%;
    max-width: var(--corp-ancho);
    margin: 0 auto;
    padding: 0 24px;
}

.corp-seccion { padding: 72px 0; }
.corp-seccion--claro { background: var(--corp-blanco); }
.corp-seccion--papel { background: var(--corp-papel-2); }

/* ---------- Tipografia ---------- */

.corp h1, .corp h2, .corp h3 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    /*
     * --corp-tinta-2 (#3E2A20), no --corp-tinta (#2C1D16).
     *
     * En el diseno aprobado los titulares van en el marron de titular, no en
     * el casi negro. Ese casi negro es el de los FONDOS oscuros -la franja del
     * menu, los botones solidos, la seccion del formulario- y usarlo tambien
     * para el texto quitaba el contraste entre las dos tintas: el titular
     * pesaba lo mismo que una barra negra.
     *
     * Comprobado contra /corporativo-banner/: los seis titulares de la
     * referencia, el h1 del hero y los cinco h2 de seccion, son rgb(62,42,32).
     *
     * Aqui hace falta declararlo aunque el contenedor del hero ya traiga
     * color:#3E2A20 en linea: al tener el h1 su propio color por esta regla,
     * gana sobre lo heredado del padre.
     */
    color: var(--corp-tinta-2);
    margin: 0;
    font-weight: 600;
    line-height: 1.15;
}

.corp-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--corp-marron);
    margin: 0 0 12px;
}

.corp-tit    { font-size: 40px; margin: 0 0 16px; }
.corp-tit-sm { font-size: 28px; margin: 0 0 12px; }

.corp-bajada {
    font-size: 17px;
    color: var(--corp-suave);
    max-width: 660px;
    margin: 0 0 40px;
}

.corp p { margin: 0 0 16px; }
.corp p:last-child { margin-bottom: 0; }

/* ---------- Botones ---------- */

.corp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.corp-btn--solido {
    background: var(--corp-marron);
    color: var(--corp-blanco);
}
.corp-btn--solido:hover,
.corp-btn--solido:focus { background: #7A4B29; color: var(--corp-blanco); }

.corp-btn--linea {
    background: transparent;
    border-color: var(--corp-borde);
    color: var(--corp-tinta);
}
.corp-btn--linea:hover,
.corp-btn--linea:focus { border-color: var(--corp-marron); color: var(--corp-marron); }

/* ---------- Heroe ---------- */

.corp-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--corp-tinta);
}

.corp-hero-foto {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .8s ease;
}
.corp-hero-foto.es-activa { opacity: 1; }

.corp-hero-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* El encuadre lo decide quien administra, campo Posicion. */
    object-position: 50% 50%;
    display: block;
}

/*
 * El velo existe para que el texto se lea sobre CUALQUIER foto que suban.
 * Sin el, una foto clara deja el titular blanco ilegible y no hay forma de
 * arreglarlo desde el panel.
 */
.corp-hero-velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(44, 29, 22, .78) 0%, rgba(44, 29, 22, .55) 45%, rgba(44, 29, 22, .15) 100%);
}

.corp-hero-caja {
    position: relative;
    z-index: 2;
    /*
     * La cabecera del sitio es fija y flota SOBRE el heroe, asi que sin este
     * hueco se come la primera linea del titular. El alto real lo publica el JS
     * en --corp-cab; el 69 es solo el respaldo para el primer pintado.
     */
    padding: 72px 0;
    max-width: 560px;
}

.corp-hero .corp-eyebrow { color: var(--corp-marron-cl); }
.corp-hero h1 { font-size: 46px; color: var(--corp-blanco); margin: 0 0 16px; }
.corp-hero p  { font-size: 18px; color: rgba(255, 255, 255, .88); margin: 0 0 28px; }

.corp-hero-puntos {
    position: absolute;
    left: 0; right: 0; bottom: 24px;
    z-index: 3;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.corp-hero-punto {
    width: 34px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
}
.corp-hero-punto.es-activa { background: var(--corp-blanco); }

/* ---------- Subnavegacion ---------- */

.corp-subnav {
    position: sticky;
    top: var(--corp-cab);
    z-index: 20;
    background: rgba(251, 246, 241, .96);
    border-bottom: 1px solid var(--corp-borde);
    backdrop-filter: saturate(140%) blur(6px);
}

.corp-subnav ul {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    /* En movil se desliza; que no se vea la barra rompiendo la linea. */
    scrollbar-width: none;
}
.corp-subnav ul::-webkit-scrollbar { display: none; }

.corp-subnav a {
    display: block;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--corp-suave);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.corp-subnav a:hover,
.corp-subnav a.es-activa { color: var(--corp-marron); border-bottom-color: var(--corp-marron); }

/* ---------- Rejillas ---------- */

.corp-rejilla {
    display: grid;
    gap: 24px;
}
.corp-rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.corp-rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.corp-rejilla--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Tarjetas ---------- */

.corp-tarjeta {
    background: var(--corp-blanco);
    border: 1px solid var(--corp-borde);
    border-radius: var(--corp-radio);
    padding: 28px;
}

.corp-tarjeta h3 { font-size: 20px; margin: 0 0 10px; }
.corp-tarjeta p  { font-size: 15px; color: var(--corp-suave); }

.corp-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--corp-papel-2);
    color: var(--corp-marron);
    font-size: 22px;
    line-height: 1;
}

/* ---------- Sellos ---------- */

.corp-sellos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.corp-sello {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
}

.corp-sello .corp-icono {
    flex: none;
    width: 38px;
    height: 38px;
    margin: 0;
    font-size: 18px;
}

.corp-sello strong { display: block; font-size: 15px; margin-bottom: 2px; }
.corp-sello span   { color: var(--corp-suave); }

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

.corp-pasos {
    display: grid;
    /*
     * auto-fit y no un numero fijo: los pasos salen del CMS y quien administra
     * puede dar de alta tres, cuatro o cinco. Con `repeat(3, 1fr)` el cuarto
     * caia a una segunda fila y su punto quedaba suelto debajo del primero.
     */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.corp-paso {
    position: relative;
    padding: 0 20px 0 0;
}

/* La linea une un paso con el siguiente, asi que el ultimo no la lleva. */
.corp-paso::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 20px;
    right: 0;
    height: 2px;
    background: var(--corp-borde);
}
.corp-paso:last-child::before { display: none; }

.corp-paso-punto {
    position: relative;
    z-index: 1;
    display: block;
    width: 20px;
    height: 20px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--corp-marron-cl);
    border: 3px solid var(--corp-papel);
}
.corp-paso:last-child .corp-paso-punto { background: var(--corp-tinta); }

.corp-paso strong { display: block; font-size: 16px; margin-bottom: 4px; }
.corp-paso span   { font-size: 14px; color: var(--corp-suave); }

/* ---------- Clientes ---------- */

.corp-clientes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.corp-clientes img {
    max-width: 130px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
    /*
     * En reposo van apagados para que no compitan con el contenido, y al pasar
     * por encima recuperan su color. Si no hay version gris se usa la de color
     * y el filtro hace el mismo efecto.
     */
    filter: grayscale(1);
    opacity: .68;
    transition: filter .2s ease, opacity .2s ease;
}
.corp-clientes li:hover img { filter: none; opacity: 1; }

/* ---------- Casos ---------- */

.corp-caso {
    position: relative;
    display: block;
    border-radius: var(--corp-radio);
    overflow: hidden;
    background: var(--corp-borde-2);
    text-decoration: none;
    aspect-ratio: 4 / 3;
}

.corp-caso img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.corp-caso:hover img { transform: scale(1.04); }

.corp-caso figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--corp-blanco);
    background: linear-gradient(180deg, rgba(44, 29, 22, 0) 0%, rgba(44, 29, 22, .82) 100%);
}

/* ---------- Reseñas ---------- */

.corp-resena {
    background: var(--corp-blanco);
    border: 1px solid var(--corp-borde);
    border-radius: var(--corp-radio);
    padding: 28px;
}

.corp-resena blockquote {
    margin: 0 0 16px;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 19px;
    line-height: 1.5;
    color: var(--corp-tinta-2);
}

.corp-estrellas {
    display: block;
    margin-bottom: 12px;
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--corp-marron-cl);
}

.corp-resena cite {
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
}
.corp-resena small { display: block; font-size: 13px; color: var(--corp-tenue); }

/* ---------- Catalogos ---------- */

.corp-catalogo {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--corp-blanco);
    border: 1px solid var(--corp-borde);
    border-radius: var(--corp-radio);
    text-decoration: none;
    color: inherit;
}
.corp-catalogo:hover { border-color: var(--corp-marron); }

.corp-catalogo strong { display: block; font-size: 16px; }
.corp-catalogo small  { font-size: 13px; color: var(--corp-tenue); }

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

.corp-faq {
    border-bottom: 1px solid var(--corp-borde);
}

/*
 * <details> nativo: se abre sin JavaScript, el navegador ya sabe hacerlo, y
 * el buscador lee la respuesta aunque este cerrada.
 */
.corp-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.corp-faq summary::-webkit-details-marker { display: none; }

.corp-faq summary::after {
    content: "+";
    flex: none;
    font-size: 22px;
    font-weight: 400;
    color: var(--corp-marron);
}
.corp-faq[open] summary::after { content: "\2212"; }

.corp-faq-cuerpo {
    padding: 0 0 20px;
    font-size: 15px;
    color: var(--corp-suave);
    max-width: 900px;
}

/* ---------- Formulario ---------- */

.corp-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.corp-campo { display: flex; flex-direction: column; }
.corp-campo--ancho { grid-column: 1 / -1; }

.corp-campo label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.corp-campo input,
.corp-campo textarea {
    width: 100%;
    /*
     * Sin min-height: el diseno no fija altura, la da el relleno. Con los 48 px
     * que habia aqui -de la version del formulario anterior al porte- cada
     * campo salia 2 px mas alto que en el original.
     */
    padding: 12px 14px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    color: var(--corp-tinta);
    background: var(--corp-blanco);
    border: 1px solid var(--corp-borde);
    border-radius: 10px;
}
.corp-campo textarea { resize: vertical; }

.corp-campo input:focus,
.corp-campo textarea:focus {
    outline: none;
    border-color: var(--corp-marron);
}

.corp-campo.es-error input,
.corp-campo.es-error textarea { border-color: #C0392B; }

.corp-campo-aviso {
    margin-top: 6px;
    font-size: 13px;
    color: #C0392B;
}

.corp-legal { font-size: 13px; color: var(--corp-tenue); }

.corp-form-respuesta {
    grid-column: 1 / -1;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 15px;
}
.corp-form-respuesta--ok    { background: #EAF6EE; color: #1E6B3A; }
.corp-form-respuesta--error { background: #FBEAE8; color: #A5281B; }

/* ---------- Contacto ---------- */

.corp-contacto {
    background: var(--corp-tinta);
    color: var(--corp-blanco);
    border-radius: var(--corp-radio);
    padding: 28px;
}
.corp-contacto h3 { color: var(--corp-blanco); font-size: 20px; }
.corp-contacto a  { color: var(--corp-marron-cl); }
.corp-contacto p  { font-size: 15px; color: rgba(255, 255, 255, .82); }

/* ---------- Movil ---------- */

@media (max-width: 991px) {
    .corp-rejilla--4 { grid-template-columns: repeat(2, 1fr); }
    .corp-sellos     { grid-template-columns: repeat(2, 1fr); }
    .corp-hero h1    { font-size: 38px; }
    .corp-tit        { font-size: 32px; }
}

@media (max-width: 767px) {
    .corp-seccion { padding: 48px 0; }
    .corp-ancho   { padding: 0 18px; }

    .corp-rejilla--2,
    .corp-rejilla--3,
    .corp-rejilla--4 { grid-template-columns: 1fr; }

    .corp-hero      { min-height: 440px; }
    .corp-hero-caja { padding: 56px 0; max-width: none; }
    .corp-hero h1   { font-size: 30px; }
    .corp-hero p    { font-size: 16px; }

    /*
     * En movil el velo va de arriba abajo: el texto queda debajo de la foto,
     * no a su izquierda, y un degradado horizontal lo dejaria sobre la parte
     * clara.
     */
    .corp-hero-velo {
        background: linear-gradient(180deg, rgba(44, 29, 22, .35) 0%, rgba(44, 29, 22, .82) 100%);
    }

    .corp-tit    { font-size: 26px; }
    .corp-tit-sm { font-size: 22px; }
    .corp-bajada { font-size: 16px; margin-bottom: 28px; }

    /* Los pasos pasan a columna y la linea se vuelve vertical. */
    .corp-pasos { grid-template-columns: 1fr; gap: 22px; }
    .corp-paso  { padding: 0 0 0 32px; }
    .corp-paso::before {
        top: 20px;
        bottom: -22px;
        left: 9px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .corp-paso-punto { position: absolute; top: 0; left: 0; margin: 0; }

    .corp-clientes  { gap: 26px; }
    .corp-form      { grid-template-columns: 1fr; }

    /*
     * El formulario de cotizacion se quedaba a DOS columnas en el telefono.
     *
     * La regla de arriba apunta a la CLASE .corp-form, pero en el marcado
     * `corp-form` es el ID del <form>, y la rejilla es un <div> hijo que trae
     * el grid EN LINEA del prototipo:
     *
     *     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))
     *
     * Con 381px utiles, auto-fit mete dos columnas de 183px y los valores se
     * cortan: se leia "nombre@empresa.c" y "S/ por persona o tot".
     *
     * Lleva !important porque compite con un estilo en linea, que gana a
     * cualquier selector. Y va contra una clase propia -no contra
     * [style*="minmax"]- porque los selectores por atributo de estilo aqui son
     * papel mojado en cuanto alguien toque el marcado del prototipo.
     */
    .corp-form-rejilla { grid-template-columns: 1fr !important; }
    .corp-btn       { width: 100%; }
    .corp-hero .corp-btn { width: auto; }
}

/* Quien pide menos movimiento no tiene por que aguantar el carrusel. */
@media (prefers-reduced-motion: reduce) {
    .corp-hero-foto,
    .corp-caso img,
    .corp-clientes img { transition: none; }
}


/* =====================================================================
 * Piezas del prototipo aprobado
 *
 * El markup del heroe, la subnavegacion y la tira de clientes viene del
 * prototipo con sus estilos EN LINEA, que es como lo genera Claude Design.
 * Aqui solo va lo que no cabe en un atributo style: la animacion, los estados
 * al pasar por encima y el estado activo de los puntos.
 * ===================================================================== */

@keyframes marq {
    from { transform: translateX(0); }
    /*
     * -50% y no -100%: la lista se pinta DOS veces seguidas, asi que al
     * desplazar justo media anchura la segunda copia ya ocupa el sitio de la
     * primera y el bucle no da tiron.
     */
    to   { transform: translateX(-50%); }
}

.corp-punto {
    width: 10px;
    background: #D8BCAE;
}
.corp-punto.es-activa {
    width: 30px;
    background: #B4462F;
}

.corp-cta-linea:hover,
.corp-cta-linea:focus { background: #FBF6F1; border-color: #B4462F; color: #3E2A20; }

.corp-cta-wa:hover,
.corp-cta-wa:focus { background: #8E3522; color: #FFFFFF; }

.corp-subnav-a:hover,
.corp-subnav-a:focus { color: #FFFFFF; }

/* Quien pide menos movimiento no tiene por que aguantar la marquesina. */
@media (prefers-reduced-motion: reduce) {
    [style*="animation:marq"] { animation: none !important; }
}


/* ---------- Heroe en movil ---------- */

@media (max-width: 560px) {
    /*
     * Palabras largas -"Personalizado", "Metropolitana"- no caben a 34 px en
     * una pantalla de 390 y el titular se salia por la derecha en vez de
     * partirse.
     */
    .corp-hero-texto h1 {
        font-size: clamp(26px, 8vw, 34px) !important;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /*
     * Los dos botones suman mas de lo que mide la pantalla. Se permite que el
     * segundo baje, y cada uno ocupa la linea entera: dos pildoras a media
     * anchura dejan el texto partido en dos lineas dentro del boton.
     */
    .corp-hero-texto ~ div[style*="flex-wrap:nowrap"] {
        flex-wrap: wrap !important;
    }
    .corp-cta-linea,
    .corp-cta-wa {
        flex: 1 1 100%;
        justify-content: center;
    }
}


/* ---------- Heroe en movil: el texto va SOBRE la foto ---------- */

@media (max-width: 767px) {
    /*
     * Las dos columnas se apilaban -texto arriba, foto debajo- y la primera
     * pantalla quedaba casi toda texto. Se superponen: la foto ocupa el marco
     * entero y el texto va encima.
     */
    /*
     * El !important no es pereza: el markup viene del landing aprobado con los
     * estilos EN EL ATRIBUTO style, y un estilo en linea gana a cualquier
     * regla de la hoja. Sin el, esta consulta de medios no cambia nada.
     */
    .corp-hero-rejilla {
        position: relative;
        display: block !important;
        min-height: 78vh;
    }

    .corp-hero-marco {
        position: absolute !important;
        inset: 0;
        min-height: 0 !important;
    }

    .corp-hero-col {
        position: relative;
        z-index: 2;
        min-height: 78vh;
        justify-content: flex-end !important;
        padding: 90px 22px 26px !important;
    }

    /*
     * El velo. Va sobre la foto y bajo el texto, y es fuerte abajo a proposito:
     * el banner es administrable y mañana pueden subir una foto clara desde el
     * panel. Sin este degradado, ese dia el titular se vuelve ilegible y nadie
     * relaciona una cosa con la otra.
     */
    .corp-hero-marco::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg,
            rgba(44, 29, 22, .30) 0%,
            rgba(44, 29, 22, .62) 42%,
            rgba(44, 29, 22, .90) 100%);
    }

    .corp-hero-col > div:last-child,
    .corp-hero-col > div:last-child span { color: rgba(255, 255, 255, .74); }

    .corp-hero-texto > span { color: #E8B98A !important; }
    .corp-hero-texto h1     { color: #FFFFFF !important; }
    .corp-hero-texto p      { color: rgba(255, 255, 255, .90) !important; }

    /*
     * El boton de contorno era blanco sobre crema; sobre foto se convierte en
     * cristal, y el solido pasa delante porque sobre una imagen es el unico
     * que se lee de un vistazo.
     */
    .corp-cta-linea {
        background: rgba(255, 255, 255, .14) !important;
        border-color: rgba(255, 255, 255, .45) !important;
        color: #FFFFFF !important;
        backdrop-filter: blur(4px);
        order: 2;
    }
    .corp-cta-wa { order: 1; }

    .corp-punto           { background: rgba(255, 255, 255, .42); }
    .corp-punto.es-activa { background: #FFFFFF; }
}


/* ---------- Los anclajes no se meten bajo la cabecera ---------- */

/*
 * Al pulsar un enlace de la barra el navegador lleva la seccion a y=0, y encima
 * hay 150 px de cabecera fija: el arranque de la seccion quedaba TAPADO -se veia
 * el campo de mensaje del formulario asomando bajo el logo-. `scroll-margin-top`
 * le dice al navegador donde parar de verdad.
 *
 * Se suma la altura de la barra de secciones cuando esta pegada (escritorio);
 * en movil la barra no sigue el scroll, asi que solo cuenta la cabecera.
 */
.corp [id] {
    scroll-margin-top: calc(var(--corp-cab, 150px) + 96px);
}

@media (max-width: 767px) {
    .corp [id] {
        scroll-margin-top: calc(var(--corp-cab, 150px) + 12px);
    }
}

/*
 * El campo trampa se ocultaba con position:absolute y left:-9999px. Sin ancestro
 * posicionado, su bloque contenedor es el documento ENTERO, asi que se anclaba
 * arriba del todo en vez de quedarse en el formulario. Se oculta recortandolo:
 * sigue en el flujo, ocupa cero, y un robot que rellena todo lo sigue viendo.
 */
.corp-trampa {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Red por si Bootstrap Material Design vuelve a tocar estos campos: ni el
 * contenedor ni su etiqueta salen del flujo. Es lo que hacia que el area de
 * mensaje apareciese arriba del todo, tapada por la cabecera.
 */
.corp-campo,
.corp-campo label,
.corp-campo .bmd-form-group { position: static !important; }

.corp-campo .bmd-label-floating,
.corp-campo label { transform: none !important; }


/* ---------- Interlineado, al pixel del diseno aprobado ---------- */

/*
 * `.corp` fija line-height 1.6 para el texto corrido, pero en el diseno los
 * TITULARES y los ROTULOS no llevan interlineado propio: se quedan en el
 * `normal` del navegador. Heredar el 1.6 los estiraba entre 4 y 5 px cada uno
 * -medido contra /corporativo-banner/: los h2 pasaban de 52 a 48 px de alto, y
 * los rotulos de 15 a 19-, y ese error se acumula en el ritmo vertical de toda
 * la pagina.
 *
 * Los que SI llevan interlineado en linea -el h1 del heroe con 1.04, los
 * titulos de tarjeta con 1.2- no se tocan: el estilo en linea manda.
 */
/*
 * Ya no hace falta enumerarlos: la raiz `.corp` es `normal` y se hereda. Se
 * deja el selector por si alguien vuelve a poner un interlineado en la raiz.
 */
.corp h1,
.corp h2,
.corp h3,
.corp-rotulo,
.corp-cta-linea,
.corp-cta-wa { line-height: normal; }


/* ---------- Formulario: quitar lo que le pone el sitio ---------- */

/*
 * index.css trae `.nform, label { background: #fff }` — fondo blanco para TODAS
 * las etiquetas del sitio. En este formulario, que va sobre crema, eso pintaba
 * una barra blanca detras de cada rotulo, del ancho de la columna, que en el
 * diseno no existe. Es lo primero que se ve al comparar con el original.
 */
.corp-campo label {
    background: transparent;
    /*
     * Y bootstrap le pone display:inline-block con margen inferior; aqui la
     * etiqueta es una linea suelta encima del campo.
     */
    display: block;
    margin: 0;
    padding: 0;
}


/*
 * Los campos, al alto del diseno.
 *
 * Heredaban el interlineado 1.6 del cuerpo y el `display:inline-block` que el
 * sitio pone a los inputs. Resultado: cada campo media 51 px en vez de 46, el
 * area de mensaje 122 en vez de 98 y el boton 53 en vez de 48. Cinco pixeles
 * por campo que estiraban el formulario entero.
 */
.corp-campo input,
.corp-campo textarea {
    line-height: normal;
    display: block;
}

/* El boton se queda inline-block, como en el diseno. */
.corp-enviar { line-height: normal; }

/*
 * main.min.css trae `textarea { padding: 14px !important }`, que gana incluso
 * al estilo en linea del diseno. Contra un !important hace falta otro.
 */
.corp-campo textarea { padding: 13px 14px !important; }

/*
 * EL TAMANO DE LETRA HEREDADO
 *
 * index.css del sitio trae `* { font-size: 16px }`, que no solo fija un tamano:
 * ROMPE LA HERENCIA. El diseno aprobado se apoya en ella -pone el tamano en el
 * contenedor y los hijos lo heredan-, asi que cada texto sin `font-size` en su
 * atributo style acababa en 16px. En el pie del heroe eso son 12.5px pintados
 * a 16px: un 28 % mas grandes de lo aprobado.
 *
 * `.corp *` gana a `*` por especificidad, y los estilos en linea -que en este
 * markup son casi todos- siguen ganando a esta regla. O sea que solo actua
 * donde el diseno queria herencia.
 */
.corp * { font-size: inherit; }

/*
 * Y lo mismo con el interlineado: sin esto, `* { font-size }` y las reglas del
 * sitio cortan la cadena de herencia en la que se apoya el diseno.
 */
.corp * { line-height: inherit; }

/*
 * EL CARRITO EN MOVIL
 *
 * El panel es una columna flex: la lista lleva `flex:1` y el pie ocupa lo que
 * necesita. Al anadir los datos de entrega, el pie crecio tanto que a la lista
 * le quedaban 36 px de alto -medido a 390 px-: el cliente veia una rendija en
 * vez de lo que estaba comprando.
 *
 * En pantalla estrecha se deja de repartir el alto y scrollea el panel entero,
 * que es lo natural con el pulgar. El boton de pagar se queda pegado abajo
 * para que no haya que buscarlo.
 */
/*
 * EL ALTO DEL CARRITO
 *
 * El panel era una columna flex: la lista con `flex:1` y el pie ocupando lo
 * que necesitara. Al anadir los datos de entrega el pie paso a medir 842 px y
 * a la lista le quedaban 36: el cliente veia una rendija donde deberia ver lo
 * que esta comprando.
 *
 * Y NO ES SOLO DE MOVIL. Esto se descubrio a 390 px, se arreglo alli con una
 * media query, y la captura para el informe lo enseño igual de roto a 1440:
 * lo que manda es el alto de la ventana, no el ancho. La regla va sin media
 * query.
 *
 * `!important` porque el markup trae `flex:1;overflow-y:auto` en su atributo
 * style -viene del diseno- y un estilo en linea gana a cualquier hoja.
 */
.corp-carrito-panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.corp-carrito-lista {
    flex: none !important;
    overflow: visible !important;
}

/*
 * El pie NO se queda pegado abajo: mide casi tanto como la pantalla, y
 * `position:sticky` lo dejaba clavado encima de la lista tapando el producto
 * que se acababa de agregar.
 */
.corp-carrito-pie {
    position: static;
}

/*
 * LOS CAMPOS DEL CARRITO Y EL ENVOLTORIO DE BOOTSTRAP
 *
 * Bootstrap Material Design envuelve cada <input> del sitio en un
 * <span class="bmd-form-group">. En la rejilla del carrito el elemento que
 * coloca la rejilla pasa a ser ESE SPAN, no el input, y ni el `min-width:0`
 * ni el `grid-column: span 2` que llevan los campos en su atributo style le
 * aplican: "Direccion de entrega" y "Referencia" salian a media columna y con
 * el texto cortado, y el panel desbordaba 20 px por la derecha.
 *
 * `display:contents` saca al envoltorio de la rejilla sin borrarlo: el
 * elemento que se coloca vuelve a ser el <input>, con lo que el diseno le
 * escribio.
 *
 * (Esta regla ya se habia escrito una vez y la borre por accidente al recortar
 * el bloque de arriba. La captura del rechazo simulado la delato.)
 */
.corp-carrito-pie .bmd-form-group {
    display: contents;
}

/*
 * FORMAS DE PAGO Y TERMINOS DEL CARRITO CORPORATIVO (23/09/2026)
 *
 * Son <label> y un checkbox, e index.css tiene reglas sobre los dos elementos
 * pelados: `label { position:absolute; top:7px; left:27px }` -los sacaba del
 * flujo y los corria a la derecha- e `input[type=checkbox] { opacity:0 }` con
 * !important -la casilla de terminos no se veia-. Se deshacen solo aqui.
 */
.corp-carrito-pie label {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    transform: none !important;
    margin: 0 !important;
    background: none;
}
.corp-carrito-pie [data-corp-terminos],
.corp-carrito-pie [data-corp-forma-radio] {
    opacity: 1 !important;
    position: static !important;
    display: inline-block !important;
}