/* =====================================================================
   ARCHIVO: fuentes_tamanos_guiado.css
   OBJETIVO: controlar FUENTE y TAMAÑO por bloque, SIN tocar estructura.

   IMPORTANTE:
   - Este archivo debe cargarse DESPUÉS de portada.css o invitacion.css.
   - Aquí NO se modifican fotos, posiciones, márgenes, animaciones ni anchos.
   - Para cambiar algo, edita SOLO las variables de la parte superior.
   - Si algo no te gusta, borra la línea del HTML que conecta este archivo
     y todo vuelve al diseño original.
===================================================================== */

/* FUENTES DISPONIBLES DESDE GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Playfair+Display:wght@400;600;700&family=GFS+Didot&family=DM+Sans:wght@300;400;500;700&family=Open+Sans:wght@300;400;500;600;700&display=swap');

/* =====================================================================
   1) PANEL PRINCIPAL: CAMBIA AQUÍ LAS FUENTES Y TAMAÑOS
   ===================================================================== */
:root {
  /* ================================================================
     FUENTES GENERALES
     Cambia el nombre de la fuente aquí y se aplicará por bloques.
     Opciones ya cargadas:
     'Cormorant Garamond', serif
     'Great Vibes', cursive
     'Playfair Display', serif
     'GFS Didot', serif
     'DM Sans', sans-serif
  ================================================================ */
  --fuente-texto-general: 'DM Sans', serif;
  --fuente-romantica: 'Great Vibes', cursive;
  --fuente-titulo-elegante: 'Playfair Display', serif;
  --fuente-numero-elegante: 'GFS Didot', DM Sans;
  --fuente-moderna: 'DM Sans', sans-serif;

  /* ================================================================
     PORTADA: index.html
  ================================================================ */
  --tam-portada-texto-pequeno: 0.8rem;                 /* Texto: Sé testigo del amor... */
  --tam-portada-texto-cursiva: clamp(2rem, 7vw, 3rem);  /* Texto: toda la vida ♡ */
  --tam-portada-toca: 0.68rem;                          /* Texto: Toca para abrir la invitación */

  /* ================================================================
     MENÚ SUPERIOR
  ================================================================ */
  --tam-menu: 0.65rem;                                  /* Inicio / Ubicación / Regalos / Asistencia */

  /* ================================================================
   CORRECCIÓN RESPONSIVE - INICIO
   FECHA: 01/06/2026
   MOTIVO: Que PC y celular se vean más equilibrados.
   REGLA: clamp(mínimo celular, adaptable, máximo laptop)
================================================================ */

/* Christian / Turena */
--tam-nombres-novios: clamp(3.4rem, 8vw, 5.4rem); /* MÍNIMO más bajo para celular, máximo controlado para laptop */

/* Símbolo & */
--tam-ampersand: clamp(1.4rem, 3.5vw, 2.4rem); /* CORREGIDO: antes estaba al revés */

/* ¡Nos Casamos! */
--tam-nos-casamos: clamp(1.1rem, 4vw, 1.6rem); /* Más equilibrado en celular */

/* Haz clic para reproducir */
--tam-musica-hint: 0.95rem; /* Tamaño fijo más pequeño y estable */                        /* Haz clic para 
  
  
  
  
  reproducir... */

  /* ================================================================
     REPRODUCTOR
  ================================================================ */
  --tam-boton-play: 1.2rem;                             /* Botón ▶ */
  --tam-tiempo-audio: 0.65rem;                          /* 0:00 / 0:00 */
  --tam-boton-volumen: 1rem;                            /* Botón 🔊 */

 /* ================================================================
   CORRECCIÓN RESPONSIVE - NUESTRA BODA
================================================================ */

/* Así da inicio nuestra historia... */
--tam-boda-intro: 0.75rem; /* Texto pequeño estable */

/* NUESTRA */
--tam-boda-nuestra: clamp(1.6rem, 5vw, 2rem); /* Equilibrado */

/* Boda */
--tam-boda-script: clamp(2.8rem, 8vw, 3.9rem); /* CORREGIDO: antes 4rem era mayor que 3.9rem */

/* Padres de la Novia / Madre del Novio / Padrinos */
--tam-boda-subtitulo: clamp(1.1rem, 3.5vw, 1.4rem); /* Subtítulos controlados */

/* Nombres de padres/padrinos */
--tam-boda-nombres: clamp(0.95rem, 3vw, 1.15rem); /* Nombres controlados */

/* Presencia especial */
--tam-boda-especial: clamp(0.85rem, 2.8vw, 1.1rem); /* Texto especial controlado */

  /* ================================================================
   CORRECCIÓN RESPONSIVE - RESERVA LA FECHA
================================================================ */

/* Reserva */
--tam-fecha-script: clamp(3rem, 8vw, 4rem); /* Título Reserva */

/* LA FECHA */
--tam-fecha-caps: clamp(1.5rem, 4.5vw, 2.1rem); /* CORREGIDO: antes estaba al revés */

/* Sé parte de este día inolvidable */
--tam-fecha-subtitulo: 1rem; /* Más estable */

/* 05 / 09 / 26 */
--tam-fecha-numeros: clamp(2rem, 8vw, 3.2rem); /* CORREGIDO: antes estaba al revés */

/* DOM / LUN / MAR... */
--tam-calendario-cabecera: clamp(0.62rem, 2vw, 0.78rem); /* Cabecera controlada */

/* Días del calendario */
--tam-calendario-dias: clamp(0.72rem, 2.5vw, 0.9rem); /* Días controlados */

/* Corazón del día */
--tam-corazon-calendario: 0.62rem; /* Corazón más proporcional */

  /* ================================================================
   CORRECCIÓN RESPONSIVE - CONTADOR
================================================================ */

/* Faltan */
--tam-contador-faltan: clamp(1.8rem, 5vw, 2.4rem); /* CORREGIDO: antes estaba al revés */

/* Números del contador */
--tam-contador-num: clamp(1.6rem, 7vw, 2.8rem); /* Números equilibrados */

/* DÍAS / HORAS / MINUTOS / SEGUNDOS */
--tam-contador-label: clamp(0.55rem, 1.6vw, 0.68rem); /* Etiquetas pequeñas */

/* Separadores : */
--tam-contador-sep: clamp(1.4rem, 5.5vw, 2.2rem); /* Separadores equilibrados */

  /* ================================================================
     UBICACIÓN
  ================================================================ */
  --tam-ubicacion-titulo: clamp(1.8rem, 7vw, 2.8rem);   /* Ceremonia Religiosa */
  --tam-ubicacion-lugar: 0.75rem;                       /* Lugar */
  --tam-ubicacion-hora: 1.3rem;                         /* Hora */
  --tam-ubicacion-boton: 0.78rem;                       /* VER MAPA */

  /* ================================================================
     DRESS CODE
  ================================================================ */
  --tam-dress-titulo: clamp(3rem, 8vw, 3rem);           /* Dress Code */
  --tam-dress-sub: 1.85rem;                             /* ELEGANTE */
  --tam-dress-texto: 1.05rem;                           /* Descripción dress code */

  /* ================================================================
     REGALOS
  ================================================================ */
  --tam-regalos-titulo: clamp(3rem, 12vw, 4.5rem);      /* Regalos */
  --tam-regalos-intro: 1.01rem;                         /* Texto introductorio */
  --tam-regalos-label: 1.05rem;                         /* BCP / Interbank / Yape */
  --tam-regalos-valor: 0.95rem;                         /* Números de cuenta / valores */
  --tam-regalos-nombre: 1.05rem;                         /* Nombre del titular */
  --tam-regalos-nota: 1.52rem;                          /* Nota de regalos */
  --tam-regalos-accion-titulo: 1.88rem;                 /* Buzón / canciones, si existe */
  --tam-regalos-accion-texto: .78rem;                  /* Texto pequeño de acciones */

  /* ================================================================
     ASISTENCIA / FORMULARIOS / BOTONES
     Si tus clases existen en invitacion.html, se aplicarán.
  ================================================================ */
  --tam-asistencia-titulo: clamp(0.02rem, 8vw, 3.4rem);  /* Título asistencia */
  --tam-asistencia-texto: 5.95rem;                      /* Texto de asistencia */
  --tam-form-label: 0.9rem;                             /* Etiquetas formulario */
  --tam-form-input: 0.95rem;                            /* Campos de formulario */
  --tam-botones: 1.82rem;                               /* Botones generales */
}

