/* ============================================================
   TuCelebración · tc-card-v2.css  (v2.0)
   ------------------------------------------------------------
   REDISEÑO DE LA TARJETA DE INVITACIÓN

   Se carga después de tc-design-system.css y respeta su lenguaje
   (glass cards, chips, módulos, variables --tc-*). Lo que cambia
   es el ritmo: jerarquía tipográfica más marcada, portada con más
   presencia, módulos con aire y separadores, y micro-movimiento
   en los elementos que el invitado mira primero.

   Criterio general: la invitación se lee de arriba abajo una sola
   vez. Cada bloque tiene que decir de un vistazo qué es (etiqueta
   chica en versalitas) y qué dice (contenido grande y legible).
   ============================================================ */


/* ============================================================
   0 · TOKENS DE LA v2
   ============================================================ */
:root{
  /* Escala tipográfica fluida: crece con el ancho de la tarjeta,
     no con el de la pantalla, así se ve igual en el editor
     (430px) que en la vista completa. */
  --tc2-display: clamp(30px, 8.6cqi, 46px);
  --tc2-title:   clamp(19px, 5.2cqi, 26px);
  --tc2-body:    clamp(14px, 3.7cqi, 16px);
  --tc2-label:   clamp(9.5px, 2.6cqi, 11px);

  --tc2-tracking-label: .16em;
  --tc2-tracking-display: -.015em;

  /* Curvas: la de entrada frena al final (se siente "asentado"),
     la de rebote se reserva para lo que el usuario toca. */
  --tc2-ease: cubic-bezier(.22, 1, .36, 1);
  --tc2-ease-spring: cubic-bezier(.34, 1.4, .5, 1);
}

/* Container queries: la tarjeta se mide a sí misma. Es lo que
   permite que la misma hoja sirva para el preview del editor y
   para la invitación publicada sin duplicar media queries. */
#tc_preview,
body.tc-invitation-single .tc-inv-card,
body.tc-invitation-single .tc-preview-card{
  container-type: inline-size;
  container-name: tccard;
}

/* Respaldo para navegadores sin unidades de contenedor. */
@supports not (width: 1cqi){
  :root{
    --tc2-display: 38px;
    --tc2-title: 22px;
    --tc2-body: 15px;
    --tc2-label: 10.5px;
  }
}


/* ============================================================
   1 · CÁSCARA DE LA TARJETA
   Bordes más generosos y una luz superior de un píxel que separa
   la tarjeta del fondo sin necesidad de un borde duro.
   ============================================================ */
#tc_preview,
body.tc-invitation-single .tc-inv-card,
body.tc-invitation-single .tc-preview-card{
  --tc-r-lg: 26px;
  border-radius: var(--tc-r-lg);
  overflow: hidden;
  isolation: isolate;
}

#tc_preview::after,
body.tc-invitation-single .tc-inv-card::after,
body.tc-invitation-single .tc-preview-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:5;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px var(--tc-border-accent, rgba(255,255,255,.10));
}


/* ============================================================
   2 · PORTADA
   Más alta, con degradado de lectura y un paneo lentísimo que
   da sensación de video sin serlo.
   ============================================================ */
.tc-photo-wrap{
  position:relative;
  aspect-ratio: 4 / 3;
  min-height: 190px;
  overflow:hidden;
}

.tc-photo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--tc-img-focus-x,50%) var(--tc-img-focus-y,35%);
  transform:scale(var(--tc-img-zoom,1));
  transform-origin:var(--tc-img-focus-x,50%) var(--tc-img-focus-y,35%);
  display:block;
  animation:none;
}

/* Degradado de lectura: sin esto, un título claro sobre una foto
   clara queda ilegible. Se apoya abajo, donde suele estar el texto. */
.tc-photo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: var(--tc-photo-overlay, linear-gradient(
    180deg,
    rgba(0,0,0,.06) 0%,
    rgba(0,0,0,0) 38%,
    rgba(0,0,0,.42) 100%
  ));
}


