@charset "UTF-8";
/* =============================================================================
   EL PORVENIR INDUSTRIAL — hoja del sitio público
   -----------------------------------------------------------------------------
   La usan MasterSitio.master y las páginas que cuelgan de ella. NO la toca el
   administrador (/Pages), que tiene su propio mundo en assets2/.

   POR QUE UNA HOJA NUEVA Y NO SE PARCHEO LA VIEJA

   El sitio traía Bootstrap 3, jQuery 1.11, animate.css, owl.carousel, wow.js,
   slitslider, parallax, mixitup y ocho hojas más: ~600 KB de dependencias de
   2014 para un sitio de siete pantallas. Todo eso se sustituye por este archivo
   más un JS de ~4 KB. Menos peso, y las transiciones las hace el navegador con
   compositor en vez de temporizadores de jQuery.

   LOS COLORES NO SE INVENTARON

   Salieron del CSS anterior, contándolos: #e87113 aparecía 33 veces (el naranja
   de la marca, el del logo EPI) y #2f383d / #2b2c30 son los grises oscuros de
   la plantilla. Se respetan. Lo que cambia es cómo se usan, no cuáles son.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS
   Todo lo que se repite vive aquí. Si mañana cambia el naranja, se cambia en
   un renglón.

   CLARO Y OSCURO

   El tema tiene TRES estados, no dos:

     data-tema="light"   el visitante escogió claro
     data-tema="dark"    el visitante escogió oscuro
     sin atributo        no ha escogido: manda el sistema operativo

   Por eso hay tres bloques más abajo. El de @media va con
   :root:not([data-tema="light"]) para que la elección manual del visitante le
   gane siempre a la preferencia del sistema, en los dos sentidos.

   Los COLORES DE MARCA no cambian entre temas. El naranja #e87113 es el del
   logo: si se aclarara en oscuro dejaría de ser el color de la empresa. Lo que
   cambia son fondos, textos y bordes.

   Dos tokens que parecen redundantes y no lo son:
     --epi-titulo-color   el color del TEXTO de h1..h4
     --epi-honda          el FONDO de las franjas, el pie y el hero
   Antes los dos salían de --epi-tinta. En claro coinciden, pero en oscuro el
   título tiene que ser casi blanco y la franja casi negra: si comparten token,
   uno de los dos queda ilegible.
   ------------------------------------------------------------------------- */
:root {
    /* Marca */
    --epi-naranja:        #e87113;
    --epi-naranja-vivo:   #ff8420;
    --epi-naranja-hondo:  #b8560a;

    /* Grises: del casi negro al blanco */
    --epi-tinta:          #1a1e21;
    --epi-carbon:         #22282c;
    --epi-grafito:        #2f383d;
    --epi-acero:          #4e595f;
    --epi-niebla:         #9aa8b3;
    --epi-humo:           #e8ebee;
    --epi-papel:          #f5f6f8;
    --epi-blanco:         #ffffff;

    /* Superficies */
    --epi-fondo:          var(--epi-blanco);
    --epi-fondo-alt:      var(--epi-papel);
    --epi-fondo-hondo:    var(--epi-carbon);
    --epi-borde:          #dfe3e8;
    --epi-tarjeta:        var(--epi-blanco);

    /* Las zonas oscuras del sitio (hero, franjas, barra, pie). En claro son
       casi negras; en oscuro se van todavía más abajo para despegarse del
       fondo de la página, que ya es oscuro. */
    --epi-honda:          #1a1e21;
    --epi-honda-2:        #22282c;

    /* Texto */
    --epi-titulo-color:   #1a1e21;
    --epi-texto:          #232a2f;
    --epi-texto-suave:    #5d6a72;
    --epi-texto-claro:    rgba(255,255,255,.72);

    /* Fondo del botón "oscuro". Se separa porque en tema oscuro un botón negro
       sobre fondo negro no se ve. */
    --epi-btn-hondo:      #1a1e21;

    /* Cuánto se apaga una foto. En oscuro una imagen a pleno brillo deslumbra
       al lado del resto de la interfaz. */
    --epi-foto-brillo:    1;

    /* Medidas */
    --epi-ancho:          1200px;
    --epi-ancho-texto:    68ch;
    --epi-radio:          4px;
    --epi-radio-g:        10px;
    --epi-nav-alto:       76px;

    /* Sombras: bajas y frías, nada de cajas flotando */
    --epi-sombra-1:  0 1px 2px rgba(26,30,33,.06), 0 2px 8px rgba(26,30,33,.05);
    --epi-sombra-2:  0 2px 6px rgba(26,30,33,.08), 0 12px 28px rgba(26,30,33,.10);
    --epi-sombra-3:  0 8px 20px rgba(26,30,33,.12), 0 30px 60px rgba(26,30,33,.16);

    /* Curvas. La primera es la de casi todo: sale rápido y frena suave, que es
       como se siente "caro". La de rebote sólo para cosas que aparecen. */
    --epi-ease:      cubic-bezier(.22,.61,.36,1);
    --epi-ease-out:  cubic-bezier(.16,1,.3,1);
    --epi-rapido:    .18s;
    --epi-medio:     .35s;
    --epi-lento:     .7s;

    /* Tipografía */
    --epi-display: 'Oswald', 'Archivo Narrow', 'Segoe UI Semibold', 'Franklin Gothic Medium', Impact, sans-serif;
    --epi-cuerpo:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Los mismos tokens, en oscuro ----
   Se declaran DOS veces a propósito, y no es copia y pega por flojera:

     @media (prefers-color-scheme: dark) + :not([data-tema="light"])
         para quien nunca tocó el botón y trae el sistema en oscuro,
         pero respetando a quien SÍ escogió claro.

     [data-tema="dark"]
         para quien apretó el botón. Al ser un atributo, le gana al @media,
         así que también funciona al revés: sistema en claro y sitio en oscuro.

   Si sólo existiera el @media, el botón no podría sacar del oscuro a nadie. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) {
        --epi-fondo:        #14181b;
        --epi-fondo-alt:    #191e21;
        --epi-fondo-hondo:  #0f1315;
        --epi-tarjeta:      #1b2124;
        --epi-borde:        #2b3238;
        --epi-honda:        #0f1315;
        --epi-honda-2:      #171c1f;
        --epi-titulo-color: #eef2f4;
        --epi-texto:        #d3dade;
        --epi-texto-suave:  #97a4ac;
        --epi-btn-hondo:    #3a444a;
        --epi-foto-brillo:  .88;
        --epi-sombra-1:  0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
        --epi-sombra-2:  0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
        --epi-sombra-3:  0 8px 20px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.55);
    }
}

