/* WorthWait Camera — el sitio
   Paleta oficial: fondo #1e1e1a / #ffffff · acento #a08a5c · texto #1c1c1c / #f7f5ee

   TIPOGRAFÍA — Cabinet Grotesk + Switzer, las mismas de la app.
   Hasta el 1 de septiembre de 2026 el sitio usaba Newsreader (una serif de
   Google Fonts) y una pila con Inter. No era una decisión de marca: Inter era
   el sistema ANTERIOR de la app, se eliminó el 16 de agosto, y el sitio se
   quedó atrás. Ningún documento de dirección de arte menciona una serif.

   Se sirven desde este mismo sitio, no desde Google. Así la página no le pide
   nada a nadie — que es literalmente el argumento del producto.

   Ojo: Cabinet Grotesk NO tiene cursiva. Donde el diseño anterior apoyaba los
   momentos de marca en una serif inclinada, ahora ese peso lo llevan el tamaño
   y el espaciado. Fingir la cursiva en una sans geométrica se ve mal. */

/* Cabinet Grotesk + Switzer se cargan como fuentes variables desde design.css
   (CabinetGrotesk-Variable.ttf / Switzer-Variable.ttf) — los @font-face de
   pesos fijos que vivían aquí (Medium.ttf, Bold.ttf, Regular.ttf) señalaban a
   archivos que ya no existen en /assets/fonts y quedaban sin efecto. */

