/* ============================================================
   pinegrow-edits.css — Jorge & Ari Wedding App
   ─────────────────────────────────────────────────────────────
   WORKFLOW CORRECTO EN PINEGROW
   ─────────────────────────────────────────────────────────────

   PASO 1  Selecciona el elemento en el canvas
   PASO 2  Panel Properties → pestaña CSS (ícono de hoja)
   PASO 3  HAZ CLIC en la regla ".mod-..." para resaltarla
           en azul → eso la convierte en destino de escritura
   PASO 4  Edita en Visual Editor → solo cambia ese elemento

   OPACIDAD DE SVGs DE EVENTO (arcotela, aros, torta, buquet, carta)
   ─────────────────────────────────────────────────────────────
   Estos SVGs tienen una animación de entrada (svgReveal) que
   bloquea la propiedad `opacity` estándar. Para cambiar su
   opacidad usa el panel VARS de Pinegrow:

     1. Selecciona el SVG → haz clic en la regla
        ".mod-bloque-X .mod-X-icon-Y"
     2. Pestaña VARS → cambia el valor de --svg-target-opacity
        Ejemplo: --svg-target-opacity: 0.6

   Para TODOS los demás elementos (textos, contenedores,
   dresscode, regalos): la propiedad opacity estándar funciona.
   ============================================================ */
/* ══════════════════════════════════════════════════════════════
   CORRECCIÓN KEYFRAME — svgReveal respeta CSS variable
   ─────────────────────────────────────────────────────────────
   Esta definición carga DESPUÉS de ja-main.css y sobreescribe
   el keyframe original. Ahora el estado final de la animación
   usa --svg-target-opacity en lugar de hardcoded 1.
   ══════════════════════════════════════════════════════════════ */
@keyframes svgReveal {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }

    to {
        opacity: var(--svg-target-opacity, 1);
        transform: translateY(0) scale(1);
    }
}

/* ══════════════════════════════════════════════════════════════
   HERO — Jorge / & / Ari  (override individual por elemento)
   ─────────────────────────────────────────────────────────────
   Edita aquí desde Pinegrow para sobrescribir los valores base
   de ja-main.css bloque 52. Este archivo carga DESPUÉS →
   gana la cascada sin necesitar !important.

   PARA DESKTOP: edita la regla base (sin media query).
   PARA MOBILE:  en Pinegrow, pon el viewport en 375px y edita
                 la misma regla → Pinegrow escribe el valor
                 dentro de @media (max-width: 575px) aquí mismo.
   ══════════════════════════════════════════════════════════════ */
.mod-hero-jorge {
}

.mod-hero-amp {
}

.mod-hero-ari {
}

/* ══════════════════════════════════════════════════════════════
   DATOS CLAVE — elementos individuales
   ══════════════════════════════════════════════════════════════ */
.mod-sec-datos {
}

.mod-dato-fecha {
}

.mod-dato-hora {
}

.mod-dato-lugar {
}

.mod-padres-intro {
}

.mod-padres-novio {
}

.mod-padres-novia {
}

.mod-padres-novio-p1 {
}

.mod-padres-novio-p2 {
}

.mod-padres-novia-p1 {
}

.mod-padres-novia-p2 {
}

/* ══════════════════════════════════════════════════════════════
   HISTORIA / STORYTIME
   ══════════════════════════════════════════════════════════════ */
.mod-historia-titulo {
}

.mod-historia-texto {
}

.mod-foto-1 {
}

.mod-foto-2 {
}

.mod-foto-3 {
}

.mod-foto-4 {
}

.mod-foto-5 {
}

/* ══════════════════════════════════════════════════════════════
   EL DÍA — contenedores de bloque y título de sección
   ══════════════════════════════════════════════════════════════ */
.mod-sec-eventos {
}

.mod-eventos-titulo {
    color: var(--c-secondary);
}

.mod-bloque-ceremonia {
}

.mod-bloque-recepcion {
}

.mod-bloque-ninos {
}

/* ──────────────────────────────────────────────────────────────
   CEREMONIA — textos (opacity y color: edita directo en Pinegrow)
   ────────────────────────────────────────────────────────────── */
.mod-ceremonia-titulo {
}

.mod-ceremonia-meta {
}

.mod-ceremonia-linea {
}

.mod-ceremonia-desc {
}

/* ──────────────────────────────────────────────────────────────
   CEREMONIA — SVGs desktop
   ─────────────────────────────────────────────────────────────
   Especificidad 0,2,0 (padre + hijo) supera la regla global
   .evento-bloque__icon .evento-svg (también 0,2,0) pero este
   archivo carga DESPUÉS → gana en cascada.

   PARA CAMBIAR OPACIDAD:
   - Pinegrow panel VARS → --svg-target-opacity: 0.7
   PARA CAMBIAR TAMAÑO:
   - Propiedad max-width en Visual Editor (funciona directo)
   ────────────────────────────────────────────────────────────── */
.mod-bloque-ceremonia .mod-ceremonia-icon-arcotela {
    --svg-target-opacity: 0.7;
    opacity: var(--svg-target-opacity);
    width: 180px;
}

.mod-bloque-ceremonia .mod-ceremonia-icon-aros {
    --svg-target-opacity: 0.7;
    opacity: var(--svg-target-opacity);
    width: 130px;
}

/* ──────────────────────────────────────────────────────────────
   CEREMONIA — watermarks mobile
   Opacity en el contenedor, no en la imagen individual.
   Cambia el valor 0.38 con el slider de opacity en Pinegrow.
   ────────────────────────────────────────────────────────────── */
.mod-bloque-ceremonia .evento-icon-mobile {
    opacity: 0.38;
}

.mod-ceremonia-mob-arcotela {
}

.mod-ceremonia-mob-aros {
}

