/* Café Color — hojas de papel de su carta sobre los colores vivos de su local: vitrales, letrero y mural */
:root {
  /* Colores de sus vitrales, su letrero y su mural (Instagram) */
  --amarillo: #ffc61a;
  --rojo: #e01e3c;
  --verde: #1f9d55;
  --turquesa: #12a59c;
  --azul: #1e5bc6;
  --morado: #7b3fa8;
  --rosa: #f45d9c;
  --naranjo: #f47a20;
  --flor: #07538a;
  --papel: #fffdf9;
  --papel-tono: #f1ece3;
  --tinta: #2d2e29;
  --tinta-suave: #4f504a;
  --pendiente: #fff1a8;

  --letra: "Archivo", "Arial", sans-serif;
  /* Cinco tamaños */
  --t-enorme: clamp(46px, 7.6vw, 124px);
  --t-grande: clamp(34px, 4.6vw, 70px);
  --t-medio: clamp(21px, 1.9vw, 27px);
  --t-texto: 17px;
  --t-chico: 15px;

  --margen: clamp(16px, 3vw, 44px);
  --entre: clamp(96px, 12vw, 200px);
  --rapido: 180ms cubic-bezier(.2, .7, .2, 1);
  --suave: 700ms cubic-bezier(.16, .84, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--tinta);
  color: var(--tinta);
  font: 400 var(--t-texto)/1.55 var(--letra);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: .92; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
::selection { background: var(--rosa); color: var(--tinta); }

.saltar { position: absolute; left: -999px; top: 8px; z-index: 30; background: var(--papel); padding: 10px 14px; }
.saltar:focus { left: 8px; }
.borrador { position: relative; z-index: 20; background: var(--pendiente); padding: 10px var(--margen); font-size: var(--t-chico); font-weight: 600; }
.es-borrador [data-pendiente] { background: var(--pendiente); outline: 4px solid var(--pendiente); }

/* ---------- Botones: rectángulos planos, de esquina recta ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border: 0; cursor: pointer;
  font-weight: 800; font-stretch: 112%; text-decoration: none; font-size: 16px;
  transition: transform var(--rapido), background-color var(--rapido);
}
.boton:active { transform: translateY(2px); }
.boton-tinta { background: var(--tinta); color: var(--papel); }
.boton-tinta:hover { background: #000; }
.boton-papel { background: var(--papel); color: var(--tinta); }
.boton-papel:hover { background: var(--papel-tono); }
.boton-azul { background: var(--azul); color: var(--papel); }
.boton-azul:hover { background: #17489e; }
.boton-ancho { width: 100%; }
.enlace { font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.enlace:hover { color: var(--azul); }

/* ---------- La hoja: el contenido sube como una hoja y deja ver el reverso ---------- */
.hoja { position: relative; z-index: 2; background: var(--tinta); }

/* ---------- Barra ---------- */
.barra {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 18px var(--margen);
}
.barra-logo { text-decoration: none; }
.barra-enlaces { display: flex; gap: clamp(18px, 3vw, 40px); }
.barra-enlaces a { position: relative; color: var(--papel); font-weight: 700; text-decoration: none; padding: 8px 0; }
.barra-enlaces a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; background: var(--amarillo); transform: scaleX(0); transform-origin: left; transition: transform var(--rapido); }
.barra-enlaces a:hover::after { transform: scaleX(1); }
.barra .boton { justify-self: end; }
.barra .boton-tinta { background: var(--amarillo); color: var(--tinta); }
.barra .boton-tinta:hover { background: var(--papel); }

/* ---------- Inicio: la hoja "Bien venidos", recortada por el borde de la pantalla ---------- */
.inicio { position: relative; min-height: 100svh; overflow: hidden; padding-bottom: 0; }
.tarjeta {
  --corte: 34px;
  position: relative;
  width: min(1000px, calc(100% - 2 * var(--margen)));
  margin: clamp(40px, 7vh, 96px) auto 0;
  min-height: calc(100svh - 150px);
  padding: clamp(56px, 7vw, 92px) clamp(24px, 6vw, 84px) 64px;
  background: var(--papel);
  text-align: center;
}
/* Esquinas superiores redondeadas hacia adentro, como papelería troquelada */
.esquina { display: none; position: absolute; top: calc(var(--corte) * -1); width: calc(var(--corte) * 2); height: calc(var(--corte) * 2); border-radius: 50%; background: var(--turquesa); }
.e1 { left: calc(var(--corte) * -1); }
.e2 { right: calc(var(--corte) * -1); }
.tarjeta-flor { position: absolute; width: clamp(84px, 12vw, 170px); right: clamp(-70px, -4.5vw, -30px); top: clamp(-80px, -5.5vw, -44px); transform: rotate(12deg); animation: flor-gira 26s linear infinite; }
.tarjeta-trazo { position: absolute; width: clamp(120px, 16vw, 220px); left: clamp(-60px, -4vw, -20px); bottom: 26%; opacity: .95; }
@keyframes flor-gira { to { transform: rotate(372deg); } }