:root[data-tema="dark"] {
    --epi-fondo:        #14181b;
    --epi-fondo-alt:    #191e21;
    --epi-fondo-hondo:  #0f1315;
    --epi-tarjeta:      #1b2124;
    --epi-borde:        #2b3238;
    --epi-honda:        #0f1315;
    --epi-honda-2:      #171c1f;
    --epi-titulo-color: #eef2f4;
    --epi-texto:        #d3dade;
    --epi-texto-suave:  #97a4ac;
    --epi-btn-hondo:    #3a444a;
    --epi-foto-brillo:  .88;
    --epi-sombra-1:  0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --epi-sombra-2:  0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
    --epi-sombra-3:  0 8px 20px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.55);
}

/* ---------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* El ancla no queda debajo de la barra fija */
    scroll-padding-top: calc(var(--epi-nav-alto) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--epi-cuerpo);
    font-size: 17px;
    line-height: 1.7;
    color: var(--epi-texto);
    background: var(--epi-fondo);
    overflow-x: hidden;               /* los parallax se salen 1px y marean */
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--epi-naranja); text-decoration: none; transition: color var(--epi-rapido) var(--epi-ease); }
a:hover { color: var(--epi-naranja-hondo); }

h1, h2, h3, h4 {
    font-family: var(--epi-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: .01em;
    margin: 0 0 .5em;
    color: var(--epi-titulo-color);
    text-wrap: balance;               /* no deja una palabra huérfana al final */
}

h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

p { margin: 0 0 1.1em; max-width: var(--epi-ancho-texto); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--epi-naranja); color: #fff; }

/* Foco visible para quien navega con teclado. No se quita nunca. */
:focus-visible {
    outline: 3px solid var(--epi-naranja);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Salta al contenido: sólo aparece al tabular */
.epi-saltar {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--epi-naranja); color: #fff;
    padding: .8rem 1.4rem; font-weight: 600;
}
.epi-saltar:focus { left: 1rem; top: 1rem; color: #fff; }

/* ---------------------------------------------------------------------------
   3. REJILLA
   ------------------------------------------------------------------------- */
.epi-caja {
    width: min(100% - 3rem, var(--epi-ancho));
    margin-inline: auto;
}
.epi-caja-ancha { width: min(100% - 2rem, 1480px); margin-inline: auto; }

.epi-seccion { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.epi-seccion-alt { background: var(--epi-fondo-alt); }
.epi-seccion-honda {
    background: var(--epi-fondo-hondo);
    color: var(--epi-texto-claro);
}
.epi-seccion-honda h1,
.epi-seccion-honda h2,
.epi-seccion-honda h3 { color: #fff; }

/* Encabezado de sección: la palabra chica arriba y la grande abajo, como en el
   sitio anterior ("NUESTRAS / CATEGORIAS"), pero con la barrita naranja. */
.epi-titulo { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.epi-titulo .sobre {
    display: block;
    font-family: var(--epi-cuerpo);
    font-size: .78rem; font-weight: 700;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--epi-naranja);
    margin-bottom: .9rem;
}
.epi-titulo h2 { margin-bottom: .6rem; }
.epi-titulo .bajada {
    color: var(--epi-texto-suave);
    font-size: 1.05rem;
    max-width: 60ch;
}
.epi-seccion-honda .epi-titulo .bajada { color: var(--epi-texto-claro); }

.epi-titulo::after {
    content: "";
    display: block;
    width: 62px; height: 4px;
    margin-top: 1.6rem;
    background: var(--epi-naranja);
    border-radius: 2px;
    /* crece cuando la sección entra en pantalla */
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform var(--epi-lento) var(--epi-ease-out) .15s;
}
.epi-titulo.dentro::after,
.dentro .epi-titulo::after { transform: scaleX(1); }
.epi-titulo-centro { text-align: center; }
.epi-titulo-centro .bajada { margin-inline: auto; }
.epi-titulo-centro::after { margin-inline: auto; transform-origin: center; }

/* ---------------------------------------------------------------------------
   4. BOTONES
   El relleno entra desde la izquierda en vez de sólo cambiar de color: cuesta
   lo mismo y se siente deliberado.
   ------------------------------------------------------------------------- */
.epi-btn {
    --btn-fondo: var(--epi-naranja);
    --btn-texto: #fff;
    position: relative;
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .95rem 2rem;
    font-family: var(--epi-cuerpo);
    font-size: .85rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--btn-texto);
    background: var(--btn-fondo);
    border: 2px solid var(--btn-fondo);
    border-radius: var(--epi-radio);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--epi-medio) var(--epi-ease),
                border-color var(--epi-medio) var(--epi-ease),
                transform var(--epi-rapido) var(--epi-ease),
                box-shadow var(--epi-medio) var(--epi-ease);
}
.epi-btn::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--epi-btn-hondo);
    transform: scaleX(0); transform-origin: right center;
    transition: transform var(--epi-medio) var(--epi-ease-out);
    z-index: -1;
}
.epi-btn:hover { color: #fff; border-color: var(--epi-btn-hondo); box-shadow: var(--epi-sombra-2); }
.epi-btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.epi-btn:active { transform: translateY(1px); }

.epi-btn-linea {
    --btn-fondo: transparent;
    --btn-texto: #fff;
    border-color: rgba(255,255,255,.55);
}
.epi-btn-linea::before { background: var(--epi-naranja); }
.epi-btn-linea:hover { border-color: var(--epi-naranja); }

.epi-btn-oscuro { --btn-fondo: var(--epi-btn-hondo); --btn-texto:#fff; }
.epi-btn-oscuro::before { background: var(--epi-naranja); }
.epi-btn-oscuro:hover { border-color: var(--epi-naranja); }

/* La flecha se separa al pasar el mouse */
.epi-btn .fa { transition: transform var(--epi-medio) var(--epi-ease); }
.epi-btn:hover .fa { transform: translateX(5px); }

/* ---------------------------------------------------------------------------
   5. BARRA DE NAVEGACIÓN
   Arranca transparente encima del hero y se vuelve sólida al bajar (la clase
   .fija se la pone sitio.js).
   ------------------------------------------------------------------------- */
.epi-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--epi-nav-alto);
    display: flex; align-items: center;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background var(--epi-medio) var(--epi-ease),
                height   var(--epi-medio) var(--epi-ease),
                box-shadow var(--epi-medio) var(--epi-ease),
                border-color var(--epi-medio) var(--epi-ease);
}
.epi-nav.fija {
    height: 64px;
    background: rgba(26,30,33,.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: rgba(255,255,255,.08);
    box-shadow: var(--epi-sombra-2);
}
/* En las páginas interiores no hay hero transparente: sólida desde el inicio. */
.epi-nav.solida { background: rgba(26,30,33,.96); }

.epi-nav .epi-caja-ancha { display: flex; align-items: center; gap: 2rem; width: min(100% - 2.5rem, 1480px); }

.epi-logo { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.epi-logo img { height: 44px; width: auto; transition: height var(--epi-medio) var(--epi-ease); }
.epi-nav.fija .epi-logo img { height: 36px; }

/* El nombre, en tipografía y no en pixeles: se lee igual de nítido en un
   monitor 4K que en el celular del cliente. */
.epi-logo-texto {
    display: flex; flex-direction: column;
    line-height: 1.05;
    font-family: var(--epi-display);
    text-transform: uppercase;
    white-space: nowrap;
}
.epi-logo-texto b {
    font-size: 1.02rem; font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
}
.epi-logo-texto i {
    font-style: normal;
    font-size: .68rem; font-weight: 500;
    letter-spacing: .32em;
    color: var(--epi-naranja-vivo);
}
/* En pantalla chica se queda sólo la mira: el nombre le comía el lugar a la
   hamburguesa. */
@media (max-width: 460px) {
    .epi-logo-texto { display: none; }
}

.epi-menu { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.epi-menu a {
    position: relative;
    display: block;
    padding: .6rem .95rem;
    font-size: .82rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    color: rgba(255,255,255,.82);
    border-radius: var(--epi-radio);
    transition: color var(--epi-rapido) var(--epi-ease);
}
.epi-menu a::after {
    content: "";
    position: absolute; left: .95rem; right: .95rem; bottom: .28rem;
    height: 2px; background: var(--epi-naranja);
    transform: scaleX(0); transform-origin: right center;
    transition: transform var(--epi-medio) var(--epi-ease-out);
}
.epi-menu a:hover { color: #fff; }
.epi-menu a:hover::after { transform: scaleX(1); transform-origin: left center; }
.epi-menu a.activo { color: #fff; }
.epi-menu a.activo::after { transform: scaleX(1); }

/* Botón hamburguesa: dos rayas que se cruzan */
.epi-hamburguesa {
    display: none;
    width: 46px; height: 46px;
    background: none; border: 0; padding: 0;
    cursor: pointer;
    position: relative;
}
.epi-hamburguesa span {
    position: absolute; left: 11px; right: 11px; height: 2px;
    background: #fff; border-radius: 2px;
    transition: transform var(--epi-medio) var(--epi-ease),
                opacity   var(--epi-rapido) var(--epi-ease);
}
.epi-hamburguesa span:nth-child(1) { top: 16px; }
.epi-hamburguesa span:nth-child(2) { top: 22px; }
.epi-hamburguesa span:nth-child(3) { top: 28px; }
.epi-hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.epi-hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.epi-hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Idioma y tema, los dos controles de la derecha de la barra */
.epi-controles { display: flex; align-items: center; gap: .5rem; }

.epi-idioma { display: flex; gap: .3rem; }
.epi-idioma a {
    padding: .3rem .6rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    color: rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--epi-radio);
}
.epi-idioma a:hover, .epi-idioma a.activo {
    color: #fff; border-color: var(--epi-naranja); background: var(--epi-naranja);
}

/* Interruptor de tema. Los dos iconos viven encima uno del otro y giran: el
   que sale depende del tema, así que el botón siempre enseña A DÓNDE va, no
   dónde está. */
.epi-tema {
    position: relative;
    width: 38px; height: 34px;
    display: grid; place-items: center;
    background: none;
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--epi-radio);
    cursor: pointer;
    overflow: hidden;
    transition: color var(--epi-rapido) var(--epi-ease),
                border-color var(--epi-rapido) var(--epi-ease),
                background var(--epi-rapido) var(--epi-ease);
}
.epi-tema:hover { color: #fff; border-color: var(--epi-naranja); background: var(--epi-naranja); }
.epi-tema .fa {
    position: absolute;
    font-size: .95rem;
    transition: transform var(--epi-medio) var(--epi-ease-out), opacity var(--epi-rapido) var(--epi-ease);
}
/* Estado por omisión (claro): se ofrece la luna. */
.epi-tema .fa-moon-o { opacity: 1; transform: none; }
.epi-tema .fa-sun-o  { opacity: 0; transform: rotate(-90deg) scale(.4); }

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) .epi-tema .fa-moon-o { opacity: 0; transform: rotate(90deg) scale(.4); }
    :root:not([data-tema="light"]) .epi-tema .fa-sun-o  { opacity: 1; transform: none; }
}
:root[data-tema="dark"] .epi-tema .fa-moon-o { opacity: 0; transform: rotate(90deg) scale(.4); }
:root[data-tema="dark"] .epi-tema .fa-sun-o  { opacity: 1; transform: none; }
/* Y de regreso, para quien fuerza claro con el sistema en oscuro. */
:root[data-tema="light"] .epi-tema .fa-moon-o { opacity: 1; transform: none; }
:root[data-tema="light"] .epi-tema .fa-sun-o  { opacity: 0; transform: rotate(-90deg) scale(.4); }

@media (max-width: 1080px) {
    .epi-hamburguesa { display: block; }
    .epi-menu {
        position: fixed; inset: var(--epi-nav-alto) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(26,30,33,.985);
        backdrop-filter: blur(16px);
        padding: 1rem 1.5rem 2rem;
        border-top: 1px solid rgba(255,255,255,.08);
        /* cerrado: recogido hacia arriba */
        transform-origin: top center;
        transform: scaleY(0) translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--epi-medio) var(--epi-ease-out),
                    opacity   var(--epi-rapido) var(--epi-ease);
    }
    .epi-menu.abierto { transform: none; opacity: 1; pointer-events: auto; }
    .epi-menu a { padding: 1rem .4rem; font-size: .95rem; border-bottom: 1px solid rgba(255,255,255,.07); }
    .epi-menu a::after { display: none; }
    /* los renglones entran escalonados */
    .epi-menu li { opacity: 0; transform: translateX(-14px); transition: opacity .3s var(--epi-ease), transform .3s var(--epi-ease-out); }
    .epi-menu.abierto li { opacity: 1; transform: none; }
    .epi-menu.abierto li:nth-child(1) { transition-delay: .05s; }
    .epi-menu.abierto li:nth-child(2) { transition-delay: .09s; }
    .epi-menu.abierto li:nth-child(3) { transition-delay: .13s; }
    .epi-menu.abierto li:nth-child(4) { transition-delay: .17s; }
    .epi-menu.abierto li:nth-child(5) { transition-delay: .21s; }
    .epi-menu.abierto li:nth-child(6) { transition-delay: .25s; }
    .epi-menu.abierto li:nth-child(7) { transition-delay: .29s; }
}

/* ---------------------------------------------------------------------------
   6. REVELADO AL HACER SCROLL
   La clase .revela deja el elemento escondido; sitio.js le pone .dentro cuando
   entra en pantalla. Si el JS no corre, el @media de hasta abajo lo muestra
   todo: la página NUNCA se queda en blanco por culpa de una animación.
   ------------------------------------------------------------------------- */
.revela {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--epi-lento) var(--epi-ease-out),
                transform var(--epi-lento) var(--epi-ease-out);
    will-change: opacity, transform;
}
.revela.dentro { opacity: 1; transform: none; }