/* =====================================================================
   2) PORTADA: index.html
   ===================================================================== */

/* AQUÍ CAMBIAS LA FUENTE GENERAL DE LA PORTADA */
body {
  font-family: var(--fuente-texto-general) !important;
}

/* AQUÍ CAMBIAS EL TEXTO PEQUEÑO DE PORTADA: "Sé testigo del amor..." */
.texto-small {
  font-family: var(--fuente-moderna) !important;
  font-size: var(--tam-portada-texto-pequeno) !important;
}

/* AQUÍ CAMBIAS EL TEXTO CURSIVO DE PORTADA: "toda la vida ♡" */
.texto-cursiva {
  font-family: var(--fuente-romantica) !important;
  font-size: var(--tam-portada-texto-cursiva) !important;
}

/* AQUÍ CAMBIAS EL TEXTO: "Toca para abrir la invitación" */
.clic-texto {
  font-family: var(--fuente-moderna) !important;
  font-size: var(--tam-portada-toca) !important;
}

/* =====================================================================
   3) MENÚ SUPERIOR
   ===================================================================== */

/* AQUÍ CAMBIAS EL MENÚ: Inicio / Ubicación / Regalos / Asistencia */
.menu a {
  font-family: var(--fuente-moderna) !important;
  font-size: var(--tam-menu) !important;
}

