/* Inicio · Casa de Campo · "un día en la casa" */

/* La intro solo existe si el script del <head> la habilitó */
.intro { display: none; }
.con-intro .intro { display: grid; }
.con-intro body { overflow: hidden; }

/* ---------- La luz del día ----------
   El fondo pasa de la mañana a la tarde y al atardecer según la sección que está en el centro. */
.dia { --fondo: #f4eee3; background: var(--fondo); transition: background-color 1.2s ease; }
.dia[data-ahora='manana'] { --fondo: #f4eee3; }
.dia[data-ahora='mediodia'] { --fondo: #f3e8cd; }
.dia[data-ahora='tarde'] { --fondo: #f0dfc0; }
.dia[data-ahora='atardecer'] { --fondo: #f1d6bd; }

/* ---------- Recorrido ----------
   Sin JS o con "reducir movimiento": una portada quieta con la foto y el título.
   Con JS (.animado): la sección mide varias pantallas y la escena queda fija (sticky, no pin). */
.recorrido { position: relative; background: var(--tinta); color: var(--papel); }
.recorrido__escena { position: relative; height: calc(var(--vh) * 100 - 64px); min-height: 520px; overflow: hidden; }
.recorrido.animado { height: calc(var(--vh) * 430); }
.recorrido.animado .recorrido__escena { position: sticky; top: 64px; }

.recorrido__ventana { position: absolute; inset: 0; }
.recorrido__ventana img, .recorrido__ventana canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.recorrido__ventana canvas { opacity: 0; transition: opacity .4s; }
.recorrido.con-canvas canvas { opacity: 1; }
.recorrido__ventana::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(31, 22, 15, .1) 0%, rgba(31, 22, 15, 0) 30%, rgba(31, 22, 15, .25) 55%, rgba(31, 22, 15, .82) 100%);
}

.recorrido__textos { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(66px + env(safe-area-inset-bottom)); display: grid; }
.paso { grid-area: 1 / 1; align-self: end; font-family: var(--serif); font-size: clamp(2rem, 8.4vw, 3.25rem); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.paso--titulo .antetitulo { color: var(--ocre); margin-bottom: 18px; }
.recorrido__titulo { font-size: clamp(2.75rem, 12vw, 5.5rem); line-height: .98; }
.recorrido .paso em { background-image: var(--manta); background-repeat: no-repeat; background-position: left bottom; background-size: 100% .1em; padding-bottom: .04em; }
.recorrido__guia { font-family: var(--sans); font-size: .9375rem; margin-top: 18px; opacity: .85; display: flex; gap: 8px; align-items: center; }
.recorrido__guia span { display: inline-block; animation: bajar 1.8s ease-in-out infinite; }
@keyframes bajar { 50% { transform: translateY(5px); } }

/* Los pasos solo se alternan cuando hay recorrido; si no, se ve el título solo */
.paso:not(.paso--titulo) { display: none; }
.recorrido.animado .paso:not(.paso--titulo) { display: block; }
.recorrido.animado .paso { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--curva), transform .6s var(--curva); pointer-events: none; }
.recorrido.animado .paso.activo { opacity: 1; transform: none; pointer-events: auto; }
.recorrido.animado .paso em { background-size: 0% .1em; transition: background-size .9s var(--curva) .2s; }
.recorrido.animado .paso.activo em { background-size: 100% .1em; }

.recorrido__barra { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--manta); transform-origin: left; transform: scaleX(var(--p, 0)); }
.recorrido:not(.animado) .recorrido__barra { display: none; }

@media (min-width: 960px) {
  .recorrido { background: transparent; color: var(--tinta); }
  .recorrido__escena { height: calc(var(--vh) * 100 - 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 5vw, 80px); padding-inline: max(var(--gutter), calc((100vw - var(--ancho)) / 2)); }
  /* La toma se ve a través de una ventana de madera con arco */
  .recorrido__ventana {
    position: relative; inset: auto; grid-column: 2; grid-row: 1;
    height: min(calc(var(--vh) * 100 - 150px), 760px); aspect-ratio: 4 / 5;
    border-radius: 999px 999px 4px 4px / 46% 46% 4px 4px; overflow: hidden;
    box-shadow: 0 0 0 10px #6b4a32, 0 0 0 12px #4d3423, 0 40px 80px -30px rgba(43, 32, 24, .6);
  }
  .recorrido__ventana::after { background: linear-gradient(180deg, transparent 70%, rgba(31, 22, 15, .25)); }
  .recorrido__textos { position: relative; inset: auto; grid-column: 1; grid-row: 1; }
  .paso { font-size: clamp(2.5rem, 4.2vw, 4rem); }
  .paso--titulo .antetitulo { color: var(--ladrillo); }
  .recorrido__titulo { font-size: clamp(3.5rem, 6.4vw, 6.25rem); }
  .recorrido__barra { left: max(var(--gutter), calc((100vw - var(--ancho)) / 2)); width: 180px; bottom: 40px; height: 5px; }
}

/* ---------- Mañana: polaroids sobre un camino de mesa tejido ---------- */
.desayuno { overflow: hidden; }
.desayuno__grilla { display: grid; gap: 48px; align-items: center; }
.desayuno__texto { display: grid; gap: 18px; }
.mesa { position: relative; height: clamp(380px, 110vw, 520px); }
.mesa__camino { position: absolute; left: -4%; right: -40%; top: 38%; height: 30%; background: var(--manta); rotate: -8deg; opacity: .9; box-shadow: 0 10px 30px -16px rgba(43, 32, 24, .5); }
.js .mesa__camino { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--curva); }
.js .mesa.puesta .mesa__camino { transform: none; }
.polaroid { position: absolute; width: 56%; background: var(--papel); padding: 10px 10px 34px; box-shadow: 0 2px 4px rgba(43, 32, 24, .08), 0 18px 34px -14px rgba(43, 32, 24, .45); border-radius: 2px; transition: transform .5s var(--curva), box-shadow .5s var(--curva); }
.polaroid img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.polaroid::before { content: ''; position: absolute; top: -10px; left: 50%; width: 72px; height: 22px; margin-left: -36px; background: rgba(212, 161, 58, .55); transform: rotate(-3deg); }
.polaroid--1 { left: 0; top: 4%; rotate: -6deg; }
.polaroid--2 { right: 0; top: 0; rotate: 5deg; z-index: 2; }
.polaroid--3 { left: 22%; bottom: 0; rotate: -1.5deg; z-index: 3; }
/* Caen sobre la mesa, una después de otra */
.js .polaroid[data-reveal] { transform: translateY(-60px) rotate(8deg) scale(1.08); transition: opacity .5s ease, transform .9s cubic-bezier(.25, 1.35, .45, 1); }
.js .polaroid[data-reveal].visto { transform: none; }
@media (hover: hover) { .polaroid:hover { transform: translateY(-6px) scale(1.03) !important; z-index: 4; box-shadow: 0 30px 50px -18px rgba(43, 32, 24, .55); } }
@media (min-width: 900px) {
  .desayuno__grilla { grid-template-columns: 1fr 1.1fr; gap: 64px; }
  .mesa { height: 560px; }
  .polaroid { width: 46%; }
}

/* ---------- Mediodía: palabras gigantes ---------- */
.palabras { position: relative; background: var(--verde-osc); color: var(--papel); }
.palabras__escena { position: relative; min-height: calc(var(--vh) * 100 - 64px); overflow: hidden; display: grid; align-items: end; }
.palabras.animado { height: calc(var(--vh) * 360); }
.palabras.animado .palabras__escena { position: sticky; top: 64px; height: calc(var(--vh) * 100 - 64px); }
.palabras__ventana { position: absolute; inset: 0; }
.palabras__ventana::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 30, 18, .15), rgba(20, 30, 18, .2) 40%, rgba(20, 30, 18, .88)); }
.palabras__medio { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1s ease, transform 6s cubic-bezier(.2, .6, .2, 1); }
.palabras__medio.activo { opacity: 1; transform: scale(1); }
.palabras__texto { position: relative; z-index: 1; padding: 0 var(--gutter) calc(96px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }
.palabras .antetitulo { color: var(--ocre); }
.palabras__frase { font-family: var(--serif); line-height: .92; display: grid; }
.palabras__fijo { font-size: clamp(1.75rem, 6vw, 3rem); font-style: italic; opacity: .9; }
.palabras__rueda { display: grid; font-size: clamp(3.4rem, 17vw, 11rem); letter-spacing: -.03em; }
.palabra { grid-area: 1 / 1; white-space: nowrap; }
.palabras__pie { font-size: 1rem; opacity: .9; min-height: 1.6em; }
.palabras__puntos { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 6px; }
.palabras__puntos li { width: 28px; height: 4px; background: rgba(251, 248, 242, .3); transition: background .4s; }
.palabras__puntos li.activo { background: var(--ocre); }
/* Sin animación: las cuatro palabras, una debajo de otra */
.palabras:not(.animado) .palabra:not(:first-child) { font-size: .45em; }
.palabras:not(.animado) .palabras__rueda { gap: .1em; }
.palabras:not(.animado) .palabra { grid-area: auto; }
.palabras:not(.animado) .palabras__puntos, .palabras:not(.animado) .palabras__pie { display: none; }
/* Con animación: cada letra sube a su lugar */
.palabras.animado .letra { display: inline-block; transform: translateY(105%) rotate(6deg); opacity: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .4s; transition-delay: calc(var(--i) * 28ms); }
.palabras.animado .palabra { overflow: hidden; padding-bottom: .08em; }
.palabras.animado .palabra.activa .letra { transform: none; opacity: 1; }
.palabras.animado .palabra.sale .letra { transform: translateY(-105%) rotate(-4deg); opacity: 0; transition-delay: calc(var(--i) * 12ms); }
@media (min-width: 960px) {
  .palabras { background: transparent; color: var(--tinta); }
  .palabras__escena { align-items: center; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 72px); padding-inline: max(var(--gutter), calc((100vw - var(--ancho)) / 2)); }
  .palabras__ventana {
    position: relative; inset: auto; grid-column: 2; grid-row: 1; justify-self: end;
    height: min(calc(var(--vh) * 100 - 170px), 700px); aspect-ratio: 9 / 14;
    border-radius: 999px 999px 4px 4px / 40% 40% 4px 4px; overflow: hidden;
    box-shadow: 0 0 0 10px #6b4a32, 0 0 0 12px #4d3423, 0 40px 80px -30px rgba(43, 32, 24, .6);
  }
  .palabras__ventana::after { background: none; }
  .palabras__texto { grid-column: 1; grid-row: 1; padding: 0; }
  .palabras .antetitulo { color: var(--ladrillo); }
  .palabras__rueda { font-size: clamp(5rem, 10.5vw, 10rem); color: var(--rojo); }
  .palabras__pie { color: var(--tinta-2); }
  .palabras__puntos li { background: var(--linea); }
  .palabras__puntos li.activo { background: var(--rojo); }
}