.revela-izq  { transform: translateX(-38px); }
.revela-der  { transform: translateX(38px); }
.revela-zoom { transform: scale(.94); }
.revela-izq.dentro, .revela-der.dentro, .revela-zoom.dentro { transform: none; }

/* Escalonado para rejillas: cada hijo entra un poquito después */
.escalona > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* ---------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------- */
.epi-hero {
    position: relative;
    min-height: 100svh;
    display: grid; place-items: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.epi-hero-fondo {
    position: absolute; inset: -6% 0 -6% 0;   /* de más, para poder moverlo */
    z-index: -2;
}
.epi-hero-fondo img,
.epi-hero-fondo .capa {
    width: 100%; height: 100%;
    object-fit: cover;
    /* la imagen arranca un pelo acercada y se va abriendo: da sensación de
       profundidad sin que nada "salte" */
    animation: epi-abre 14s var(--epi-ease-out) forwards;
}
@keyframes epi-abre { from { transform: scale(1.12); } to { transform: scale(1); } }

.epi-hero::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(26,30,33,.72) 0%, rgba(26,30,33,.55) 45%, rgba(26,30,33,.88) 100%),
        radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(26,30,33,.5) 100%);
}

.epi-hero-texto { max-width: 60rem; padding: 8rem 1.5rem 6rem; }
.epi-hero .sobre {
    display: inline-block;
    font-size: .8rem; font-weight: 700;
    letter-spacing: .38em; text-transform: uppercase;
    color: var(--epi-naranja-vivo);
    margin-bottom: 1.6rem;
    padding-bottom: .7rem;
    border-bottom: 2px solid var(--epi-naranja);
}
.epi-hero h1 {
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 2px 30px rgba(0,0,0,.45);
    margin-bottom: 1.2rem;
}
.epi-hero .bajada {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    color: rgba(255,255,255,.86);
    margin-inline: auto;
    margin-bottom: 2.6rem;
    max-width: 46ch;
}
.epi-hero-botones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Las palabras del título entran una por una. El JS parte el texto en <span>. */
.epi-palabra { display: inline-block; overflow: hidden; vertical-align: bottom; }
.epi-palabra > i {
    display: inline-block; font-style: normal;
    transform: translateY(105%);
    animation: epi-sube .9s var(--epi-ease-out) forwards;
    animation-delay: calc(var(--w, 0) * 85ms + 250ms);
}
@keyframes epi-sube { to { transform: none; } }

