@charset "utf-8";

/* ============================================================================
   REVENIR · web2 — «Noche y amanecer»
   ----------------------------------------------------------------------------
   La idea del diseño en una frase: la página es de noche, y la luz aparece
   de vez en cuando.

   Por qué. Revenir es un recuerdo que llega de fuera, en mitad de lo que
   estabas haciendo. Una web clara y uniforme no dice eso; una página oscura en
   la que cada cierto rato se abre una fotografía con una fuente de luz dentro,
   sí. De ahí salen las tres decisiones que sostienen todo lo demás:

   1. Fondo casi negro CÁLIDO (#0C0A09, no un negro azulado). Se midió el tono
      dominante de la fotografía del sitio y siete de cada nueve fotos son
      cálidas. Un negro frío se pelearía con ellas en cada scroll.
   2. Un solo acento: la brasa (#F2B268). Es la luz de las propias fotos —el sol
      del amanecer, la llama de la vela— sacada de la imagen y convertida en
      color de interfaz.
   3. En mitad de la página se enciende la luz: los textos largos van sobre
      papel cálido (.claro). Dos mil quinientas palabras de ensayo sobre fondo
      negro no se leen. Esa sala de lectura es también la parte «calmada»; lo
      que rodea es la parte que destaca.

   Nada de esto pide un solo byte a un tercero: sin cookies, sin analítica, sin
   fuentes externas, sin scripts. Es un requisito del proyecto, no una virtud
   accidental, y condiciona el diseño: no hay JavaScript en ninguna parte, así
   que todo lo que se mueve o se abre está hecho con CSS y con <details>.

   Contraste: el peor par de la paleta es 6,54 (--luz-tenue sobre --noche-2),
   y el texto de lectura va entre 16 y 17 (AAA) en los dos fondos. Las frases
   que van encima de una fotografía se midieron aparte, pixel a pixel sobre el
   render, porque ahí el fondo cambia en cada letra: la peor llega a 7,16 en su
   punto más claro.
   ========================================================================== */


/* --- Fuentes ---------------------------------------------------------------
   Servidas desde este mismo dominio. Lora hace todo lo que se lee (titulares y
   cuerpo) y Poppins solo la señalización: rótulos, botones, navegación. */

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-var-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* --- Paleta y medidas ------------------------------------------------------
   Los valores de contraste anotados están medidos con la fórmula de la WCAG. */

:root {
  /* La noche. Cálida: 20° de tono, no un gris azul. */
  --noche:        #0C0A09;
  --noche-2:      #14100E;   /* superficie levantada */
  --noche-3:      #1C1714;   /* superficie de tarjeta */
  --linea:        #2B2320;   /* filete sobre la noche */

  --luz:          #F6F0E7;   /* texto principal — 17,44 AAA */
  --luz-media:    #C2B6A8;   /* texto secundario — 9,93 AAA */
  --luz-tenue:    #A2968A;   /* metadatos y rótulos — 6,84 AA */

  /* La luz de las fotos, convertida en color de interfaz. */
  --brasa:        #F2B268;   /* acento sobre la noche — 10,67 AAA */
  --brasa-clara:  #F9CE9C;   /* foco y hover */
  --brasa-honda:  #7C440E;   /* acento sobre el papel — 7,00 AAA */
  --brasa-mas:    #63350A;

  /* El papel: la sala de lectura del centro de la página. */
  --papel:        #F7F2EA;
  --papel-2:      #FFFDF8;
  --tinta:        #17130F;   /* 16,58 AAA sobre el papel */
  --tinta-suave:  #554C43;   /*  7,53 AAA sobre el papel */
  --linea-clara:  #E2D9CA;

  --ancho:  80rem;   /* contenedor */
  --texto:  54rem;   /* columna de lectura: ancha a propósito */
  --canal:  clamp(1.15rem, 0.55rem + 2.6vw, 2.75rem);
  --paso:   clamp(4.2rem, 2.6rem + 5vw, 8.5rem);   /* aire entre secciones */

  --curva: 3px;      /* casi recto: las esquinas muy redondeadas suavizan
                        demasiado y esta página quiere filo */
  --pausa: 320ms cubic-bezier(.2, .7, .3, 1);

  color-scheme: dark;
}


/* --- Reajuste -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: clamp(1.04rem, 0.98rem + 0.32vw, 1.2rem);
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noche);
  color: var(--luz);
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.78;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 0.7em;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 {
  /* El minimo (3,1rem) es el que manda en movil y no se toca. Lo que baja es el
     tramo de escritorio: un 5 % a 1440 px y un 7 % de 1900 en adelante. */
  font-size: clamp(3.1rem, 1.6rem + 6.6vw, 7.4rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 400;
}

h2 { font-size: clamp(2.05rem, 1.25rem + 3vw, 3.55rem); }
h3 { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.005em; }

/* El hueco entre parrafos es una linea entera de texto, ni un pelo menos.
   Estaba en 1.25em con una altura de linea de 1.78, o sea el 70% de una linea:
   por debajo de eso el ojo no ve un renglon en blanco, ve dos parrafos pegados,
   y en el movil —donde cada parrafo son ocho o diez lineas— la pagina se lee
   como un muro. Con 1.78em hay separacion de verdad. */
p { margin: 0 0 1.78em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--luz); }
em { font-style: italic; }

a { color: var(--brasa); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--brasa-clara); }

:focus-visible {
  outline: 2px solid var(--brasa-clara);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--brasa); color: var(--noche); }


/* --- Piezas comunes -------------------------------------------------------- */

.envoltorio {
  width: 100%;
  min-width: 0;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
}

.estrecho { max-width: calc(var(--texto) + var(--canal) * 2); }

.saltar {
  position: absolute;
  left: -9999px;
  z-index: 99;
  padding: 0.7rem 1.1rem;
  background: var(--brasa);
  color: var(--noche);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.85rem;
  border-radius: var(--curva);
}
.saltar:focus { left: 1rem; top: 1rem; }

