/*
Theme Name:  Carolina & Jorge
Description: Theme personalizado para la web de boda de Carolina y Jorge. Basado en Bootstrap 5.
Version:     1.0.0
Author:      Desarrollo propio
Text Domain: carolina-jorge
*/

/* =============================================================================
   1. CUSTOM PROPERTIES
   ============================================================================= */

:root {
    /* --- Paleta principal --- */
    --color-primario:        #96A8C2;   /* dusty blue */
    --color-primario-dark:   #7A8FA8;   /* dusty blue oscurecido para hover */
    --color-primario-light:  #C5D2E0;   /* dusty blue aclarado para fondos suaves */

    --color-secundario:      #96AB9B;   /* sage green */
    --color-secundario-dark: #7A9180;
    --color-secundario-light:#C2D3C7;

    --color-acento:          #E8C39E;   /* champagne */
    --color-acento-dark:     #D4A87A;
    --color-acento-light:    #F4E2CB;

    --color-fondo:           #FDFAF5;   /* ivory */
    --color-fondo-suave:     #F5F0E8;   /* ivory ligeramente más cálido para secciones alternas */

    --color-texto:           #4A4F55;   /* gris */
    --color-texto-destacado: #5F7A6A;   /* gris olivo */
    --color-texto-suave:     #8A9099;   /* para captions, placeholders */

    /* --- Estados funcionales (coherentes con la paleta) --- */
    --color-success:         #5F7A6A;
    --color-success-bg:      #EAF0EC;
    --color-success-border:  #C2D3C7;

    --color-info:            #96A8C2;
    --color-info-bg:         #EAF0F5;
    --color-info-border:     #C5D2E0;

    --color-warning:         #C8935A;   /* champagne oscurecido para que el texto sea legible */
    --color-warning-bg:      #FBF0E3;
    --color-warning-border:  #F4E2CB;

    --color-danger:          #B07070;   /* terracota suave */
    --color-danger-bg:       #F5EAEA;
    --color-danger-border:   #DFB8B8;

    /* --- Tipografías --- */
    --font-titulo:           'Playfair Display', Georgia, serif;
    --font-cuerpo:           'Lato', system-ui, sans-serif;
    --font-decorativa:       'Great Vibes', cursive;

    /* --- Escala tipográfica --- */
    --fs-xs:    0.75rem;    /*  12px */
    --fs-sm:    0.875rem;   /*  14px */
    --fs-base:  1rem;       /*  16px */
    --fs-md:    1.125rem;   /*  18px */
    --fs-lg:    1.25rem;    /*  20px */
    --fs-xl:    1.5rem;     /*  24px */
    --fs-2xl:   2rem;       /*  32px */
    --fs-3xl:   2.5rem;     /*  40px */
    --fs-4xl:   3.5rem;     /*  56px */
    --fs-deco:  3rem;       /*  Para Great Vibes en hero */
    --fs-deco-lg: 4.5rem;

    /* --- Espaciado --- */
    --sp-xs:    0.25rem;
    --sp-sm:    0.5rem;
    --sp-md:    1rem;
    --sp-lg:    2rem;
    --sp-xl:    4rem;
    --sp-2xl:   6rem;
    --sp-seccion: 5rem;     /* Padding vertical de secciones */

    /* --- Bordes y radios --- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-pill: 999px;

    /* --- Sombras --- */
    --sombra-sm:  0 1px 3px rgba(74, 79, 85, 0.08);
    --sombra-md:  0 4px 16px rgba(74, 79, 85, 0.10);
    --sombra-lg:  0 8px 32px rgba(74, 79, 85, 0.13);

    /* --- Transiciones --- */
    --transicion: 0.2s ease;

    /* --- Hero --- */
    --hero-min-height: 100svh;
    --hero-overlay:    rgba(30, 35, 40, 0.38);
}


/* =============================================================================
   2. OVERRIDES DE BOOTSTRAP 5
   Redefinimos las custom properties de Bootstrap para que usen nuestra paleta.
   ============================================================================= */