/* Ratoncito de "hay más abajo" */
.epi-baja {
    position: absolute; bottom: 2rem; left: 50%;
    transform: translateX(-50%);
    display: grid; place-items: center; gap: .5rem;
    font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
}
.epi-baja::after {
    content: "";
    width: 1px; height: 46px;
    background: linear-gradient(180deg, var(--epi-naranja), transparent);
    animation: epi-latido 2.2s var(--epi-ease) infinite;
}
@keyframes epi-latido {
    0%,100% { opacity: .3; transform: scaleY(.6); transform-origin: top; }
    50%     { opacity: 1;  transform: scaleY(1);  transform-origin: top; }
}

/* Hero corto para las páginas interiores */
.epi-hero-corto {
    position: relative;
    min-height: 46vh;
    display: grid; place-items: center;
    padding: calc(var(--epi-nav-alto) + 4rem) 0 4rem;
    text-align: center; color: #fff;
    background: var(--epi-honda);
    overflow: hidden; isolation: isolate;
}
.epi-hero-corto .epi-hero-fondo img { animation: none; opacity: .34; }
.epi-hero-corto::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(26,30,33,.82), rgba(26,30,33,.94));
}
.epi-hero-corto h1 { color:#fff; text-transform: uppercase; font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom:.4rem; }
.epi-hero-corto .sobre {
    display:block; font-size:.75rem; font-weight:700; letter-spacing:.3em;
    text-transform:uppercase; color: var(--epi-naranja-vivo); margin-bottom:1rem;
}

/* Migas */
.epi-migas { font-size: .8rem; color: rgba(255,255,255,.5); margin-top: 1.2rem; }
.epi-migas a { color: rgba(255,255,255,.75); }
.epi-migas a:hover { color: var(--epi-naranja-vivo); }
.epi-migas .sep { margin: 0 .5rem; opacity: .45; }

/* ---------------------------------------------------------------------------
   8. TARJETAS
   ------------------------------------------------------------------------- */
.epi-rejilla { display: grid; gap: 1.6rem; }
.epi-rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.epi-rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.epi-rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.epi-tarjeta {
    position: relative;
    background: var(--epi-tarjeta);
    border: 1px solid var(--epi-borde);
    border-radius: var(--epi-radio-g);
    padding: 2.1rem 1.8rem;
    overflow: hidden;
    transition: transform var(--epi-medio) var(--epi-ease),
                box-shadow var(--epi-medio) var(--epi-ease),
                border-color var(--epi-medio) var(--epi-ease);
}
/* La cinta naranja de arriba se estira al pasar el mouse */
.epi-tarjeta::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--epi-naranja);
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--epi-medio) var(--epi-ease-out);
}
.epi-tarjeta:hover {
    transform: translateY(-6px);
    box-shadow: var(--epi-sombra-3);
    border-color: transparent;
}
.epi-tarjeta:hover::before { transform: scaleX(1); }

