@font-face { font-family: "Bricolage"; src: url("/fonts/bricolage-grotesque-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/caveat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --tinta: #1c2350;
  --tinta-suave: #4a5180;
  --fondo: #eef1fb;
  --papel: #ffffff;
  --linea: #cdd3ee;
  --mandarina: #f2762e;
  --mandarina-texto: #b4480f;
  --wa: #128c4a;
  --error: #b3261e;
  --radio: 14px;
  --sans: "Bricolage", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mano: "Caveat", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 1.0625rem/1.55 var(--sans);
}
img, svg { max-width: 100%; display: block; }
a { color: var(--tinta); text-underline-offset: 3px; }
a:hover { color: var(--mandarina-texto); }
:focus-visible { outline: 3px solid var(--mandarina); outline-offset: 2px; border-radius: 4px; }

.envoltorio { max-width: 36rem; margin: 0 auto; padding: 0 16px; }

/* Cabecera */
.cabecera { padding: 18px 16px 0; display: flex; align-items: center; justify-content: space-between; }
.marca { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 800; font-size: 1.35rem; text-decoration: none; letter-spacing: -0.02em; }
.marca span { font-family: var(--mano); font-size: 1.55rem; color: var(--mandarina-texto); }

/* Portada */
.portada { padding: 28px 0 8px; position: relative; }
.portada h1 {
  font-size: clamp(2.15rem, 9vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 14px;
  max-width: 13ch;
}
.portada p { margin: 0; color: var(--tinta-suave); max-width: 32ch; }
.papelitos { width: 64px; margin: -6px -6px -14px 0; pointer-events: none; }

/* La hoja del sorteo: el único "papel" grande de la página */
.hoja {
  background: var(--papel);
  border-radius: var(--radio);
  padding: 22px 18px 24px;
  margin: 26px 0 34px;
  box-shadow: 0 1px 0 var(--linea), 0 14px 30px -18px rgba(28, 35, 80, 0.35);
  position: relative;
}
.hoja::before { /* pliegue del papel */
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px dashed rgba(28, 35, 80, 0.08);
}
.hoja > * { position: relative; }
.hoja h2 { font-size: 1.35rem; margin: 0 0 4px; letter-spacing: -0.02em; }
.hoja .ayuda { color: var(--tinta-suave); font-size: 0.95rem; margin: 0 0 18px; }

label, .etiqueta { display: block; font-weight: 600; font-size: 0.95rem; margin: 16px 0 6px; }
.opcional { font-weight: 400; color: var(--tinta-suave); }
input[type="text"], input[type="date"], select, textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--fondo);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 11px 12px;
  min-height: 46px;
}
input:focus, select:focus, textarea:focus { border-color: var(--tinta); outline: none; background: #fff; }
.fila { display: flex; gap: 8px; }
.fila > input { flex: 1; min-width: 0; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dos label { margin-top: 0; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 1rem var(--sans);
  border: 0; border-radius: 999px;
  padding: 12px 20px; min-height: 46px;
  cursor: pointer; text-decoration: none;
  background: var(--tinta); color: #fff;
  transition: transform 0.08s ease;
}
.boton:hover { color: #fff; background: #2a3470; }
.boton:active { transform: scale(0.97); }
.boton.grande { width: 100%; font-size: 1.1rem; min-height: 54px; margin-top: 22px; background: var(--mandarina); color: var(--tinta); }
.boton.grande:hover { background: #f58a4a; color: var(--tinta); }
.boton.secundario { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linea); }
.boton.secundario:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); color: var(--tinta); }
.boton.wa { background: var(--wa); }
.boton.wa:hover { background: #0f7a40; }
.boton.peq { padding: 8px 14px; min-height: 40px; font-size: 0.93rem; }
.boton[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Participantes: cada nombre es un papelito */
.nombres { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nombres li {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff8f1; border: 1px solid #f6d3bb;
  border-radius: 8px; padding: 4px 4px 4px 12px;
  font-family: var(--mano); font-size: 1.35rem; line-height: 1.2;
}
.nombres li:nth-child(3n+1) { transform: rotate(-1.2deg); }
.nombres li:nth-child(3n+2) { transform: rotate(0.9deg); }
.nombres button {
  border: 0; background: transparent; color: var(--tinta-suave);
  font-size: 1.2rem; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
}
.nombres button:hover { background: #fde6d6; color: var(--tinta); }
.contador { font-size: 0.9rem; color: var(--tinta-suave); margin: 8px 0 4px; }

details.exclusiones { margin-top: 18px; border-top: 1px solid var(--linea); padding-top: 12px; }
details.exclusiones summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; padding: 6px 0; }
.pareja { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 10px; }
.lista-parejas { list-style: none; padding: 0; margin: 10px 0 0; }
.lista-parejas li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--linea); font-size: 0.97rem; }

.error { color: var(--error); font-weight: 600; margin: 14px 0 0; min-height: 1.2em; }
.error:empty { display: none; }

/* Resultado del organizador */
.envios { list-style: none; padding: 0; margin: 14px 0 0; }
.envios li { padding: 12px 0; border-bottom: 1px dashed var(--linea); display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; }
.envios .quien { font-family: var(--mano); font-size: 1.6rem; line-height: 1; }
.envios .acciones { display: flex; gap: 6px; }
.envios li.enviado .quien::after { content: " ✓"; color: var(--wa); font-family: var(--sans); font-size: 1rem; }
.nota { background: var(--fondo); border-radius: 10px; padding: 12px 14px; font-size: 0.93rem; color: var(--tinta-suave); margin: 16px 0 0; }

/* Secciones de contenido */
.seccion { margin: 0 0 40px; }
.seccion h2 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 12px; }
.pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.2rem 1fr; gap: 10px; margin-bottom: 14px; }
.pasos li::before { content: counter(paso); font-family: var(--mano); font-size: 2rem; line-height: 1; color: var(--mandarina-texto); }
.pasos strong { display: block; }