:root {
    /* Colores de Bootstrap mapeados a nuestra paleta */
    --bs-primary:           var(--color-primario);
    --bs-primary-rgb:       150, 168, 194;
    --bs-secondary:         var(--color-secundario);
    --bs-secondary-rgb:     150, 171, 155;
    --bs-success:           var(--color-success);
    --bs-success-rgb:       95, 122, 106;
    --bs-info:              var(--color-info);
    --bs-info-rgb:          150, 168, 194;
    --bs-warning:           var(--color-warning);
    --bs-warning-rgb:       200, 147, 90;
    --bs-danger:            var(--color-danger);
    --bs-danger-rgb:        176, 112, 112;

    --bs-body-font-family:  var(--font-cuerpo);
    --bs-body-font-size:    var(--fs-base);
    --bs-body-color:        var(--color-texto);
    --bs-body-bg:           var(--color-fondo);

    --bs-border-radius:     var(--radius-md);
    --bs-border-radius-sm:  var(--radius-sm);
    --bs-border-radius-lg:  var(--radius-lg);
    --bs-border-radius-pill:var(--radius-pill);

    --bs-link-color:        var(--color-primario);
    --bs-link-hover-color:  var(--color-primario-dark);

    --bs-heading-color:     var(--color-texto);
}


/* =============================================================================
   3. BASE Y RESET
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:      var(--font-cuerpo);
    font-size:        var(--fs-base);
    line-height:      1.7;
    color:            var(--color-texto);
    background-color: var(--color-fondo);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tipografía de títulos */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family:  var(--font-titulo);
    font-weight:  700;
    line-height:  1.25;
    color:        var(--color-texto);
    margin-bottom: var(--sp-md);
}

h1, .h1 { font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl)); }
h2, .h2 { font-size: clamp(var(--fs-xl),  3vw, var(--fs-3xl)); }
h3, .h3 { font-size: clamp(var(--fs-lg),  2vw, var(--fs-2xl)); }
h4, .h4 { font-size: var(--fs-xl); }
h5, .h5 { font-size: var(--fs-lg); }
h6, .h6 { font-size: var(--fs-md); }

p {
    margin-bottom: var(--sp-md);
}

a {
    color:           var(--color-primario);
    text-decoration: none;
    transition:      color var(--transicion);
}

a:hover {
    color: var(--color-primario-dark);
}

img {
    max-width: 100%;
    height:    auto;
    display:   block;
}

/* Tipografía decorativa */
.font-deco {
    font-family: var(--font-decorativa);
    font-weight: 400;
}

.text-primario   { color: var(--color-primario)   !important; }
.text-secundario { color: var(--color-secundario) !important; }
.text-acento     { color: var(--color-acento)     !important; }
.text-destacado  { color: var(--color-texto-destacado) !important; }
.text-suave      { color: var(--color-texto-suave)!important; }

.bg-fondo        { background-color: var(--color-fondo)       !important; }
.bg-fondo-suave  { background-color: var(--color-fondo-suave) !important; }
.bg-primario     { background-color: var(--color-primario)     !important; }
.bg-secundario   { background-color: var(--color-secundario)   !important; }
.bg-acento       { background-color: var(--color-acento)       !important; }


/* =============================================================================
   5. HERO
   ============================================================================= */

.hero {
    position:         relative;
    min-height:       var(--hero-min-height);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    text-align:       center;
    overflow:         hidden;
    color:            #fff;
}

.hero__imagen {
    position:   absolute;
    inset:      0;
    object-fit: cover;
    width:      100%;
    height:     100%;
    z-index:    0;
}

.hero__overlay {
    position:   absolute;
    inset:      0;
    background: var(--hero-overlay);
    z-index:    1;
}

.hero__contenido {
    position:   relative;
    z-index:    2;
    padding:    var(--sp-xl) var(--sp-md);
}

.hero__deco {
    font-family: var(--font-decorativa);
    font-size:   clamp(var(--fs-deco), 8vw, var(--fs-deco-lg));
    color:       var(--color-acento-light);
    line-height: 1.1;
    margin-bottom: var(--sp-sm);
    text-shadow: 0 2px 16px rgba(0,0,0,0.18);
}

.hero__titulo {
    font-family: var(--font-titulo);
    font-size:   clamp(var(--fs-lg), 3vw, var(--fs-2xl));
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:       rgba(255,255,255,0.92);
    margin-bottom: var(--sp-lg);
}

