/* Nuestros planes · estilos
   Idea: un cuaderno bonito. Papel rosado, tinta ciruela muy oscura, un solo acento (rosa empolvado),
   títulos en serif, notas escritas a mano, tarjetas que flotan y un gatito que vive en Inicio.
   Pensado primero para el móvil. */

:root {
  color-scheme: light;
  /* Papel y tinta */
  --papel: #F6EDEA;
  --papel-claro: #FFFBFA;
  --papel-oscuro: #EEDFDB;
  --linea: #E8D6D2;
  --tinta: #2F2428;
  --tinta-suave: #75656A;
  --tinta-tenue: #8E7D83;
  /* Un solo acento: rosa empolvado */
  --acento: #B4566F;
  --acento-hover: #9A4560;
  --acento-oscuro: #8E3F55;
  --acento-claro: #F3DDE2;
  --acento-tenue: #FBEFF1;
  /* Solo para los perfiles de las excursiones */
  --bosque: #6E8C78;
  --bosque-claro: #DCE5DA;
  --tarjeta: #FFFBFA;
  --sombra-tarjeta: 0 1px 2px rgba(140, 70, 90, .06), 0 16px 32px -16px rgba(140, 70, 90, .32);
  /* Tipos de letra */
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mano: 'Caveat', 'Segoe Print', cursive;
  /* Sombras con el tono del papel */
  --sombra-s: 0 1px 1px rgba(140, 70, 90, .06), 0 2px 6px rgba(140, 70, 90, .06);
  --sombra-m: 0 2px 4px rgba(140, 70, 90, .06), 0 12px 28px -8px rgba(140, 70, 90, .22);
  --muelle: cubic-bezier(.34, 1.4, .64, 1);
  --suave-salida: cubic-bezier(.22, 1, .36, 1);
  --abajo: env(safe-area-inset-bottom, 0px);
  /* Capas */
  --z-nav: 10;
  --z-flotante: 11;
  --z-aviso: 30;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--papel);
  color: var(--tinta);
  font: 400 16.5px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Grano de papel por encima de todo, muy suave */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sprite { position: absolute; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.ico { width: 22px; height: 22px; flex: none; fill: currentColor; }
.duo { fill: var(--duo, currentColor); opacity: .22; } /* capa suave de los iconos a dos tonos */
.ico.peq { width: 18px; height: 18px; }
.ico.gr { width: 28px; height: 28px; }

.cargando { padding: 40vh 0 0; text-align: center; color: var(--tinta-suave); }
.suave { color: var(--tinta-suave); }
.tenue { color: var(--tinta-tenue); }
.pequeno { font-size: 14.5px; }
.mano { font-family: var(--mano); font-weight: 600; }
.etiqueta-sup {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-tenue);
}
.titulo-serif { font-family: var(--serif); font-size: 26px; line-height: 1.1; letter-spacing: -.01em; }
.titulo-serif em { font-style: italic; color: var(--acento); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px; border-radius: 14px;
  border: 1px solid var(--linea); background: var(--papel-claro); color: var(--tinta);
  font-weight: 600; text-decoration: none;
  transition: transform .18s var(--muelle), background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.boton:hover { border-color: var(--tinta-tenue); }
.boton:active { transform: scale(.97); }
.boton.principal { background: var(--acento); border-color: var(--acento); color: #FFFFFF; box-shadow: 0 6px 16px -6px rgba(180, 86, 111, .6); }
.boton.principal:hover { background: var(--acento-hover); }
.boton.tinta { background: var(--tinta); border-color: var(--tinta); color: var(--papel-claro); }
.boton.ancho { width: 100%; }
.boton.grande { min-height: 56px; font-size: 17px; }
.boton:disabled { opacity: .55; cursor: default; }
.enlace {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 10px 2px;
  color: var(--tinta-suave); font-weight: 500; text-decoration: underline; text-decoration-color: var(--linea);
  text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.enlace:hover { color: var(--tinta); text-decoration-color: currentColor; }
.boton-redondo {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linea); background: var(--papel-claro);
  display: grid; place-items: center; color: var(--tinta); transition: transform .18s var(--muelle);
}
.boton-redondo:active { transform: scale(.92); }

/* ---------- Dibujos topográficos (curvas de nivel) ---------- */
.topo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.topo path { fill: none; stroke: var(--linea); stroke-width: 1; }
.topo g { animation: derivar 40s ease-in-out infinite alternate; transform-origin: center; }
@keyframes derivar { to { transform: translate(-12px, 8px) rotate(2deg); } }

/* ---------- Entrar ---------- */
.entrar { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; overflow: hidden; }
.entrar-tarjeta {
  position: relative; width: 100%; max-width: 380px; background: var(--tarjeta);
  border: 0; border-radius: 28px; padding: 34px 24px 26px; box-shadow: var(--sombra-tarjeta);
  animation: aparecer .7s var(--suave-salida) both;
}
.entrar-logo { width: 54px; height: 54px; margin-bottom: 22px; }
.entrar h1 { font-family: var(--serif); font-size: 44px; line-height: 1; letter-spacing: -.02em; }
.entrar h1 em { color: var(--acento); }
.entrar .mano { font-size: 22px; color: var(--tinta-suave); margin-top: 6px; }
.entrar form { margin-top: 26px; display: grid; gap: 16px; }

/* ---------- Invitación: el sobre ---------- */
.invitacion {
  position: relative; min-height: 100dvh; overflow: hidden; display: grid; place-items: center; align-content: center;
  gap: 26px; padding: 40px 20px; text-align: center;
}
.invitacion > *:not(.topo) { position: relative; }
.invitacion-sup { font-size: 30px; color: var(--tinta); animation: aparecer .8s var(--suave-salida) both; }
.invitacion-pista { color: var(--tinta-tenue); font-size: 14.5px; animation: aparecer .8s 1s var(--suave-salida) both, latir 2.4s 2s ease-in-out infinite; }
@keyframes latir { 50% { opacity: .45; } }
.invitacion-error { margin: 10px 0 22px; }

.sobre {
  position: relative; width: min(330px, 86vw); aspect-ratio: 1.5; border: 0; padding: 0; background: none;
  perspective: 1400px; animation: llegar 1s .2s var(--muelle) both;
}
@keyframes llegar { from { transform: translateY(40px) rotate(-6deg) scale(.9); opacity: 0; } }
.sobre:not(.abierto) { animation: llegar 1s .2s var(--muelle) both, mecer 4s 1.4s ease-in-out infinite; }
@keyframes mecer { 50% { transform: rotate(-1.5deg) translateY(-4px); } }
.sobre > span { position: absolute; display: block; }
.sobre-fondo { inset: 0; background: #E5C8CC; border-radius: 6px; box-shadow: var(--sombra-m); }
.sobre-carta {
  left: 7%; right: 7%; top: 7%; height: 86%; background: #FFFDFC; border-radius: 3px; z-index: 1;
  padding: 18% 12% 0; display: grid; align-content: start; gap: 9px;
  transition: transform .9s .45s var(--suave-salida);
}
.sobre-carta span { position: static; height: 2px; border-radius: 2px; background: var(--linea); }
.sobre-carta span:nth-child(2) { width: 80%; }
.sobre-carta span:nth-child(3) { width: 55%; }
.sobre-frente {
  inset: 0; z-index: 2; border-radius: 6px; background: #F2E1E2;
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}
.sobre-para {
  position: absolute; left: 0; right: 0; bottom: 7%; font-family: var(--mano); font-size: 28px; font-weight: 600; color: var(--tinta);
}
.sobre-solapa {
  left: 0; right: 0; top: 0; height: 60%; z-index: 3; background: #EBD3D6; border-radius: 6px 6px 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center;
  transition: transform .7s var(--suave-salida), z-index 0s .35s;
}
.sobre-sello {
  left: 50%; top: 55%; width: 54px; height: 54px; margin: -27px 0 0 -27px; z-index: 4; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C97389, var(--acento) 60%, #7E3348);
  display: grid !important; place-items: center; color: #FBE4E9; box-shadow: 0 3px 8px rgba(120, 40, 60, .35);
  transition: transform .45s var(--muelle), opacity .3s ease;
}
.sobre-sello .ico { fill: currentColor; stroke: none; width: 24px; height: 24px; }
.sobre.abierto .sobre-sello { transform: scale(1.3) rotate(20deg); opacity: 0; }
.sobre.abierto .sobre-solapa { transform: rotateX(180deg); z-index: 0; }
.sobre.abierto .sobre-carta { transform: translateY(-58%); }

.carta-vista { gap: 30px; }
.carta-vista .carta-papel { width: min(420px, 100%); text-align: left; }
.invitacion-texto { width: min(420px, 100%); display: grid; gap: 12px; animation: aparecer .8s .5s var(--suave-salida) both; }
.invitacion-texto h1 { font-family: var(--serif); font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.invitacion-texto h1 em, .entrar h1 em { color: var(--acento); }
.invitacion-texto p { color: var(--tinta-suave); margin-bottom: 6px; }

/* ---------- Formularios ---------- */
.campo { display: grid; gap: 7px; }
.campo > span { font-weight: 600; font-size: 14.5px; }
.campo small { color: var(--tinta-tenue); font-size: 13.5px; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--linea); background: #FFFFFF;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro); }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.error { color: var(--acento-hover); font-weight: 600; font-size: 14.5px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; font-size: 14.5px; padding: 0; margin-bottom: 8px; }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label { position: relative; }
.opciones input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opciones span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px;
  border: 1px solid var(--linea); border-radius: 10px; background: #FFFFFF; font-weight: 500; font-size: 14.5px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.opciones input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--papel-claro); }
.opciones input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Estructura ---------- */
.marco { max-width: 620px; margin: 0 auto; padding: 0 18px calc(150px + var(--abajo)); }
.cabecera {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: max(26px, calc(env(safe-area-inset-top) + 12px)) 0 6px;
}
.cabecera .mano { font-size: 21px; color: var(--tinta-suave); line-height: 1; }
.cabecera h1 { font-family: var(--serif); font-size: 40px; line-height: 1.02; letter-spacing: -.02em; margin-top: 4px; }
.cabecera h1 em { color: var(--acento); }
.intro { color: var(--tinta-suave); margin: 8px 0 18px; max-width: 34em; }

.pestanas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  background: rgba(246, 237, 234, .92); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linea); padding: 6px 10px calc(8px + var(--abajo));
}
.pestanas ul { list-style: none; margin: 0 auto; padding: 0; max-width: 620px; display: grid; grid-template-columns: repeat(4, 1fr); }
.pestanas button {
  position: relative; width: 100%; border: 0; background: none; padding: 8px 2px 6px;
  display: grid; justify-items: center; gap: 3px; font-size: 12.5px; font-weight: 500; color: var(--tinta-tenue);
  transition: color .2s ease;
}
.pestanas button .ico { transition: transform .3s var(--muelle); }
.pestanas button[aria-current="page"] { color: var(--acento); font-weight: 600; }
.pestanas button[aria-current="page"] .ico { transform: translateY(-2px); }
.pestanas button[aria-current="page"]::after {
  content: ''; position: absolute; top: 0; left: 50%; width: 22px; height: 2px; margin-left: -11px;
  border-radius: 2px; background: var(--acento); animation: crecer .35s var(--suave-salida);
}
@keyframes crecer { from { transform: scaleX(0); } }

.flotante {
  position: fixed; z-index: var(--z-flotante); right: max(18px, calc(50% - 292px)); bottom: calc(86px + var(--abajo));
  min-height: 52px; padding: 0 20px 0 16px; border-radius: 16px; border: 0;
  background: var(--tinta); color: var(--papel-claro); font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 10px 24px -8px rgba(47, 36, 40, .6);
  transition: transform .2s var(--muelle); animation: aparecer .5s .15s var(--suave-salida) both;
}
.flotante:active { transform: scale(.95); }

/* Entrada escalonada al cambiar de pestaña */
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } }
.animar main > * { animation: aparecer .55s var(--suave-salida) both; }
.animar main > *:nth-child(2) { animation-delay: .05s; }
.animar main > *:nth-child(3) { animation-delay: .1s; }
.animar main > *:nth-child(4) { animation-delay: .15s; }
.animar main > *:nth-child(5) { animation-delay: .2s; }
.animar main > *:nth-child(n+6) { animation-delay: .25s; }
.animar .lista > * { animation: aparecer .5s var(--suave-salida) both; }
.animar .lista > *:nth-child(1) { animation-delay: .12s; }
.animar .lista > *:nth-child(2) { animation-delay: .17s; }
.animar .lista > *:nth-child(3) { animation-delay: .22s; }
.animar .lista > *:nth-child(4) { animation-delay: .27s; }
.animar .lista > *:nth-child(5) { animation-delay: .32s; }
.animar .lista > *:nth-child(n+6) { animation-delay: .36s; }