:root{
  --gold: #a08a5c;
  --gold-dark: #8c7549;
  --black: #1c1c1c;
  --cream: #f7f5ee;
  --bg-dark: #1e1e1a;
  --bg-light: #ffffff;
  --display: "Cabinet Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Switzer", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  font-family: var(--sans);
  background: var(--bg-dark);
  color: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.light{
  background: var(--bg-light);
  color: var(--black);
}

a{ color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(160,138,92,.35); }
a:hover{ border-bottom-color: var(--gold); }

.wrap{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Header / mark */

.site-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 48px 0 0;
}

.mark{ width: clamp(84px, 18vw, 112px); height: clamp(84px, 18vw, 112px); flex: none; }

.wordmark{
  font-family: var(--display);
  font-weight: 500;
  font-size: 25px;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.light .wordmark{ color: var(--black); }

/* Hero */

.hero{
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 0 60px;
}

.tagline{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(36px, 7vw, 64px);
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 38px 0 26px;
  max-width: 14ch;
  line-height: 1.22;
}

.rule{
  width: 30px;
  height: 1px;
  background: var(--gold);
  margin: 6px 0 30px;
}

.note{
  font-size: 16.5px;
  color: rgba(247,245,238,.65);
  max-width: 40ch;
  margin: 0 0 10px;
}

.kicker{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin: 0 0 8px;
}

/* Footer */

/* ⚠️ `docwrap` Y `doc-footer` EXISTEN PARA NO CHOCAR CON LA PORTADA.
   `.wrap` significa dos cosas distintas según la hoja: 720 px aquí —ancho de
   lectura de un documento— y 1320 en design.css, que es el ancho del sitio.
   Las páginas de FAQ y privacidad cargan LAS DOS hojas y design.css va
   después, así que con `.wrap` ganaría la de 1320 y el texto se leería de
   borde a borde.
   Por eso se renombraron al integrar la portada nueva. Lo que faltó fue esto:
   el renombrado se hizo en el HTML y las clases nuevas nunca se escribieron,
   así que las cuatro páginas salieron publicadas sin ancho y sin pie. Lo cazó
   Dennis mirando /faq/ en el teléfono el 6 sep 2026. */
.docwrap{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px;
}

.doc-footer{
  border-top: 1px solid rgba(247,245,238,.12);
  padding: 26px 0 48px;
  text-align: center;
  font-size: 13px;
  color: rgba(247,245,238,.5);
}
.light .doc-footer{
  border-top-color: rgba(28,28,28,.12);
  color: rgba(28,28,28,.55);
}
/* ⚠️ EL ENLACE NO SE PARTE POR DENTRO. En un teléfono, «Privacy Notice» y
   «Aviso de Privacidad» se rompían a mitad —«Privacy» arriba y «Notice»
   abajo— y el pie quedaba descuadrado. Con `nowrap` la línea corta ENTRE
   enlaces, que es donde tiene que cortar. El `line-height` es para que las
   dos líneas respiren cuando no quepan en una. */
.doc-footer a{ color: rgba(247,245,238,.75); border-bottom-color: rgba(160,138,92,.4);
  white-space: nowrap; }
.doc-footer .docwrap{ line-height: 2; }
.light .doc-footer a{ color: var(--gold-dark); }
.doc-footer .sep{ margin: 0 8px; opacity: .5; }

.site-footer{
  border-top: 1px solid rgba(247,245,238,.12);
  padding: 26px 0 48px;
  text-align: center;
  font-size: 13px;
  color: rgba(247,245,238,.5);
}

.light .site-footer{
  border-top-color: rgba(28,28,28,.12);
  color: rgba(28,28,28,.55);
}

.site-footer a{ color: rgba(247,245,238,.75); border-bottom-color: rgba(160,138,92,.4); }
.light .site-footer a{ color: var(--gold-dark); }

.site-footer .sep{ margin: 0 8px; opacity: .5; }

/* Privacy page */

.legal{
  padding-top: 56px;
  padding-bottom: 80px;
}

.legal h1{
  font-family: var(--display);
  font-size: 30px;
  margin: 0 0 6px;
  color: var(--black);
}

.legal .updated{
  font-size: 13px;
  color: #6b6b63;
  margin: 0 0 40px;
}

.legal h2{
  font-family: var(--sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-dark);
  margin: 40px 0 12px;
  border-top: 1px solid #eae6da;
  padding-top: 28px;
}

.legal h2:first-of-type{ border-top: none; padding-top: 0; }

/* ⚠️ EL MARGEN SE DECLARA. NO SE HEREDA DEL NAVEGADOR.
   Estos párrafos no lo declaraban: se apoyaban en el `1em` que el navegador da
   por defecto a un <p>. Funcionó mientras esta página cargaba SOLO esta hoja.
   Desde que carga también design.css —que abre con `*{margin:0;padding:0}`—
   ese margen desaparece y el aviso entero sale en un solo bloque de texto
   corrido, sin separación entre párrafos ni antes de las listas.
   Lo cazó Dennis leyendo /privacidad/ en el teléfono el 6 sep 2026.
   Lo mismo vale para cualquier elemento que se añada aquí: si necesita aire,
   hay que escribirlo. */
.legal p, .legal li{
  font-size: 15.5px;
  color: var(--black);
  margin: 0 0 16px;
}

.legal li{ margin-bottom: 8px; }
.legal li:last-child{ margin-bottom: 0; }

.legal ul{ padding-left: 20px; margin: 0 0 16px; }

.pending{
  background: #faf7ee;
  border: 1px solid #e3d9bb;
  border-radius: 6px;
  padding: 18px 20px;
  font-size: 14px;
  color: #5b4d2e;
  margin: 0 0 40px;
}

.back-link{ display: inline-block; margin-top: 8px; }

.gap{
  background: #faf0d8;
  color: #7a5a1e;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 14.5px;
}

/* FAQ page */

.top-link{
  display: block;
  font-size: 14px;
  color: rgba(247,245,238,.6);
  border-bottom: none;
  padding: 22px 0 0;
}

.top-link:hover{ color: var(--cream); }

.faq{
  padding-top: 40px;
  padding-bottom: 90px;
}

.faq-intro{
  text-align: center;
  padding-bottom: 46px;
  margin-bottom: 46px;
  border-bottom: 1px solid rgba(247,245,238,.12);
}

.faq-kicker{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin: 0 0 14px;
}

.faq-intro h1{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(32px, 6vw, 44px);
  color: var(--cream);
  margin: 0 0 16px;
  line-height: 1.15;
}

.faq-intro p{
  font-size: 16px;
  color: rgba(247,245,238,.65);
  max-width: 46ch;
  margin: 0 auto 18px;
}

.faq-intro .rule{ margin: 0 auto 18px; }

.faq-updated{
  font-size: 12.5px;
  color: rgba(247,245,238,.4);
}

.faq-cat{
  margin-bottom: 54px;
}

.faq-cat-kicker{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin: 0 0 8px;
}

.faq-cat h2{
  font-family: var(--display);
  font-weight: 500;
  font-size: 26px;
  color: var(--cream);
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(247,245,238,.14);
}

.faq-item{
  margin-bottom: 30px;
}

.faq-item:last-child{ margin-bottom: 0; }

.faq-item h3{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--cream);
  margin: 0 0 8px;
  line-height: 1.4;
}

.faq-item p{
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(247,245,238,.68);
  margin: 0;
  max-width: 62ch;
}

.faq-final{
  margin-top: 60px;
  background: rgba(160,138,92,.08);
  border-left: 2px solid var(--gold);
  border-radius: 4px;
  padding: 22px 24px;
}

.faq-final-kicker{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin: 0 0 12px;
}

.faq-final p{
  font-family: var(--display);
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(247,245,238,.85);
  margin: 0;
}

/* ==========================================================================
   Escala de escritorio — SOLO desktop (min-width: 1024px).
   Ninguna regla de arriba (mobile/tablet) se modificó para lograr esto:
   este bloque únicamente añade overrides que solo aplican por encima de
   1024px de ancho de viewport. Cada valor es ~21% más grande que su
   equivalente de la regla base, usando clamp() para que siga siendo
   fluido (no un salto fijo) entre laptop y monitor externo grande.
   ========================================================================== */

@media (min-width: 1024px){

  .site-header{
    gap: 12px;
    padding: 28px 0 0;
  }

  .mark{
    width: clamp(102px, 21.8vw, 135px);
    height: clamp(102px, 21.8vw, 135px);
  }

  .wordmark{
    font-size: clamp(29px, 1.6vw, 33px);
  }

  .hero{
    padding: 0 0 16px;
  }

  .tagline{
    font-size: clamp(46px, 9.08vw, 82px);
    margin: 24px 0 16px;
  }

  .rule{
    width: 36px;
    margin: 6px 0 18px;
  }

  .note{
    font-size: clamp(19.5px, 1.05vw, 21px);
    margin: 0 0 8px;
  }

  .kicker{
    font-size: clamp(20.5px, 1.1vw, 23px);
    margin: 0 0 6px;
  }

  .faq{
    padding-top: 56px;
  }

  .faq-cat h2{
    font-size: 29px;
  }

  .faq-item h3{
    font-size: 18px;
  }

  .faq-item p{
    font-size: 16px;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   PORTADA — las secciones de marketing
   Sin animaciones de scroll, sin transiciones, sin efectos. El nivel de
   producción es el de un documento bien compuesto, no el de una demo.
   ══════════════════════════════════════════════════════════════════════════ */

/* Las secciones con imagen necesitan más aire que las 720px del texto. */
.ancho{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 28px;
}

.seccion{
  padding: 96px 0;
  border-top: 1px solid rgba(247,245,238,.10);
}

.seccion-kicker{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin: 0 0 14px;
}

.seccion h2{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(27px, 4.6vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0 0 18px;
  max-width: 18ch;
}

.seccion p{
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(247,245,238,.68);
  max-width: 54ch;
  margin: 0 0 14px;
}

/* ── Cómo funciona · pasos numerados ─────────────────────────────────────── */

.pasos{
  display: grid;
  gap: 34px;
  margin-top: 40px;
}

@media (min-width: 720px){
  .pasos{ grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

.paso-num{
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  color: var(--gold);
  border: 1px solid rgba(160,138,92,.45);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.paso h3{
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  color: var(--cream);
  margin: 0 0 8px;
}

.paso p{ font-size: 15.5px; margin: 0; max-width: none; }

/* ── Secciones de función · texto y captura ──────────────────────────────── */

.funcion{
  display: grid;
  gap: 44px;
  align-items: center;
}

@media (min-width: 820px){
  .funcion{ grid-template-columns: 1fr 340px; gap: 96px; }
  /* Alternar el lado sin duplicar marcado: las pares invierten el orden. */
  .funcion.invertida > .funcion-texto{ order: 2; }
  .funcion.invertida > .funcion-imagen{ order: 1; }
}

section[data-om-label="Exposure"] .funcion{ align-items: start; }

.funcion-imagen img{
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(247,245,238,.14);
}

/* Marcador de captura que todavía no existe. Deliberadamente feo: tiene que
   cantar en la vista previa para que nadie lo publique por descuido. */
.pendiente-captura{
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 1080 / 1920;
  border: 2px dashed rgba(160,138,92,.55);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px;
  gap: 8px;
  background: rgba(160,138,92,.05);
}

.pendiente-captura strong{
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.pendiente-captura span{
  font-size: 13.5px;
  color: rgba(247,245,238,.5);
  line-height: 1.5;
}

/* ── Plena ───────────────────────────────────────────────────────────────── */

.plena-lista{
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 18px;
  max-width: 54ch;
}

.plena-lista li{
  font-size: 16px;
  line-height: 1.65;
  color: rgba(247,245,238,.72);
  padding-left: 20px;
  position: relative;
}

.plena-lista li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 1px;
  background: var(--gold);
}

/* `.seccion p` pesa más que una sola clase, así que este remate se quedaba
   con el tamaño del cuerpo. Se sube la especificidad para que gane. */
.seccion p.plena-precio{
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.5;
  color: var(--cream);
  max-width: 34ch;
  margin: 34px 0 0;
}

/* ── Privacidad · el remate ──────────────────────────────────────────────── */

.privacidad-final{
  text-align: center;
  padding: 84px 0 74px;
  border-top: 1px solid rgba(247,245,238,.10);
}

.privacidad-final h2{ margin: 0 auto 20px; max-width: 20ch; }
.privacidad-final p{ margin: 0 auto 14px; }

.privacidad-final .rule{ margin: 26px auto 26px; }

.lema{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(21px, 3.4vw, 27px);
  line-height: 1.35;
  color: var(--gold);
  max-width: 22ch;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEGUNDA PASADA — más gráfica
   Lo que separaba esta página de la referencia (Speed Contact Sheet) no era
   gusto, era estructura: allí el producto se ve en el primer golpe de vista,
   los titulares son del doble de tamaño y van partidos en dos líneas a
   propósito, y los pasos son de cuatro palabras y no de veinticinco.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Barra de arriba ─────────────────────────────────────────────────────── */

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 28px;
}

.nav-marca{
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: none;
  color: var(--cream);
}

.nav-marca svg{ width: 30px; height: 30px; flex: none; }

.nav-marca span{
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
}

.nav-nota{
  font-size: 12.5px;
  color: rgba(247,245,238,.5);
  letter-spacing: 0.02em;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero-nuevo{
  text-align: center;
  padding: 54px 0 0;
}

.hero-nuevo .marca-grande{
  width: clamp(74px, 15vw, 92px);
  height: clamp(74px, 15vw, 92px);
  margin: 0 auto 18px;
  display: block;
}

.hero-kicker{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 0 0 20px;
}

/* El titular es el gesto gráfico principal de la página: grande, pesado y
   partido en dos líneas a mano con <br>, no donde caiga. */
.hero-nuevo h1{
  font-family: var(--display);
  font-weight: 700;
  /* La escala se calcula para que «Te pedimos paciencia,» quepa entera en
     una línea a los anchos habituales. Con 8.4vw no cabía y el titular se
     partía en cuatro, deshaciendo el corte a mano. */
  font-size: clamp(34px, 6.2vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin: 0 auto 22px;
  /* Ancho suficiente para que mande el <br> del HTML y no el reflujo del
     texto. Con 15ch el titular se partía en cuatro líneas y el corte a mano
     no servía de nada. */
  max-width: 24ch;
}

.hero-sub{
  font-size: 17px;
  line-height: 1.62;
  color: rgba(247,245,238,.62);
  max-width: 46ch;
  margin: 0 auto 14px;
}

.hero-aviso{
  font-size: 13.5px;
  color: var(--gold);
  letter-spacing: 0.02em;
  margin: 26px 0 0;
}

/* ── Los tres teléfonos del hero ─────────────────────────────────────────── */

.trio{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: end;
  max-width: 900px;
  margin: 52px auto 0;
  padding: 0 28px;
}

.trio figure{ margin: 0; }

.trio img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(247,245,238,.14);
}

/* El de en medio manda: es el que cuenta la espera. */
.trio figure:nth-child(2){ transform: scale(1.06); }
.trio figure:nth-child(2) img{ border-color: rgba(160,138,92,.45); }

.trio figcaption{
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: rgba(247,245,238,.42);
  text-align: center;
  margin-top: 14px;
}

@media (max-width: 620px){
  /* En pantalla estrecha, tres teléfonos no se leen. Se queda el de la espera. */
  .trio{ grid-template-columns: 1fr; max-width: 300px; gap: 0; }
  .trio figure:nth-child(1), .trio figure:nth-child(3){ display: none; }
  .trio figure:nth-child(2){ transform: none; }
}

/* ── Titulares de sección, al doble ──────────────────────────────────────── */

.seccion h2, .privacidad-final h2{
  font-weight: 700;
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 20ch;
}

/* ── Pasos, ahora de cuatro palabras ─────────────────────────────────────── */

.paso h3{ font-size: 21px; margin-bottom: 4px; }

.paso p{
  font-size: 14.5px;
  color: rgba(247,245,238,.52);
  letter-spacing: 0.01em;
}

/* ── Selector de idioma ──────────────────────────────────────────────────────
   Discreto a propósito: texto, no bandera. Una bandera dice país, no idioma —
   y el español de esta app no es de ningún país en particular.
   Cada página enseña el nombre del OTRO idioma, escrito en ese otro idioma:
   quien busca inglés reconoce «English» aunque no lea español. */

.nav-idioma{
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(247,245,238,.55);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.nav-idioma:hover{
  color: var(--cream);
  border-bottom-color: rgba(160,138,92,.5);
}

.light .nav-idioma{ color: rgba(28,28,28,.55); }
.light .nav-idioma:hover{ color: var(--black); }

/* ══════════════════════════════════════════════════════════════════════════
   TERCERA PASADA — aire, y el nombre donde se ve
   Lo de aquí NO es criterio de diseño: son medidas mal puestas. El texto iba a
   720 px y las secciones anchas a 1000, así que en una pantalla de 1600 el
   sitio ocupaba menos de dos tercios y se sentía estrecho.
   ══════════════════════════════════════════════════════════════════════════ */

.ancho{ max-width: 1180px; padding: 0 var(--pad); }
.trio{ max-width: 1080px; }
.seccion{ padding: 96px 0; }
.privacidad-final{ padding: 108px 0 96px; }
.hero-nuevo{ padding: 40px 0 0; }

/* El hero respira aparte del resto: no comparte el ancho de lectura. */
.hero-ancho{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ── El nombre, grande y en el centro ────────────────────────────────────────
   Estaba chiquito en la esquina, copiado de la referencia sin preguntarse si
   servía aquí. En un sitio que aún no vende nada, el nombre ES lo que hay que
   fijar. */

.hero-marca{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(21px, 3.4vw, 30px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 26px;
}

/* Y entonces la barra de arriba se queda solo con el selector de idioma: el
   nombre ya está abajo, grande. Repetirlo dos veces lo abarata. */
.nav-marca span{ display: none; }
.nav{ max-width: 1180px; }

/* ── Los dos botones de tienda ───────────────────────────────────────────────
   ⚠️ NO son los códigos oficiales de Apple y Google, y no deben serlo todavía:
   esas insignias son marcas registradas y sirven para enlazar a una app que ya
   existe en la tienda. La nuestra no ha salido.
   Ocupan su forma y su sitio exactos para que el día del lanzamiento se
   sustituyan por los de verdad sin mover una sola medida. */

.tiendas{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 34px 0 0;
}

.tienda{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 210px;
  padding: 13px 24px;
  border: 1px solid rgba(160,138,92,.45);
  border-radius: 10px;
  text-align: left;
}

.tienda-arriba{
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(247,245,238,.45);
}

.tienda-abajo{
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  color: var(--cream);
  letter-spacing: 0.01em;
}

/* La sección de Plena lleva una lista larga, así que su columna de texto es
   bastante más alta que la imagen. Centradas verticalmente, la imagen quedaba
   flotando en medio de un vacío. Alineadas arriba, las dos empiezan juntas. */
@media (min-width: 820px){
  .funcion:has(.plena-lista){ align-items: start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ENSAYO — /journal/35mm-street-photography/ (24 sep 2026)
   Usa el esqueleto del FAQ (docwrap + faq-intro + faq-item) para verse como
   parte del sitio; aquí solo lo que el FAQ no tenía: párrafos de ensayo,
   fotos y la lista de películas. Los `.ens-hueco` son el sitio de las fotos
   reales de WorthWait mientras llegan: NO se publican así.
   ══════════════════════════════════════════════════════════════════════════ */
.ens-autor{ font-size: 14px; color: rgba(247,245,238,.55); }
.ens-autor a{ color: rgba(247,245,238,.8); }
.ens-entrada{ font-family: var(--display); font-size: 19px; line-height: 1.6;
  color: rgba(247,245,238,.88); margin: 0 0 34px; }
.ens-sec{ margin: 0 0 40px; }
.ens-sec h2{ font-family: var(--display); font-weight: 500; font-size: 24px;
  color: var(--cream); margin: 0 0 12px; line-height: 1.25; text-wrap: balance; }
.ens-sec > p{ font-size: 16px; line-height: 1.75; color: rgba(247,245,238,.72);
  margin: 0 0 14px; max-width: 64ch; }
.ens-foto{ margin: 0 0 40px; }
.ens-foto img{ display: block; width: 100%; height: auto; border-radius: 3px; }
.ens-hueco-marco{ aspect-ratio: 3 / 2; display: grid; place-items: center;
  border: 1px dashed rgba(160,138,92,.55); border-radius: 3px;
  color: rgba(160,138,92,.9); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.ens-cuatro{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: -16px 0 40px; }
.ens-cuatro .ens-foto{ margin: 0; }
.ens-pelis{ margin: 18px 0 0; display: grid; gap: 14px; }
.ens-pelis dt{ font-family: var(--display); font-weight: 500; font-size: 17px; color: var(--gold); }
.ens-pelis dd{ margin: 2px 0 0; font-size: 15.5px; line-height: 1.65; color: rgba(247,245,238,.7); }
.ens-preguntas .faq-item{ margin-bottom: 24px; }
.ens-ir{ margin-top: 14px !important; font-family: var(--sans) !important; font-size: 14px !important; }
@media (min-width: 1024px){
  .ens-entrada{ font-size: 21px; }
  .ens-sec h2{ font-size: 27px; }
  .ens-sec > p{ font-size: 17px; }
}
.ens-vertical{ max-width: 560px; margin-left: auto; margin-right: auto; }

/* El ensayo, más ancho (24 sep 2026, Dennis: «muy estrecha, parece un blog
   viejo»). El contenedor pasa de 720 a 1120 px; el TEXTO se queda en una
   columna de lectura de ~760 px centrada, y las FOTOS usan el ancho entero.
   Solo afecta a `.ensayo`: el FAQ y la privacidad siguen a 720. */
.ensayo.docwrap{ max-width: 1120px; }
.ensayo .faq-intro,
.ensayo .ens-entrada,
.ensayo .ens-sec,
.ensayo .faq-final{ max-width: 760px; margin-left: auto; margin-right: auto; }
.ensayo .ens-vertical{ max-width: 640px; }
@media (min-width: 900px){
  .ens-cuatro{ grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
.ens-par{ display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 40px; }
.ens-par .ens-foto{ margin: 0; }
@media (min-width: 700px){ .ens-par{ grid-template-columns: 1fr 1fr; } }
.ens-credito{ max-width: 760px; margin: 0 auto 10px; font-size: 13px; line-height: 1.6;
  color: rgba(247,245,238,.45); }
/* Texto y fotos AL MISMO ANCHO (24 sep 2026, Dennis). Una sola columna de
   900 px para todo: intro, párrafos, fotos, preguntas y cierre. */
.ensayo.docwrap{ max-width: 956px; }
.ensayo .faq-intro,
.ensayo .ens-entrada,
.ensayo .ens-sec,
.ensayo .faq-final,
.ensayo .ens-credito,
.ensayo .ens-sec > p{ max-width: none; }
/* Las cuatro verticales de «everyday carry»: 2×2 en todos los tamaños. */
.ens-cuadro{ grid-template-columns: 1fr 1fr !important; }

/* ── JOURNAL: el índice /journal/ (25 sep 2026) ─────────────────────────── */
.jr-desc{ font-size: 15px !important; color: rgba(247,245,238,.55) !important; }
.jr-lista{ display: grid; gap: 36px; }
.jr-item{ display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.jr-foto{ border: 0; display: block; }
.jr-foto img{ display: block; width: 100%; height: auto; border-radius: 3px; }
.jr-meta{ margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(247,245,238,.5); }
.jr-tag{ color: var(--gold); }
.jr-meta .sep{ margin: 0 6px; opacity: .5; }
.jr-item h2{ font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.2;
  margin: 0 0 8px; text-wrap: balance; }
.jr-item h2 a{ color: var(--cream); border-bottom: 0; }
.jr-item h2 a:hover{ color: var(--gold); }
.jr-texto > p:last-child{ margin: 0; font-size: 16px; line-height: 1.65; color: rgba(247,245,238,.7); }
@media (min-width: 760px){ .jr-item{ grid-template-columns: 1.1fr 1fr; gap: 28px; } }

/* El logo de la esquina lleva a la portada (25 sep 2026, Dennis): / en inglés,
   /es/ en español. Sin el subrayado dorado que llevan los enlaces del texto. */
nav .mark-link{ border: 0; display: inline-flex; align-items: center; line-height: 0; }
nav .mark-link:hover{ opacity: .8; }