/* ============================================================
   IMPLATEC — Portada
   ============================================================
   Sigue la referencia de diseño del cliente: hero con foto a sangre y el
   texto encima, respaldos en fila sobre blanco, y las dos marcas en su
   propia sección con tarjetas horizontales.

   La regla que recorre esta hoja: el azul es de Implatec, y cada marca
   pinta con SU color mediante la variable --marca. Así una tarjeta de
   Graphy sale naranja y una de Geistlich azul sin duplicar reglas.
   ============================================================ */

/* ============================================================
   Botones
   ============================================================ */
.ibtn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 999px;
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}
.ibtn i { transition: transform 0.2s ease; }
.ibtn:hover i.fa-arrow-right { transform: translateX(4px); }

.ibtn--primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 30%, transparent);
}
.ibtn--primary:hover { background: var(--primary-dark); transform: translateY(-2px); }

.ibtn--ghost {
    background: #fff;
    color: var(--primary);
    border: 1.5px solid var(--primary);
}
.ibtn--ghost:hover { background: color-mix(in srgb, var(--primary) 6%, #fff); }

/* ============================================================
   HERO
   ============================================================ */
.hero2 {
    position: relative;
    isolation: isolate;
    /* Fondo limpio cuando NO hay foto configurada. No se deja en blanco a
       secas: un hero plano se lee como una página a medio cargar. */
    background:
        radial-gradient(900px 420px at 82% 8%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 70%),
        linear-gradient(150deg, #FFFFFF 0%, #F6F9FD 100%);
}

/* ---- La foto ----
   `fondo1.png` es un banner a todo el ancho (2006 × 784) que YA trae la
   composición montada: fondo claro a la izquierda para el titular y los
   productos a la derecha. Por eso ocupa el 100% y no un 62% anclado a la
   derecha, que era el tratamiento de la foto suelta anterior y partía la
   imagen por la mitad. */
.hero2__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A la izquierda va el texto: al recortar en pantallas estrechas se
       sacrifica el lado derecho antes que el titular. */
    object-position: left center;
    z-index: -2;
    /* Oculta hasta que hay una configurada de verdad. La clase la pone
       hero-home.js cuando la imagen carga; si la URL falla, se quita y el
       hero vuelve al diseño sin foto. */
    display: none;
}
.hero2--foto .hero2__foto { display: block; }

/* Velo suave, no opaco: la imagen del diseño ya reserva sitio claro para
   el texto, así que taparla al 100% hasta el 34% del ancho la ensuciaría
   sin ganar nada. Solo sube un poco el contraste del titular y se va
   pronto para no velar los productos. */
.hero2__velo { display: none; }
.hero2--foto .hero2__velo {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(255, 255, 255, 0.62) 26%,
        rgba(255, 255, 255, 0.18) 45%,
        rgba(255, 255, 255, 0) 58%);
}

.hero2__inner {
    position: relative;
    /* Ajustado para que las dos marcas entren en la primera pantalla en un
       portátil de 900px de alto: con 84px arriba, el encabezado de
       Distribuidoras se comía el hueco y las tarjetas quedaban fuera. */
    padding: 60px 0 52px;
}

.hero2__copy { max-width: 560px; }
/* Sin foto, el texto ocupa más ancho: encajonarlo a la izquierda solo tiene
   sentido cuando hay algo a la derecha que respetar. */
.hero2:not(.hero2--foto) .hero2__copy { max-width: 720px; }

/* ---- Antetítulo ---- */
/* Versalitas espaciadas en lugar de una pastilla con fondo: pesa menos y
   deja el titular como único foco, como en la referencia. */
.hero2__eyebrow {
    display: block;
    margin-bottom: 18px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
}

.hero2__title {
    margin-bottom: 20px;
    font-size: clamp(1.95rem, 4vw, 3.05rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.025em;
    color: var(--text-dark);
}
/* El remate va EN LÍNEA, no en bloque propio: en la referencia «marcan la
   diferencia» continúa la frase, no la corta. */
.hero2__title em {
    font-style: normal;
    color: var(--primary);
}

.hero2__desc {
    max-width: 470px;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-medium);
}

.hero2__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

/* ---- Los cuatro respaldos ---- */
/* En fila y sobre blanco, sin tarjeta flotante: la tarjeta competía con el
   titular y aquí solo tienen que acompañar. */
.hero2__trust {
    position: relative;
    background: #fff;
    border-top: 1px solid var(--border);
}
.htrust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    padding: 22px 0;
}
.htrust__item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.htrust__item i {
    flex: none;
    font-size: 1.15rem;
    color: var(--primary);
}
.htrust__item b {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
}
.htrust__item small {
    display: block;
    font-size: 0.73rem;
    color: var(--text-medium);
    line-height: 1.35;
}