/* Letras de selva: la misma idea del logo (slab rellena de jungla), con una pintura de dominio público */
.selva { font-family: "Alfa Slab One", Georgia, serif; font-weight: 400; font-stretch: normal; letter-spacing: 0; color: #1f4a3c; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) { /* taste-skill-ignore */
  .selva {
    background: #1f4a3c url(img/selva.webp) 78% 62% / 900px auto;
    padding-top: .14em; margin-top: -.14em;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* taste-skill-ignore: es el aspecto del logo (letras rellenas de selva) */
    animation: selva-viva 40s ease-in-out infinite alternate;
  }
}
@keyframes selva-viva { to { background-position: 96% 40%; } }
.tarjeta-marca { position: relative; font-size: clamp(72px, 12.4vw, 178px); line-height: .88; }
.tarjeta-marca span { display: block; }
/* Safari no pinta el recorte del padre en hijos que se mueven: cada línea lleva su propia selva */
@supports ((-webkit-background-clip: text) or (background-clip: text)) { /* taste-skill-ignore */
  .tarjeta-marca span { background: inherit; padding-top: .12em; margin-top: -.12em; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* taste-skill-ignore */
}
.tarjeta-marca span:first-child { transform: translateX(-6%); }
.tarjeta-marca span:last-child { transform: translateX(5%); }
.tarjeta-titulo { position: relative; margin-top: 28px; font-size: clamp(20px, 2.5vw, 36px); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; word-spacing: .12em; }
.tarjeta-frase { position: relative; max-width: 34em; margin: 36px auto 0; font-size: var(--t-medio); line-height: 1.35; }
.estado { position: relative; margin-top: 18px; font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); }
.estado b { color: var(--tinta); }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #2c9a5b; margin-right: 6px; vertical-align: 1px; animation: late 2s ease-in-out infinite; }
.punto.cerrado { background: var(--naranjo); animation: none; }
@keyframes late { 50% { transform: scale(1.35); } }

/* Las tres puertas: filas de la carta con puntos guía */
.puertas { position: relative; list-style: none; margin: clamp(36px, 5vw, 56px) auto 0; padding: 0; max-width: 680px; display: grid; gap: 8px; text-align: left; }
.puerta {
  position: relative; display: flex; align-items: baseline; gap: 14px;
  min-height: 72px; padding: 20px 22px; text-decoration: none;
  background: var(--papel-tono); overflow: hidden; isolation: isolate;
  transition: transform var(--rapido);
}
.puerta::before { /* el pincel que pinta la fila al pasar */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c);
  transform: scaleX(0); transform-origin: left; transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
}
.puerta:hover::before, .puerta:focus-visible::before { transform: scaleX(1); }
.puerta:active { transform: translateY(2px); }
.puerta b { font-size: var(--t-medio); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; }
.puerta i { flex: 1; min-width: 20px; border-bottom: 4px dotted currentColor; transform: translateY(-4px); }
.puerta span { font-weight: 600; white-space: nowrap; }
.puerta span::after { content: " →"; }
.puerta-rosa { --c: var(--rosa); }
.puerta-naranjo { --c: var(--naranjo); }
.puerta-azul { --c: var(--azul); }
.puerta-azul:hover, .puerta-azul:focus-visible, .puerta-rosa:hover, .puerta-rosa:focus-visible { color: var(--papel); }

/* ---------- Vamos a pintar: texto y pasos a la izquierda, boleta a la derecha ---------- */
.pintar {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start;
  padding: var(--entre) var(--margen); background: var(--amarillo);
}
.pintar h2 { font-size: var(--t-grande); }
.pintar-texto > p { max-width: 36ch; margin-top: 28px; font-size: var(--t-medio); line-height: 1.4; }
.pasos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
.pasos figure { margin: 0; background: var(--papel); padding: 14px 14px 16px; }
.pasos img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--suave); }
.pasos figure:hover img { transform: scale(1.04) rotate(-1deg); }
.pasos figcaption { margin-top: 10px; font-weight: 700; font-size: 16px; line-height: 1.3; }

