/* ============================================================
   ESTILOS — BITÁCORA DE CAMINOS
   ------------------------------------------------------------
   Índice:
   1.  Variables (colores, tipografías, medidas)
   2.  Base y utilidades
   3.  Botones y enlaces
   4.  Header y menú
   5.  Hero
   6.  Este es un lugar para...
   7.  Historia destacada
   8.  Línea de cartas (sobres)
   9.  Tres áreas
   10. Últimas historias
   11. Newsletter
   12. Sobre mí
   13. Footer
   14. Ventana modal
   15. Responsive (tablet y mobile)
   ============================================================ */


/* ------------------------------------------------------------
   1. VARIABLES — cambiando estos valores cambia toda la web
   ------------------------------------------------------------ */
:root{
  /* Colores */
  --crema:        #F7F2E8;   /* fondo principal */
  --crema-suave:  #FBF8F2;   /* fondo alterno, más claro */
  --marino:       #16273F;   /* azul marino profundo */
  --marino-claro: #22374F;
  --gris-azul:    #6B7C90;   /* textos secundarios */
  --negro-suave:  #23262B;   /* texto de lectura */
  --dorado:       #C2A16A;   /* detalles y botones */
  --dorado-viejo: #9E8149;   /* dorado envejecido, para líneas finas */
  --beige:        #E4DAC7;   /* líneas y bordes */
  --petroleo:     #14202E;   /* azul fiordo muy oscuro */
  --carbon:       #1A1512;   /* fondo de Las cartas del cuervo */
  --marron:       #241B14;   /* marrón profundo, madera */
  --marfil:       #F4EFE4;   /* papel antiguo, fondo del universo */

  /* Textura de papel: ruido muy suave, generado por CSS (sin archivos) */
  --papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");

  /* Tipografías */
  --serif:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --serif-lectura: "EB Garamond", "Cormorant Garamond", Georgia, serif;  /* cuerpo de la carta */
  --sans:   "Jost", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --script: "Pinyon Script", "Cormorant Garamond", cursive;      /* firmas */
  /* LETRA MANUSCRITA de las cartas de otra persona.
     Probá las cuatro cambiando sólo el primer nombre de la lista:
       "Petit Formal Script"  caligrafía formal, de época, elegante
       "La Belle Aurore"      pluma real, irregular — la que más parece escrita a mano
       "Italianno"            muy fluida y fina, bonita pero cuesta leerla
       "Caveat"               claramente manuscrita, pero se siente moderna
     Cuando elijas una, borrá las otras del <link> de fuentes en index.html
     para que la página no cargue lo que no usa. */
  --manuscrita: "La Belle Aurore", "Petit Formal Script", cursive;

  /* LETRA DE ELLA — la fotógrafa. Tiene que verse distinta a la de Kristine:
     más práctica y apurada, de alguien que anota al dorso de las placas.
     Alternativas cargadas: "Caveat", "La Belle Aurore", "Petit Formal Script" */
  --manuscrita-ella: "Caveat", "La Belle Aurore", cursive;

  /* Medidas */
  --ancho: 1180px;           /* ancho máximo del contenido */
  --alto-header: 87px;       /* alto del header (el hero se mete debajo) */
  --aire: 6.5rem;            /* espacio vertical entre secciones */
  --radio: 2px;
}


/* ------------------------------------------------------------
   2. BASE Y UTILIDADES
   ------------------------------------------------------------ */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; scroll-padding-top: 92px; }

body{
  margin: 0;
  background: var(--crema);
  color: var(--negro-suave);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

p{ margin: 0 0 1rem; }

a{ color: inherit; }

.contenedor{
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 32px;
}

/* Títulos */
h1, h2, h3, h4{
  font-family: var(--serif);
  font-weight: 400;
  color: var(--marino);
  margin: 0 0 .6em;
  line-height: 1.2;
  letter-spacing: .01em;
}

.titulo-seccion{ font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.32; }

.titulo-centrado{
  text-align: center;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .5rem;
}

/* Variante sin versalitas, para títulos largos */
.titulo-centrado--suave{
  text-transform: none;
  letter-spacing: .005em;
  font-size: clamp(1.7rem, 2.9vw, 2.4rem);
  max-width: 30ch; margin-left: auto; margin-right: auto;
  text-wrap: balance;
}

/* Etiqueta pequeña tipo "HISTORIA DESTACADA" */
.etiqueta{
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris-azul);
  margin-bottom: .9rem;
}

/* Variante de la etiqueta para fondos oscuros */
.etiqueta--clara{ color: rgba(247,242,232,.72); }

/* Línea fina decorativa */
.filete{
  display: block;
  width: 58px; height: 1px;
  background: var(--dorado);
  margin: 1.6rem 0;
}
.filete--centrado{ margin: 1.2rem auto 3rem; }

/* Filete ornamental: línea fina con un pequeño rombo al centro */
.filete--adorno{
  position: relative;
  width: 92px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dorado-viejo) 18%, var(--dorado-viejo) 82%, transparent);
  opacity: .85;
}
.filete--adorno::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px;
  background: var(--dorado);
  transform: translate(-50%, -50%) rotate(45deg);
}
.filete--adorno.filete--centrado{ margin-left: auto; margin-right: auto; }

/* Frase manuscrita */
/* (la frase manuscrita del footer usa .pie__frase) */


/* ------------------------------------------------------------
   3. BOTONES Y ENLACES
   ------------------------------------------------------------ */
.boton{
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}

.boton--marino{ background: var(--marino); color: var(--crema); }
.boton--marino:hover{ background: var(--marino-claro); }

.boton--dorado{ background: var(--dorado); color: #241C0C; }
.boton--dorado:hover{ background: #D3B47F; }

/* Botón claro: para usar sobre fondos oscuros (ej. la newsletter) */
.boton--claro{ background: var(--crema); color: var(--marino); }
.boton--claro:hover{ background: #fff; }

/* Botón de contorno: para las tarjetas del universo, sobre fondo claro */
.boton--contorno{ background: transparent; color: var(--marino); border-color: var(--beige); }
.boton--contorno:hover{ border-color: var(--dorado); color: var(--dorado-viejo); }

/* Botón de línea: discreto, para el segundo acceso del hero */
.boton--linea{ background: transparent; color: var(--crema); border-color: rgba(247,242,232,.5); }
.boton--linea:hover{ border-color: var(--dorado); color: var(--dorado); }

/* Enlace con flecha, tipo EXPLORAR → */
.enlace-flecha{
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--marino);
  border-bottom: 1px solid var(--beige);
  padding-bottom: 3px;
  transition: border-color .25s ease;
}
.enlace-flecha::after{ content: " →"; }
.enlace-flecha:hover{ border-color: var(--dorado); }


/* ------------------------------------------------------------
   4. HEADER Y MENÚ
   ------------------------------------------------------------ */
.header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,242,232,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--beige);
  transition: background .35s ease, border-color .35s ease;
}

/* Al principio el header flota sobre la fotografía del hero.
   El JS le quita la clase "header--sobre-hero" apenas se baja un poco. */
.header--sobre-hero{
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.header--sobre-hero .marca__nombre,
.header--sobre-hero .menu a{ color: var(--crema); }
.header--sobre-hero .marca__pluma{ color: rgba(247,242,232,.85); }
.header--sobre-hero .marca__lema,
.header--sobre-hero .idiomas,
.header--sobre-hero .idiomas button{ color: rgba(247,242,232,.7); }
.header--sobre-hero .idiomas button.activo{ color: var(--crema); }
.header--sobre-hero .hamburguesa span{ background: var(--crema); }

.header__interior{
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  min-height: 86px;
}

.marca{ display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca__pluma{ width: 30px; height: 30px; color: var(--marino); flex: none; }
.marca__texto{ display: block; }
.marca__nombre{
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--marino);
}
.marca__lema{
  display: block;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-azul);
  margin-top: 3px;
}

.menu{ display: flex; align-items: center; gap: 26px; }
.menu a{
  font-size: .92rem;
  text-decoration: none;
  color: var(--negro-suave);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.menu a:hover{ border-color: var(--dorado); }

.idiomas{ display: flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--gris-azul); }
.idiomas button{
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .82rem; letter-spacing: .08em;
  color: var(--gris-azul); padding: 2px;
}
.idiomas button.activo{ color: var(--marino); border-bottom: 1px solid var(--dorado); }

/* Botón hamburguesa (sólo se ve en mobile) */
.hamburguesa{
  display: none;
  width: 42px; height: 42px;
  background: none; border: 0; cursor: pointer;
  padding: 10px 8px;
}
.hamburguesa span{
  display: block; height: 1px; background: var(--marino);
  margin: 6px 0; transition: transform .3s ease, opacity .3s ease;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }


/* ------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------ */
.hero{
  position: relative;
  /* el hero pasa por debajo del header, que arranca transparente */
  margin-top: calc(-1 * var(--alto-header));
  min-height: 100svh;          /* la fotografía ocupa el primer viewport */
  max-height: 1000px;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--petroleo);
}

/* La foto. Para cambiarla: reemplazá imagenes/hero.jpg */
.hero__imagen{
  position: absolute; inset: 0;
  background: url("../imagenes/hero.jpg") center center / cover no-repeat;
}

/* Velo oscuro para que el texto se lea siempre.
   El degradado es más fuerte a la izquierda, donde va el texto,
   y deja respirar el paisaje hacia la derecha. */
.hero__velo{
  position: absolute; inset: 0;
  background:
    /* oscurece la izquierda para que el texto se lea, y deja
       respirar la fotografía hacia el centro y la derecha */
    linear-gradient(96deg, rgba(12,20,30,.90) 0%, rgba(12,20,30,.76) 30%, rgba(12,20,30,.34) 58%, rgba(12,20,30,.06) 82%, rgba(12,20,30,0) 100%),
    /* apenas de sombra arriba (para el header) y abajo (para la transición) */
    linear-gradient(180deg, rgba(10,16,24,.42) 0%, rgba(10,16,24,0) 22%, rgba(10,16,24,0) 62%, rgba(20,14,10,.55) 100%);
}

.hero__contenido{ position: relative; padding-top: 150px; padding-bottom: 130px; }

.hero .etiqueta{ margin-bottom: .5rem; }
.hero .filete--adorno{ margin: 0 0 1.8rem; }

.hero__titulo{
  color: #FCFAF5;
  font-size: clamp(2.3rem, 4.6vw, 3.8rem);
  line-height: 1.12;
  max-width: 17ch;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(6,10,16,.45);
  margin-bottom: 1.4rem;
}

/* Bajada: las áreas del proyecto, en una sola línea de lectura */
.hero__bajada{
  color: rgba(250,246,239,.94);
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.6vw, 1.4rem);
  line-height: 1.62;
  max-width: 42ch;
  margin-bottom: 1.4rem;
  text-shadow: 0 1px 18px rgba(6,10,16,.4);
}

/* Frase secundaria, en cursiva editorial */
.hero__frase{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 1.85vw, 1.5rem);
  line-height: 1.55;
  color: rgba(233,222,201,.9);
  max-width: 33ch;
  margin: 0 0 2.4rem;
  text-shadow: 0 1px 18px rgba(6,10,16,.4);
}

/* Los dos accesos */
.hero__acciones{ display: flex; flex-wrap: wrap; gap: 14px; }

.hero__flecha{
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  color: rgba(247,242,232,.6);
  width: 26px;
  animation: respirar 3.4s ease-in-out infinite;
}
@keyframes respirar{
  0%,100%{ transform: translate(-50%,0); opacity: .55; }
  50%    { transform: translate(-50%,7px); opacity: .9; }
}
.hero__flecha svg{ width: 100%; }