/* ============================================================
   NUESTRAS MARCAS · la banda del fondo2
   ============================================================ */
.imarcas {
    position: relative;
    padding: 58px 0;
    overflow: hidden;
    background: linear-gradient(105deg, #FFFFFF 0%, #F3F7FE 62%, #E9F0FB 100%);
}
/* `fondo2.png` también es un banner a todo el ancho (2170 × 725) con la
   textura ya colocada a la derecha, así que cubre el 100% en lugar de
   pegarse a un lado. El velo lateral se hace con un degradado encima —no
   con una máscara sobre la imagen— para que el texto se lea sin recortar
   el banner. */
.imarcas__fondo {
    position: absolute;
    top: 0;
    bottom: 0;
    /* Arranca al 26% en vez de cubrir todo: los logotipos que la imagen
       trae dibujados caían encima del titular si cubría el ancho entero, y
       al 42% se iban tan a la derecha que dejaban un hueco vacío entre el
       texto y ellos. El 26% los deja justo al lado del titular.

       Se desplaza con `left` y no con `object-position`: bajo `object-fit:
       cover` esa propiedad elige qué franja de la imagen se ve, no dónde
       se dibuja, así que no serviría para moverla. */
    left: 26%;
    /* Ancho EXPLÍCITO, no `right: 0` con `width: auto`. En una imagen,
       `width: auto` se calcula con su proporción intrínseca e ignora el
       `right`, así que la imagen terminaba antes del borde y dejaba una
       franja vacía a la derecha. Con el ancho dado, `cover` la estira
       hasta el final y recorta lo que sobre. */
    width: 74%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
/* Funde el borde izquierdo del banner con el fondo de la sección: sin
   esto se ve el corte recto donde empieza la imagen. */
.imarcas::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        #FFFFFF 0%,
        rgba(255, 255, 255, 0.94) 22%,
        rgba(255, 255, 255, 0.4) 33%,
        rgba(255, 255, 255, 0) 42%);
}
/* Sin banner no hay nada que fundir. */
.imarcas--sin-foto::after { display: none; }
/* Sin el archivo, el degradado de la sección basta. Lo activa hero-home.js */
.imarcas--sin-foto { background: linear-gradient(105deg, #FFFFFF 0%, #EFF5FF 100%); }

/* Una sola columna: la derecha la ocupaban los distintivos que se
   retiraron, porque la imagen ya los trae. */
.imarcas__in {
    position: relative;
    z-index: 1;
}
/* El texto se queda en la mitad izquierda, la que el banner deja libre.
   Sin el tope, el titular se metía por debajo de los logotipos. */
.imarcas__txt { max-width: 40%; }
.imarcas__txt h2 {
    font-size: clamp(1.5rem, 2.7vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-dark);
}
.imarcas__txt p {
    margin: 12px 0 20px;
    max-width: 27rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-medium);
}

/* Etiqueta de sección, compartida con Categorías destacadas */
.ieyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
}

/* Los estilos de .imarcas__logos / .imarca se retiraron con los
   distintivos que componía el JavaScript: `fondo2.png` ya trae los
   logotipos dibujados y salían dos veces, uno encima del otro. */

@media (max-width: 900px) {
    /* En pantalla estrecha no hay sitio para texto y banner en paralelo:
       la imagen pasa a cubrir el fondo y el velo la aclara entera para que
       el titular siga legible encima. */
    .imarcas__txt { max-width: none; }
    .imarcas__fondo { left: 0; width: 100%; }
    /* Con la composición de fondo, en una columna el texto no cabe al 46%:
       ocupa el ancho y la imagen se ve como telón detrás. */
    .idcard--foto { padding: 24px; }
    .idcard--foto .idcard__copy { max-width: none; }
    .imarcas::after {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.8) 60%,
            rgba(255, 255, 255, 0.62) 100%);
    }
}

/* ============================================================
   DISTRIBUIDORAS
   ============================================================ */
.idist {
    padding: 44px 0 64px;
    background: #fff;
}

.idist__head {
    max-width: 660px;
    margin: 0 auto 26px;
    text-align: center;
}
.idist__tag {
    display: block;
    margin-bottom: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
}
.idist__head h2 {
    margin-bottom: 10px;
    font-size: clamp(1.5rem, 2.8vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-dark);
}
.idist__head p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-medium);
}