.epi-tarjeta .icono {
    display: grid; place-items: center;
    width: 56px; height: 56px;
    margin-bottom: 1.3rem;
    border-radius: var(--epi-radio-g);
    background: rgba(232,113,19,.1);
    color: var(--epi-naranja);
    font-size: 1.45rem;
    transition: background var(--epi-medio) var(--epi-ease),
                color var(--epi-medio) var(--epi-ease),
                transform var(--epi-medio) var(--epi-ease-out);
}
.epi-tarjeta:hover .icono {
    background: var(--epi-naranja); color: #fff;
    transform: scale(1.06) rotate(-4deg);
}
.epi-tarjeta h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.epi-tarjeta p { color: var(--epi-texto-suave); font-size: .95rem; margin: 0; }

/* Tarjeta con foto: la imagen se acerca y el rótulo sube */
.epi-foto {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--epi-radio-g);
    overflow: hidden;
    background: var(--epi-carbon);
    isolation: isolate;
}
.epi-foto img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.1s var(--epi-ease-out), filter var(--epi-medio) var(--epi-ease);
}
.epi-foto::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(26,30,33,.9) 100%);
    opacity: .82;
    transition: opacity var(--epi-medio) var(--epi-ease);
}
.epi-foto .rotulo {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 1.5rem 1.4rem;
    color: #fff;
}
.epi-foto .rotulo h3 { color: #fff; font-size: 1.15rem; margin: 0 0 .2rem; }
.epi-foto .rotulo .pie {
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--epi-naranja-vivo);
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--epi-medio) var(--epi-ease), transform var(--epi-medio) var(--epi-ease-out);
}
.epi-foto:hover img { transform: scale(1.07); }
.epi-foto:hover::after { opacity: .95; }
.epi-foto:hover .rotulo .pie { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   9. LISTAS DE MATERIALES / FABRICACIONES
   ------------------------------------------------------------------------- */
.epi-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.epi-lista li {
    position: relative;
    padding: .85rem 1rem .85rem 2.2rem;
    border-bottom: 1px solid var(--epi-borde);
    transition: background var(--epi-rapido) var(--epi-ease),
                padding-left var(--epi-medio) var(--epi-ease-out);
}
.epi-lista li::before {
    content: "";
    position: absolute; left: .7rem; top: 50%;
    width: 7px; height: 7px; margin-top: -3.5px;
    background: var(--epi-naranja);
    border-radius: 1px;
    transform: rotate(45deg) scale(.8);
    transition: transform var(--epi-medio) var(--epi-ease-out);
}
.epi-lista li:hover { background: rgba(232,113,19,.05); padding-left: 2.6rem; }
.epi-lista li:hover::before { transform: rotate(135deg) scale(1.1); }
.epi-seccion-honda .epi-lista li { border-bottom-color: rgba(255,255,255,.1); }
.epi-seccion-honda .epi-lista li:hover { background: rgba(255,255,255,.05); }

/* ---------------------------------------------------------------------------
   10. CONTADORES Y FRANJAS
   ------------------------------------------------------------------------- */
.epi-franja {
    position: relative;
    padding: clamp(4rem, 8vw, 6.5rem) 0;
    color: #fff;
    background: var(--epi-honda);
    overflow: hidden; isolation: isolate;
}
.epi-franja-fondo { position: absolute; inset: 0; z-index: -2; }
.epi-franja-fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.epi-franja::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(120deg, rgba(26,30,33,.93), rgba(47,56,61,.8));
}
.epi-franja h2 { color: #fff; }

.epi-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 2rem; text-align: center; }
.epi-numero .cifra {
    font-family: var(--epi-display);
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 700; line-height: 1;
    color: var(--epi-naranja-vivo);
    display: block;
    font-variant-numeric: tabular-nums;   /* no baila al ir contando */
}
.epi-numero .rotulo {
    display: block; margin-top: .7rem;
    font-size: .78rem; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.65);
}