.hero__fecha {
    font-family: var(--font-decorativa);
    font-size:   clamp(var(--fs-xl), 4vw, var(--fs-3xl));
    color:       var(--color-acento-light);
    margin-bottom: var(--sp-sm);
}

.hero__lugar {
    font-family:    var(--font-cuerpo);
    font-size:      var(--fs-sm);
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.8);
    margin-bottom:  var(--sp-xl);
}

.hero__scroll {
    position:  absolute;
    bottom:    var(--sp-lg);
    left:      50%;
    transform: translateX(-50%);
    z-index:   2;
    color:     rgba(255,255,255,0.7);
    font-size: var(--fs-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display:   flex;
    flex-direction: column;
    align-items: center;
    gap:       var(--sp-xs);
    animation: boda-bounce 2s infinite;
}

@keyframes boda-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}


/* =============================================================================
   6. SECCIONES DE CONTENIDO
   ============================================================================= */

.seccion {
    padding: var(--sp-seccion) 0;
}

.seccion--alterna {
    background-color: var(--color-fondo-suave);
}

.seccion__encabezado {
    text-align:    center;
    margin-bottom: var(--sp-xl);
}

.seccion__pretitulo {
    font-family:    var(--font-decorativa);
    font-size:      var(--fs-2xl);
    color:          var(--color-primario);
    display:        block;
    margin-bottom:  var(--sp-xs);
}

.seccion__titulo {
    font-family: var(--font-titulo);
    color:       var(--color-texto);
    margin-bottom: var(--sp-sm);
}

.seccion__linea {
    width:        60px;
    height:       2px;
    background:   var(--color-acento);
    margin:       var(--sp-md) auto 0;
    border:       none;
    border-radius: var(--radius-pill);
}


/* =============================================================================
   7. TARJETAS DE INFORMACIÓN (para horarios, lugar, transporte, etc.)
   ============================================================================= */

.info-card {
    background:    var(--color-fondo);
    border:        1px solid rgba(150, 168, 194, 0.2);
    border-radius: var(--radius-lg);
    padding:       var(--sp-lg);
    box-shadow:    var(--sombra-sm);
    transition:    box-shadow var(--transicion), transform var(--transicion);
    height:        100%;
}

.info-card:hover {
    box-shadow: var(--sombra-md);
    transform:  translateY(-2px);
}

.info-card__icono {
    font-size:     2rem;
    margin-bottom: var(--sp-md);
    display:       block;
}

.info-card__titulo {
    font-family:   var(--font-titulo);
    font-size:     var(--fs-lg);
    margin-bottom: var(--sp-sm);
    color:         var(--color-texto-destacado);
}

.info-card__texto {
    font-size:   var(--fs-sm);
    color:       var(--color-texto-suave);
    line-height: 1.6;
}

.info-card--acento {
    border-top: 3px solid var(--color-acento);
}

.info-card--primario {
    border-top: 3px solid var(--color-primario);
}

.info-card--secundario {
    border-top: 3px solid var(--color-secundario);
}


/* =============================================================================
   8. BOTONES
   ============================================================================= */

.boda-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            var(--sp-xs);
    font-family:    var(--font-cuerpo);
    font-size:      var(--fs-sm);
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        0.75rem 1.75rem;
    border-radius:  var(--radius-pill);
    border:         2px solid transparent;
    cursor:         pointer;
    text-decoration: none;
    transition:     background var(--transicion),
                    color var(--transicion),
                    border-color var(--transicion),
                    transform var(--transicion),
                    box-shadow var(--transicion);
    white-space:    nowrap;
}

.boda-btn:hover {
    transform:  translateY(-1px);
    box-shadow: var(--sombra-sm);
}

.boda-btn:active {
    transform: translateY(0);
}

/* Primario */
.boda-btn--primario {
    background:   var(--color-primario);
    color:        #fff;
    border-color: var(--color-primario);
}

.boda-btn--primario:hover {
    background:   var(--color-primario-dark);
    border-color: var(--color-primario-dark);
    color:        #fff;
}

/* Secundario / outline */
.boda-btn--secundario {
    background:   transparent;
    color:        var(--color-primario);
    border-color: var(--color-primario);
}

