/* ============================================================
   DUPAVI — Página «Contacto» (/contacto/)
   Concepto: «una conversación». No es el formulario de proyecto:
   aquí el formulario es un mensaje (burbuja con la esquina de chat)
   y, antes de que llegue, aparece el indicador de «escribiendo…».
   Mientras la persona escribe, el indicador vuelve a moverse.
   Animación firma «responder».

   - Solo lo propio de esta página (prefijo .con-). La estructura y
     el motor de animaciones están en servicios-base.css (.srv-).
   - El formulario es [dupavi_form_contacto] (functions.php).
   - assets/js/contacto.js añade la burbuja de «escribiendo».
   ============================================================ */

:root {
    --con-ico-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z'/%3E%3C/svg%3E");
}

.con-main > * { margin-top: 0 !important; }

/* La conversación ocupa la pantalla (menos el menú) */
.wp-block-group.srv-scene.con-scene {
    display: flex;
    align-items: center;
    min-height: calc(100svh - 59px);
    padding: clamp(4rem, 8vw, 6.5rem) 0;
    overflow: hidden;
    background-image: radial-gradient(ellipse 45% 55% at 78% 55%, rgba(40, 94, 168, 0.09) 0%, transparent 70%);
}
.con-scene .srv-wrap { width: 100%; }
.con-cols.wp-block-columns {
    align-items: center !important;
    gap: clamp(3rem, 8vw, 8rem);
    margin: 0;
}
.con-main.wp-block-column  { flex-basis: 50% !important; }
.con-aside.wp-block-column {
    flex-basis: 50% !important;
    position: relative;
    padding-top: 62px;                   /* sitio para la burbuja de «escribiendo» */
}

.con-scene h1 {
    font-size: clamp(3.25rem, 7.5vw, 6.25rem);
    line-height: 1;
    letter-spacing: -0.045em;
    margin-bottom: 2rem;
}
.con-scene .con-lead {
    color: var(--c-ink);
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    font-weight: 600;
    line-height: 1.4;
    max-width: 30ch;
    margin-bottom: 1.25rem;
}
.con-main p { font-size: 1rem; max-width: 46ch; margin-bottom: 1rem; }
.con-scene .con-note {
    position: relative;
    margin: 1.75rem 0 0 !important;
    padding-left: 2rem;
    color: var(--c-ink);
    font-weight: 500;
}
.con-note::before {                      /* lápiz: escríbeme */
    content: "";
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 18px;
    height: 18px;
    background-color: var(--c-action);
    -webkit-mask: var(--con-ico-pen) center / contain no-repeat;
            mask: var(--con-ico-pen) center / contain no-repeat;
}

/* El formulario es un mensaje */
.con-bubble {
    position: relative;
    margin-top: 0 !important;            /* sin el hueco de 24px de WordPress */
    background-color: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 24px 24px 24px 6px;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    box-shadow: 0 30px 70px rgba(17, 24, 39, 0.08);
}
.con-bubble .minimal-form { gap: 0.85rem; }
.con-bubble textarea.minimal-input { min-height: 150px; }

/* «Escribiendo…» (lo añade contacto.js) */
.con-typing {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 15px 18px;
    background-color: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 18px 18px 18px 5px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.05);
}
.con-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--c-action);
    opacity: 0.35;
}

/* Redes, justo debajo de la nota (botones .dupavi-redes, en style.css) */
.con-main .con-redes {
    margin-top: 2rem !important;
    padding-top: 1.75rem;
    border-top: 1px solid var(--c-border);
}

@media (max-width: 781px) {
    .con-main.wp-block-column,
    .con-aside.wp-block-column { flex-basis: 100% !important; padding-top: 54px; }
    .con-scene h1 { margin-bottom: 1.5rem; }
    .con-bubble { padding: 1.5rem 1.25rem; }
}

/* ============================================================
   ANIMACIONES PROPIAS — «responder»
   Usan el motor común (servicios-base.css): html.srv-motion, .srv-in,
   fotogramas srv* y fill «backwards».
   ============================================================ */
@keyframes conPop    { from { opacity: 0; transform: translateY(14px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes conBubble { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes conDot    { 0%, 60%, 100% { transform: none; opacity: 0.35; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Texto: «Hablemos» sube y luego el resto */
html.srv-motion .con-main:not(.srv-in) > * { opacity: 0; }
html.srv-motion .con-main h1 { --srv-base: 200ms; }
html.srv-motion .con-main.srv-in > :not(h1) { animation: srvRise 1.3s var(--ease-premium) calc(400ms + var(--i, 0) * 170ms) backwards; }

/* Formulario: «escribiendo…» y llega el mensaje */
html.srv-motion .con-aside:not(.srv-in) .con-typing,
html.srv-motion .con-aside:not(.srv-in) .con-bubble { opacity: 0; }
html.srv-motion .con-aside.srv-in .con-typing { transform-origin: bottom left; animation: conPop 0.9s var(--ease-premium) 250ms backwards; }
html.srv-motion .con-aside.srv-in .con-typing span { animation: conDot 1s ease-in-out calc(600ms + var(--i, 0) * 160ms) 2 backwards; }
html.srv-motion .con-aside.srv-in .con-bubble { transform-origin: bottom left; animation: conBubble 1.4s var(--ease-premium) 1500ms backwards; }
html.srv-motion .con-aside.srv-in .minimal-form > * { animation: srvRise 1s var(--ease-premium) calc(1800ms + var(--i, 0) * 100ms) backwards; }
/* Mientras la persona escribe, el indicador se mueve */
html.srv-motion .con-aside.srv-in:focus-within .con-typing span { animation: conDot 1.2s ease-in-out calc(var(--i, 0) * 160ms) infinite; }