/* ============================================================
   3 · TIPOGRAFÍA
   ============================================================ */

/* Título principal: el elemento con más peso de toda la pieza.
   Interletrado negativo porque a tamaño display las serif se ven
   sueltas con el tracking por defecto. */
#tc_preview h2,
.tc-inv-card h2,
.tc-preview-card h2,
h2.tc-inv-title{
  font-size: var(--tc2-display);
  line-height: 1.04;
  letter-spacing: var(--tc2-tracking-display);
  margin-block: .28em .34em;
  text-wrap: balance;
}

/* Etiquetas de sección (UBICACIÓN, ITINERARIO, REGALOS…).
   Versalitas espaciadas + hairline: se leen como rótulo, no como
   contenido, y ordenan el scroll. */
#tc_preview .tc-event-module > h3,
#tc_preview .tc-module-heading,
.tc-inv-card .tc-event-module > h3,
.tc-inv-card .tc-module-heading,
.tc-preview-card .tc-module-heading{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 12px;
  font-size: var(--tc2-label);
  font-weight:800;
  letter-spacing: var(--tc2-tracking-label);
  text-transform:uppercase;
  opacity:.82;
}

#tc_preview .tc-module-heading::after,
.tc-inv-card .tc-module-heading::after,
.tc-preview-card .tc-module-heading::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background: linear-gradient(90deg,
    var(--tc-border-soft, rgba(255,255,255,.18)),
    transparent);
}

/* Datos (Fecha / Hora / Lugar): la etiqueta se apaga, el valor
   manda. Antes competían por el mismo peso. */
#tc_preview .tc-inv-meta strong,
.tc-inv-card .tc-inv-meta strong,
.tc-preview-card .tc-inv-meta strong{
  font-weight:800;
  letter-spacing:.01em;
}
#tc_preview .tc-inv-meta span,
.tc-inv-card .tc-inv-meta span,
.tc-preview-card .tc-inv-meta span{
  opacity:.68;
  font-weight:600;
}


/* ============================================================
   4 · MÓDULOS
   Vidrio más fino, esquinas coherentes y una separación que se
   nota sin necesidad de línea divisoria en todos lados.
   ============================================================ */
.tc-event-module{
  position:relative;
  margin-block: 14px;
  padding: 16px 16px 17px;
  border-radius: var(--tc-r-md, 18px);
  border:1px solid var(--tc-border-soft, rgba(255,255,255,.12));
  background: var(--tc-tint, rgba(255,255,255,.05));
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  transition: transform .35s var(--tc2-ease), border-color .35s ease;
}

/* Reflejo superior: una línea de luz de 1px en el borde de arriba.
   Es el detalle que hace que un rectángulo translúcido parezca
   vidrio y no un cuadro gris. */
.tc-event-module::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  border-radius:inherit;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--tc-primary, #d4af37) 45%, transparent),
    transparent);
  opacity:.7;
}

.tc-event-module:hover{
  border-color: var(--tc-border-accent, rgba(255,255,255,.2));
}

/* Ícono del rótulo dentro de un círculo tenue: le da un ancla
   visual a cada sección. */
.tc-module-heading-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  flex:0 0 26px;
  border-radius:50%;
  background: color-mix(in srgb, var(--tc-primary, #d4af37) 16%, transparent);
  color: var(--tc-icon-color, currentColor);
}
.tc-module-heading-icon svg{ width:14px; height:14px; }


/* ============================================================
   5 · CUENTA REGRESIVA
   El bloque que más mira el invitado. Números grandes, tabulares
   (no bailan al cambiar de dígito) y un latido en los segundos.
   ============================================================ */
.tc-countdown-box,
.tc-preview-count-box{
  position:relative;
  display:grid;
  place-items:center;
  gap:4px;
  padding:12px 6px 10px;
  border-radius: var(--tc-r-sm, 14px);
  border:1px solid var(--tc-border-soft, rgba(255,255,255,.12));
  background: var(--tc-tint, rgba(255,255,255,.05));
  overflow:hidden;
}

.tc-countdown-box::before,
.tc-preview-count-box::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--tc-primary, #d4af37), transparent);
  opacity:.5;
}