/* Texto que solo existe para quien navega con lector de pantalla. Lo usan los
   enlaces a la política de privacidad, que se abren en otra ventana: quien lo ve
   se entera por el propio navegador, y quien no lo ve tiene que oírlo.

   Se esconde con `clip-path` y no con `display: none` ni con `visibility`, que
   lo sacarían también del árbol de accesibilidad y entonces no lo leería nadie.
   El 1px de tamaño con `overflow: hidden` es la parte que hace el trabajo; el
   `clip-path` cubre a los navegadores que aun así dejarían asomar un píxel. */
.solo-voz {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* El rótulo de sección: la brasa, en versalitas anchas, con un guion delante.
   Es la marca de agua del sistema — aparece en todas las secciones. */
.rotulo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
  color: var(--brasa);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.rotulo::before {
  content: "";
  width: 2.1rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

.entradilla {
  font-size: 1.22em;
  line-height: 1.62;
  color: var(--luz-media);
}

/* Botones. El principal va relleno de brasa —es el único bloque de color
   saturado de toda la página, y por eso se ve desde lejos. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.1rem;
  padding: 0.85rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--brasa);
  color: var(--noche);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pausa), color var(--pausa),
              border-color var(--pausa), transform var(--pausa);
}
.boton:hover {
  background: var(--brasa-clara);
  color: var(--noche);
  transform: translateY(-1px);
}
.boton svg { width: 1.15rem; height: 1.15rem; flex: none; }

.boton--tenue {
  background: transparent;
  border-color: var(--linea);
  color: var(--luz);
}
.boton--tenue:hover {
  background: transparent;
  border-color: var(--brasa);
  color: var(--brasa);
}

/* El filete luminoso: un hilo de un píxel que se enciende en el centro.
   Separa sin cortar, que es justo lo que pide una página que quiere estar
   calmada. */
.filete {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--linea) 18%,
              var(--brasa) 50%, var(--linea) 82%, transparent);
  opacity: 0.55;
}

section { padding-block: var(--paso); }

.separado { margin-top: 2rem; }


/* --- Cabecera --------------------------------------------------------------
   Se queda arriba, translúcida. Sobre la portada casi no se ve; en cuanto
   empieza el texto se apoya en el desenfoque. */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-block: 0.85rem;
  background: rgba(12, 10, 9, 0.72);
  border-bottom: 1px solid rgba(43, 35, 32, 0.7);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.cabecera .envoltorio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem clamp(0.7rem, 3vw, 2rem);
  min-width: 0;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-right: auto;
  min-width: 0;
  color: var(--luz);
  font-family: "Lora", Georgia, serif;
  font-size: 1.16rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
}
.marca img { width: 2.15rem; height: 2.15rem; }
.marca:hover { color: var(--brasa); }

.cabecera nav {
  display: flex;
  gap: 0.15rem;
}
.cabecera nav a {
  padding: 0.4rem 0.6rem;
  color: var(--luz-tenue);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-radius: var(--curva);
}
.cabecera nav a:hover { color: var(--luz); }
.cabecera nav a[aria-current] { color: var(--brasa); }

.cabecera .boton {
  min-height: 2.5rem;
  padding: 0.5rem 1.15rem;
  font-size: 0.84rem;
}
@media (max-width: 30em) {
  .cabecera .boton { display: none; }
}


/* --- Portada ---------------------------------------------------------------
   Una fotografía a pantalla completa con una fuente de luz al fondo, tres
   velos encima para que el texto llegue a AAA, y un resplandor cálido
   centrado en esa misma luz. */

.portada {
  position: relative;
  /* Rejilla y no flex: un item flexible arrastra min-width:auto y puede crecer
     mas que la ventana. minmax(0, 1fr) no deja. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  min-height: min(100svh, 62rem);
  padding-block: clamp(5rem, 12vh, 9rem) clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
}

.portada .fondo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}

/* El velo, en dos capas que se multiplican:

   - la vertical asienta la cabecera arriba y funde el pie con la sección
     siguiente, pero deja el centro casi limpio;
   - la diagonal oscurece el lado por donde entra el texto y abre el lado por
     donde entra la luz de la fotografía.

   Hace falta una tercera capa: un charco oscuro justo bajo el bloque de texto,
   porque la foto tiene una mancha de luz casi blanca ahí detrás.

   El resultado es que la foto se ve de verdad —que para eso se eligió— y el
   texto sigue apoyado en un fondo oscuro. Medido pixel a pixel sobre el render,
   tomando el punto peor de cada zona y no la media: titular 13,0, entradilla
   13,8, botones 15,3, notas menudas 6,2. */
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg,
      rgba(12, 10, 9, 0.74) 0%,
      rgba(12, 10, 9, 0.20) 20%,
      rgba(12, 10, 9, 0.20) 54%,
      rgba(12, 10, 9, 0.86) 88%,
      var(--noche) 100%),
    linear-gradient(100deg,
      rgba(12, 10, 9, 0.86) 0%,
      rgba(12, 10, 9, 0.66) 34%,
      rgba(12, 10, 9, 0.14) 70%,
      rgba(12, 10, 9, 0.34) 100%),
    radial-gradient(ellipse 62% 58% at 20% 72%,
      rgba(12, 10, 9, 0.80) 0%,
      rgba(12, 10, 9, 0.40) 55%,
      transparent 78%);
}

/* Resplandor: la luz de la foto, ampliada, para que el titular se apoye en
   algo cálido en lugar de flotar sobre negro. */
.portada::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  z-index: -1;
  width: min(120vw, 78rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle,
              rgba(242, 178, 104, 0.16) 0%,
              rgba(242, 178, 104, 0.07) 34%,
              transparent 66%);
  pointer-events: none;
}

@media (max-width: 46em) {
  .portada::before {
    background:
      linear-gradient(180deg,
        rgba(12, 10, 9, 0.80) 0%,
        rgba(12, 10, 9, 0.34) 18%,
        rgba(12, 10, 9, 0.62) 46%,
        rgba(12, 10, 9, 0.90) 82%,
        var(--noche) 100%);
  }
}

.portada .envoltorio { position: relative; }

