/* ============================================================================
   OLEA · /guest (v3) — «El Cuaderno de Olea»
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de web/css/olea-web.css y vive de sus tokens (--crema,
   --papel, --tinta, --piedra, --oro, --serif, --sans…). Aquí solo va lo que la
   web no tiene: la piel de móvil del guest y las piezas del cuaderno.

   Un solo tema, el claro (decisión §0.9). El guest v2 tenía conmutador oscuro y
   se retira: la web no lo tiene y el QR se escanea en una mesa, no de noche en
   un sofá.

   Todo pensado a 390 px de ancho primero; el contenedor se planta en 640 px
   para que en una tableta no se estire una columna de texto de móvil.
   ============================================================================ */

/* Allura (la firma del cuaderno) la declara olea-web.css, que se carga antes. */

:root{
  --script:"Allura","Brush Script MT",cursive;
  --g-hueco:#ECE6DA;
  --g-sombra-copia:0 10px 26px rgba(49,52,44,.16);
  --g-error:#8A3B2E;
  --g-ancho:640px;
}

/* ── base ────────────────────────────────────────────────────────────────── */
body{font-size:16px;line-height:1.55;background:var(--crema);overflow-x:hidden}
.g-pag{width:min(100%,var(--g-ancho));margin-inline:auto}

/* Las pantallas son una sola página; go() enciende una y apaga las demás. */
.screen{display:none}
.screen.on{display:block}
.step{display:none}
.step.on{display:block}

/* ── cabecera ────────────────────────────────────────────────────────────── */
/* No usa .cab de olea-web.css a propósito: aquella es fija y de 76 px de alto,
   pensada para una web con menú. Aquí la cabecera es una línea. */
.g-cab{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 20px 12px;background:var(--crema)}
.g-marca{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:24px;font-weight:500;line-height:1}
.g-marca img{width:28px;height:28px;border-radius:50%;background:var(--crema)}
.g-marca small{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-texto);margin-left:2px}
.g-cabd{display:flex;align-items:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  min-height:44px;padding:0 2px;color:var(--tinta-2)}
.g-cabd:hover{color:var(--oro-texto)}
/* Selector de idioma (desplegable, 13-sep-2026). La pieza es la de la web
   —.idioma en olea-web.css, que se carga antes—: un <details> con enlaces reales
   que abre y cierra sin JavaScript. Aquí solo el cuerpo de la línea del guest
   (11 px) y su color; guest.js añade Escape y cerrar al pulsar fuera. */
.g-lang .idioma__btn{font-size:11px;color:var(--tinta-2);transition:color var(--t-rapida) var(--ease)}
.g-lang .idioma__btn:hover{color:var(--oro-texto)}
.g-lang .idioma__lista a{font-size:11px}
/* En la portada se ofrece el idioma; dentro, la vuelta. body.inner lo decide. */
.g-atras{display:none}
body.inner .g-atras{display:flex}
body.inner .g-lang{display:none}

/* ── portada ─────────────────────────────────────────────────────────────── */
.g-hero{position:relative;margin:6px 16px 0;overflow:hidden;aspect-ratio:4/3;background:var(--arena-2)}
.g-hero img{width:100%;height:100%;object-fit:cover}
.g-hero .hueco{min-height:0;height:100%}
.g-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none;
  background:linear-gradient(to top,rgba(36,39,30,.72),rgba(36,39,30,0))}
.g-hero .voz{position:absolute;z-index:1;left:18px;right:18px;bottom:16px;margin:0;
  color:var(--crema);font-size:clamp(24px,6.8vw,30px);line-height:1.15;text-shadow:0 2px 14px rgba(0,0,0,.45)}

.g-int{padding:22px 20px 8px}
.g-ojal{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--oro-texto);font-weight:400;margin:0 0 6px}
/* Cuando el ojal es la etiqueta de un grupo de botones (y no el rótulo de la
   pantalla) va en gris, como cualquier otra etiqueta de campo. */
