/* =========================================================================
   Sofy Loreto — hoja compartida de las páginas de intención
   /palabra-diaria · /tienda · /las-recetas-de-mi-padre · /conoceme
   /vision-y-mision · /oracion-en-linea · /ofrendas

   POR QUÉ ESTE ARCHIVO EXISTE, SI EL SITIO INCRUSTA SU CSS
   index.html lleva su hoja dentro a propósito: era el único recurso que
   bloqueaba el primer pintado y quitarlo del camino crítico bajó el LCP.
   Esa razón vale para UNA página. Para siete, incrustar significaría siete
   copias del mismo `:root` y siete sitios donde cambiar un color. Aquí la
   cuenta sale al revés: una sola petición, cacheada un año por vercel.json
   (`/assets/css/*` va con s-maxage=31536000), compartida por las siete.

   LO QUE HAY QUE SABER ANTES DE TOCARLA
   1. Los bloques 1 a 6 son COPIA de index.html, no una versión propia. Si
      allí cambia un color, una fuente o el ancho del lienzo, cambia aquí.
      Es la misma regla que ya rige para 404.html, que también lleva copia.
   2. Todas las rutas van absolutas, empezando por «/». Esta hoja se sirve
      desde /assets/css/, así que una ruta relativa a una fuente o a una
      imagen resolvería contra esa carpeta y no contra la raíz.
   3. Lo único que NO viene de index.html es el bloque 7 —cabecera, miga de
      pan y «sigue explorando»—, que son piezas que la home no necesita
      porque en la home no hay adónde volver.

   ORDEN DEL ARCHIVO
   1. Tipografías autoalojadas      5. Bloques traídos de la home
   2. Variables y base              6. Pie
   3. Ritmo vertical                7. Piezas propias de estas páginas
   4. Piezas repetidas y utilidades 8. Adaptación a móvil
   ========================================================================= */

/* 1 ── Tipografías autoalojadas ------------------------------------------ */
/* Las cuatro familias del sitio, con los mismos archivos. Declararlas todas
   no cuesta nada: el navegador solo descarga la que una regla llega a usar,
   y Glass Antiqua solo se usa en /vision-y-mision. */
@font-face{font-family:'Open Sans';src:url('/assets/fonts/open-sans.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('/assets/fonts/open-sans-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/assets/fonts/playfair.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/assets/fonts/playfair-i.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Quattrocento';src:url('/assets/fonts/quattrocento-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Quattrocento';src:url('/assets/fonts/quattrocento-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Glass Antiqua';src:url('/assets/fonts/glass-antiqua-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* 2 ── Variables y base -------------------------------------------------- */

:root{
  --papel:#ebebeb;
  --tinta:#000;
  --rojo:#ff3131;
  --verde:#1ba553;
  --rosa:#ff0065;
  --rosa-borde:#ffb58a;
  --gris-sombra:#808080;

  --tipo-titulo:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tipo-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --tipo-lectura:'Quattrocento',Georgia,'Times New Roman',serif;
  --tipo-manuscrita:'Glass Antiqua',Georgia,serif;

  --ancho:1366px;
  --margen:clamp(20px,5vw,37px);
}

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

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

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--tipo-serif);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body > main{flex:1}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}

/* 3 ── Ritmo vertical ---------------------------------------------------- */

.seccion{
  padding-inline:var(--margen);
  padding-block:clamp(48px,7vw,86px);
}
.contenido{max-width:var(--ancho);margin-inline:auto}
.columna{max-width:900px;margin-inline:auto;text-align:center}
.columna--ancha{max-width:960px}

/* 4 ── Piezas repetidas y utilidades ------------------------------------- */

.linea-roja{width:100%;display:block;color:transparent}
.linea-roja--corta{max-width:546px;margin:clamp(24px,3vw,34px) auto}