/* ──────────────────────────────────────────────────────────────
   RECEPCIÓN — textos
   ────────────────────────────────────────────────────────────── */
.mod-recepcion-titulo {
}

.mod-recepcion-meta {
}

.mod-recepcion-linea {
}

.mod-recepcion-desc {
}

/* RECEPCIÓN — SVGs desktop */
.mod-bloque-recepcion .mod-recepcion-icon-torta {
    --svg-target-opacity: 0.7;
    opacity: var(--svg-target-opacity);
    width: 180px;

    /* max-width: 300px; */
}

.mod-bloque-recepcion .mod-recepcion-icon-buquet {
    --svg-target-opacity: 0.7;
    opacity: var(--svg-target-opacity);
    width: 130px;
}

/* RECEPCIÓN — watermarks mobile */
.mod-bloque-recepcion .evento-icon-mobile {
    opacity: 0.38;
}

.mod-recepcion-mob-torta {
}

.mod-recepcion-mob-buquet {
}

/* ──────────────────────────────────────────────────────────────
   NIÑOS — textos y SVGs
   ────────────────────────────────────────────────────────────── */
.mod-ninos-titulo {
}

.mod-ninos-linea {
}

.mod-ninos-desc {
}

.mod-bloque-ninos .mod-ninos-icon-carta {
    --svg-target-opacity: 0.7;
    opacity: var(--svg-target-opacity);
    width: 180px;

    /* max-width: 300px; */
}

.mod-bloque-ninos .evento-icon-mobile {
    opacity: 0.38;
}

.mod-ninos-mob-carta {
}

/* ══════════════════════════════════════════════════════════════
   DRESS CODE — textos
   (opacity y color: edita directo en Pinegrow)
   ══════════════════════════════════════════════════════════════ */
.mod-sec-dresscode {
}

.mod-dresscode-titulo-sec {
}

.mod-dresscode-nombre {
}

.mod-dresscode-linea {
}

.mod-dresscode-desc {
}

.mod-dresscode-nota {
}

/* ──────────────────────────────────────────────────────────────
   DRESS CODE — SVGs composición (vestido y saco)
   ─────────────────────────────────────────────────────────────
   Estos SVGs usan trajeFloat (NO svgReveal), así que opacity
   directo funciona perfectamente.
   Especificidad 0,2,0 supera .dresscode-traje (0,1,0).

   PARA CAMBIAR OPACIDAD: slider de opacity en Visual Editor ✓
   PARA CAMBIAR TAMAÑO:   width en Visual Editor ✓
   PARA DETENER FLOTADO:  animation: none en Visual Editor ✓
   ────────────────────────────────────────────────────────────── */
/* Vestido — usa .dresscode-composition como contexto */
.dresscode-composition .mod-dresscode-vestido {
    opacity: 0.50;

    /* animation-duration: 8s; */
}

/* Saco — ajustable independientemente del vestido */
.dresscode-composition .mod-dresscode-saco {
    opacity: 0.50;

    /* animation-duration: 8s; */
    /* animation-delay: 1.8s; */
}

/* Paleta de colores — siempre al frente */
.dresscode-composition .mod-dresscode-paleta {
    opacity: 0.8;
}

/* ══════════════════════════════════════════════════════════════
   GRANITO DE ARENA — textos
   ══════════════════════════════════════════════════════════════ */
.mod-sec-regalos {
}

.mod-regalos-titulo {
    color: var(--c-secondary);
}

.mod-regalos-intro {
}

/* ──────────────────────────────────────────────────────────────
   REGALOS — columna BCP
   ────────────────────────────────────────────────────────────── */
.mod-regalos-col-bcp {
}

.mod-regalos-bank-bcp {
}

.mod-regalos-titular-bcp {
}

.mod-regalos-bcp-num {
    color: var(--c-primary);
}

.mod-regalos-bcp-cci {
    color: var(--c-primary);
}

/* ──────────────────────────────────────────────────────────────
   REGALOS — SVG regalo (watermark)
   trajeFloat → opacity directo funciona.
   Usa .regalos-sym__col--bcp como contexto para especificidad.
   ────────────────────────────────────────────────────────────── */
.regalos-sym__col--bcp .mod-regalos-gift {
    opacity: 0.22;

    /* animation: none; */
}

/* ──────────────────────────────────────────────────────────────
   REGALOS — columna Yape
   ────────────────────────────────────────────────────────────── */
.mod-regalos-col-yape {
}

.mod-regalos-bank-yape {
}

.mod-regalos-titular-yape1 {
}

.mod-regalos-titular-yape2 {
}

.mod-regalos-yape-num {
}

/* QR Yape: usa svgReveal → opacity vía --svg-target-opacity */
.mod-regalos-col-yape .mod-regalos-qr {
    --svg-target-opacity: 1;
    opacity: var(--svg-target-opacity);
    width: 195px;

    /* width: 148px; */
}

/* ══════════════════════════════════════════════════════════════
   AJUSTE DE PADDING POR SECCIÓN
   ─────────────────────────────────────────────────────────────
   Triple especificidad gana sobre el bloque 51 de ja-main.css.
   Descomenta y edita el valor en pixels o variables CSS.
   ══════════════════════════════════════════════════════════════ */
/* .ja-section.ja-datos-clave.mod-sec-datos {
    padding-top: 60px;
    padding-bottom: 60px;
}

.ja-section.ja-eventos.mod-sec-eventos {
    padding-top: 80px;
    padding-bottom: 80px;
}

.ja-section.ja-dresscode.mod-sec-dresscode {
    padding-top: 80px;
    padding-bottom: 80px;
}

.ja-section.ja-regalos.mod-sec-regalos {
    padding-top: 80px;
    padding-bottom: 80px;
} */