/* ---------- Tarde: los lugares de la casa ---------- */
.casa { position: relative; }
.lugares { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--tinta); }
.lugares li { border-bottom: 1px solid var(--linea); }
.lugar {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: 'mini nombre ir' 'mini dato ir';
  column-gap: 16px; align-items: center; padding: 14px 0; text-decoration: none;
}
.lugar__mini { grid-area: mini; width: 72px; height: 72px; object-fit: cover; border-radius: 2px; }
.lugar__nombre { grid-area: nombre; font-family: var(--serif); font-size: clamp(1.5rem, 5.4vw, 3.5rem); line-height: 1.05; transition: transform .5s var(--curva), color .3s; }
.lugar__dato { grid-area: dato; font-size: .875rem; color: var(--tinta-2); }
.lugar__ir { grid-area: ir; font-size: 1.5rem; color: var(--rojo); transition: transform .4s var(--curva); }
.lugar::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--manta); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--curva); }
@media (hover: hover) {
  .lugar:hover .lugar__nombre { transform: translateX(14px); color: var(--rojo); }
  .lugar:hover .lugar__ir { transform: translateX(6px); }
  .lugar:hover::before { transform: none; }
}
@media (min-width: 960px) and (hover: hover) {
  .lugar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'nombre dato ir'; column-gap: 32px; padding: 22px 0; }
  .lugar__mini { display: none; }
  .lugares { cursor: none; }
}
/* La foto que sigue al cursor, como una copia en papel que se balancea */
.seguidor { position: fixed; left: 0; top: 0; z-index: 20; width: 240px; height: 300px; object-fit: cover; pointer-events: none; border: 8px solid var(--papel); border-bottom-width: 30px; box-shadow: 0 30px 50px -20px rgba(43, 32, 24, .6); opacity: 0; transition: opacity .3s; will-change: transform; }
.seguidor.visible { opacity: 1; }
@media not ((min-width: 960px) and (hover: hover)) { .seguidor { display: none; } }

