/* ================================================================
   Arero CEDIS — sitio institucional (páginas públicas)
   Se carga junto con tienda.css; reusa sus variables de color.
   ================================================================ */

.sitio { display: flex; flex-direction: column; min-height: 100vh; background: #fff; }
.sitio main { flex: 1; }

/* ---------- Barra superior ---------- */
.sitio-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap;
    background: #fff; border-bottom: 1px solid var(--borde);
    padding: 0.7rem 1.6rem; position: sticky; top: 0; z-index: 20;
}
.sitio-brand { display: flex; align-items: center; gap: 0.7rem; color: var(--texto); }
.sitio-brand:hover { text-decoration: none; }
.sitio-brand img { height: 44px; width: auto; display: block; }
.sitio-brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.sitio-brand-txt strong { font-size: 1.05rem; }
.sitio-brand-txt small { color: var(--gris); font-size: 0.76rem; }

/* En escritorio la fila se disuelve: marca, enlaces y botón vuelven a ser hijos directos de
   la barra y el orden visual lo fija `order`. El margin-left:auto del nav empuja enlaces y
   botón a la derecha (gana sobre el space-between de la barra, que así no separa el par). */
.sitio-topbar-fila { display: contents; }
.sitio-brand { order: 0; }
.sitio-nav { order: 1; margin-left: auto; }
.sitio-topbar-fila > .btn-tienda { order: 2; }

