/* ============================================================
   DUPAVI — Base común de las páginas con diseño propio
   (HOME, Técnico, Internacional y las que vengan: Local, Nacional…)

   - Prefijo .srv-: estructura de secciones, encabezados, acordeón,
     enlace final, botón con flecha, animación del bloque del formulario
     y motor de animaciones.
   - Cada página añade su propio diseño en su archivo
     (home.css → .hom-*, seo-tecnico.css → .tec-*, seo-internacional.css → .int-*).
   - Se carga solo en esas páginas (functions.php) y en el editor.
   - El formulario usa el bloque de la HOME (.cta-scene) y no se toca aquí,
     salvo el ancla #formulario para el botón del hero.
   ============================================================ */

:root {
    --srv-wrap:      1440px;
    --srv-gutter:    clamp(1.25rem, 5vw, 5rem);
    --srv-pad-y:     clamp(4.5rem, 8vw, 7rem);
    --srv-radius:    10px;
    --srv-blue-soft: rgba(126, 179, 247, 0.90);   /* azul claro sobre oscuro (mismo que la HOME) */
    --srv-line-dark: rgba(255, 255, 255, 0.09);
    --srv-mono:      ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

    /* Iconos de línea comunes (Lucide, licencia ISC) — se pintan con mask para heredar el color */
    --srv-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --srv-ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    --srv-ico-quote: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* El botón del hero baja aquí; el margen deja sitio al menú fijo */
#formulario { scroll-margin-top: 80px; }

/* ── Estructura de las secciones ─────────────────────────── */
.wp-block-group.srv-scene {
    position: relative;
    isolation: isolate;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: var(--srv-pad-y) 0;
}
.srv-scene .srv-wrap {
    position: relative;
    z-index: 1;
    max-width: var(--srv-wrap);
    margin: 0 auto !important;
    padding: 0 var(--srv-gutter);
}
.srv-scene .srv-wrap > * { margin-top: 0; }

/* Titulares sin palabras sueltas en la última línea */
.srv-scene h1,
.srv-scene h2 { text-wrap: balance; }
.srv-scene p  { text-wrap: pretty; }

/* Anula la entrada genérica que style.css aplica a todos los encabezados
   (pensada solo para el hero de la HOME): estas páginas tienen las suyas. */
.srv-scene .wp-block-heading { animation: none; }

.srv-bg-white { background-color: var(--c-white); }
.srv-bg-page  { background-color: var(--c-bg); }
.srv-bg-dark  { background-color: var(--c-dark); color: #ffffff; }
.srv-bg-dark h1,
.srv-bg-dark h2,
.srv-bg-dark h3 { color: #ffffff; }
.srv-bg-dark p  { color: rgba(255,255,255,0.68); }

/* ── Encabezado de sección (H2 + introducción) ────────────── */
.srv-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem) !important; }
.srv-head > * { margin-top: 0 !important; }
.srv-head > :last-child { margin-bottom: 0; }
.srv-head h2 { margin-bottom: 1.25rem; }
.srv-head p { max-width: 68ch; margin-bottom: 1rem; }
.srv-head .srv-lead {
    color: var(--c-ink);
    font-size: 1.1rem;
    font-weight: 500;
}
.srv-bg-dark .srv-head .srv-lead { color: rgba(255,255,255,0.9); }

/* ── Botón principal con flecha ───────────────────────────── */
.srv-cta-arrow .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.6rem !important;
    font-size: 0.95rem !important;
}
.srv-cta-arrow .wp-block-button__link::after {
    content: "";
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--srv-ico-arrow) center / contain no-repeat;
            mask: var(--srv-ico-arrow) center / contain no-repeat;
    transition: transform 0.35s var(--ease-premium);
}
.srv-cta-arrow .wp-block-button__link:hover::after { transform: translateX(4px); }

/* ── Preguntas: acordeón en una columna ───────────────────
   Sobrescribe el estilo global de .wp-block-details (FAQ de la HOME)
   solo dentro de estas páginas. */
.srv-faq .srv-head { text-align: center; }
.srv-faq .srv-head h2 { margin-bottom: 0; }
.srv-faq-list {
    max-width: 860px;
    margin: 0 auto !important;
}
.srv-faq-list > * { margin-top: 0 !important; }
.srv-faq .wp-block-details.srv-faq-item {
    background-color: var(--c-bg) !important;
    border: 1px solid var(--c-border);
    border-radius: var(--srv-radius) !important;
    padding: 0 !important;
    margin-bottom: 0.75rem !important;
    transition: border-color 0.25s ease, background-color 0.25s ease !important;
}
.srv-faq .wp-block-details.srv-faq-item[open] {
    background-color: var(--c-white) !important;
    border-color: rgba(40, 94, 168, 0.35);
    padding: 0 !important;
}
.srv-faq .wp-block-details.srv-faq-item summary {
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    line-height: 1.45;
}
.srv-faq .wp-block-details.srv-faq-item > *:not(summary) {
    padding: 0 1.5rem;
    margin: 0 0 1rem;
    max-width: none;
    font-size: 0.95rem;
}
.srv-faq .wp-block-details.srv-faq-item > *:not(summary):last-child { padding-bottom: 0.5rem; margin-bottom: 1.25rem; }
/* Al cerrar, el «×» vuelve a «+» desde el principio del cierre */
.srv-faq .wp-block-details.srv-faq-item.is-closing summary::after {
    transform: none !important;
    background-color: transparent !important;
}

