/* Paleta análoga: #ff9c00 (sun) · #ff8728 (tangerine) · #f25300 (flame) */
:root{
  --sun:#ff9c00; --tangerine:#ff8728; --flame:#f25300; --flame-dark:#B83D00;
  --tint:#FFF4EC; --line:#FFE0CC; --ink:#2B1A0E;
}
html{scroll-behavior:smooth;}
body{background:#FFFFFF;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

.stitch-divider{
  background-image: repeating-linear-gradient(90deg, #FFC58A 0, #FFC58A 8px, transparent 8px, transparent 16px);
  height:2px;
}

.ticket{ position:relative; background:#fff; border:1.5px solid var(--line); }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* Las 3 pestañas nacen resaltadas; la activa suma anillo y sombra */
.family-tab{ background:linear-gradient(90deg, var(--tangerine), var(--flame)); color:#fff; }
.family-tab:hover{ filter:brightness(1.06); }
.family-tab[aria-selected="true"]{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--flame), 0 8px 18px -6px rgba(242,83,0,.55); transform:translateY(-1px); }

.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.num-badge{ font-family:'IBM Plex Mono',monospace; }
::selection{ background:var(--sun); color:var(--ink); }
.focus-ring:focus-visible{ outline:3px solid var(--flame); outline-offset:2px; }
.card-hover{ transition:transform .25s ease, box-shadow .25s ease; }
.card-hover:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -18px rgba(242,83,0,0.30); }
#whatsapp-float{ animation: floatPulse 2.6s ease-in-out infinite; }
@keyframes floatPulse{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

/* Hero — carrusel con velo blanco para que el texto oscuro se lea sobre la foto */
.hero-photo{
  position: relative;
  aspect-ratio: 1920 / 480;
  min-height: 550px;
  width: 100%;      /* ocupa todo el ancho de la página */
  max-height: 60vh;
  background: linear-gradient(100deg, #FFFFFF 0%, #FFF4EC 60%, #FFE0CC 100%);
  margin-top: 88px; /* compensa el header fijo (logo más grande) */
}
@media (min-width: 768px){ .hero-photo{ margin-top: 100px; } }

@media (max-width: 640px){
  .hero-photo{ aspect-ratio: auto; min-height: 380px; max-height: none; }
}

.hero-slide{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1s ease; z-index: 0;
}
.hero-slide.active{ opacity: 1; z-index: 0; }

.hero-overlay{
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.92) 32%,
    rgba(255,255,255,0.60) 52%,
    rgba(255,255,255,0.05) 70%,
    rgba(255,255,255,0.00) 100%);
}
@media (max-width: 1023px){
  .hero-overlay{ background: rgba(255,255,255,0.90); }
}

.hero-arrow{ background: rgba(255,255,255,0.75); backdrop-filter: blur(2px); border-color: var(--line) !important; color: var(--flame-dark); }
.hero-arrow:hover{ background: #fff; }

.hero-dot{
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(242,83,0,0.25);
  border: 1px solid rgba(242,83,0,0.45);
  padding: 0; cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.hero-dot:hover{ background: rgba(242,83,0,0.5); }
.hero-dot.active{ background: var(--flame); border-color: var(--flame); transform: scale(1.15); }

.photo-slot{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background:repeating-linear-gradient(135deg, #FFF4EC, #FFF4EC 10px, #FFEBDC 10px, #FFEBDC 20px);
  border:1.5px dashed #FFC58A;
  color:#9A6A47;
  text-align:center;
}
.photo-slot .cap{ font-family:'IBM Plex Mono',monospace; font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; padding:0 .5rem; }

.ticket .photo-slot{ border-width:0 0 1.5px 0; border-radius:0; }