/* ---------------------------------------------------------------------------
   11. BLOQUE PARTIDO (texto + imagen)
   ------------------------------------------------------------------------- */
.epi-partido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}
.epi-partido-media {
    position: relative;
    border-radius: var(--epi-radio-g);
    overflow: hidden;
    box-shadow: var(--epi-sombra-3);
}
.epi-partido-media img { width: 100%; }
/* Marco naranja desplazado: detalle barato que se ve caro */
.epi-partido-media::before {
    content: "";
    position: absolute; inset: 12px;
    border: 2px solid rgba(255,255,255,.28);
    border-radius: var(--epi-radio);
    pointer-events: none;
    z-index: 2;
}
.epi-invertido .epi-partido-media { order: -1; }

/* ---------------------------------------------------------------------------
   12. ACORDEÓN (misión / visión / valores)
   ------------------------------------------------------------------------- */
.epi-acordeon { border-top: 1px solid var(--epi-borde); }
.epi-acordeon details { border-bottom: 1px solid var(--epi-borde); }
.epi-acordeon summary {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.4rem .4rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--epi-display);
    font-size: 1.25rem;
    color: var(--epi-titulo-color);
    transition: color var(--epi-rapido) var(--epi-ease);
}
.epi-acordeon summary::-webkit-details-marker { display: none; }
.epi-acordeon summary::after {
    content: "+";
    margin-left: auto;
    font-family: var(--epi-cuerpo); font-weight: 300;
    font-size: 1.7rem; line-height: 1;
    color: var(--epi-naranja);
    transition: transform var(--epi-medio) var(--epi-ease-out);
}
.epi-acordeon details[open] summary::after { transform: rotate(135deg); }
.epi-acordeon summary:hover { color: var(--epi-naranja); }
.epi-acordeon .cuerpo { padding: 0 .4rem 1.6rem; color: var(--epi-texto-suave); }
/* La apertura se anima donde el navegador lo soporta; donde no, abre de golpe
   (que es el comportamiento normal de <details>, no un error). */