.portada h1 {
  margin-bottom: 0.35em;
  text-shadow: 0 2px 40px rgba(12, 10, 9, 0.85), 0 1px 3px rgba(12, 10, 9, 0.5);
}

.portada .entradilla {
  max-width: 38rem;
  text-shadow: 0 1px 24px rgba(12, 10, 9, 0.9), 0 1px 2px rgba(12, 10, 9, 0.6);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.36rem);
  color: var(--luz-media);
}
.portada .entradilla strong { color: var(--luz); }

/* El eco: tres anillos que se abren desde el mandala y se apagan. Es el sonido
   de la campana, dibujado. Se detiene si el sistema pide menos movimiento. */
.eco {
  position: relative;
  width: 5.6rem;
  height: 5.6rem;
  margin-bottom: clamp(1.6rem, 4vh, 2.8rem);
}
.eco .mandala {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 22px rgba(242, 178, 104, 0.35));
}
.eco span {
  position: absolute;
  inset: 0;
  border: 1px solid var(--brasa);
  border-radius: 50%;
  opacity: 0;
  animation: eco 7s cubic-bezier(.2, .6, .3, 1) infinite;
}
.eco span:nth-child(2) { animation-delay: 2.33s; }
.eco span:nth-child(3) { animation-delay: 4.66s; }

@keyframes eco {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.2rem;
}

.nota-cta {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
  color: var(--luz-tenue);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Las cinco garantías: la promesa del proyecto, en fila, con la brasa como
   viñeta. Sin cajas. */
.garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  margin: 2.6rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--linea);
  list-style: none;
}
.garantias li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--luz-media);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
.garantias li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brasa);
  flex: none;
}


/* --- La sala de lectura ----------------------------------------------------
   .claro enciende la luz. Va en las secciones de texto largo: ahí la página
   deja de ser un escaparate y se convierte en algo que se lee. */

.claro {
  background: var(--papel);
  color: var(--tinta);
}
.claro h1, .claro h2, .claro h3, .claro strong { color: var(--tinta); }
.claro p { color: var(--tinta-suave); }
.claro .entradilla { color: var(--tinta); }
.claro .rotulo { color: var(--brasa-honda); }
.claro a { color: var(--brasa-honda); }
.claro a:hover { color: var(--brasa-mas); }
.claro .boton { background: var(--brasa-honda); color: var(--papel-2); }
.claro .boton:hover { background: var(--brasa-mas); color: var(--papel-2); }
.claro .boton--tenue {
  background: transparent;
  border-color: var(--linea-clara);
  color: var(--tinta);
}
.claro .boton--tenue:hover { border-color: var(--brasa-honda); color: var(--brasa-honda); }
.claro .filete {
  background: linear-gradient(90deg, transparent, var(--linea-clara) 18%,
              var(--brasa-honda) 50%, var(--linea-clara) 82%, transparent);
}
.claro ::selection { background: var(--brasa-honda); color: var(--papel-2); }

/* El paso de la noche al papel es un corte limpio, sin degradado intermedio.
   Se probo a fundirlos y el resultado parecia suciedad en el borde: encender la
   luz de golpe es justo lo que se busca. */
.claro { position: relative; }


/* --- El nombre -------------------------------------------------------------
   La primera parada larga. Va en la sala clara, con la palabra suelta en
   grande a un lado. */

/* La primera letra, en grande y en cursiva: el nombre de la app es el tema de la
   sección, así que se lee antes de empezar a leer.

   La caja de la capitular mide `font-size × line-height`, y el texto lleva
   `line-height: 1.78`. Dos renglones son 2 × 1,78 = 3,56em del párrafo, y la caja
   de la capitular tiene que quedarse por DEBAJO de esa cifra: si la pasa aunque
   sea por medio píxel, el tercer renglón cae dentro del hueco del flotante y sale
   sangrado, con un escalón muy visible.

   Ojo con las unidades, que es donde está la trampa: el `margin` en `em` se mide
   contra el tamaño ya agrandado de la letra, no contra el del párrafo. La altura
   total en em del párrafo es `font-size × (line-height + margin-top)`, o sea
   4 × (0,8 + 0,05) = 3,4em, con 0,16em de holgura hasta los 3,56. */
.nombre > p:first-of-type::first-letter {
  float: left;
  margin: 0.05em 0.1em 0 0;
  font-size: 4em;
  font-weight: 500;
  line-height: 0.8;
  color: var(--brasa-honda);
}
.nombre p { font-size: 1.03em; }


/* --- Las bandas de respiro -------------------------------------------------
   Una foto a sangre, muy oscurecida, y una sola frase encima. Es la pausa
   entre capítulos: la página deja de hablar durante una pantalla. */

.respiro {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(78svh, 40rem);
  padding-block: clamp(5rem, 14vh, 9rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.respiro > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dos capas: una vertical que funde la banda con las secciones de arriba y de
   abajo, y una elipse ajustada a la frase. Fuera de esa elipse la foto se ve
   casi limpia; debajo de la frase queda oscuro. Medido sobre el render, el
   punto peor de las cuatro bandas es 6,1 (el texto va a 3,1rem). */
.respiro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 44% 32% at 50% 50%,
                    rgba(12,10,9,.84) 0%, rgba(12,10,9,.48) 58%, transparent 84%),
    linear-gradient(180deg, var(--noche) 0%, rgba(12,10,9,.28) 18%,
                    rgba(12,10,9,.28) 82%, var(--noche) 100%);
}

.respiro p {
  max-width: 26ch;
  margin: 0 auto;
  color: var(--luz);
  font-size: clamp(1.65rem, 1rem + 2.6vw, 3.1rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(12, 10, 9, 0.9);
  text-wrap: balance;
}

/* La banda que cae dentro de la sala de lectura no se abre a sangre: se queda
   como una figura enmarcada sobre el papel, para no apagar la luz a mitad de
   los ensayos. */
.respiro--claro {
  min-height: 0;
  padding-block: clamp(3rem, 7vh, 5.5rem);
  background: var(--papel);
}
.respiro--claro > img {
  position: static;
  width: min(100%, calc(var(--texto) + 8rem));
  height: auto;
  margin-inline: auto;
  border-radius: var(--curva);
}
.respiro--claro::before { display: none; }
.respiro--claro .envoltorio { margin-top: 2.2rem; }
.respiro--claro p {
  color: var(--tinta);
  text-shadow: none;
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.6rem);
}