/* =====================================================================
   4) SECCIÓN INICIO: nombres, subtítulo y música
   ===================================================================== */

/* AQUÍ CAMBIAS LOS NOMBRES GRANDES: Christian / Turena */
.nombre-texto {
  font-family: var(--fuente-romantica) !important;
  font-size: var(--tam-nombres-novios) !important;
}

/* AQUÍ CAMBIAS EL SÍMBOLO &: entre los nombres */
.nombre-ampersand {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-ampersand) !important;
}

/* AQUÍ CAMBIAS EL TEXTO: ¡Nos Casamos! */
.nos-casamos {
  font-family: var(--fuente-titulo-elegante) !important;
  font-size: var(--tam-nos-casamos) !important;
}

/* AQUÍ CAMBIAS EL TEXTO: Haz clic para reproducir nuestra canción */
.musica-hint {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-musica-hint) !important;
}

/* =====================================================================
   5) REPRODUCTOR DE MÚSICA
   ===================================================================== */

/* AQUÍ CAMBIAS EL TAMAÑO DEL BOTÓN PLAY */
.btn-play {
  font-size: var(--tam-boton-play) !important;
}

/* AQUÍ CAMBIAS EL TEXTO DEL TIEMPO DEL AUDIO */
.tiempo-texto {
  font-family: var(--fuente-moderna) !important;
  font-size: var(--tam-tiempo-audio) !important;
}

/* AQUÍ CAMBIAS EL TAMAÑO DEL BOTÓN VOLUMEN */
.btn-volumen {
  font-size: var(--tam-boton-volumen) !important;
}

/* =====================================================================
   6) SECCIÓN NUESTRA BODA / PADRES / PADRINOS
   ===================================================================== */

/* AQUÍ CAMBIAS EL PÁRRAFO: Así da inicio nuestra historia... */
.boda-intro {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-boda-intro) !important;
}

/* AQUÍ CAMBIAS LA PALABRA: NUESTRA */
.boda-nuestra {
  font-family: var(--fuente-titulo-elegante) !important;
  font-size: var(--tam-boda-nuestra) !important;
}

/* AQUÍ CAMBIAS LA PALABRA CURSIVA: Boda */
.boda-script {
  font-family: var(--fuente-romantica) !important;
  font-size: var(--tam-boda-script) !important;
}