.g-ojal--campo{color:var(--piedra);margin-top:4px}
.g-tit{font-family:var(--serif);font-weight:500;font-size:clamp(28px,8vw,34px);line-height:1.04;letter-spacing:-.01em;margin:0 0 6px;text-wrap:balance}
.g-sub{font-family:var(--serif);font-style:italic;font-weight:400;font-size:18px;line-height:1.3;color:var(--tinta-2);margin:0 0 18px}

/* Tres puertas del mismo tamaño y en el mismo orden para todos: la de Google no
   depende de cómo le fue al huésped (Google prohíbe filtrar opiniones). */
.puertas{display:grid;gap:10px;margin:2px 0 0}
.puerta{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;width:100%;text-align:left;
  padding:16px 16px 15px;background:var(--papel);border:1px solid var(--arena-2);min-height:88px;
  font-family:var(--sans);font-weight:300;color:var(--tinta);
  transition:border-color var(--t-rapida) var(--ease),background var(--t-rapida) var(--ease)}
.puerta:hover{border-color:var(--oro);background:var(--crema)}
.puerta b{display:block;font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.1;margin-bottom:5px}
.puerta span{display:block;font-size:13.5px;color:var(--piedra);line-height:1.4}
.puerta i{font-style:normal;color:var(--oro);font-size:22px;line-height:1}

.g-sec{display:flex;gap:16px 20px;flex-wrap:wrap;margin:22px 0 0}
.g-sec .enlace{font-size:11.5px;min-height:44px;display:inline-flex;align-items:center;padding:0}
.g-sec .enlace::after{bottom:11px}

.g-pie{margin-top:28px;padding:18px 0 26px;border-top:1px solid var(--arena-2);
  display:flex;gap:14px 18px;flex-wrap:wrap;align-items:center;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--piedra)}
.g-pie a{border-bottom:1px solid var(--arena-2);padding-bottom:2px}
.g-pie a:hover{border-bottom-color:var(--oro)}
.g-pie .lugar{margin-right:auto}
/* Redes con icono (fase 2): los mismos iconos que el pie de la web
   (olea_icono) y el mismo círculo que su panel móvil, tinta sobre crema: borde
   al 60 % (≥ 3:1 sobre crema), 44 px de área táctil, a la derecha de «Ver la
   carta». Al pasar, relleno tinta e icono crema, como allí. */
.g-redes{display:flex;gap:10px;margin-left:auto}
.g-pie a.g-red{display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid rgba(49,52,44,.6);border-radius:50%;color:var(--tinta);
  transition:background var(--t-rapida) var(--ease),border-color var(--t-rapida) var(--ease),color var(--t-rapida) var(--ease)}
.g-pie a.g-red:hover{background:var(--tinta);border-color:var(--tinta);color:var(--crema)}
.g-red svg{display:block;width:20px;height:20px}

/* ── formulario del cuaderno ─────────────────────────────────────────────── */
/* .campo viene de olea-web.css (columna, etiqueta en versalita, línea inferior).
   Aquí solo se le cambia la letra: en el cuaderno se escribe en Cormorant. */
.campo{margin:0 0 18px}
.campo input,.campo textarea,.campo select{font-family:var(--serif);font-size:19px;line-height:1.35}
.campo textarea{min-height:112px}
.ayuda{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:var(--piedra);margin:6px 0 0}
/* Sin partir, solo el contador (el segundo span). Una ayuda sola —fotos,
   WhatsApp— es :first-child y :last-child a la vez y tiene que poder partirse:
   en francés no cabe en una línea a 390 px. */
.ayuda span:last-child:not(:first-child){white-space:nowrap;font-variant-numeric:tabular-nums}
.dos{display:grid;grid-template-columns:2fr 1fr;gap:18px}

.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fotos .f{position:relative;aspect-ratio:1;overflow:hidden;background:var(--g-hueco)}
.fotos .f img{width:100%;height:100%;object-fit:cover}
.fotos .mas{display:grid;place-items:center;text-align:center;width:100%;
  border:1px dashed var(--linea);background:transparent;color:var(--piedra);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.3}