.boda-btn--secundario:hover {
    background:   var(--color-primario);
    color:        #fff;
}

/* Acento */
.boda-btn--acento {
    background:   var(--color-acento);
    color:        var(--color-texto);
    border-color: var(--color-acento);
}

.boda-btn--acento:hover {
    background:   var(--color-acento-dark);
    border-color: var(--color-acento-dark);
    color:        #fff;
}

/* Tamaño grande */
.boda-btn--grande {
    font-size: var(--fs-base);
    padding:   1rem 2.5rem;
}

/* Hero: botón sobre imagen oscura */
.boda-btn--hero {
    background:   rgba(255,255,255,0.15);
    color:        #fff;
    border-color: rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
}

.boda-btn--hero:hover {
    background:   rgba(255,255,255,0.28);
    color:        #fff;
    border-color: #fff;
}


/* =============================================================================
   9. FORMULARIO DE CONFIRMACIÓN
   ============================================================================= */

.boda-form-wrap {
    max-width:     640px;
    margin:        var(--sp-xl) auto;
    padding:       0 var(--sp-md);
}

.boda-form-cabecera {
    text-align:    center;
    margin-bottom: var(--sp-xl);
}

.boda-form-cabecera h2 {
    font-family: var(--font-titulo);
    color:       var(--color-texto-destacado);
}

.boda-form-subtext {
    color:     var(--color-texto-suave);
    font-size: var(--fs-sm);
}

.boda-form-icono {
    font-size:     3.5rem;
    margin-bottom: var(--sp-md);
}

/* Mensaje de éxito / error */
.boda-form-mensaje {
    text-align:    center;
    padding:       var(--sp-xl) var(--sp-lg);
    background:    var(--color-fondo-suave);
    border-radius: var(--radius-lg);
    border:        1px solid rgba(150, 168, 194, 0.2);
}

.boda-form-mensaje h2 {
    font-family: var(--font-titulo);
    color:       var(--color-texto-destacado);
    margin-bottom: var(--sp-md);
}

.boda-form-acciones {
    display:        flex;
    flex-wrap:      wrap;
    gap:            var(--sp-md);
    justify-content: center;
    margin-top:     var(--sp-lg);
}

/* Fieldsets */
.boda-fieldset {
    border:        none;
    padding:       0;
    margin:        0 0 var(--sp-lg) 0;
}

.boda-fieldset legend {
    font-family:   var(--font-titulo);
    font-size:     var(--fs-lg);
    font-weight:   700;
    color:         var(--color-texto);
    margin-bottom: var(--sp-md);
    width:         100%;
}

.boda-fieldset__desc {
    font-size:     var(--fs-sm);
    color:         var(--color-texto-suave);
    margin-bottom: var(--sp-md);
}

/* Radio cards */
.boda-radio-group {
    display:   flex;
    gap:       var(--sp-md);
    flex-wrap: wrap;
}

.boda-radio-card {
    flex:          1;
    min-width:     120px;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           var(--sp-xs);
    padding:       var(--sp-lg) var(--sp-md);
    border:        2px solid rgba(150, 168, 194, 0.3);
    border-radius: var(--radius-lg);
    background:    var(--color-fondo);
    cursor:        pointer;
    transition:    border-color var(--transicion),
                   background   var(--transicion),
                   box-shadow   var(--transicion);
    text-align:    center;
}

.boda-radio-card input[type="radio"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.boda-radio-card:hover {
    border-color: var(--color-primario);
    box-shadow:   var(--sombra-sm);
}

.boda-radio-card--activa {
    border-color: var(--color-primario);
    background:   var(--color-primario-light);
    box-shadow:   var(--sombra-sm);
}

.boda-radio-card__icono {
    font-size:     2rem;
    line-height:   1;
}

.boda-radio-card__texto {
    font-size:   var(--fs-sm);
    font-weight: 700;
    color:       var(--color-texto);
}

/* Checkboxes */
.boda-checkbox-group {
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-md);
}

.boda-checkbox {
    display:     flex;
    align-items: center;
    gap:         var(--sp-md);
    cursor:      pointer;
    font-size:   var(--fs-base);
}