@supports (interpolate-size: allow-keywords) {
    .epi-acordeon details::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size var(--epi-medio) var(--epi-ease-out), content-visibility var(--epi-medio) allow-discrete;
    }
    .epi-acordeon details[open]::details-content { block-size: auto; }
}

/* ---------------------------------------------------------------------------
   13. CONTACTO
   ------------------------------------------------------------------------- */
.epi-dato { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.9rem; }
.epi-dato .icono {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(232,113,19,.12);
    color: var(--epi-naranja);
    transition: background var(--epi-medio) var(--epi-ease), color var(--epi-medio) var(--epi-ease);
}
.epi-dato:hover .icono { background: var(--epi-naranja); color: #fff; }
.epi-dato .rotulo {
    font-size: .72rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--epi-naranja);
    display: block; margin-bottom: .15rem;
}
.epi-dato .valor { color: var(--epi-texto); font-size: 1.02rem; }
.epi-seccion-honda .epi-dato .valor { color: #fff; }

.epi-mapa {
    border-radius: var(--epi-radio-g);
    overflow: hidden;
    box-shadow: var(--epi-sombra-2);
    /* el iframe de Google llega en colores muy vivos; se apaga un poco para
       que no pelee con el naranja de la marca */
    filter: grayscale(.35) contrast(1.05);
    transition: filter var(--epi-lento) var(--epi-ease);
}
.epi-mapa:hover { filter: none; }
.epi-mapa iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------------------------------------------------------------------------
   14. PIE
   ------------------------------------------------------------------------- */
.epi-pie {
    background: var(--epi-honda);
    color: rgba(255,255,255,.6);
    padding: clamp(3rem, 6vw, 4.5rem) 0 0;
    font-size: .93rem;
}
.epi-pie-rejilla {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
}
@media (max-width: 860px) { .epi-pie-rejilla { grid-template-columns: 1fr; gap: 2.2rem; } }

.epi-pie h4 {
    color: #fff; font-size: .82rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    margin-bottom: 1.2rem;
    font-family: var(--epi-cuerpo);
}
.epi-pie ul { list-style: none; margin: 0; padding: 0; }
.epi-pie li { margin-bottom: .6rem; }
.epi-pie a { color: rgba(255,255,255,.6); }
.epi-pie a:hover { color: var(--epi-naranja-vivo); padding-left: 4px; }
.epi-pie a { transition: color var(--epi-rapido) var(--epi-ease), padding-left var(--epi-rapido) var(--epi-ease); }
.epi-pie img.logo { height: 54px; margin-bottom: 1.2rem; }

.epi-pie-abajo {
    border-top: 1px solid rgba(255,255,255,.09);
    padding: 1.4rem 0;
    display: flex; flex-wrap: wrap; gap: 1rem;
    justify-content: space-between; align-items: center;
    font-size: .84rem;
    color: rgba(255,255,255,.42);
}

/* Botón "volver arriba" */
.epi-arriba {
    position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 90;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    background: var(--epi-naranja); color: #fff;
    border: 0; border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--epi-sombra-2);
    opacity: 0; transform: translateY(14px) scale(.9);
    pointer-events: none;
    transition: opacity var(--epi-medio) var(--epi-ease),
                transform var(--epi-medio) var(--epi-ease-out),
                background var(--epi-rapido) var(--epi-ease);
}
.epi-arriba.visible { opacity: 1; transform: none; pointer-events: auto; }
.epi-arriba:hover { background: var(--epi-btn-hondo); }