.fotos .mas:hover{border-color:var(--oro);color:var(--tinta-2)}
.fotos .mas i{font-style:normal;font-size:22px;color:var(--oro);display:block;margin-bottom:4px}
.fotos .quitar{position:absolute;top:5px;right:5px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:rgba(49,52,44,.74);color:var(--crema);font-size:15px;line-height:1}
.fotos .quitar:hover{background:var(--tinta)}

.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  font-size:13.5px;color:var(--tinta-2);line-height:1.45;margin:4px 0 18px}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--oliva);flex:0 0 auto}
.g-nota{margin:14px 0 0;font-size:12.5px;color:var(--piedra)}

/* ── el cuaderno (muro) ──────────────────────────────────────────────────── */
.g-cuenta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0 0 18px}
.firma{font-family:var(--script);font-size:34px;line-height:1;color:var(--tinta)}
.meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--piedra);white-space:nowrap}
.entrada{padding:22px 0 24px;border-top:1px solid var(--arena-2)}
.entrada:first-of-type{border-top:0;padding-top:4px}
.entrada__cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-bottom:8px}
/* un «desde» largo (hasta 40) no cabe junto a la firma a 390 px: baja y se parte */
.entrada__cab .meta{white-space:normal}
.entrada .tx{font-family:var(--serif);font-size:19px;line-height:1.4;margin:0;color:var(--tinta)}
/* Las fotos, como copias reveladas sobre la mesa: papel, sombra y una pizca de
   inclinación que alterna. */
.copia{margin:16px 6px 6px;width:88%;background:var(--papel);padding:8px 8px 10px;
  box-shadow:var(--g-sombra-copia);transform:rotate(-1.4deg)}
.copia.der{transform:rotate(1.1deg);margin-left:auto}
.copia img{width:100%;aspect-ratio:4/3;object-fit:cover}
.copia .pie-foto{margin:8px 2px 0;font-size:9.5px;gap:10px}
.copia .pie-foto::before{flex-basis:20px}
.casa{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:16px;
  padding:12px 14px;background:var(--papel);border-left:2px solid var(--oro)}
.casa img{width:26px;height:26px;border-radius:50%;background:var(--crema)}
.casa p{margin:0;font-size:14px;color:var(--tinta-2);line-height:1.45}
.casa small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-texto);margin-bottom:3px}
.g-vacio{padding:28px 0 8px;text-align:center}
.g-vacio .firma{font-size:30px;color:var(--oro-texto)}

/* ── pantallas heredadas (experiencia · sugerencia · celebración · club) ──── */
.back{display:inline-flex;align-items:center;min-height:44px;margin:0 0 8px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--piedra)}
.back:hover{color:var(--tinta)}
.prog{display:flex;gap:6px;margin:0 0 20px}
.prog i{flex:1;height:1px;background:var(--arena-2);transition:background var(--t-media) var(--ease)}
.prog i.on{background:var(--oro)}
.sscript{font-family:var(--script);font-size:30px;line-height:1;color:var(--oro-texto);margin:0 0 4px}
.stitle{font-family:var(--serif);font-weight:500;font-size:clamp(26px,7.2vw,34px);line-height:1.06;
  letter-spacing:-.01em;margin:0 0 8px;text-wrap:balance}
.ssub{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.3;color:var(--tinta-2);margin:0 0 18px}

.scale{display:grid;gap:8px;margin:0 0 10px}
.mood{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;width:100%;text-align:left;
  min-height:58px;padding:12px 16px;background:var(--papel);border:1px solid var(--arena-2);
  transition:border-color var(--t-rapida) var(--ease)}