/* --- Novedades: el formulario ---------------------------------------------- */

/* Es un intermedio entre la mitad util de la pagina y la sala de lectura, no un
   capitulo: ocupa menos alto y menos ancho que las secciones de alrededor. */
.s-novedades { padding-block: clamp(3.2rem, 2rem + 3.6vw, 6rem); }
.s-novedades .estrecho { max-width: calc(46rem + var(--canal) * 2); }
.s-novedades h2 { font-size: clamp(1.55rem, 1.2rem + 1.35vw, 2.2rem); }

.s-novedades .formulario {
  margin-top: 1.7rem;
  padding: clamp(1.4rem, 3.4vw, 2.3rem);
  /* El tinte de la brasa sobre la noche. Es el unico bloque de toda la parte
     oscura en el que el acento hace de fondo, y por eso se ve desde lejos. */
  background: rgba(242, 178, 104, 0.06);
  border: 1px solid rgba(242, 178, 104, 0.34);
  border-radius: calc(var(--curva) * 4);
  box-shadow: inset 0 3px 0 var(--brasa);
}
.s-novedades .formulario > p {
  color: var(--luz-media);
  font-size: 0.96rem;
  max-width: 40rem;
}

.s-novedades form {
  display: grid;
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(242, 178, 104, 0.22);
}

/* Nombre y correo caben en la misma fila en cuanto hay sitio; lo demas ocupa
   las dos columnas. */
@media (min-width: 34em) {
  .s-novedades form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .s-novedades .consentimiento,
  .s-novedades button.boton,
  .s-novedades .trampa { grid-column: 1 / -1; }
}

.campo { display: grid; gap: 0.45rem; }
.campo > span {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--luz-tenue);
}
.campo > span em {
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
}

.campo input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.65rem 0.95rem;
  background: var(--noche);
  border: 1px solid rgba(242, 178, 104, 0.22);
  border-radius: var(--curva);
  color: var(--luz);
  font-family: "Lora", Georgia, serif;
  font-size: 1rem;
  transition: border-color var(--pausa);
}
.campo input::placeholder { color: #6E645B; }
.campo input:hover { border-color: rgba(242, 178, 104, 0.5); }
.campo input:focus-visible { border-color: var(--brasa); outline-offset: 1px; }

.consentimiento {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--luz-media);
}
.consentimiento input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.28rem 0 0;
  accent-color: var(--brasa);
  flex: none;
}

/* Trampa para robots: invisible para las personas, pero no con display:none,
   que algunos rellenadores automáticos saben esquivar. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.s-novedades button.boton { justify-self: start; margin-top: 0.4rem; }


/* --- Qué hace: la rejilla y el móvil --------------------------------------- */

.s-que-hace .estrecho { padding-inline: 0; }

.movil-y-rejilla {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
}

/* El móvil dibujado. No es una captura: es la pantalla principal de la app
   reconstruida con los mismos elementos y en el mismo orden —ajustes arriba a
   la derecha, mandala, frase, la hora del próximo aviso en grande, el estado y
   los botones—. El fondo es el de fábrica, la alameda. */
.movil {
  position: relative;
  width: min(100%, 17.5rem);
  margin-inline: auto;
  aspect-ratio: 9 / 19.5;
  padding: 0.55rem;

  background: #050403;
  border: 1px solid #352C26;
  border-radius: 2.4rem;
  box-shadow:
    0 0 0 1px rgba(246, 240, 231, 0.06),
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 0 90px -20px rgba(242, 178, 104, 0.22);
}

.movil .pantalla {
  position: absolute;
  inset: 0.55rem;
  overflow: hidden;
  border-radius: 2rem;
  isolation: isolate;
}
.movil .pantalla > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.movil .pantalla::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8,6,5,.42), rgba(8,6,5,.10) 34%, rgba(8,6,5,.70));
}
.movil--ajustes .pantalla::before,
.movil--notas .pantalla::before {
  background: linear-gradient(180deg,
    rgba(8,6,5,.90) 0%, rgba(8,6,5,.78) 9%,
    rgba(8,6,5,.38) 30%, rgba(8,6,5,.64) 100%);
}

.movil .interfaz {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 1.6rem 1.05rem 1.15rem;
  font-family: "Poppins", system-ui, sans-serif;
  text-align: center;
  color: #FFFFFF;
}

/* Las pantallas dibujadas son oscuras aunque el apartado que las rodea sea de papel.
   Los colores de la sala de lectura apuntan a la etiqueta —`.claro p`, `.claro strong`—
   y una regla que apunta al elemento gana siempre a un color heredado, por muy
   especifico que sea el ancestro: el titulo de la pantalla de ajustes salia en tinta
   apagada sobre la foto, a 2,15 de contraste. Aqui se les devuelve el color de la
   pantalla.

   Va con :where() y colocado antes que las reglas de --ajustes a proposito: asi no
   suma especificidad y no se lleva por delante los acentos en brasa de mas abajo. */
.claro .interfaz :where(p, strong) { color: inherit; }
/* La rueda va sobre su disco, el logotipo sobre un resplandor y la frase sobre una
   pastilla, igual que en la app: ahi el fondo lo elige la persona y puede ser
   cualquier foto, asi que nada que lleve texto encima se fia de lo que haya debajo. */