/* Formularios de email */
.formulario{ display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.formulario input{
  flex: 1 1 260px;
  max-width: 340px;
  font-family: var(--sans); font-size: .92rem; font-weight: 300;
  padding: 14px 16px;
  border: 1px solid rgba(247,242,232,.4);
  border-radius: var(--radio);
  background: rgba(255,255,255,.06);
  color: var(--crema);
}
.formulario input::placeholder{ color: rgba(247,242,232,.55); }
.formulario input:focus{ outline: 1px solid var(--dorado); outline-offset: 0; }
.formulario__mensaje{
  flex: 1 0 100%;
  margin: 4px 0 0; min-height: 1.2em;
  font-size: .85rem; color: var(--dorado);
}


/* ------------------------------------------------------------
   6. HISTORIA DESTACADA
   ------------------------------------------------------------ */
/* Sección oscura: el mismo azul del hero, para que las dos
   se sientan parte del mismo mundo. */
.destacada{
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 100% at 78% 50%, #2B211A 0%, var(--marron) 42%, var(--carbon) 100%);
  padding: calc(var(--aire) + 1rem) 0;
}
/* Textura muy sutil de papel / madera */
.destacada::after{
  content: ""; position: absolute; inset: 0;
  background-image: var(--papel);
  opacity: .10; mix-blend-mode: overlay;
  pointer-events: none;
}
/* Halo tenue, como luz de vela sobre la mesa */
.destacada::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(58% 80% at 70% 48%, rgba(214,178,116,.13) 0%, rgba(26,21,18,0) 68%);
  pointer-events: none;
}
.destacada__grid{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.22fr; gap: 56px; align-items: center;
}
/* El texto va primero en el código, la foto a la derecha */
.destacada__texto{ order: 1; }
.destacada__foto{ margin: 0; order: 2; }
.destacada__foto img{
  width: 100%; height: auto; display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.destacada .etiqueta{ color: rgba(228,218,199,.6); margin-bottom: .5rem; }
.destacada .filete--adorno{ margin: 1.7rem 0; }

.destacada__titulo{
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(2.1rem, 3.6vw, 3.05rem);
  color: #F6F1E6;
  margin-bottom: .3rem;
}
.pluma-adorno{ width: 30px; height: 30px; color: rgba(247,242,232,.45); flex: none; }

.destacada__subtitulo{
  font-family: var(--serif); font-style: italic;
  font-size: 1.32rem; color: var(--dorado);
  margin-bottom: 1.6rem;
}
/* La sinopsis. El primer párrafo —el que arranca "Newcastle, 1881"— va
   un punto más claro y más grande que los demás. */
.destacada__texto p{
  font-family: var(--serif-lectura);
  font-size: 1.02rem; line-height: 1.75;
  color: rgba(246,241,230,.72);
  max-width: 50ch;
  margin: 0 0 1.05rem;
}
.destacada__frase{
  font-size: 1.12rem !important; line-height: 1.75;
  color: rgba(246,241,230,.94) !important;
}

/* Ficción + investigación, con el filo dorado, igual que en la página de venta */
.destacada__historia{
  margin: 1.8rem 0 0;
  padding: .2rem 0 .2rem 1.4rem;
  border-left: 2px solid rgba(194,161,106,.75);
}
.destacada__historia-titulo{
  font-family: var(--serif) !important;
  font-size: 1.16rem !important; line-height: 1.45;
  color: var(--dorado) !important;
  margin-bottom: .5rem !important;
}
.destacada__historia p:last-child{ margin-bottom: 0 !important; font-size: .98rem !important; }

/* Los dos botones, del mismo ancho y en la misma fila */
.destacada__acciones{
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 2.3rem;
}
.destacada__acciones .boton{
  flex: 0 1 auto;
  text-align: center;
  padding-left: 20px; padding-right: 20px;
  font-size: .72rem; letter-spacing: .13em;
}

.destacada .formulario input{ max-width: 230px; }

.destacada__invitacion{
  font-family: var(--sans) !important;
  font-size: .74rem !important; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(228,218,199,.55) !important;
  margin: 1rem 0 0 !important;
}

/* La línea del regalo, chiquita y discreta */
.destacada__regalo{
  font-family: var(--sans) !important;
  font-size: .9rem !important;
  color: rgba(228,218,199,.55) !important;
  margin: 1.5rem 0 0 !important;
}
.destacada__regalo .modal__enlace{ color: var(--dorado); margin-left: .35rem; }
.destacada__regalo .modal__enlace:hover{ color: #E0C68F; }


/* ------------------------------------------------------------
   7. LÍNEA DE CARTAS (SOBRES)
   ------------------------------------------------------------ */
.secuencia{
  padding: var(--aire) 0;
  background: var(--crema-suave);
}

.sobres{
  display: flex; align-items: flex-end; justify-content: center;
  gap: 14px; flex-wrap: nowrap;
  margin-bottom: 3rem;
  overflow-x: auto;
  padding: 72px 44px 14px;  /* aire para que el sobre crezca al abrirse */
  margin: 0 -44px;
}

.sobre{ text-align: center; width: 100px; flex: none; }
.sobre svg{ width: 100%; height: auto; display: block; }
.sobre__nombre{
  font-family: var(--serif); font-size: 1.02rem; color: var(--marino);
  margin-top: 10px;
}
.sobre__estado{
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris-azul); display: block;
}

/* El sobre abierto (Carta 0) se destaca */
.sobre--abierto{ width: 116px; }
.sobre--abierto .sobre__estado{ color: var(--dorado); }
.sobre--cerrado{
  opacity: .72;
  background: none; border: 0; padding: 0; font: inherit;
  cursor: pointer;
  transition: opacity .3s ease, transform .3s ease;
}
.sobre--cerrado:hover{ opacity: .95; transform: translateY(-3px); }

.secuencia__pie{
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  border-top: 1px solid var(--beige);
  padding-top: 2rem;
}
.secuencia__pie p{ margin: 0; max-width: 54ch; font-size: .95rem; color: #3A4350; }
.precio{ font-family: var(--serif); font-size: 1.5rem; color: var(--marino); }


/* ------------------------------------------------------------
   8. EL UNIVERSO
   ------------------------------------------------------------ */
/* Nota: la sección "Explorá el universo" se sacó de index.html porque
   repetía las mismas tres áreas que "Últimas historias". Estos estilos
   quedan por si algún día querés volver a ponerla. */
.areas{
  position: relative;
  padding: calc(var(--aire) + 1rem) 0 var(--aire);
  background: var(--marfil);
  border-top: 1px solid rgba(158,129,73,.18);
}
/* Textura de papel antiguo, muy tenue */
.areas::before{
  content: ""; position: absolute; inset: 0;
  background-image: var(--papel);
  opacity: .045; pointer-events: none;
}

.areas .contenedor{ position: relative; }
.areas__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }

/* Tarjeta: foto arriba, texto centrado y acceso debajo */
.area{ text-align: center; display: flex; flex-direction: column; }
.area__foto{
  display: block; overflow: hidden;
  border: 1px solid rgba(158,129,73,.22);
  margin-bottom: 1.6rem;
}
.area img{
  width: 100%; height: 250px; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.area__foto:hover img{ transform: scale(1.04); }
.area h3{
  font-family: var(--sans); font-weight: 400;
  font-size: .84rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--marino); margin-bottom: .8rem;
}
.area p{
  font-family: var(--serif);
  font-size: 1.06rem; line-height: 1.6; color: #4A4237;
  max-width: 30ch; margin: 0 auto 1.6rem;
}
.area .boton{ align-self: center; margin-top: auto; }


/* ------------------------------------------------------------
   10. ÚLTIMAS HISTORIAS
   ------------------------------------------------------------ */
.blog{ padding: var(--aire) 0; background: var(--crema-suave); border-top: 1px solid var(--beige); }
.blog__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; }

.nota__imagen{
  display: block; height: 210px;
  background-size: cover; background-position: center;
  margin-bottom: 1.2rem;
  filter: saturate(.9);
  transition: filter .3s ease;
}
.nota a:hover .nota__imagen{ filter: saturate(1.05); }
.nota h3{ font-size: 1.32rem; margin-bottom: .5rem; }
.nota p{ font-size: .93rem; color: #47505C; }
.nota .enlace-flecha{ margin-top: .4rem; }


/* ------------------------------------------------------------
   11. NEWSLETTER GENERAL
   ------------------------------------------------------------ */
.newsletter{
  position: relative; overflow: hidden;
  background: var(--petroleo);
  padding: 5rem 0;
}
.newsletter__faro{
  position: absolute; right: 4%; bottom: 14px;
  width: 230px; color: rgba(247,242,232,.2);
}
.newsletter__interior{ position: relative; text-align: center; }
.newsletter .titulo-centrado{ color: var(--crema); }
.newsletter__bajada{ color: rgba(247,242,232,.7); font-size: .95rem; margin-bottom: 2rem; }
.newsletter .formulario{ justify-content: center; }
.newsletter .formulario__mensaje{ text-align: center; }


/* ------------------------------------------------------------
   12. SOBRE MÍ
   ------------------------------------------------------------ */
.sobre-mi{ padding: var(--aire) 0; background: var(--crema); }
.sobre-mi__grid{ display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center; }
.sobre-mi__foto{ margin: 0; }
/* El retrato es un perfil vertical: le dejamos altura y lo encuadramos
   un poco alto para que no le corte la cara. Ya viene en blanco y negro,
   así que no hace falta el filtro. */
.sobre-mi__foto img{
  width: 100%; height: 430px;
  object-fit: cover; object-position: 50% 28%;
}
.sobre-mi__intro{ font-family: var(--serif); font-size: 1.5rem; color: var(--marino); line-height: 1.4; }
.sobre-mi p{ max-width: 56ch; }


/* ------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------ */
.pie{ background: var(--crema-suave); border-top: 1px solid var(--beige); padding-top: 4rem; }
.pie__grid{
  display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr;
  gap: 40px; padding-bottom: 3.5rem;
}
.pie h4{
  font-family: var(--sans); font-size: .7rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gris-azul);
  margin-bottom: 1.1rem;
}
.pie ul{ list-style: none; margin: 0; padding: 0; }
.pie li{ margin-bottom: .6rem; }
.pie li a{ font-size: .93rem; text-decoration: none; border-bottom: 1px solid transparent; }
.pie li a:hover{ border-color: var(--dorado); }
.pie__frase{
  font-family: var(--script);
  font-size: 1.5rem; line-height: 1.5; color: var(--marino);
  align-self: center; margin: 0;
}

