/* ==========================================================================
   Rediseno 2026 - PDF "PANIAGUA SITIO WEB FINAL" (septiembre 2026)

   Pag. 2, notas y observaciones:
     - Titulos y botones: Monument Extended, peso normal, 30 o 32.6 px.
     - Texto: Arial Unicode, peso normal, 17 px.
   El resto de medidas (menu, barra superior, hero, tarjetas) se tomo de las
   laminas del PDF, que estan compuestas a 1440 px de ancho.

   Esta hoja se carga despues de app.css (layouts/cssLinkRel.blade.php). Vive
   fuera del build de Mix a proposito: PurgeCSS no la toca y no obliga a
   recompilar app.js y custom.js para ajustar estilos.
   ========================================================================== */

:root {
    --pa-amarillo: #f4b941;
    --pa-negro: #000000;
    --pa-titulo: "Monument Extended", "Arial Black", Arial, sans-serif;
    --pa-texto: "Arial Unicode MS", Arial, "Helvetica Neue", sans-serif;
}

/* --------------------------------------------------------------------------
   Texto: Arial Unicode normal 17 px, negro sobre fondo claro (pags. 16 y 57)
   -------------------------------------------------------------------------- */
body {
    font-family: var(--pa-texto);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--pa-negro);
}

p,
li,
.form-input,
.form-label,
select,
textarea,
input {
    font-family: var(--pa-texto);
    font-size: 17px;
    font-weight: 400;
}

/* Clases de la plantilla que forzaban 24 px o gris sobre el texto. */
.text-xl { font-size: 17px !important; }
.font-weight-medium { font-weight: 400; }
.text-justify { text-align: left !important; }

/* --------------------------------------------------------------------------
   Titulos: Monument Extended normal, en mayusculas como en todas las laminas
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 {
    font-family: var(--pa-titulo);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.25;
    color: var(--pa-negro);
}

.context-dark h1, .context-dark h2, .context-dark h3,
.context-dark h4, .context-dark h5, .context-dark h6 {
    color: #ffffff;
}

h1, .heading-1, h2, .heading-2 { font-size: 32.6px; }
h3, .heading-3 { font-size: 30px; }
h4, .heading-4 { font-size: 20px; }
h5, .heading-5 { font-size: 18px; }
h6, .heading-6 { font-size: 17px; }

@media (max-width: 767px) {
    h1, .heading-1, h2, .heading-2 { font-size: 24px; }
    h3, .heading-3 { font-size: 22px; }
    h4, .heading-4 { font-size: 17px; }
}

/* Banda negra bajo el hero con el titulo de la pagina (pags. 4, 20, 46...):
   75 px de alto; 17.6 px de letra, 14.6 px cuando el texto es largo. */
.title-h1 {
    font-size: 17.6px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em;
    margin: 0;
}

.title-h1.title-h1-largo { font-size: 14.6px !important; }

section.bg-image-1:has(> .container .title-h1) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 75px;
    display: flex;
    align-items: center;
}

section.bg-image-1:has(> .container .title-h1) > .container { width: 100%; }

@media (max-width: 767px) {
    .title-h1 { font-size: 15px !important; }
}

/* --------------------------------------------------------------------------
   Botones: Monument normal en mayusculas
   -------------------------------------------------------------------------- */