.boleta {
  position: relative; background: var(--papel); padding: 40px 36px 72px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 96% 100%, 92% calc(100% - 14px), 88% 100%, 84% calc(100% - 14px), 80% 100%, 76% calc(100% - 14px), 72% 100%, 68% calc(100% - 14px), 64% 100%, 60% calc(100% - 14px), 56% 100%, 52% calc(100% - 14px), 48% 100%, 44% calc(100% - 14px), 40% 100%, 36% calc(100% - 14px), 32% 100%, 28% calc(100% - 14px), 24% 100%, 20% calc(100% - 14px), 16% 100%, 12% calc(100% - 14px), 8% 100%, 4% calc(100% - 14px), 0 100%);
  font-variant-numeric: tabular-nums;
}
.boleta h3 { font-size: var(--t-medio); margin-top: 32px; }
.boleta h3:first-child { margin-top: 0; }
.boleta-filas { margin: 14px 0 0; }
.boleta-filas div { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.boleta-filas dt { font-weight: 500; }
.boleta-filas div::after { content: ""; order: 1; flex: 1; min-width: 16px; border-bottom: 4px dotted var(--tinta); transform: translateY(-4px); }
.boleta-filas dd { order: 2; margin: 0; font-weight: 800; white-space: nowrap; }
.boleta-nota { margin-top: 18px; font-size: 16px; color: var(--tinta-suave); }
.boleta-final { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 28px -36px 0; padding: 14px 36px; background: var(--tinta); color: var(--papel); font-weight: 800; }

/* ---------- Taller: la figura que se pinta ---------- */
.taller { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; background: var(--papel); }
.taller-lienzo { position: relative; display: grid; place-items: center; padding: 40px; }
.taller-trazo { position: absolute; width: 86%; left: 7%; top: 50%; transform: translateY(-50%) rotate(-6deg); }
.figura { position: relative; width: min(100%, 560px); aspect-ratio: 1; }
.figura [data-zona] { fill: var(--zona, #f3efe6); stroke: var(--tinta); stroke-width: 4; stroke-linejoin: round; cursor: pointer; transition: fill 260ms ease, transform 260ms ease; transform-box: fill-box; transform-origin: center; }
.figura [data-zona]:hover { transform: scale(1.03); }
.figura [data-zona]:focus-visible { outline: none; stroke: var(--flor); stroke-width: 7; }
.figura .recien { animation: brochazo 420ms cubic-bezier(.2, .7, .2, 1); }
@keyframes brochazo { 40% { transform: scale(1.08) rotate(-2deg); } }
.figura [hidden] { display: none; }
.trazo-fijo { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; pointer-events: none; }

.taller-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(40px, 6vw, 88px) var(--margen) clamp(40px, 6vw, 88px) 0; }
.pestanas { display: flex; gap: 28px; }
.pestanas button { background: none; border: 0; padding: 6px 0; font-size: 18px; font-weight: 700; color: var(--tinta-suave); cursor: pointer; border-bottom: 4px solid transparent; transition: color var(--rapido), border-color var(--rapido); }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--naranjo); }
.pestanas button:hover { color: var(--tinta); }
.taller h2 { font-size: var(--t-grande); }
.taller-texto > p { max-width: 34ch; margin-top: 28px; }
.paleta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.paleta button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 8px;
  border: 0; background: var(--papel-tono); font-weight: 700; font-size: 15px; cursor: pointer;
  transition: transform var(--rapido), background-color var(--rapido);
}
.paleta button::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid rgba(45, 46, 41, .3); }
.paleta button:hover { transform: translateY(-2px); }
.paleta button[aria-checked="true"] { background: var(--tinta); color: var(--papel); }
.taller-avance { margin-top: 20px; font-weight: 600; min-height: 1.6em; }
.taller-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.celda { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 0 16px; border: 0; font-weight: 800; font-stretch: 112%; text-decoration: none; text-align: center; cursor: pointer; transition: transform var(--rapido), background-color var(--rapido); }
.celda:active { transform: translateY(2px); }
.celda-tinta { background: var(--tinta); color: var(--papel); }
.celda-tinta:hover { background: #000; }
.celda-tono { background: var(--papel-tono); }
.celda-tono:hover { background: #e6dfd2; }
html:not(.js) .paleta, html:not(.js) .pestanas, html:not(.js) #taller-borrar { display: none; }

/* ---------- Carta: la palabra gigante y barras que se abren ---------- */
.carta { position: relative; padding: calc(var(--entre) + 48px) var(--margen) var(--entre); background: var(--naranjo); overflow: hidden; }
.carta-columna { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; container-type: inline-size; }
.carta-palabra { font-size: 26.5cqw; line-height: .86; text-align: center; background-size: 640px auto; }
.carta-intro { margin: 28px 0 24px; font-size: var(--t-texto); max-width: 60ch; }
.carta-dibujo { position: absolute; width: clamp(160px, 19vw, 300px); aspect-ratio: 4 / 5; object-fit: cover; border: 10px solid var(--papel); }
.cd-1 { left: var(--margen); top: 14%; transform: rotate(-4deg); }
.cd-2 { right: var(--margen); top: 22%; transform: rotate(5deg); }
.cd-3 { left: calc(var(--margen) + 3vw); top: 56%; transform: rotate(3deg); }
.cd-4 { right: calc(var(--margen) + 2vw); top: 66%; transform: rotate(-3deg); }

.barra-carta { background: var(--papel); margin-top: 6px; }
.barra-carta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 0 20px; cursor: pointer; list-style: none;
  font-weight: 800; font-size: 18px;
}
.barra-carta summary::-webkit-details-marker { display: none; }
.barra-carta summary::after { content: "+"; font-size: 28px; font-weight: 500; line-height: 1; transition: transform var(--rapido); }
.barra-carta[open] summary::after { transform: rotate(45deg); }
.barra-carta summary:hover { background: var(--papel-tono); }
.platos { list-style: none; margin: 0; padding: 4px 20px 20px; display: grid; gap: 14px; font-variant-numeric: tabular-nums; }
.platos li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.platos li span { font-weight: 500; }
.platos small { display: block; font-size: 16px; color: var(--tinta-suave); margin-top: 2px; line-height: 1.4; }
.platos b { white-space: nowrap; }
.platos-texto span b { font-weight: 800; }
.barra-carta:not([open]) > :not(summary) { display: none; }
.carta-cierre { margin-top: 28px; font-size: var(--t-medio); font-weight: 600; line-height: 1.35; }
.platos-nota { padding: 0 20px 16px; font-size: 15px; color: var(--tinta-suave); }
.barra-carta[open] .platos { animation: abre 320ms ease both; }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Reservar y sellos: un boleto y una tarjeta ---------- */
.piezas { padding: var(--entre) var(--margen); background: var(--azul); color: var(--papel); }
.piezas-titulo { font-size: var(--t-grande); max-width: 14ch; }
.piezas-fila { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(16px, 2vw, 28px); margin-top: 56px; align-items: stretch; color: var(--tinta); }
.boleto {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; padding: 36px;
  background: var(--papel);
  /* taste-skill-ignore: máscara que troquela las muescas, no es un relleno */ -webkit-mask: radial-gradient(circle 22px at 0 50%, transparent 21px, #000 22px) left / 51% 100% no-repeat, radial-gradient(circle 22px at 100% 50%, transparent 21px, #000 22px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 22px at 0 50%, transparent 21px, #000 22px) left / 51% 100% no-repeat, radial-gradient(circle 22px at 100% 50%, transparent 21px, #000 22px) right / 51% 100% no-repeat; /* taste-skill-ignore */
}
.boleto-dibujo { mix-blend-mode: multiply; }
.boleto h3, .tarjeta-sellos h3 { font-size: var(--t-medio); }
.boleto p, .tarjeta-sellos p { margin-top: 14px; }
.boleto-dato { font-weight: 700; }
.boleto .boton, .tarjeta-sellos .boton { margin-top: 24px; }
.tarjeta-sellos { padding: 36px; background: var(--rosa); }
.flores { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 24px 0 0; padding: 0; max-width: 360px; }
.flores li { aspect-ratio: 1; border-radius: 50%; background: var(--papel); display: grid; place-items: center; }
.flores svg { width: 88%; height: 88%; }
.flores path, .flores circle, .flores ellipse { fill: #fff; stroke: #c9bca6; stroke-width: 2.5; stroke-linejoin: round; }
.flores .yo { fill: #c9bca6; stroke: none; }
.flores .pintada path, .flores .pintada circle, .flores .pintada ellipse { stroke: var(--tinta); }
.flores .pintada .yc { fill: var(--azul); animation: pintarse 1.2s .4s ease both; }
.flores .pintada .yd { fill: var(--naranjo); animation: pintarse 1.2s .8s ease both; }
.flores .pintada .yb { fill: #fff; }
.flores .pintada .yo { fill: var(--tinta); }
@keyframes pintarse { from { fill: #fff; } }
.sellos-premio { font-weight: 700; }

/* ---------- Locales: foto a sangre con la tarjeta de visita ---------- */
.locales { position: relative; min-height: 100svh; background: var(--tinta); }
.locales-foto { position: absolute; inset: 0; overflow: hidden; }
.locales-foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity 400ms ease; animation: deriva 30s ease-in-out infinite alternate; }
@keyframes deriva { to { transform: scale(1.08) translateX(-2%); } }
.visita {
  position: relative; z-index: 1; width: min(400px, calc(100% - 2 * var(--margen)));
  margin: 0 var(--margen) 0 auto; top: 60px; padding: 32px; background: var(--papel);
  font-variant-numeric: tabular-nums;
}
.visita h2 { font-size: var(--t-medio); }
.pestanas-locales { margin-top: 18px; }
.visita-dir { margin-top: 18px; font-size: 18px; font-weight: 600; }
.horario { margin: 16px 0 0; }
.horario div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.horario dd { margin: 0; font-weight: 700; }
.visita-estado { margin-top: 14px; font-weight: 600; }
.visita .enlace { display: inline-block; margin-top: 12px; }
.visita-pago { margin: 20px 0; font-size: 15px; color: var(--tinta-suave); }

/* ---------- Reverso: la postal que queda bajo la hoja ---------- */
.reverso { padding: 72px var(--margen) 40px; background: var(--tinta); }
.postal {
  --ondas: 100px;
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px;
  max-width: 1180px; margin: 0 auto; padding: 72px clamp(24px, 5vw, 64px) 32px; background: var(--papel); container-type: inline-size;
  /* taste-skill-ignore: troquel de la postal */ -webkit-mask: radial-gradient(circle at 50% 0, transparent 24px, #000 25px) 0 0 / var(--ondas) 100%;
          mask: radial-gradient(circle at 50% 0, transparent 24px, #000 25px) 0 0 / var(--ondas) 100%; /* taste-skill-ignore */
}
.postal h2 { font-size: clamp(30px, 3.4vw, 50px); }
.postal-mensaje p { margin-top: 20px; max-width: 34ch; }
.postal-datos { position: relative; }
.postal-datos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 18px; max-width: 30ch; }
.postal-datos a { text-decoration: none; font-weight: 600; }
.postal-datos a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sello-postal { position: absolute; right: 0; top: -24px; width: 92px; aspect-ratio: 3 / 4; object-fit: cover; border: 6px solid var(--papel); outline: 3px dotted var(--tinta); transform: rotate(4deg); }
.pie-marca { grid-column: 1 / -1; margin: 8px 0 0; font-size: 13.4cqi; line-height: .9; text-align: center; text-transform: uppercase; white-space: nowrap; background-size: 1300px auto; }
.imprenta { grid-column: 1 / -1; max-width: 72ch; margin: 0 auto; text-align: center; font-size: var(--t-chico); color: var(--tinta-suave); }

/* ---------- Página de reservas ---------- */
.reservar { background: var(--naranjo); min-height: 100svh; padding-bottom: var(--entre); }
.reservar-cuerpo { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(32px, 5vw, 80px); padding: clamp(32px, 5vw, 72px) var(--margen) 0; align-items: start; }
.reservar-lado { position: sticky; top: 32px; }
.reservar-lado h1 { font-size: var(--t-grande); }
.reservar-lado p { margin-top: 24px; max-width: 34ch; font-size: var(--t-medio); line-height: 1.4; }
.reservar-dibujos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; max-width: 460px; }
.reservar-dibujos img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--papel); padding: 12px; transition: transform var(--suave); }
.reservar-dibujos img:nth-child(odd) { transform: rotate(-2deg); }
.reservar-dibujos img:nth-child(even) { transform: rotate(2deg); }
.reservar-dibujos img:hover { transform: rotate(0) scale(1.03); }
.js .reservar-lado > *, .js .comanda { animation: sube 900ms cubic-bezier(.16, .84, .3, 1) both; }
.js .reservar-lado > p { animation-delay: 80ms; }
.js .reservar-dibujos { animation-delay: 160ms; }
.js .comanda { animation-delay: 220ms; }
.js .dia, .js .hora, .js .opciones button { animation: sube 600ms cubic-bezier(.16, .84, .3, 1) both; }
.comanda { background: var(--papel); padding: clamp(24px, 4vw, 48px); }
.paso { border: 0; margin: 0 0 32px; padding: 0; min-width: 0; }
.paso legend { padding: 0; margin-bottom: 14px; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 20px; }
.paso-doble { display: grid; grid-template-columns: auto 1fr; gap: 32px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones button, .dia, .hora {
  border: 0; background: var(--papel-tono); cursor: pointer; padding: 12px 16px; min-height: 48px;
  font-weight: 700; transition: background-color var(--rapido), color var(--rapido), transform var(--rapido);
}
.opciones button:hover, .dia:hover:not(:disabled), .hora:hover:not(:disabled) { background: #e6dfd2; }
.opciones button[aria-checked="true"], .dia[aria-checked="true"], .hora[aria-checked="true"] { background: var(--tinta); color: var(--papel); }
.opciones-local button { flex: 1 1 200px; text-align: left; display: grid; }
.opciones-local small, .dia small, .hora small { font-weight: 500; font-size: 16px; }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dia { display: grid; justify-items: center; padding: 10px 4px; }
.dia b { font-size: 22px; font-stretch: 112%; }
.dia small { text-transform: capitalize; }
.dia:disabled, .hora:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.horas-grupo + .horas-grupo { margin-top: 16px; }
.horas-titulo { font-weight: 700; margin-bottom: 8px; }
.horas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.hora { display: grid; padding: 8px; }
.hora.pocos small { color: #a3360a; font-weight: 700; }
.hora[aria-checked="true"].pocos small { color: var(--amarillo); }
.contador { display: flex; align-items: center; gap: 8px; }
.contador button { width: 48px; height: 48px; border: 0; background: var(--papel-tono); font-size: 24px; cursor: pointer; }
.contador button:disabled { opacity: .4; cursor: not-allowed; }
.contador output { min-width: 48px; text-align: center; font-size: 32px; font-weight: 900; font-stretch: 125%; }
.ayuda { margin-top: 8px; font-size: 16px; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.datos label { display: grid; gap: 6px; font-weight: 700; font-size: 16px; }
.datos-ancho { grid-column: 1 / -1; }
.datos input { font: inherit; font-size: 17px; min-height: 50px; padding: 0 14px; border: 2px solid var(--tinta); border-radius: 0; background: var(--papel); }
.casilla { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0; font-size: 16px; }
.casilla input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tinta); flex: none; }
.aviso { margin-bottom: 14px; padding: 12px 14px; background: var(--rosa); font-weight: 700; }
.reservar-respaldo { font-size: var(--t-medio); }
.reserva-actual h3 { font-size: var(--t-medio); }
.reserva-actual > p { margin-top: 10px; }
.vale { margin: 24px 0; padding: 20px; background: var(--amarillo); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-variant-numeric: tabular-nums; }
.vale span { display: block; font-size: var(--t-chico); }
.vale b { font-size: 18px; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.boton-quieto { background: var(--papel-tono); color: var(--tinta); }
.boton-quieto:hover { background: #e6dfd2; }
.cancelar { background: none; border: 0; padding: 12px 0; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---------- Entradas al hacer scroll (sin script, todo queda visible) ---------- */
.js [data-entra] { opacity: 0; transform: translateY(24px); transition: opacity var(--suave), transform var(--suave); transition-delay: var(--retraso, 0ms); }
.js [data-entra].visible { opacity: 1; transform: none; }
.js .inicio .tarjeta-marca span, .js .inicio .tarjeta-titulo, .js .inicio .tarjeta-frase, .js .inicio .estado, .js .inicio .puertas li { animation: sube 900ms cubic-bezier(.16, .84, .3, 1) both; }
.js .inicio .tarjeta-marca span:last-child { animation-delay: 80ms; }
.js .inicio .tarjeta-titulo { animation-delay: 130ms; }
.js .inicio .tarjeta-frase { animation-delay: 180ms; }
.js .inicio .estado { animation-delay: 240ms; }
.js .inicio .puertas li:nth-child(1) { animation-delay: 300ms; }
.js .inicio .puertas li:nth-child(2) { animation-delay: 370ms; }
.js .inicio .puertas li:nth-child(3) { animation-delay: 440ms; }
@keyframes sube { from { opacity: 0; translate: 0 28px; } }

/* ---------- El letrero: cada letra sobre su panel de color, como el de su local ---------- */
.letrero { display: inline-flex; gap: .08em; font-family: "Alfa Slab One", Georgia, serif; font-size: 22px; line-height: 1; color: var(--tinta); }
.letrero span { display: grid; place-items: center; min-width: 1.18em; padding: .14em .06em .1em; background: var(--l); transition: transform var(--rapido); }
.letrero .hueco { min-width: .4em; background: none; }
.letrero span:nth-child(1) { --l: var(--amarillo); } .letrero span:nth-child(2) { --l: var(--rojo); }
.letrero span:nth-child(3) { --l: var(--verde); } .letrero span:nth-child(4) { --l: var(--rosa); }
.letrero span:nth-child(6) { --l: var(--naranjo); } .letrero span:nth-child(7) { --l: var(--turquesa); }
.letrero span:nth-child(8) { --l: var(--amarillo); } .letrero span:nth-child(9) { --l: var(--morado); color: var(--papel); }
.letrero span:nth-child(10) { --l: var(--rojo); } .letrero span:nth-child(11) { --l: var(--azul); color: var(--papel); }
a:hover .letrero span:nth-child(odd), .letrero:hover span:nth-child(odd) { transform: translateY(-3px) rotate(-3deg); }
a:hover .letrero span:nth-child(even), .letrero:hover span:nth-child(even) { transform: translateY(2px) rotate(3deg); }

/* ---------- El vitral: sus ventanas de colores, detrás de la hoja del inicio ---------- */
.vitral {
  position: absolute; inset: 0; z-index: 0; display: grid; gap: 12px; padding: 12px;
  grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 1fr); background: var(--tinta);
}
.vitral i { background: var(--v); animation: luz 7s ease-in-out infinite alternate; animation-delay: calc(var(--n, 0) * -0.9s); }
.vitral i:nth-child(8n+1) { --v: var(--rojo); --n: 1; } .vitral i:nth-child(8n+2) { --v: var(--amarillo); --n: 4; }
.vitral i:nth-child(8n+3) { --v: var(--verde); --n: 2; } .vitral i:nth-child(8n+4) { --v: var(--azul); --n: 6; }
.vitral i:nth-child(8n+5) { --v: var(--morado); --n: 3; } .vitral i:nth-child(8n+6) { --v: var(--naranjo); --n: 7; }
.vitral i:nth-child(8n+7) { --v: var(--rosa); --n: 5; } .vitral i:nth-child(8n) { --v: var(--turquesa); --n: 8; }
.vitral i:nth-child(3), .vitral i:nth-child(12), .vitral i:nth-child(22) { grid-column: span 2; }
.vitral i:nth-child(6), .vitral i:nth-child(17), .vitral i:nth-child(27) { grid-row: span 2; }
@keyframes luz { from { opacity: .78; } to { opacity: 1; } }
.inicio > .barra, .inicio > .tarjeta { z-index: 2; }
.inicio > .barra { background: var(--tinta); }
.pagina-reservar .barra-enlaces a { color: var(--tinta); }
.pagina-reservar .barra-enlaces a::after { background: var(--tinta); }

/* ---------- Así se vive: las fotos del local puestas en un vitral ---------- */
.vive { padding: var(--entre) var(--margen); background: var(--tinta); color: var(--papel); }
.vive-cabeza { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; }
.vive h2 { font-size: var(--t-grande); }
.vive-cabeza p { max-width: 40ch; font-size: var(--t-medio); line-height: 1.4; }
.ventana {
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(150px, 15vw, 230px); grid-auto-flow: dense;
  gap: 12px; margin-top: 56px;
}
.ventana figure { position: relative; margin: 0; overflow: hidden; background: var(--v, var(--rojo)); }
.ventana img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--suave), filter var(--suave); }
.ventana figure:hover img { transform: scale(1.06); }
.ventana .alto { grid-row: span 2; }
.ventana .ancho { grid-column: span 2; }
.ventana .vidrio { background: var(--v); animation: luz 6s ease-in-out infinite alternate; }
.ventana figcaption { position: absolute; left: 0; bottom: 0; padding: 6px 10px; background: var(--papel); color: var(--tinta); font-size: 15px; font-weight: 700; transform: translateY(101%); transition: transform var(--rapido); }
.ventana figure:hover figcaption, .ventana figure:focus-within figcaption { transform: none; }
/* En escritorio cada panel tiene su lugar fijo: el vitral queda completo, sin huecos */
@media (min-width: 961px) {
  .ventana { grid-template-rows: repeat(3, clamp(150px, 15vw, 230px)); }
  .ventana > :nth-child(1) { grid-area: 1 / 1 / 3 / 2; }  .ventana > :nth-child(2) { grid-area: 1 / 2 / 2 / 4; }
  .ventana > :nth-child(3) { grid-area: 1 / 4 / 2 / 5; }  .ventana > :nth-child(4) { grid-area: 1 / 5 / 2 / 6; }
  .ventana > :nth-child(5) { grid-area: 1 / 6 / 3 / 7; }  .ventana > :nth-child(6) { grid-area: 2 / 2 / 3 / 3; }
  .ventana > :nth-child(7) { grid-area: 2 / 3 / 3 / 4; }  .ventana > :nth-child(8) { grid-area: 2 / 4 / 4 / 5; }
  .ventana > :nth-child(9) { grid-area: 2 / 5 / 3 / 6; }  .ventana > :nth-child(10) { grid-area: 3 / 1 / 4 / 2; }
  .ventana > :nth-child(11) { grid-area: 3 / 2 / 4 / 3; } .ventana > :nth-child(12) { grid-area: 3 / 3 / 4 / 4; }
  .ventana > :nth-child(13) { grid-area: 3 / 5 / 4 / 7; }
}
.vive-nota { margin-top: 20px; font-size: var(--t-chico); }

/* ---------- Panoramas: talleres y eventos ---------- */
.panoramas { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); padding: var(--entre) var(--margen); background: var(--rojo); color: var(--papel); }
.panoramas h2 { font-size: var(--t-grande); }
.panoramas-texto > p { max-width: 36ch; margin-top: 24px; font-size: var(--t-medio); line-height: 1.4; }
.panoramas-foto { margin-top: 40px; width: min(100%, 440px); aspect-ratio: 4 / 5; object-fit: cover; border: 10px solid var(--papel); transform: rotate(-2deg); }
.eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.evento { display: grid; grid-template-columns: 112px 1fr; background: var(--papel); color: var(--tinta); }
.evento-fecha { display: grid; place-content: center; text-align: center; padding: 16px 8px; background: var(--e, var(--amarillo)); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: 1; }
.evento-fecha b { display: block; font-size: 44px; }
.evento-fecha span { display: block; margin-top: 4px; }
.evento:nth-child(2) .evento-fecha { --e: var(--rosa); }
.evento:nth-child(3) .evento-fecha { --e: var(--turquesa); }
.evento-cuerpo { padding: 20px 22px; }
.evento-cuerpo h3 { font-size: var(--t-medio); }
.evento-cuerpo p { margin-top: 8px; }
.evento-cuerpo .evento-dato { font-weight: 700; }
.eventos-vacio { padding: 24px; background: var(--papel); color: var(--tinta); font-weight: 600; }
.otros { margin-top: 32px; }
.otros h3 { font-size: var(--t-medio); }
.otros ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.otros li { padding: 10px 14px; background: var(--o); color: var(--tinta); font-weight: 700; }
.otros li:nth-child(6n+1) { --o: var(--amarillo); } .otros li:nth-child(6n+2) { --o: var(--rosa); }
.otros li:nth-child(6n+3) { --o: var(--turquesa); } .otros li:nth-child(6n+4) { --o: var(--naranjo); }
.otros li:nth-child(6n+5) { --o: var(--papel); } .otros li:nth-child(6n) { --o: var(--verde); }
.panoramas .boton { margin-top: 28px; }

/* ---------- Tablet y celular ---------- */
@media (max-width: 960px) {
  .pintar, .taller, .piezas-fila, .reservar-cuerpo, .panoramas, .vive-cabeza { grid-template-columns: 1fr; }
  .ventana { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 26vw; }
  /* Celular: título, figura y colores juntos; el dibujo y la paleta se ven en la misma pantalla */
  .taller { display: flex; flex-direction: column; min-height: 0; padding: 56px 0 64px; }
  .taller-panel, .taller-texto { display: contents; }
  .taller h2 { order: 1; padding: 0 var(--margen); }
  .taller-texto > p { order: 2; margin: 14px var(--margen) 0; }
  .pestanas { order: 3; margin: 20px var(--margen) 0; }
  .taller-lienzo { order: 4; padding: 4px var(--margen) 0; }
  .paleta { order: 5; margin: 4px var(--margen) 0; gap: 6px; }
  .taller-texto > .taller-avance { order: 6; margin: 12px var(--margen) 0; }
  .taller-acciones { order: 7; margin: 20px var(--margen) 0; }
  .paleta button { min-height: 40px; padding: 0 10px 0 6px; gap: 6px; font-size: 14px; }
  .paleta button::before { width: 24px; height: 24px; }
  .figura { width: min(100%, 300px); }
  .carta-dibujo { display: none; }
  .reservar-lado { position: static; }
  .reservar-dibujos { display: none; }
  .reservar-lado { padding: 0 clamp(16px, 4vw, 48px); }
  .postal { grid-template-columns: 1fr; --ondas: 64px; }
}
@media (max-width: 720px) {
  :root { --t-texto: 17px; --entre: 72px; }
  .barra { grid-template-columns: auto 1fr; padding: 12px var(--margen); }
  .barra-enlaces { display: none; }
  .barra .letrero { font-size: 15px; }
  .barra .boton { padding: 0 14px; min-height: 46px; white-space: nowrap; font-size: 15px; }
  .vitral { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(8, 1fr); gap: 8px; padding: 8px; }
  .ventana { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; gap: 8px; }
  .ventana figcaption { transform: none; font-size: 14px; }
  .evento { grid-template-columns: 84px 1fr; }
  .evento-fecha b { font-size: 34px; }

  .tarjeta { --corte: 22px; width: calc(100% - 24px); margin-top: 40px; padding: 64px 20px 48px; }
  .tarjeta-flor { right: -14px; top: -42px; width: 84px; }
  .tarjeta-marca { font-size: 21vw; }
  .tarjeta-marca span:first-child, .tarjeta-marca span:last-child { transform: none; }
  .tarjeta-titulo { font-size: 6vw; margin-top: 18px; }
  .tarjeta-frase { font-size: 19px; margin-top: 24px; }
  .puerta { flex-wrap: wrap; row-gap: 2px; min-height: 64px; padding: 16px; }
  .puerta b { font-size: 19px; }
  .puerta i { display: none; }
  .puerta span { width: 100%; font-size: 15px; }
  .pasos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pasos figure { padding: 8px 8px 10px; }
  .pasos figcaption { font-size: 14px; }
  .boleta { padding: 32px 20px 64px; }
  .boleta-final { margin: 24px -20px 0; padding: 14px 20px; }
  .taller-acciones { grid-template-columns: 1fr; }
  .celda { min-height: 60px; }
  .boleto { grid-template-columns: 1fr; padding: 28px 32px; }
  .boleto-dibujo { width: 60%; }
  .tarjeta-sellos { padding: 28px 24px; }
  .locales { min-height: 0; padding-bottom: 32px; }
  .locales-foto { position: relative; height: 70svh; }
  .visita { top: 0; margin: -80px auto 0; width: calc(100% - 2 * var(--margen)); }
  .visita .boton { min-height: 56px; }
  .sello-postal { width: 64px; top: -12px; }
  .postal { --ondas: 56px; padding-top: 56px; }
  .dias { grid-template-columns: repeat(4, 1fr); }
  .paso-doble { grid-template-columns: 1fr; gap: 0; }
  .datos { grid-template-columns: 1fr; }
  .vale { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js [data-entra] { opacity: 1; transform: none; }
}

/* ---------- Para el equipo: al final de cada página ---------- */
.equipo { display: grid; grid-template-columns: 1fr minmax(0, 1.3fr); align-items: center; gap: 12px 48px; max-width: 1180px; margin: 40px auto 0; padding: 28px clamp(24px, 5vw, 64px); background: var(--azul); color: var(--papel); }
.equipo h2 { font-size: var(--t-medio); }
.equipo p { max-width: 52ch; }
.equipo-opciones { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.equipo-opcion { display: grid; gap: 4px; padding: 16px 18px; background: var(--papel); color: var(--tinta); text-decoration: none; transition: transform var(--rapido), background-color var(--rapido); }
.equipo-opcion:nth-child(2) { background: var(--amarillo); }
.equipo-opcion:hover { transform: translateY(-2px); }
.equipo-opcion b { font-size: 18px; font-weight: 900; font-stretch: 112%; }
.equipo-opcion span { font-size: 15px; }
.boton-amarillo { background: var(--amarillo); color: var(--tinta); }
.boton-amarillo:hover { background: var(--papel); }
.reverso-corto { padding-top: 8px; }
@media (max-width: 960px) { .equipo { grid-template-columns: 1fr; } .equipo-opciones { grid-column: auto; grid-row: auto; } }
@media (max-width: 560px) { .equipo-opciones { grid-template-columns: 1fr; } }