.boda-checkbox input[type="checkbox"] {
    appearance:    none;
    width:         1.25rem;
    height:        1.25rem;
    border:        2px solid var(--color-primario);
    border-radius: var(--radius-sm);
    background:    var(--color-fondo);
    cursor:        pointer;
    flex-shrink:   0;
    transition:    background var(--transicion), border-color var(--transicion);
    position:      relative;
}

.boda-checkbox input[type="checkbox"]:checked {
    background:   var(--color-primario);
    border-color: var(--color-primario);
}

.boda-checkbox input[type="checkbox"]:checked::after {
    content:    '';
    position:   absolute;
    top:        2px;
    left:       5px;
    width:      5px;
    height:     9px;
    border:     2px solid #fff;
    border-top: none;
    border-left: none;
    transform:  rotate(45deg);
}

/* Textarea */
.boda-textarea {
    width:         100%;
    padding:       0.75rem var(--sp-md);
    border:        2px solid rgba(150, 168, 194, 0.3);
    border-radius: var(--radius-md);
    background:    var(--color-fondo);
    font-family:   var(--font-cuerpo);
    font-size:     var(--fs-base);
    color:         var(--color-texto);
    resize:        vertical;
    transition:    border-color var(--transicion);
}

.boda-textarea:focus {
    outline:      none;
    border-color: var(--color-primario);
    box-shadow:   0 0 0 3px rgba(150, 168, 194, 0.15);
}

.boda-textarea::placeholder {
    color: var(--color-texto-suave);
}

/* Submit */
.boda-form-submit {
    text-align:  center;
    margin-top:  var(--sp-lg);
}

/* Enlace personal */
.boda-enlace-personal {
    margin-top:  var(--sp-lg);
    padding-top: var(--sp-lg);
    border-top:  1px solid rgba(150, 168, 194, 0.2);
    text-align:  center;
}

.boda-enlace-personal__input {
    display:       flex;
    gap:           var(--sp-sm);
    margin-bottom: var(--sp-sm);
}

.boda-enlace-personal__input input {
    flex:          1;
    padding:       0.5rem var(--sp-md);
    border:        1px solid rgba(150, 168, 194, 0.3);
    border-radius: var(--radius-md);
    font-size:     var(--fs-sm);
    color:         var(--color-texto-suave);
    background:    var(--color-fondo);
}

.boda-btn-copiar {
    padding:       0.5rem var(--sp-md);
    background:    var(--color-primario-light);
    color:         var(--color-texto-destacado);
    border:        none;
    border-radius: var(--radius-md);
    font-size:     var(--fs-sm);
    font-weight:   700;
    cursor:        pointer;
    transition:    background var(--transicion);
    white-space:   nowrap;
}

.boda-btn-copiar:hover {
    background: var(--color-primario);
    color:      #fff;
}

.boda-btn-whatsapp {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-xs);
    font-size:      var(--fs-sm);
    font-weight:    700;
    color:          var(--color-secundario-dark);
    text-decoration: none;
}

.boda-btn-whatsapp:hover {
    color: var(--color-texto-destacado);
}

/* Detalles del formulario con transición */
.boda-detalles {
    overflow:   hidden;
    transition: opacity 0.3s ease;
}

.boda-detalles[hidden] {
    display: none;
}


/* =============================================================================
   10. GALERÍA
   ============================================================================= */

.galeria-grid {
    columns:    3;
    gap:        var(--sp-md);
    column-gap: var(--sp-md);
}

@media (max-width: 768px) {
    .galeria-grid { columns: 2; }
}

@media (max-width: 480px) {
    .galeria-grid { columns: 1; }
}

.galeria-item {
    break-inside:  avoid;
    margin-bottom: var(--sp-md);
    border-radius: var(--radius-md);
    overflow:      hidden;
    box-shadow:    var(--sombra-sm);
    cursor:        pointer;
    transition:    transform var(--transicion), box-shadow var(--transicion);
}

.galeria-item:hover {
    transform:  translateY(-3px);
    box-shadow: var(--sombra-md);
}

.galeria-item img {
    width:      100%;
    display:    block;
    transition: transform 0.4s ease;
}

.galeria-item:hover img {
    transform: scale(1.02);
}

/* Lightbox sencillo */
.galeria-lightbox {
    position:   fixed;
    inset:      0;
    z-index:    9999;
    background: rgba(0,0,0,0.92);
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    var(--sp-md);
}