/* AQUÍ CAMBIAS SUBTÍTULOS: Padres de la Novia / Madre del Novio / Padrinos */
.boda-subtitulo {
  font-family: var(--fuente-titulo-elegante) !important;
  font-size: var(--tam-boda-subtitulo) !important;
}

/* AQUÍ CAMBIAS LOS NOMBRES DE PADRES / MADRE / PADRINOS */
.boda-nombre {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-boda-nombres) !important;
}

/* AQUÍ CAMBIAS EL TEXTO: Y la presencia especial... */
.boda-especial {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-boda-especial) !important;
}

/* =====================================================================
   7) RESERVA LA FECHA + CALENDARIO
   ===================================================================== */

/* AQUÍ CAMBIAS EL TÍTULO CURSIVO: Fecha */
.fecha-script {
  font-family: var(--fuente-romantica) !important;
  font-size: var(--tam-fecha-script) !important;
}

/* AQUÍ CAMBIAS EL TEXTO EN MAYÚSCULAS: DE NUESTRA UNION */
.fecha-caps {
  font-family: var(--fuente-titulo-elegante) !important;
  font-size: var(--tam-fecha-caps) !important;
}

/* AQUÍ CAMBIAS EL SUBTÍTULO: Sé parte de este día inolvidable */
.fecha-subtitulo {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-fecha-subtitulo) !important;
}

/* AQUÍ CAMBIAS LOS NÚMEROS GRANDES: 05 / 09 / 26 */
.fecha-num {
  font-family: var(--fuente-numero-elegante) !important;
  font-size: var(--tam-fecha-numeros) !important;
}

/* AQUÍ CAMBIAS LA CABECERA DEL CALENDARIO: DOM / LUN / MAR... */
.cal-header span {
  font-family: var(--fuente-moderna) !important;
  font-size: var(--tam-calendario-cabecera) !important;
}

/* AQUÍ CAMBIAS LOS DÍAS DEL CALENDARIO: 1,2,3,4,5... */
.cal-body span {
  font-family: var(--fuente-titulo-elegante) !important;
  font-size: var(--tam-calendario-dias) !important;
}

/* AQUÍ CAMBIAS EL CORAZÓN PEQUEÑO DEL DÍA DE LA BODA */
.cal-dia-boda::after {
  font-size: var(--tam-corazon-calendario) !important;
}

/* =====================================================================
   8) CONTADOR REGRESIVO
   ===================================================================== */

/* AQUÍ CAMBIAS EL TEXTO: Faltan */
.contador-faltan {
  font-family: var(--fuente-romantica) !important;
  font-size: var(--tam-contador-faltan) !important;
}

/* AQUÍ CAMBIAS LOS NÚMEROS DEL CONTADOR */
.contador-num {
  font-family: var(--fuente-moderna) !important;
  font-size: var(--tam-contador-num) !important;
}

/* AQUÍ CAMBIAS LAS PALABRAS: DÍAS / HORAS / MINUTOS / SEGUNDOS */
.contador-label {
  font-family: var(--fuente-moderna) !important;
  font-size: var(--tam-contador-label) !important;
}

/* AQUÍ CAMBIAS LOS SEPARADORES : DEL CONTADOR */
.contador-sep {
  font-family: var(--fuente-moderna) !important;
  font-size: var(--tam-contador-sep) !important;
}

/* =====================================================================
   9) SECCIÓN UBICACIÓN
   ===================================================================== */

/* AQUÍ CAMBIAS TÍTULOS: Ceremonia Religiosa / Ceremonia Civil y Recepción */
.ubicacion-titulo {
  font-family: var(--fuente-romantica) !important;
  font-size: var(--tam-ubicacion-titulo) !important;
}

/* AQUÍ CAMBIAS EL LUGAR: CAPILLA / HACIENDA */
.ubicacion-lugar {
  font-family: var(--fuente-moderna) !important;
  font-size: var(--tam-ubicacion-lugar) !important;
}