.movil .ajustes {
  align-self: flex-end;
  box-sizing: content-box;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: rgba(12, 10, 9, 0.45);
  color: #FFFFFF;
}
.movil .logo {
  box-sizing: content-box;
  width: 3.1rem;
  height: 3.1rem;
  margin-top: 0.6rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(12, 10, 9, 0.72) 0%, rgba(12, 10, 9, 0.54) 50%, rgba(12, 10, 9, 0) 100%);
}
.movil .frase {
  margin: 0.75rem 0 0;
  padding: 0.42rem 0.85rem 0.46rem;
  border-radius: 0.65rem;
  background: rgba(12, 10, 9, 0.58);
  font-family: "Lora", Georgia, serif;
  font-size: 0.76rem;
  font-style: italic;
  line-height: 1.4;
}
.movil .aviso {
  margin-top: auto;
  padding: 0.85rem 0.9rem 0.95rem;
  width: 100%;
  background: rgba(8, 6, 5, 0.5);
  border: 1px solid rgba(246, 240, 231, 0.14);
  border-radius: 0.9rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.movil .aviso b {
  display: block;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.82;
}
.movil .hora {
  display: block;
  margin: 0.1rem 0 0;
  font-family: "Lora", Georgia, serif;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.movil .falta {
  display: block;
  font-size: 0.68rem;
  opacity: 0.85;
}
.movil .estado {
  margin: 0.85rem 0 0.9rem;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  opacity: 0.92;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}
.movil .accion {
  display: block;
  width: 100%;
  padding: 0.7rem;
  background: var(--brasa);
  border-radius: 100px;
  color: #14100E;
  font-size: 0.8rem;
  font-weight: 600;
}
.movil .accion + .accion {
  margin-top: 0.45rem;
  background: transparent;
  border: 1px solid rgba(246, 240, 231, 0.28);
  color: #FFFFFF;
  font-weight: 400;
}
.movil .notas {
  margin: 0.8rem 0 0;
  font-size: 0.66rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  opacity: 0.95;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}

/* Las seis características. Sin tarjetas con fondo: solo un filete arriba y
   aire. Tres por fila, como se pidió. */
.rejilla {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}
.tarjeta {
  padding: 1.6rem 0;
  border-top: 1px solid var(--linea);
}
.tarjeta h3 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  color: var(--luz);
}
.tarjeta h3::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid var(--brasa);
  border-radius: 50%;
  flex: none;
  transform: translateY(-0.12em);
  transition: background var(--pausa);
}
.tarjeta:hover h3::before { background: var(--brasa); }
.tarjeta p { margin: 0; color: var(--luz-media); font-size: 0.97rem; }


/* --- Cómo funciona: los tres pasos ----------------------------------------- */

.pasos {
  display: grid;
  gap: 0;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
  grid-template-columns: minmax(0, 1fr);
}
.pasos li {
  position: relative;
  counter-increment: paso;
  padding: 1.8rem 0 1.8rem 4.3rem;
  border-top: 1px solid var(--linea);
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--brasa);
  border-radius: 50%;
  color: var(--brasa);
  font-family: "Lora", Georgia, serif;
  font-size: 1.1rem;
  line-height: 1;
}
.pasos li h3 { margin-bottom: 0.35rem; }
.pasos li p { margin: 0; color: var(--luz-media); }


/* --- Dos columnas genérico -------------------------------------------------- */

.dos-columnas {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.dos-columnas > * { min-width: 0; }
.dos-columnas > img {
  width: 100%;
  border-radius: var(--curva);
}


/* --- Tradiciones: el ensayo largo ------------------------------------------ */

.s-tradiciones .entradilla { margin-bottom: 3rem; }

.tradicion {
  padding-top: 2.6rem;
  margin-top: 2.6rem;
  border-top: 1px solid var(--linea-clara);
}
.tradicion h3 {
  margin-bottom: 1rem;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}
/* La primera tradición es la que dio origen a la app: lleva la brasa. */
.tradicion:first-of-type h3 { color: var(--brasa-honda); }

.remate {
  margin-top: 3.4rem;
  padding: clamp(1.7rem, 4vw, 2.6rem);
  background: var(--papel-2);
  border: 1px solid var(--linea-clara);
  border-left: 3px solid var(--brasa-honda);
  border-radius: var(--curva);
}
.remate p:first-child { font-size: 1.12em; color: var(--tinta); }


.aparte {
  margin-top: 2.8rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--linea);
}
.aparte h3 { margin-bottom: 0.8rem; }
.aparte p { color: var(--luz-media); }


/* --- Privacidad: la promesa ------------------------------------------------- */

.promesa ul {
  display: grid;
  gap: 0;
  margin: 2.4rem 0;
  padding: 0;
  list-style: none;
  grid-template-columns: minmax(0, 1fr);
}
.promesa li {
  position: relative;
  padding: 1.4rem 0 1.4rem 2.4rem;
  border-top: 1px solid var(--linea);
  color: var(--luz-media);
  font-size: 0.97rem;
}
/* La marca de comprobado, dibujada con dos bordes: sin iconos de terceros. */
.promesa li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 1.85rem;
  width: 0.5rem;
  height: 0.95rem;
  border: solid var(--brasa);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.promesa li strong { display: block; margin-bottom: 0.2rem; color: var(--luz); }


/* --- Preguntas frecuentes --------------------------------------------------- */

.faq { margin-top: 2.4rem; }

.faq details {
  border-top: 1px solid var(--linea);
}
.faq details:last-child { border-bottom: 1px solid var(--linea); }

.faq summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: "Lora", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--luz);
  transition: color var(--pausa);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brasa); }

/* El signo se convierte en raya al abrir. Dos barras cruzadas, sin iconos. */
.faq summary::after {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  margin-left: auto;
  flex: none;
  background:
    linear-gradient(var(--brasa), var(--brasa)) center / 100% 1px no-repeat,
    linear-gradient(var(--brasa), var(--brasa)) center / 1px 100% no-repeat;
  transition: transform var(--pausa), opacity var(--pausa);
}
.faq details[open] summary::after {
  background: linear-gradient(var(--brasa), var(--brasa)) center / 100% 1px no-repeat;
  transform: rotate(180deg);
}

.faq details > p {
  margin: 0 0 1.5rem;
  padding-right: 2rem;
  max-width: 46rem;
  color: var(--luz-media);
}


/* --- Colabora --------------------------------------------------------------- */

.peticiones {
  display: grid;
  gap: 0;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}