.galeria-lightbox[hidden] {
    display: none;
}

.galeria-lightbox img {
    max-width:  90vw;
    max-height: 90vh;
    border-radius: var(--radius-md);
    box-shadow: var(--sombra-lg);
}

.galeria-lightbox__cerrar {
    position:    absolute;
    top:         var(--sp-md);
    right:       var(--sp-md);
    background:  rgba(255,255,255,0.15);
    border:      none;
    color:       #fff;
    font-size:   var(--fs-xl);
    width:       2.5rem;
    height:      2.5rem;
    border-radius: var(--radius-pill);
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background var(--transicion);
}

.galeria-lightbox__cerrar:hover {
    background: rgba(255,255,255,0.28);
}


/* =============================================================================
   11. UPLOAD DE FOTOS
   ============================================================================= */

.upload-zona {
    border:        2px dashed rgba(150, 168, 194, 0.5);
    border-radius: var(--radius-lg);
    padding:       var(--sp-xl);
    text-align:    center;
    background:    var(--color-fondo-suave);
    cursor:        pointer;
    transition:    border-color var(--transicion), background var(--transicion);
}

.upload-zona:hover,
.upload-zona--activa {
    border-color: var(--color-primario);
    background:   var(--color-primario-light);
}

.upload-zona__icono {
    font-size:     3rem;
    margin-bottom: var(--sp-md);
    display:       block;
    color:         var(--color-primario);
}

.upload-zona__texto {
    font-size:   var(--fs-sm);
    color:       var(--color-texto-suave);
    margin:      0;
}

.upload-progreso {
    height:        6px;
    background:    rgba(150, 168, 194, 0.2);
    border-radius: var(--radius-pill);
    overflow:      hidden;
    margin-top:    var(--sp-md);
}

.upload-progreso__barra {
    height:     100%;
    background: var(--color-primario);
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
}


/* =============================================================================
   12. DIVISORES DECORATIVOS
   ============================================================================= */

.divisor-deco {
    text-align: center;
    color:      var(--color-acento);
    font-size:  var(--fs-xl);
    margin:     var(--sp-lg) 0;
    letter-spacing: 0.5em;
}

.divisor-deco::before,
.divisor-deco::after {
    content: '—';
    margin:  0 var(--sp-md);
    opacity: 0.5;
}


/* =============================================================================
   13. FOOTER
   ============================================================================= */

.site-footer {
    background:  var(--color-fondo-suave);
    border-top:  1px solid rgba(150, 168, 194, 0.2);
    padding:     var(--sp-xl) 0 var(--sp-lg);
    text-align:  center;
}

.site-footer__deco {
    font-family:   var(--font-decorativa);
    font-size:     var(--fs-2xl);
    color:         var(--color-primario);
    margin-bottom: var(--sp-sm);
}

.site-footer__texto {
    font-size: var(--fs-sm);
    color:     var(--color-texto-suave);
    margin:    0;
}


/* =============================================================================
   14. UTILIDADES ADICIONALES
   ============================================================================= */

/* Animación de entrada suave para secciones */
.animar-entrada {
    opacity:    0;
    transform:  translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animar-entrada.visible {
    opacity:   1;
    transform: translateY(0);
}

/* Separador decorativo de sección */
.sep-deco {
    display:        flex;
    align-items:    center;
    gap:            var(--sp-md);
    margin:         var(--sp-md) auto;
    max-width:      200px;
    justify-content: center;
}

.sep-deco::before,
.sep-deco::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--color-acento);
}

/* Scroll suave al ancla desde nav */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Focus visible accesible */
:focus-visible {
    outline:        2px solid var(--color-primario);
    outline-offset: 3px;
    border-radius:  var(--radius-sm);
}


/* =============================================================================
   FORMULARIO DE GRUPOS — estilos adicionales
   ============================================================================= */

/* Separación entre miembros del grupo */
.boda-miembro {
    padding: var(--sp-lg) 0;
}

.boda-miembro__nombre {
    font-family:   var(--font-titulo);
    font-size:     var(--fs-lg);
    font-weight:   700;
    color:         var(--color-texto-destacado);
    margin-bottom: var(--sp-md);
}