.idist__grid {
    display: grid;
    /* auto-fit y no «1fr 1fr»: la lista de distribuidoras cambia, y con dos
       columnas fijas una sola marca dejaba media fila vacía y una tercera
       se salía de la rejilla. Con minmax, 1 marca ocupa el ancho, 2 van a
       la par y 3 o más se reparten en filas. */
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 22px;
}

/* Con una sola distribuidora la tarjeta a todo el ancho queda desangelada:
   se limita y se centra. */
.idist__grid:has(> .idcard:only-child) {
    max-width: 620px;
    margin: 0 auto;
}

/* ---- Tarjeta de marca ---- */
.idcard {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0.92fr;
    gap: 16px;
    align-items: center;
    padding: 30px 0 30px 30px;
    border-radius: 18px;
    overflow: hidden;
    /* Tinte del color de la marca, muy suave y en degradado hacia la
       imagen: identifica la tarjeta sin pelearse con el texto. */
    background: linear-gradient(
        105deg,
        #fff 0%,
        color-mix(in srgb, var(--marca) 4%, #fff) 45%,
        color-mix(in srgb, var(--marca) 11%, #fff) 100%);
    border: 1px solid color-mix(in srgb, var(--marca) 14%, #fff);
    --marca: var(--primary);
}

/* El nombre de la marca en versalitas, sobre el titular: en el diseño el
   peso lo lleva la promesa («Regeneración con respaldo científico»), no el
   nombre, que ya se ha visto dos veces más arriba. */
.idcard__tag {
    display: block;
    margin-bottom: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--marca);
}
.idcard__nombre {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.idcard__esp {
    margin: 9px 0 11px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* ---- Tarjeta con composición de fondo -------------------------------
   `box1.png` y `box2.png` son la tarjeta entera: fondo oscuro liso a la
   izquierda para el texto y el producto montado a la derecha. Por eso van
   de `background-image` y no dentro de .idcard__media, que solo tenía
   sitio para media tarjeta.

   `background-color` debajo a propósito: si el archivo faltara, la
   tarjeta se queda oscura y legible en lugar de dejar el texto blanco
   sobre blanco. Una imagen de fondo que no carga no avisa de nada. */
.idcard--foto {
    /* La imagen la pone hero-home.js en el atributo `style`; aquí solo va
       cómo se encuadra. El color de debajo es el respaldo si el archivo
       faltara: sin él quedaría texto blanco sobre blanco. */
    background-color: #12161B;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    border-color: rgba(255, 255, 255, 0.1);
    /* La imagen ya trae su propio aire: la rejilla de dos columnas sobra y
       el texto se queda en la mitad izquierda, sobre la zona lisa. */
    grid-template-columns: minmax(0, 1fr);
    padding: 34px;
}
.idcard--foto .idcard__copy { max-width: 46%; }
.idcard--foto .idcard__tag { color: #fff; opacity: 0.75; }
.idcard--foto .idcard__nombre { color: #fff; }
.idcard--foto .idcard__desc { color: rgba(255, 255, 255, 0.76); }
.idcard--foto .idbtn {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}
.idcard--foto .idbtn:hover { filter: brightness(1.12); background: var(--marca); }

.idcard--foto .idcard__chips { border-top-color: rgba(255, 255, 255, 0.14); }
.idcard--foto .idchip {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
}
.idcard--foto .idchip i { color: #fff; }
.idcard--foto .idchip:hover { background: rgba(255, 255, 255, 0.2); }

/* ---- Pie de etiquetas ----------------------------------------------
   Son las categorías reales de la marca, así que llevan a su listado ya
   filtrado: la fila no solo informa, también es el atajo más corto al
   catálogo que le interesa a ese profesional. */
.idcard__chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--marca) 16%, transparent);
}
.idchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--marca) 9%, #fff);
    color: var(--text-dark);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}
.idchip i { color: var(--marca); font-size: 0.76rem; }
.idchip:hover { background: color-mix(in srgb, var(--marca) 20%, #fff); }

/* La variante .idcard--oscura se retiró: ahora el fondo de cada tarjeta
   es su propia composición (.idcard--foto), que ya viene oscura. */
.idcard__desc {
    margin-bottom: 20px;
    max-width: 330px;
    font-size: 0.83rem;
    line-height: 1.65;
    color: var(--text-medium);
}

/* Botón de contorno del color de la marca */
.idbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1.5px solid var(--marca);
    color: var(--marca);
    background: #fff;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}
.idbtn i { transition: transform 0.2s ease; }
.idbtn:hover {
    background: var(--marca);
    color: #fff;
}
.idbtn:hover i { transform: translateX(3px); }
.idbtn.is-off {
    border-color: var(--border);
    color: var(--text-light);
    font-style: italic;
    cursor: default;
}
.idbtn.is-off:hover { background: #fff; color: var(--text-light); }

.idcard__media {
    display: grid;
    place-items: center;
    min-height: 165px;
    padding-right: 22px;
}
.idcard__media img {
    width: 100%;
    max-height: 175px;
    object-fit: contain;
    border-radius: 12px;
}
.imarca__icono {
    font-size: 3.4rem;
    color: color-mix(in srgb, var(--marca) 26%, #fff);
}

/* ---- Franja de educación ---- */
.iedu {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 26px;
    border-radius: 16px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: var(--transition);
}
.iedu:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 4%, #fff);
}
.iedu__ico {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 12%, #fff);
    color: var(--primary);
    font-size: 1.05rem;
}
.iedu__copy { flex: 1; min-width: 0; }
.iedu__copy b {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 2px;
}
.iedu__copy small {
    display: block;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-medium);
}
.iedu__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
}
.iedu__cta i { transition: transform 0.2s ease; }
.iedu:hover .iedu__cta i { transform: translateX(4px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
    /* La foto pasa a ocupar todo el fondo y el velo se hace vertical: a
       este ancho, una foto al 62% deja el titular encima de la cara. */
    .hero2__foto { width: 100%; }
    .hero2--foto .hero2__velo {
        background: linear-gradient(
            180deg,
            #FFFFFF 0%,
            rgba(255, 255, 255, 0.95) 46%,
            rgba(255, 255, 255, 0.72) 68%,
            rgba(255, 255, 255, 0.5) 100%);
    }
    .hero2__inner { padding: 60px 0 220px; }
    .hero2__copy, .hero2:not(.hero2--foto) .hero2__copy { max-width: none; }

    .htrust { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .idist__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .hero2__inner { padding: 44px 0 160px; }
    .hero2__cta .ibtn { flex: 1 1 100%; justify-content: center; }

    .htrust { grid-template-columns: 1fr; gap: 16px; padding: 20px 0; }

    .idist { padding: 48px 0; }
    .idcard {
        grid-template-columns: 1fr;
        padding: 24px;
        text-align: center;
        justify-items: center;
    }
    .idcard__desc { max-width: none; }
    .idcard__media { order: -1; min-height: 130px; padding-right: 0; }

    .iedu { flex-direction: column; text-align: center; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .ibtn:hover, .idbtn:hover i, .iedu:hover .iedu__cta i { transform: none; }
}

/* ============================================================
   Identidad de la referencia
   ============================================================
   Barra de anuncio, lema bajo el logo, botón del nav y tarjeta flotante
   del hero. La paleta sale del logo (ver el comentario de styles.css).
   ============================================================ */

/* ---------- Barra de anuncio ---------- */
/* La barra va FIJA, igual que el header, y el header baja para dejarle su
   sitio. Antes la barra iba en el flujo y el header, que es fijo, se le
   ponía encima: se veía el anuncio partido por el logo.

   El desplazamiento se compensa una sola vez en <body>: la barra deja de
   ocupar espacio al ser fija, y ese relleno lo devuelve. Así ninguna página
   necesita ajustes propios. */
/* ---------- Tarjeta flotante del hero ---------- */
/* Se coloca en la columna derecha del hero, sobre la foto. El hero es una
   rejilla de dos columnas cuando hay foto, para que la tarjeta caiga
   encima de la imagen y no sobre el texto. */
.hero2--foto .hero2__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: var(--s6, 32px);
}

/* Los estilos de la tarjeta flotante (.hero2__card / .hcard__item) se
   retiraron con ella: repetía los cuatro respaldos de la fila de abajo y
   tapaba la composición de producto del fondo. */

/* ============================================================
   CONTACTO · fondo consulta.png
   ============================================================ */
/* Solo la usa la portada, así que la regla va aquí y no en styles.css.
   Mismo tratamiento que la banda de marcas: la imagen de fondo y encima
   un velo que la aclara donde cae el texto. Sin el velo, «¿Tienes alguna
   consulta?» compite con la foto y se pierde. */
.contact {
    position: relative;
    background-image: url('../img/web/consulta.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Debajo, el color de siempre: si el archivo faltara la sección sigue
       teniendo fondo en lugar de quedarse en blanco. */
    background-color: var(--bg-light);
    overflow: hidden;
}
.contact::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0.93) 0%,
        rgba(255, 255, 255, 0.82) 38%,
        rgba(255, 255, 255, 0.62) 62%,
        rgba(255, 255, 255, 0.5) 100%);
}
/* El contenido por encima del velo. */
.contact > .container { position: relative; z-index: 1; }

@media (max-width: 900px) {
    /* En una columna el formulario cae sobre la parte con más detalle de
       la foto: el velo sube para que los campos se lean. */
    .contact::before {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.88) 100%);
    }
}

/* ---------- Titulares de sección a dos tonos ---------- */
/* El remate va en el azul de acento, como «marcan la diferencia» en el
   hero. Es la misma idea aplicada a los encabezados de sección. */
.idist__head h2 em {
    font-style: normal;
    color: var(--primary);
}

@media (max-width: 900px) {
    .hero2--foto .hero2__inner { grid-template-columns: 1fr; }
    /* En pantalla estrecha la cabecera es más baja: reservar los 78px del
       escritorio dejaría una franja blanca sobre la imagen. */
    .hero2 { --cabecera-h: 62px; }
}

/* ============================================================
   Ajustes tras comparar con la referencia
   ============================================================ */

/* El lema bajo el logo hace el header más alto, y el hero empezaba
   demasiado arriba: la etiqueta azul se metía debajo del lema. */
.hero2__inner { padding-top: 40px; }

/* La cabecera es `position: fixed`, así que la imagen del hero se colaba
   por DEBAJO del menú y asomaba al hacer scroll. El hero reserva su altura
   y la foto arranca justo debajo.

   Solo la del MENÚ, no la de la barra superior: `body` ya lleva
   `padding-top: var(--topbar-h)`, así que el hero empieza debajo de la
   barra azul. Sumarla otra vez aquí dejaba una franja blanca de 38px
   entre el menú y la foto. */
.hero2 {
    /* 66 y no 78: la cabecera mide menos de lo que calculé y sobraba una
       franja blanca fina justo encima de la imagen. */
    --cabecera-h: 66px;
    padding-top: var(--cabecera-h);
    background-color: #fff;
}
.hero2__foto,
.hero2--foto .hero2__velo {
    /* Cuatro píxeles por encima del borde de la cabecera: así el corte de
       la imagen queda TAPADO por ella en lugar de coincidir al milímetro,
       que es lo que dejaba asomar una línea clara si el navegador redondea
       la altura de otra forma. La cabecera es opaca, así que no se ve. */
    top: calc(var(--cabecera-h) - 4px);
    height: auto;
    bottom: 0;
}

/* La fila de respaldos es una TARJETA elevada que cabalga entre el hero y
   la sección siguiente, no una franja a todo lo ancho. Con separadores
   entre los cuatro, como en la referencia. */
.hero2__trust {
    position: relative;
    background: transparent;
    border-top: 0;
    /* Cabalga entre el hero y la sección siguiente, pero sin comerse la
       composición: con -46px la tarjeta subía tanto que cortaba los
       productos del fondo por la mitad. Ahora solo monta unos pocos
       píxeles y deja respirar la imagen. */
    margin-top: 18px;
    padding-bottom: 8px;
    z-index: 2;
}
/* Sin tarjeta: los cuatro respaldos van directamente sobre la foto.
   La caja blanca con sombra partía la composición en dos y obligaba a
   dejar un margen a cada lado; fundidos con el fondo, el hero se lee como
   una sola imagen y los respaldos acompañan en vez de interrumpir.
   La zona de la foto que les toca es la mesa clara del primer plano, así
   que el texto oscuro se lee sin necesidad de velo. */
.htrust {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 26px 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.htrust__item {
    padding: 2px 26px;
    /* Separador translúcido, no el gris sólido de la tarjeta: sobre la foto
       una línea opaca se ve como un borde pegado encima. */
    border-left: 1px solid rgba(20, 62, 140, 0.16);
}
/* El primero no lleva raya: una línea al borde parece un fallo de
   recorte, no un separador. */
.htrust__item:first-child { border-left: 0; padding-left: 4px; }

@media (max-width: 900px) {
    .hero2__inner { padding-top: 84px; }
    .hero2__trust { margin-top: 0; }
    .htrust { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
    .htrust__item:nth-child(odd) { border-left: 0; padding-left: 4px; }
}
@media (max-width: 560px) {
    .htrust { grid-template-columns: 1fr; }
    .htrust__item { border-left: 0; padding-left: 4px; }
}

/* La foto llegaba hasta 78px antes del fondo para no asomar por los lados
   de la tarjeta blanca de respaldos. Sin esa tarjeta el recorte sobra: los
   respaldos van AHORA sobre la imagen, así que tiene que llegar hasta
   abajo o se quedarían sobre una franja blanca, que es justo lo que se
   quería quitar. */