/* ---------- Inicio: la portada con el gatito ---------- */
.portada {
  position: relative; margin: 16px 0 0; border-radius: 30px; overflow: hidden;
  background: var(--tarjeta); box-shadow: var(--sombra-tarjeta);
}
.casa-gato {
  position: relative; height: 270px; overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at 50% 88%, #F7DDE3 0%, var(--acento-tenue) 55%, var(--tarjeta) 100%);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  animation: fundido .8s ease both;
}
.gato-lienzo { position: absolute; inset: 0; cursor: pointer; }
.gato-lienzo canvas { width: 100% !important; height: 100% !important; }
.casa-gato.sin-gato { height: auto; }
/* Lo que le sale al gatito: corazones, «z z z» y «rrr» */
.gatito-corazon, .gatito-z, .gatito-rrr { position: absolute; top: 38%; pointer-events: none; animation: flota-gato 1.8s var(--suave-salida) forwards; }
.gatito-corazon svg { display: block; width: 20px; height: 20px; fill: var(--acento); }
.gatito-z { font: 600 26px var(--mano); color: var(--tinta-tenue); top: 26%; }
.gatito-rrr { font: 600 22px var(--mano); color: var(--acento); top: 30%; }
@keyframes flota-gato { 0% { transform: translateY(0) scale(.3); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-110px) translateX(var(--x, 0)) scale(1); opacity: 0; } }