/* ── Siguiente paso: enlace a otro servicio ───────────────── */
.wp-block-group.srv-next {
    padding: 2.75rem 0;
    border-top: 1px solid var(--c-border);
}
.srv-next p {
    max-width: 70ch;
    margin: 0 auto;
    text-align: center;
    font-size: 0.95rem;
}
.srv-next a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--c-action);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(40, 94, 168, 0.3);
}
.srv-next a::after {
    content: "";
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: var(--srv-ico-arrow) center / contain no-repeat;
            mask: var(--srv-ico-arrow) center / contain no-repeat;
    transition: transform 0.35s var(--ease-premium);
}
.srv-next a:hover { color: var(--c-action-hv); }
.srv-next a:hover::after { transform: translateX(4px); }

@media (max-width: 781px) {
    .srv-faq .wp-block-details.srv-faq-item summary { padding: 1.1rem 1.15rem; }
    .srv-faq .wp-block-details.srv-faq-item > *:not(summary) { padding: 0 1.15rem; }
}

/* ============================================================
   MOTOR DE ANIMACIONES (común)
   - Solo actúa con <html class="srv-motion">, que se pone en el <head>
     (functions.php). Sin ella (editor, movimiento reducido o si falla el JS)
     todo se ve estático y completo.
   - assets/js/servicios-base.js añade .srv-in a cada bloque cuando entra en
     pantalla, con el mismo punto de disparo que la HOME.
   - Estado oculto solo con :not(.srv-in) y animaciones con fill «backwards»:
     al terminar, cada elemento vuelve a su estilo normal y los efectos al
     pasar el ratón funcionan sin interferencias.
   - Ritmo lento a propósito (1–1,4 s por pieza) para que se aprecie.
   ============================================================ */
@keyframes srvFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes srvRise   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes srvStep   { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes srvUnfold { from { opacity: 0; transform: translateY(16px) scaleY(0.94); } to { opacity: 1; transform: none; } }
@keyframes srvPop    { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes srvGrow   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes srvWipe   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes srvReveal { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes srvLineUp { from { transform: translateY(105%); } to { transform: none; } }

/* Texto partido en líneas reales para revelarlas una a una (H1, citas…) */
.srv-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}
.srv-line-in {
    display: inline-block;
    animation: srvLineUp 1.3s var(--ease-premium) calc(var(--srv-base, 0ms) + var(--i, 0) * 170ms) backwards;
}

/* Encabezados de sección (H2 + introducción), en cascada */
html.srv-motion .srv-head:not(.srv-in) > * { opacity: 0; }
html.srv-motion .srv-head.srv-in > * { animation: srvRise 1.2s var(--ease-premium) calc(var(--i, 0) * 180ms) backwards; }

/* Preguntas: entran desplegándose una tras otra */
html.srv-motion .srv-faq-list:not(.srv-in) > .srv-faq-item { opacity: 0; }
html.srv-motion .srv-faq-list.srv-in > .srv-faq-item {
    transform-origin: top center;
    animation: srvUnfold 1s var(--ease-premium) calc(var(--i, 0) * 150ms) backwards;
}

/* Siguiente paso */
html.srv-motion .srv-next:not(.srv-in) p { opacity: 0; }
html.srv-motion .srv-next.srv-in p { animation: srvRise 1.1s var(--ease-premium) backwards; }

/* Bloque del formulario (.cta-scene, el mismo en todas las páginas):
   el texto aparece en secuencia y la tarjeta sube y se asienta */
@keyframes srvCtaForm { from { opacity: 0; transform: translateY(44px) scale(0.97); } to { opacity: 1; transform: none; } }
html.srv-motion .cta-text-col:not(.srv-in) > * { opacity: 0; }
html.srv-motion .cta-text-col.srv-in > * { animation: srvFade 1.5s var(--ease-premium) calc(var(--i, 0) * 300ms) backwards; }
html.srv-motion .cta-form-panel:not(.srv-in) { opacity: 0; }
html.srv-motion .cta-form-panel.srv-in { animation: srvCtaForm 1.8s var(--ease-premium) 400ms backwards; }