.presupuestos { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 0; }
.presupuestos a { display: inline-block; padding: 10px 16px; border-radius: 999px; background: var(--papel); text-decoration: none; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--linea); }
.presupuestos a:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); color: var(--tinta); }

.preguntas details { border-bottom: 1px solid var(--linea); padding: 10px 0; }
.preguntas summary { cursor: pointer; font-weight: 600; }
.preguntas p { margin: 8px 0 4px; color: var(--tinta-suave); }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 22px 0 40px; font-size: 0.88rem; color: var(--tinta-suave); }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.pie a { color: var(--tinta-suave); }

/* Revelado: el papelito que se despliega */
.revelado { text-align: center; padding: 30px 0 10px; }
.revelado h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 6px; }
.revelado .ayuda { color: var(--tinta-suave); margin: 0 0 26px; }
.papelito {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  width: min(300px, 82vw); aspect-ratio: 3 / 2; margin: 0 auto; display: block;
  perspective: 900px; position: relative;
}
.papelito .mitad {
  position: absolute; left: 0; right: 0; height: 50%;
  background: #fffdf8;
  box-shadow: 0 10px 24px -14px rgba(28, 35, 80, 0.5);
  backface-visibility: hidden;
}
.papelito .abajo { bottom: 0; border-radius: 0 0 6px 6px; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
.papelito .arriba { top: 0; border-radius: 6px 6px 0 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.papelito .solapa {
  position: absolute; left: 0; right: 0; top: 50%; height: 50%;
  transform-origin: top center;
  background: linear-gradient(#f7f1e6, #fffdf8);
  border-radius: 0 0 6px 6px;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
  box-shadow: 0 -1px 0 rgba(28, 35, 80, 0.12);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mano); font-size: 2.2rem; color: var(--tinta-suave);
}
.papelito .nombre {
  font-family: var(--mano); font-weight: 700; color: var(--tinta);
  font-size: clamp(2.6rem, 13vw, 3.6rem); line-height: 1;
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  opacity: 0; transition: opacity 0.4s 0.35s;
  padding: 0 10px; overflow-wrap: anywhere;
}
.papelito.abierto .solapa { transform: rotateX(-180deg); }
.papelito.abierto .nombre { opacity: 1; }
.papelito:not(.abierto) { animation: tiembla 3s ease-in-out 1.2s infinite; }
@keyframes tiembla { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-2deg); } 96% { transform: rotate(2deg); } }
.detalles { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.detalles li { background: var(--papel); border-radius: 999px; padding: 6px 14px; font-size: 0.95rem; box-shadow: inset 0 0 0 1px var(--linea); }
.oculto { display: none !important; }

/* Ideas */
.ideas { list-style: none; padding: 0; margin: 0; }
.ideas li { padding: 16px 0; border-bottom: 1px dashed var(--linea); }
.ideas h3 { margin: 0 0 4px; font-size: 1.12rem; }
.ideas p { margin: 0 0 8px; color: var(--tinta-suave); }
.ideas a.amazon { font-weight: 600; }
.aviso-afiliado { font-size: 0.85rem; color: var(--tinta-suave); }

/* Texto largo (legales, ideas) */
.texto { padding-top: 26px; padding-bottom: 30px; }
.texto h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 14px; }
.texto h2 { font-size: 1.3rem; margin: 28px 0 8px; letter-spacing: -0.01em; }
.texto p, .texto li { max-width: 65ch; }
.migas { font-size: 0.9rem; color: var(--tinta-suave); margin: 0 0 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Temática del sorteo */
.tema-sorteado { background: #fff8f1; border: 1px solid #f6d3bb; border-radius: 10px; padding: 12px 14px; margin: 0 0 6px; font-size: 0.97rem; }
.tema-sorteado strong { display: block; font-family: var(--mano); font-size: 1.6rem; line-height: 1.1; color: var(--mandarina-texto); }

/* Calendario en el papelito */
.calendario { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; }

/* Tus sorteos */
.mis-sorteos { margin: 22px 0 0; }
.mis-sorteos h2 { font-size: 1.2rem; margin: 0 0 6px; letter-spacing: -0.01em; }
.mis-sorteos ul { list-style: none; padding: 0; margin: 0; }
.mis-sorteos li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--linea); }
.mis-sorteos strong { display: block; font-family: var(--mano); font-size: 1.5rem; line-height: 1.1; }
.mis-sorteos small { color: var(--tinta-suave); font-size: 0.88rem; }