/* Paisaje dibujado: solo si el móvil no puede mostrar el gatito 3D */
.paisaje svg.escena { display: block; width: 100%; height: auto; }
.paisaje .sol { animation: amanecer 2.4s var(--suave-salida) both; }
@keyframes amanecer { from { transform: translateY(46px); opacity: .2; } }
.paisaje .colina-1 { animation: aparecer 1.2s var(--suave-salida) both; }
.paisaje .colina-2 { animation: aparecer 1.2s .1s var(--suave-salida) both; }
.paisaje .colina-3 { animation: aparecer 1.2s .2s var(--suave-salida) both; }
.paisaje .camino-trazo { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dibujar 2.6s .6s var(--suave-salida) forwards; }
.paisaje .bandera { animation: aparecer .6s 2.6s var(--muelle) both; transform-box: fill-box; transform-origin: bottom left; }
.paisaje .pajaro { animation: volar 14s linear infinite; }
.paisaje .pajaro.dos { animation-duration: 19s; animation-delay: -6s; }
@keyframes volar { from { transform: translateX(-60px); } to { transform: translateX(460px); } }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
.paisaje-texto { padding: 4px 20px 20px; position: relative; }
.paisaje-texto h2 { font-family: var(--serif); font-size: 32px; line-height: 1.05; letter-spacing: -.015em; }
.paisaje-texto h2 em { color: var(--acento); }
.paisaje-texto p { color: var(--tinta-suave); margin: 8px 0 16px; }