.boda-miembro__separador {
    border:     none;
    border-top: 1px solid rgba(150, 168, 194, 0.2);
    margin:     0;
}

/* Grupo de asistencia compacto para grupos */
.boda-radio-group--asistencia {
    margin-bottom: var(--sp-md);
}

/* Detalles del miembro con indentación visual */
.boda-detalles--miembro {
    margin-left:   var(--sp-md);
    padding-left:  var(--sp-md);
    border-left:   2px solid var(--color-primario-light);
    margin-top:    var(--sp-md);
}

/* Labels inline para los campos de detalles */
.boda-fieldset--inline {
    margin-bottom: var(--sp-md);
}

.boda-label-inline {
    display:       block;
    font-weight:   700;
    font-size:     var(--fs-sm);
    color:         var(--color-texto);
    margin-bottom: var(--sp-sm);
}

.boda-textarea--sm {
    rows: 2;
    min-height: 60px;
}

/* Grid del autobús */
.boda-autobus-grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-sm);
}

.boda-autobus-vuelta {
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-sm);
    padding-left:   var(--sp-md);
    border-left:    2px solid var(--color-fondo-suave);
}

/* Resumen del grupo en la pantalla de confirmación */
.boda-resumen-grupo {
    background:    var(--color-fondo);
    border:        1px solid rgba(150, 168, 194, 0.2);
    border-radius: var(--radius-md);
    padding:       var(--sp-md) var(--sp-lg);
    margin:        var(--sp-md) 0 var(--sp-lg);
    text-align:    left;
}

.boda-resumen-grupo__fila {
    padding:       var(--sp-xs) 0;
    font-size:     var(--fs-sm);
    border-bottom: 1px solid rgba(150, 168, 194, 0.1);
}

.boda-resumen-grupo__fila:last-child {
    border-bottom: none;
}


/* Logo en el hero */
.hero__logo {
    margin: var(--sp-lg) auto var(--sp-md);
    display: flex;
    justify-content: center;
}

.hero__logo-img {
    width:      min(220px, 55vw);
    height:     auto;
    filter:     drop-shadow(0 2px 12px rgba(0,0,0,0.25));
    opacity:    0.92;
    transition: opacity var(--transicion);
}

.hero__logo-img:hover {
    opacity: 1;
}


/* =============================================================================
   ICONOS PHOSPHOR
   ============================================================================= */

/* Icono de sección en tarjetas info */
.info-card__icono {
    font-size:     2.5rem;
    line-height:   1;
    color:         var(--color-primario);
    margin-bottom: var(--sp-md);
    display:       block;
}

/* Icono decorativo en formulario (sobre/corazón) */
.boda-form-icono {
    font-size:     3.5rem;
    line-height:   1;
    color:         var(--color-primario);
    margin-bottom: var(--sp-md);
    display:       block;
}

/* Icono en zona de upload */
.upload-zona__icono {
    font-size:     3rem;
    color:         var(--color-primario);
    margin-bottom: var(--sp-md);
    display:       block;
}

/* Radio cards — icono de asistencia */
.boda-radio-card__icono {
    font-size:  2rem;
    line-height: 1;
    color:       var(--color-primario);
}

.boda-radio-card--activa .boda-radio-card__icono {
    color: var(--color-primario-dark);
}

/* Iconos inline en texto (reloj, etc.) */
.ph-light.ph-clock,
.ph-light.ph-map-pin {
    vertical-align: middle;
    font-size:      1.1em;
    margin-right:   0.2em;
}

/* Botón WhatsApp con icono */
.boda-btn-whatsapp .ph-light {
    font-size: 1.2em;
    vertical-align: middle;
}

/* Icono en botones */
.boda-btn .ph-light {
    font-size:      1.1em;
    vertical-align: middle;
    margin-right:   0.2em;
}

/* Resumen grupo — iconos de estado */
.boda-resumen-grupo__fila .ph-light {
    font-size:      1.1em;
    vertical-align: middle;
    margin-right:   0.3em;
}
.ph-light.ph-check-circle { color: var(--color-success); }
.ph-light.ph-x-circle     { color: var(--color-danger);  }
.ph-light.ph-clock        { color: var(--color-texto-suave); }