.tc-countdown-box strong,
.tc-preview-count-box strong{
  font-size: clamp(21px, 6.4cqi, 30px);
  font-weight:800;
  line-height:1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--tc-primary, inherit);
}

.tc-countdown-box span,
.tc-preview-count-box span{
  font-size: clamp(8px, 2.3cqi, 10px);
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.6;
}

/* Solo la última caja (segundos) late, para que el conjunto
   se sienta vivo sin distraer. */
.tc-countdown-box:last-child strong,
.tc-preview-count-box:last-child strong{
  animation: tc2Tick 1s steps(1) infinite;
}
@keyframes tc2Tick{
  0%, 60% { opacity:1; }
  61%,100%{ opacity:.72; }
}


/* ============================================================
   6 · MAPA
   ============================================================ */
.tc-map-shell,
.tc-preview-map-shell{
  border-radius: var(--tc-r-sm, 14px);
  overflow:hidden;
  border:1px solid var(--tc-border-soft, rgba(255,255,255,.12));
}
.tc-map-shell iframe,
.tc-preview-map-shell iframe{
  display:block;
  filter: saturate(.92) contrast(1.02);
}


/* ============================================================
   7 · ITINERARIO
   El conector deja de ser una línea plana: arranca con el color
   de acento y se apaga hacia abajo, guiando la lectura.
   ============================================================ */