.nota-votar {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 14px; text-align: left;
  background: var(--tarjeta); border: 0; border-radius: 22px; padding: 16px 18px; box-shadow: var(--sombra-tarjeta);
  transition: transform .2s var(--muelle);
}
.nota-votar:hover { border-color: var(--tinta-tenue); }
.nota-votar:active { transform: scale(.985); }
.nota-votar .anillo { width: 44px; height: 44px; flex: none; }
.anillo circle { fill: none; stroke-width: 3.5; }
.anillo .fondo { stroke: var(--papel-oscuro); }
.anillo .valor { stroke: var(--acento); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .6s var(--suave-salida); }
.nota-votar strong { display: block; font-weight: 600; }
.nota-votar span { color: var(--tinta-suave); font-size: 14.5px; }
.nota-votar > .ico { margin-left: auto; color: var(--tinta-tenue); }

/* ---------- Secciones ---------- */
.seccion { margin-top: 34px; }
.seccion h2 { font-family: var(--serif); font-size: 28px; line-height: 1.1; letter-spacing: -.01em; }
.seccion h2 em { color: var(--acento); }
.seccion .intro { margin: 4px 0 14px; font-size: 15px; }

.lista { display: grid; gap: 20px; }

/* ---------- Tarjeta de plan ---------- */
.tarjeta {
  position: relative; background: var(--tarjeta); border-radius: 26px; box-shadow: var(--sombra-tarjeta);
  transition: box-shadow .3s ease, transform .3s var(--muelle);
}
.tarjeta.match { box-shadow: 0 0 0 1.5px rgba(180, 86, 111, .35), var(--sombra-tarjeta); }
.tarjeta-cuerpo {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  border: 0; background: none; padding: 24px 22px 16px; border-radius: 26px 26px 0 0;
}
.tarjeta-texto { display: grid; gap: 4px; min-width: 0; flex: 1; }
.tarjeta-ico {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento-tenue); color: var(--acento); --duo: var(--acento);
}
.tarjeta-ico .ico { width: 24px; height: 24px; }
.tarjeta.match .tarjeta-ico { background: var(--acento-claro); color: var(--acento-oscuro); }
.tarjeta.match .tarjeta-texto { padding-right: 64px; }
.tarjeta-titulo { font-family: var(--serif); font-size: 24px; line-height: 1.12; letter-spacing: -.005em; }
.tarjeta-desc {
  color: var(--tinta-suave); font-size: 15px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta .fecha-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--acento); }