.peticiones li {
  padding: 1.3rem 0;
  border-top: 1px solid var(--linea-clara);
  font-size: 0.97rem;
}
.peticiones li strong { display: block; margin-bottom: 0.15rem; }


/* --- La banda de cierre ------------------------------------------------------
   Última fotografía, otra vez a sangre, y la llamada final. La página termina
   como empezó: de noche, con una luz al fondo. */

.banda {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(80svh, 44rem);
  padding-block: clamp(5rem, 13vh, 9rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.banda > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banda::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 64% 54% at 50% 48%,
                    rgba(12,10,9,.90) 0%, rgba(12,10,9,.56) 58%, transparent 88%),
    linear-gradient(180deg, var(--noche) 0%, rgba(12,10,9,.40) 20%,
                    rgba(12,10,9,.44) 78%, var(--noche) 100%);
}
.banda h2 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(2.3rem, 1.3rem + 3.8vw, 4.4rem);
  text-shadow: 0 2px 34px rgba(12, 10, 9, 0.9);
}
.banda > .envoltorio > p {
  max-width: 34rem;
  margin-inline: auto;
  color: var(--luz-media);
  font-size: 1.1rem;
}
.banda .acciones { justify-content: center; }
.banda .acciones .nota-cta { text-align: center; }


/* --- Pie ---------------------------------------------------------------------- */

footer {
  padding-block: 3.5rem 3rem;
  background: var(--noche);
  border-top: 1px solid var(--linea);
  font-size: 0.86rem;
  color: var(--luz-tenue);
}
footer .envoltorio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
footer nav, footer .idiomas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}
footer a {
  color: var(--luz-media);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.82rem;
  text-decoration: none;
}
footer a:hover { color: var(--brasa); text-decoration: underline; }
footer a[aria-current] { color: var(--brasa); }
footer > .envoltorio > p {
  flex-basis: 100%;
  margin: 0.6rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  line-height: 1.65;
  max-width: 58rem;
}
.idiomas--centro { justify-content: center; width: 100%; }
.menudo { font-size: 0.86rem; color: var(--luz-tenue); }


/* --- Páginas legales -----------------------------------------------------------
   La política de privacidad y las de gracias van sobre papel: son documentos,
   no escaparate, y se leen mejor con la luz encendida. */

.legal {
  padding-block: clamp(3rem, 7vw, 5rem);
}
body:has(.legal) { background: var(--papel); }
body:has(.legal) .cabecera { background: var(--noche); }
body:has(.legal) main { background: var(--papel); color: var(--tinta); }

/* Ojo: esto se acota a main a proposito. La cabecera y el pie siguen siendo de
   noche tambien en las paginas legales, y una regla suelta sobre body les
   pintaba los enlaces de marron sobre negro. */
.legal h1 {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  color: var(--tinta);
}
.legal h2 {
  margin-top: 2.6rem;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  color: var(--tinta);
}
.legal h3 { color: var(--tinta); }
.legal p, .legal li, .legal td, .legal dd { color: var(--tinta-suave); }
.legal strong, .legal dt, .legal th { color: var(--tinta); }
.legal a { color: var(--brasa-honda); }
.legal a:hover { color: var(--brasa-mas); }
.legal .entradilla { color: var(--tinta); }
.legal ::selection { background: var(--brasa-honda); color: var(--papel-2); }

.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.volver:hover { text-decoration: underline; }

/* Un navegador sin :has() se queda con la página oscura, que también se lee:
   el ancho de la columna lo pone .estrecho, que ya viene en el <main>. */


/* --- La guia: pagina «como funciona» ----------------------------------------
   Misma gramatica que el resto del sitio: noche, papel para lo que se lee
   despacio, y un solo acento. Lo unico nuevo son dos pantallas mas de la app,
   dibujadas igual que la principal. */

.guia-portada {
  padding-block: clamp(3.5rem, 2rem + 5vw, 7rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--linea);
}
.guia-portada h1 {
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem);
  margin-bottom: 0.5em;
}
.guia-portada .entradilla { max-width: 44rem; }

/* Cada paso: la pantalla a un lado y la explicacion al otro. */
.paso-guia .envoltorio {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.pantallas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1rem, 3vw, 1.8rem);
  justify-content: center;
}
.pantalla-figura {
  /* El ancho vive aqui: la pantalla va posicionada y no le da medida a nadie. */
  flex: 0 0 auto;
  width: min(100%, 19.5rem);
  margin: 0;
}
.movil--guia { width: 100%; margin-inline: 0; }
.pantalla-figura figcaption {
  margin-top: 0.85rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--luz-tenue);
}
.claro .pantalla-figura figcaption { color: var(--tinta-suave); }

/* Los bloques de explicacion, uno por apartado de los ajustes. */
.bloques {
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.bloques li {
  padding: 1.4rem 0;
  border-top: 1px solid var(--linea);
}
.claro .bloques li { border-top-color: var(--linea-clara); }
.bloques h3 {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.4rem;
}
.bloques h3::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid var(--brasa);
  border-radius: 50%;
  flex: none;
  transform: translateY(-0.12em);
}
.claro .bloques h3::before { border-color: var(--brasa-honda); }
.bloques p { margin: 0; font-size: 0.97rem; }

/* --- Pantalla de ajustes ---------------------------------------------------
   Es una sola pantalla larga que se recorre de arriba abajo, asi que se dibuja
   en dos mitades, una al lado de la otra, en vez de fingir un movil imposible
   de alto. */