/* ---------- Atardecer: el libro de visitas ---------- */
.libro { position: relative; display: grid; background: #e9dcc4; padding: 10px; border-radius: 6px; box-shadow: 0 2px 0 #c9b28d, 0 30px 60px -30px rgba(43, 32, 24, .7); }
.libro__pagina { position: relative; background: #fbf6ea var(--grano-suave); padding: clamp(24px, 4vw, 44px); min-height: 100%; }
/* Renglones de cuaderno */
.libro__pagina--der { background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(80, 110, 150, .16) 33px 34px) 0 70px / 100% calc(100% - 140px) no-repeat, var(--grano-suave), #fbf6ea; }
.libro__pagina--izq { display: grid; gap: 10px; align-content: start; border-bottom: 1px dashed rgba(43, 32, 24, .25); }
.libro__rotulo { font-family: var(--serif); font-style: italic; font-size: 1.5rem; }
.libro__nota { display: flex; align-items: baseline; gap: 12px; }
.libro__numero { font-family: var(--serif); font-size: clamp(4rem, 12vw, 6.5rem); line-height: .9; color: var(--rojo); }
.libro__estrellas { color: var(--ocre); font-size: 1.375rem; letter-spacing: .1em; }
.libro__total { font-weight: 600; }
.libro__total a { text-decoration: underline; text-decoration-color: rgba(43, 32, 24, .3); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.libro__total a:hover { text-decoration-color: currentColor; }
/* La invitación a escribir: el último renglón del libro queda para el que llega */
.libro__firma { display: grid; justify-items: start; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px dashed rgba(43, 32, 24, .25); }
.libro__firma p { font-family: var(--serif); font-style: italic; font-size: 1.125rem; color: #2c3a5a; }
.libro__pluma { display: inline-block; font-size: 1.1em; transition: transform .3s var(--curva); }
.libro__firma .boton:hover .libro__pluma { transform: rotate(-14deg) translateY(-2px); }
.libro__temas { color: var(--tinta-2); max-width: 30ch; }
.libro__temas strong { color: var(--tinta); }
.libro__aclara { font-size: .8125rem; color: var(--tinta-2); margin-top: auto; padding-top: 12px; }
.hojas { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.hoja__fecha { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ladrillo); margin-bottom: 10px; }
.hoja blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.36; color: #2c3a5a; }
.libro__controles { display: none; }
/* Con JS: una hoja por vez, que se da vuelta sobre el lomo */
.libro.animado .hojas { display: grid; perspective: 1600px; min-height: 260px; }
.libro.animado .hoja { grid-area: 1 / 1; transform-origin: left center; backface-visibility: hidden; transition: transform .8s cubic-bezier(.5, .1, .2, 1), opacity .8s; }
.libro.animado .hoja:not(.actual) { pointer-events: none; }
.libro.animado .hoja.pasada { transform: rotateY(-100deg); opacity: 0; }
.libro.animado .hoja.siguiente { opacity: 0; transition: opacity .5s .3s; }
.libro.animado .libro__controles { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px dashed rgba(43, 32, 24, .25); }
.libro__boton { min-height: 44px; min-width: 44px; padding: 8px 14px; border: 1.5px solid var(--tinta); border-radius: 3px; background: transparent; cursor: pointer; font-weight: 600; transition: background .2s, color .2s; }
.libro__boton:hover { background: var(--tinta); color: var(--papel); }
.libro__boton:disabled { opacity: .35; cursor: default; background: transparent; color: inherit; }
.libro__boton--pasar { margin-left: auto; }
.libro__cuenta { font-size: .875rem; color: var(--tinta-2); }
@media (min-width: 860px) {
  .libro { grid-template-columns: .85fr 1.15fr; padding: 12px; }
  .libro__pagina--izq { border-bottom: 0; border-right: 1px solid rgba(43, 32, 24, .14); box-shadow: inset -24px 0 30px -24px rgba(43, 32, 24, .35); }
  .libro__pagina--der { box-shadow: inset 24px 0 30px -24px rgba(43, 32, 24, .35); }
  .libro.animado .hojas { min-height: 300px; }
}

/* ---------- Noche ---------- */
.noche { --pad-arriba: clamp(72px, 10vw, 120px); position: relative; background: var(--noche); color: var(--cal); padding-bottom: clamp(72px, 10vw, 128px); overflow: hidden; }
.noche__estrellas { position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 26%, #f6e7c1 50%, transparent 51%), radial-gradient(1px 1px at 58% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 73% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 86% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 31%, #f6e7c1 50%, transparent 51%), radial-gradient(1.5px 1.5px at 6% 42%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 48%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 66% 44%, #fff 50%, transparent 51%);
  animation: titilar 5s ease-in-out infinite alternate; }
@keyframes titilar { to { opacity: .45; } }
.noche__grilla { position: relative; display: grid; gap: 40px; align-items: center; }
.noche__ventana { margin: 0; border-radius: 999px 999px 4px 4px / 50% 50% 4px 4px; overflow: hidden; box-shadow: 0 0 0 8px #4d3423, 0 0 60px -10px rgba(212, 161, 58, .45); max-width: 520px; }
.noche__ventana img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.noche__texto { display: grid; gap: 18px; }
.noche .antetitulo { color: var(--ocre); }
.noche .bajada { color: rgba(244, 238, 227, .85); }
.noche__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.noche__laguna { color: var(--cal); font-weight: 600; text-underline-offset: 4px; }
@media (min-width: 760px) { .noche__grilla { grid-template-columns: .8fr 1.2fr; gap: 72px; } }

@media (prefers-reduced-motion: reduce) {
  .recorrido__guia span, .noche__estrellas { animation: none; }
  .dia { transition: none; }
}