/* =========================================================
   GRUPO DELMEX — Contacto
   Cada división ocupa un bloque partido en dos: los datos de
   un lado y la foto del otro, alternando el lado.
   Requiere css/rediseno.css y css/tablas.css cargados antes
   (de ahí salen .prod-hero y los marcos .foto).
   ========================================================= */

/* ---------- El bloque ---------- */

.bloque-contacto {
    display: grid;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 26px 55px -32px rgba(22, 34, 63, .8);
}

@media (min-width: 1024px) {
    .bloque-contacto {
        grid-template-columns: 1fr 1fr;
        min-height: 430px;
    }

    /* En el segundo bloque la foto pasa a la izquierda. El orden del HTML
       no cambia: en móvil los datos deben ir siempre primero. */
    .bloque-invertido .bloque-info {
        order: 2;
    }
}

/* ---------- Mitad de los datos ---------- */

.bloque-info {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 1.75rem;
    color: #fff;
    display: flex;
    align-items: center;
}

@media (min-width: 640px) {
    .bloque-info {
        padding: 3rem 2.75rem;
    }
}

/* Los degradados van fijos: cualquier capa encima —manchas, mezclas—
   termina lavando el color, y estos tonos vivos son el punto.
   Los tramos oscuros se recortaron al inicio y el resto sube de
   saturación: antes el bloque abría en verde bosque y en rojo quemado, y
   esa esquina apagada era la que jalaba hacia abajo toda la pieza. */
