/* ============================================================
   app.css · Tu Santa Cruz
   Mobile first. Todo lo visual sale de tokens.css.

   ESQUEMA DE COLOR
   La app usa blanco cal como fondo dominante en todas las
   pantallas y verde selva solo como color de texto y de acento.
   Es una decision de producto: el manual de marca propone la
   proporcion inversa (55% selva, 27% cal), asi que cualquier
   revision con el equipo de marca conviene que arranque por aca.
   ============================================================ */

*{ box-sizing: border-box; }

html, body{ margin:0; padding:0; overflow-x:hidden; }

html{ background: var(--surface); }

body{
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

img, svg{ max-width:100%; }

.wrap{
  width:100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--sp-2);
}

.oculto{ display:none !important; }

/* Solo para lectores de pantalla */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   PANTALLAS
   ============================================================ */
.pantalla{ display:none; }
.pantalla.activa{ display:block; }

/* ============================================================
   INICIO
   ============================================================ */
.inicio{
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--sp-4) 0 calc(var(--sp-4) + 34px);
  position:relative; overflow:hidden;
}
.inicio::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:26px;
  background: repeating-linear-gradient(90deg, var(--scz-teja) 0 26px, #8E3E23 26px 30px);
  -webkit-mask: repeating-radial-gradient(circle at 15px 26px, #000 0 13px, transparent 13px);
          mask: repeating-radial-gradient(circle at 15px 26px, #000 0 13px, transparent 13px);
  opacity:.9;
}
.inicio .marca-top{
  display:flex; align-items:center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.inicio .marca-top .linea{ height:1px; flex:1; background: var(--border); }
.inicio .marca-top .scz-cap{ opacity:.6; }

.sigla{
  font-family: var(--font-display);
  font-weight:800; font-stretch:70%;
  font-size:1.5rem; letter-spacing:.06em; line-height:1;
  color: var(--scz-selva);
}

.inicio h1{
  font-family: var(--font-display);
  font-weight:800; font-stretch:118%;
  font-size: clamp(2.2rem, 10.5vw, 4rem);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  margin:0;
  color: var(--scz-selva);
  overflow-wrap: break-word;
  hyphens: auto;
}
.inicio h1 em{ font-style:normal; color: var(--accent); }

.firma{
  font-family: var(--font-firma);
  font-size: clamp(2.1rem, 9vw, 3rem);
  color: var(--scz-teja);
  display:block; line-height:1;
  margin-top: var(--sp-1);
}

.inicio .bajada{
  max-width: 42ch;
  margin-top: var(--sp-3);
  opacity:.82;
}

.fruta-hero{
  width: 110px; height:110px;
  margin-bottom: var(--sp-2);
}

.pasos-previos{
  display:flex; flex-wrap:wrap; gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-3);
  padding:0; list-style:none;
}
.pasos-previos li{
  font-family: var(--font-util);
  font-size: var(--t-cap);
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  opacity:.62;
}
.pasos-previos li::before{
  content:""; display:inline-block;
  width:7px; height:7px; border-radius:50%;
  background: var(--accent);
  margin-right:8px; vertical-align:middle;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background: var(--accent); color:#fff;
  padding: 15px 26px;
  border:0; border-radius: var(--r-btn);
  font-family: var(--font-display);
  font-weight:600; font-size:1rem; letter-spacing:.06em;
  cursor:pointer; text-decoration:none;
  transition: filter var(--dur);
  min-height:52px;
}
.btn:hover{ filter: brightness(1.08); }
.btn:active{ filter: brightness(.94); }
.btn-grande{ width:100%; margin-top: var(--sp-3); font-size:1.05rem; }

.btn-fantasma{
  background:none; border:0; padding:10px 4px;
  color: inherit; opacity:.6; cursor:pointer;
  font-family: var(--font-util); font-size: var(--t-cap);
  letter-spacing: var(--ls-cap); text-transform: uppercase;
}
.btn-fantasma:hover{ opacity:1; }

/* ============================================================
   CUESTIONARIO
   ============================================================ */
.quiz{
  min-height:100svh;
  display:flex; flex-direction:column;
  padding: var(--sp-3) 0 var(--sp-4);
}

.quiz-barra{
  display:flex; align-items:center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.quiz-progreso{
  flex:1; height:4px; border-radius:2px;
  background: rgba(74,53,36,.14);
  overflow:hidden;
}
.quiz-progreso i{
  display:block; height:100%; width:0%;
  background: var(--accent);
  transition: width var(--dur);
}
.quiz-contador{
  font-family: var(--font-util);
  font-size: var(--t-cap);
  letter-spacing: var(--ls-cap);
  opacity:.6;
}

.quiz h2{
  font-family: var(--font-display);
  font-weight:700; font-stretch:112%;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  letter-spacing:-.02em; line-height:1.08;
  margin:0 0 var(--sp-1);
  color: var(--scz-selva);
}
.quiz .ayuda{
  font-size:.95rem; opacity:.7; margin:0 0 var(--sp-3);
}

.opciones{
  display:grid; gap:12px;
  list-style:none; padding:0; margin:0;
}
.opcion{
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:left;
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius: var(--r-card);
  color: var(--ink);
  padding:16px 18px;
  font-family: var(--font-body);
  font-size:1.05rem; line-height:1.35;
  cursor:pointer;
  transition: background var(--dur), border-color var(--dur);
  min-height:60px;
}
.opcion:hover{ background:#fff; border-color: rgba(74,53,36,.3); }
.opcion[aria-pressed="true"]{
  border-color: var(--accent);
  background: rgba(226,96,31,.09);
}
.opcion .marca-check{
  flex:none; width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(74,53,36,.3);
  display:grid; place-items:center;
}
.opcion[aria-pressed="true"] .marca-check{
  border-color: var(--accent);
  background: var(--accent);
}
.opcion[aria-pressed="true"] .marca-check::after{
  content:""; width:8px; height:8px; border-radius:50%; background:#fff;
}
/* En las preguntas de varias respuestas el indicador es cuadrado,
   asi se entiende que se puede marcar mas de una */
.opcion.multiple .marca-check{ border-radius:5px; }
.opcion.multiple[aria-pressed="true"] .marca-check::after{
  width:10px; height:6px; border-radius:0; background:none;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
}
.opcion .emoji{ font-size:1.35rem; flex:none; line-height:1; }

.quiz-pie{
  margin-top: var(--sp-3);
  display:flex; align-items:center; gap: var(--sp-2);
}
.quiz-pie .btn{ flex:1; }

/* ============================================================
   CARGANDO
   ============================================================ */
.cargando{
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; gap: var(--sp-2);
}
.cargando .firma{ margin:0; }
.cargando .puntos{
  display:flex; gap:10px; margin-top: var(--sp-2);
  justify-content:center;
}
.cargando .puntos i{
  width:11px; height:11px; border-radius:50%;
  background: var(--accent);
  animation: latir 1.1s infinite ease-in-out;
}
.cargando .puntos i:nth-child(2){ animation-delay:.15s; }
.cargando .puntos i:nth-child(3){ animation-delay:.3s; }
@keyframes latir{
  0%,100%{ opacity:.25; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-6px); }
}

/* ============================================================
   RESULTADO
   ============================================================ */
.resultado{
  background: var(--surface);
  color: var(--ink);
  min-height:100svh;
  padding-bottom: 112px; /* deja aire para la barra de acciones */
}

.resultado-cab{
  padding: var(--sp-3) 0 var(--sp-4);
  position:relative;
}
.resultado-cab .scz-cap{ opacity:.6; }
.resultado-cab::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:14px;
  background: repeating-linear-gradient(90deg, var(--scz-teja) 0 18px, #8E3E23 18px 20px);
  -webkit-mask: repeating-radial-gradient(circle at 10px 14px, #000 0 9px, transparent 9px);
          mask: repeating-radial-gradient(circle at 10px 14px, #000 0 9px, transparent 9px);
  opacity:.9;
}
.resultado-cab h2{
  font-family: var(--font-display);
  font-weight:800; font-stretch:118%;
  font-size: clamp(1.7rem, 7.5vw, 2.8rem);
  letter-spacing: var(--ls-display); line-height: var(--lh-tight);
  text-transform:uppercase; margin: var(--sp-1) 0 0;
  color: var(--scz-selva);
  overflow-wrap: break-word;
}
.resumen-chips{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top: var(--sp-2); padding:0; list-style:none;
}
.resumen-chips li{
  font-family: var(--font-util);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--border);
  border-radius:999px; padding:5px 11px;
  opacity:.8;
}

/* --- Selector de idioma --- */
.idiomas{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top: var(--sp-3);
}
.idiomas .cap{ opacity:.55; margin-right:2px; }
.idioma-btn{
  background: var(--surface-2);
  border:1px solid var(--border);
  color: var(--ink);
  border-radius:999px; padding:6px 13px; cursor:pointer;
  font-family: var(--font-util); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.idioma-btn[aria-pressed="true"]{
  background: var(--scz-selva); border-color: var(--scz-selva);
  color: var(--scz-cal);
}

/* --- Linea de tiempo con riel horcon --- */
.dia{ padding-top: var(--sp-4); }
.dia-titulo{
  font-family: var(--font-display);
  font-weight:700; font-stretch:112%;
  font-size:1.35rem; letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 var(--sp-2);
  display:flex; align-items:center; gap:12px;
  color: var(--scz-selva);
}
.dia-titulo::after{
  content:""; flex:1; height:1px; background: var(--border);
}

.linea{
  position:relative;
  padding-left: 38px;
  list-style:none; margin:0;
}
/* El poste de horcon que ordena la linea de tiempo */
.linea::before{
  content:""; position:absolute;
  left:11px; top:6px; bottom:18px; width:9px;
  border-radius:2px;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, #3B2A1C, #6B4A32 45%, #34251A);
}

.parada{ position:relative; margin-bottom: var(--sp-3); }
/* Achachairu como marcador de parada */
.parada::before{
  content:""; position:absolute;
  left:-33px; top:10px;
  width:15px; height:15px; border-radius:50%;
  background: var(--accent);
  border:3px solid var(--surface);
  box-shadow:0 0 0 1px rgba(74,53,36,.18);
}

.parada-cab{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-bottom:8px;
}
.parada-bloque{
  font-family: var(--font-util);
  font-size: var(--t-cap); letter-spacing: var(--ls-cap);
  text-transform:uppercase; color: var(--scz-teja);
}
.parada-hora{
  font-family: var(--font-util);
  font-size: var(--t-cap); letter-spacing:.08em;
  opacity:.55;
}

.tarjeta{
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  position:relative; overflow:hidden;
}
.tarjeta::before{
  content:""; position:absolute; top:0; left:0; right:0; height:7px;
  background: repeating-linear-gradient(90deg, var(--scz-teja) 0 18px, #8E3E23 18px 20px);
  -webkit-mask: repeating-radial-gradient(circle at 10px 7px, #000 0 9px, transparent 9px);
          mask: repeating-radial-gradient(circle at 10px 7px, #000 0 9px, transparent 9px);
  opacity:.85;
}
.tarjeta h3{
  font-family: var(--font-display);
  font-weight:700; font-stretch:110%;
  font-size:1.2rem; line-height:1.15;
  margin:0 0 6px;
  color: var(--scz-selva);
}
.tarjeta p{ margin:0 0 var(--sp-2); }

.etiquetas{
  display:flex; flex-wrap:wrap; gap:7px;
  margin-bottom: var(--sp-2);
}
.etiqueta{
  font-family: var(--font-util);
  font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
  background: rgba(74,53,36,.06);
  border:1px solid var(--border);
  display:inline-flex; align-items:center; gap:6px;
}
.etiqueta.cat-gastronomia{ background: rgba(226,96,31,.12); border-color: rgba(226,96,31,.3); }
.etiqueta.cat-naturaleza{ background: rgba(47,158,91,.13); border-color: rgba(47,158,91,.32); }
.etiqueta.cat-cultura{ background: rgba(166,75,42,.12); border-color: rgba(166,75,42,.3); }
.etiqueta.cat-negocios{ background: rgba(232,164,23,.15); border-color: rgba(232,164,23,.35); }
.etiqueta.cat-noche{ background: rgba(13,74,49,.1); border-color: rgba(13,74,49,.28); }

.datos{
  border-top:1px solid var(--border);
  padding-top: var(--sp-2);
  display:grid; gap:7px;
  font-size:.92rem;
}
.dato{ display:flex; gap:9px; align-items:flex-start; }
.dato .ico{ flex:none; width:17px; text-align:center; opacity:.75; }
.dato b{
  font-family: var(--font-util);
  font-size:.63rem; letter-spacing:.12em; text-transform:uppercase;
  display:block; opacity:.55; font-weight:500;
}

.mapa-link{
  color: var(--scz-teja);
  text-decoration:underline; text-underline-offset:3px;
}

/* --- Aviso de datos --- */
.aviso{
  margin: var(--sp-4) 0 0;
  padding: var(--sp-2);
  border-left:4px solid var(--highlight);
  background: rgba(232,164,23,.12);
  font-size:.88rem;
}

/* --- Barra de acciones fija --- */
.acciones{
  position:fixed; left:0; right:0; bottom:0;
  background: var(--surface-2);
  border-top:1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(74,53,36,.08);
  padding:10px var(--sp-2) calc(10px + env(safe-area-inset-bottom));
  z-index:30;
}
.acciones-fila{
  max-width:680px; margin:0 auto;
  display:flex; gap:8px; align-items:stretch;
}
.acciones .btn{ flex:1; padding:13px 14px; font-size:.9rem; min-height:48px; }
.acciones .btn-secundario{
  flex:none; width:52px; padding:0;
  background: transparent;
  border:1px solid var(--border);
  color: var(--ink);
  font-size:1.15rem;
}
.acciones .btn-secundario:hover{ background: rgba(74,53,36,.06); filter:none; }

/* Mensaje de estado, se lee con lector de pantalla */
.estado-vivo{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:86px; z-index:40;
  background: var(--scz-selva); color: var(--scz-cal);
  padding:9px 17px; border-radius:999px;
  font-family: var(--font-util); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase;
  box-shadow: var(--shadow);
  opacity:0; pointer-events:none;
  transition: opacity var(--dur);
  max-width: 90vw; text-align:center;
}
.estado-vivo.visible{ opacity:1; }

.pie-app{
  text-align:center;
  padding: var(--sp-4) var(--sp-2) var(--sp-2);
  opacity:.6;
}
.pie-app .cap{ font-family: var(--font-util); font-size:.68rem;
  letter-spacing: var(--ls-cap); text-transform:uppercase; }

/* ============================================================
   PANTALLAS GRANDES
   ============================================================ */
@media (min-width: 720px){
  .wrap{ padding:0 var(--sp-3); }
  .opciones{ grid-template-columns:1fr 1fr; }
  .opciones.una-columna{ grid-template-columns:1fr; }
  .acciones{ padding:12px var(--sp-3) 12px; }
}

/* ============================================================
   IMPRESION Y PDF
   ============================================================ */
@media print{
  .acciones, .idiomas, .pie-app, .estado-vivo{ display:none !important; }
  body{ background:#fff; color:#000; }
  .resultado{ background:#fff; padding-bottom:0; }
  .resultado-cab::after{ display:none; }
  .resumen-chips li{ border-color:#999; }
  .tarjeta{ break-inside: avoid; page-break-inside: avoid; border-color:#bbb; }
  .dia{ break-inside: avoid; }
  .linea::before{ background:#8a6244; }
}