.pie__legal{ background: var(--petroleo); color: rgba(247,242,232,.72); padding: 16px 0; font-size: .78rem; }
.pie__legal-interior{ display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pie__legal a{ text-decoration: none; }
.pie__legal a:hover{ color: var(--dorado); }


/* ------------------------------------------------------------
   14. VENTANA MODAL ("Próximamente")
   ------------------------------------------------------------ */
.modal{ position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden]{ display: none; }
.modal__fondo{ position: absolute; inset: 0; background: rgba(12,18,28,.72); }
.modal__caja{
  position: relative;
  background: var(--crema);
  max-width: 480px; width: 100%;
  padding: 48px 44px 40px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.modal__caja h3{ font-size: 1.7rem; margin-bottom: .8rem; }
.modal__caja p{ color: #47505C; margin-bottom: 1.4rem; }
.modal__caja .etiqueta{ margin-bottom: .6rem; }
.modal--sin-carta #modalCarta,
.modal--sin-carta .modal__codigo{ display: none; }

/* Modo "elegir desde dónde compra" */
.modal__compra{ display: none; }
.modal--compra .modal__compra{ display: block; }
.modal--compra #modalCarta,
.modal--compra #modalTitulo,
.modal--compra .modal__codigo,
.modal--compra .modal__pie,
.modal--compra .modal__caja > p{ display: none; }
.modal--compra .modal__compra p{
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: 1.35rem; color: var(--marino);
  margin: .5rem 0 1.8rem;
}
.modal__opciones{ display: flex; flex-direction: column; gap: 12px; }

.modal__codigo{ justify-content: center; margin-bottom: .5rem; }
.modal__codigo input{
  max-width: 190px;
  text-align: center; letter-spacing: .18em; text-transform: uppercase;
  font-size: 1rem;
}
.modal__pie{ margin-top: 1.6rem; }
.modal__pie p{
  font-family: var(--sans); font-size: .86rem; color: var(--gris-azul);
  margin-bottom: 1rem;
}
.modal__pie .filete--adorno{ margin-bottom: 1.4rem; }
.modal__x{
  position: absolute; top: 10px; right: 16px;
  background: none; border: 0; font-size: 1.6rem; line-height: 1;
  color: var(--gris-azul); cursor: pointer;
}


/* ============================================================
   15. RESPONSIVE
   ============================================================ */

/* --- TABLET --- */
@media (max-width: 1000px){
  :root{ --aire: 4.5rem; }

  /* la navegación se comprime para que entre en una sola línea */
  .menu{ gap: 17px; }
  .menu a{ font-size: .85rem; }
  .marca__nombre{ font-size: 1.38rem; }
  .marca__lema{ font-size: .56rem; letter-spacing: .16em; }
  .idiomas{ margin-left: 2px; }
  .idiomas button{ font-size: .78rem; }

  .destacada__grid,
  .sobre-mi__grid{ grid-template-columns: 1fr; gap: 40px; }

  .destacada__foto{ order: -1; }
  .sobre-mi__foto{ max-width: 260px; }

  .areas__grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
  .blog__grid{ grid-template-columns: 1fr 1fr; gap: 34px; }

  .pie__grid{ grid-template-columns: 1fr 1fr; }
  .pie__frase{ grid-column: 1 / -1; }
}

/* --- MOBILE --- */
@media (max-width: 700px){
  body{ font-size: 16px; }
  .contenedor{ padding: 0 22px; }

  /* Menú hamburguesa */
  .hamburguesa{ display: block; }
  .menu{
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--crema);
    border-bottom: 1px solid var(--beige);
    padding: 8px 22px 22px;
  }
  .menu.abierto{ display: flex; }
  .menu a{ width: 100%; padding: 14px 0; border-bottom: 1px solid var(--beige); }
  .idiomas{ margin: 16px 0 0; }

  .header__interior{ position: relative; min-height: 72px; }
  :root{ --alto-header: 73px; }
  .marca__nombre{ font-size: 1.28rem; }
  .marca__lema{ font-size: .55rem; }

  /* Hero */
  .hero{ min-height: 0; }
  /* en mobile se encuadra la parte luminosa del fiordo */
  .hero__imagen{ background-position: 80% center; }
  .hero__velo{
    background: linear-gradient(180deg, rgba(10,16,24,.82) 0%, rgba(10,16,24,.66) 38%, rgba(10,16,24,.48) 62%, rgba(20,14,10,.78) 100%);
  }
  .hero__contenido{ padding-top: 60px; padding-bottom: 76px; }
  .hero{ min-height: 100svh; max-height: none; }
  .hero__contenido{ padding-top: 120px; padding-bottom: 96px; }
  .hero__titulo{ max-width: none; font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .hero__bajada{ max-width: none; font-size: 1.06rem; }
  .hero__frase{ max-width: none; font-size: 1.22rem; margin-bottom: 2rem; }
  .hero__acciones{ flex-direction: column; }
  .hero__acciones .boton{ width: 100%; text-align: center; padding: 16px 24px; }

  /* Formularios cómodos y botones grandes */
  .formulario input{ max-width: none; flex: 1 1 100%; padding: 16px; font-size: 1rem; }
  .formulario .boton{ width: 100%; padding: 17px 24px; font-size: .82rem; }

  .destacada__foto img{ height: 260px; }
  .destacada__texto p, .destacada__frase{ max-width: none; }
  .destacada__acciones{ flex-direction: column; }
  .destacada__acciones .boton{ width: 100%; text-align: center; }

  /* Los sobres se deslizan hacia el costado */
  .sobres{
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; padding-bottom: 14px;
    margin: 0 -22px; padding: 58px 22px 12px;
    scroll-snap-type: x mandatory;
  }
  .sobre{ flex: none; scroll-snap-align: center; }
  .sobre0.abriendo{ transform: scale(1.5) translateY(-10px); }
  .carta__cierre .formulario input{ max-width: none; }
  .modal__codigo input{ max-width: none; }
  .fotosobre__caja{ height: 130px; }
  .postdata.revelada .fotosobre__caja{ height: 282px; }
  .fotosobre:not(.fotosobre--dos) .fotosobre__caja{ max-width: none; }
  .postdata.revelada .fotosobre:not(.fotosobre--dos) .fotosobre__caja{ height: 300px; }
  .lupa{ padding: 12px; }

  .secuencia__pie{ flex-direction: column; align-items: stretch; text-align: left; }
  .secuencia__pie .boton{ width: 100%; }

  .areas__grid{ grid-template-columns: 1fr; gap: 46px; }
  .area img{ height: 230px; }
  .area .boton{ width: 100%; }

  .blog__grid{ grid-template-columns: 1fr; }
  .nota__imagen{ height: 200px; }

  .newsletter__faro{ width: 150px; opacity: .5; }

  .sobre-mi__foto{ max-width: 200px; }
  .sobre-mi__grid{ grid-template-columns: 1fr; }

  .pie__grid{ grid-template-columns: 1fr; gap: 30px; }
  .pie__legal-interior{ flex-direction: column; gap: 6px; }

  .modal__caja{ padding: 40px 26px 32px; }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; }
}


/* ============================================================
   16. LA CARTA 0 — SOBRE QUE SE ABRE Y LECTOR
   ============================================================ */

/* ------------------------------------------------------------
   16.1 El sobre de la Carta 0
   Está hecho con capas para que la solapa pueda abrirse.
   ------------------------------------------------------------ */
.sobre--carta0{
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sobre0{
  position: relative; display: block;
  width: 100%; height: 82px;
  perspective: 900px;
  transform-origin: center bottom;
  transition: transform .95s cubic-bezier(.16,.9,.24,1), filter .8s ease;
  z-index: 1;
}
/* mientras se abre, el sobre crece y se despega del resto */
.sobre0.abriendo{
  transform: scale(1.85) translateY(-14px);
  filter: drop-shadow(0 24px 34px rgba(20,14,8,.42));
  z-index: 30;
}
/* la fila deja de recortar durante la apertura */
.sobres.abriendo{ overflow: visible; }

/* resplandor cálido detrás del sobre */
.sobre0__resplandor{
  position: absolute; left: 50%; top: 50%;
  width: 190px; height: 190px; margin: -95px 0 0 -95px;
  border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(224,190,128,.55) 0%, rgba(224,190,128,0) 66%);
  opacity: 0; transform: scale(.4);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
}
.sobre0.abriendo .sobre0__resplandor{ opacity: 1; transform: scale(1.25); }

/* Cuerpo del sobre (parte de atrás) */
.sobre0::before{
  content: ""; position: absolute; inset: 0;
  background: #E7DCC4;
  border: 1px solid #C9BB9D;
  border-radius: 2px;
}

/* La carta que asoma al abrirse */
.sobre0__papel{
  /* arranca escondido detrás del frente del sobre */
  position: absolute; left: 9%; right: 9%; top: 30px;
  height: 50px; z-index: 2;
  box-shadow: 0 6px 14px rgba(20,14,8,.18);
  background: #FDFBF5;
  border: 1px solid #DDD2B8;
  padding: 9px 8px 0;
  transition: transform .85s cubic-bezier(.18,.85,.25,1);
}
.sobre0__renglon{
  display: block; height: 1px; margin-bottom: 7px;
  background: #C2B79E; opacity: .75;
}
.sobre0__renglon:nth-child(3){ width: 78%; }
.sobre0__renglon:nth-child(4){ width: 56%; }

/* Frente del sobre: tapa la carta */
.sobre0__frente{
  position: absolute; inset: auto 0 0 0; top: 34%;
  z-index: 3;
  background: linear-gradient(#EFE6D2, #E9DFC8);
  border: 1px solid #C9BB9D; border-top: 0;
  border-radius: 0 0 2px 2px;
}

/* Solapa triangular: gira sobre su borde superior */
.sobre0__solapa{
  position: absolute; left: 0; right: 0; top: 0; height: 56%;
  z-index: 4;
  background: linear-gradient(#F1E9D7, #E4D9BF);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform .7s cubic-bezier(.5,0,.3,1), z-index 0s .35s;
  backface-visibility: hidden;
}

/* El lacre */
.sobre0__sello{
  position: absolute; left: 50%; top: 44%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  z-index: 5;
  transition: transform .4s ease;
}
/* las dos mitades del lacre, que se rompen al abrirlo */
.sobre0__mitad{
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #D9BA84 0%, #C2A16A 45%, #9E8149 75%, #7E6538 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.28), inset 0 -1px 3px rgba(0,0,0,.3);
  transition: transform .75s cubic-bezier(.3,.7,.3,1), opacity .75s ease;
}
.sobre0__mitad--a{ clip-path: polygon(0 0, 52% 0, 46% 100%, 0 100%); }
.sobre0__mitad--b{ clip-path: polygon(52% 0, 100% 0, 100% 100%, 46% 100%); }
/* el aro grabado */
.sobre0__mitad--a::after,
.sobre0__mitad--b::after{
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%; border: 1px solid rgba(255,246,225,.45);
}

/* Latido suave para invitar a tocarlo */
@keyframes latido-sello{
  0%,100%{ box-shadow: 0 0 0 0 rgba(194,161,106,.45); }
  55%    { box-shadow: 0 0 0 10px rgba(194,161,106,0); }
}
.sobre--carta0:not(.leida) .sobre0__sello{
  border-radius: 50%;
  animation: latido-sello 2.8s ease-out infinite;
}
.sobre--carta0:hover .sobre0__sello{ transform: scale(1.14); }

/* Pista de texto debajo del sobre */
.sobre--carta0 .sobre__estado{ color: var(--dorado); }
.sobre__pista{
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: .82rem; color: var(--gris-azul);
  margin-top: 2px;
  transition: opacity .4s ease;
}
.sobre--carta0.leida .sobre__pista{ opacity: 0; }
/* pero si ya la leyó, conviene decirle que puede volver */
.sobre--carta0.leida:hover .sobre__pista,
.sobre--carta0.leida:focus-visible .sobre__pista{ opacity: .75; }

/* --- La apertura --- */
/* 1. el lacre se parte y las dos mitades caen */
.sobre0.abriendo .sobre0__mitad--a,
.sobre0.abierta  .sobre0__mitad--a{
  transform: translate(-13px, 15px) rotate(-38deg); opacity: 0;
  transition-delay: .28s;
}
.sobre0.abriendo .sobre0__mitad--b,
.sobre0.abierta  .sobre0__mitad--b{
  transform: translate(13px, 18px) rotate(42deg); opacity: 0;
  transition-delay: .34s;
}
/* 2. la solapa se abre */
.sobre0.abriendo .sobre0__solapa,
.sobre0.abierta  .sobre0__solapa{
  transform: rotateX(181deg); z-index: 1;
  transition-delay: .5s, .85s;
}
/* 3. la carta sale del sobre */
.sobre0.abriendo .sobre0__papel,
.sobre0.abierta  .sobre0__papel{
  transform: translateY(-44px) rotate(-1.2deg);
  transition-delay: .85s;
}


/* ------------------------------------------------------------
   16.2 El lector de la carta
   ------------------------------------------------------------ */
.lector{
  position: fixed; inset: 0; z-index: 120;
  display: flex; justify-content: center;
  padding: 40px 20px;
  opacity: 0; transition: opacity .32s ease;
}
.lector.visible{ opacity: 1; }
.lector[hidden]{ display: none; }

.lector__fondo{
  position: absolute; inset: 0;
  background: rgba(14,11,9,.86);
  backdrop-filter: blur(3px);
}

/* La hoja de papel */
.lector__hoja{
  position: relative;
  width: 100%; max-width: 760px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #F4EAD3;
  background-image:
    radial-gradient(130% 55% at 50% 0%, rgba(206,178,126,.34) 0%, rgba(244,234,211,0) 62%),
    radial-gradient(130% 55% at 50% 100%, rgba(206,178,126,.30) 0%, rgba(244,234,211,0) 58%),
    var(--papel);
  background-blend-mode: normal, normal, multiply;
  box-shadow:
    0 40px 110px rgba(0,0,0,.6),
    inset 0 0 90px rgba(178,150,101,.20);
  padding: 76px clamp(26px, 6vw, 82px) 66px;
  transform: translateY(26px) scale(.94);
  transition: transform .62s cubic-bezier(.16,.9,.24,1);
}
.lector.visible .lector__hoja{ transform: none; }

.lector__x{
  position: fixed; top: 22px; right: 26px;
  width: 46px; height: 46px;
  background: rgba(20,16,12,.5); border: 1px solid rgba(228,218,199,.25);
  border-radius: 50%; cursor: pointer;
  font-size: 1.6rem; line-height: 1;
  color: rgba(240,232,215,.9);
  z-index: 3;
  transition: background .25s ease, border-color .25s ease;
}
.lector__x:hover{ background: rgba(20,16,12,.8); border-color: var(--dorado); }

/* --- Tipografía de la carta --- */
.carta__cabecera{ text-align: center; margin-bottom: 2.4rem; }
.carta__cabecera .etiqueta{ color: #8A7A5F; margin-bottom: .5rem; }
.carta__titulo{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  color: #2A2118; margin-bottom: 1.4rem;
}
.carta__lugar{
  font-family: var(--serif-lectura); font-style: italic;
  font-size: 1.05rem; color: #5A4E3C;
  text-align: right; margin: 2.2rem 0 0;
}

.carta__saludo{
  font-family: var(--serif-lectura); font-style: italic;
  font-size: 1.42rem; color: #2A2118;
  margin: 0 0 1.6rem;
}

.carta__cuerpo p{
  font-family: var(--serif-lectura);
  font-size: 1.12rem; line-height: 1.82;
  color: #322718;
  margin: 0 0 1.2rem;
  text-align: justify;
  hyphens: auto;
}
/* la primera línea, en versalitas, como en un libro.
   Sólo el primer párrafo de la carta, no los recortes. */
.carta__cuerpo > p:first-child::first-line{
  font-variant: small-caps; letter-spacing: .04em;
}
.carta__cuerpo p.carta__dialogo{
  padding-left: 1.6rem; text-align: left;
}

/* ------------------------------------------------------------
   Recorte de otra carta, pegado dentro de la página.
   Se usa para los fragmentos escritos por otra persona
   (por ejemplo, la madre). Ver "recorte" en carta-1.js
   ------------------------------------------------------------ */
.carta__recorte{
  position: relative;
  margin: 2.4rem auto 2.6rem;
  max-width: 88%;
  padding: 30px 34px 32px;
  background: #EFE6D0;
  color: #3B3A55 !important;              /* tinta ferrogálica, azulada y desvaída */
  font-family: var(--manuscrita) !important;
  font-size: 1.26rem !important;
  line-height: 2.15 !important;
  letter-spacing: .012em;
  text-align: left !important;
  white-space: pre-line;                   /* respeta los renglones en blanco */
  text-shadow: 0 0 .6px currentColor;      /* el trazo apenas se corre, como la tinta */
  transform: rotate(-.7deg);
  border: 1px solid rgba(150,124,80,.28);
  box-shadow: 0 12px 30px rgba(60,44,22,.22);
}
/* una segunda hoja apenas asomando por detrás, como un papel apoyado */
.carta__recorte::before{
  content: ""; position: absolute; inset: 6px -5px -6px 5px;
  background: #E9DFC6; border: 1px solid rgba(150,124,80,.22);
  transform: rotate(1.1deg); z-index: -1;
}
/* la sombra no puede recortarse con la máscara: va en una capa aparte */
.carta__recorte-marco{
  margin: 2.4rem 0 2.6rem;
  isolation: isolate;
}
/* que no queden todos torcidos igual */
.carta__recorte-marco:nth-of-type(even) .carta__recorte{ transform: rotate(.6deg); }
.carta__recorte-marco:nth-of-type(3n) .carta__recorte{ transform: rotate(-1.1deg); }
.carta__recorte-marco .carta__recorte{ margin: 0 auto; }

/* La hoja de ELLA: papel de 1882, más nuevo y más frío que el de Kristine,
   y su propia letra. Se apoya inclinada hacia el otro lado. */
.carta__recorte--mia{
  background: #F4F1E4;
  color: #33291E !important;
  font-family: var(--manuscrita-ella) !important;
  font-size: 1.18rem !important;
  line-height: 1.95 !important;
  transform: rotate(.9deg) !important;
  border-color: rgba(120,110,86,.28);
}
.carta__recorte--mia::before{ background: #EDE9DA; transform: rotate(-1deg); }

/* Documento adjunto dentro de la carta */
.carta__adjunto{
  margin: 2.8rem auto 2.4rem;
  max-width: 86%;
  text-align: center;
}
.carta__adjunto img{
  width: 100%;
  padding: 12px; background: #FBF6E9;
  box-shadow: 0 16px 40px rgba(40,28,14,.3);
  transform: rotate(-.8deg);
  cursor: zoom-in;
  transition: transform .35s ease, box-shadow .35s ease;
}
.carta__adjunto img:hover{
  transform: rotate(-.2deg) scale(1.015);
  box-shadow: 0 22px 52px rgba(40,28,14,.38);
}
.carta__adjunto figcaption{
  margin-top: 1.1rem;
  font-family: var(--serif-lectura); font-style: italic;
  font-size: .96rem; color: #6E5F45;
}

/* Recorte de diario: papel gris, letra impresa, filetes finos */
.carta__prensa{
  max-width: 34ch;
  margin: 2.2rem auto !important;
  padding: 1.1rem 1.6rem;
  background: #E4E0D6;
  border-top: 2px solid rgba(60,54,44,.55);
  border-bottom: 2px solid rgba(60,54,44,.55);
  font-family: var(--serif-lectura) !important;
  font-size: 1.14rem !important;
  font-style: italic;
  line-height: 1.55 !important;
  letter-spacing: .01em;
  color: #2E2A22 !important;
  text-align: center !important;
  transform: rotate(.5deg);
  box-shadow: 0 6px 16px rgba(60,44,22,.14);
}

/* Anotación a mano en el margen: otra letra, apurada */
.carta__mano{
  max-width: 30ch;
  margin: 2.2rem auto !important;
  font-family: var(--manuscrita) !important;
  font-size: 1.42rem !important;
  line-height: 1.9 !important;
  color: #3B3A55 !important;
  text-align: center !important;
  transform: rotate(-1.6deg) skewX(-4deg);
  text-shadow: 0 0 .6px currentColor;
  opacity: .92;
}

@media (max-width: 700px){
  .carta__prensa{ max-width: none; font-size: 1.06rem !important; }
  .carta__adjunto{ max-width: 100%; margin: 2rem auto; }
  .carta__recorte--mia{ font-size: 1.1rem !important; }
  .carta__mano{ max-width: none; font-size: 1.18rem !important; }
  .carta__recorte{
    max-width: 100%; padding: 24px 20px 26px;
    font-size: 1.04rem !important; line-height: 1.95 !important;
  }
}

.carta__firma{
  font-family: var(--serif-lectura); font-style: italic;
  font-size: 1.2rem; color: #33291E;
  text-align: right; margin: 2.6rem 0 0; line-height: 1.7;
}
.carta__firma span{ display: block; }
.carta__firma-nombre{
  font-family: var(--script);
  font-size: 2.1rem; font-style: normal;
  color: #2A2118; margin-top: .2rem;
}

/* Formulario sobre papel o fondo claro */
.formulario--claro input{
  background: rgba(255,255,255,.6);
  border-color: rgba(158,129,73,.4);
  color: #33291E;
}
.formulario--claro input::placeholder{ color: #9A8A6E; }
.formulario--claro .formulario__mensaje{ color: #6E5A33; }
.formulario--claro .boton--contorno{ color: #4A3C22; border-color: rgba(158,129,73,.55); }
.formulario--claro .boton--contorno:hover{ border-color: var(--dorado-viejo); color: #2A2118; }

/* ------------------------------------------------------------
   16.4 La posdata: el sobrecito con la fotografía
   ------------------------------------------------------------ */
.postdata{ margin-top: 3rem; }
.postdata[hidden]{ display: none; }

.postdata__texto{
  font-family: var(--serif-lectura); font-style: italic;
  font-size: 1.06rem; line-height: 1.75;
  color: #4A3E2C;
  margin-bottom: 1.8rem;
}

/* El sobre-bolsillo, tipo funda de fotografía */
.fotosobre{
  display: block; width: 100%;
  background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.fotosobre__caja{
  position: relative; display: block;
  max-width: 470px; margin: 0 auto;
  height: 152px;                                  /* cerrado */
  overflow: hidden;                               /* la foto asoma, no se ve entera */
  transition: height .85s cubic-bezier(.16,.9,.24,1);
}

/* La fotografía, montada en cartulina */
.fotosobre__foto{
  position: absolute; left: 7%; right: 7%; bottom: 26px;
  display: block; padding: 12px 12px 14px;
  background: #FBF6E9;
  box-shadow: 0 10px 26px rgba(30,20,10,.3);
  transform: translateY(56%) rotate(0deg);
  transition: transform .95s cubic-bezier(.16,.9,.24,1),
              box-shadow .9s ease, padding .9s ease;
}
.fotosobre__foto img{
  width: 100%; display: block;
  filter: contrast(1.02) brightness(1.01);   /* la foto ya viene virada */
}

/* El bolsillo que la sostiene */
.fotosobre__bolsillo{
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 92px; z-index: 2;
  background: linear-gradient(#E6D9BC, #DCCDAB);
  border: 1px solid rgba(158,129,73,.45);
  border-radius: 2px 2px 3px 3px;
  box-shadow: inset 0 6px 12px rgba(120,96,58,.22);
  transition: transform .8s cubic-bezier(.4,0,.3,1), opacity .7s ease;
}
/* la muesca de la funda */
.fotosobre__bolsillo::after{
  content: ""; position: absolute; left: 50%; top: -1px;
  width: 74px; height: 20px; margin-left: -37px;
  background: #F4EAD3;
  border: 1px solid rgba(158,129,73,.35); border-top: 0;
  border-radius: 0 0 40px 40px;
}

.fotosobre__pista{
  display: block; margin-top: 1rem;
  font-family: var(--sans);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: #8A7A5F;
  transition: opacity .4s ease;
}
.fotosobre:hover .fotosobre__foto{ transform: translateY(50%); }
.fotosobre:hover .fotosobre__pista{ color: var(--dorado-viejo); }

/* --- Revelada --- */
.postdata.revelada .fotosobre{ cursor: default; }
.postdata.revelada .fotosobre__caja{ height: 356px; }
.postdata.revelada .fotosobre__foto{
  transform: translateY(0) rotate(-1.3deg);
  padding: 16px 16px 20px;
  box-shadow: 0 26px 54px rgba(30,20,10,.42);
}
.postdata.revelada .fotosobre__bolsillo{
  transform: translateY(78px); opacity: 0;
}
.postdata.revelada .fotosobre__pista{ opacity: 0; }

/* --- Cuando la carta trae dos fotografías --- */
.fotosobre--dos .fotosobre__caja{ max-width: 540px; height: 168px; }
.fotosobre--dos .fotosobre__foto{ left: 27%; right: 27%; }
.fotosobre--dos .fotosobre__foto:nth-child(1){ transform: translateY(58%) rotate(-3.5deg); z-index: 2; }
.fotosobre--dos .fotosobre__foto:nth-child(2){ transform: translateY(58%) rotate(3deg); z-index: 1; }

.postdata.revelada .fotosobre--dos .fotosobre__caja{ height: 430px; }
.postdata.revelada .fotosobre--dos .fotosobre__foto:nth-child(1){
  transform: translateX(-51%) rotate(-2.6deg); transition-delay: .85s;
}
.postdata.revelada .fotosobre--dos .fotosobre__foto:nth-child(2){
  transform: translateX(51%) rotate(2.2deg); transition-delay: 1.02s;
}

/* los dos pies, uno debajo de cada copia */
.postdata__pies{
  display: flex; gap: 20px; justify-content: center;
  opacity: 0; transition: opacity .6s ease .55s;
}
.postdata.revelada .postdata__pies{ opacity: 1; }
.postdata__pies .postdata__pie{ flex: 1 1 0; opacity: 1; }
.fotosobre--dos ~ .postdata__pies .postdata__pie{ max-width: 46%; }

.postdata__pie{
  margin-top: 1.2rem; text-align: center;
  font-family: var(--serif-lectura); font-style: italic;
  font-size: .96rem; color: #6E5F45;
  opacity: 0; transition: opacity .6s ease .55s;
}
.postdata.revelada .postdata__pie{ opacity: 1; }

/* Invitación al final de la carta */
.carta__cierre{
  margin-top: 3.6rem; padding-top: 2.2rem;
  border-top: 1px solid rgba(158,129,73,.28);
  text-align: center;
}
.carta__cierre .etiqueta{ color: #8A7A5F; }
.carta__aviso{
  margin-top: 2.6rem;
  font-family: var(--sans);
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: #8A7A5F;
}
.carta__cierre .formulario{ justify-content: center; }
.carta__cierre .formulario input{ max-width: 250px; }

.carta__cierre-texto{
  font-family: var(--serif-lectura); font-size: 1.08rem; line-height: 1.7;
  color: #4A4034; max-width: 42ch; margin: 0 auto 1.8rem;
}


/* --- La lupa --- */
.lupa{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  background: rgba(10,8,6,.94);
  cursor: zoom-out;
  opacity: 0; transition: opacity .26s ease;
}
.lupa.visible{ opacity: 1; }
.lupa[hidden]{ display: none; }
.lupa img{
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.lupa__x{
  position: absolute; top: 18px; right: 22px;
  width: 46px; height: 46px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(228,218,199,.3);
  border-radius: 50%; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: rgba(240,232,215,.9);
}
.lupa__x:hover{ background: rgba(255,255,255,.2); }

/* con una sola imagen conviene más grande: suele ser un documento */
.postdata.revelada .fotosobre__foto{ cursor: zoom-in; }
.fotosobre:not(.fotosobre--dos) .fotosobre__caja{ max-width: 560px; }
.postdata.revelada .fotosobre:not(.fotosobre--dos) .fotosobre__caja{ height: 430px; }

/* ------------------------------------------------------------
   16.3 Responsive del lector
   ------------------------------------------------------------ */
@media (max-width: 700px){
  .lector{ padding: 0; }
  .lector__hoja{
    max-width: none; max-height: 100%;
    padding: 62px 22px 48px;
    box-shadow: none;
  }
  .lector__x{ top: 12px; right: 12px; width: 42px; height: 42px; }
  .carta__cuerpo p{ font-size: 1.08rem; line-height: 1.75; text-align: left; }
  .carta__cuerpo p.carta__dialogo{ padding-left: 1rem; }
  .carta__saludo{ font-size: 1.3rem; }
  .carta__lugar{ font-size: .98rem; }
  .carta__cierre .boton{ width: 100%; }

  /* Dos fotografías: en mobile van una debajo de la otra,
     así se ven grandes en vez de dos estampillas. */
  .fotosobre--dos .fotosobre__caja{ max-width: none; height: 150px; }
  .fotosobre--dos .fotosobre__foto{ left: 15%; right: 15%; }
  .postdata.revelada .fotosobre--dos .fotosobre__caja{ height: 700px; }
  .postdata.revelada .fotosobre--dos .fotosobre__foto:nth-child(1){
    transform: translateY(-100%) rotate(-2deg);
  }
  .postdata.revelada .fotosobre--dos .fotosobre__foto:nth-child(2){
    transform: translateY(4px) rotate(1.6deg);
  }
  .postdata__pies{ flex-direction: column; gap: 0; }
  .fotosobre--dos ~ .postdata__pies .postdata__pie{ max-width: none; }
}

@media (prefers-reduced-motion: reduce){
  .fotosobre__foto, .fotosobre__bolsillo, .fotosobre__caja{ transition: none; }
  .sobre0, .sobre0__papel, .sobre0__solapa, .sobre0__mitad, .sobre0__resplandor{ transition: none; }
  .sobre--carta0:not(.leida) .sobre0__sello{ animation: none; }
  .sobre0.abriendo{ transform: none; }
}


/* ============================================================
   17. EL DAGUERROTIPO (Carta IV)
   ------------------------------------------------------------
   Un estuche cerrado que se abre, y adentro una placa plateada
   que sólo muestra el retrato cuando se encuentra el ángulo.
   ============================================================ */

.dag{
  margin: 3rem auto 2.6rem;
  width: 100%;
  max-width: 620px;
  text-align: center;
  perspective: 1400px;
}

/* El estuche: la placa a la derecha, la tapa abre hacia la izquierda */
.dag__estuche{
  position: relative;
  width: 290px; height: 328px;  /* misma proporción que la foto de la placa */
  margin: 0 0 0 auto;           /* pegado a la derecha: la tapa necesita lugar */
  margin-right: calc(50% - 145px);
  transform-style: preserve-3d;
  cursor: pointer;
}

/* --- La placa --- */
.dag__placa{
  --x: .5; --y: .5;
  position: absolute; inset: 0;
  overflow: hidden;
  background: #171410;
  border: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 24px rgba(0,0,0,.55), 0 16px 40px rgba(20,14,8,.45);
}
.dag__placa img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.45) contrast(1.1) brightness(1.02);
}
/* el reflejo metálico: tapa el retrato salvo donde "da la luz" */
.dag__brillo{
  position: absolute;
  inset: 11% 15.4% 8.4% 17%;   /* sólo dentro del óvalo: el marco dorado no se tapa */
  border-radius: 50%;
  pointer-events: none;
  background:
    linear-gradient(102deg,
      rgba(214,221,226,.92) 0%,
      rgba(214,221,226,.86) calc(var(--x) * 100% - 34%),
      rgba(198,208,214,.34) calc(var(--x) * 100% - 17%),
      rgba(198,208,214,0)   calc(var(--x) * 100%),
      rgba(198,208,214,.34) calc(var(--x) * 100% + 17%),
      rgba(214,221,226,.86) calc(var(--x) * 100% + 34%),
      rgba(214,221,226,.92) 100%);
  transition: background .12s linear, opacity .8s ease;
}
/* una vez encontrado el ángulo, el retrato se queda a la vista */
.dag.visto .dag__brillo{ opacity: .42; }
/* cerrado, la placa no se toca */
.dag:not(.abierto) .dag__placa{ pointer-events: none; }
.dag.abierto .dag__placa{ cursor: zoom-in; }

/* --- La tapa --- */
.dag__tapa{
  position: absolute; inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.25s cubic-bezier(.3,.75,.25,1);
}
.dag__cuero, .dag__terciopelo{
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 3px;
}
/* cara de afuera: el cuero tallado.
   El dibujo vive en imagenes/dag-tapa.svg: si querés otro, cambiá ese archivo. */
.dag__cuero{
  background: url("../imagenes/dag-tapa.svg") center / 100% 100% no-repeat, #1F160F;
  box-shadow: inset 0 0 26px rgba(0,0,0,.55), 0 14px 34px rgba(20,14,8,.5);
}
/* un reflejo suave sobre el cuero, para que no se vea plano */
.dag__cuero::before{
  content: ""; position: absolute; inset: 0;
  border-radius: 3px;
  background: linear-gradient(118deg, rgba(255,236,200,.10) 0%, rgba(255,236,200,0) 42%);
}

/* --- La perilla de bronce: se mueve cuando el estuche se abre --- */
.dag__perilla{
  position: absolute; top: 48%; right: -10px;
  width: 18px; height: 28px; margin-top: -14px;
  border-radius: 3px;
  background: linear-gradient(102deg, #E7C88C 0%, #C2A16A 28%, #8A6F3F 68%, #5B4724 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,242,206,.55);
  transform-origin: 12% 50%;
  transition: transform 1.05s cubic-bezier(.34,1.32,.5,1);
  z-index: 4;
  pointer-events: none;
}
.dag__perilla::after{        /* el botón redondo del cierre */
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #F3DBA8, #B08F55 55%, #6B5430);
  box-shadow: inset 0 0 2px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.5);
}
.dag.abierto .dag__perilla{ transform: rotate(-44deg) translate(3px, -1px); }
/* cara de adentro: terciopelo */
.dag__terciopelo{
  transform: rotateY(180deg);
  background:
    radial-gradient(90% 80% at 50% 40%, #6B2230 0%, #4A1620 60%, #2E0D14 100%);
  border: 1px solid #24232A;
  box-shadow: inset 0 0 34px rgba(0,0,0,.6);
}
.dag__terciopelo::before{
  content: ""; position: absolute; inset: 18px;
  border: 1px solid rgba(200,170,110,.22);
  border-radius: 40% 40% 38% 38% / 8% 8% 6% 6%;
}

/* --- Abierto --- */
.dag.abierto .dag__tapa{ transform: rotateY(-168deg); }

.dag figcaption{
  margin-top: 1.4rem;
  font-family: var(--serif-lectura); font-style: italic;
  font-size: .96rem; color: #6E5F45;
  opacity: 0; transition: opacity .6s ease .9s;
}
.dag.abierto figcaption{ opacity: 1; }

.dag__pista{
  margin-top: .7rem !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important; letter-spacing: .2em; text-transform: uppercase;
  color: #8A7A5F !important;
  text-align: center !important;
}

@media (max-width: 700px){
  .dag{ perspective: 900px; }
  .dag__estuche{
    width: 190px; height: 215px;
    margin-right: calc(50% - 95px);
  }
  .dag__perilla{ width: 14px; height: 22px; margin-top: -11px; right: -8px; }
}

@media (prefers-reduced-motion: reduce){
  .dag__tapa{ transition: none; }
  .dag__perilla{ transition: none; }
  .dag__brillo{ transition: none; }
}

/* ============================================================
   18. EL REVERSO DEL CARTEL (Carta V)
   ------------------------------------------------------------
   Una tabla cubierta de pintura vieja. Se raspa con el dedo o
   el mouse y aparece lo que hay tallado debajo.
   ============================================================ */

.talla{
  margin: 3rem auto 2.6rem;
  width: 100%;
  max-width: 620px;
  text-align: center;
}

.talla__tabla{
  position: relative;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  background: #1B130D;
  box-shadow:
    0 18px 44px rgba(20,14,8,.5),
    inset 0 0 0 1px rgba(90,68,44,.5);
}
.talla__tabla img{
  display: block; width: 100%; height: auto;
}
.talla__pintura{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: crosshair;
  touch-action: none;                 /* para poder raspar con el dedo */
  transition: opacity .9s ease;
}
/* cuando ya se descubrió lo suficiente, se cae el resto de la pintura */
.talla.visto .talla__pintura{ opacity: 0; pointer-events: none; }

/* La franja del medio: pintura que no se despega.
   Es la línea que Elina no consigue leer en la carta.
   Para descubrirla más adelante, bajá la opacidad de acá. */
.talla__pegada{
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;                    /* el recorte lo pone el JS con la zona */
}
.talla__pegada i{                       /* la franja, inclinada como la tabla */
  position: absolute; left: -16%; right: -16%; top: 0; bottom: 0;
  display: block;
}
.talla.visto .talla__tabla{ cursor: zoom-in; }

.talla figcaption{
  margin-top: 1.2rem;
  font-family: var(--serif-lectura); font-style: italic;
  font-size: .96rem; color: #6E5F45;
  opacity: 0; transition: opacity .6s ease .5s;
}
.talla.visto figcaption{ opacity: 1; }

.talla__pista{
  margin-top: .7rem !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important; letter-spacing: .2em; text-transform: uppercase;
  color: #8A7A5F !important;
  text-align: center !important;
}

/* ============================================================
   19. LAS DOS MITADES DEL PAÑUELO (Carta VII)
   ------------------------------------------------------------
   Una sola fotografía partida por la costura. El lector acerca
   las dos mitades y el pañuelo vuelve a ser uno.
   ============================================================ */

.unir{
  margin: 3rem auto 2.6rem;
  width: 100%;
  max-width: 620px;
  text-align: center;
}

.unir__mesa{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;   /* lo ajusta el JS con la proporción real de la foto */
  cursor: grab;
  touch-action: none;
  perspective: 900px;
}
.unir.unido .unir__mesa{ cursor: zoom-in; }

.unir__mitad{
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  transition: transform .55s cubic-bezier(.3,.8,.3,1);
  filter: drop-shadow(0 14px 26px rgba(20,14,8,.42));
}
.unir__mitad--a, .unir__mitad--b{ transform-origin: center center; }

/* cuando se juntan, la sombra se vuelve una sola y desaparece la costura */
.unir.unido .unir__mitad{
  transition: transform .8s cubic-bezier(.25,1.2,.4,1), filter .8s ease;
  filter: drop-shadow(0 16px 30px rgba(20,14,8,.38));
}

.unir figcaption{
  margin-top: 1.3rem;
  font-family: var(--serif-lectura); font-style: italic;
  font-size: .96rem; color: #6E5F45;
  opacity: 0; transition: opacity .6s ease .5s;
}
.unir.unido figcaption{ opacity: 1; }

.unir__pista{
  margin-top: .7rem !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important; letter-spacing: .2em; text-transform: uppercase;
  color: #8A7A5F !important;
  text-align: center !important;
}

@media (prefers-reduced-motion: reduce){
  .unir__mitad{ transition: none; }
}

/* ============================================================
   20. LA CARTA DE S. (Carta VIII)
   ------------------------------------------------------------
   Su única voz en toda la primera entrega. Letra más firme,
   menos cuidada, tinta más negra, papel más pobre.
   ============================================================ */

.carta__suya-marco{
  margin: 2.6rem auto;
  max-width: 30rem;
  padding: 2rem 2.2rem;
  background: #EFE9DC;
  background-image: var(--papel);
  border-radius: 2px;
  box-shadow:
    0 12px 30px rgba(20,14,8,.22),
    inset 0 0 0 1px rgba(120,100,70,.18);
  transform: rotate(-.5deg);
}
.carta__suya{
  margin: 0 !important;
  white-space: pre-line;              /* respeta los renglones sueltos */
  font-family: var(--manuscrita);
  font-size: 1.24rem;
  line-height: 1.85;
  color: #14100C;                     /* tinta más negra que la de ella */
  text-align: left !important;
  text-indent: 0 !important;
}

/* ============================================================
   21. EL ÚLTIMO SOBRE (final de la Carta VIII)
   ------------------------------------------------------------
   Un sobre chico, sin nombre, después de la despedida. Se toca,
   se abre la solapa y sale una nota corta. Es lo último que lee
   el lector de la primera entrega.
   ============================================================ */

.ultimo{
  margin: 4.5rem auto 1rem;
  text-align: center;
  perspective: 900px;
}

.ultimo__boton{
  background: none; border: 0; padding: 0;
  cursor: pointer; display: inline-block;
}
.ultimo__boton:focus-visible{ outline: 2px solid var(--dorado); outline-offset: 6px; }

.ultimo__sobre{
  position: relative; display: block;
  width: 232px; height: 148px;
  transition: transform .5s ease;
  transform-style: preserve-3d;
}
.ultimo__boton:hover .ultimo__sobre{ transform: translateY(-3px); }

.ultimo__frente, .ultimo__solapa{
  position: absolute; left: 0; right: 0;
}
.ultimo__frente{
  bottom: 0; height: 148px;
  border-radius: 2px;
  background: linear-gradient(168deg, #F0E7D3 0%, #E2D5B9 100%);
  box-shadow: 0 12px 28px rgba(20,14,8,.26), inset 0 1px 0 rgba(255,255,255,.55);
}
.ultimo__solapa{
  top: 0; height: 94px;
  transform-origin: top center;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(188deg, #EFE5CF 0%, #DDD0B1 100%);
  filter: drop-shadow(0 3px 4px rgba(20,14,8,.18));
  transition: transform .85s cubic-bezier(.3,.8,.3,1);
  z-index: 2;
}
.ultimo__sello{
  position: absolute; left: 50%; top: 80px;
  width: 30px; height: 30px; margin-left: -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #C97A62, #8E3F2E 62%, #5E2418);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  z-index: 3;
  transition: transform .45s ease, opacity .45s ease;
}

/* la nota: sale por debajo del sobre */
.ultimo__nota{
  position: relative;
  margin: 0 auto;
  max-width: 27rem;
  padding: 0 1.6rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-18px);
  background: #F4EFE3;
  background-image: var(--papel);
  border-radius: 2px;
  box-shadow: 0 0 0 rgba(20,14,8,0);
  transition: max-height .9s ease, opacity .5s ease .25s,
              transform .9s cubic-bezier(.25,1.05,.35,1),
              padding .9s ease, box-shadow .9s ease, margin .9s ease;
  text-align: left;
  z-index: 1;
}
.ultimo__texto{
  margin: 0 !important;
  white-space: pre-line;
  font-family: var(--manuscrita-ella, var(--manuscrita));
  font-size: 1.12rem !important;
  line-height: 1.8;
  color: #241B14;
  text-indent: 0 !important;
}

/* --- abierto --- */
.ultimo.abierto .ultimo__solapa{ transform: rotateX(-168deg); }
.ultimo.abierto .ultimo__sello{ opacity: 0; transform: scale(.6) translateY(-6px); }
.ultimo.abierto .ultimo__boton{ cursor: default; }
.ultimo.abierto .ultimo__nota{
  margin-top: -34px;
  max-height: 46rem;
  opacity: 1;
  transform: translateY(0);
  padding: 2.1rem 1.9rem 1.9rem;
  box-shadow: 0 14px 34px rgba(20,14,8,.22);
}

.ultimo__pista{
  margin-top: 1.1rem !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important; letter-spacing: .2em; text-transform: uppercase;
  color: #8A7A5F !important;
  text-align: center !important;
  min-height: 1em;
}

@media (max-width: 700px){
  .ultimo__sobre{ width: 196px; height: 126px; }
  .ultimo__solapa{ height: 80px; }
  .ultimo__sello{ top: 68px; }
  .ultimo__texto{ font-size: 1.04rem !important; }
}
@media (prefers-reduced-motion: reduce){
  .ultimo__solapa, .ultimo__nota{ transition: none; }
}

/* ============================================================
   22. EL EMBARQUE (final de la Carta VIII)
   ------------------------------------------------------------
   Los dos pasajes y un botón. El lector toca EMBARCAR, cae el
   sello de tinta y recién entonces la carta se despide.
   ============================================================ */

.embarque{
  margin: 3rem auto 2.4rem;
  width: 100%;
  max-width: 560px;
  text-align: center;
}

.embarque__mesa{
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(20,14,8,.34);
}
.embarque__mesa img{ display: block; width: 100%; height: auto; }

/* el sello: cae girado, tinta violeta como la del agente en los pasajes */
.embarque__sello{
  position: absolute;
  left: 52%; top: 60%;
  transform: translate(-50%,-50%) rotate(-9deg) scale(2.3);
  opacity: 0;
  pointer-events: none;
  padding: .55rem 1.3rem .5rem;
  border: 3px solid #4A3A6B;
  border-radius: 2px;
  color: #4A3A6B;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .1em;
  white-space: nowrap;
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px rgba(74,58,107,.35);
}
.embarque__tinta{ display: block; }
.embarque.sellado .embarque__sello{
  animation: caeSello .4s cubic-bezier(.3,1.5,.5,1) forwards;
}
@keyframes caeSello{
  0%   { opacity: 0;   transform: translate(-50%,-50%) rotate(-9deg) scale(2.3); }
  70%  { opacity: .92; transform: translate(-50%,-50%) rotate(-9deg) scale(.95); }
  100% { opacity: .82; transform: translate(-50%,-50%) rotate(-9deg) scale(1); }
}

/* los pasajes acusan el golpe */
.embarque.sellado .embarque__mesa{ animation: golpeMesa .42s ease; }
@keyframes golpeMesa{
  0%,60% { transform: none; }
  72%    { transform: translateY(2px) scale(.997); }
  100%   { transform: none; }
}

.embarque__boton{
  margin-top: 1.8rem;
  padding: .95rem 2.6rem;
  background: var(--marino);
  color: #F4EFE4;
  border: 0; border-radius: 2px;
  font-family: var(--sans);
  font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, opacity .5s ease, transform .5s ease;
}
.embarque__boton:hover{ background: #1E3350; }
.embarque.sellado .embarque__boton{
  opacity: 0; transform: translateY(-6px); pointer-events: none;
}

.embarque__destino{
  margin: -2.6rem 0 0 !important;
  font-family: var(--sans) !important;
  font-size: .64rem !important; letter-spacing: .22em; text-transform: uppercase;
  color: #8A7A5F !important;
  text-align: center !important;
  opacity: 0;
  transition: opacity .8s ease .55s;
}
.embarque.sellado .embarque__destino{ opacity: 1; }

/* la despedida y la firma esperan a que el lector suba */
.lector.pide-embarque .carta__firma{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s ease .3s, transform 1s ease .3s;
  pointer-events: none;
}
.lector.pide-embarque.embarcado .carta__firma{
  opacity: 1; transform: none; pointer-events: auto;
}

@media (max-width: 700px){
  .embarque__sello{ font-size: 1rem; padding: .6rem 1.1rem; border-width: 3px; }
  .embarque__boton{ padding: .9rem 2rem; }
}
@media (prefers-reduced-motion: reduce){
  .embarque.sellado .embarque__sello{ animation: none; opacity: .88;
    transform: translate(-50%,-50%) rotate(-11deg) scale(1); }
  .embarque.sellado .embarque__mesa{ animation: none; }
}

/* ============================================================
   23. LA BITÁCORA DEL LECTOR
   ------------------------------------------------------------
   Los sobres ya no son todos iguales: los que llegaron se abren
   con el lacre, los que faltan siguen cerrados, y el que acaba
   de llegar se distingue de los demás.
   ============================================================ */

/* el que acaba de llegar: respira */
.sobre--nueva{ position: relative; }
.sobre--nueva .sobre0{ animation: respiraSobre 3.4s ease-in-out infinite; }
@keyframes respiraSobre{
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-4px) scale(1.012); }
}
.sobre--nueva .sobre0__sello{
  box-shadow: 0 0 0 0 rgba(142,63,46,.5);
  animation: latidoLacre 2.6s ease-out infinite;
}
@keyframes latidoLacre{
  0%   { box-shadow: 0 0 0 0 rgba(142,63,46,.45); }
  70%  { box-shadow: 0 0 0 16px rgba(142,63,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(142,63,46,0); }
}
/* y se anuncia */
.sobre--nueva .sobre__estado{
  color: #8E3F2E !important;
  font-weight: 600;
}

/* los que todavía no llegaron: apagados, sin insinuar que se pueden abrir */
.sobre--cerrado{ opacity: .62; transition: opacity .4s ease; }
.sobre--cerrado:hover{ opacity: .82; }
.sobre--cerrado .sobre__estado{ color: #A2937A !important; }

/* los ya leídos: presentes, tranquilos */
.sobre.leida .sobre__estado{ color: #6E5F45 !important; }

@media (prefers-reduced-motion: reduce){
  .sobre--nueva .sobre0,
  .sobre--nueva .sobre0__sello{ animation: none; }
}

/* --- La ventana del sobre cerrado: nunca arranca pidiendo un código --- */
.modal__oferta{
  display: flex; flex-wrap: wrap; gap: .8rem;
  justify-content: center;
  margin-top: 1.9rem;
}
/* al que ya compró no se le vuelve a ofrecer la compra */
.modal--comprada .modal__oferta{ display: none; }

.modal__rescate{ margin-top: 1.9rem; }
.modal__enlace{
  background: none; border: 0; padding: .3rem;
  font-family: var(--sans);
  font-size: .74rem; letter-spacing: .04em;
  color: #9A8B71;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.modal__enlace:hover{ color: var(--dorado-viejo); }

/* hidden tiene que ganarle a cualquier display de más arriba */
[hidden]{ display: none !important; }
.modal--compra .modal__oferta,
.modal--compra .modal__rescate{ display: none; }


/* ============================================================
   24. LAS TRES MANERAS
   Lo nuevo de la portada: las tres formas de tener la historia
   (leerla, regalártela, regalarla).
   ============================================================ */

/* --- Las tres palabras del hero, bajo la bajada --- */
.hero__modos{
  list-style: none;
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 0 1.5rem;
  margin: 0 0 2.2rem;
  padding: 0;
}
.hero__modos li{
  position: relative;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(233,222,201,.92);
  padding: .35rem 0;
  text-shadow: 0 1px 14px rgba(6,10,16,.5);
}
/* el puntito dorado que separa una palabra de la siguiente.
   Va pegado a la palabra de la izquierda para que, si la fila se
   parte en dos renglones, no quede un punto suelto al principio. */
.hero__modos li:not(:last-child)::after{
  content: "";
  position: absolute; right: -.9rem; top: 50%;
  width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%;
  background: var(--dorado);
  opacity: .85;
}

/* --- La línea que cuenta que hay más que las cartas --- */
.hero__ademas{
  margin: 2.1rem 0 0;
  max-width: 46ch;
  font-family: var(--sans);
  font-size: .93rem;
  line-height: 1.7;
  color: rgba(240,234,223,.7);
  text-shadow: 0 1px 14px rgba(6,10,16,.45);
}
.hero__ademas a{
  color: var(--dorado);
  border-bottom: 1px solid rgba(194,161,106,.45);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: border-color .25s ease, color .25s ease;
}
.hero__ademas a:hover{ color: #E0C68F; border-color: rgba(224,198,143,.9); }

/* --- Las tres tarjetas, debajo de la fila de sobres --- */
.maneras{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 4.6rem auto 0;
  max-width: 1000px;
  border-top: 1px solid var(--beige);
}
.manera{
  display: flex; flex-direction: column; align-items: center;
  padding: 2.6rem 2rem 2.4rem;
  text-align: center;
  border-left: 1px solid var(--beige);
}
.manera:first-child{ border-left: 0; }

.manera__icono{
  width: 34px; height: 34px;
  color: var(--dorado);
  opacity: .9;
  margin-bottom: 1.1rem;
}
.manera h3{
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--marino);
  margin: 0 0 .7rem;
}
.manera p{
  font-family: var(--serif-lectura);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--gris-azul);
  margin: 0 0 1.3rem;
  max-width: 30ch;
  margin-inline: auto;
}
.manera .enlace-flecha{
  display: inline-block;
  margin-top: auto;   /* los tres enlaces quedan a la misma altura */
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dorado);
}
.manera .enlace-flecha:hover{ color: var(--dorado-viejo); }

/* --- La ventana de "Regalar" --- */
.modal__regalo{ display: none; }
.modal--regalo .modal__regalo{ display: block; }
.modal--regalo #modalCarta,
.modal--regalo #modalTexto,
.modal--regalo .modal__oferta,
.modal--regalo .modal__rescate,
.modal--regalo .modal__compra{ display: none; }
.modal--regalo .modal__regalo p{
  font-family: var(--serif-lectura);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: .9rem 0 1.7rem;
}

/* --- En el teléfono --- */
@media (max-width: 860px){
  .maneras{ grid-template-columns: 1fr; max-width: 460px; }
  .manera{
    border-left: 0;
    border-top: 1px solid var(--beige);
    padding: 2.1rem 1rem 1.9rem;
  }
  .manera:first-child{ border-top: 0; }
}
@media (max-width: 720px){
  .hero__modos{ gap: 0 1.3rem; margin-bottom: 1.9rem; }
  .hero__modos li{ font-size: .76rem; letter-spacing: .13em; }
  .hero__ademas{ font-size: .88rem; margin-top: 1.8rem; }
}


/* ============================================================
   25. EL EPÍGRAFE DE LA ESPERA  +  LAS TRES ÁREAS
   ============================================================ */

/* Las dos líneas que van encima de los sobres.
   Textos en contenido.js -> "espera.1" y "espera.2". */
.espera{
  margin: 2.4rem auto 3.4rem;
  max-width: 34ch;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.24rem, 2vw, 1.6rem);
  line-height: 1.62;
  color: var(--marino);
}
.espera span{ display: block; }
/* la segunda línea, más clara y un poco más separada */
.espera span + span{
  margin-top: .35rem;
  color: var(--dorado-viejo);
}

/* Los tres rótulos debajo de "Últimas historias" */
.categorias{
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 0 2.2rem;
  margin: -.6rem 0 3rem;
}
.categorias a{
  position: relative;
  text-decoration: none;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gris-azul);
  padding: .4rem 0;
  transition: color .25s ease;
}
.categorias a:hover{ color: var(--dorado-viejo); }
.categorias a:not(:last-child)::after{
  content: "";
  position: absolute; right: -1.16rem; top: 50%;
  width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%;
  background: var(--beige);
}

@media (max-width: 720px){
  .espera{ margin: 1.8rem auto 2.6rem; font-size: 1.2rem; }
  .categorias{ gap: 0 1.7rem; }
  .categorias a{ font-size: .74rem; }
}


/* ============================================================
   26. LA PÁGINA DE VENTA (las-cartas.html)
   ============================================================ */

/* En esta página el header no flota sobre una foto: empieza sólido. */
.pagina-venta .header{ position: sticky; }

/* --- Cabecera --- */
.venta__cabecera{
  background: var(--marfil);
  border-bottom: 1px solid var(--beige);
  padding: calc(var(--alto-header) + 4.6rem) 0 4.2rem;
}
.venta__cabecera-interior{ text-align: center; }
.venta__titulo{
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--marino);
  margin: .5rem 0 0;
}
.venta__bajada{
  max-width: 56ch; margin: 1.6rem auto 0;
  text-wrap: pretty;
  font-family: var(--serif-lectura);
  font-size: 1.14rem; line-height: 1.7;
  color: var(--negro-suave);
}
.venta__epigrafe{
  margin: 2.4rem auto 0;
  font-family: var(--serif); font-style: italic;
  font-size: 1.3rem; line-height: 1.6;
  color: var(--dorado-viejo);
}
.venta__epigrafe span{ display: block; }

/* --- De qué se trata --- */
.venta__sintesis{ padding: var(--aire) 0; background: var(--crema); }
.venta__grid{
  display: grid; grid-template-columns: .85fr 1fr;
  gap: 56px; align-items: start;
}
.venta__foto img{ width: 100%; display: block; border: 1px solid var(--beige); }
.venta__texto h2{
  font-family: var(--serif); font-size: 2rem; font-weight: 400;
  color: var(--marino); margin: 0 0 1.3rem;
}
.venta__texto p{
  font-family: var(--serif-lectura);
  font-size: 1.08rem; line-height: 1.78;
  color: var(--negro-suave);
  margin: 0 0 1.15rem;
}
/* Ficción + investigación. No es una aclaración al pie: es parte de lo que
   se ofrece, así que tiene título propio y un filo dorado a la izquierda. */
.venta__historia{
  margin-top: 2.1rem;
  padding: 1.5rem 0 .2rem 1.5rem;
  border-left: 2px solid var(--dorado);
}
.venta__historia-titulo{
  font-family: var(--serif);
  font-size: 1.24rem; line-height: 1.42;
  color: var(--marino);
  margin: 0 0 .7rem !important;
}
.venta__historia p:last-child{
  font-size: 1.01rem !important;
  color: var(--negro-suave);
  margin-bottom: 0 !important;
}

/* La misma idea, dicha de nuevo en la sección oscura */
.filete--tenue{ opacity: .4; margin-top: 3.2rem; }
.venta__pies{
  max-width: 46ch; margin: 2.4rem auto 0; text-align: center;
}
.venta__pies-titulo{
  font-family: var(--serif); font-style: italic;
  font-size: 1.36rem; line-height: 1.45;
  color: var(--dorado);
  margin: 0 0 .8rem;
}
.venta__pies p:last-child{
  font-family: var(--serif-lectura);
  font-size: 1.01rem; line-height: 1.7;
  color: rgba(240,234,223,.7);
  margin: 0;
}

/* La frase de posicionamiento, debajo del epígrafe */
.venta__linea{
  margin: 1.9rem auto 0;
  max-width: 44ch;
  font-family: var(--sans);
  font-size: .86rem;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--gris-azul);
  text-wrap: balance;
}

/* --- Cómo llega: los cuatro pasos --- */
.venta__pasos{ padding: var(--aire) 0; background: var(--crema-suave); }
.pasos{
  list-style: none; padding: 0;
  margin: 3.4rem auto 0; max-width: 1000px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--beige);
}
.pasos li{
  padding: 2.4rem 1.6rem;
  text-align: center;
  border-left: 1px solid var(--beige);
}
.pasos li:first-child{ border-left: 0; }
.pasos__numero{
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: 2.1rem; color: var(--dorado);
  margin-bottom: .6rem;
}
.pasos h3{
  font-family: var(--serif); font-size: 1.24rem; font-weight: 400;
  color: var(--marino); margin: 0 0 .55rem;
}
.pasos p{
  font-family: var(--serif-lectura); font-size: .99rem; line-height: 1.65;
  color: var(--gris-azul); margin: 0;
}

/* --- Los objetos: la sección oscura --- */
.venta__objetos{
  padding: var(--aire) 0;
  background: var(--carbon);
  color: var(--crema);
}
.titulo-centrado--claro{ color: var(--crema); }
.venta__objetos-bajada{
  max-width: 48ch; text-wrap: balance; margin: 1.6rem auto 0; text-align: center;
  font-family: var(--serif-lectura); font-size: 1.06rem; line-height: 1.72;
  color: rgba(240,234,223,.72);
}
.objetos{
  list-style: none; padding: 0;
  margin: 3.6rem auto 0; max-width: 940px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2.2rem 3.4rem;
}
.objetos li{
  padding-left: 1.5rem;
  border-left: 1px solid rgba(194,161,106,.32);
}
.objetos h3{
  font-family: var(--serif); font-size: 1.3rem; font-weight: 400;
  color: var(--crema); margin: 0 0 .4rem;
}
.objetos p{
  font-family: var(--serif-lectura); font-size: 1rem; line-height: 1.68;
  color: rgba(240,234,223,.66); margin: 0;
}
/* el último, si queda solo, ocupa las dos columnas */
.objetos li:last-child:nth-child(odd){ grid-column: 1 / -1; }

/* --- El índice de las nueve cartas --- */
.venta__indice{ padding: var(--aire) 0; background: var(--crema); }
.indice{
  list-style: none; padding: 0;
  margin: 3rem auto 0; max-width: 640px;
}
.indice li{
  display: flex; align-items: baseline; gap: .9rem;
  padding: .95rem .2rem;
  border-bottom: 1px solid var(--beige);
}
/* El número de carta es el renglón: las cartas I a VIII no llevan título
   (aparece cuando la carta llega). Sólo la Carta 0 muestra el suyo. */
.indice__n{
  flex: 0 0 auto;
  font-family: var(--serif); font-size: 1.22rem;
  color: var(--marino);
}
.indice__t{
  flex: 1 1 auto;
  font-family: var(--serif); font-style: italic;
  font-size: 1.1rem;
  color: var(--gris-azul);
}
.indice__t::before{ content: "— "; }
.indice__gratis{
  margin-left: auto;
  font-family: var(--sans); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dorado-viejo);
}
.indice__nota{
  max-width: 52ch; margin: 2.2rem auto 0; text-align: center;
  font-family: var(--serif-lectura); font-size: 1rem; line-height: 1.7;
  color: var(--gris-azul);
}

/* --- El bloque de compra --- */
.venta__compra{
  padding: var(--aire) 0;
  background: var(--petroleo);
  color: var(--crema);
}
.venta__compra-interior{ text-align: center; }
.venta__compra h2{
  font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 400; color: var(--crema); margin: .4rem 0 0;
}
.venta__precio{
  font-family: var(--serif); font-size: 2.4rem;
  color: var(--dorado); margin: 1.2rem 0 .3rem;
}
.venta__compra-texto{
  max-width: 44ch; margin: 1.2rem auto 2.4rem;
  font-family: var(--serif-lectura); font-size: 1.05rem; line-height: 1.72;
  color: rgba(240,234,223,.78);
}
.venta__botones{
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.venta__regalo{
  margin: 2.2rem 0 0;
  font-family: var(--sans); font-size: .92rem;
  color: rgba(240,234,223,.6);
}
.venta__regalo .modal__enlace{ color: var(--dorado); margin-left: .4rem; }
.venta__regalo .modal__enlace:hover{ color: #E0C68F; }

/* --- Preguntas --- */
.venta__preguntas{ padding: var(--aire) 0; background: var(--crema-suave); }
.faq{ max-width: 700px; margin: 3rem auto 0; }
.faq dt{
  font-family: var(--serif); font-size: 1.26rem;
  color: var(--marino);
  margin: 2.1rem 0 .5rem;
}
.faq dt:first-child{ margin-top: 0; }
.faq dd{
  margin: 0;
  font-family: var(--serif-lectura); font-size: 1.03rem; line-height: 1.75;
  color: var(--negro-suave);
}

/* --- Cierre --- */
.venta__cierre{
  padding: 5rem 0;
  background: var(--marfil);
  border-top: 1px solid var(--beige);
}
.venta__cierre-interior{ text-align: center; }
.venta__cierre-frase{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--dorado-viejo);
  margin: 0 0 2rem;
}

/* --- En el teléfono --- */
@media (max-width: 980px){
  .venta__grid{ grid-template-columns: 1fr; gap: 34px; }
  .pasos{ grid-template-columns: 1fr 1fr; }
  .pasos li:nth-child(3){ border-left: 0; }
  .pasos li:nth-child(n+3){ border-top: 1px solid var(--beige); }
}
@media (max-width: 720px){
  .venta__cabecera{ padding: calc(var(--alto-header) + 2.4rem) 0 2.8rem; }
  .venta__epigrafe{ font-size: 1.16rem; margin-top: 1.8rem; }
  .pasos{ grid-template-columns: 1fr; margin-top: 2.4rem; }
  .pasos li{ border-left: 0; border-top: 1px solid var(--beige); padding: 1.9rem 0; }
  .pasos li:first-child{ border-top: 0; }
  .objetos{ grid-template-columns: 1fr; gap: 1.7rem; margin-top: 2.6rem; }
  .indice li{ flex-wrap: wrap; gap: .2rem .6rem; }
  .indice__t{ flex-basis: 100%; }
  .indice__t::before{ content: none; }
  .indice__gratis{ margin-left: 0; }
  .venta__botones .boton{ width: 100%; text-align: center; }
}

/* La ventana de "todavía no están a la venta" */
.modal--pronto .modal__oferta,
.modal--pronto .modal__rescate,
.modal--pronto .modal__regalo,
.modal--pronto #modalCarta{ display: none; }


/* ============================================================
   27. EL MOVIMIENTO DEL HERO
   Dos cosas, las dos muy lentas y a propósito casi imperceptibles:
     1. la fotografía deriva (se acerca despacísimo, como una toma de cine)
     2. el texto entra en orden, uno detrás de otro, al cargar la página
   Al final del bloque, todo se apaga para quien pidió menos movimiento
   en su sistema operativo. Eso no se toca.
   ============================================================ */

/* --- 1. La deriva de la fotografía --- */
/* 44 segundos de ida y 44 de vuelta. Nadie lo "ve" moverse: se siente
   que la imagen está viva. Si te parece mucho, subí el número. */
.hero__imagen{
  animation: deriva 44s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes deriva{
  from{ transform: scale(1)    translate3d(0, 0, 0); }
  to  { transform: scale(1.07) translate3d(-1.2%, -0.8%, 0); }
}

/* --- 2. La entrada del texto --- */
/* Cada elemento sube un poco y aparece. El orden es el orden de lectura:
   primero el nombre, después el título, después lo demás.
   Para cambiar el ritmo, tocá los "animation-delay" de abajo. */
@keyframes asomar{
  from{ opacity: 0; transform: translate3d(0, 16px, 0); }
  to  { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes asomarFilete{
  from{ opacity: 0; transform: scaleX(.2); }
  to  { opacity: 1; transform: scaleX(1); }
}

.hero__contenido > *{
  animation: asomar .95s cubic-bezier(.19,.76,.28,1) both;
}
.hero__contenido > .etiqueta      { animation-delay: .10s; }
.hero__contenido > .filete        { animation: asomarFilete 1.1s cubic-bezier(.19,.76,.28,1) both .22s;
                                    transform-origin: left center; }
.hero__contenido > .hero__titulo  { animation-delay: .30s; }
.hero__contenido > .hero__bajada  { animation-delay: .58s; }
.hero__contenido > .hero__modos   { animation-delay: .76s; }
.hero__contenido > .hero__acciones{ animation-delay: .90s; }
.hero__contenido > .hero__ademas  { animation-delay: 1.04s; }

/* La flecha de abajo aparece last, cuando ya hay algo que leer */
.hero__flecha{ animation: asomar 1s ease both 1.5s, respirar 3.4s ease-in-out infinite 2.5s; }

/* La cabecera de la página de venta entra igual, pero más rápido:
   ahí la persona ya sabe a qué vino. */
.venta__cabecera-interior > *{
  animation: asomar .8s cubic-bezier(.19,.76,.28,1) both;
}
.venta__cabecera-interior > .etiqueta      { animation-delay: .06s; }
.venta__cabecera-interior > .venta__titulo { animation-delay: .16s; }
.venta__cabecera-interior > .filete        { animation-delay: .28s; }
.venta__cabecera-interior > .venta__bajada { animation-delay: .40s; }
.venta__cabecera-interior > .venta__epigrafe{ animation-delay: .56s; }
.venta__cabecera-interior > .venta__linea  { animation-delay: .70s; }

/* --- Para quien pidió menos movimiento: todo quieto --- */
@media (prefers-reduced-motion: reduce){
  .hero__imagen,
  .hero__flecha,
  .hero__contenido > *,
  .venta__cabecera-interior > *{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ============================================================
   28. LA BRUMA
   ============================================================ */

/* --- La bruma --- */
/* Dos capas de niebla que cruzan el fiordo a distinta velocidad.
   Para más niebla, subí los .16 / .12 de abajo. Para menos, bajalos. */
.hero__bruma{
  /* Sólo el cielo: de arriba hasta poco antes de la orilla. */
  position: absolute; inset: -14% -45% auto -45%; height: 52%;
  pointer-events: none;
  will-change: transform;
}
/* Van arriba, entre las nubes, no sobre el agua: el fiordo es un espejo
   y ahí la niebla le discutía al reflejo. Y quedan a la derecha, que es
   donde la fotografía respira (a la izquierda está el texto).
   Para MÁS niebla, subí los .30 / .24. Para menos, bajalos.
   Para que cruce más rápido, bajá los 70s / 112s. */
.hero__bruma--a{
  background:
    radial-gradient(ellipse 46% 15% at 44% 13%, rgba(222,232,241,.60), transparent 70%),
    radial-gradient(ellipse 56% 12% at 72% 24%, rgba(213,225,237,.50), transparent 72%);
  animation: brumaA 26s linear infinite;
}
.hero__bruma--b{
  background:
    radial-gradient(ellipse 50% 13% at 78% 9%,  rgba(207,221,235,.52), transparent 70%),
    radial-gradient(ellipse 40% 12% at 54% 27%, rgba(223,233,243,.44), transparent 74%);
  animation: brumaB 39s linear infinite;
}
@keyframes brumaA{
  from{ transform: translate3d(-40%, 1.5%, 0); }
  to  { transform: translate3d(42%, -5%, 0); }
}
@keyframes brumaB{
  from{ transform: translate3d(40%, 3%, 0); }
  to  { transform: translate3d(-40%, -3%, 0); }
}

/* Para quien pidió menos movimiento: la bruma se queda quieta */
@media (prefers-reduced-motion: reduce){
  .hero__bruma{ animation: none !important; }
}


/* ============================================================
   29. EL FAROL DE LA FOTOGRAFÍA
   Un resplandor cálido sobre la llama del farol, que late despacio.
   La posición está medida sobre imagenes/cartas-composicion.jpg:
   si cambiás la foto, hay que mover "left" y "top".
   ============================================================ */
.destacada__foto{ position: relative; }
.destacada__foto img{ position: relative; z-index: 0; }

.destacada__farol{
  position: absolute;
  left: 2.5%;            /* dónde está la llama, de izquierda a derecha */
  top: 41%;              /* dónde está la llama, de arriba abajo */
  width: 24%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255,198,116,.40) 0%,
              rgba(255,180,88,.20) 32%,
              rgba(255,170,80,.07) 56%,
              rgba(255,170,80,0) 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: farol 6.5s ease-in-out infinite;
  will-change: opacity, transform;
}

/* El latido: nunca se apaga, sólo respira. */
@keyframes farol{
  0%,100%{ opacity: .70; transform: translate(-50%,-50%) scale(1); }
  34%    { opacity: 1;   transform: translate(-50%,-50%) scale(1.07); }
  58%    { opacity: .60; transform: translate(-50%,-50%) scale(.97); }
  78%    { opacity: .88; transform: translate(-50%,-50%) scale(1.03); }
}

@media (prefers-reduced-motion: reduce){
  .destacada__farol{ animation: none !important; opacity: .8; }
}


/* ============================================================
   30. EL RESUMEN DE LA COMPRA (dentro de la ventana)
   Lo que ve quien acaba de terminar la Carta 0 y quiere seguir.
   ============================================================ */
.modal__resumen{ display: none; }
.modal--resumen .modal__resumen{ display: block; }
.modal--resumen .modal__oferta,
.modal--resumen .modal__rescate,
.modal--resumen .modal__regalo,
.modal--resumen .modal__compra,
.modal--resumen #modalCarta{ display: none; }

.resumen{
  list-style: none; padding: 0;
  margin: 1.6rem auto 1.7rem;
  max-width: 42ch;
  text-align: left;
}
.resumen li{
  position: relative;
  padding: .55rem 0 .55rem 1.6rem;
  font-family: var(--serif-lectura);
  font-size: 1.02rem; line-height: 1.6;
  color: var(--negro-suave);
  border-bottom: 1px solid var(--beige);
}
.resumen li:last-child{ border-bottom: 0; }
/* el puntito dorado de cada línea */
.resumen li::before{
  content: "";
  position: absolute; left: .2rem; top: 1.15rem;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--dorado);
}
.resumen__precio{
  font-family: var(--serif);
  font-size: 1.9rem; color: var(--marino);
  margin: 0 0 1.3rem;
}
.resumen__todo{
  margin: 1.4rem 0 0;
  font-family: var(--sans); font-size: .86rem;
}
.resumen__todo a{
  color: var(--gris-azul);
  border-bottom: 1px solid var(--beige);
  padding-bottom: 1px;
}
.resumen__todo a:hover{ color: var(--dorado-viejo); }


/* ============================================================
   31. EL AVISO DE LA CARTA 0
   Para quien compró sin haberla leído. Sólo aparece cuando hace falta.
   ============================================================ */
.aviso-cero{
  max-width: 54ch;
  margin: 0 auto 2.4rem;
  padding: .9rem 1.3rem;
  text-align: center;
  border: 1px solid var(--beige);
  border-left: 2px solid var(--dorado);
  background: var(--crema);
  font-family: var(--serif-lectura);
  font-size: 1rem; line-height: 1.6;
  color: var(--negro-suave);
}
.aviso-cero .modal__enlace{
  color: var(--dorado-viejo);
  margin-left: .4rem;
  font-family: var(--sans); font-size: .88rem;
}
.aviso-cero .modal__enlace:hover{ color: var(--marino); }


/* ============================================================
   32. AJUSTES DE LA PÁGINA DE VENTA
   Ahora son cinco pasos, y la sección oscura lleva una fotografía.
   ============================================================ */
.pasos{ grid-template-columns: repeat(5, 1fr); }

/* La fotografía de la sección oscura, a lo ancho */
.venta__banda{
  margin: 3.2rem auto 0;
  max-width: 880px;
}
.venta__banda img{
  width: 100%; height: 300px;
  object-fit: cover; object-position: 50% 42%;
  display: block;
  box-shadow: 0 26px 70px rgba(0,0,0,.5);
}

@media (max-width: 1100px){
  .pasos{ grid-template-columns: repeat(3, 1fr); }
  .pasos li:nth-child(3n+1){ border-left: 0; }
  .pasos li:nth-child(n+4){ border-top: 1px solid var(--beige); }
}
@media (max-width: 720px){
  .pasos{ grid-template-columns: 1fr; }
  .pasos li{ border-left: 0 !important; border-top: 1px solid var(--beige); }
  .pasos li:first-child{ border-top: 0; }
  .venta__banda img{ height: 210px; }
}


/* ============================================================
   33. LA PÁGINA DE VENTA, SEGUNDA VUELTA
   El resumen de arriba, el botón temprano y los remates.
   ============================================================ */

/* Las dos líneas de resumen de la cabecera */
.venta__resumen-alto{
  max-width: 58ch; margin: .9rem auto 0;
  font-family: var(--serif-lectura);
  font-size: 1.04rem; line-height: 1.72;
  color: var(--negro-suave);
  text-wrap: pretty;
}

/* El botón de arriba, para el que ya se decidió */
.venta__cta-alta{ margin-top: 2.4rem; }
.venta__cta-nota{
  margin: .85rem 0 0;
  font-family: var(--sans);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-azul);
}
.venta__cta-nota--clara{ color: rgba(240,234,223,.55); margin-top: 1rem; }
.venta__cabecera .venta__linea{ margin-top: 2.3rem; }

/* El remate de la sección oscura */
.venta__objetos-remate{
  max-width: 46ch; margin: 1.5rem auto 0; text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: 1.24rem; line-height: 1.5;
  color: rgba(247,242,232,.88);
}

/* La línea de arriba del índice */
.indice__intro{
  max-width: 52ch; margin: 2.4rem auto -.6rem; text-align: center;
  font-family: var(--serif-lectura); font-size: 1.02rem; line-height: 1.7;
  color: var(--gris-azul);
}

/* En el bloque de compra el precio va antes de los botones y pesa */
.venta__compra .venta__precio{ margin: 1.6rem 0 2rem; }


/* ============================================================
   34. LA SECCIÓN "QUÉ RECIBIRÁS" (oscura y fusionada)
   ============================================================ */
.venta__recibiras{
  max-width: 62ch; margin: 2.4rem auto 0;
  text-align: center;
}
.venta__recibiras p{
  font-family: var(--serif-lectura);
  font-size: 1.05rem; line-height: 1.75;
  color: rgba(240,234,223,.76);
  margin: 0 0 1.15rem;
}
.venta__recibiras p:last-child{ margin-bottom: 0; }
.venta__recibiras--cierre{ margin-top: 2.2rem; }

/* Los botones del bloque de compra, cuando son tres */
.venta__compra .venta__botones .boton{ font-size: .72rem; letter-spacing: .13em; }

/* ===========================================================
   35. EL SELECTOR DE IDIOMA, ESCONDIDO POR AHORA
   ===========================================================
   Sólo la Carta 0 está traducida al inglés. Hasta que estén
   las demás, el botón ES | EN no se muestra.
   PARA VOLVER A MOSTRARLO: borrá las dos líneas de abajo.     */
.idiomas{ display: none; }


/* ===========================================================
   36. LA BITÁCORA SE PRESENTA
   ===========================================================
   Las dos líneas que rodean la fila de sobres.                */
.bitacora-rotulo{ text-align: center; margin: 2.6rem 0 2.4rem; }
.bitacora-rotulo .filete{ margin: .9rem auto 1.3rem; }
.etiqueta--dorada{ color: var(--dorado-viejo) !important; }

.bitacora-intro{
  max-width: 48ch; margin: 0 auto;
  text-align: center;
  /* En la fuente de la prosa, no en la de los botones: esta línea
     pertenece a la historia, no a la interfaz. */
  font-family: var(--serif-lectura);
  font-size: 1.12rem; line-height: 1.7;
  color: var(--tinta-suave);
}
.bitacora-aparatos{
  max-width: 56ch; margin: 1.9rem auto 0;
  text-align: center;
  font-size: .82rem; line-height: 1.65;
  color: rgba(22,39,63,.55);
}

/* La línea del orden de lectura, arriba de los tres botones de compra */
.venta__orden{
  max-width: 50ch; margin: 0 auto 1.6rem;
  font-size: .9rem; line-height: 1.7;
  color: rgba(247,242,232,.72);
}


/* ===========================================================
   37. LO QUE TODAVÍA NO ESTÁ PUBLICADO
   ===========================================================
   Las "Últimas historias" de la portada son hoy tres ejemplos
   inventados, con enlaces que no llevan a ninguna parte. Un
   artículo falso con un botón "Leer" que no hace nada cuesta
   más confianza que no tener blog.

   Se esconde la sección entera y también los enlaces del menú
   y del pie que apuntaban ahí, para no dejar links rotos.

   PARA VOLVER A MOSTRARLO, el día que haya un artículo de
   verdad: borrá este bloque entero, de acá hasta el final.    */
.blog,
.hero__ademas,
.menu a[href$="#historias"],
.menu a[href$="#viajes"],
.menu a[href$="#cuadernos"],
.pie li:has(> a[href$="#historias"]),
.pie li:has(> a[href$="#viajes"]),
.pie li:has(> a[href$="#cuadernos"]){
  display: none !important;
}


/* El "Términos y privacidad" del pie todavía no tiene página detrás.
   PARA MOSTRARLO: creá la página, cambiá el href="#" del pie por su
   dirección, y borrá estas dos líneas. */
.pie__legal a[href="#"]{ display: none !important; }


/* ===========================================================
   38. REGALAR — LA TARJETA
   ===========================================================
   El formulario no tiene que parecer un formulario. Tiene que
   parecer que estás escribiendo una tarjeta.                  */

.regalar{ padding: calc(var(--alto-header) + 4.5rem) 0 6rem; background: var(--marfil); }

.regalar__cabecera{ text-align: center; margin-bottom: 3.2rem; }
.regalar__cabecera h1{
  font-family: var(--serif); font-weight: 400; color: var(--marino);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: .7rem 0 0;
}
.regalar__bajada{
  max-width: 48ch; margin: 1.5rem auto 0;
  font-family: var(--serif-lectura); font-size: 1.08rem; line-height: 1.75;
  color: var(--gris-azul);
}
.regalar__precio{
  margin: 1.6rem 0 0;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(22,39,63,.5);
}
.regalar__precio [data-precio]{ color: var(--dorado-viejo); letter-spacing: .06em; }

/* --- La tarjeta --- */
.tarjeta{
  max-width: 34rem; margin: 0 auto;
  background: #FFFDF8;
  border: 1px solid rgba(194,161,106,.35);
  box-shadow: 0 18px 50px rgba(22,39,63,.07);
  padding: 2.6rem 2.4rem 2.2rem;
}
.tarjeta__grupo{
  margin: 0 0 1.4rem;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dorado-viejo);
}
.tarjeta__filete{ display: block; margin: 2.2rem 0; }

/* --- Un campo --- */
.campo{ display: block; margin-bottom: 1.5rem; }
.campo:last-of-type{ margin-bottom: 0; }
.campo__rotulo{
  display: block; margin-bottom: .45rem;
  font-family: var(--serif-lectura); font-size: 1rem; color: var(--marino);
}
.campo input,
.campo textarea{
  width: 100%; box-sizing: border-box;
  font-family: var(--sans); font-size: 1rem; color: var(--tinta);
  padding: .68rem .8rem;
  background: #FFFFFF;
  border: 1px solid rgba(22,39,63,.18);
  border-radius: 2px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo input:focus,
.campo textarea:focus{
  outline: none;
  border-color: var(--dorado-viejo);
  box-shadow: 0 0 0 3px rgba(194,161,106,.16);
}
.campo__ayuda{
  display: flex; gap: 1rem; justify-content: space-between; align-items: baseline;
  margin-top: .4rem;
  font-size: .76rem; line-height: 1.5; color: rgba(22,39,63,.52);
}
.campo--falta input,
.campo--falta textarea{ border-color: #A8503F; background: #FFFAF8; }

/* --- La dedicatoria: con aire, como un papel --- */
.campo--dedicatoria textarea{
  font-family: var(--serif-lectura); font-size: 1.02rem; line-height: 1.7;
  resize: vertical; min-height: 6.5rem;
}
.campo__cuenta{ flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.campo__cuenta--poco{ color: #A8503F; }

/* --- El pie de la tarjeta --- */
.tarjeta__pie{ margin-top: 2.4rem; text-align: center; }
.tarjeta__pie .boton{ width: 100%; }
.tarjeta__nota{
  margin: 1rem 0 0;
  font-size: .78rem; color: rgba(22,39,63,.52);
}
.tarjeta__error{
  margin: 1.8rem 0 0; padding: .8rem 1rem;
  background: #FFF4F1; border-left: 2px solid #A8503F;
  font-size: .9rem; line-height: 1.6; color: #7A3527;
}

/* El campo trampa para los robots. Invisible, pero no con
   display:none, porque algunos robots lo detectan. */
.campo--trampa{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
}

@media (max-width: 620px){
  .tarjeta{ padding: 2rem 1.4rem 1.8rem; }
}


/* ===========================================================
   39. EL HUMO DE LA TAZA
   ===========================================================
   Va encima de la fotografía de la protagonista, sobre la taza
   de té. Tres plumas de humo que suben, se ensanchan y se
   desvanecen, cada una con su propio ritmo para que la
   secuencia no se repita nunca igual.

   El humo se dibuja con blanco a muy baja opacidad y en modo
   "screen": sólo agrega luz. Por eso necesita fondo oscuro
   detrás — arriba de la taza hay madera en sombra, que es
   justo lo que hace falta.

   PARA MOVERLO si algún día cambia la foto:
     left   = el centro de la taza, menos la mitad del ancho
     bottom = la altura del borde de la taza
   PARA MÁS HUMO: subí el .55 de la opacidad.
   PARA QUE SUBA MÁS ALTO: subí el height.                     */

.destacada__vapor{
  position: absolute;
  left: 62.5%;      /* el centro de la taza está en el 66% */
  bottom: 50%;      /* el borde de la taza, a media altura */
  width: 7.5%;
  height: 20%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.destacada__vapor i{
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse 40% 26% at 50% 86%,
              rgba(255,252,244,.55), rgba(255,252,244,0) 70%);
  filter: blur(6px);
  opacity: 0;
  will-change: transform, opacity;
}
/* Tres duraciones que no son múltiplos entre sí: el ciclo completo
   tarda minutos en repetirse, así que se ve siempre distinto. */
.destacada__vapor i:nth-child(1){ animation: vapor 7.3s ease-in-out infinite    0s; }
.destacada__vapor i:nth-child(2){ animation: vaporB 8.9s ease-in-out infinite 2.6s; }
.destacada__vapor i:nth-child(3){ animation: vapor 6.7s ease-in-out infinite  5.1s; }

@keyframes vapor{
  0%   { opacity: 0;   transform: translate3d(0, 12%, 0) scale(.55); }
  22%  { opacity: .95; }
  60%  { opacity: .5;  }
  100% { opacity: 0;   transform: translate3d(16%, -78%, 0) scale(1.6); }
}
@keyframes vaporB{
  0%   { opacity: 0;   transform: translate3d(0, 10%, 0) scale(.6); }
  26%  { opacity: .85; }
  62%  { opacity: .45; }
  100% { opacity: 0;   transform: translate3d(-13%, -84%, 0) scale(1.75); }
}

/* Para quien pidió menos movimiento: el humo no aparece. Una taza
   quieta se entiende igual; una nube blanca congelada, no. */
@media (prefers-reduced-motion: reduce){
  .destacada__vapor{ display: none; }
}


/* ===========================================================
   40. SOBRE MÍ — LA PÁGINA
   ===========================================================
   El retrato queda fijo a la izquierda mientras el texto sube.
   En el teléfono se apila: primero la foto, después el texto.  */

.quien{ padding: calc(var(--alto-header) + 4.5rem) 0 6rem; background: var(--marfil); }

.quien__cabecera{ text-align: center; margin-bottom: 3.6rem; }
.quien__cabecera h1{
  font-family: var(--serif); font-weight: 400; color: var(--marino);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: .7rem 0 0;
}

.quien__grid{
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px;
  align-items: start;
  max-width: 62rem; margin: 0 auto;
}
.quien__foto{ margin: 0; position: sticky; top: calc(var(--alto-header) + 2.5rem); }
.quien__foto img{
  width: 100%; height: auto; display: block;
  box-shadow: 0 22px 60px rgba(22,39,63,.16);
}

.quien__texto p{
  font-family: var(--serif-lectura);
  font-size: 1.1rem; line-height: 1.82;
  color: var(--gris-azul);
  margin-bottom: 1.5rem;
}
/* El primer párrafo entra un punto más grande: es la presentación. */
.quien__primero{
  font-size: 1.32rem !important;
  color: var(--marino) !important;
  line-height: 1.6 !important;
}

/* La frase que sostiene toda la página */
.quien__frase{
  margin: 2.4rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--dorado-viejo);
}
.quien__frase p{
  font-family: var(--serif); font-style: italic;
  font-size: 1.42rem; line-height: 1.5;
  color: var(--marino);
  margin: 0 !important;
}

.quien__filete{ display: block; margin: 2.6rem 0 2.2rem; }
.quien__cierre{
  font-family: var(--serif) !important;
  font-size: 1.24rem !important;
  color: var(--marino) !important;
}

.quien__pie{ text-align: center; margin-top: 4.2rem; }

@media (max-width: 860px){
  .quien__grid{ grid-template-columns: 1fr; gap: 2.6rem; max-width: 34rem; }
  .quien__foto{ position: static; }
  .quien__frase p{ font-size: 1.24rem; }
}


/* ===========================================================
   41. LAS NUBES Y EL AGUA DEL HERO
   ===========================================================
   El truco: son tres capas que usan la MISMA fotografía del
   fondo. No se descarga nada nuevo.

   Cada capa se recorta con una máscara —una franja del alto de
   la imagen— y se mueve despacio. La del cielo va para un lado,
   la del agua para el otro. Al mezclarse con la foto quieta que
   está debajo, lo que se ve no es una foto desplazándose: es la
   nube moviéndose por dentro y el reflejo del agua corriéndose.

   Van en modo "soft-light" y a poca opacidad justamente para
   eso. Si se subiera la opacidad se vería la imagen doble, que
   es el error clásico de este recurso.

   PARA MÁS MOVIMIENTO: subí los porcentajes de los @keyframes
     (nubes / corriente), no la opacidad.
   PARA MÁS BRILLO EN EL AGUA: subí el .30 de .hero__brillo i.
   PARA QUE VUELVA A SER UNA FOTO QUIETA: borrá esta sección
     entera y las tres líneas del hero en index.html.          */

.hero__cielo{
  position: absolute; inset: 0;
  background: url("../imagenes/hero.jpg") center center / cover no-repeat;
  pointer-events: none;
  will-change: transform;
}

/* --- El cielo: sólo la franja de las nubes --- */
.hero__cielo{
  opacity: .5;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 26%, rgba(0,0,0,.55) 38%, rgba(0,0,0,0) 50%);
          mask-image: linear-gradient(to bottom,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 26%, rgba(0,0,0,.55) 38%, rgba(0,0,0,0) 50%);
  animation: nubes 24s ease-in-out infinite alternate;
}
@keyframes nubes{
  from{ transform: translate3d(-6.2%, .6%, 0) scale(1.025); }
  to  { transform: translate3d( 7%, -2.4%, 0) scale(1.09); }
}

/* --- El agua: sólo desde la orilla hacia abajo, y sin tocar la casa --- */
/* Se mueve al revés que el cielo y menos: el agua quieta refleja, y si se
   corre mucho deja de parecer un espejo.

   Son dos elementos anidados, cada uno con UNA máscara. El de afuera
   recorta a lo ancho —se desvanece antes del 74%, porque la casa y las
   rocas empiezan en el 80% y son tierra firme, no pueden moverse—. El de
   adentro recorta a lo alto, de la orilla hacia abajo, y es el que se
   mueve. Separados porque combinar dos máscaras en un solo elemento no
   funciona igual en todos los navegadores. */
.hero__agua{
  position: absolute; inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 74%);
          mask-image: linear-gradient(to right,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 74%);
}
.hero__agua i{
  position: absolute; inset: 0;
  display: block;
  background: url("../imagenes/hero.jpg") center center / cover no-repeat;
  opacity: .46;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 56%, rgba(0,0,0,.5) 66%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 56%, rgba(0,0,0,.5) 66%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 100%);
  animation: corriente 42s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes corriente{
  from{ transform: translate3d( 2.6%, 0, 0) scale(1.014); }
  to  { transform: translate3d(-3.1%, 1.1%, 0) scale(1.05); }
}

/* --- El brillo: la luz que cruza el reflejo --- */
/* Dos destellos largos y muy suaves que viajan por la zona donde
   el cielo se refleja en el agua. Van en "screen": sólo suman luz. */
.hero__brillo{
  position: absolute;
  /* Medido sobre la fotografía: la casa y las rocas empiezan en el 80%
     del ancho, así que el brillo termina en el 70% y nunca las toca.
     Del 30% hacia la izquierda el agua está en sombra bajo el velo y
     un destello ahí no se vería. */
  left: 30%; right: 30%; top: 58%; bottom: 2%;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero__brillo::before,
.hero__brillo::after{
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 52%;
  background: radial-gradient(ellipse 48% 62% at 50% 50%,
              rgba(255,250,236,.52), rgba(255,250,236,0) 72%);
  filter: blur(14px);
  will-change: transform, opacity;
}
.hero__brillo::before{ animation: destello 15s ease-in-out infinite    0s; }
.hero__brillo::after { animation: destello 21s ease-in-out infinite  6.5s; }

@keyframes destello{
  0%   { opacity: 0;   transform: translate3d(-40%, 0, 0) scaleY(.8); }
  30%  { opacity: 1;   }
  70%  { opacity: .85; }
  100% { opacity: 0;   transform: translate3d(120%, 4%, 0) scaleY(1.1); }
}

/* Para quien pidió menos movimiento: el fiordo se queda quieto */
@media (prefers-reduced-motion: reduce){
  .hero__cielo,
  .hero__agua,
  .hero__brillo{ animation: none !important; display: none !important; }
}