/* Barra de avance de lectura, pegada bajo el nav */
.epi-avance {
    position: fixed; top: 0; left: 0; height: 3px; z-index: 101;
    width: 100%;
    transform: scaleX(0); transform-origin: left center;
    background: linear-gradient(90deg, var(--epi-naranja), var(--epi-naranja-vivo));
}

/* ---------------------------------------------------------------------------
   15. QUIEN NO QUIERE MOVIMIENTO
   No es un extra: hay gente a la que el parallax le provoca mareo, y el
   sistema operativo ya lo dice. Aquí se apaga todo y se muestra el contenido.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .revela { opacity: 1 !important; transform: none !important; }
    .epi-palabra > i { transform: none !important; }
    .epi-titulo::after { transform: scaleX(1) !important; }
}

/* ---------------------------------------------------------------------------
   16. RETOQUES DE TEMA OSCURO
   Lo que no se arregla cambiando un token.
   ------------------------------------------------------------------------- */

/* Las fotos se apagan un punto. A pleno brillo, sobre un fondo casi negro,
   deslumbran; y el sitio es casi todo fotografía de taller. */
.epi-foto img,
.epi-partido-media img,
.epi-tarjeta img { filter: brightness(var(--epi-foto-brillo)); }

/* El mapa de Google llega blanco y quema la pantalla en oscuro: se invierte y
   se le corrige el tono para que los rótulos sigan siendo legibles. Al pasar
   el mouse vuelve a su color, igual que en claro. */
:root[data-tema="dark"] .epi-mapa iframe,
:root[data-tema="dark"] .epi-mapa { filter: invert(.9) hue-rotate(180deg) grayscale(.25); }
:root[data-tema="dark"] .epi-mapa:hover { filter: invert(.9) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) .epi-mapa { filter: invert(.9) hue-rotate(180deg) grayscale(.25); }
    :root:not([data-tema="light"]) .epi-mapa:hover { filter: invert(.9) hue-rotate(180deg); }
}

/* La barra fija y el pie ya eran oscuros en tema claro. En oscuro se bajan un
   escalón más para que no se confundan con el cuerpo de la página. */
:root[data-tema="dark"] .epi-nav.fija,
:root[data-tema="dark"] .epi-nav.solida { background: rgba(9,12,14,.95); }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) .epi-nav.fija,
    :root:not([data-tema="light"]) .epi-nav.solida { background: rgba(9,12,14,.95); }
}

/* Mientras el visitante cambia de tema, los fondos hacen una transición corta
   en lugar de saltar. Sólo fondo y borde: animar 'color' en toda la página se
   nota lento. La clase la pone y la quita sitio.js. */
.epi-cambiando-tema,
.epi-cambiando-tema *,
.epi-cambiando-tema *::before,
.epi-cambiando-tema *::after {
    transition: background-color .3s var(--epi-ease),
                border-color     .3s var(--epi-ease),
                color            .3s var(--epi-ease) !important;
}

/* Si el JS no llegó a correr (error, bloqueado), el contenido se ve igual.
   sitio.js le pone .js al <html> en cuanto arranca. */
html:not(.js) .revela { opacity: 1; transform: none; }
html:not(.js) .epi-palabra > i { transform: none; animation: none; }
html:not(.js) .epi-titulo::after { transform: scaleX(1); }