/* Acciones del sorteo y confirmación en página */
.acciones-sorteo { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.confirmacion { margin: 14px 0 0; padding: 14px; border-radius: 10px; background: #fff8f1; border: 1px solid #f6d3bb; }
.confirmacion p { margin: 0 0 10px; font-size: 0.95rem; }
.fila-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.copiar-a-mano { grid-column: 1 / -1; font: inherit; font-size: 0.85rem; width: 100%; border-radius: 8px; border: 1px solid var(--linea); padding: 8px; }
button.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--tinta); text-decoration: underline; cursor: pointer; }

/* ---------- Portada con papelito de ejemplo ---------- */
.portada { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.papelito.demo { width: 132px; margin: 0; }
.papelito.demo .nombre { font-size: 1.55rem; padding: 0 6px; }
.papelito.demo .solapa { font-size: 1.6rem; }
@media (max-width: 420px) {
  .portada { grid-template-columns: 1fr; }
  .papelito.demo { width: 150px; margin: 4px 0 0; justify-self: start; }
}

/* ---------- Asistente en 3 pasos ---------- */
.progreso { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 10px; }
.progreso span { height: 5px; border-radius: 99px; background: var(--fondo); transition: background 0.3s; }
.progreso[data-paso="1"] span:nth-child(-n+1),
.progreso[data-paso="2"] span:nth-child(-n+2),
.progreso[data-paso="3"] span { background: var(--mandarina); }
.paso-num { font-size: 0.85rem; color: var(--tinta-suave); margin: 0 0 6px; }
.paso h2 { font-size: 1.45rem; }
.botonera { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: end; margin-top: 22px; }
.botonera .boton.grande { margin-top: 0; }
.botonera .boton.secundario { min-height: 54px; }
.compartir { display: grid; gap: 10px; margin: 18px 0 0; }
.compartir .boton.grande { margin-top: 0; background: var(--wa); color: #fff; }
.compartir .boton.grande:hover { background: #0f7a40; color: #fff; }
.subtitulo { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; margin: 28px 0 4px; }
.subtitulo .enlace { font-size: 0.9rem; font-weight: 400; }
.pequeno { font-size: 0.86rem; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Estado: quién lo ha abierto */
.estado { list-style: none; padding: 0; margin: 6px 0 0; }
.estado li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0; border-bottom: 1px dashed var(--linea); }
.estado .quien { font-family: var(--mano); font-size: 1.5rem; line-height: 1; flex: 1; }
.estado .marca-estado { font-size: 0.88rem; color: var(--tinta-suave); }
.estado li.abierto .marca-estado { color: var(--wa); font-weight: 600; }
.estado li.abierto .marca-estado::before { content: "✓ "; }
.estado .confirmacion { flex-basis: 100%; }

/* ---------- Página del grupo ---------- */
.cargando { text-align: center; color: var(--tinta-suave); padding: 60px 0; }
.elegir { padding: 26px 0 10px; }
.grupo-titulo { font-family: var(--mano); font-size: 1.7rem; color: var(--mandarina-texto); margin: 0; line-height: 1.1; }
.elegir h1 { font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: -0.03em; line-height: 1.05; margin: 4px 0 8px; }
.detalles.izquierda { justify-content: flex-start; margin: 0 0 18px; }
.quienes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.quien-boton {
  width: 100%; min-height: 64px; border: 0; border-radius: 10px; cursor: pointer;
  background: #fffdf8; box-shadow: 0 8px 18px -12px rgba(28, 35, 80, 0.45);
  font-family: var(--mano); font-size: 1.7rem; color: var(--tinta); line-height: 1.05; padding: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.quien-boton:nth-child(odd) { transform: rotate(-0.6deg); }
.quien-boton:hover:not([disabled]) { box-shadow: 0 0 0 2px var(--mandarina), 0 8px 18px -12px rgba(28, 35, 80, 0.45); }
.quien-boton small { font-family: var(--sans); font-size: 0.78rem; color: var(--tinta-suave); }
.quien-boton[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; background: transparent; outline: 1px dashed var(--linea); }
.demo-caja { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.demo-pista { margin: 0; font-family: var(--mano); font-size: 1.3rem; color: var(--mandarina-texto); }
@media (max-width: 420px) { .demo-caja { flex-direction: row; gap: 12px; justify-self: start; } }

/* Cartas de deseos en el papelito */
.hoja.carta { margin: 28px 0 0; }
.hoja.carta h2 { margin-bottom: 8px; }