.tc-itinerary-list li:not(:last-child)::after{
  background: linear-gradient(180deg,
    var(--tc-primary, #d4af37),
    color-mix(in srgb, var(--tc-primary, #d4af37) 12%, transparent)) !important;
  opacity:.65;
}

.tc-itinerary-marker{
  border:1px solid var(--tc-border-accent, rgba(255,255,255,.22)) !important;
  background: color-mix(in srgb, var(--tc-primary, #d4af37) 12%, transparent) !important;
  border-radius:50% !important;
  transition: transform .3s var(--tc2-ease-spring), box-shadow .3s ease;
}
.tc-itinerary-list li:hover .tc-itinerary-marker{
  transform: scale(1.08);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tc-primary, #d4af37) 12%, transparent);
}

.tc-itinerary-list li strong{
  font-variant-numeric: tabular-nums;
  letter-spacing:.01em;
}


/* ============================================================
   8 · BOTONES
   Degradado sutil + un barrido de brillo al pasar por encima.
   El barrido usa transform, no background-position, para que no
   dispare repintados.
   ============================================================ */
.tc-rsvp-btn,
.tc-rsvp-submit,
.tc-preview-cta-btn,
.tc-preview-submit-btn{
  position:relative;
  overflow:hidden;
  border-radius: 999px;
  font-weight:800;
  letter-spacing:.01em;
  min-height:48px;
  isolation:isolate;
}

.tc-rsvp-btn::after,
.tc-rsvp-submit::after,
.tc-preview-cta-btn::after,
.tc-preview-submit-btn::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:-60%;
  width:45%;
  z-index:-1;
  background: linear-gradient(100deg,
    transparent,
    rgba(255,255,255,.35),
    transparent);
  transform: translateX(0);
  transition: transform .7s var(--tc2-ease);
}
.tc-rsvp-btn:hover::after,
.tc-rsvp-submit:hover::after,
.tc-preview-cta-btn:hover::after,
.tc-preview-submit-btn:hover::after{
  transform: translateX(340%);
}

/* Chips de acción (Playlist, Álbum, Lista de deseos): pastilla
   con borde de acento y desplazamiento de la flecha al hover. */
.tc-module-action{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  padding:9px 14px;
  border:1px solid var(--tc-border-accent, rgba(255,255,255,.2));
  background: color-mix(in srgb, var(--tc-primary, #d4af37) 9%, transparent);
  font-weight:700;
  transition: background-color .25s ease, transform .25s var(--tc2-ease);
}
.tc-module-action:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--tc-primary, #d4af37) 18%, transparent);
}


/* ============================================================
   9 · FORMULARIO DE CONFIRMACIÓN
   ============================================================ */
.tc-rsvp-extra input,
.tc-rsvp-extra textarea,
.tc-rsvp-extra select,
.tc-preview-rsvp input,
.tc-preview-rsvp textarea,
.tc-preview-rsvp select{
  width:100%;
  min-height:46px;
  padding:12px 14px;
  border-radius: var(--tc-r-sm, 14px);
  border:1px solid var(--tc-border-soft, rgba(255,255,255,.14));
  background: color-mix(in srgb, var(--tc-icon-color, currentColor) 5%, transparent);
  color:inherit;
  font-size: var(--tc2-body);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.tc-rsvp-extra input::placeholder,
.tc-rsvp-extra textarea::placeholder,
.tc-preview-rsvp input::placeholder,
.tc-preview-rsvp textarea::placeholder{
  opacity:.5;
}

.tc-rsvp-extra input:focus,
.tc-rsvp-extra textarea:focus,
.tc-rsvp-extra select:focus,
.tc-preview-rsvp input:focus,
.tc-preview-rsvp textarea:focus,
.tc-preview-rsvp select:focus{
  outline:none;
  border-color: var(--tc-primary, #d4af37);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-primary, #d4af37) 22%, transparent);
  background: color-mix(in srgb, var(--tc-icon-color, currentColor) 8%, transparent);
}


/* ============================================================
   10 · APARICIÓN AL SCROLL
   Cada módulo entra una sola vez, escalonado. Lo activa
   tc-reveal.js agregando .is-visible.
   ============================================================ */
.jcl-reveal{
  opacity:0;
  transform: translateY(22px);
  transition:
    opacity .7s var(--tc2-ease) var(--jcl-reveal-delay, 0s),
    transform .7s var(--tc2-ease) var(--jcl-reveal-delay, 0s);
}
.jcl-reveal.is-visible{
  opacity:1;
  transform:none;
}


/* ============================================================
   11 · SEPARADOR ORNAMENTAL
   Lo inserta tc-reveal.js entre grupos de módulos. Es un rombo
   con dos hairlines: cierra una sección sin gritar.
   ============================================================ */
.jcl-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 4px;
  opacity:.55;
}
.jcl-divider::before,
.jcl-divider::after{
  content:"";
  flex:1;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--tc-primary, #d4af37), transparent);
}
.jcl-divider i{
  display:block;
  width:7px; height:7px;
  flex:0 0 7px;
  transform: rotate(45deg);
  border:1px solid var(--tc-primary, #d4af37);
}


/* ============================================================
   12 · AJUSTES POR ANCHO DE TARJETA
   ============================================================ */
@container tccard (max-width: 340px){
  .tc-event-module{ padding:13px 13px 14px; }
  .tc-photo-wrap{ aspect-ratio: 3 / 2; }
}

@container tccard (min-width: 520px){
  .tc-event-module{ padding:20px 22px 21px; }
  .tc-photo-wrap{ aspect-ratio: 16 / 10; }
}


@media (prefers-reduced-motion: reduce){
  .tc-photo-wrap img{ animation:none; }
  .tc-countdown-box:last-child strong,
  .tc-preview-count-box:last-child strong{ animation:none; }
  .jcl-reveal{ opacity:1; transform:none; transition:none; }
  .tc-rsvp-btn::after,
  .tc-rsvp-submit::after,
  .tc-preview-cta-btn::after,
  .tc-preview-submit-btn::after{ display:none; }
}