/* Excursión: perfil de la ruta */
.tarjeta.excursion .tarjeta-cuerpo { flex-direction: column; gap: 0; padding-top: 0; }
.tarjeta.excursion .perfil-caja { display: block; width: calc(100% + 44px); }
.tarjeta.excursion.match .tarjeta-texto { padding-right: 0; }
.perfil { display: block; width: 100%; height: 64px; margin-bottom: 6px; }
.perfil .area { fill: var(--bosque-claro); opacity: .7; }
.perfil .trazo { fill: none; stroke: var(--bosque); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.perfil .cima { fill: var(--papel-claro); stroke: var(--bosque); stroke-width: 1.5; }
.animar .perfil .trazo, .perfil.dibujar .trazo { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dibujar 1.6s .25s var(--suave-salida) forwards; }
.animar .perfil .area, .perfil.dibujar .area { animation: fundido 1.2s .5s ease both; }
@keyframes fundido { from { opacity: 0; } }
.tarjeta.excursion .perfil-caja { margin: 0 -22px 4px; padding: 18px 22px 0; border-radius: 26px 26px 0 0; background: linear-gradient(180deg, rgba(220, 229, 218, .45), transparent); }
.datos-ruta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 14px; color: var(--tinta-suave); }
.datos-ruta span { display: inline-flex; align-items: center; gap: 5px; }
.datos-ruta .ico { width: 16px; height: 16px; color: var(--tinta-tenue); }
.nivel { display: inline-flex; gap: 3px; align-items: center; }
.nivel i { width: 7px; height: 7px; border-radius: 2px; background: var(--linea); }
.nivel i.on { background: var(--bosque); }

/* Sello «a los dos» */
.sello {
  position: absolute; top: 14px; right: 14px; z-index: 1; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding-top: 2px;
  background: radial-gradient(circle at 35% 30%, #C97389, var(--acento) 58%, #7E3348);
  color: #FBE4E9; font-family: var(--mano); font-size: 17px; font-weight: 600; line-height: .85;
  box-shadow: 0 3px 8px rgba(120, 40, 60, .3), inset 0 0 0 3px rgba(255, 255, 255, .12), inset 0 0 0 7px rgba(126, 51, 72, .25);
  transform: rotate(-9deg); pointer-events: none;
}
.sello.nuevo { animation: sellar .6s var(--muelle) both; }
.sello.nuevo::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--acento);
  animation: onda-sello .8s .3s ease-out both;
}
@keyframes sellar { 0% { transform: rotate(-30deg) scale(2.4); opacity: 0; } 60% { transform: rotate(-12deg) scale(.92); opacity: 1; } }
@keyframes onda-sello { from { transform: scale(.7); opacity: .8; } to { transform: scale(2.2); opacity: 0; } }

/* Votos: control segmentado */
.votos {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; margin: 4px 22px 0; padding: 4px; gap: 4px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 16px;
}
/* Si no hay frase de la pareja debajo, los votos no pueden quedar pegados al borde */
.tarjeta > .votos:last-child { margin-bottom: 22px; }
.voto {
  min-height: 44px; border-radius: 10px; border: 0; background: transparent; color: var(--tinta-suave);
  font-weight: 500; font-size: 14.5px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; padding: 0 6px;
  transition: background-color .2s ease, color .2s ease, transform .2s var(--muelle), box-shadow .2s ease;
}
.voto .ico { width: 17px; height: 17px; }
.voto:active { transform: scale(.94); }
.voto[aria-pressed="true"] { background: var(--papel-claro); color: var(--tinta); font-weight: 600; box-shadow: var(--sombra-s); }
.voto.si[aria-pressed="true"] { background: var(--acento); color: #FFFFFF; }
.voto.si[aria-pressed="true"] .ico { fill: currentColor; animation: latido .45s var(--muelle); }
@keyframes latido { 40% { transform: scale(1.35); } }
.voto-pareja { padding: 14px 24px 22px; font-size: 14px; color: var(--tinta-tenue); display: flex; align-items: center; gap: 6px; }
.voto-pareja.match { color: var(--acento); font-weight: 600; }
.voto-pareja .ico { width: 15px; height: 15px; }
.voto-pareja.match .ico { fill: currentColor; }

/* Fila compacta */
.fila {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--tarjeta); border: 0; border-radius: 20px; padding: 14px 16px; box-shadow: var(--sombra-tarjeta);
  transition: box-shadow .2s ease, transform .2s var(--muelle);
}
.fila:hover { transform: translateY(-1px); }
.fila:active { transform: scale(.985); }
.fila .tarjeta-ico { width: 44px; height: 44px; }
.fila-texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fila-titulo { font-family: var(--serif); font-size: 21px; line-height: 1.15; }
.fila-meta { font-size: 14px; color: var(--tinta-suave); }
.fila > .ico { color: var(--tinta-tenue); }
.fecha-bloque {
  width: 50px; flex: none; text-align: center; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea); background: #FFFFFF;
}
.fecha-bloque small { display: block; background: var(--acento); color: #FFFFFF; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 0; }
.fecha-bloque strong { display: block; font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.25; }

.vacio {
  position: relative; border: 1.5px dashed var(--linea); border-radius: 22px; padding: 24px 22px; color: var(--tinta-suave);
}
.vacio .mano { display: block; font-size: 23px; color: var(--tinta); margin-bottom: 2px; line-height: 1.15; }

/* Filtros */
.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 2px 18px 10px; margin: 0 -18px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--linea); background: transparent; font-weight: 500; font-size: 14px;
  color: var(--tinta-suave); white-space: nowrap; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.filtro .ico { width: 16px; height: 16px; }
.filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel-claro); }
.filtros + .filtros { padding-top: 0; }

.leyenda { margin-bottom: 14px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.leyenda summary { padding: 12px 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.leyenda summary::-webkit-details-marker { display: none; }
.leyenda summary .ico { transition: transform .3s var(--suave-salida); color: var(--tinta-tenue); }
.leyenda[open] summary .ico { transform: rotate(90deg); }
.leyenda dl { margin: 0; padding: 0 0 16px; display: grid; gap: 12px; }
.leyenda dt { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.leyenda dd { margin: 2px 0 0; color: var(--tinta-suave); font-size: 15px; }

/* ---------- Diario: polaroids ---------- */
.resumen-diario { font-family: var(--serif); font-size: 24px; line-height: 1.3; margin: 6px 0 22px; max-width: 22em; text-wrap: balance; }
.resumen-diario em { color: var(--acento); }
.diario { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 16px; padding-top: 8px; }
.polaroid {
  position: relative; border: 0; padding: 10px 10px 0; text-align: left; background: #FFFFFF;
  box-shadow: var(--sombra-m); border-radius: 3px; transform: rotate(-1.6deg);
  transition: transform .35s var(--muelle), box-shadow .3s ease;
}
.polaroid:nth-child(2n) { transform: rotate(1.4deg); margin-top: 14px; }
.polaroid:nth-child(3n) { transform: rotate(-.6deg); }
.polaroid:hover, .polaroid:focus-visible { transform: rotate(0) translateY(-4px) scale(1.02); }
.polaroid::before {
  content: ''; position: absolute; top: -10px; left: 50%; width: 64px; height: 20px; margin-left: -32px;
  background: rgba(232, 196, 204, .6); transform: rotate(-3deg); box-shadow: 0 1px 1px rgba(140, 70, 90, .08);
}
.polaroid:nth-child(2n)::before { transform: rotate(4deg); background: rgba(180, 86, 111, .22); }
.polaroid-foto { aspect-ratio: 1; background: var(--papel-oscuro); display: grid; place-items: center; overflow: hidden; color: var(--tinta-tenue); }
.polaroid-foto img { width: 100%; height: 100%; object-fit: cover; }
.polaroid-foto .ico { width: 40px; height: 40px; stroke-width: 1.2; }
.polaroid-pie { display: block; padding: 8px 2px 12px; }
.polaroid-pie strong { display: block; font-family: var(--mano); font-size: 21px; font-weight: 600; line-height: 1.05; }
.polaroid-pie span { font-size: 13px; color: var(--tinta-tenue); }

/* ---------- Hoja (ventana que sube desde abajo) ---------- */
.hoja {
  width: 100%; max-width: 620px; max-height: 93dvh; margin: auto auto 0; padding: 0;
  border: 0; border-radius: 24px 24px 0 0; background: var(--papel); color: var(--tinta);
  overflow: auto; overscroll-behavior: contain; box-shadow: 0 -10px 40px -10px rgba(47, 36, 40, .35);
}
.hoja::backdrop { background: rgba(47, 36, 40, .38); backdrop-filter: blur(2px); }
.hoja[open] { animation: subir .45s var(--suave-salida); }
.hoja[open]::backdrop { animation: fundido .3s ease; }
@keyframes subir { from { transform: translateY(60px); opacity: 0; } }
@media (min-width: 680px) {
  .hoja { margin: auto; border-radius: 24px; max-height: 88dvh; }
}
.hoja-cabecera {
  position: sticky; top: 0; z-index: 2; background: rgba(246, 237, 234, .94); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 20px 10px;
}
.hoja-cabecera::before {
  content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--linea);
}
.hoja-cabecera h2 { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.hoja-cuerpo { padding: 6px 20px calc(28px + var(--abajo)); display: grid; gap: 20px; }
.hoja-acciones { display: grid; gap: 10px; }
.hoja-acciones.dos { grid-template-columns: 1fr 1fr; }

.detalle-portada {
  position: relative; border-radius: 24px; overflow: hidden; background: var(--acento-tenue); box-shadow: var(--sombra-tarjeta);
  min-height: 140px; --duo: var(--acento); display: grid; place-items: center; color: var(--tinta-tenue);
}
.detalle-portada .topo { opacity: .9; }
.detalle-portada > .ico { position: relative; width: 48px; height: 48px; stroke-width: 1.2; }
.detalle-portada img { width: 100%; max-height: 62dvh; object-fit: cover; }
.detalle-portada.excursion { background: linear-gradient(180deg, #F3E4E2, var(--papel-claro)); place-items: end stretch; padding-top: 30px; }
.detalle-portada.excursion .perfil { height: 120px; margin: 0; }
.detalle-titulo { font-family: var(--serif); font-size: 36px; line-height: 1.05; letter-spacing: -.015em; margin-top: 4px; }
.detalle-texto { font-size: 16.5px; max-width: 36em; white-space: pre-wrap; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-radius: 20px; overflow: hidden; background: var(--linea); gap: 1px; box-shadow: var(--sombra-tarjeta); }
.dato { background: var(--tarjeta); padding: 14px 16px; }
.dato span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-tenue); }
.dato strong { font-weight: 500; font-size: 16px; }
.caja { background: var(--tarjeta); border-radius: 22px; padding: 20px; display: grid; gap: 14px; box-shadow: var(--sombra-tarjeta); }
.caja h3 { font-family: var(--serif); font-size: 23px; line-height: 1.1; }
.caja .votos { margin: 0; }
.caja .voto-pareja { padding: 0; }
.nota { white-space: pre-wrap; font-family: var(--mano); font-size: 23px; line-height: 1.25; color: var(--tinta); }
.mini-acciones { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

.foto-elegir { display: grid; gap: 10px; }
.foto-previa { border-radius: 14px; overflow: hidden; max-height: 260px; }
.foto-previa img { width: 100%; max-height: 260px; object-fit: cover; }

/* ---------- Votar de una en una: mazo de cartas ---------- */
.mazo-caja { display: grid; gap: 22px; }
.progreso { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.progreso .barra { flex: 1; height: 4px; border-radius: 4px; background: var(--papel-oscuro); overflow: hidden; }
.progreso .barra i { display: block; height: 100%; width: 100%; background: var(--acento); border-radius: inherit; transform-origin: left; transition: transform .4s var(--suave-salida); }
.mazo { position: relative; height: 380px; }
.carta-voto {
  position: absolute; inset: 0; background: var(--tarjeta); border: 0; border-radius: 28px;
  box-shadow: var(--sombra-tarjeta); padding: 22px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transition: transform .45s var(--suave-salida), opacity .45s ease;
}
.carta-voto.detras-1 { transform: translateY(12px) scale(.95) rotate(1.5deg); opacity: .85; }
.carta-voto.detras-2 { transform: translateY(24px) scale(.9) rotate(-2deg); opacity: .6; }
.carta-voto.arriba { cursor: grab; animation: aparecer .4s var(--suave-salida); }
.carta-voto.arrastrando { transition: none; cursor: grabbing; }
.carta-voto.sale-si { transform: translate(140%, -10px) rotate(18deg) !important; opacity: 0; }
.carta-voto.sale-no { transform: translate(-140%, -10px) rotate(-18deg) !important; opacity: 0; }
.carta-voto.sale-quizas { transform: translateY(-120%) rotate(-3deg) !important; opacity: 0; }
.carta-voto .topo { opacity: .55; }
.carta-voto > * { position: relative; }
.carta-voto .tarjeta-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--papel); border: 1px solid var(--linea); display: grid; place-items: center; color: var(--tinta-suave); }
.carta-voto h3 { font-family: var(--serif); font-size: 34px; line-height: 1.05; letter-spacing: -.015em; margin-top: auto; }
.carta-voto p { color: var(--tinta-suave); }
.carta-voto .perfil { height: 90px; margin: 0 -22px; width: calc(100% + 44px); }
.marca-voto {
  position: absolute; top: 22px; padding: 2px 12px 4px; border: 2.5px solid currentColor; border-radius: 10px;
  font-family: var(--mano); font-size: 28px; font-weight: 600; opacity: 0; transition: opacity .1s linear; z-index: 2;
}
.marca-voto.si { right: 20px; color: var(--acento); transform: rotate(10deg); }
.marca-voto.no { left: 20px; color: var(--tinta-suave); transform: rotate(-10deg); }
.botones-voto { display: flex; justify-content: center; align-items: flex-start; gap: 22px; }
.boton-voto { border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--tinta-suave); }
.boton-voto .circulo {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--papel-claro);
  border: 1px solid var(--linea); box-shadow: var(--sombra-s); transition: transform .2s var(--muelle), background-color .2s ease;
}
.boton-voto.si .circulo { width: 74px; height: 74px; background: var(--acento); border-color: var(--acento); color: #FFFFFF; box-shadow: 0 10px 22px -8px rgba(180, 86, 111, .7); }
.boton-voto.si .ico { fill: currentColor; width: 28px; height: 28px; }
.boton-voto:active .circulo { transform: scale(.9); }
.mazo-pista { text-align: center; font-size: 13.5px; color: var(--tinta-tenue); }

/* ---------- Sorpréndeme ---------- */
.sorpresa-carta {
  position: relative; overflow: hidden; text-align: left; display: grid; gap: 8px; padding: 22px; min-height: 210px;
  background: var(--tarjeta); border: 0; border-radius: 26px; box-shadow: var(--sombra-tarjeta);
}
.sorpresa-carta > * { position: relative; }
.sorpresa-carta h3 { font-family: var(--serif); font-size: 34px; line-height: 1.05; letter-spacing: -.015em; margin-top: auto; }
.sorpresa-carta.barajando h3 { color: var(--tinta-tenue); filter: blur(.4px); }
.sorpresa-carta.lista { animation: posar .6s var(--muelle); }
@keyframes posar { from { transform: scale(.94) rotate(-1.5deg); } }
.motivo { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--acento); }
.motivo .ico { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Bienvenida ---------- */
.carta-papel {
  position: relative; background: #FFFDFC; padding: 26px 22px 22px; border-radius: 4px; box-shadow: var(--sombra-m);
  transform: rotate(-.8deg); animation: aparecer .7s .1s var(--suave-salida) both;
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, rgba(142, 125, 131, .18) 33px 34px);
  background-position: 0 14px;
}
.carta-papel::before {
  content: ''; position: absolute; top: -11px; left: 50%; width: 92px; height: 24px; margin-left: -46px;
  background: rgba(180, 86, 111, .22); transform: rotate(2deg);
}
.carta-papel p { font-family: var(--mano); font-size: 25px; line-height: 34px; white-space: pre-wrap; color: #3A2A33; }
.carta-papel .firma { display: block; text-align: right; font-family: var(--mano); font-size: 25px; color: var(--acento); margin-top: 6px; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--linea); counter-increment: paso; }
.pasos li::before { content: counter(paso); font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--acento); }
.pasos strong { display: block; font-weight: 600; margin-bottom: 2px; }
.pasos span { color: var(--tinta-suave); font-size: 15px; }