.movil .interfaz--ajustes {
  align-items: stretch;
  gap: 0.85rem;
  padding: 1.15rem 0.85rem 1rem;
  text-align: left;
  font-size: 0.68rem;
}
.interfaz--ajustes .titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.3rem;
  font-family: "Lora", Georgia, serif;
  font-size: 1.05rem;
}
.interfaz--ajustes .grupo {
  display: grid;
  gap: 0.3rem;
  padding: 0.6rem 0.65rem 0.7rem;
  background: rgba(8, 6, 5, 0.52);
  border: 1px solid rgba(246, 240, 231, 0.13);
  border-radius: 0.6rem;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.interfaz--ajustes b {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brasa);
}
.interfaz--ajustes .control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.34rem 0.5rem;
  border: 1px solid rgba(246, 240, 231, 0.3);
  border-radius: 0.35rem;
  font-size: 0.66rem;
}
.interfaz--ajustes .control::after {
  content: "";
  width: 0.32rem;
  height: 0.32rem;
  flex: none;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  transform: translateY(-0.1em) rotate(45deg);
  opacity: 0.75;
}
.interfaz--ajustes .control--boton {
  justify-content: center;
  border-color: var(--brasa);
  color: var(--brasa);
}
.interfaz--ajustes .control--boton::after { content: none; }
.interfaz--ajustes .valor { font-size: 0.6rem; opacity: 0.82; }
.interfaz--ajustes .par { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 0.35rem; align-items: center; }
.interfaz--ajustes .par i { font-style: normal; font-size: 0.58rem; opacity: 0.8; }

/* Casillas: cuadrado dibujado con bordes, sin ningun icono de terceros. */
.interfaz--ajustes .casilla {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  font-size: 0.62rem;
  line-height: 1.35;
}
.interfaz--ajustes .casilla::before {
  content: "";
  width: 0.72rem;
  height: 0.72rem;
  margin-top: 0.1rem;
  border: 1px solid rgba(246, 240, 231, 0.45);
  border-radius: 0.15rem;
}
.interfaz--ajustes .casilla--marcada::before {
  background: var(--brasa);
  border-color: var(--brasa);
}
.interfaz--ajustes .fila {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.62rem;
}
.interfaz--ajustes .fila span:last-child { color: var(--brasa); font-weight: 600; }

/* --- Pantalla de notas ------------------------------------------------------ */

.movil .interfaz--notas {
  align-items: stretch;
  gap: 0.9rem;
  padding: 1.15rem 0.85rem 1rem;
  text-align: left;
}
.interfaz--notas .titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: 1.05rem;
}
.interfaz--notas .hoja {
  flex: 1;
  padding: 0.8rem;
  background: rgba(8, 6, 5, 0.55);
  border: 1px solid rgba(246, 240, 231, 0.13);
  border-radius: 0.6rem;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  font-family: "Lora", Georgia, serif;
  font-size: 0.72rem;
  line-height: 1.65;
}
.interfaz--notas .hoja em { opacity: 0.55; }
.interfaz--notas .ayuda {
  margin: 0;
  font-size: 0.58rem;
  line-height: 1.45;
  opacity: 0.85;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}

/* La flecha de volver, dibujada, con el mismo disco que la rueda. */
.interfaz .atras {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: none;
  border: 1px solid rgba(246, 240, 231, 0.2);
  border-radius: 50%;
  background: rgba(12, 10, 9, 0.8);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.85rem;
}

@media (min-width: 64em) {
  .paso-guia .envoltorio { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }
  .paso-guia--ancho .envoltorio { grid-template-columns: minmax(0, 41.5rem) minmax(0, 1fr); }
  .paso-guia--invertido .envoltorio > :first-child { order: 2; }
}


/* --- Anchos ------------------------------------------------------------------
   Un solo punto de corte a partir del cual la página deja de ser una columna.
   Todo lo de arriba está escrito para el móvil primero. */

@media (min-width: 46em) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.8rem, 4vw, 3rem); }
  .promesa ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.8rem, 4vw, 3rem); }
  .peticiones { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.8rem, 4vw, 3rem); }
  .dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
  .dos-columnas > img { position: sticky; top: 6.5rem; }
  .eco { width: 6.6rem; height: 6.6rem; }
}

@media (min-width: 64em) {
  .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Los tres pasos NO se ponen en tres columnas: comparten fila con una foto y
     quedarian a una palabra por linea. Apilados, con el numeral grande a la
     izquierda, se leen mejor. */
  .movil-y-rejilla { grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr); }
  .movil-y-rejilla .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portada { align-content: center; }
}

