/* ==========================================================================
   custom.css — Estilos propios de Electroproyectos
   --------------------------------------------------------------------------
   El archivo style.css es Tailwind YA COMPILADO: solo contiene las clases
   que el sitio usaba el día que se compiló. No se puede ampliar.
   Por eso, TODO lo nuevo que necesitemos lo escribimos aquí, en CSS normal.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LOGO ANIMADO
   -------------------------------------------------------------------------- */

/* Un "keyframe" describe una animación: de dónde parte y a dónde llega.
   El navegador calcula solo todos los pasos intermedios. */

@keyframes ep-spin     { from { transform: rotate(0deg); }  to { transform: rotate(360deg);  } }
@keyframes ep-spin-rev { from { transform: rotate(0deg); }  to { transform: rotate(-360deg); } }
@keyframes ep-pulse    { 0%, 100% { opacity: .5; }          50% { opacity: 1; } }

/* El engranaje: una vuelta completa cada 9 s, velocidad constante, sin parar.
   transform-origin: 0 0  ->  gira sobre el centro del SVG, no sobre su esquina. */
.ep-gear {
    animation: ep-spin 9s linear infinite;
    transform-origin: 0 0;
}

/* Los puntos de luz del circuito: laten suavemente. */
.ep-spark {
    animation: ep-pulse 2.6s ease-in-out infinite;
}

/* Accesibilidad: hay personas a las que el movimiento en pantalla les provoca
   mareo o migraña, y lo desactivan en los ajustes de su sistema.
   Esta regla respeta esa preferencia. */
@media (prefers-reduced-motion: reduce) {
    .ep-gear,
    .ep-spark { animation: none; }
}

/* Tamaño del logo del header.
   OJO: 'w-11' y 'shrink-0' NO existen en el Tailwind compilado del proyecto,
   así que la medida la definimos aquí. 2.75rem = 44px (equivale a h-11).
   flex-shrink: 0 impide que el flex del header lo aplaste en pantallas chicas. */
.ep-logo {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
}