.instrucciones { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--tinta-suave); }
.instrucciones strong { color: var(--tinta); font-weight: 600; }

/* ---------- Aviso flotante ---------- */
.aviso {
  position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: calc(100% - 36px);
  bottom: calc(96px + var(--abajo)); z-index: var(--z-aviso);
  display: flex; align-items: center; gap: 10px;
  background: var(--tinta); color: var(--papel-claro); padding: 12px 18px; border-radius: 14px; font-weight: 500; font-size: 15px;
  box-shadow: 0 12px 30px -10px rgba(47, 36, 40, .6); animation: aviso .45s var(--muelle);
}
.aviso .ico { width: 18px; height: 18px; color: #F3C1CC; fill: #F3C1CC; }
@keyframes aviso { from { transform: translateY(20px) scale(.95); opacity: 0; } }

/* Corazones al coincidir */
.corazones { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-aviso); overflow: hidden; }
.corazones svg { position: absolute; bottom: 20%; width: 22px; height: 22px; fill: var(--acento); stroke: none; animation: flotar 1.6s var(--suave-salida) forwards; }
@keyframes flotar { 0% { transform: translateY(0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-46vh) translateX(var(--x, 0)) scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .paisaje .camino-trazo, .perfil .trazo { stroke-dashoffset: 0 !important; }
  .topo g, .paisaje .pajaro { animation: none !important; }
}

/* ---------- Sello de lacre «hecho» en lo que ya habéis hecho ---------- */
.sello.sello-hecho { top: auto; bottom: 16px; right: 16px; width: 76px; height: 76px; font-size: 22px; z-index: 2; }

/* ---------- Diario: las fotos caen como si las pegaras en el cuaderno ---------- */
@keyframes pegar { from { transform: translateY(-70px) rotate(-14deg); opacity: 0; } }
.animar .polaroid { animation: pegar .7s var(--muelle) both; }
.animar .polaroid:nth-child(2) { animation-delay: .12s; }
.animar .polaroid:nth-child(3) { animation-delay: .24s; }
.animar .polaroid:nth-child(4) { animation-delay: .36s; }
.animar .polaroid:nth-child(n+5) { animation-delay: .45s; }