@media (min-width: 80em) {
  .movil-y-rejilla { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
}


/* --- Menos movimiento ---------------------------------------------------------
   El eco de la campana es lo único que se mueve en toda la página. Si el
   sistema pide quietud, se queda quieto. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eco span { animation: none; opacity: 0.3; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* --- Impresión ------------------------------------------------------------------
   Sobre papel no hay noche que valga: todo en negro sobre blanco, sin fotos de
   fondo y sin gastar tinta en fondos oscuros. */

@media print {
  body { background: #FFFFFF; color: #000000; }
  .cabecera, .respiro > img, .banda > img, .portada .fondo, .eco span,
  .movil, .saltar { display: none; }
  section, .claro { background: #FFFFFF; color: #000000; padding-block: 1.5rem; }
  h1, h2, h3, p, li, a { color: #000000; }
  a { text-decoration: underline; }
  .faq details { border-color: #999999; }
  .faq details > p { display: block; }
}

/* --- La direccion de correo -------------------------------------------------
   No aparece entera en el codigo fuente a proposito: el trozo con la clase
   `cebo` va oculto, de modo que un rastreador que quite las etiquetas se lleva
   una direccion falsa y uno que busque con expresion regular no encuentra nada,
   porque justo antes de la arroba hay un `>` y no una letra.

   `display: none` es justo lo que hace falta y no `visibility` ni un tamano
   cero: es la unica forma que ademas queda fuera de lo que se copia al
   portapapeles y de lo que lee un lector de pantalla. Copiar la direccion da
   `hola@revenir.es`, que es lo correcto.

   Por eso tampoco hay ningun `mailto:` en la web: es lo primero que busca un
   rastreador, y no se puede conservar el enlace y esconder la direccion a la vez.
   --------------------------------------------------------------------------- */
.cebo { display: none; }
.correo { white-space: nowrap; }
footer .correo {
  color: var(--luz-media);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.82rem;
}

/* --- Marco con una captura de verdad dentro --------------------------------
   Los demas moviles de la guia llevan la interfaz redibujada en HTML sobre una
   foto, y por eso el velo del `::before` les hace falta: sin el, el texto blanco
   no se leeria sobre la foto. Aqui dentro va una captura ya compuesta por la
   propia app, asi que el velo sobra —oscureceria una pantalla que ya esta bien—
   y la imagen deja de ser fondo para pasar a ser el contenido.

   La proporcion tambien cambia: 1080x2110 es lo que queda de una captura de este
   movil despues de quitarle las barras del sistema, y no coincide con el 9/19.5
   de la pantalla entera. Poner la de verdad evita deformar o recortar. */
.movil--captura { aspect-ratio: 1080 / 2110; }
.movil--captura .pantalla > img { z-index: 0; }
.movil--captura .pantalla::before { content: none; }


/* --- Páginas de error ------------------------------------------------------
   Diez códigos, tres idiomas, una sola pieza: el sello, el número, una frase y
   la puerta de vuelta. Centrado y sin fotografía, a propósito: un 502 se sirve
   justo cuando el servidor va mal, y no es el momento de pedirle medio mega de
   imagen.

   Las páginas de error llevan las rutas ABSOLUTAS —`/assets/…`, `/`— y eso no
   es un descuido. El servidor entrega el contenido de la página de error en la
   URL QUE SE PIDIÓ: un 404 en `/una/ruta/larga/inventada` muestra este HTML,
   pero el navegador resuelve las rutas relativas desde ahí, y `assets/css/…`
   se convertiría en `/una/ruta/larga/assets/css/…`. La página saldría sin
   estilo justo cuando más falta hace que se entienda qué ha pasado. */

.error {
  display: grid;
  /* `minmax(0, 1fr)` y no una columna automática, por lo mismo que en
     `.portada`: una columna `auto` se dimensiona al max-content de lo que
     lleva dentro, y una frase larga sin puntos de corte la hace más ancha que
     la ventana. El texto se sale por la derecha y no hay forma de alcanzarlo,
     porque la página no desplaza hacia ese lado. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-height: 100svh;
  padding-block: clamp(3rem, 10vh, 6rem);
  text-align: center;
  background:
    radial-gradient(78% 52% at 50% 30%, rgba(242, 178, 104, 0.10), transparent 72%),
    var(--noche);
}

/* `justify-items: center` centra, pero de paso hace que cada hijo mida su
   propio contenido en vez del ancho de la columna. Un párrafo con `max-width`
   en rem se lleva ese ancho entero aunque la ventana sea más estrecha, y el
   texto se sale por la derecha. De ahí el `min(..., 100%)` de abajo: es la
   parte que impide el desbordamiento en móvil. */
.error .envoltorio {
  display: grid;
  justify-items: center;
  gap: 0;
}

/* El sello, al tamaño de un logotipo y no al de una portada: la etiqueta
   declara 512 px y sin esta regla saldría a tamaño real. */
.error .sello {
  width: clamp(4.6rem, 13vw, 6.2rem);
  height: auto;
  margin-bottom: clamp(1.6rem, 4vh, 2.4rem);
  filter: drop-shadow(0 0 22px rgba(242, 178, 104, 0.3));
}

/* El rótulo lleva un filete a la izquierda; centrado hace falta el otro lado,
   si no la línea tira del texto y queda descuadrado. */
.error .rotulo { justify-content: center; }
.error .rotulo::after {
  content: "";
  width: clamp(1.4rem, 4vw, 2.4rem);
  height: 1px;
  background: var(--brasa);
  opacity: 0.5;
}

.error h1 {
  max-width: min(20ch, 100%);
  margin: 0;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.1;
  text-wrap: balance;
}

.error .entradilla {
  max-width: min(34rem, 100%);
  margin: 1.3rem 0 0;
}

.error .acciones {
  justify-content: center;
  margin-top: 2.4rem;
}


/* El filete lo llevaba el selector de idioma, que ya no está: sin él, el
   copyright quedaba pegado al botón. */
.error .derechos {
  width: 100%;
  max-width: min(26rem, 100%);
  margin-top: 3.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
  font-size: 0.78rem;
  color: var(--luz-tenue);
}


/* --- La ficha del responsable, en imagen -----------------------------------
   Los datos identificativos van compuestos como imagen y no como texto, a
   petición expresa. Se maqueta estrecha —460 px— y no al ancho de la columna de
   lectura, que son 864: una imagen de texto a 864 px se reduce al 45 % en un
   móvil de 390 y la letra queda en 7 px, ilegible justo en el aparato desde el
   que entra casi todo el mundo. A 460 la reducción es mínima.

   Va sola, sin texto alternativo debajo: es una decisión tomada a sabiendas de
   que un lector de pantalla no puede leer una imagen. */
.ficha-legal {
  margin: 0 0 1.6em;
}
.ficha-legal img {
  display: block;
  width: min(460px, 100%);
  height: auto;
}

/* --- La misma ficha, en texto -------------------------------------------
   Provisional. Mientras Google Play revisa la ficha de la app, estos datos van
   en texto: las comprobaciones automáticas de Play leen el texto de la página y
   una imagen no la leen. Pasada la revisión vuelven a `.ficha-legal`, que se
   queda aquí arriba esperando. Ver d:/revenir/TODO.md.

   Se dibuja para que se parezca a la imagen que sustituye —filetes arriba y
   abajo, rótulos en versalitas— pero como es texto de verdad, lo lee un lector
   de pantalla, se copia y se busca con Ctrl+F. Mientras esté así, la página
   cumple la WCAG 1.4.5, que la versión en imagen no cumplía.

   Los <div> dentro del <dl> son HTML5 válido y son lo que agrupa cada par: sin
   ellos no hay forma de separar las filas sin márgenes que se solapan. */
.ficha-datos {
  margin: 0 0 1.6em;
  padding: 1.5em 0;
  border-top: 1px solid var(--linea-clara);
  border-bottom: 1px solid var(--linea-clara);
}
.ficha-datos > div + div { margin-top: 1.15em; }
.ficha-datos dt {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.legal .ficha-datos dd {
  margin: 0.3em 0 0;
  line-height: 1.55;
  color: var(--tinta);
}