/* =========================================================================
   WIZAY - SECCIÓN DE CONTACTO & FORMULARIO TEATRAL (PHP 8.4)
   Ubicación: /css/contacto.css
   ========================================================================= */

#contacto {
    position: relative;
    padding: clamp(70px, 10vw, 120px) 20px clamp(80px, 11vw, 130px);
    background-color: var(--color-oscuro, #121212);
    overflow: hidden;
}

.contacto-fondo-trama {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(230, 213, 195, 0.08) 1.5px, transparent 1.5px);
    background-size: 4px 4px;
    pointer-events: none;
    z-index: 1;
}

.contacto-contenedor {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.contacto-titulo-principal {
    font-family: var(--fuente-titulos, 'Bodoni Moda', serif);
    font-size: clamp(2.4rem, 6vw, 4rem);
    color: var(--color-beige, #e6d5c3);
    text-align: center;
    margin-bottom: clamp(40px, 6vw, 65px);
    letter-spacing: 2px;
}

/* =========================================================================
   LA ENTRADA: una sola pieza con dos mitades (contacto | formulario)
   separadas por una línea de puntos perforada con el ✶ en medio,
   como los divisores "sello perforado" entre actos.
   ========================================================================= */
.contacto-grid {
    --pad: clamp(22px, 4vw, 46px);
    --perfo: 46px;                    /* ancho de la franja perforada */
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) var(--perfo) minmax(0, 1.05fr);
    gap: clamp(14px, 2.4vw, 30px);
    align-items: stretch;
    padding: var(--pad);
    background: rgba(18, 18, 18, 0.9);
    border: 2px dashed var(--color-naranja-trazo, #b84a28);
    border-radius: 10px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75);
}

/* Franja perforada: línea de puntos + dos muescas en el borde + sello central */
.contacto-perforacion {
    position: relative;
    margin-block: calc(-1 * var(--pad));   /* llega de borde a borde de la entrada */
    pointer-events: none;
}
.contacto-perforacion::before {            /* los puntos */
    content: '';
    position: absolute;
    left: 50%;
    top: 22px;
    bottom: 22px;
    width: 4px;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--color-naranja-trazo, #b84a28) 1.3px, transparent 1.8px) 50% 0 / 4px 11px repeat-y;
    opacity: 0.85;
}
.contacto-perforacion i {                  /* las muescas (agujeros del troquel) */
    position: absolute;
    left: 50%;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    border-radius: 50%;
    background: var(--color-oscuro, #121212);
    border: 2px dashed var(--color-naranja-trazo, #b84a28);
}
.contacto-perforacion i:first-child { top: -14px; }
.contacto-perforacion i:last-child  { bottom: -14px; }
.contacto-perforacion span {               /* el sello */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-oscuro, #121212);
    border: 1.5px dashed var(--color-naranja-trazo, #b84a28);
    color: var(--color-naranja-trazo, #b84a28);
    font-size: 1.15rem;
    line-height: 1;
}

/* Una columna: la franja pasa a ser horizontal, entre el contacto y el formulario */
@media (max-width: 991px) {
    .contacto-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 720px;
        width: 100%;
        margin-inline: auto;
    }
    .contacto-perforacion {
        height: var(--perfo);
        margin-block: 0;
        margin-inline: calc(-1 * var(--pad));
    }
    .contacto-perforacion::before {
        left: 22px;
        right: 22px;
        top: 50%;
        bottom: auto;
        width: auto;
        height: 4px;
        transform: translateY(-50%);
        background: radial-gradient(circle, var(--color-naranja-trazo, #b84a28) 1.3px, transparent 1.8px) 0 50% / 11px 4px repeat-x;
    }
    .contacto-perforacion i {
        top: 50%;
        margin: -13px 0 0 0;
    }
    .contacto-perforacion i:first-child { left: -14px; bottom: auto; }
    .contacto-perforacion i:last-child  { left: auto; right: -14px; bottom: auto; top: 50%; }
}

@media (max-width: 480px) {
    .contacto-grid { --pad: 18px; }
}


/* ENTRADA ANIMADA: todo el boleto aparece a la vez, muy despacio y sin cortes:
   el conjunto emerge (fundido + ligera subida), el hilo de puntos se dibuja de arriba
   abajo y el contenido va llegando en cascada solapada.
   (Las clases las pone main.js; sin JS, todo se ve de entrada.) */
.contacto-grid.ct-pendiente {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    will-change: opacity, transform;
}
.contacto-grid.ct-visible {
    transition: opacity 1.5s cubic-bezier(0.33, 0, 0.2, 1), transform 1.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* El hilo de puntos de la perforación se va dibujando; las muescas y el sello se posan después */
.contacto-grid.ct-pendiente .contacto-perforacion::before { clip-path: inset(0 0 100% 0); }
.contacto-grid.ct-visible .contacto-perforacion::before {
    clip-path: inset(0);
    transition: clip-path 1.7s cubic-bezier(0.45, 0, 0.2, 1) 0.35s;
}
.contacto-grid.ct-pendiente .contacto-perforacion span {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
}
.contacto-grid.ct-visible .contacto-perforacion span {
    transition: opacity 1.1s ease 0.9s, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.9s;
}

.contacto-grid.ct-pendiente .ct-item {
    opacity: 0;
    transform: translateY(18px);
}
.contacto-grid.ct-visible .ct-item {
    transition: opacity 1s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(0.3s + var(--i, 0) * 95ms);
}
@media (max-width: 991px) {
    .contacto-grid.ct-pendiente .contacto-perforacion::before { clip-path: inset(0 100% 0 0); }
}
@media (prefers-reduced-motion: reduce) {
    .contacto-grid.ct-pendiente { opacity: 1; transform: none; }
    .contacto-grid.ct-pendiente .contacto-perforacion::before { clip-path: none; }
    .contacto-grid.ct-pendiente .contacto-perforacion span { opacity: 1; transform: translate(-50%, -50%); }
    .contacto-grid.ct-pendiente .ct-item { opacity: 1; transform: none; }
}

/* =========================================================================
   COLUMNA IZQUIERDA: INFORMACIÓN Y CONTACTO DIRECTO
   ========================================================================= */
.contacto-col-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 3vw, 34px);
    height: 100%;
    container-type: inline-size;   /* el lema se calcula sobre el ancho real de la columna */
}

.contacto-lema-teatral {
    font-family: var(--fuente-titulos, 'Bodoni Moda', serif);
    font-size: clamp(1.8rem, 3.8vw, 2.7rem);
    color: var(--color-naranja-trazo, #b84a28);
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: 1px;
    /* Siempre en UNA línea: el tamaño nunca supera lo que cabe en la columna
       (el texto mide ~10,4 veces su tamaño de letra + 1px de espaciado por carácter). */
    font-size: min(clamp(1.8rem, 3.8vw, 2.7rem), calc((100cqw - 22px) / 10.6));
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.contacto-descripcion-texto {
    font-family: var(--fuente-textos, 'Montserrat', sans-serif);
    font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem);
    color: #d8c8b8;
    line-height: 1.7;
    font-weight: 300;
    text-wrap: balance;     /* si rompe, reparte las líneas por igual */
}
@media (max-width: 400px) {
    .contacto-descripcion-texto { font-size: 0.9rem; line-height: 1.6; }   /* máx. 2 líneas hasta 320 */
}

/* CAJA DE CONTACTO DIRECTO CON SVG */
.contacto-directo-caja {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contacto-directo-titulo {
    font-family: var(--fuente-titulos, 'Bodoni Moda', serif);
    color: var(--color-naranja-trazo, #b84a28);
    font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(184, 74, 40, 0.3);
}

.contacto-directo-fila {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(230, 213, 195, 0.12);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-beige, #e6d5c3);
    transition: all 0.25s ease;
}

.contacto-directo-fila:hover:not(.contacto-directo-estatico) {
    background: rgba(184, 74, 40, 0.12);
    border-color: var(--color-naranja-trazo, #b84a28);
    transform: translateX(4px);
}

.contacto-directo-fila:hover:not(.contacto-directo-estatico) .contacto-directo-valor {
    color: #ffffff;
}

.contacto-directo-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(107, 15, 26, 0.3);
    color: var(--color-naranja-trazo, #b84a28);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.contacto-directo-fila:hover:not(.contacto-directo-estatico) .contacto-directo-icono {
    background: var(--color-burdeos, #6b0f1a);
    color: #ffffff;
}

.contacto-directo-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.contacto-directo-etiqueta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-naranja-trazo, #b84a28);
    font-weight: 700;
}

.contacto-directo-etiqueta::after {   /* ······ entre etiqueta y valor */
    content: '';
    flex: 1;
    min-width: 12px;
    height: 2px;
    background: radial-gradient(circle, rgba(184, 74, 40, 0.75) 0.9px, transparent 1.3px) 0 50% / 7px 2px repeat-x;
    transform: translateY(-2px);
}

.contacto-directo-valor {
    overflow-wrap: anywhere;
    font-family: var(--fuente-titulos, 'Bodoni Moda', serif);
    font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
    font-weight: 600;
    color: var(--color-beige, #e6d5c3);
    transition: color 0.2s ease;
}

.contacto-directo-estatico {
    cursor: default;
}

/* Pantallas muy estrechas: las filas de contacto directo se aprietan un poco para que el correo quepa en una línea */
@media (max-width: 400px) {
    .contacto-directo-fila {
        gap: 12px;
        padding: 11px 13px;
    }
    .contacto-directo-icono {
        width: 36px;
        height: 36px;
    }
    .contacto-directo-valor {
        font-size: 0.96rem;
    }
}

/* CÁPSULA ESCÉNICA INFERIOR */
.contacto-nota-respuesta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px dashed rgba(230, 213, 195, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}

.contacto-nota-icono {
    color: var(--color-naranja-trazo, #b84a28);
    font-size: 1.2rem;
    line-height: 1;
}

.contacto-nota-texto {
    margin: 0;
    font-family: var(--fuente-textos, 'Montserrat', sans-serif);
    font-size: 0.82rem;
    line-height: 1.5;
    color: #b5a494;
}

/* =========================================================================
   COLUMNA DERECHA: EL GUION (FORMULARIO INTERACTIVO)
   ========================================================================= */
.contacto-col-formulario {
    position: relative;
    min-width: 0;
}
/* Las esquinas decorativas del marco antiguo ya no hacen falta */
.contacto-esquina-tl, .contacto-esquina-br {
    display: none;
}

/* =========================================================================
   AVISOS DE ENVÍO: una "nota de camerino" pegada con cinta de carrocero.
   Papel beige con puntos de trama, costura discontinua, trazo a mano alzada
   y subrayador. ÉXITO = la nota cae con gracia, el trazo se dibuja, estalla
   el confeti y se subraya en verde. ERROR = la nota VIBRA, el tachón se
   dibuja de golpe y el texto se subraya en ondas rojas.
   Las animaciones esperan a que el boleto termine de entrar (ct-pendiente).
   ========================================================================= */
.contacto-alerta {
    --acento: #1f7a4d;                 /* tinta del icono y de la costura */
    --lavado: rgba(60, 170, 110, 0.30);/* mancha de color en el papel */
    --papel: #efe3d3;
    --tinta: #1d1511;
    --rot: -1deg;
    --retardo: 0.15s;                  /* con la entrada del boleto pasa a 1s */
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    margin: 18px 0 26px;
    padding: 18px 20px 18px 16px;
    border-radius: 4px;
    background:
        radial-gradient(circle, rgba(107, 15, 26, 0.13) 1px, transparent 1.5px) 0 0 / 9px 9px,
        linear-gradient(100deg, var(--lavado), transparent 62%),
        var(--papel);
    color: var(--tinta);
    transform: rotate(var(--rot));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(0, 0, 0, 0.25);
}
.contacto-grid.ct-visible .contacto-alerta { --retardo: 1s; }

.contacto-alerta::before {             /* costura discontinua, como cosida a mano */
    content: '';
    position: absolute;
    inset: 6px;
    border: 1.5px dashed var(--acento);
    border-radius: 2px;
    opacity: 0.8;
    pointer-events: none;
}
.contacto-alerta::after {              /* barrido de foco (solo se anima en el éxito) */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.65) 50%, transparent 65%) 160% 0 / 250% 100% no-repeat;
    pointer-events: none;
}

/* La cinta de carrocero que sujeta la nota */
.alerta-cinta {
    position: absolute;
    top: -11px;
    left: 50%;
    width: 92px;
    height: 24px;
    margin-left: -46px;
    transform: rotate(-3deg);
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.75) 1.4px, transparent 1.9px) 0 0 / 12px 12px,
        color-mix(in srgb, var(--acento) 82%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    /* bordes dentados de la cinta */
    -webkit-mask: linear-gradient(90deg, #0000 0, #000 3px calc(100% - 3px), #0000 100%);
            mask: linear-gradient(90deg, #0000 0, #000 3px calc(100% - 3px), #0000 100%);
}

/* El sello: trazo hecho a mano (círculo + marca) */
.alerta-sello {
    position: relative;
    justify-self: center;
    width: 58px;
    height: 58px;
    color: var(--acento);
}
.alerta-sello svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.alerta-sello path { stroke-width: 3.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.alerta-sello .trazo-aro { stroke-width: 2.6; opacity: 0.9; }

/* El texto, con subrayador */
.alerta-texto {
    min-width: 0;
    font-family: var(--fuente-titulos, 'Bodoni Moda', serif);
    font-size: 1.08rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.alerta-texto > span {
    padding: 0 3px;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}

/* ---------------------------- ÉXITO ---------------------------- */
.contacto-alerta-exito .alerta-cinta { transform: rotate(-3deg); }
.contacto-alerta-exito .alerta-texto > span {
    background: linear-gradient(100deg, rgba(60, 190, 120, 0.0) 0, rgba(60, 190, 120, 0.42) 6%, rgba(60, 190, 120, 0.38) 100%) 0 88% / 100% 46% no-repeat;
}
.alerta-chispas { position: absolute; inset: 0; pointer-events: none; display: none; }
.contacto-alerta-exito .alerta-chispas { display: block; }
.alerta-chispas i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: var(--c, #e0b252);
    border-radius: 50%;
    opacity: 0;
}
.alerta-chispas i:nth-child(3n+2) { width: 5px; height: 11px; border-radius: 1px; }
.alerta-chispas i:nth-child(4n+3) {                 /* estrellitas */
    width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 0;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.alerta-chispas i:nth-child(1)  { --dx: -64px; --dy: -46px; --r: -200deg; --c: #e0b252; }
.alerta-chispas i:nth-child(2)  { --dx: -38px; --dy: -64px; --r: 160deg;  --c: #3cbe78; }
.alerta-chispas i:nth-child(3)  { --dx: -8px;  --dy: -70px; --r: 120deg;  --c: #b84a28; }
.alerta-chispas i:nth-child(4)  { --dx: 24px;  --dy: -62px; --r: 240deg;  --c: #e0b252; }
.alerta-chispas i:nth-child(5)  { --dx: 54px;  --dy: -48px; --r: -140deg; --c: #3cbe78; }
.alerta-chispas i:nth-child(6)  { --dx: 70px;  --dy: -12px; --r: 300deg;  --c: #6b0f1a; }
.alerta-chispas i:nth-child(7)  { --dx: 58px;  --dy: 30px;  --r: -260deg; --c: #e0b252; }
.alerta-chispas i:nth-child(8)  { --dx: 26px;  --dy: 52px;  --r: 180deg;  --c: #3cbe78; }
.alerta-chispas i:nth-child(9)  { --dx: -22px; --dy: 54px;  --r: -180deg; --c: #b84a28; }
.alerta-chispas i:nth-child(10) { --dx: -56px; --dy: 34px;  --r: 220deg;  --c: #e0b252; }
.alerta-chispas i:nth-child(11) { --dx: -72px; --dy: -8px;  --r: -320deg; --c: #3cbe78; }
.alerta-chispas i:nth-child(12) { --dx: 4px;   --dy: 66px;  --r: 140deg;  --c: #6b0f1a; }

/* ---------------------------- ERROR ---------------------------- */
.contacto-alerta-error {
    --acento: #b3202c;
    --lavado: rgba(200, 40, 50, 0.30);
    --rot: 0.7deg;
}
.contacto-alerta-error .alerta-cinta {
    left: 22px;
    margin-left: 0;
    transform: rotate(-5deg);
    background:
        repeating-linear-gradient(-45deg, #b3202c 0 8px, #1d1511 8px 16px);  /* cinta de balizamiento */
}
.contacto-alerta-error .alerta-sello path { stroke-width: 4; }
.contacto-alerta-error .alerta-texto > span {
    text-decoration: underline wavy #b3202c;
    text-decoration-thickness: 1.6px;
    text-underline-offset: 5px;
    text-decoration-skip-ink: none;
}

/* =================== ANIMACIONES (solo con el boleto ya visible) =================== */
.contacto-grid:not(.ct-pendiente) .contacto-alerta-exito {
    animation: notaCae 0.95s cubic-bezier(0.3, 0.7, 0.3, 1) var(--retardo) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-exito::after {
    animation: focoBarrido 1.1s ease-in-out calc(var(--retardo) + 0.7s) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-exito .alerta-cinta {
    animation: cintaPega 0.4s ease-out calc(var(--retardo) + 0.45s) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-exito .trazo-aro {
    animation: dibuja 0.75s cubic-bezier(0.5, 0, 0.2, 1) calc(var(--retardo) + 0.35s) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-exito .trazo-marca {
    animation: dibuja 0.5s cubic-bezier(0.5, 0, 0.2, 1) calc(var(--retardo) + 0.95s) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-exito .alerta-sello {
    animation: selloPulsa 0.7s ease-out calc(var(--retardo) + 1.4s) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-exito .alerta-chispas i {
    animation: chispa 1.25s cubic-bezier(0.1, 0.75, 0.3, 1) calc(var(--retardo) + 1.4s) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-exito .alerta-texto > span {
    animation: subrayador 0.8s cubic-bezier(0.5, 0, 0.2, 1) calc(var(--retardo) + 1.2s) both;
}

.contacto-grid:not(.ct-pendiente) .contacto-alerta-error {
    animation: notaVibra 0.8s linear var(--retardo) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-error::before {
    animation: costuraParpadea 0.7s steps(1, end) var(--retardo) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-error .alerta-cinta {
    animation: cintaPega 0.25s ease-out var(--retardo) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-error .trazo-aro {
    animation: dibuja 0.4s cubic-bezier(0.5, 0, 0.2, 1) calc(var(--retardo) + 0.1s) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-error .trazo-tacha-1 {
    animation: dibuja 0.18s ease-in calc(var(--retardo) + 0.4s) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-error .trazo-tacha-2 {
    animation: dibuja 0.18s ease-in calc(var(--retardo) + 0.55s) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-error .alerta-sello {
    animation: selloTiembla 0.6s linear calc(var(--retardo) + 0.7s) both;
}
.contacto-grid:not(.ct-pendiente) .contacto-alerta-error .alerta-texto > span {
    animation: subrayaOnda 0.6s ease-out calc(var(--retardo) + 0.6s) both;
}

/* Mientras el boleto aún no ha entrado, la nota espera oculta (sin animaciones) */
.contacto-grid.ct-pendiente .contacto-col-formulario .contacto-alerta {
    opacity: 0;
    transform: rotate(var(--rot));
    transition: none;
}
.contacto-grid.ct-visible .contacto-col-formulario .contacto-alerta {
    transition: none;
}

@keyframes notaCae {
    0%   { opacity: 0; transform: translateY(-34px) rotate(-7deg) scale(0.96); }
    50%  { opacity: 1; transform: translateY(6px) rotate(0.8deg); }
    72%  { transform: translateY(-3px) rotate(-1.6deg); }
    100% { opacity: 1; transform: translateY(0) rotate(var(--rot)); }
}
@keyframes notaVibra {
    0%   { opacity: 0; transform: translateX(0) rotate(var(--rot)); }
    4%   { opacity: 1; transform: translateX(-10px) rotate(-1.6deg); }
    12%  { transform: translateX(10px)  rotate(1.6deg); }
    20%  { transform: translateX(-9px)  rotate(-1.3deg); }
    28%  { transform: translateX(9px)   rotate(1.3deg); }
    36%  { transform: translateX(-7px)  rotate(-1deg); }
    44%  { transform: translateX(7px)   rotate(1deg); }
    52%  { transform: translateX(-5px)  rotate(-0.6deg); }
    60%  { transform: translateX(5px)   rotate(0.6deg); }
    70%  { transform: translateX(-3px); }
    80%  { transform: translateX(2px); }
    90%  { transform: translateX(-1px); }
    100% { opacity: 1; transform: translateX(0) rotate(var(--rot)); }
}
@keyframes costuraParpadea {
    0%, 30%, 60% { opacity: 0.15; }
    15%, 45%, 100% { opacity: 0.9; }
}
@keyframes cintaPega {
    from { opacity: 0; transform: translateY(-14px) scaleX(0.3) rotate(-14deg); }
}
@keyframes dibuja {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}
@keyframes focoBarrido {
    from { background-position: 160% 0; }
    to   { background-position: -60% 0; }
}
@keyframes subrayador {
    from { background-size: 0% 46%; }
}
@keyframes subrayaOnda {
    from { text-decoration-color: transparent; }
}
@keyframes selloPulsa {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18) rotate(-6deg); }
    100% { transform: scale(1); }
}
@keyframes selloTiembla {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-4px) rotate(-5deg); }
    25% { transform: translateX(4px) rotate(5deg); }
    40% { transform: translateX(-3px) rotate(-4deg); }
    55% { transform: translateX(3px) rotate(3deg); }
    70% { transform: translateX(-2px); }
    85% { transform: translateX(1px); }
}
@keyframes chispa {
    0%   { opacity: 1; transform: translate(0, 0) scale(0) rotate(0); }
    12%  { opacity: 1; transform: translate(calc(var(--dx) * 0.2), calc(var(--dy) * 0.2)) scale(1.2) rotate(calc(var(--r) * 0.2)); }
    65%  { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); }
    100% { opacity: 0; transform: translate(calc(var(--dx) * 1.05), calc(var(--dy) + 22px)) scale(0.8) rotate(calc(var(--r) * 1.2)); }
}
@media (prefers-reduced-motion: reduce) {
    .contacto-alerta, .contacto-alerta::before, .contacto-alerta::after,
    .contacto-alerta *, .contacto-alerta-exito .alerta-chispas i { animation: none !important; }
    .alerta-chispas { display: none !important; }
}

/* Móviles */
@media (max-width: 480px) {
    .contacto-alerta {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 10px;
        padding: 16px 14px 16px 12px;
    }
    .alerta-sello { width: 46px; height: 46px; }
    .alerta-texto { font-size: 1rem; }
    .alerta-cinta { width: 76px; margin-left: -38px; height: 21px; }
    .contacto-alerta-error .alerta-cinta { left: 16px; margin-left: 0; }
}

/* 1. Selector de Píldoras de Proyecto
   Siempre 4 en una fila (si caben) o 2×2: nunca 3+1. Todas con la misma altura. */
.bloque-tipo-propuesta {
    margin-bottom: 22px;
    container-type: inline-size;
}

.grid-pildoras-proyecto {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
}

@container (min-width: 460px) {
    .grid-pildoras-proyecto {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pildora-opcion {
    position: relative;
    cursor: pointer;
    user-select: none;
    display: flex;
}
.pildora-opcion input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pildora-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(230, 213, 195, 0.25);
    border-radius: 30px;
    color: #b5a494;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.pildora-opcion:hover .pildora-label {
    border-color: var(--color-naranja-trazo, #b84a28);
    color: var(--color-beige, #e6d5c3);
}
.pildora-opcion input:checked + .pildora-label {
    background: rgba(184, 74, 40, 0.22);
    border-style: dashed;
    border-color: var(--color-naranja-trazo, #b84a28);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 0 12px rgba(184, 74, 40, 0.35);
}
.pildora-opcion input:checked + .pildora-label::after {
    content: '✶';
    position: absolute;
    top: -9px;
    right: 12px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-naranja-trazo, #b84a28);
    color: #ffffff;
    font-size: 0.72rem;
    line-height: 1;
    box-shadow: 0 0 0 3px var(--color-oscuro, #121212);   /* anillo oscuro que recorta el borde */
    animation: selloPildora 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes selloPildora {
    from { opacity: 0; transform: scale(0.3) rotate(-70deg); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pildora-opcion input:checked + .pildora-label::after { animation: none; }
}
/* Teclado: se ve dónde está el foco */
.pildora-opcion input:focus-visible + .pildora-label {
    outline: 2px dashed var(--color-naranja-trazo, #b84a28);
    outline-offset: 3px;
}

/* Columna estrecha (2×2): esquinas más sobrias (tipo «entrada») en vez de la píldora completa,
   para que en 320–460 siguen viéndose cuidadas. El hover y la selección con sello se mantienen. */
@container (max-width: 459px) {
    .grid-pildoras-proyecto { gap: 10px 8px; }
    .pildora-label {
        min-height: 44px;
        padding: 8px 8px;
        border-radius: 12px;
        font-size: 0.82rem;
        letter-spacing: 0.3px;
    }
    .pildora-opcion input:checked + .pildora-label::after {
        top: -8px;
        right: 9px;
        width: 18px;
        height: 18px;
        font-size: 0.66rem;
    }
}

/* 2. Inputs Teatrales */
.campo-grupo {
    margin-bottom: 20px;
}
.etiqueta-campo-teatral {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-beige, #e6d5c3);
    margin-bottom: 8px;
    font-weight: 600;
    opacity: 0.9;
}
.input-teatral {
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    background: rgba(10, 10, 10, 0.55);
    border: 1px solid rgba(230, 213, 195, 0.25);
    border-radius: 4px;
    color: #ffffff;
    font-family: var(--fuente-textos, 'Montserrat', sans-serif);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}
.campo-caja {
    position: relative;
}
.campo-caja::after {
    --c: var(--color-naranja-trazo, #b84a28);
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    background:
        linear-gradient(90deg, var(--c) 50%, transparent 0) 0 0 / 12px 2px repeat-x,
        linear-gradient(90deg, var(--c) 50%, transparent 0) 0 100% / 12px 2px repeat-x,
        linear-gradient(0deg,  var(--c) 50%, transparent 0) 0 0 / 2px 12px repeat-y,
        linear-gradient(0deg,  var(--c) 50%, transparent 0) 100% 0 / 2px 12px repeat-y;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
.campo-caja:focus-within::after {
    opacity: 1;
    animation: marchaCampo 0.9s linear infinite;
}
@keyframes marchaCampo {
    to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .campo-caja:focus-within::after { animation: none; }
}
.campo-grupo:focus-within .etiqueta-campo-teatral {
    color: var(--color-naranja-trazo, #b84a28);
    opacity: 1;
}
.input-teatral:focus {
    outline: none;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0 0 14px rgba(184, 74, 40, 0.3);
}
.input-teatral::placeholder {
    color: rgba(230, 213, 195, 0.35);
    font-weight: 300;
}
.textarea-teatral {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Títulos de campo: siempre UNA línea hasta 320 (el tamaño se ajusta al ancho disponible) */
@media (max-width: 359px) {
    .etiqueta-campo-teatral {
        font-size: min(0.8rem, calc((100vw - 84px) * 0.048));
        letter-spacing: 0.1em;
        white-space: nowrap;
    }
}

/* 3. Checkbox RGPD Artesanal */
.campo-rgpd-bloque {
    margin: 18px 0 24px;
}
.rgpd-custom-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    cursor: pointer;
    user-select: none;
}
.rgpd-input-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.rgpd-box {
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid var(--color-naranja-trazo, #b84a28);
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
}
.rgpd-input-check:focus-visible + .rgpd-box {
    outline: 2px dashed var(--color-naranja-trazo, #b84a28);
    outline-offset: 3px;
}
.rgpd-input-check:checked + .rgpd-box {
    background: var(--color-burdeos, #6b0f1a);
    border-color: var(--color-burdeos, #6b0f1a);
}
.rgpd-input-check:checked + .rgpd-box::after {
    content: "✓";
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
}
.rgpd-texto {
    font-size: 0.84rem;
    color: #b5a494;
    line-height: 22px;   /* igual que la casilla: su primera línea queda a su altura */
    text-wrap: balance;  /* si necesita dos líneas, quedan parejas */
}
.rgpd-enlace { white-space: nowrap; }   /* «Política de Privacidad» nunca se parte */
.rgpd-enlace {
    color: var(--color-naranja-trazo, #b84a28);
    text-decoration: underline;
    transition: color 0.2s ease;
}
.rgpd-enlace:hover {
    color: var(--color-beige, #e6d5c3);
}

/* 4. Botón Cinematográfico: ENVIAR MENSAJE */
.btn-enviar-teatral {
    --muesca: 9px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: block;
    width: 100%;
    padding: 17px 36px;
    background: var(--color-burdeos, #6b0f1a);
    color: var(--color-beige, #e6d5c3);
    border: 0;
    border-radius: 6px;
    font-family: var(--fuente-titulos, 'Bodoni Moda', serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
    min-height: 58px;
    /* Muescas de entrada a los lados */
    -webkit-mask:
        radial-gradient(circle var(--muesca) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--muesca) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
            mask:
        radial-gradient(circle var(--muesca) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--muesca) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
}
/* Filetes discontinuos arriba y abajo, como el borde troquelado de una entrada */
.btn-enviar-teatral::after {
    content: '';
    position: absolute;
    inset: 6px 22px;
    border-block: 1px dashed rgba(230, 213, 195, 0.4);
    pointer-events: none;
    transition: border-color 0.35s ease;
}
.btn-enviar-teatral::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 1.2px, transparent 1.7px) 0 0 / 9px 9px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.btn-enviar-teatral:hover::before,
.btn-enviar-teatral:focus-visible::before {
    opacity: 1;
    animation: puntosBoton 1.4s linear infinite;
}
@keyframes puntosBoton {
    to { background-position: 9px 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-enviar-teatral:hover::before,
    .btn-enviar-teatral:focus-visible::before { animation: none; }
}
.btn-enviar-teatral:hover,
.btn-enviar-teatral:focus-visible {
    background-color: var(--color-naranja-trazo, #b84a28);
    color: #ffffff;
    outline: none;
}
.btn-enviar-teatral:hover::after,
.btn-enviar-teatral:focus-visible::after {
    border-color: rgba(255, 255, 255, 0.7);
}
.btn-enviar-teatral:active {
    transform: translateY(1px);
}

/* Móviles: botón más delgado y en una sola línea */
@media (max-width: 600px) {
    .btn-enviar-teatral {
        --muesca: 7px;
        min-height: 46px;
        padding: 11px 16px;
        font-size: 0.95rem;
        letter-spacing: 2px;
        white-space: nowrap;
    }
    .btn-enviar-teatral::after { inset: 4px 16px; }
}
@media (max-width: 360px) {
    .btn-enviar-teatral { font-size: 0.88rem; letter-spacing: 1.4px; padding-inline: 10px; }
}

/* 5. Cláusula AEPD */
.clausula-aepd {
    margin-top: 20px;
    font-size: 0.72rem;
    color: rgba(230, 213, 195, 0.5);
    line-height: 1.6;
    border-top: 1px solid rgba(230, 213, 195, 0.1);
    padding-top: 14px;
}
.clausula-aepd a {
    color: rgba(230, 213, 195, 0.7);
    text-decoration: underline;
}