.pildora{
  display:inline-block;
  background:#000;
  color:#fff;
  font-family:var(--tipo-lectura);
  font-size:17.99px;
  line-height:22px;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:3px;
  padding:6px 20px;
  border-radius:999px;
  transition:transform .18s ease,background-color .18s ease;
}
.pildora:hover,.pildora:focus-visible{background:#1c1c1c;transform:translateY(-2px)}

.boton-ofrendar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:245px;
  min-height:105px;
  padding:12px 32px;
  background:var(--rosa);
  border:2px solid var(--rosa-borde);
  border-radius:20px;
  font-family:var(--tipo-lectura);
  font-size:27.96px;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:4px;
  color:var(--tinta);
  transition:transform .18s ease,filter .18s ease;
}
.boton-ofrendar:hover,.boton-ofrendar:focus-visible{transform:translateY(-2px);filter:brightness(1.05)}

.escuchar{
  display:flex;
  gap:clamp(20px,3vw,42px);
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:clamp(26px,4vw,42px);
}
.escuchar a{display:block;transition:transform .18s ease;border-radius:14px}
.escuchar a:hover,.escuchar a:focus-visible{transform:scale(1.06)}
.escuchar .apple{width:91px;height:89px;object-fit:cover;object-position:left center}
.escuchar .spotify{width:82px;height:82px}
.escuchar .red{width:82px;height:82px}

.sombra-suave{text-shadow:0 1.25px 5.3px rgba(0,0,0,.325)}
.sombra-suave--fuerte{text-shadow:0 1.6px 6.8px rgba(0,0,0,.325)}

.titulo-hueco{
  font-family:var(--tipo-titulo);
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:2.73px var(--tinta);
  paint-order:stroke fill;
  text-shadow:2.8px 2.8px 0 var(--gris-sombra);
}
.titulo-halo{
  font-family:var(--tipo-serif);
  font-weight:700;
  color:#080807;
  -webkit-text-stroke:5.9px #fff;
  paint-order:stroke fill;
}
.resaltado{
  background:#fff;
  border-radius:16px;
  padding:.08em .45em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.num{color:var(--rojo)}
.subrayado{text-decoration:underline;text-underline-offset:2px}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* El titular de cada página. En la home el rótulo de sección es un dibujo
   de Canva; aquí tiene que ser texto: es el H1 que lee Google. */
.titulo-seccion{
  font-size:63.34px;
  line-height:1.25;
  margin-bottom:clamp(20px,3vw,32px);
  /* Centrado aquí y no en la sección: la única que no lo hereda es .tienda,
     donde .tienda__aviso tiene que seguir alineado a la izquierda. */
  text-align:center;
}

/* 5 ── Bloques traídos de la home ---------------------------------------- */
/* Cada bloque conserva las clases del original para que se vea igual y para
   que un cambio se pueda copiar de un archivo al otro sin traducir nada. */

/* 5.1 Palabra diaria */
.podcast__rejilla{
  display:grid;
  grid-template-columns:minmax(0,433px) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);
  align-items:center;
}
.podcast__ilustracion{width:100%;max-width:433px;justify-self:center}
.podcast__titulo{
  font-family:var(--tipo-lectura);
  max-width:750px;
  margin-inline:auto;
  font-weight:700;
  font-size:48px;
  line-height:60px;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
}
.podcast__texto{
  max-width:775px;
  margin-inline:auto;
  font-size:34.62px;
  line-height:41px;
  letter-spacing:-.02em;
  text-align:center;
  margin-top:clamp(18px,2.5vw,28px);
  text-shadow:.39px -.19px 1.17px rgba(0,0,0,.4);
}
.podcast__texto p + p{margin-top:1.2em}