/* Logo del footer: 2rem = 32px (dentro de su recuadro blanco con p-1 -> 40px total). */
.ep-logo-sm {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   2. HEADER OSCURO CON DEGRADADO (tono plomo)
   --------------------------------------------------------------------------
   Un "linear-gradient" mezcla colores en línea recta.
   180deg = de arriba hacia abajo. Los % dicen dónde cae cada color.
   -------------------------------------------------------------------------- */

.ep-header {
    background: linear-gradient(180deg,
                #1F232A 0%,     /* arriba: plomo muy oscuro  */
                #2C313A 55%,    /* medio                     */
                #343A45 100%);  /* abajo: plomo más claro    */
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Sombra al hacer scroll. La clase la pone/quita script.js. */
.ep-header--scrolled {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}


/* --- Textos del header: ahora tienen que ser claros ---------------------- */

/* Estas reglas GANAN a las clases de Tailwind del HTML por especificidad:
   ".ep-header nav a" (1 clase + 2 etiquetas) pesa más que ".text-slate-700"
   (1 clase). Por eso no hace falta tocar el HTML ni usar !important.        */

.ep-header nav a:not(.btn-primary) {
    color: rgba(255, 255, 255, 0.86);
}
.ep-header nav a:not(.btn-primary):hover {
    color: #FF7A86;               /* rojo aclarado: el rojo de marca      */
}                                 /* no contrasta bien sobre plomo oscuro */

/* Nombre de la empresa */
.ep-header .font-display.text-slate-900 { color: #FFFFFF; }
.ep-header .text-brand-red             { color: #FF7A86; }

/* Botón hamburguesa (era negro sobre claro; ahora al revés) */
.ep-header #mobile-menu-btn {
    width: 44px;                   /* w-10/h-10 daban 40px: poco para el dedo */
    height: 44px;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.ep-header #mobile-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.24);
}

/* Panel del menú móvil */
.ep-header__menu {
    background: #2C313A;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.ep-header__menu a:not(.btn-primary) { color: rgba(255, 255, 255, 0.90); }
.ep-header__menu a:not(.btn-primary):hover { color: #FF7A86; }


/* --------------------------------------------------------------------------
   3. TELÉFONO DEL HEADER
   --------------------------------------------------------------------------
   Antes era el emoji 📞, que cambia de dibujo según el sistema operativo
   (uno en Windows, otro en Mac, otro en Android) y no se puede recolorear.
   Ahora es un SVG: mismo dibujo en todas partes y hereda el color del texto.
   -------------------------------------------------------------------------- */

.ep-tel-link {
    color: rgba(255, 255, 255, 0.86);
}
.ep-tel-badge {
    background-color: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    transition: background-color .2s ease;
}
.ep-tel-link:hover .ep-tel-badge {
    background-color: rgba(255, 255, 255, 0.22);
}


/* --------------------------------------------------------------------------
   4. ICONOS DE LA TARJETA DE CONTACTO
   --------------------------------------------------------------------------
   Sustituyen a los emojis 📍 📞 ✉️, que se dibujan distinto en cada sistema
   operativo y no se pueden recolorear. Estos son SVG en rojo de marca.
   -------------------------------------------------------------------------- */

.ep-ico {
    background-color: #F1F5F9;   /* mismo gris claro que tenían antes */
    color: #E30613;              /* rojo de marca; el SVG lo hereda   */
    flex-shrink: 0;
}

/* Teléfono y correo ahora son enlaces: subrayado solo al pasar el ratón. */
.ep-ico-link {
    color: inherit;
    text-decoration: none;
}
.ep-ico-link:hover {
    color: #E30613;
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   5. FORMULARIO DE COTIZACIÓN
   --------------------------------------------------------------------------
   Antes cada campo llevaba su propia ristra de clases repetida a mano, y al
   <textarea> se le olvidaron TODAS: sin borde, sin ancho y colocado en línea
   junto a su etiqueta. Aquí se define el estilo UNA vez y lo usan los cinco.
   -------------------------------------------------------------------------- */

.ep-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: .35rem;
}
.ep-required { color: #E30613; }

.ep-field {
    display: block;              /* la clave: sin esto el textarea va en línea */
    width: 100%;
    padding: .75rem 1rem;
    font-family: inherit;        /* si no, el textarea usa fuente monoespaciada */
    font-size: .875rem;
    color: #0F172A;
    background-color: #fff;
    border: 1px solid #E2E8F0;
    border-radius: .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ep-field::placeholder { color: #94A3B8; }

.ep-field:focus {
    outline: none;
    border-color: #E30613;
    box-shadow: 0 0 0 3px rgba(227, 6, 19, .15);
}

textarea.ep-field {
    resize: vertical;            /* solo se estira a lo alto, no rompe el diseño */
    min-height: 7rem;
}

/* Trampa antispam: invisible para personas, tentadora para robots. */
.ep-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Aviso de resultado del formulario.
   Las clases que usaba antes (bg-green-50, text-green-700, text-red-700)
   NO existen en el Tailwind compilado: el mensaje salía sin color ninguno. */

.ep-feedback--ok {
    background-color: #F0FDF4;
    color: #15803D;
    border: 1px solid #BBF7D0;
}
.ep-feedback--error {
    background-color: #FEF2F2;
    color: #B91C1C;
    border: 1px solid #FECACA;
}
.ep-feedback__link {
    text-decoration: underline;
    font-weight: 600;
    color: inherit;
}


/* --------------------------------------------------------------------------
   6. REJILLA DE SERVICIOS
   --------------------------------------------------------------------------
   Antes eran 6 tarjetas en 3 columnas (3+3). Ahora son 8, y con 3 columnas
   quedarían 3+3+2, con un hueco feo al final. Con 4 columnas quedan 4+4.
   "grid-cols-4" no existe en el Tailwind compilado, así que va aquí.
   -------------------------------------------------------------------------- */

.ep-services-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;                    /* móvil: 1 por fila  */
}
@media (min-width: 640px) {
    .ep-services-grid { grid-template-columns: repeat(2, 1fr); }   /* tablet: 2 */
}
@media (min-width: 1024px) {
    .ep-services-grid { grid-template-columns: repeat(4, 1fr); }   /* escritorio: 4 */
}

/* Alinear todos los "Cotizar servicio →" a la misma altura.
   El problema: las descripciones tienen 2 o 3 líneas, así que el enlace
   quedaba más arriba o más abajo en cada tarjeta.

   La solución tiene dos partes:
   1) grid-auto-rows: 1fr  -> todas las filas miden lo mismo, así que las
                              8 tarjetas acaban con idéntica altura.
   2) margin-top: auto     -> dentro de una columna flex, "auto" se come todo
                              el espacio sobrante y empuja el enlace al fondo. */

.ep-services-grid { grid-auto-rows: 1fr; }

.ep-service-card {
    display: flex;
    flex-direction: column;
}
.ep-service-cta {
    margin-top: auto;      /* al fondo de la tarjeta, sea cual sea el texto */
    padding-top: 1rem;     /* separación mínima respecto a la descripción   */
}


/* --------------------------------------------------------------------------
   7. RESALTAR EL SERVICIO AL LLEGAR DESDE EL FOOTER
   --------------------------------------------------------------------------
   Cada tarjeta tiene su propio id (#srv-eolica, #srv-fotovoltaicos...).
   El selector ":target" apunta al elemento cuyo id coincide con el # de la
   URL: si el cliente pulsa "Energía Eólica" en el footer, la tarjeta de
   Energía Eólica —y solo esa— se resalta. Es CSS puro, sin JavaScript.
   -------------------------------------------------------------------------- */

/* El header es fijo y mide 72px; sin esto la tarjeta quedaría tapada. */
.ep-service-card {
    scroll-margin-top: 96px;
    outline: none;                 /* el borde lo dibujamos nosotros */
}

.ep-service-card:target {
    border-color: #E30613;
    box-shadow: 0 0 0 3px rgba(227, 6, 19, .18),
                0 18px 40px rgba(15, 30, 58, .16);
    animation: ep-destacar 1.1s ease-out;
}

/* Un latido al llegar, para que el ojo lo cace. Después se queda el borde
   rojo mientras el # siga en la URL: el cliente no pierde la referencia. */
@keyframes ep-destacar {
    0%   { transform: scale(1);     box-shadow: 0 0 0 0   rgba(227, 6, 19, .45); }
    45%  { transform: scale(1.03);  box-shadow: 0 0 0 12px rgba(227, 6, 19, 0);  }
    100% { transform: scale(1);     box-shadow: 0 0 0 3px rgba(227, 6, 19, .18),
                                                0 18px 40px rgba(15, 30, 58, .16); }
}

/* Respetamos a quien tenga desactivado el movimiento en su sistema:
   se queda el borde rojo, pero sin latido. */
@media (prefers-reduced-motion: reduce) {
    .ep-service-card:target { animation: none; }
}


/* --------------------------------------------------------------------------
   8. AVISO AL PRESELECCIONAR EL SERVICIO
   --------------------------------------------------------------------------
   Cuando el cliente llega desde "Cotizar servicio", el desplegable ya viene
   relleno. Este parpadeo se lo señala; si no, el cambio pasa desapercibido.
   -------------------------------------------------------------------------- */

@keyframes ep-parpadeo {
    0%   { border-color: #E30613; box-shadow: 0 0 0 0   rgba(227, 6, 19, .40); }
    50%  { border-color: #E30613; box-shadow: 0 0 0 9px rgba(227, 6, 19, 0);   }
    100% { border-color: #E2E8F0; box-shadow: 0 0 0 0   rgba(227, 6, 19, 0);   }
}

.ep-field--aviso {
    animation: ep-parpadeo .9s ease-out 2;   /* dos latidos, 1,8 s en total */
}

/* Sin movimiento: se queda el borde rojo fijo mientras dura el aviso. */
@media (prefers-reduced-motion: reduce) {
    .ep-field--aviso {
        animation: none;
        border-color: #E30613;
    }
}

/* --------------------------------------------------------------------------
   9. NUESTRO PERSONAL — carrusel de tarjetas
   --------------------------------------------------------------------------
   Carrusel con desplazamiento nativo del navegador: sin librerías.
   Se arrastra con el dedo en móvil, con la rueda o las flechas en escritorio.
   -------------------------------------------------------------------------- */

.ep-team__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 1rem .25rem 1.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* "safe center" centra las tarjetas cuando caben todas, pero si se
       desbordan vuelve a alinearlas al inicio. Sin la palabra "safe", al
       desbordarse se recortarían las primeras y no habría forma de verlas. */
    justify-content: safe center;
}
.ep-team__track::-webkit-scrollbar { display: none; }


/* --- La tarjeta ---------------------------------------------------------- */

.ep-team__card {
    position: relative;
    flex: 0 0 246px;
    scroll-snap-align: center;
    padding: 2.25rem 1.5rem 1.75rem;
    text-align: center;
    border-radius: 28px;
    background: #fff;
    overflow: hidden;
    /* Dos sombras: una fina que dibuja el borde y otra amplia y suave que
       da la sensación de que la tarjeta flota. Se ve más limpio que un
       border de 1px, que a este tamaño marca demasiado. */
    box-shadow: 0 0 0 1px rgba(15, 30, 58, .06),
                0 10px 30px rgba(15, 30, 58, .07);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1),
                box-shadow .3s ease;
}

/* Franja de color en el borde superior, oculta hasta el hover. */
.ep-team__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #E30613, #0F1E3A);
    transform: scaleX(0);
    transition: transform .35s ease;
}

.ep-team__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 0 1px rgba(227, 6, 19, .12),
                0 22px 48px rgba(15, 30, 58, .14);
}
.ep-team__card:hover::before { transform: scaleX(1); }


/* --- La foto ------------------------------------------------------------- */

.ep-team__photo {
    position: relative;
    width: 116px;
    height: 116px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(140deg, #E30613, #0F1E3A);
    display: flex;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.ep-team__card:hover .ep-team__photo { transform: scale(1.04); }

.ep-team__photo img,
.ep-team__photo svg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;          /* recorta sin deformar la cara */
    background: #F1F5F9;
    display: block;
}


/* --- Textos -------------------------------------------------------------- */

.ep-team__name {
    font-weight: 700;
    font-size: 1rem;
    color: #0F172A;
    letter-spacing: -.01em;
}

/* El cargo va en una etiqueta con fondo, no en texto suelto: se lee como
   una categoría y separa mejor del nombre. */
.ep-team__role {
    display: inline-block;
    margin-top: .6rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(227, 6, 19, .08);
    color: #C10512;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
}


/* --- Flechas ------------------------------------------------------------- */

.ep-team__nav,
.ep-nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E2E8F0;
    color: #0F1E3A;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(15, 30, 58, .10);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease,
                border-color .2s ease, opacity .2s ease;
}
.ep-team__nav:hover:not(:disabled),
.ep-nav-btn:hover:not(:disabled) {
    background: #0F1E3A;
    border-color: #0F1E3A;
    color: #fff;
}
.ep-team__nav:disabled,
.ep-nav-btn:disabled { opacity: .3; cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .ep-team__track { scroll-behavior: auto; }
    .ep-team__card:hover,
    .ep-team__card:hover .ep-team__photo { transform: none; }
}

/* Separación del bloque respecto a Misión/Visión/Valores.
   OJO: "mt-14" NO existe en el Tailwind compilado -> el margen quedaba en 0
   y el bloque salía pegado al de arriba. Se define aquí. */
.ep-team-block {
    margin-top: 4rem;                 /* 64px */
    padding-top: 3rem;
    border-top: 1px solid #E9EEF5;    /* línea fina que separa los dos bloques */
}

.ep-team-nav-row {
    margin-top: 1.25rem;              /* "mt-2" daba solo 8px, muy justo */
}


/* --------------------------------------------------------------------------
   10. PROYECTOS — carrusel
   --------------------------------------------------------------------------
   Misma mecánica que el de personal: desplazamiento nativo con scroll-snap.
   Las tarjetas son más anchas porque aquí manda la foto.
   -------------------------------------------------------------------------- */

.ep-proj__track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .25rem .25rem 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ep-proj__track::-webkit-scrollbar { display: none; }

.ep-proj__card {
    position: relative;
    /* clamp(mínimo, deseado, máximo): en móvil ocupa el 82% del ancho de
       pantalla, en escritorio se queda en 420px. Una sola línea sustituye
       a tres media queries. */
    flex: 0 0 clamp(260px, 82vw, 420px);
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
    border-radius: 24px;
    overflow: hidden;
    background: #F1F5F9;
}
.ep-proj__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.ep-proj__card:hover img { transform: scale(1.06); }

/* Velo degradado: oscurece solo la parte de abajo para que el nombre se
   lea sobre cualquier foto, sin ensuciar el resto de la imagen. */
.ep-proj__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(15, 30, 58, .72) 0%,
                rgba(15, 30, 58, .25) 28%,
                transparent 55%);
    pointer-events: none;
}

/* El nombre del proyecto: ni diminuto ni enorme. */
.ep-proj__badge {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
/* Filete rojo que crece bajo el nombre al pasar el ratón. */
.ep-proj__badge::after {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin-top: .5rem;
    border-radius: 2px;
    background: #E30613;
    transform-origin: left;
    transform: scaleX(1);
    transition: transform .35s ease;
}
.ep-proj__card:hover .ep-proj__badge::after { transform: scaleX(2.6); }


/* --- Barra de control: flechas + puntos ---------------------------------- */

.ep-carousel-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.ep-dots {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.ep-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    /* OJO: aquí va "background-color", no la abreviada "background".
       La abreviada reinicia background-clip a border-box y anularía el
       recorte que necesitamos para agrandar la zona tocable en móvil. */
    background-color: #CBD5E1;
    background-clip: content-box;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}
.ep-dot[aria-current="true"] {
    width: 26px;              /* el punto activo se alarga en vez de crecer */
    background-color: #E30613;
}

@media (prefers-reduced-motion: reduce) {
    .ep-proj__track { scroll-behavior: auto; }
    .ep-proj__card:hover img { transform: none; }
}


/* --------------------------------------------------------------------------
   11. HERO
   --------------------------------------------------------------------------
   Antes: una tarjeta blanca gigante con el logo ocupaba media pantalla en
   escritorio y TODA la primera pantalla en móvil, así que el visitante no
   veía ni el titular ni el botón sin hacer scroll. Ahora el contenido manda
   y la foto pasa a ser fondo.
   -------------------------------------------------------------------------- */

.ep-hero__inner {
    max-width: 640px;
    padding: 4.5rem 0 4rem;
}

/* El velo aclara la izquierda —donde va el texto— y se desvanece hacia la
   derecha para que la fotografía siga viéndose. Sin esto, el párrafo y las
   cifras competían con los cables y el destornillador de la foto. */
.ep-hero__scrim {
    /* Velo OSCURO: el vídeo se ve entero y el texto va en blanco encima.
       Es lo habitual en heros con vídeo, y deja lucir el metraje. */
    background: linear-gradient(100deg,
                rgba(9, 17, 32, .93) 0%,
                rgba(9, 17, 32, .84) 34%,
                rgba(9, 17, 32, .52) 62%,
                rgba(9, 17, 32, .18) 100%);
    pointer-events: none;
}

/* En móvil no hay "derecha": el degradado va de arriba abajo. */
@media (max-width: 900px) {
    .ep-hero__scrim {
        background: linear-gradient(180deg,
                    rgba(9, 17, 32, .90) 0%,
                    rgba(9, 17, 32, .84) 60%,
                    rgba(9, 17, 32, .74) 100%);
    }
    .ep-hero__inner { padding: 3rem 0 3rem; }
}

/* clamp(mínimo, preferido, máximo): el titular escala con el ancho de la
   pantalla sin saltos bruscos y sin necesitar media queries. */
.ep-hero__title {
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -.02em;
}

/* El degradado del texto "industriales" se recorta sobre las letras; hay que
   dejar un pelín de aire o la "s" final se corta en algunos navegadores. */
.ep-hero__title span { padding-right: .06em; }

.ep-hero__stats { border-color: rgba(255, 255, 255, .22); }

/* El correo es una cadena de 29 caracteres sin espacios. El navegador no
   puede partirla, así que forzaba 217px de ancho mínimo y su contenedor no
   podía encoger: aparecía scroll horizontal a 320px (tarjeta de Contacto)
   y a 768px (columna del footer, de solo 150px).
   "anywhere" permite cortar la palabra en cualquier punto si hace falta. */
.ep-ico-link,
footer li,
footer a {
    overflow-wrap: anywhere;
    min-width: 0;
}


/* --------------------------------------------------------------------------
   12. AJUSTES PARA MÓVIL
   --------------------------------------------------------------------------
   Verificado a 320, 360, 375, 414 y 768 px.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* Zona tocable mínima: 44px. Con el dedo, 36px se falla a menudo.
       Se agranda el área sensible sin mover el texto de sitio. */
    .ep-service-cta {
        min-height: 44px;
        align-items: center;
    }

    /* Etiquetas de cargo: 11.5px se lee mal en pantalla pequeña. */
    .ep-team__role { font-size: .8rem; }

    /* Nota bajo el botón del formulario. */
    #contact-form + p,
    .text-\[11px\] { font-size: .75rem; }

    /* Los puntos del carrusel se ven de 8px, pero la zona sensible al dedo
       pasa a 24px gracias al relleno transparente. El punto no cambia de
       tamaño: solo se agranda el área invisible que responde al toque. */
    .ep-dot {
        box-sizing: content-box;
        padding: 8px 0;        /* el punto sigue midiendo 8px; lo que crece
                                  a 24px es el área invisible que responde
                                  al toque del dedo. */
    }

    /* Enlaces del footer: separados para no fallar el toque. */
    footer nav a,
    footer li a { display: inline-block; padding: .35rem 0; }
}


/* --------------------------------------------------------------------------
   13. NOMBRE JUNTO AL LOGO EN EL HEADER
   --------------------------------------------------------------------------
   Antes llevaba "hidden sm:block": desaparecía por debajo de 640px, así que
   en celular solo se veía el símbolo y nadie sabía de qué empresa era.
   Ahora se ve siempre; lo que cambia es el tamaño de letra.
   -------------------------------------------------------------------------- */

.ep-wordmark { min-width: 0; }

/* En pantallas estrechas el header comparte espacio con el logo (44px),
   el botón de WhatsApp/teléfono y la hamburguesa. Reducimos la letra para
   que el nombre entre sin empujar nada fuera de pantalla. */
/* Por debajo de 360px el espacio es justo: letra reducida. */
@media (max-width: 359px) {
    .ep-wordmark p:first-child {
        font-size: 12.5px;
        letter-spacing: -.02em;
    }
    .ep-wordmark p:last-child {
        font-size: 9px;
        letter-spacing: .14em;
    }
}

/* De 360 a 639px sobra sitio (medido: 94px de holgura a 360px). */
@media (min-width: 360px) and (max-width: 639px) {
    .ep-wordmark p:first-child { font-size: 14px; }
    .ep-wordmark p:last-child  { font-size: 10px; letter-spacing: .16em; }
}


/* --------------------------------------------------------------------------
   14. BOTÓN FLOTANTE DE WHATSAPP
   --------------------------------------------------------------------------
   Acompaña al visitante durante todo el scroll. Antes, para escribir había
   que volver al header o bajar hasta el footer.
   Ninguna de las clases que hacen falta (fixed, bottom-6, z-40) existe en
   el Tailwind compilado, así que va todo aquí.
   -------------------------------------------------------------------------- */

.ep-wa-float {
    position: fixed;
    z-index: 45;                    /* por debajo del header (z-50) */
    right: 1.25rem;
    /* env(safe-area-inset-bottom): en iPhone, deja hueco para la barra
       inferior del sistema. En el resto de móviles vale 0. */
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));

    display: inline-flex;
    align-items: center;
    gap: .6rem;
    height: 56px;
    padding: 0 1.1rem 0 1rem;
    border-radius: 999px;
    background-color: #25D366;
    color: #fff;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .38),
                0 2px 8px rgba(15, 30, 58, .18);
    text-decoration: none;
    transition: background-color .2s ease, transform .25s cubic-bezier(.2,.8,.2,1),
                box-shadow .25s ease, opacity .3s ease, visibility .3s ease;
}
.ep-wa-float:hover {
    background-color: #1EBE5B;
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(37, 211, 102, .45), 0 3px 10px rgba(15, 30, 58, .2);
}
.ep-wa-float:focus-visible {
    outline: 3px solid #0F1E3A;
    outline-offset: 3px;
}

.ep-wa-float__icono {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ep-wa-float__texto {
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

/* Onda que late para llamar la atención sin molestar. Va detrás del botón
   y no captura clics. */
.ep-wa-float__eco {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background-color: #25D366;
    animation: ep-eco 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes ep-eco {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.35); opacity: 0;   }
    100% { transform: scale(1.35); opacity: 0;   }
}

/* Oculto hasta que el visitante empieza a bajar: en el hero ya tiene los
   dos botones grandes, y ahí solo estorbaría. La clase la pone script.js. */
.ep-wa-float {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
}
.ep-wa-float--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* En móvil solo el círculo: la palabra ocuparía demasiado ancho. */
@media (max-width: 639px) {
    .ep-wa-float {
        width: 56px;
        padding: 0;
        justify-content: center;
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
    .ep-wa-float__texto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ep-wa-float__eco { animation: none; opacity: 0; }
    .ep-wa-float, .ep-wa-float:hover { transition: opacity .2s ease; transform: none; }
}


/* --------------------------------------------------------------------------
   15. MENÚ QUE MARCA LA SECCIÓN ACTUAL
   --------------------------------------------------------------------------
   La clase .ep-nav-activo la pone y quita script.js según la sección que
   ocupa la pantalla. Antes los cinco enlaces se veían iguales siempre y el
   visitante no sabía en qué parte de la página estaba.
   -------------------------------------------------------------------------- */

.ep-header nav a:not(.btn-primary) {
    position: relative;
    padding-bottom: 4px;
}

/* La barrita roja: existe siempre, pero con ancho cero. Al activarse crece
   de izquierda a derecha. Animar una escala es mucho más suave que animar
   el ancho, porque no obliga al navegador a recalcular el diseño. */
.ep-header nav a:not(.btn-primary)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: #E30613;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}

.ep-header nav a.ep-nav-activo {
    color: #FFFFFF;
}
.ep-header nav a.ep-nav-activo::after {
    transform: scaleX(1);
}

/* El menú móvil también está dentro de un <nav>, así que heredaba la
   barrita de arriba y salía una línea cruzada. Aquí se anula. */
.ep-header__menu a::after { display: none; }

/* En el menú móvil se marca con un filete a la izquierda. */
.ep-header__menu a.ep-nav-activo {
    color: #FFFFFF;
    border-left: 3px solid #E30613;
    padding-left: .75rem;
    margin-left: -.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .ep-header nav a::after { transition: none; }
}


/* --------------------------------------------------------------------------
   16. CÓMO TRABAJAMOS — los cuatro pasos
   -------------------------------------------------------------------------- */

.ep-pasos {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .ep-pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ep-pasos { grid-template-columns: repeat(4, 1fr); } }

.ep-paso {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 0 0 1px rgba(15, 30, 58, .06),
                0 10px 26px rgba(15, 30, 58, .06);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.ep-paso:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 0 1px rgba(227, 6, 19, .12),
                0 20px 44px rgba(15, 30, 58, .13);
}

/* Línea de puntos que une un paso con el siguiente. Solo en escritorio,
   donde los cuatro van en fila: en móvil van apilados y no tendría sentido. */
@media (min-width: 1024px) {
    .ep-paso:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 3.05rem;
        right: -1.5rem;
        width: 1.5rem;
        border-top: 2px dashed #C6D0DE;
    }
}

.ep-paso__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}

/* El número grande y hueco: marca el orden sin robar protagonismo al título. */
.ep-paso__num {
    font-family: Montserrat, Inter, sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #E30613;   /* solo el contorno */
    letter-spacing: -.02em;
}

.ep-paso__ico {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(140deg, #E30613, #0F1E3A);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ep-paso__ico svg { width: 22px; height: 22px; }

.ep-paso__titulo {
    font-weight: 700;
    font-size: 1.02rem;
    color: #0F172A;
    line-height: 1.3;
}
.ep-paso__desc {
    margin-top: .5rem;
    font-size: .875rem;
    color: #64748B;
    line-height: 1.6;
}

/* El plazo, en verde: es el dato que más tranquiliza y conviene que destaque. */
.ep-paso__plazo {
    margin-top: 1rem;
    display: inline-block;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(22, 163, 74, .09);
    color: #15803D;
    font-size: .72rem;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .ep-paso:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   17. PREGUNTAS FRECUENTES
   --------------------------------------------------------------------------
   Acordeón con <details>/<summary>, que ya trae el navegador: abre y cierra
   solo, funciona con teclado y lo entienden los lectores de pantalla. Cero
   JavaScript. El atributo name="faq" hace que al abrir una se cierre la otra.
   -------------------------------------------------------------------------- */

.ep-faq {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ep-faq__item {
    background: #fff;
    border: 1px solid #E7EDF5;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ep-faq__item[open] {
    border-color: rgba(227, 6, 19, .28);
    box-shadow: 0 10px 28px rgba(15, 30, 58, .08);
}

.ep-faq__preg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .98rem;
    color: #0F172A;
    list-style: none;              /* fuera el triangulito por defecto */
    user-select: none;
}
.ep-faq__preg::-webkit-details-marker { display: none; }   /* Safari */
.ep-faq__preg:hover { color: #E30613; }

/* El signo +: dos rayas cruzadas. Al abrir, la vertical gira y desaparece,
   así que se convierte en un − sin cambiar de elemento. */
.ep-faq__signo {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.ep-faq__signo::before,
.ep-faq__signo::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    border-radius: 2px;
    background: #E30613;
    transform: translateY(-50%);
    transition: transform .28s ease;
}
.ep-faq__signo::after { transform: translateY(-50%) rotate(90deg); }
.ep-faq__item[open] .ep-faq__signo::after { transform: translateY(-50%) rotate(0deg); }

.ep-faq__resp {
    padding: 0 1.25rem 1.25rem;
    color: #64748B;
    font-size: .9rem;
    line-height: 1.65;
}

.ep-faq__enlace {
    color: #E30613;
    font-weight: 600;
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .ep-faq__signo::before,
    .ep-faq__signo::after { transition: none; }
}


/* --------------------------------------------------------------------------
   18. TESTIMONIOS
   -------------------------------------------------------------------------- */

.ep-testis {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .ep-testis { grid-template-columns: repeat(3, 1fr); } }

.ep-testi {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24px;
    padding: 2rem 1.5rem 1.5rem;
    box-shadow: 0 0 0 1px rgba(15, 30, 58, .06),
                0 10px 26px rgba(15, 30, 58, .06);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.ep-testi:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 0 1px rgba(227, 6, 19, .12),
                0 20px 44px rgba(15, 30, 58, .13);
}

.ep-testi__comilla {
    width: 38px;
    height: 38px;
    color: #E30613;
    opacity: .16;
    margin-bottom: .5rem;
}

.ep-testi__texto {
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
    color: #334155;
    flex-grow: 1;              /* empuja el pie al fondo: los tres alineados */
}

.ep-testi__pie {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #EEF2F7;
}

.ep-testi__avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(140deg, #E30613, #0F1E3A);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ep-testi__nombre {
    display: block;
    font-weight: 700;
    font-size: .9rem;
    color: #0F172A;
}
.ep-testi__cargo {
    display: block;
    font-size: .78rem;
    color: #7C8AA0;
    margin-top: .1rem;
}

@media (prefers-reduced-motion: reduce) {
    .ep-testi:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   19. BOTÓN VOLVER ARRIBA
   --------------------------------------------------------------------------
   Se coloca encima del de WhatsApp, no al lado: en móvil no hay ancho para
   dos botones en la misma línea sin tapar contenido.
   -------------------------------------------------------------------------- */

.ep-arriba {
    position: fixed;
    z-index: 44;                     /* justo por debajo del de WhatsApp (45) */
    right: 1.25rem;
    bottom: calc(1.25rem + 56px + .75rem + env(safe-area-inset-bottom, 0px));

    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E2E8F0;
    color: #0F1E3A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(15, 30, 58, .16);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease,
                background-color .2s ease, color .2s ease;
}
.ep-arriba svg { width: 19px; height: 19px; }

.ep-arriba--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ep-arriba:hover {
    background: #0F1E3A;
    border-color: #0F1E3A;
    color: #fff;
}
.ep-arriba:focus-visible {
    outline: 3px solid #E30613;
    outline-offset: 3px;
}

@media (max-width: 639px) {
    .ep-arriba {
        right: 1rem;
        bottom: calc(1rem + 56px + .65rem + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ep-arriba { transition: opacity .2s ease, visibility .2s ease; transform: none; }
}


/* --------------------------------------------------------------------------
   20. VIDEO DE FONDO DEL HERO (opcional)
   --------------------------------------------------------------------------
   Va DEBAJO del velo y del contenido. Si no hay archivo de video, el
   elemento queda vacío y sigue viéndose el background-image de la sección,
   así que la web no cambia en absoluto.
   -------------------------------------------------------------------------- */

.ep-hero__video {
    position: absolute;
    inset: 0;                  /* sin desbordamiento: ya no hay desenfoque */
    width: 100%;
    height: 100%;
    object-fit: cover;         /* llena el hero sin deformarse */
    object-position: center;
    z-index: 0;
    pointer-events: none;

    /* Visible desde el inicio: mientras carga se ve el poster, que es la
       misma imagen que ya estaba de fondo, así que no hay parpadeo. */
    opacity: 1;

}

/* El velo y el contenido tienen que quedar por encima del video. */
.ep-hero__scrim { z-index: 1; }
.ep-hero > .relative { position: relative; z-index: 2; }


/* --------------------------------------------------------------------------
   21. VIDEO DE YOUTUBE COMO FONDO DEL HERO
   --------------------------------------------------------------------------
   Se incrusta con el reproductor de YouTube (la vía que el propio YouTube
   permite). El iframe se agranda hasta cubrir el hero, se recorta lo que
   sobra y se desactiva el clic para que nadie interactúe con el reproductor.
   -------------------------------------------------------------------------- */

.ep-hero__yt {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;      /* el reproductor no recibe clics */
}
.ep-hero__yt--listo { opacity: 1; }

/* Un video 16:9 nunca encaja exacto en el hero. Lo hacemos más grande que
   el contenedor por los dos lados y lo centramos: sobra por arriba y abajo
   o por los lados, y el resto se recorta. */
.ep-hero__yt iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;           /* 100 / (16/9) */
    min-height: 100%;
    min-width: 177.78%;        /* 100 * (16/9) */
    border: 0;
    pointer-events: none;
}



/* --------------------------------------------------------------------------
   22. HERO OSCURO — textos invertidos
   --------------------------------------------------------------------------
   Al poner el velo oscuro, todo lo que iba en tinta oscura tiene que pasar
   a blanco. Se hace aquí en lugar de tocar clase por clase en el HTML: las
   reglas ".ep-hero ..." pesan más que las de Tailwind y ganan la cascada.
   -------------------------------------------------------------------------- */

/* Etiqueta superior */
.ep-hero .bg-red-50 {
    background-color: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #FF8A94;
}

/* Titular */
.ep-hero .ep-hero__title { color: #FFFFFF; }

/* La palabra destacada usaba un degradado que acaba en azul casi negro:
   sobre fondo oscuro desaparecía. Se sustituye por una versión luminosa. */
.ep-hero .ep-hero__title span {
    background-image: linear-gradient(180deg, #FF8A94, #FF4356 60%, #E30613);
}

/* Párrafo */
.ep-hero .text-slate-600 { color: rgba(255, 255, 255, .86); }
.ep-hero .text-slate-600 strong { color: #FFFFFF; }

/* Botón secundario: era borde y texto oscuros */
.ep-hero .btn-outline {
    border-color: rgba(255, 255, 255, .65);
    color: #FFFFFF;
}
.ep-hero .btn-outline:hover {
    background-color: rgba(255, 255, 255, .12);
    border-color: #FFFFFF;
}

/* Cifras */
.ep-hero .text-brand-navy { color: #FFFFFF; }
.ep-hero .text-slate-500  { color: rgba(255, 255, 255, .72); }


/* --------------------------------------------------------------------------
   25. TARJETA DE LLAMADA A LA ACCIÓN EN CONTACTO
   --------------------------------------------------------------------------
   Llevaba el degradado de marca (rojo intenso -> azul), demasiado fuerte al
   lado del formulario. Pasa a azul marino con un matiz granate en la esquina:
   mantiene la familia de color de la marca, pero con un tono más sobrio.
   Acotado a #contacto: el degradado rojo se usa en más sitios y no se toca.
   -------------------------------------------------------------------------- */

#contacto .bg-brand-gradient {
    background-image: linear-gradient(140deg,
                      #0F1E3A 0%,
                      #16274A 48%,
                      #351824 100%);
}

/* (El botón "Llamar ahora" se gobierna desde .ep-cta-tel, más abajo.
   La regla que había aquí llevaba un ID y ganaba por especificidad,
   impidiendo que el cian se aplicara.) */


/* --------------------------------------------------------------------------
   24. FOTOS DE FONDO EN LAS SECCIONES QUE NO LAS TENÍAN
   --------------------------------------------------------------------------
   Nosotros, Cómo trabajamos, Proyectos, Testimonios y Preguntas frecuentes
   iban en blanco o gris liso, mientras Servicios y Contacto sí llevaban foto.
   Ahora todas llevan, alternando dos imágenes de torres de alta tensión para
   que no se repita el mismo paisaje en secciones seguidas.

   El velo es fuerte a propósito: estas fotos tienen cielo y campo, mucho más
   movidos que los planos técnicos de fondo5. Sin él, el texto oscuro y las
   tarjetas blancas no se leerían.
   -------------------------------------------------------------------------- */

.ep-fondo {
    /* "cover" recorta lo que sobra para llenar la sección. Como las fotos son
       casi cuadradas (1200x896) y las secciones son anchas y bajas, el recorte
       se comía cielo y suelo. Con "center center" el encuadre se mantiene
       centrado en lugar de perder siempre la misma mitad. */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
.ep-fondo--dia        { background-image: url('../images/fondos/torres-dia.webp'); }
.ep-fondo--atardecer  { background-image: url('../images/fondos/torres-atardecer.webp'); }
.ep-fondo--subestacion { background-image: url('../images/fondos/subestacion.webp'); }
.ep-fondo--sala        { background-image: url('../images/fondos/sala-electrica.webp'); }
.ep-fondo--paneles     { background-image: url('../images/fondos/paneles-solares.webp'); }

/* Encuadre afinado por sección. Estas dos son 16:9, casi la proporción de
   una sección, así que el recorte es mínimo; solo se ajusta el punto de
   anclaje para que el contenido interesante quede a la vista. */
#proceso   { background-position: 50% 45%; }   /* los tableros, no el techo */
#proyectos { background-position: 50% 60%; }   /* los paneles y los técnicos */

.ep-fondo__velo {
    /* 75%: la foto se percibe con claridad sin que el texto sufra.
       Más abajo se refuerza la legibilidad de lo que va directamente
       encima del fondo (las tarjetas son opacas y no lo necesitan). */
    background-color: rgba(240, 243, 249, .78);
    pointer-events: none;
}

/* Los encabezados de sección van sobre la foto, no dentro de una tarjeta.
   Un halo blanco muy tenue los despega del fondo sin cambiarles el color
   ni añadir recuadros. */
.ep-fondo h2,
.ep-fondo h3,
.ep-fondo > .relative > .text-center p,
.ep-fondo .text-brand-red {
    text-shadow: 0 1px 3px rgba(255, 255, 255, .95),
                 0 0 14px rgba(255, 255, 255, .75);
}

/* Sobre foto, estos dos se quedaban por debajo del mínimo legible en las
   zonas oscuras. Se oscurecen lo justo: en la práctica no se distingue del
   color original, pero pasa de 3.3 a casi 5 de contraste. */
.ep-fondo .text-slate-500 { color: #475569; }
.ep-fondo .text-brand-red { color: #B00E18; }

/* El halo de arriba alcanzaba también a los títulos DENTRO de las tarjetas,
   que no lo necesitan: las tarjetas son opacas y nunca tocan la foto. En la
   tarjeta oscura de "¿Por qué elegirnos?" el resultado era letra blanca con
   resplandor blanco, como un neón. Aquí se anula en todas las tarjetas. */
.ep-fondo .ep-foco *,
.ep-fondo .ep-service-card *,
.ep-fondo .ep-team__card *,
.ep-fondo .ep-paso *,
.ep-fondo .ep-testi *,
.ep-fondo .ep-faq__item *,
.ep-fondo .bg-white *,
.ep-fondo .bg-slate-50 *,
.ep-fondo .ep-proj__card * {
    text-shadow: none;
}

/* Dentro de una tarjeta el color de marca tampoco necesita oscurecerse:
   el fondo es liso y el contraste ya es correcto. */
.ep-fondo .ep-service-card .text-brand-red,
.ep-fondo .ep-proj__card .text-brand-red { color: #E30613; }


/* --------------------------------------------------------------------------
   25. BOTÓN "HABLA CON UN INGENIERO"
   --------------------------------------------------------------------------
   Antes pasaba de blanco a un gris casi idéntico: el cliente no percibía que
   fuera pulsable. Ahora se enciende en el rojo de marca, se eleva y la flecha
   avanza, para invitar al clic.
   -------------------------------------------------------------------------- */

.ep-btn-ing {
    position: relative;
    overflow: hidden;
    transition: background-color .28s ease,
                color .28s ease,
                transform .28s cubic-bezier(.2, .8, .2, 1),
                box-shadow .28s ease;
}

.ep-btn-ing:hover {
    /* Cian eléctrico: es el color opuesto al azul marino de la tarjeta, así
       que el ojo va directo al botón. El texto va oscuro porque sobre un
       color claro y saturado el blanco no alcanza el contraste mínimo. */
    background-color: #22D3EE;
    color: #0F172A;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(34, 211, 238, .50);
}

/* La flecha se desplaza: refuerza la idea de "seguir adelante". */
.ep-btn-ing__flecha {
    display: inline-block;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.ep-btn-ing:hover .ep-btn-ing__flecha { transform: translateX(5px); }

/* Con el teclado (Tab) tiene que verse igual de claro que con el ratón. */
.ep-btn-ing:focus-visible {
    background-color: #22D3EE;
    color: #0F172A;
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ep-btn-ing,
    .ep-btn-ing__flecha { transition: background-color .2s ease, color .2s ease; }
    .ep-btn-ing:hover { transform: none; }
    .ep-btn-ing:hover .ep-btn-ing__flecha { transform: none; }
}


/* --------------------------------------------------------------------------
   26. FOCO EN "¿POR QUÉ ELEGIRNOS?"
   --------------------------------------------------------------------------
   Un bombillo en la esquina con un halo cálido que late, como una luz
   encendida. La animación es lenta (4,5 s por ciclo) a propósito: un
   parpadeo rápido cansa la vista y distrae de lo que dice la tarjeta.
   -------------------------------------------------------------------------- */

.ep-foco { isolation: isolate; }

/* El halo: un degradado radial ámbar que crece y se atenúa. */
.ep-foco__halo {
    position: absolute;
    top: -70px;
    right: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(255, 214, 102, .55) 0%,
                rgba(255, 184, 48, .30) 35%,
                rgba(255, 160, 20, .10) 60%,
                transparent 72%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
    animation: ep-alumbrar 4.5s ease-in-out infinite;
}

@keyframes ep-alumbrar {
    0%, 100% { opacity: .45; transform: scale(1);    }
    50%      { opacity: .95; transform: scale(1.12); }
}

/* El bombillo, dentro del halo */
.ep-foco__bombillo {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 38px;
    height: 38px;
    color: #FFD166;
    pointer-events: none;
    z-index: 1;
    animation: ep-filamento 4.5s ease-in-out infinite;
}

/* El bombillo brilla al compás del halo: cuando la luz crece, el trazo
   se aclara y proyecta su propio resplandor. */
@keyframes ep-filamento {
    0%, 100% { color: #F6C453; filter: drop-shadow(0 0 4px  rgba(255,193,60,.45)); }
    50%      { color: #FFE9A8; filter: drop-shadow(0 0 14px rgba(255,205,80,.95)); }
}

/* El contenido por encima de la luz */
.ep-foco > h3,
.ep-foco > ul,
.ep-foco > a { position: relative; z-index: 2; }

/* Quien pidió menos movimiento ve la luz encendida, pero quieta. */
@media (prefers-reduced-motion: reduce) {
    .ep-foco__halo { animation: none; opacity: .7; }
    .ep-foco__bombillo {
        animation: none;
        color: #FFD98A;
        filter: drop-shadow(0 0 8px rgba(255,200,70,.7));
    }
}


/* --------------------------------------------------------------------------
   27. TARJETAS DE "NUESTRO PERSONAL" EN PLOMO OSCURO
   --------------------------------------------------------------------------
   Mismo tono que el degradado del header (#2C313A), para que la web use una
   sola familia de grises. Al cambiar el fondo hay que invertir lo de dentro:
   el nombre, la etiqueta del cargo y la línea separadora.
   -------------------------------------------------------------------------- */

.ep-team__card {
    background: #2C313A;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06),
                0 12px 30px rgba(15, 30, 58, .28);
}
.ep-team__card:hover {
    background: #333943;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14),
                0 22px 48px rgba(15, 30, 58, .38);
}

.ep-team__name { color: #FFFFFF; }

/* La etiqueta del cargo iba en rojo sobre rosa claro: sobre plomo oscuro
   necesita fondo translúcido y un rojo aclarado. */
.ep-team__role {
    background: rgba(255, 122, 134, .16);
    color: #FF9AA3;
}


/* --------------------------------------------------------------------------
   28. ACENTO CIAN EN PREGUNTAS FRECUENTES
   --------------------------------------------------------------------------
   El signo + iba en el rojo de marca, igual que casi todo lo demás. En cian
   destaca sin competir con los botones rojos y enlaza con el acento del
   botón "Habla con un ingeniero".

   Ojo con el tono: el cian claro (#22D3EE) sobre tarjeta blanca da 1.8 de
   contraste, muy por debajo del mínimo de 3 para un elemento gráfico. Se usa
   una versión más profunda, que sigue siendo llamativa y sí se distingue.
   -------------------------------------------------------------------------- */

.ep-faq__signo::before,
.ep-faq__signo::after { background: #0891B2; }

.ep-faq__preg:hover { color: #0891B2; }

.ep-faq__item[open] {
    border-color: rgba(8, 145, 178, .35);
    box-shadow: 0 10px 28px rgba(8, 145, 178, .14);
}

/* Al abrirse, el signo se intensifica */
.ep-faq__item[open] .ep-faq__signo::before,
.ep-faq__item[open] .ep-faq__signo::after { background: #06798F; }

.ep-faq__enlace { color: #0891B2; }


/* --------------------------------------------------------------------------
   29. BOTONES DE LA TARJETA DE CONTACTO
   --------------------------------------------------------------------------
   Antes el cambio al pasar el ratón era casi invisible: el de WhatsApp iba
   de blanco a un gris idéntico, y el de llamar solo se teñía un 10%.
   -------------------------------------------------------------------------- */

.ep-cta-wa,
.ep-cta-tel {
    transition: background-color .28s ease,
                color .28s ease,
                border-color .28s ease,
                transform .28s cubic-bezier(.2, .8, .2, 1),
                box-shadow .28s ease;
}

/* --- WhatsApp Directo: verde de la marca --- */
.ep-cta-wa:hover,
.ep-cta-wa:focus-visible {
    /* Texto OSCURO, no blanco: sobre el verde de WhatsApp el blanco da 1.8
       de contraste y no se lee. Con texto oscuro sube a 9.4. */
    background-color: #25D366;
    color: #0F172A;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, .45);
}

/* --- Llamar ahora: cian, el acento de la web --- */
.ep-cta-tel {
    /* Blanco sólido, igual que el de WhatsApp: el borde translúcido se veía
       apagado sobre el azul marino. Los dos pesan lo mismo en reposo y se
       diferencian al pasar el ratón, uno en verde y otro en cian. */
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: #0F172A;
}
.ep-cta-tel:hover,
.ep-cta-tel:focus-visible {
    background-color: #22D3EE;
    border-color: #22D3EE;
    color: #0F172A;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(34, 211, 238, .45);
}

.ep-cta-wa:focus-visible,
.ep-cta-tel:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ep-cta-wa:hover, .ep-cta-tel:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* 30. ANCLAS: QUE EL TÍTULO NO QUEDE DEBAJO DEL HEADER                */
/* ------------------------------------------------------------------ */
/* El header es sticky y mide 73px. Sin esto, al hacer clic en un      */
/* enlace del menú la sección se posiciona en y=0 y el encabezado      */
/* queda tapado. 88px = 73 del header + 15 de respiro.                 */
section[id] {
    scroll-margin-top: 88px;
}


/* ------------------------------------------------------------------ */
/* 31. CRÉDITO "DESARROLLADO POR B1TSOFT" CON LOGO                     */
/* ------------------------------------------------------------------ */
/* El logo se guarda a 66px (3x) y se muestra a 22px: nítido en        */
/* pantallas retina. alt="" porque el nombre ya va escrito al lado.    */
.ep-credito {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: .2rem;
    padding: .2rem 0;              /* área de toque de ~26px */
    vertical-align: middle;
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}
.ep-credito__logo {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;           /* el PNG es 66x64: no se deforma */
    flex-shrink: 0;
}
.ep-credito:hover,
.ep-credito:focus-visible {
    color: #38BDF8;                /* celeste, a juego con el logo */
}


/* ------------------------------------------------------------------ */
/* 32. PIE DE PÁGINA CENTRADO, SIN QUE LO TAPEN LOS BOTONES FLOTANTES  */
/* ------------------------------------------------------------------ */
/* El © y el crédito van centrados, uno debajo del otro. Los botones   */
/* flotantes viven en la esquina derecha, así que se reserva a los dos */
/* costados su ancho: el texto nunca llega hasta ellos.                */
.ep-footer-base {
    flex-direction: column;        /* anula md:flex-row */
    justify-content: center;
    text-align: center;
    padding-left: 76px;            /* móvil: círculo de 56px + 16px + aire */
    padding-right: 76px;
}
@media (min-width: 640px) {
    .ep-footer-base {              /* desde 640px WhatsApp muestra "Escríbenos" (~156px) */
        padding-left: 190px;
        padding-right: 190px;
    }
}