/*
 * Notario.org — Rediseño V2 (handoff design_handoff_notario_v2)
 * Tokens: #036b5b primario, #7bac56 acento, #02332b/#04211c fondos oscuros,
 * #f3f8f5 banda clara, #e9f3ec chips, #e4f0d9 badges, dorado #f2b843/#b8860b.
 * Tipos: Bricolage Grotesque (titulares) + Instrument Sans (cuerpo).
 * PROHIBIDO backdrop-filter (pixelado iOS): header #fff sólido, overlays rgba sin blur.
 */

body.v2 {
    margin: 0;
    background: #fff;
    font-family: 'Instrument Sans', sans-serif;
    color: #17272f;
}

/* :where() deja la regla en especificidad de elemento (0,0,1): sigue siendo el color
   por defecto de los enlaces en V2, pero ya no pisa utilidades Tailwind del blog
   (.text-white en botones de compartir, píldoras de categoría activas, etc.). */
:where(body.v2) a { color: #036b5b; text-decoration: none; }
:where(body.v2) a:where(:hover) { color: #024b40; }

/* ===== Animaciones compartidas ===== */
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes marquesina { to { transform: translateX(-50%); } }
@keyframes lineaAvanza { 0% { width: 0; } 70% { width: 82%; } 100% { width: 82%; } }
@keyframes puntoAvanza { 0% { left: 9%; opacity: 1; } 68% { opacity: 1; } 70% { left: 91%; opacity: 0; } 100% { left: 91%; opacity: 0; } }

.rev-track:hover { animation-play-state: paused; }

/* En árabe (RTL) la marquesina se desplaza igual: forzamos dirección LTR del track
   para que la animación translateX(-50%) no se salga del viewport. */
[dir="rtl"] .rev-track { direction: ltr; }

/* ===== Header V2 ===== */
.v2-solo-movil { display: none; }

/* Items del menú principal. OJO: no usar :style de Alpine junto a style estático
   (Alpine lo reemplaza y se pierden display/padding): estados por clase. */
.v2-nav-item {
    display: flex;
    align-items: center;
    padding: 0 12px;
    cursor: pointer;
    color: #17272f;
}
.v2-nav-item-activo {
    color: #036b5b;
    box-shadow: inset 0 -2px 0 #036b5b;
}

/* Tabs píldora (modal presupuesto y formularios con pestañas) */
.v2-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: #eef3f0;
    color: #41564f;
}
.v2-tab-activa {
    background: #036b5b;
    color: #fff;
}

@media (max-width: 1000px) {
    .v2-nav-links { display: none !important; }
    .v2-solo-movil { display: grid !important; }
    .v2-oculta-movil { display: none !important; }
}

@media (max-width: 640px) {
    /* El header cabe en 375px: Contacto solo icono y menos separación */
    .v2-contact-label { display: none; }
    #navigation { gap: 10px !important; padding: 0 14px !important; }
    #navigation img { height: 36px !important; }
}

/* ===== Footer V2 ===== */
.mega-chevron { display: none; }

@media (max-width: 1000px) {
    /* Sellos ISO del bloque confianza: 3 columnas max-content no caben en 375px
       (desbordaban 11-19px y el móvil se movía en horizontal). */
    .g-sellos { grid-template-columns: repeat(2, minmax(0, max-content)) !important; gap: 14px 26px !important; }
    .g-foot { grid-template-columns: 1fr 1fr !important; }
    .g-footmega { grid-template-columns: 1fr 1fr !important; }
    .mega-chevron { display: inline-flex; }
    .mega-cabecera { cursor: pointer; }
    .mega-grupo { max-height: 0; overflow: hidden; margin-top: 0 !important; transition: max-height .35s ease; }
    .mega-sec-abierta .mega-grupo { max-height: 3000px; margin-top: 20px !important; }
}

/* ===== Grids responsive de páginas (breakpoints del handoff: 1000px y 640px) ===== */
@media (max-width: 1000px) {
    .g-calc { grid-template-columns: 1fr !important; }
    .g-pasos { grid-template-columns: 1fr !important; gap: 0 !important; }
    .g-pasos .linea-pasos { display: none !important; }
    .paso-fila {
        display: flex !important;
        text-align: left !important;
        gap: 18px !important;
        padding: 6px 4px 22px 30px !important;
        align-items: flex-start !important;
        border-left: 2px dashed #bcd9ce;
        margin-left: 26px;
    }
    .paso-fila:last-child { border-left-color: transparent; padding-bottom: 6px !important; }
    .paso-circ { width: 52px !important; height: 52px !important; margin: 0 0 0 -58px !important; flex: none; }
    .paso-txt { text-align: left; }
    .paso-txt > div:first-child { margin-top: 0 !important; }
    .rev-card-sv { flex: 0 0 300px !important; }
    .g-hero, .g-2col, .g-3col, .g-benef { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
    .g-normas, .g-formcard, .g-foot, .g-footmega { grid-template-columns: 1fr !important; }
}

/* RTL: el borde del timeline móvil cambia de lado */
[dir="rtl"] .paso-fila { border-left: none; border-right: 2px dashed #bcd9ce; margin-left: 0; margin-right: 26px; padding: 6px 30px 22px 4px !important; text-align: right !important; }
[dir="rtl"] .paso-fila:last-child { border-right-color: transparent; }
[dir="rtl"] .paso-circ { margin: 0 -58px 0 0 !important; }
[dir="rtl"] .paso-txt { text-align: right; }

/* Utilidad: ocultar elementos Alpine antes de inicializar */
[x-cloak] { display: none !important; }