/* 5.2 Tienda */
.tienda__precio-bloque{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:52px}
.tienda__flecha{width:108px;transform:rotate(50deg);margin:0 0 22px 22px}
.tienda__precio{font-size:42.72px;line-height:49px}
.tienda__rejilla{
  display:grid;
  /* Precio + frasco + vídeo. Eran tres productos hasta que se retiró el
     corazón el 2026-08-28; dejar el repeat(3) habría abierto una columna vacía
     a la derecha y descentrado la fila entera. */
  grid-template-columns:130px repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
  align-items:start;
  margin-top:clamp(28px,4vw,44px);
}
.producto{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.producto__imagen{
  display:block;
  width:100%;
  max-width:288px;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:28px;
  transition:transform .2s ease;
}
.producto:hover .producto__imagen,.producto a:focus-visible .producto__imagen{transform:translateY(-4px)}
.producto__video{
  width:100%;
  max-width:251px;
  aspect-ratio:251/444;
  object-fit:cover;
  border-radius:30px;
  background:#d8d8d8;
}
.producto__nombre{font-size:33.2px;line-height:38px}
.producto__nota{font-size:19.87px;line-height:22px;display:block;margin-top:.2em}
.producto__nota b{font-weight:400;color:var(--verde)}
.tienda__pie{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:24px;
  margin-top:clamp(30px,4vw,44px);
}
.tienda__aviso{font-size:33.2px;line-height:38px;text-align:left;max-width:505px;margin-inline:auto}
.tienda__contacto{display:flex;flex-direction:column;align-items:center;gap:14px;margin-left:auto}

/* 5.3 Conóceme */
.conoceme__centro{text-align:center}
.conoceme__corazon{width:87px;margin:0 auto clamp(18px,2.5vw,30px)}
.conoceme__texto{
  font-family:var(--tipo-lectura);
  max-width:838px;
  margin-inline:auto;
  font-size:19.05px;
  line-height:23px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.conoceme__texto p + p{margin-top:1.6em}
.conoceme__retrato{width:158px;height:158px;border-radius:50%;object-fit:cover;margin:0 auto clamp(20px,3vw,30px)}

/* 5.4 Espacio de luz y fe */
.luz{text-align:center}
.luz__intro{
  font-family:var(--tipo-manuscrita);
  max-width:658px;
  margin-inline:auto;
  font-size:39px;
  line-height:49.7px;
}
.luz__faith{width:364px;margin:clamp(14px,2vw,22px) auto clamp(20px,3vw,32px)}
.luz__cita{
  font-family:var(--tipo-lectura);
  font-size:17.99px;
  line-height:22px;
  letter-spacing:.05em;
  text-transform:uppercase;
  max-width:470px;
  margin-inline:auto;
  position:relative;
}
.luz__cita strong{font-weight:700;display:block;margin-bottom:1em}
.luz__cita p + p{margin-top:1.5em}
.destello{position:relative;display:inline-block}
.destello::before{
  content:'';
  position:absolute;
  inset:50% auto auto 50%;
  width:44px;height:44px;
  transform:translate(-50%,-50%);
  background:url('/assets/img/destello.webp') center/contain no-repeat;
  z-index:-1;
}

/* 5.5 Visión y misión */
.vision{text-align:center}
.vision__texto{
  max-width:892px;
  margin-inline:auto;
  font-size:25.44px;
  line-height:31px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.vision__texto p + p{margin-top:1.6em}
.vision__gratitud{
  max-width:892px;
  margin-inline:auto;
  font-size:25.44px;
  line-height:31px;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-style:italic;
}
.herramientas{
  list-style:none;
  margin:clamp(26px,3vw,34px) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(30px,4vw,44px);
}
.herramienta{
  font-size:21.33px;
  line-height:26px;
  letter-spacing:.05em;
  text-transform:uppercase;
  max-width:905px;
  margin-inline:auto;
}
.herramienta__extra{margin-top:clamp(18px,2.5vw,26px);text-align:center}
.mision{text-align:center}
.mision__texto{
  font-size:28.51px;
  line-height:1.85;
  letter-spacing:.05em;
  text-transform:uppercase;
  max-width:954px;
  margin-inline:auto;
}
.mision__texto p + p{margin-top:1.1em}

/* 5.6 El libro */
.libro{display:inline-flex;align-items:flex-start;gap:14px;margin-block:clamp(14px,2vw,20px)}
.libro img.portada-libro{width:141px;border-radius:2px;transition:transform .2s ease}
.libro a:hover img.portada-libro{transform:translateY(-3px)}
.libro .rayos{width:53px}
.libro .rayos--dcha{transform:scaleX(-1)}
/* En su propia página el libro es el producto, no una viñeta de una lista:
   se enseña al tamaño al que se compra. */
.libro--protagonista img.portada-libro{width:min(290px,62vw)}
.libro--protagonista .rayos{width:88px}

/* 5.7 Ofrendas */
.ofrendas{text-align:center}
.ofrendas__titulo{
  font-size:66px;
  line-height:1.1;
  letter-spacing:-.062em;
  text-transform:uppercase;
}
.ofrendas__texto{
  font-family:var(--tipo-lectura);
  max-width:966px;
  margin-inline:auto;
  font-weight:700;
  font-size:27.96px;
  line-height:34px;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-top:clamp(40px,6vw,90px);
}
.ofrendas__pie{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(30px,4vw,50px);
  margin-top:clamp(34px,5vw,60px);
}
.ofrendas__pie .boton-ofrendar{grid-column:2}
.ofrendas__pie .ofrendas__cita{grid-column:3;justify-self:start}
.ofrendas__cita{
  font-size:28.98px;
  line-height:36.5px;
  font-style:italic;
  transform:rotate(-7.88deg);
  background:#fff;
  border-radius:14px;
  padding:18px 26px;
  max-width:400px;
}
.ofrendas__cita b{font-weight:700;display:block;margin-bottom:.3em}

/* 6 ── Pie ---------------------------------------------------------------- */

.pie{
  padding:clamp(34px,5vw,52px) var(--margen);
  border-top:1px solid rgba(0,0,0,.12);
  font-family:var(--tipo-lectura);
  font-size:15px;
  line-height:1.75;
  text-align:center;
}
/* El mapa de secciones: es el único enlace interno que tienen entre sí las
   páginas de intención, así que va en el pie de las nueve. */
.pie__mapa{display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.pie__mapa a{
  text-decoration:none;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(0,0,0,.28);
  transition:border-color .18s ease;
}
.pie__mapa a:hover,.pie__mapa a:focus-visible{border-bottom-color:var(--tinta)}
.pie__mapa [aria-current="page"]{
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#666;
  border-bottom:1px solid transparent;
}
.pie__contacto{display:flex;gap:10px 28px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.pie__contacto a{text-decoration:none;border-bottom:1px solid rgba(0,0,0,.28)}
.pie__contacto a:hover{border-bottom-color:var(--tinta)}
.pie__redes{display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.pie__redes a{
  text-decoration:none;
  color:#333;
  border-bottom:1px solid rgba(0,0,0,.18);
  transition:color .18s ease,border-color .18s ease;
}
.pie__redes a:hover,.pie__redes a:focus-visible{color:var(--tinta);border-bottom-color:var(--tinta)}
.pie__legal{color:#444;font-size:15px}
.pie__credito{display:inline-block}
.pie__credito a{color:inherit;text-decoration:underline;text-decoration-color:rgba(0,0,0,.35);text-underline-offset:2px;white-space:nowrap}
.pie__credito a:hover{text-decoration-color:currentColor}

a:focus-visible,button:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:4px}

/* 7 ── Piezas propias de estas páginas ----------------------------------- */
/* Lo único que no existe en index.html. Quien entra por Google a /tienda no
   ha visto la portada: necesita saber de quién es la página y cómo volver. */

.cabecera{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,24px);
  max-width:var(--ancho);
  width:100%;
  margin-inline:auto;
  padding:clamp(18px,3vw,30px) var(--margen) 0;
}
.cabecera__logo img{
  width:78px;height:78px;
  object-fit:cover;
  border-radius:16px;
}
.miga{
  font-family:var(--tipo-lectura);
  font-size:15px;
  letter-spacing:.05em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.miga a{text-decoration:none;border-bottom:1px solid rgba(0,0,0,.28)}
.miga a:hover,.miga a:focus-visible{border-bottom-color:var(--tinta)}
.miga [aria-current="page"]{color:#555}
.miga__separador{color:var(--rojo)}

/* La entradilla: una frase que dice de qué va la página antes de que haya
   que hacer scroll. Es también lo que se lee en el resultado de Google. */
.entradilla{
  font-family:var(--tipo-lectura);
  max-width:820px;
  margin:clamp(16px,2.5vw,24px) auto 0;
  font-size:21.33px;
  line-height:1.5;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
}

/* «Sigue explorando»: las salidas a las otras intenciones. Sin esto cada
   página sería un callejón sin salida y Google no encontraría las demás. */
.explorar{
  padding:clamp(34px,5vw,54px) var(--margen);
  border-top:1px solid rgba(0,0,0,.12);
  text-align:center;
}
.explorar__titulo{
  font-family:var(--tipo-lectura);
  font-size:17.99px;
  line-height:22px;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:clamp(16px,2.5vw,24px);
}
.explorar__enlaces{
  display:flex;
  gap:12px 18px;
  justify-content:center;
  flex-wrap:wrap;
  max-width:var(--ancho);
  margin-inline:auto;
}

/* 8 ── Adaptación a móvil ------------------------------------------------ */

@media (max-width:1100px){
  .podcast__titulo{font-size:38px;line-height:48px}
  .podcast__texto{font-size:28px;line-height:34px}
  .tienda__aviso,.producto__nombre{font-size:27px;line-height:32px}
  .mision__texto{font-size:24px}
  .ofrendas__texto{font-size:23px;line-height:29px}
}

@media (max-width:900px){
  .escuchar{gap:16px;flex-wrap:wrap;max-width:216px;margin-inline:auto}
  .escuchar .spotify,.escuchar .red{width:58px;height:58px}
  .escuchar .apple{width:58px;height:58px}

  .podcast__rejilla{grid-template-columns:1fr}
  .podcast__ilustracion{max-width:300px}
  .podcast__titulo{font-size:clamp(28px,7vw,38px);line-height:1.28}
  .podcast__texto{font-size:clamp(20px,5vw,26px);line-height:1.28}

  .tienda__rejilla{grid-template-columns:1fr;gap:44px}
  .tienda__precio-bloque{align-items:center;gap:2px;padding-top:0}
  .tienda__flecha{width:62px;margin:0;transform:rotate(14deg)}
  .tienda__precio{font-size:34px}
  .tienda__pie{flex-direction:column;align-items:center;text-align:center}
  .tienda__contacto{margin-left:0}
  .tienda__aviso{text-align:center;font-size:clamp(20px,5vw,26px);line-height:1.25}
  .producto__nombre{font-size:clamp(21px,5.4vw,28px);line-height:1.2}
  .producto__nota{font-size:17px}

  .conoceme__texto{font-size:16.5px;line-height:1.5;letter-spacing:.04em}
  .conoceme__retrato{width:132px;height:132px}

  .luz__intro{font-size:clamp(24px,6.2vw,32px);line-height:1.3}
  .luz__faith{width:min(280px,72vw)}
  .luz__cita{font-size:16.5px;line-height:1.45}

  .titulo-seccion{font-size:clamp(40px,11vw,56px)}
  .vision__texto,.vision__gratitud{font-size:clamp(18px,4.6vw,23px);line-height:1.35}
  .herramienta{font-size:clamp(17px,4.2vw,20px);line-height:1.4}
  .mision__texto{font-size:clamp(18px,4.6vw,24px);line-height:1.9}
  .resaltado{border-radius:12px;padding:.08em .3em}

  .ofrendas__titulo{font-size:clamp(42px,12vw,60px)}
  .ofrendas__texto{font-size:clamp(17px,4.4vw,22px);line-height:1.35;margin-top:32px}
  .ofrendas__pie{grid-template-columns:1fr;gap:38px;justify-items:center}
  .ofrendas__pie .boton-ofrendar{grid-column:1}
  .ofrendas__pie .ofrendas__cita{grid-column:1;justify-self:center}
  .ofrendas__cita{font-size:clamp(20px,5.2vw,26px);line-height:1.3;transform:rotate(-4deg)}
  .boton-ofrendar{min-width:0;width:min(280px,80vw);min-height:78px;font-size:23px}

  .entradilla{font-size:clamp(17px,4.2vw,20px)}
  .cabecera__logo img{width:62px;height:62px}
}

@media (max-width:480px){
  .titulo-hueco{-webkit-text-stroke-width:2px;text-shadow:2px 2px 0 var(--gris-sombra)}
  .titulo-halo{-webkit-text-stroke-width:4.5px}
  .pildora{font-size:16px;padding:7px 18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}