.info-verde {
    background: linear-gradient(125deg,
            #12864C 0%,
            #17A661 26%,
            #29C878 52%,
            #45E08F 74%,
            #17A661 100%);
}

.info-fuego {
    background: linear-gradient(125deg,
            #C42D06 0%,
            #E85410 24%,
            #FA7A12 48%,
            #FFA524 72%,
            #FFC93C 100%);
}

/* ---------- La obra que se levanta (Construcción) ----------
   Columnas de piezas que caen y se apilan en el piso del bloque, como una
   estructura en proceso. Las crea y las mueve el script; aquí solo va su
   aspecto: rectángulos translúcidos, sin color propio, para que se lean
   como volúmenes y no como fichas de un juego. */

.capa-obra {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.obra-columna {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    padding: 0 2px;
}

.obra-pieza {
    display: block;
    width: 100%;
    border-radius: 3px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    will-change: transform, opacity;
}

/* Rescoldo al pie del bloque de forja: de ahí salen las chispas */
.capa-brasa {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -14%;
    height: 32%;
    opacity: .45;
    transform-origin: bottom center;
    background: radial-gradient(ellipse at 50% 100%,
            rgba(255, 176, 60, .85) 0%,
            rgba(226, 84, 15, .45) 35%,
            transparent 70%);
    filter: blur(26px);
    pointer-events: none;
}

/* ---------- Destello sobre el color ----------
   Una franja diagonal que cruza el bloque cada tanto, como la luz que corre
   sobre una lámina pulida. */

.bloque-brillo {
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 55%;
    opacity: 0;
    transform: skewX(-16deg);
    /* Dos intensidades en la misma franja: un halo ancho y suave y, en
       medio, un filo estrecho y brillante. Así el paso de la luz tiene
       relieve, como sobre lámina pulida, en vez de ser una banda plana. */
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .07) 30%,
            rgba(255, 255, 255, .18) 46%,
            rgba(255, 255, 255, .55) 50%,
            rgba(255, 255, 255, .18) 54%,
            rgba(255, 255, 255, .07) 70%,
            rgba(255, 255, 255, 0) 100%);
    filter: blur(5px);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* ---------- Chispas (Forja) ----------
   Las crea el script: suben desde el piso del bloque, se desvían un poco
   y se apagan. Al pasar el mouse suben casi al doble de velocidad. */

.capa-chispas {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.chispa {
    position: absolute;
    border-radius: 50%;
    background: #FFD98A;
    box-shadow: 0 0 9px rgba(255, 176, 60, .95);
    will-change: transform, opacity;
}

.bloque-contenido {
    position: relative;
    z-index: 2;
    width: 100%;
}

.bloque-ico {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 18px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    margin-bottom: 1.1rem;
    transition: transform .4s ease;
}

.bloque-contacto:hover .bloque-ico {
    transform: scale(1.06) rotate(-5deg);
}

.bloque-titulo {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.15;
    margin: 0 0 .8rem;
}

.bloque-desc {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 1.6rem;
    max-width: 46ch;
}

/* ---------- Los correos ---------- */

.bloque-correos {
    display: grid;
    gap: .55rem;
}

.correo {
    display: block;
    padding: .7rem .95rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(10, 20, 36, .42);
    color: #fff;
    transition: background-color .28s ease, border-color .28s ease, transform .28s ease;
}

.correo:hover {
    background: rgba(10, 20, 36, .6);
    border-color: rgba(255, 255, 255, .55);
    transform: translateX(5px);
}

.correo-rol {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    margin-bottom: .15rem;
}

.correo-dir {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 14.5px;
    font-weight: 600;
    word-break: break-all;
}

.correo-dir i {
    font-size: 10px;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity .28s ease, transform .28s ease;
}

.correo:hover .correo-dir i {
    opacity: .9;
    transform: translateX(0);
}

/* ---------- Correo destacado: el que se calienta ----------
   Al pasar el cursor, el renglón se comporta como una pieza entrando al
   horno: el calor entra por la izquierda, el filo inferior se pone al rojo
   vivo, el texto se aviva y suben tres chispas desfasadas. Sin íconos: la
   temperatura es el distintivo. */

.correo-brasa {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* En reposo, un filo apagado abajo: insinúa que ahí hay algo antes de que
   el cursor llegue. */
.correo-brasa {
    box-shadow: inset 0 -2px 0 rgba(255, 150, 40, .35);
}

/* El frente de calor: entra por la izquierda y recorre el renglón */
.correo-brasa::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    /* El calor se concentra en los bordes y baja al centro: por ahí pasa el
       texto, y con el ámbar a plena intensidad las letras blancas se
       perdían. */
    background:
        radial-gradient(ellipse 55% 150% at 8% 50%, rgba(255, 232, 165, .8) 0%, transparent 72%),
        linear-gradient(180deg, rgba(20, 6, 2, .5), rgba(20, 6, 2, .5)),
        linear-gradient(90deg,
            rgba(255, 190, 80, .95) 0%,
            rgba(255, 140, 30, .7) 34%,
            rgba(214, 74, 12, .42) 64%,
            transparent 90%);
    transform: translateX(-100%);
    transition: transform .7s cubic-bezier(.3, .7, .3, 1), opacity .25s ease;
}

.correo-brasa:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.correo-brasa:hover {
    /* El fondo propio del renglón se mantiene oscuro bajo el calor */
    background: rgba(14, 5, 2, .55);
    border-color: rgba(255, 205, 110, .95);
    /* Filo inferior al rojo vivo y resplandor alrededor */
    box-shadow:
        inset 0 -2px 0 rgba(255, 210, 110, .95),
        inset 0 0 26px -4px rgba(255, 170, 60, .6),
        0 14px 30px -14px rgba(255, 120, 30, .95),
        0 0 34px -10px rgba(255, 150, 50, .8);
    transform: translateX(7px);
}

/* El texto también se calienta */
/* Letras en blanco cálido con sombra oscura detrás: el halo ámbar de antes
   las fundía con el fondo encendido en vez de despegarlas. */
.correo-brasa:hover .correo-dir {
    color: #FFF6E4;
    text-shadow:
        0 1px 3px rgba(28, 8, 0, .9),
        0 0 18px rgba(28, 8, 0, .55);
}

/* --- Chispas --- */

.correo-brasa::after {
    content: "";
    position: absolute;
    left: 18%;
    bottom: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: #FFE3A6;
    box-shadow:
        0 0 12px rgba(255, 176, 60, .95),
        26px 6px 0 -1px #FFD98A,
        58px 2px 0 -1.5px #FFC46B;
}

/* Las tres chispas suben juntas pero con distinta altura y deriva, por el
   desfase que les da el box-shadow: se ven como un puñado, no como una
   fila. */
.correo-brasa:hover::after {
    animation: correo-chispa 1.6s ease-out .2s infinite;
}

@keyframes correo-chispa {
    0% { opacity: 0; transform: translate(0, 0) scale(.55); }
    15% { opacity: 1; }
    70% { opacity: .85; }
    100% { opacity: 0; transform: translate(22px, -58px) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {

    .correo-brasa::before {
        transition: opacity .3s ease;
        transform: none;
    }

    .correo-brasa:hover {
        transform: none;
    }

    .correo-brasa:hover::after {
        animation: none;
    }
}

/* ---------- Mitad de la foto ---------- */

.bloque-foto {
    border: 0;
    border-radius: 0;
    min-height: 260px;
}

@media (min-width: 1024px) {
    .bloque-foto {
        min-height: 100%;
    }
}

.bloque-contacto:hover .bloque-foto img {
    transform: scale(1.04);
}

/* ---------- Datos generales ---------- */

.datos-generales {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .datos-generales {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

.dato {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(22, 34, 63, .08);
    box-shadow: 0 14px 32px -28px rgba(22, 34, 63, .6);
    transition: transform .3s ease, box-shadow .3s ease;
}

a.dato:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 40px -26px rgba(22, 34, 63, .7);
}

.dato-ico {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(27, 78, 155, .1);
    color: var(--azul);
    font-size: 15px;
}

.dato-rotulo {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(22, 34, 63, .5);
    margin-bottom: .15rem;
}

.dato-valor {
    display: block;
    font-size: 14px;
    color: var(--navy);
    font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {

    .capa-obra,
    .capa-chispas,
    .capa-brasa,
    .bloque-brillo {
        display: none;
    }

    .correo:hover,
    .bloque-contacto:hover .bloque-ico,
    .bloque-contacto:hover .bloque-foto img,
    a.dato:hover {
        transform: none !important;
    }
}