.mood:hover{border-color:var(--oro)}
.mood .e{font-size:22px;line-height:1}
.mood .l{font-family:var(--serif);font-size:18px;line-height:1.2}
.mood.sel{border-color:var(--oro);box-shadow:inset 0 0 0 1px var(--oro)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chips.grid{display:grid;grid-template-columns:1fr 1fr}
.chip,.radio{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:46px;padding:0 14px;background:transparent;border:1px solid var(--linea);
  font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2);
  transition:background var(--t-rapida) var(--ease),color var(--t-rapida) var(--ease),border-color var(--t-rapida) var(--ease)}
.chip:hover,.radio:hover{border-color:var(--oro)}
.chip.on,.radio.on{background:var(--tinta);border-color:var(--tinta);color:var(--crema)}
/* Acuse de recibo del toque (lo pide pop() en guest.js). */
@keyframes g-pick{0%{transform:scale(1)}45%{transform:scale(.96)}100%{transform:scale(1)}}
.pick{animation:g-pick .22s var(--ease)}
.radio-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 18px}
.helper{font-size:12.5px;color:var(--piedra);margin:0 0 16px}
.hint{font-size:12.5px;color:var(--piedra);margin:-10px 0 16px}

.adapt{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:0 0 18px;
  padding:12px 14px;background:var(--papel);border-left:2px solid var(--oro);
  font-size:14px;line-height:1.45;color:var(--tinta-2)}
.adapt b{font-weight:400;color:var(--tinta)}
.adapt .enlace{font-size:11px;margin-top:8px}

.reveal{display:none}
.reveal.show{display:block}
.prep{background:var(--papel);border:1px solid var(--arena-2);padding:14px 16px;margin:6px 0 20px}
.prep b{display:block;font-family:var(--serif);font-size:19px;font-weight:500}
.prep small{display:block;font-size:13px;color:var(--piedra);margin-top:2px}
.prep .chips{margin:14px 0 0}

.clubintro{margin-bottom:20px}
.benefits{display:grid;margin:0 0 4px}
.benefit{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--arena-2)}
.benefit b{font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.2}
.benefit small{font-size:13px;color:var(--piedra);line-height:1.45}
.divisor{display:flex;align-items:center;gap:14px;margin:24px 0 18px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--piedra)}
.divisor::before,.divisor::after{content:"";flex:1;height:1px;background:var(--arena-2)}
.privacy{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  font-size:13px;line-height:1.45;color:var(--tinta-2);margin:6px 0 18px}
.privacy input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--oliva)}

.thanks{padding:18px 0 6px}
.thanks .sscript{font-size:34px}
.thanks p{color:var(--tinta-2);font-size:15.5px}

/* ── botones y avisos ────────────────────────────────────────────────────── */
.cta{width:100%;margin-top:8px}
/* Sin la casilla de consentimiento el botón está apagado: el cursor tiene que
   decir «falta algo», no «espere» (olea-web.css pone `progress`). */
.cta:disabled{cursor:not-allowed}
.btn--fantasma{border-color:var(--arena-2);color:var(--piedra)}
.btn--fantasma:hover{background:transparent;border-color:var(--tinta);color:var(--tinta)}
/* El aviso de envío fallido va JUNTO AL BOTÓN, no en una alerta del navegador:
   el huésped tiene que verlo sin salir del formulario. */
.envio-err{margin:14px 0 0;padding-left:12px;border-left:2px solid var(--g-error);
  color:var(--g-error);font-size:14px;line-height:1.45}
.campo--error input,.campo--error textarea{border-bottom-color:var(--g-error)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Un input dentro de .campo recibe width:100%, padding y borde de olea-web.css (.campo input, más
   específico que .sr-only): recortado no se ve, pero su caja de 390 px ensanchaba la pantalla
   «escribir» a 409 px en móvil. Aquí vuelve a medir 1 px. */
.campo input.sr-only{width:1px;height:1px;padding:0;border:0}
.g-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0}

/* ── pantalla ancha: el guest sigue siendo una columna ───────────────────── */
@media (min-width:680px){
  .g-hero{margin-inline:20px}
  .g-int{padding:26px 20px 8px}
}