.sitio-nav { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.sitio-nav a { color: var(--texto); font-size: 0.93rem; font-weight: 500; }
.sitio-nav a:hover { color: var(--azul); text-decoration: none; }
.btn-tienda {
    background: var(--azul); color: #fff; border-radius: 8px;
    padding: 0.5rem 1.05rem; font-weight: 600; white-space: nowrap;
}
.btn-tienda:hover { background: var(--azul-osc); color: #fff; text-decoration: none; }

/* ---------- Hero ---------- */
/* La foto del cliente va DEBAJO del degradado de marca, no en lugar de él: el degradado
   sigue dando el color azul→verde y garantiza contraste para el texto blanco pase lo que
   pase con la foto. Por eso las capas llevan opacidad y la imagen queda al final. */
.hero {
    color: #fff;
    background:
        radial-gradient(1100px 480px at -10% -10%, rgba(246,197,0,0.20), transparent 60%),
        radial-gradient(900px 500px at 120% 120%, rgba(226,35,26,0.22), transparent 55%),
        linear-gradient(135deg, rgba(15,63,143,0.92) 0%, rgba(18,80,143,0.90) 45%, rgba(31,143,95,0.88) 100%),
        url('../img/sitio/hero-fondo.jpg') center / cover no-repeat #0f3f8f;
}
.hero-wrap {
    max-width: 1180px; margin: 0 auto; padding: 3.6rem 1.6rem;
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.6rem; align-items: center;
}
.hero .eyebrow {
    display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; opacity: 0.85; margin-bottom: 0.7rem;
}
.hero h1 { font-size: 2.3rem; line-height: 1.18; margin: 0 0 0.9rem; color: #fff; }
.hero p { font-size: 1.02rem; line-height: 1.6; opacity: 0.93; margin: 0 0 1.7rem; max-width: 40rem; }
/* Bajada del titular: va pegada al h1 y con más peso que el párrafo descriptivo. */
.hero .hero-lema {
    font-size: 1.12rem; font-weight: 600; opacity: 1;
    margin: -0.4rem 0 0.9rem; color: #ffe89a;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.btn-cta {
    display: inline-block; background: var(--azul); color: #fff;
    border-radius: 9px; padding: 0.72rem 1.35rem; font-weight: 600; font-size: 0.95rem;
    border: 1px solid transparent; transition: background .15s, color .15s;
}
.btn-cta:hover { background: var(--azul-osc); color: #fff; text-decoration: none; }
.btn-cta.ghost { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.55); }
.btn-cta.ghost:hover { background: rgba(255,255,255,0.22); }
.btn-cta.claro { background: #fff; color: var(--azul); }
.btn-cta.claro:hover { background: #eef3fd; color: var(--azul-osc); }
.btn-cta.ghost-claro { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; }
.btn-cta.ghost-claro:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Figura del hero: dos fotos 4:3 encimadas. La primera marca el alto del bloque y el
   padding-bottom deja el hueco donde cuelga la segunda, anclada abajo a la derecha. Todo en
   porcentajes del ancho, así que la composición se conserva a cualquier tamaño. */
.hero-fotos { position: relative; padding-bottom: 22%; }
.hero-fotos img {
    display: block; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 12px; border: 4px solid #fff;
    box-shadow: 0 16px 34px rgba(0,0,0,0.40);
}
.hero-fotos img:first-child { width: 74%; }
.hero-fotos img + img { position: absolute; right: 0; bottom: 0; width: 62%; }

/* ---------- Banda de cifras ---------- */
.banda-cifras { background: var(--texto); color: #fff; }
/* Flex y no grid a propósito: son CINCO cifras, así que en cuanto no caben todas en un
   renglón queda una fila incompleta. Con grid esa fila se pega a la izquierda y deja un
   hueco; con flex + justify-content:center queda centrada sola en cualquier ancho. */
.cifras-wrap {
    max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.6rem;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 1.2rem 1rem; text-align: center;
}
.cifras-wrap div { flex: 1 1 150px; display: flex; flex-direction: column; gap: 0.15rem; }
.cifras-wrap strong { font-size: 1.75rem; line-height: 1; }
.cifras-wrap span { font-size: 0.82rem; opacity: 0.78; }

/* ---------- Secciones ---------- */
.seccion { padding: 3.4rem 0; }
.seccion.gris { background: var(--gris-bg); }
.seccion-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.6rem; }
.seccion h2 { font-size: 1.75rem; margin: 0 0 1rem; }
.seccion p { line-height: 1.65; color: #414855; }
.centrado { text-align: center; }
.seccion .sub { color: var(--gris); margin: -0.4rem 0 2rem; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.8rem; align-items: start; }

.link-flecha { font-weight: 600; display: inline-block; margin-top: 0.6rem; }

/* Bloques de texto largo del cliente: a tres columnas en escritorio para que no queden
   renglones larguísimos, y a una sola columna en cuanto no quepan. */
.texto-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 2.2rem; }
.texto-columnas p { margin: 0 0 1rem; }
.texto-marketing { font-size: 1.05rem; }

/* Los dos retratos del personal, uno junto al otro. Comparten alto para que la fila quede
   pareja aunque las fotos originales tengan proporciones distintas. */
.retratos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.retratos .foto-marco { height: 100%; min-height: 340px; }

/* La silueta de Puebla es decorativa: no debe competir con el texto. */
.silueta-puebla { display: block; width: 100%; max-width: 260px; height: auto; margin: 1.6rem 0 0; opacity: 0.9; }

/* Valores */
.valores { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.valores li {
    display: flex; gap: 1rem; align-items: flex-start;
    background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 1.1rem 1.2rem;
}
.valores .v-ico {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--gris-bg); font-size: 1.25rem;
}
.valores strong { display: block; margin-bottom: 0.2rem; }
.valores p { margin: 0; font-size: 0.9rem; color: var(--gris); line-height: 1.45; }

/* ---------- Fotos y galería ---------- */
.foto-marco { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,0.13); }
.foto-marco img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Banners de promoción: dos a lo ancho, cada uno completo (16:9, sin recortar: llevan texto
   impreso hasta la orilla). El zoom al pasar el mouse va sobre la imagen, no sobre la
   figura, para que la esquina redondeada no se rompa. */
.promos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.promos-titulo { grid-column: 1 / -1; margin-bottom: 0 !important; }
.promos figure {
    margin: 0; border-radius: 14px; overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12); background: #fff;
}
.promos img {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
    transition: transform .35s ease;
}
.promos figure:hover img { transform: scale(1.03); }
.promos-pedido { grid-column: 1 / -1; justify-self: end; margin-top: 0; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Aparición al hacer scroll ---------- */
/* El estado oculto SOLO existe bajo .js-aparicion, clase que pone el propio script en el
   <html> cuando ya está corriendo y va a poder revelar los elementos. Si el JS no carga, no
   existe la clase, .aparece no oculta nada y la página se ve completa: la animación nunca
   puede dejar el contenido invisible. */
.js-aparicion .aparece {
    opacity: 0; transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}
.js-aparicion .aparece.visible { opacity: 1; transform: none; }
.js-aparicion .aparece.retardo-1 { transition-delay: .10s; }
.js-aparicion .aparece.retardo-2 { transition-delay: .20s; }
.js-aparicion .aparece.retardo-3 { transition-delay: .30s; }

/* Categorías */
.categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.cat {
    background: #fff; border: 1px solid var(--borde); border-radius: 12px;
    padding: 1.2rem 1rem; text-align: center; font-weight: 600; font-size: 0.95rem;
}
.cat span { display: block; font-size: 1.9rem; margin-bottom: 0.5rem; }

/* Carrusel de marcas: franja blanca a todo lo ancho con flechas a los lados. Cada logo ocupa
   una casilla de ANCHO FIJO para que el script conozca el largo de la cinta sin esperar a que
   carguen las imágenes; el logo se ajusta adentro con object-fit. Sin JS (no existe la clase
   .activo) la ventana se puede deslizar a mano y las flechas no se muestran. */
.carrusel {
    position: relative; background: #fff; margin-top: 0.4rem;
    border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
}
.carrusel-ventana { overflow-x: auto; scrollbar-width: none; }
.carrusel-ventana::-webkit-scrollbar { display: none; }
.carrusel.activo .carrusel-ventana { overflow: hidden; touch-action: pan-y; cursor: grab; }
.carrusel.activo.arrastrando .carrusel-ventana { cursor: grabbing; }
.carrusel-cinta { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; will-change: transform; }
.carrusel-cinta li {
    flex: 0 0 auto; width: 190px; height: 112px; padding: 1.4rem 1.6rem;
    display: flex; align-items: center; justify-content: center;
}
.carrusel-cinta img {
    display: block; max-width: 100%; max-height: 100%; object-fit: contain;
    -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.carrusel-flecha {
    display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
    width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--borde);
    background: rgba(255,255,255,0.92); color: var(--texto); cursor: pointer;
    font-size: 1.7rem; line-height: 1; padding: 0 0 0.2rem;
    box-shadow: 0 3px 12px rgba(0,0,0,0.10); transition: background .15s;
}
.carrusel-flecha:hover { background: #eef3fd; }
.carrusel-flecha.izq { left: 0.8rem; }
.carrusel-flecha.der { right: 0.8rem; }
.carrusel.activo .carrusel-flecha { display: block; }

/* Mini directorio en el inicio */
.mini-sucursales { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.mini-estado {
    background: #fff; border: 1px solid var(--borde); border-left: 5px solid var(--azul);
    border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.2rem;
}
.mini-estado strong { font-size: 1.02rem; }
.mini-estado span { color: var(--gris); font-size: 0.87rem; }

/* ---------- Encabezado de páginas internas ---------- */
.encabezado-pagina {
    color: #fff;
    background: linear-gradient(135deg, #0f3f8f 0%, #12508f 55%, #1f8f5f 100%);
    padding: 2.6rem 0;
}
.encabezado-pagina h1 { font-size: 2rem; margin: 0 0 0.4rem; color: #fff; }
.encabezado-pagina p { margin: 0; opacity: 0.92; }

/* ---------- Directorio de sucursales ---------- */
.titulo-estado {
    display: flex; align-items: center; gap: 0.7rem;
    font-size: 1.3rem; margin: 2.2rem 0 1rem; padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--borde);
}
.titulo-estado:first-child { margin-top: 0; }
.titulo-estado span {
    background: var(--azul); color: #fff; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700; padding: 0.1rem 0.6rem;
}
.sucursales-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.suc-card {
    background: #fff; border: 1px solid var(--borde); border-radius: 12px;
    padding: 1.1rem 1.2rem; transition: box-shadow .15s, transform .15s;
}
.suc-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.07); transform: translateY(-2px); }
.suc-card h3 { margin: 0 0 0.5rem; font-size: 1.02rem; color: var(--azul); }
.suc-dir { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #414855; }
/* Marco del mapa incrustado. El iframe se estira al contenedor con position:absolute
   porque Google no respeta un alto en porcentaje si el padre no tiene alto propio; el
   padding-bottom es el truco clásico para fijarle proporción. */
.suc-mapa {
    position: relative; width: 100%; padding-bottom: 62%;
    margin-top: 0.9rem; border-radius: 10px; overflow: hidden;
    background: var(--gris-bg); border: 1px solid var(--borde);
}
.suc-mapa iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
/* Marca de agua discreta detrás del botón, para que el hueco se lea como "aquí va un
   mapa" y no como una imagen que no cargó. */
.suc-mapa::before {
    content: ''; position: absolute; inset: 0; opacity: 0.5;
    background:
        repeating-linear-gradient(90deg, transparent 0 26px, rgba(15,63,143,0.07) 26px 27px),
        repeating-linear-gradient(0deg, transparent 0 26px, rgba(15,63,143,0.07) 26px 27px);
}
.suc-mapa:has(iframe)::before { content: none; }
.suc-mapa-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: #fff; color: var(--azul); border: 1px solid var(--borde);
    border-radius: 999px; padding: 0.55rem 1.1rem; cursor: pointer;
    font-family: inherit; font-size: 0.88rem; font-weight: 600;
    box-shadow: 0 3px 12px rgba(0,0,0,0.10); transition: background .15s, box-shadow .15s;
}
.suc-mapa-btn:hover { background: #eef3fd; box-shadow: 0 5px 16px rgba(0,0,0,0.14); }
.suc-mapa.cargando { background: var(--gris-bg); }
.suc-maps {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin-top: 0.8rem; font-size: 0.88rem; font-weight: 600;
}
.suc-maps span { font-size: 0.95rem; }

/* ---------- Contacto ---------- */
.contacto-principal h2 { margin-top: 0; }
.btn-whatsapp {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: #25d366; color: #fff; border-radius: 10px;
    padding: 0.85rem 1.5rem; font-weight: 700; font-size: 1rem; margin-top: 0.6rem;
}
.btn-whatsapp:hover { background: #1eb856; color: #fff; text-decoration: none; }
.btn-whatsapp span { font-size: 1.2rem; }
.contacto-tel { margin-top: 1.2rem; color: var(--gris); font-size: 0.95rem; }
.contacto-tarjetas { display: flex; flex-direction: column; gap: 1rem; }
.info-card { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 1.2rem 1.3rem; }
.info-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.info-card p { margin: 0; font-size: 0.9rem; color: var(--gris); line-height: 1.5; }

/* ---------- CBB / código QR de WhatsApp ---------- */
.qr-card {
    background: #fff; border: 1px solid var(--borde); border-radius: 14px;
    padding: 1.4rem 1.4rem 1.2rem; margin-top: 1.6rem;
    max-width: 22rem; text-align: center;
    box-shadow: 0 2px 10px rgba(15, 63, 143, 0.06);
}
.qr-marco {
    background: #fff; border: 1px solid var(--borde); border-radius: 10px;
    padding: 0.7rem; width: 13.5rem; margin: 0 auto 0.9rem;
}
/* El SVG trae viewBox, así que se adapta al ancho del marco. */
.qr-marco svg { display: block; width: 100%; height: auto; }
.qr-titulo { display: block; font-size: 1rem; color: var(--texto); }
.qr-pie { margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--gris); line-height: 1.45; }
.qr-link { display: inline-block; margin-top: 0.7rem; font-size: 0.86rem; font-weight: 600; }

/* Etiqueta de sección sobre fondo claro (la .eyebrow del hero es para fondo oscuro). */
.eyebrow.oscuro {
    display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--azul); margin-bottom: 0.6rem;
}

/* ---------- CTA de tienda ---------- */
.cta-tienda {
    color: #fff; padding: 3.2rem 0;
    background: linear-gradient(135deg, #12508f 0%, #1a7a6d 60%, #1f8f5f 100%);
    text-align: center;
}
.cta-tienda h2 { font-size: 1.75rem; margin: 0 0 0.7rem; }
.cta-tienda p { max-width: 46rem; margin: 0 auto 1.6rem; opacity: 0.93; color: #fff; }
.cta-tienda .hero-cta { justify-content: center; }

/* ---------- Pie ---------- */
.sitio-footer { background: var(--texto); color: #cfd4de; padding: 2.6rem 1.6rem 1.4rem; }
.footer-cols {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem;
}
.footer-dir { margin: 0 0 0.7rem !important; font-size: 0.88rem; line-height: 1.55; }
.footer-redes { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.footer-redes a { margin: 0; }
.footer-cols h4 { color: #fff; margin: 0 0 0.7rem; font-size: 0.95rem; }
.footer-cols a { display: block; color: #cfd4de; font-size: 0.9rem; margin-bottom: 0.4rem; }
.footer-cols a:hover { color: #fff; }
.footer-cols p { font-size: 0.88rem; line-height: 1.55; margin: 0.9rem 0 0; color: #cfd4de; }
.footer-logo { height: 46px; width: auto; background: #fff; border-radius: 8px; padding: 0.3rem 0.5rem; }
.footer-legal {
    max-width: 1180px; margin: 1.8rem auto 0; padding-top: 1.1rem;
    border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; color: #99a1b0;
}

/* ---------- Responsivo ---------- */
@media (max-width: 940px) {
    .hero-wrap { grid-template-columns: 1fr; gap: 2rem; padding: 2.8rem 1.4rem; }
    .hero h1 { font-size: 1.85rem; }
    /* Apilado, la fachada no debe crecer a todo lo ancho ni comerse la pantalla. */
    .hero-figura { max-width: 420px; margin: 0 auto; }
    /* La foto de acompañamiento ya no va al lado del texto, así que se limita el alto
       para que no empuje el resto de la sección fuera de vista. */
    .foto-marco { max-height: 320px; }
    /* Los retratos siguen en pareja, pero más bajos. Se repone max-height porque un
       min-height le gana a un max-height y la regla de arriba no los alcanzaría. */
    .retratos .foto-marco { min-height: 0; max-height: 380px; }
    .dos-col { grid-template-columns: 1fr; gap: 2rem; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* Los banners traen texto chico impreso: por debajo de unos 330px de ancho cada uno ya no se
   lee, así que a partir de aquí van uno debajo del otro. */
@media (max-width: 760px) {
    .promos { grid-template-columns: 1fr; }
}

/* La barra superior quiebra ANTES que el resto y por eso lleva su propia consulta: entre la
   marca, los cuatro enlaces y el botón de la tienda necesita unos 725px para caber en un
   renglón, bastante más que el punto de 620px del resto del sitio. Por debajo se reparte en
   dos renglones (marca + botón arriba, enlaces abajo) en lugar de expulsar el botón solo. */
@media (max-width: 840px) {
    .sitio-topbar { padding: 0.6rem 1.2rem; gap: 0.55rem; }
    .sitio-topbar-fila {
        display: flex; align-items: center; justify-content: space-between;
        gap: 0.8rem; width: 100%;
    }
    .sitio-nav { width: 100%; justify-content: space-between; margin-left: 0; gap: 0.9rem; }
}

@media (max-width: 620px) {
    /* La barra deja de ser pegajosa en celular: entre la marca, los enlaces y el botón se
       comía como 140px de alto de forma permanente, y en una pantalla de 667px eso es una
       quinta parte. Arriba del todo y quieta cuesta lo mismo una sola vez. */
    .sitio-topbar { position: static; padding: 0.6rem 1rem; }
    .sitio-brand img { height: 38px; }
    /* En el renglón de la marca solo caben el logo y el nombre junto al botón de la tienda:
       "Centro de distribución" obligaba a partir el nombre en dos o a recortarlo a "Arero
       CE…". Se oculta en celular -sigue en el pie de página- y así la marca se lee entera.
       El nowrap evita que "Arero CEDIS" se parta; el recorte queda de red por si el ancho
       baja de 320px. */
    .sitio-brand-txt small { display: none; }
    .sitio-brand, .sitio-brand-txt { min-width: 0; }
    .sitio-brand-txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sitio-nav a { font-size: 0.86rem; }
    .btn-tienda { padding: 0.42rem 0.85rem; font-size: 0.88rem; }
    .hero-wrap { padding: 2.2rem 1.1rem; }
    .hero h1 { font-size: 1.6rem; }
    .hero p { font-size: 0.95rem; }
    .btn-cta { padding: 0.65rem 1.1rem; font-size: 0.9rem; }
    .seccion { padding: 2.4rem 0; }
    .seccion-wrap { padding: 0 1.1rem; }
    .seccion h2, .cta-tienda h2 { font-size: 1.4rem; }
    .encabezado-pagina h1 { font-size: 1.55rem; }
    .cifras-wrap strong { font-size: 1.45rem; }
    /* Los dos retratos, uno debajo del otro: en pareja quedaban de 135px de ancho, una tira
       en la que no se distingue a nadie. El recorte se sube un poco porque son fotos de
       cuerpo y a lo ancho lo que interesa conservar es la cara. */
    .retratos { grid-template-columns: 1fr; gap: 1.1rem; }
    .retratos .foto-marco { max-height: 330px; }
    .retratos .foto-marco img { object-position: center 25%; }
    .hero .hero-lema { font-size: 1rem; }
    .carrusel-cinta li { width: 150px; height: 92px; padding: 1.1rem 1.2rem; }
    .carrusel-flecha { width: 2.2rem; height: 2.2rem; font-size: 1.45rem; }
    .carrusel-flecha.izq { left: 0.4rem; }
    .carrusel-flecha.der { right: 0.4rem; }
    .footer-cols { grid-template-columns: 1fr; gap: 1.4rem; }
}