.button,
.btn-primary,
.link-secondary {
    font-family: var(--pa-titulo);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.button-lg { font-size: 20px; }

/* Boton COTIZAR del formulario (pag. 123): 21.7 px en la lamina. */
.p-dinamic-contact button.button {
    font-size: 22px;
}

/* --------------------------------------------------------------------------
   Barra superior y menu (pags. 4 y 123)
   -------------------------------------------------------------------------- */
.rd-navbar-aside .link-1 {
    font-family: var(--pa-titulo);
    font-weight: 400;
    text-transform: uppercase;
    color: #ffffff !important;
    font-size: 10px;
    letter-spacing: .03em;
}

.rd-navbar-aside .link-1.heading-4 {
    font-size: 14px;
    letter-spacing: .05em;
}

.rd-navbar-aside .link-1:hover { color: var(--pa-amarillo) !important; }

.rd-navbar-static .rd-nav-link,
.rd-navbar-fixed .rd-nav-link {
    font-family: var(--pa-titulo);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: .01em;
    color: var(--pa-negro);
}

.rd-navbar-static .rd-nav-item.active > .rd-nav-link { color: #ffffff; }

/* Navbar de 90 px como en la lamina (antes 106 px). */
.rd-navbar-static .rd-nav-link { padding-top: 36px; padding-bottom: 36px; }

@media (min-width: 1200px) {
    .rd-navbar-static .rd-nav-link { padding-left: 12px; padding-right: 12px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .rd-navbar-static .rd-nav-link { font-size: 12px; padding-left: 8px; padding-right: 8px; }
}

.rd-navbar-static .rd-navbar-dropdown { background: #ffffff; }

.rd-dropdown-link {
    font-family: var(--pa-titulo) !important;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: .02em;
    color: var(--pa-negro) !important;
}

.rd-dropdown-link:hover { color: var(--pa-amarillo) !important; }

/* Escritorio (992 px o mas): la plantilla oculta el menu (.rd-navbar
   {display: none}) hasta que script.js lo arma, al final de la carga. Al
   aparecer empujaba toda la pagina 146 px hacia abajo: CLS de 0.10 en todas
   las paginas, el "necesita mejorar" de Search Console en computadora.
   Mientras se arma se reserva su altura exacta (franja oscura de 56.19 px y
   amarilla de 90 px, 86.39 px entre 992 y 1199 px) con el contenido oculto;
   al armarse ya no se mueve nada. Solo aplica antes de rd-navbar-static. */
@media (min-width: 992px) {
    .rd-navbar:not(.rd-navbar-static):not(.rd-navbar-fixed):not(.rd-navbar--is-clone) {
        display: block;
        height: 142.578125px;
        overflow: hidden;
        background: linear-gradient(transparent 56.1875px, var(--pa-amarillo) 56.1875px),
                    url(/img/images/dark-pattern.jpg) repeat;
    }

    .rd-navbar:not(.rd-navbar-static):not(.rd-navbar-fixed):not(.rd-navbar--is-clone) > * {
        visibility: hidden;
    }
}

@media (min-width: 1200px) {
    .rd-navbar:not(.rd-navbar-static):not(.rd-navbar-fixed):not(.rd-navbar--is-clone) {
        height: 146.1875px;
    }
}

/* Logotipo con isotipo /// (pag. 4): 130 px de ancho en el navbar. */
.rd-navbar-static .navbar-logo-2026 { width: 130px !important; height: auto; }
/* Celular: 84 px (39 px de alto) para dejar ~8 px arriba y abajo en la barra de 56 px;
   con 104 px casi tocaba los bordes (comentario del cliente, oct 2026). */
.rd-navbar-fixed .navbar-logo-2026 { width: 84px !important; height: auto; }

/* Menu de celular y tableta (comentarios del cliente, oct 2026): el logo va
   centrado en la barra y el panel de secciones es blanco, como el desplegable
   de escritorio, en lugar de amarillo. */
.rd-navbar-fixed .rd-navbar-brand {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 0;
    line-height: 0;
    transform: translate(-50%, -50%);
}

.rd-navbar-fixed .rd-navbar-nav-wrap {
    background-color: #ffffff;
    box-shadow: 4px 0 18px rgba(0, 0, 0, .18);
}

.rd-navbar-fixed .rd-navbar-nav-wrap::-webkit-scrollbar-track { background: #ffffff; }
.rd-navbar-fixed .rd-navbar-nav-wrap::-webkit-scrollbar-thumb { background: #d6d6d6; }

.rd-navbar-fixed .rd-navbar-dropdown > li > a:hover,
.rd-navbar-fixed .rd-navbar-dropdown > li.active > a,
.rd-navbar-fixed .rd-navbar-dropdown > li.focus > a {
    background: var(--pa-amarillo);
    color: var(--pa-negro) !important;
}

/* --------------------------------------------------------------------------
   Hero (pag. 4): foto a todo lo ancho, bloque a la derecha alineado a la
   izquierda, sin franja diagonal. El oscurecido viene en el archivo.
   -------------------------------------------------------------------------- */
.hero-2026 {
    position: relative;
    height: clamp(420px, 41vw, 700px);
    background: #000000;
    overflow: hidden;
}

.hero-2026 .swiper-wrapper,
.hero-2026 .swiper-slide {
    height: 100%;
}

.hero-2026 .swiper-slide {
    background-image: var(--hero-foto);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-2026 .swiper-slide:before { content: none !important; }

.hero-2026 .swiper-slide-caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0;
    text-align: left;
}

.hero-2026-bloque {
    position: absolute;
    left: min(69.7%, calc(100% - 430px));
    width: 380px;
    /* -38 en vez de -24: la placa sube 14 px y el titulo se queda donde estaba. */
    margin-top: -38px;
}

.hero-2026-placa {
    display: block;
    width: 144px;
    height: auto;
    /* Comentario del cliente (oct 2026): la placa iba muy pegada al titulo. */
    margin: 0 0 18px -4px;
}

.hero-2026-titulo {
    font-family: var(--pa-titulo);
    font-weight: 400;
    font-size: 32.6px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
}

.hero-2026-titulo-largo { font-size: 27.6px; }

/* Pag. 43: con titulos como "Venta de Material" el bloque arranca en x=947. */
.hero-2026-bloque-ancho { left: min(65.8%, calc(100% - 493px)); }

.hero-2026-titulo-frase {
    font-size: 24px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Portadas del blog: no traen el oscurecido integrado. */
.hero-2026-oscuro .swiper-slide:after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .42);
    z-index: 0;
}

.hero-2026-oscuro .swiper-slide-caption { z-index: 1; }

.hero-2026-texto {
    margin: 4px 0 0;
    font-size: 17px;
    line-height: 1.38;
    color: #ffffff;
}

.hero-2026-boton {
    display: inline-block;
    margin-top: 18px;
    padding: 12px 13px 11px;
    background: var(--pa-amarillo);
    font-family: var(--pa-titulo);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #000000 !important;
    transition: background-color .25s ease;
}

.hero-2026-boton:hover { background: #ffffff; }

/* Flechas: cuadros blancos de 32 px con chevron negro. */
.hero-2026 .hero-2026-flecha {
    display: block;
    width: 32px;
    height: 32px;
    margin-top: 0;
    background: #ffffff;
    color: #000000;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.hero-2026 .hero-2026-flecha:before { content: none !important; }

.hero-2026 .hero-2026-flecha:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
}

.hero-2026 .swiper-button-prev { left: 0; }
.hero-2026 .swiper-button-next { right: 11px; }
.hero-2026 .swiper-button-prev:after { transform: translate(-30%, -50%) rotate(-135deg); }
.hero-2026 .swiper-button-next:after { transform: translate(-70%, -50%) rotate(45deg); }
.hero-2026 .hero-2026-flecha:hover { background: var(--pa-amarillo); }

@media (max-width: 991px) {
    .hero-2026-bloque { left: auto; right: 48px; }
    .hero-2026-bloque-ancho { right: 90px; }
}

/* Fotos del sitio anterior (CORRECIÓN FINAL): en tableta el recorte centrado
   deja los letreros de la foto detras del texto. Se recorre a la derecha,
   donde esta la extension oscura, y el bloque lleva fondo. */
@media (min-width: 768px) and (max-width: 991px) {
    /* Hasta 991 px el menu es fijo (56 px) y tapaba la placa, como en celular. */
    .hero-2026 { margin-top: 56px; }
    .hero-2026 .hero-2026-foto-izquierda { background-position: right center !important; }
    .hero-2026-foto-izquierda .hero-2026-bloque {
        padding: 18px 20px 20px;
        background: rgba(0, 0, 0, .55);
    }
}

@media (max-width: 767px) {
    .hero-2026 { height: 540px; }
    .hero-2026 .swiper-slide { background-image: var(--hero-foto-movil); }
    .hero-2026 .swiper-slide-caption { align-items: flex-end; }
    .hero-2026-bloque {
        position: relative;
        left: auto;
        right: auto;
        width: auto;
        margin: 0 20px 48px;
        padding: 18px 20px 20px;
        background: rgba(0, 0, 0, .45);
    }
    .hero-2026-placa { width: 104px; margin-bottom: 12px; }
    .hero-2026-titulo { font-size: 26px; white-space: normal; }
    .hero-2026-titulo-largo { font-size: 22px; }
    .hero-2026-titulo-frase { font-size: 19px; }
    .hero-2026 .hero-2026-flecha { top: auto; bottom: 12px; transform: none; }
    .hero-2026 .swiper-button-prev { left: 20px; }
    .hero-2026 .swiper-button-next { right: 20px; }
    .hero-2026-bloque { margin-bottom: 60px; }
}

/* --------------------------------------------------------------------------
   Ancho de contenido: las laminas usan una columna de ~1140 px (pags. 8, 9,
   57); app.css forzaba 1400 px desde 1200 px de ancho.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .container { max-width: 1170px !important; }
    #servicios-home .container-fluid-snug { max-width: 1170px; }
}

/* --------------------------------------------------------------------------
   Rejilla de productos (pags. 8, 52 y Otros productos): etiqueta en
   mayusculas, Monument normal de 14.7 px como en la lamina.
   -------------------------------------------------------------------------- */
.box-2 .product-body h4 {
    font-size: 14.7px !important;
    letter-spacing: 0;
}

/* Blog: los titulos de las notas son frases largas; en tarjetas y en la
   nota van en mayusculas pero con tamano y recorte propios (seccion Blog). */
.nota-contenido h1, .nota-contenido h4, .nota-contenido h5, .nota-contenido h6 {
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Servicios del inicio (pag. 9) y tarjetas de apartados
   -------------------------------------------------------------------------- */
#servicios-home h4 { font-size: 18px; margin-top: 18px; }
#servicios-home .link-secondary { font-size: 15px; }
#servicios-home .thumb-wrapper { padding-left: 40px; padding-right: 40px; }

.trusted-logos .trusted-logos-title {
    font-size: 23px;
    font-weight: 400;
    text-transform: uppercase;
}

/* Produccion garantizada (pags. 10, 16 y 44). */
#produccion-garantizada .box-nina-text h4 {
    font-size: 19px;
    letter-spacing: .02em;
}

/* Ficha de producto (pag. 57); las cifras se definen en productoDetalle. */
#producto-detalle .producto-lead,
#producto-detalle .producto-nota,
#producto-detalle .producto-card p { font-size: 17px; color: var(--pa-negro) !important; }
#producto-detalle .producto-lead { margin-top: 12px; }
#producto-detalle .producto-nota { margin-top: 0; }

/* Tarjetas de caracteristicas: tres columnas de ~360 px (pag. 58). */
#producto-detalle .producto-grid { max-width: 1110px; margin-left: auto; margin-right: auto; }
#producto-detalle .producto-card h4 { font-size: 15.3px; margin-top: 20px; }
#producto-detalle .producto-card p { font-size: 15px !important; line-height: 1.45; }

/* Los subtitulos de seccion van a 23.3 px en la lamina. */
#producto-detalle .producto-subtitulo { font-size: 23.3px; margin-top: 60px; margin-bottom: 26px; }


/* Servicios: titulos de apartados en la seccion negra (pags. 31, 38 y 44). */
.servicio-detalle .servicio-item h4 { font-size: 20px !important; }

/* En tableta las tres columnas miden ~190 px y "CAPACITACIÓN" no cabe a 20 px. */
@media (min-width: 768px) and (max-width: 991px) {
    .servicio-detalle .servicio-item h4 { font-size: 17px !important; }
}
.servicio-detalle .servicio-intro { font-size: 17px; }

/* Historia (pag. 16): el titulo va en una sola linea sobre el texto de ~940 px. */
#historia .text-center[style*="max-width: 900px"] { max-width: 960px !important; }
#historia h1.text-uppercase,
#historia h2.text-uppercase { font-size: 23px !important; white-space: nowrap; }
@media (max-width: 991px) {
    #historia h1.text-uppercase,
    #historia h2.text-uppercase { font-size: 20px !important; white-space: normal; }
}

/* Historia (pag. 16): fotos del carrusel con el mismo recorte. */
#historia .owl-carousel img {
    width: 100%;
    aspect-ratio: 1.72;
    object-fit: cover;
}

/* Contacto (pag. 123): la placa arranca ~60 px debajo del menu. */
.p-dinamic-contact { padding-top: 60px !important; padding-bottom: 80px !important; }
.p-dinamic-contact h1,
.p-dinamic-contact h2 { margin-bottom: 10px; }
.p-dinamic-contact .contacto-matriz,
.p-dinamic-contact .contacto-horario { font-size: 17px; }
.p-dinamic-contact .contacto-horario { color: var(--pa-negro); }

/* Pie de pagina: el texto de derechos seguia en 15 px gris. */
p.rights { font-size: 15px; }

/* --------------------------------------------------------------------------
   Blog: tarjetas con la foto completa arriba y el texto debajo. Titulo y
   resumen se recortan a tres lineas para que todas midan igual; 12 notas por
   pagina con paginacion.
   -------------------------------------------------------------------------- */
.blog-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 24px;
    margin-bottom: 34px;
}

.blog-buscador {
    display: flex;
    width: 100%;
    max-width: 420px;
}

.blog-buscador input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #d9d9d9;
    border-right: 0;
    border-radius: 0;
    background: #ffffff;
    font-size: 16px;
    color: #000000;
    -webkit-appearance: none;
}

.blog-buscador input:focus {
    outline: none;
    border-color: var(--pa-amarillo);
}

.blog-buscador button {
    width: 50px;
    height: 46px;
    border: 0;
    background: #000000;
    color: #ffffff;
    font-size: 17px;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}

.blog-buscador button:hover,
.blog-buscador button:focus-visible {
    background: var(--pa-amarillo);
    color: #000000;
    outline: none;
}

.blog-resultado {
    order: -1;
    margin: 0 auto 0 0;
    font-size: 15px;
}

.blog-resultado a { text-decoration: underline; }

.blog-tarjeta {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: box-shadow .25s ease, transform .25s ease;
}

.blog-tarjeta:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
}

.blog-tarjeta-foto {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #e9e9e9;
}

.blog-tarjeta-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.blog-tarjeta:hover .blog-tarjeta-foto img { transform: scale(1.04); }

.blog-tarjeta-cuerpo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 20px 22px 24px;
    border-top: 3px solid var(--pa-amarillo);
}

.blog-tarjeta-meta {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.4;
    color: #8a8a8a;
}

.blog-tarjeta-titulo {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: .02em;
    min-height: calc(1.4em * 3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-tarjeta-titulo a { color: #000000; }
.blog-tarjeta-titulo a:hover { color: #b98012; }

.blog-tarjeta-resumen {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.55;
    color: #444444;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-tarjeta-enlace {
    align-self: flex-start;
    margin-top: auto;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--pa-amarillo);
    font-family: var(--pa-titulo);
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #000000;
}

.blog-tarjeta-enlace:after { content: " \203A"; color: var(--pa-amarillo); }
.blog-tarjeta-enlace:hover { color: #b98012; }

.blog-vacio h2 { font-size: 24px; margin-bottom: 12px; }
.blog-vacio p { margin-bottom: 24px; }

/* Paginacion */
.paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 48px;
}

.paginacion-numeros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.paginacion-numero,
.paginacion-puntos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 8px;
    font-family: var(--pa-titulo);
    font-size: 14px;
    color: #000000;
    background: #ffffff;
}

a.paginacion-numero:hover { background: #000000; color: #ffffff; }
.paginacion-numero.activa { background: var(--pa-amarillo); }
.paginacion-puntos { background: transparent; }

.paginacion-flecha {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 16px;
    font-family: var(--pa-titulo);
    font-size: 13px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #ffffff;
    background: #000000;
}

a.paginacion-flecha:hover { background: var(--pa-amarillo); color: #000000; }
.paginacion-flecha.deshabilitada { opacity: .3; }

@media (max-width: 575px) {
    .paginacion-numeros { order: -1; width: 100%; }
}

/* Nota del blog */
.blog-portada {
    height: clamp(260px, 34vw, 480px);
    background: #000000 var(--portada) center / cover no-repeat;
}

@media (max-width: 767px) {
    .blog-portada { background-image: var(--portada-movil); }
}

#blog-nota .nota {
    max-width: 820px;
    margin: 0 auto;
}

.nota-migas {
    margin: 0 0 18px;
    font-size: 14px;
    color: #8a8a8a;
}

.nota-migas a { color: #000000; text-decoration: underline; }
.nota-migas span { margin-left: 4px; }

.nota-titulo {
    margin: 0 0 14px;
    font-size: 30px;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.nota-meta {
    margin: 0 0 32px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 14px;
    color: #8a8a8a;
}

.nota-categoria {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 9px;
    background: var(--pa-amarillo);
    font-size: 13px;
    color: #000000;
}

.nota-contenido {
    font-size: 18px;
    line-height: 1.75;
    color: #222222;
}

.nota-contenido p { margin: 0 0 1.1em; }

.nota-contenido h2 {
    margin: 1.8em 0 .6em;
    font-size: 20px;
    line-height: 1.35;
}

.nota-contenido h3 {
    margin: 1.5em 0 .5em;
    font-size: 18px;
    line-height: 1.35;
}

.nota-contenido ul {
    margin: 0 0 1.2em;
    padding: 0;
    list-style: none;
}

.nota-contenido ul li {
    position: relative;
    margin-bottom: .6em;
    padding-left: 22px;
}

.nota-contenido ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 9px;
    height: 9px;
    background: var(--pa-amarillo);
}

.nota-contenido ol { margin-bottom: 1.2em; padding-left: 1.4em; list-style: decimal; }
.nota-contenido ol li { margin-bottom: .5em; }
.nota-contenido strong { color: #000000; }
.nota-contenido img { max-width: 100%; height: auto; margin: 1.2em 0; }
.nota-contenido a { text-decoration: underline; }

.nota-contenido blockquote {
    margin: 1.4em 0;
    padding-left: 18px;
    border-left: 3px solid var(--pa-amarillo);
    font-style: italic;
    color: #555555;
}

.nota-etiquetas { margin: 26px 0 0; }

.nota-etiquetas a {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 3px 10px;
    background: #f2f2f2;
    font-size: 13px;
    color: #000000;
}

.nota-compartir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid #e6e6e6;
}

.nota-compartir-titulo {
    margin-right: 6px;
    font-family: var(--pa-titulo);
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.nota-compartir a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #000000;
    font-size: 17px;
    color: #ffffff;
    transition: background-color .25s ease, color .25s ease;
}

.nota-compartir a:hover { background: var(--pa-amarillo); color: #000000; }

.nota-relacionadas {
    margin-top: 70px;
    padding-top: 56px;
    border-top: 1px solid #e6e6e6;
}

.nota-relacionadas h2 { margin-bottom: 30px; font-size: 24px; }
.nota-volver { margin: 40px 0 0; }

@media (max-width: 767px) {
    .nota-titulo { font-size: 19px; }
    .nota-contenido { font-size: 17px; }
    .nota-contenido h2 { font-size: 17px; }
    .nota-relacionadas h2 { font-size: 20px; }
}

/* Iconos de Font Awesome 4.7 que PurgeCSS quito de app.css porque antes no se
   usaban; la fuente si viene cargada. */
.fa-search:before { content: "\f002"; }
.fa-linkedin:before { content: "\f0e1"; }

/* --------------------------------------------------------------------------
   Carga y cambio de pagina (comentarios del cliente, oct 2026)
   -------------------------------------------------------------------------- */
/* Transicion suave entre paginas del sitio (Chrome, Edge y Safari 18+). */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: .25s; }
}

/* Las animaciones de entrada (WOW) duraban 1 s y algunas esperaban hasta
   0.6 s: el contenido se sentia lento en aparecer. */
.wow {
    animation-duration: .45s !important;
    animation-delay: 0s !important;
}

/* Mientras llega la foto del hero, fondo oscuro para que la placa y el texto
   blancos se lean desde el primer momento. */
.hero-2026 .swiper-slide { background-color: #1c1c1c; }
/* --------------------------------------------------------------------------
   Hero en celular (comentarios del cliente, oct 2026): la caja de texto
   tapaba dos tercios de la foto y el recorte vertical dejaba fuera el
   producto. Ahora la foto (recorte 4:3) va arriba, completa y sin nada
   encima, y el texto debajo sobre fondo oscuro. Las portadas del blog
   (.hero-2026-oscuro) siguen con el texto sobre la foto.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* La barra del menu (56 px) es fija y tapaba la parte de arriba de la foto. */
    .hero-2026-apilado { height: auto; margin-top: 56px; }

    .hero-2026-apilado .swiper-slide {
        height: auto;
        background-image: none;
        background-color: #151515;
    }

    .hero-2026-apilado .swiper-slide::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        aspect-ratio: 4 / 3;
        background: var(--hero-foto-movil) center / cover no-repeat;
    }

    .hero-2026-apilado .swiper-slide-caption {
        position: relative;
        inset: auto;
        display: block;
        padding-top: 75%; /* alto de la foto 4:3 */
    }

    .hero-2026-apilado .hero-2026-bloque {
        position: static;
        width: auto;
        margin: 0;
        padding: 20px 20px 28px;
        background: none;
    }

    /* Flechas en las esquinas de abajo de la foto. */
    .hero-2026-apilado .hero-2026-flecha {
        top: calc(75vw - 44px);
        bottom: auto;
    }
}

/* Fotos de Historia (/nosotros y /historia): Owl Carousel oculta el carrusel
   (display: none) hasta que custom.js lo arma, al final de la carga, y al
   aparecer bajaba el texto de abajo unos 260 px en celular (CLS de 0.11).
   Mientras tanto se muestran las fotos que Owl deja a la vista (la primera en
   celular, tres con 10 px de separacion desde 600 px, alineadas arriba) y se
   reserva el renglon de puntos (27 px, hasta 999 px). Las demas esperan
   ocultas para no quitarle ancho de banda a la portada (LCP). */
.owl-carousel-multi:not(.owl-loaded) {
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    padding-bottom: 27px;
}

.owl-carousel-multi:not(.owl-loaded) > * {
    flex: 0 0 100%;
    min-width: 0;
    height: auto;
    margin: 0 !important;
}

.owl-carousel-multi:not(.owl-loaded) > :nth-child(n+2) { display: none; }

@media (min-width: 600px) {
    .owl-carousel-multi:not(.owl-loaded) > * {
        flex-basis: calc((100% - 20px) / 3);
        margin-right: 10px !important;
    }

    .owl-carousel-multi:not(.owl-loaded) > :nth-child(-n+3) { display: block; }
}

@media (min-width: 1000px) {
    .owl-carousel-multi:not(.owl-loaded) { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Pie de pagina 2026. Rejilla propia (la de Bootstrap esta purgada en
   app.css y col-lg-2 no existe): cuatro columnas en escritorio, dos en
   tableta y una en celular. Fondo negro, filo amarillo arriba, titulos en
   Monument Extended con una linea amarilla y texto en 17 px.
   -------------------------------------------------------------------------- */
.pie-2026 {
    background: #151515;
    border-top: 6px solid var(--pa-amarillo, #f4b941);
    color: #c9c9c9;
    padding: 64px 0 24px;
}

.pie-2026 a { color: #c9c9c9; text-decoration: none; transition: color .2s; }
.pie-2026 a:hover { color: var(--pa-amarillo, #f4b941); }

.pie-2026-columnas {
    display: grid;
    grid-template-columns: 1.15fr 1.1fr .75fr 1.35fr;
    column-gap: 48px;
    row-gap: 40px;
    align-items: start;
}

.pie-2026-logo { display: block; width: 200px; margin: 0 0 22px; }
.pie-2026-logo img { width: 100%; height: auto; display: block; }

.pie-2026-lema {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 24px;
    max-width: 320px;
}

.pie-2026-titulo {
    font-family: "Monument Extended", "Arial Black", Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 20px;
    padding-bottom: 12px;
    position: relative;
}

.pie-2026-titulo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    background: var(--pa-amarillo, #f4b941);
}

.pie-2026-titulo-segundo { margin-top: 34px; }

.pie-2026-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 17px;
    line-height: 1.45;
}

.pie-2026-lista li + li { margin-top: 10px; }

.pie-2026-datos,
.pie-2026-horario {
    font-size: 17px;
    line-height: 1.6;
    font-style: normal;
    margin: 0 0 16px;
}

.pie-2026-datos strong { color: #ffffff; font-weight: 700; }

.pie-2026-redes { display: flex; gap: 14px; }
.pie-2026-redes a { color: #ffffff; line-height: 0; }
.pie-2026-redes a:hover { color: var(--pa-amarillo, #f4b941); }
.pie-2026-redes .red-social-svg { width: 32px; height: 32px; }
/* El glifo de TikTok es blanco sobre circulo de currentColor: en el pie el circulo es blanco. */
.pie-2026-redes .red-social-glifo { fill: #151515; }

.pie-2026-derechos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 56px;
    padding-top: 20px;
    border-top: 1px solid #2e2e2e;
}

.pie-2026 p.rights { margin: 0; font-size: 14px; color: #8d8d8d; }
.pie-2026 p.rights a { color: #c9c9c9; }

@media (max-width: 991px) {
    .pie-2026-columnas { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

/* Celular: una columna y todo centrado (logo, lema, redes, titulos con su
   linea amarilla, listas y datos de contacto). */
@media (max-width: 575px) {
    .pie-2026 { padding-top: 44px; text-align: center; }
    .pie-2026-columnas { grid-template-columns: 1fr; row-gap: 36px; justify-items: center; }
    .pie-2026-col { width: 100%; }
    .pie-2026-logo { width: 170px; margin: 0 auto 18px; }
    .pie-2026-lema { margin: 0 auto 20px; }
    .pie-2026-redes { justify-content: center; gap: 18px; }
    .pie-2026-titulo { padding-bottom: 14px; }
    .pie-2026-titulo::after { left: 50%; transform: translateX(-50%); }
    .pie-2026-titulo-segundo { margin-top: 36px; }
    .pie-2026-derechos { flex-direction: column; align-items: center; text-align: center; margin-top: 44px; gap: 6px; }
}