/* AQUÍ CAMBIAS LA HORA: 11:45 A.M / 3:30 P.M */
.ubicacion-hora {
  font-family: var(--fuente-numero-elegante) !important;
  font-size: var(--tam-ubicacion-hora) !important;
}

/* BOTÓN VER MAPA ESTILO DORADO CON ICONO */
.ubicacion-btn {
  display: inline-flex;            /* Permite alinear icono y texto */
  align-items: center;             /* Centrar verticalmente */
  gap: 0.5rem;                     /* Espacio entre icono y texto */
  
  padding: 0.5rem 1.8rem;
  border-radius: 50px;
  border: 2px solid #d8a94a;      /* Borde dorado */
  
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  
  color: #3a2e28;
  background: #fff;                /* Fondo blanco */
  
  box-shadow: 0 4px 14px rgba(196, 135, 42, 0.25);
  text-decoration: none;
  
  transition: 
    background 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

/* ICONO DENTRO DEL BOTÓN */
.ubicacion-btn .icono-mapa {
  font-size: 1.1rem;
  color: #c4872a;
}

/* HOVER: dorado con efecto elevación */
.ubicacion-btn:hover {
  background: #c4872a;
  color: #fff;
  box-shadow: 0 6px 20px rgba(196, 135, 42, 0.35);
  transform: translateY(-2px);
}

/* OPCIONAL: si quieres que el icono cambie de color al pasar el mouse */
.ubicacion-btn:hover .icono-mapa {
  color: #fff;
}

/* =====================================================================
   10) DRESS CODE
   ===================================================================== */

/* AQUÍ CAMBIAS EL TÍTULO: Dress Code */
.dresscode-titulo {
  font-family: var(--fuente-romantica) !important;
  font-size: var(--tam-dress-titulo) !important;
}

/* AQUÍ CAMBIAS EL TEXTO: ELEGANTE */
.dresscode-sub {
  font-family: var(--fuente-moderna) !important;
  font-size: var(--tam-dress-sub) !important;
}

/* AQUÍ CAMBIAS LA DESCRIPCIÓN DEL DRESS CODE */
.dresscode-texto {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-dress-texto) !important;
}

/* =====================================================================
   11) SECCIÓN REGALOS
   ===================================================================== */

/* AQUÍ CAMBIAS EL TÍTULO: Regalos */
.regalos-script {
  font-family: var(--fuente-romantica) !important;
  font-size: var(--tam-regalos-titulo) !important;
}

/* AQUÍ CAMBIAS EL TEXTO INTRODUCTORIO DE REGALOS */
.regalos-intro {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-regalos-intro) !important;
}

/* AQUÍ CAMBIAS LABELS: BCP / Cuenta / CCI / Yape, etc. */
.regalos-label {
  font-family: var(--fuente-titulo-elegante) !important;
  font-size: var(--tam-regalos-label) !important;
}

/* AQUÍ CAMBIAS VALORES: números de cuenta o datos */
.regalos-valor,
.regalos-valor-inline {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-regalos-valor) !important;
}

/* AQUÍ CAMBIAS EL NOMBRE DEL TITULAR */
.regalos-nombre {
  font-family: var(--fuente-titulo-elegante) !important;
  font-size: var(--tam-regalos-nombre) !important;
}

/* AQUÍ CAMBIAS LA NOTA PEQUEÑA DE REGALOS */
.regalos-nota {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-regalos-nota) !important;
}

/* AQUÍ CAMBIAS TÍTULOS DE ACCIONES DE REGALOS, SI EXISTEN */
.regalos-accion-titulo,
.regalos-accion-title,
.accion-titulo {
  font-family: var(--fuente-titulo-elegante) !important;
  font-size: var(--tam-regalos-accion-titulo) !important;
}

/* AQUÍ CAMBIAS TEXTOS PEQUEÑOS DE ACCIONES DE REGALOS, SI EXISTEN */
.regalos-accion-texto,
.regalos-accion-desc,
.accion-texto {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-regalos-accion-texto) !important;
}

/* =====================================================================
   12) SECCIÓN ASISTENCIA / FORMULARIOS / BOTONES
   Estos selectores cubren nombres comunes. Si alguna clase no existe,
   no pasa nada: simplemente no se aplica.
   ===================================================================== */

/* AQUÍ CAMBIAS TÍTULOS DE ASISTENCIA */
.asistencia-titulo,
.confirmacion-titulo,
.rsvp-titulo {
  font-family: var(--fuente-romantica) !important;
  font-size: var(--tam-asistencia-titulo) !important;
}

/* AQUÍ CAMBIAS TEXTOS DE ASISTENCIA */
.asistencia-texto,
.confirmacion-texto,
.rsvp-texto {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-asistencia-texto) !important;
}

/* AQUÍ CAMBIAS ETIQUETAS DE FORMULARIO */
label,
.form-label {
  font-family: var(--fuente-moderna) !important;
  font-size: var(--tam-form-label) !important;
}

/* AQUÍ CAMBIAS CAMPOS DE FORMULARIO */
input,
select,
textarea {
  font-family: var(--fuente-texto-general) !important;
  font-size: var(--tam-form-input) !important;
}

/* AQUÍ CAMBIAS BOTONES GENERALES */
button,
.btn,
.boton,
.form-btn {
  font-family: var(--fuente-moderna) !important;
  font-size: var(--tam-botones) !important;
}

/* =========================================================
   FOTOS DE UBICACIÓN: BORDE RASGADO, SIN SOMBRA
   Aplica a la foto de ceremonia religiosa y recepción.
========================================================= */

.ubicacion-foto-wrap {
  filter: none !important;      /* Quita la sombra */
  width: 95% !important;        /* Hace la foto un poco más ancha */
  margin: 0 auto !important;    /* Centra la foto */
}

.ubicacion-foto {
  height: 300px !important;             /* Aquí agrandas o achicas la foto */
  object-fit: cover !important;         /* Mantiene la foto bien recortada */
  object-position: center center !important;
}

.ubicacion-foto-wrap::before {
  box-shadow: none !important;          /* Quita sombra del borde */
  background: #ffffff !important;       /* Mantiene el borde blanco */
}


/* =========================================================
   FUENTES SOLO PARA DOS TEXTOS
   Pegar al final de fuentes_tamanos_guiado.css
========================================================= */

/* Solo cambia: ¡Nos Casamos! */
.nos-casamos {
  font-family: 'Cormorant Garamond', serif !important;
}

/* Solo cambia: Haz clic para reproducir nuestra canción */
.musica-hint {
  font-family: 'Open Sans', sans-serif !important;
}

/* =========================================================
   SOLO TEXTO: "Haz clic para reproducir nuestra canción"
   No afecta otros textos.
========================================================= */

.musica-hint {
  font-family: 'Open Sans', sans-serif !important;
  font-style: normal !important; /* SIN CURSIVA */
}



/* =========================================================
   INTERLINEADO GENERAL - SECCIÓN NUESTRA BODA
   Aquí controlas la separación entre líneas de cada texto.
========================================================= */

/* Texto: Así da inicio nuestra historia... */
.boda-intro {
  line-height: 1.1 !important; /* AQUÍ CAMBIAS EL INTERLINEADO */
}

/* Texto: NUESTRA Boda */
.boda-titulo {
  line-height: 1.0 !important; /* AQUÍ JUNTAS O SEPARAS NUESTRA / Boda */
}

/* Texto: Padres de la Novia / Madre del Novio / Nuestros Padrinos */
.boda-subtitulo {
  line-height: 1.1 !important; /* AQUÍ CAMBIAS EL INTERLINEADO */
}

/* Texto: Luis Beltrán / Elsa / Elena / por confirmar */
.boda-nombre {
  line-height: 1.2 !important; /* AQUÍ CAMBIAS EL INTERLINEADO */
}

/* Texto: Y la presencia especial de nuestros */
.boda-especial {
  line-height: 1.1 !important; /* AQUÍ CAMBIAS EL INTERLINEADO */
}