/* =========================================================================
   BIBLIA RV1909 — SISTEMA DE DISEÑO
   Tipografía, radios, tarjetas, chips y ritmo de secciones: idénticos a la
   maqueta de Velatur (sistema Hostinger).
   Color: hoja de marca Biblia RV1909 — verde tinta #14624B sobre crema papel.
   ========================================================================= */

:root{
  /* --- Paleta Biblia RV1909 (hoja de marca del 6 de septiembre) --- */
  --brand-900:#0C1F18;      /* verde casi negro — pie */
  --brand-800:#123D31;      /* verde corporativo oscuro — bloques y botones */
  --brand-700:#4A544F;      /* texto de párrafo */
  --accent-600:#14624B;     /* VERDE TINTA — acento principal */
  --accent-700:#0F4C3A;     /* acento hover */
  --accent-100:#E2EFE9;     /* acento suave (tema Claro) */
  --accent-50:#F1F7F3;
  --cream-50:#FFFFFF;       /* fondo general — blanco */
  --cream-100:#F1ECE1;      /* bloques suaves */
  --line:#E6DFD1;           /* hairline */
  --line-strong:#D6CCB9;
  --ink:#1A1815;            /* tinta cálida */
  --muted:#6E675D;
  --white:#fff;
  --soft-green:#7FCBAF;     /* verde claro — acento sobre oscuro */
  --soft-green-2:#8FD4B8;

  /* --- Sistema Hostinger (sin tocar) --- */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-pill:999px;
  --hair:0 0 0 1px rgba(18,61,49,.10);
  --hair-strong:0 0 0 1px rgba(18,61,49,.18);
  --shadow-sm:0 1px 2px rgba(12,31,24,.05);
  --shadow-md:0 2px 6px rgba(12,31,24,.06), 0 10px 28px rgba(12,31,24,.07);
  --shadow-lg:0 4px 10px rgba(12,31,24,.08), 0 24px 60px rgba(12,31,24,.10);
  --container:1200px;
  --wide:1440px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* --- Escala de espaciado (múltiplos de 4) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0;
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5; font-weight:400;
  color:var(--brand-700); background:var(--cream-50);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--accent-600); outline-offset:3px; border-radius:4px}

/* --- Tipografía: escala Hostinger (tracking negativo, pesos 400–600) --- */
h1,h2,h3,h4,h5{margin:0; color:var(--ink); font-weight:500; letter-spacing:-.02em; line-height:1.14}
.display{font-size:clamp(2.4rem,1.5rem + 3.4vw,3.9rem); line-height:1.06; letter-spacing:-.032em; font-weight:500}
.h1{font-size:clamp(2.05rem,1.4rem + 2.6vw,3.05rem); letter-spacing:-.028em}
.h2{font-size:clamp(1.75rem,1.25rem + 2vw,2.6rem); letter-spacing:-.026em}
.h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem); letter-spacing:-.018em; font-weight:600}
.h4{font-size:1.125rem; letter-spacing:-.012em; font-weight:600}
.lead{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); line-height:1.6; color:var(--brand-700)}
.small{font-size:.875rem; line-height:1.45}
.tiny{font-size:.8125rem; line-height:1.4}
.muted{color:var(--muted)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* --- Layout --- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--s5)}
.container-wide{width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--s5)}
.section{padding-block:var(--s20)}
.section-sm{padding-block:var(--s16)}
.section-tint{background:var(--cream-100)}
.section-white{background:var(--white)}
.grid{display:grid; gap:var(--s6)}
.stack-2{display:flex; flex-direction:column; gap:var(--s2)}
.stack-3{display:flex; flex-direction:column; gap:var(--s3)}
.stack-4{display:flex; flex-direction:column; gap:var(--s4)}
.stack-6{display:flex; flex-direction:column; gap:var(--s6)}
.row{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.maxw-640{max-width:640px}
.maxw-720{max-width:720px}
.maxw-560{max-width:560px}

/* --- Chips / pills --- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--r-pill);
  font-size:.875rem; font-weight:600; letter-spacing:-.005em;
  background:rgba(20,98,75,.12); color:var(--accent-700);
  border:0; cursor:default; white-space:nowrap;
}
.chip--neutral{background:rgba(18,61,49,.07); color:var(--brand-800)}
.chip--light{background:rgba(255,255,255,.16); color:#fff}
.chip--soft{background:var(--accent-100); color:var(--accent-700)}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-700);
}
.eyebrow::before{content:""; width:18px; height:1px; background:currentColor; opacity:.5}

/* --- Botones (radio 12px, peso 600) --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:var(--r-md);
  font-size:1rem; font-weight:600; letter-spacing:-.008em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--accent-600); color:#fff}
.btn--primary:hover{background:var(--accent-700); box-shadow:0 8px 20px rgba(20,98,75,.28)}
.btn--dark{background:var(--brand-800); color:var(--cream-50)}
.btn--dark:hover{background:var(--brand-900)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--white); border-color:var(--brand-800)}
.btn--light{background:#fff; color:var(--ink)}
.btn--light:hover{background:var(--cream-100)}
.btn--outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn--outline-light:hover{background:rgba(255,255,255,.12)}
.btn--sm{padding:9px 16px; font-size:.9375rem; border-radius:var(--r-sm)}
.btn--lg{padding:16px 28px; font-size:1.0625rem}
.btn--block{width:100%}
.btn-link{color:var(--accent-700); font-weight:600; display:inline-flex; align-items:center; gap:6px}
.btn-link:hover{color:var(--accent-600)}
.btn-link .arw{transition:transform .18s var(--ease)}
.btn-link:hover .arw{transform:translateX(3px)}

/* --- Tarjetas (hairline + hover lift) --- */
.card{
  background:var(--white); border-radius:var(--r-lg);
  box-shadow:var(--hair), var(--shadow-sm);
  padding:var(--s6); transition:box-shadow .22s var(--ease), transform .22s var(--ease);
}
.card--hover:hover{box-shadow:var(--hair-strong), var(--shadow-md); transform:translateY(-3px)}
.card--flat{box-shadow:var(--hair); background:var(--cream-50)}
.card--dark{background:var(--brand-800); color:var(--cream-50); box-shadow:none}
.card--dark h2,.card--dark h3,.card--dark h4{color:#fff}

.icon-badge{
  width:44px; height:44px; flex:0 0 44px; border-radius:var(--r-md);
  display:grid; place-items:center; background:var(--accent-50); color:var(--accent-700);
  box-shadow:inset 0 0 0 1px rgba(20,98,75,.16);
}
.icon-badge svg{width:22px; height:22px}
.icon-badge--dark{background:rgba(255,255,255,.10); color:var(--soft-green); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* --- Marcador de foto ausente (degradación elegante) --- */
.ph-fallback{
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(20,98,75,.18), transparent 60%),
    linear-gradient(160deg, var(--accent-100), var(--cream-100));
}


/* =========================================================================
   CABECERA — header sticky
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; gap:var(--s6); height:72px; position:relative}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto}

/* Buscador de la fila del logo. Empieza en la vertical del borde izquierdo de
   la antigua caja desplegable (680px centrados en el mismo
   .container, es decir centro − 340px) y termina a una distancia fija del
   borde derecho, para dejar siempre el mismo hueco antes del menú. */
.nav-buscador{
  position:absolute; top:50%; transform:translateY(-50%);
  left:calc(50% - 340px); right:316px;
  display:flex; align-items:center; gap:8px;
  height:48px; padding:0 8px 0 28px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-pill);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
/* La marca francesa es 64 px más ancha que la española y el buscador tiene el
   borde izquierdo fijo: se solapaban. Se corre lo justo para dejar un hueco de
   --s6 (24 px). La regla gemela está dentro del lector; si se cambia una hay
   que cambiar la otra, o el buscador salta al pasar de la web al lector. */
html[lang^="fr"] .nav-buscador{ left:calc(50% - 310px) }

.nav-buscador:hover{border-color:var(--line-strong)}
.nav-buscador:focus-within{border-color:var(--accent-600); box-shadow:0 0 0 3px rgba(20,98,75,.12)}
.nav-buscador input{
  flex:1; min-width:0; height:100%; border:0; background:transparent; outline:none;
  font-size:1rem; color:var(--ink);
}
.nav-buscador input::placeholder{color:var(--muted)}
/* Fuera la «x» de borrar que añade el navegador: desentona con la lupa. */
.nav-buscador input::-webkit-search-cancel-button{-webkit-appearance:none; display:none}
.nav-buscador input::-ms-clear{display:none; width:0; height:0}
/* La lupa va dentro, a la derecha, y es el botón que lanza la búsqueda. */
.nav-buscador button{
  flex:none; width:34px; height:34px; display:grid; place-items:center;
  border:0; background:transparent; border-radius:var(--r-pill); cursor:pointer;
  color:var(--muted); transition:color .16s var(--ease), background .16s var(--ease);
}
.nav-buscador button:hover{color:var(--accent-700); background:var(--accent-50)}
.nav-buscador button svg{width:20px; height:20px}
.brand .sello{width:clamp(1.75rem, 1.44rem + 1.84vw, 2.63rem); height:clamp(1.75rem, 1.44rem + 1.84vw, 2.63rem); flex:none; object-fit:contain}
.brand-name{font-family:'Inter','DM Sans',-apple-system,'Segoe UI',Arial,sans-serif; font-size:clamp(1rem, 0.82rem + 1.05vw, 1.5rem); font-weight:700; letter-spacing:-.03em; color:#121212; line-height:1.06; display:block}

/* El menú va pegado a la derecha, justo antes de la lupa y el selector de idioma. */
.nav{display:flex; align-items:center; gap:2px; margin-left:auto; margin-right:0}
.nav > li{position:relative}
.nav a.nav-link{
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 14px; border-radius:var(--r-pill);
  font-size:.9375rem; font-weight:700; color:var(--brand-800);
  transition:background .16s var(--ease), color .16s var(--ease);
}
/* .is-destacado deja fijo el mismo aspecto que las demás muestran al pasar
   el ratón: fondo verde suave y color de acento. */
.nav a.nav-link:hover,
.nav a.nav-link.is-active,
.nav a.nav-link.is-destacado{
  background:rgba(20,98,75,.12); color:var(--accent-700); font-weight:700;
}
.header-actions{display:flex; align-items:center; gap:var(--s2); flex:0 0 auto}
.icon-btn{
  width:40px; height:40px; display:grid; place-items:center; border-radius:var(--r-pill);
  background:transparent; border:0; cursor:pointer; color:var(--brand-800); position:relative;
  transition:background .16s var(--ease)
}
.icon-btn:hover{background:rgba(18,61,49,.07)}
.icon-btn svg{width:20px; height:20px}
.burger{display:none}
.header-cta{display:inline-flex}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{padding-block:var(--s20) var(--s16); position:relative; overflow:hidden}
.hero::after{
  content:""; position:absolute; inset:auto -10% -55% 55%; height:70%;
  background:radial-gradient(closest-side,rgba(20,98,75,.16),transparent 70%); pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:var(--s16); align-items:center}
.hero-copy{max-width:560px; position:relative; z-index:1}
.hero-copy .display em{font-style:normal; color:var(--accent-600)}
.hero-cta{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s8)}
.hero-trust{display:flex; gap:var(--s6); flex-wrap:wrap; margin-top:var(--s8); padding-top:var(--s6); border-top:1px solid var(--line)}
.hero-trust .item{display:flex; align-items:center; gap:8px; font-size:.875rem; font-weight:500; color:var(--brand-700)}
.hero-trust svg{width:18px; height:18px; color:var(--accent-600); flex:0 0 18px}

.hero-media{position:relative; z-index:1}
/* El marco toma el alto del mapa en vez de imponer una proporción fija: así el
   mapa entra siempre entero, sin recorte ni deformación, se cambie por el que
   se cambie. */
.hero-media .m1{border-radius:0; overflow:visible; box-shadow:none}
.hero-media .m1 img{display:block; width:100%; height:auto}

/* --- Tira de valores --- */
.valuebar{background:var(--white); border-block:1px solid var(--line)}
.valuebar ul{display:flex; align-items:center; justify-content:space-between; gap:var(--s6); padding-block:18px; flex-wrap:wrap}
.valuebar li{display:flex; align-items:center; gap:9px; font-size:.9375rem; font-weight:500; color:var(--brand-800)}
.valuebar svg{width:19px; height:19px; color:var(--accent-600)}

/* =========================================================================
   TARJETAS DE SECCIÓN Y DE PASAJE
   ========================================================================= */
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s6); margin-bottom:var(--s10); flex-wrap:wrap}
.section-head .t{max-width:640px}
.section-head .h2{margin-top:12px}
.section-head p{margin-top:14px}

.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5)}
.cat-card{
  position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--white);
  box-shadow:var(--hair), var(--shadow-sm); transition:box-shadow .22s var(--ease), transform .22s var(--ease);
  display:flex; flex-direction:column;
}
.cat-card:hover{transform:translateY(-4px); box-shadow:var(--hair-strong), var(--shadow-md)}
.cat-card .ph{aspect-ratio:1/1; overflow:hidden; background:var(--cream-100)}
.cat-card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.cat-card:hover .ph img{transform:scale(1.05)}
.cat-card .bd{padding:var(--s5); display:flex; flex-direction:column; gap:6px; flex:1}
.cat-card .bd .n{font-size:.75rem; color:var(--muted); font-weight:500}
.cat-card .go{margin-top:auto; padding-top:var(--s4); color:var(--accent-700); font-weight:600; font-size:.9375rem; display:flex; align-items:center; gap:6px}

.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5)}
.prod-card{
  background:var(--white); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--hair), var(--shadow-sm); display:flex; flex-direction:column;
  transition:box-shadow .22s var(--ease), transform .22s var(--ease); position:relative;
}
.prod-card:hover{transform:translateY(-4px); box-shadow:var(--hair-strong), var(--shadow-md)}
.prod-card .ph{aspect-ratio:1/1; overflow:hidden; background:var(--cream-100); position:relative}
.prod-card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.prod-card:hover .ph img{transform:scale(1.045)}
.badge{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:5px 10px; border-radius:var(--r-pill); font-size:.75rem; font-weight:700; letter-spacing:-.005em;
  background:var(--brand-800); color:#fff;
}
.badge--accent{background:var(--accent-600)}
.badge--soft{background:var(--accent-100); color:var(--accent-700)}
.wish{
  position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.92); border:0; display:grid; place-items:center; cursor:pointer;
  color:var(--brand-800); box-shadow:var(--shadow-sm); opacity:0; transition:opacity .2s var(--ease), color .2s
}
.prod-card:hover .wish{opacity:1}
.wish:hover{color:var(--accent-600)}
.wish svg{width:17px; height:17px}
.prod-card .bd{padding:16px; display:flex; flex-direction:column; gap:7px; flex:1}
.prod-card .cat{font-size:.75rem; color:var(--muted); font-weight:500}
.prod-card .nm{font-size:.9375rem; font-weight:600; color:var(--ink); line-height:1.3; letter-spacing:-.01em}
.prod-card .vs{margin-top:2px; font-size:.875rem; line-height:1.5; color:var(--brand-700)}
.prod-card .add{margin-top:auto; padding-top:12px}


/* =========================================================================
   BLOQUES DE CONTENIDO
   ========================================================================= */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s16); align-items:center}
.split--rev .media{order:2}
.split .media{border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3}
.split .media img{width:100%; height:100%; object-fit:cover}
.split .media--tall{aspect-ratio:3/4}

.tick-list{display:flex; flex-direction:column; gap:12px; margin-top:var(--s6)}
.tick-list li{display:flex; gap:11px; align-items:flex-start; font-size:1rem}
.tick-list svg{width:20px; height:20px; flex:0 0 20px; color:var(--accent-600); margin-top:2px}

.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5)}
.feat-grid--3{grid-template-columns:repeat(3,1fr)}
.feat-card{display:flex; flex-direction:column; gap:14px}

/* --- Bloque oscuro puntual (verde corporativo) --- */
.dark-block{background:var(--brand-800); color:#D3E0DA; border-radius:var(--r-2xl); overflow:hidden}
.dark-block h2,.dark-block h3{color:#fff}
.dark-inner{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:var(--s16)}
.dark-inner > *{min-width:0}
.dark-inner .txt{padding:var(--s16) 0 var(--s16) var(--s16)}
.dark-inner .pic{aspect-ratio:1/1; height:100%}
.dark-inner .pic img{width:100%; height:100%; object-fit:cover}

/* --- Muestras de tema de lectura (antes: tonos de panal) --- */
.swatches{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5)}
.swatch{text-align:center}
.swatch .ph{aspect-ratio:3/4; border-radius:var(--r-md); overflow:hidden; background:var(--white); box-shadow:var(--hair); transition:transform .22s var(--ease), box-shadow .22s var(--ease)}
.swatch:hover .ph{transform:translateY(-4px); box-shadow:var(--hair-strong), var(--shadow-md)}
.swatch .lb{margin-top:11px; font-size:.9375rem; font-weight:600; color:var(--ink)}
.swatch .sub{font-size:.8125rem; color:var(--muted); margin-top:2px}
/* páginas de muestra dibujadas con CSS, no fotos */
.paper{height:100%; padding:16px 15px; display:flex; flex-direction:column; gap:7px; text-align:left; overflow:hidden}
.paper .cap{font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:4px}
.paper .ln{height:5px; border-radius:3px; background:currentColor; opacity:.30}
.paper .ln.w95{width:95%} .paper .ln.w90{width:90%} .paper .ln.w85{width:85%} .paper .ln.w80{width:80%}
.paper .ln.w75{width:75%} .paper .ln.w70{width:70%} .paper .ln.w60{width:60%} .paper .ln.w45{width:45%}
.paper .hl{height:5px; border-radius:3px; width:70%}
.paper--claro{background:#FAF6EE; color:#1A1815} .paper--claro .cap,.paper--claro .hl{color:#14624B; background:#14624B}
.paper--sepia{background:#F3E7D0; color:#3A2E20} .paper--sepia .cap,.paper--sepia .hl{color:#14624B; background:#14624B}
.paper--noche{background:#16261F; color:#DCE7E2} .paper--noche .cap,.paper--noche .hl{color:#7FCBAF; background:#7FCBAF}
.paper--negro{background:#000; color:#E4EDE9} .paper--negro .cap,.paper--negro .hl{color:#8FD4B8; background:#8FD4B8}
.paper .cap{background:transparent !important}

/* --- Estadísticas --- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5)}
.stat{padding:var(--s6); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--hair)}
.stat .k{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem); font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:1}
.stat .l{margin-top:8px; font-size:.9375rem; color:var(--muted)}

/* --- Pasajes (antes: reseñas) --- */
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5)}
.rev-card{display:flex; flex-direction:column; gap:14px}
.rev-card blockquote{margin:0; font-size:1.0625rem; line-height:1.62; color:var(--ink); letter-spacing:-.008em}
.rev-who{display:flex; align-items:center; gap:11px; margin-top:auto; padding-top:var(--s4); border-top:1px solid var(--line)}
.avatar{width:38px; height:38px; border-radius:var(--r-pill); background:var(--accent-100); color:var(--accent-700); display:grid; place-items:center; font-weight:700; font-size:.75rem; letter-spacing:.02em}

/* --- Blog --- */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5)}
.post-card{background:var(--white); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--hair), var(--shadow-sm); display:flex; flex-direction:column; transition:box-shadow .22s var(--ease), transform .22s var(--ease)}
.post-card:hover{transform:translateY(-4px); box-shadow:var(--hair-strong), var(--shadow-md)}
.post-card .ph{aspect-ratio:16/10; overflow:hidden; background:var(--cream-100)}
.post-card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.post-card:hover .ph img{transform:scale(1.045)}
.post-card .bd{padding:var(--s5); display:flex; flex-direction:column; gap:10px; flex:1}
.post-card .meta{font-size:.8125rem; color:var(--muted)}

/* --- Newsletter --- */
.newsletter{background:linear-gradient(180deg,var(--accent-50),var(--cream-100)); border-radius:var(--r-2xl); padding:var(--s16); box-shadow:var(--hair)}
.nl-form{display:flex; gap:var(--s3); max-width:520px; margin-top:var(--s6)}
.input{
  flex:1; padding:13px 16px; border-radius:var(--r-md); border:1px solid var(--line-strong);
  background:var(--white); font-size:1rem; color:var(--ink); outline:none;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input::placeholder{color:#7D7367}
.input:focus{border-color:var(--accent-600); box-shadow:0 0 0 3px rgba(20,98,75,.15)}
textarea.input{resize:vertical; min-height:130px}
.label{font-size:.875rem; font-weight:600; color:var(--brand-800); margin-bottom:6px; display:block}

/* --- Temas (fila de píldoras) --- */
.topics{display:flex; flex-wrap:wrap; gap:10px}
.topic{
  padding:10px 18px; border-radius:var(--r-pill); background:var(--white);
  box-shadow:var(--hair); font-weight:600; font-size:.9375rem; color:var(--brand-800);
  transition:all .16s var(--ease);
}
.topic:hover{background:var(--accent-600); color:#fff; box-shadow:none; transform:translateY(-2px)}

/* --- FAQ (acordeón) --- */
.faq{display:flex; flex-direction:column; gap:var(--s3); max-width:820px; margin-inline:auto}
.faq details{background:var(--white); border-radius:var(--r-md); box-shadow:var(--hair); overflow:hidden; transition:box-shadow .2s var(--ease)}
.faq details[open]{box-shadow:var(--hair-strong), var(--shadow-sm)}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  font-weight:600; color:var(--ink); font-size:1.0625rem; letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:22px; height:22px; flex:0 0 22px; color:var(--accent-600); transition:transform .2s var(--ease)}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding:0 22px 20px; color:var(--brand-700)}

/* --- Banda CTA --- */
.cta-band{
  background:var(--brand-800); color:#D3E0DA; border-radius:var(--r-2xl);
  padding:var(--s16) var(--s12); text-align:center; position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:-40% 30% auto -20%; height:120%;
  background:radial-gradient(closest-side,rgba(127,203,175,.30),transparent 70%);
}
.cta-band > *{position:relative}
.cta-band h2{color:#fff}

/* --- Botones de tienda de apps --- */
.stores{display:flex; gap:var(--s3); flex-wrap:wrap}
.store{
  display:inline-flex; align-items:center; gap:11px; padding:11px 18px;
  border-radius:var(--r-md); background:var(--brand-800); color:#fff;
  transition:background .16s var(--ease), transform .18s var(--ease);
}
.store:hover{background:var(--brand-900); transform:translateY(-1px)}
.store svg{width:22px; height:22px; flex:0 0 22px}
.store .s1{display:block; font-size:.6875rem; opacity:.75; line-height:1.1}
.store .s2{display:block; font-size:.9375rem; font-weight:600; line-height:1.25}
.store--outline{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong)}
.store--outline:hover{background:var(--white); color:var(--ink)}

/* =========================================================================
   PIE DE PÁGINA
   ========================================================================= */
.site-footer{background:var(--brand-900); color:#A8B8B1; padding-block:var(--s20) var(--s8); margin-top:var(--s24)}
.footer-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--s10)}
.site-footer h4{color:#fff; font-size:.875rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600; margin-bottom:var(--s5)}
.site-footer a{transition:color .16s var(--ease)}
.site-footer a:hover{color:var(--soft-green)}
.footer-links{display:flex; flex-direction:column; gap:11px; font-size:.9375rem}
.footer-brand .sello{width:56px; height:56px; object-fit:contain}
.socials{display:flex; gap:10px; margin-top:var(--s5)}
.social{width:40px; height:40px; border-radius:var(--r-md); display:grid; place-items:center; background:rgba(255,255,255,.08); color:#D3E0DA; transition:background .16s var(--ease)}
.social:hover{background:rgba(127,203,175,.30); color:#fff}
.social svg{width:18px; height:18px}
.footer-bottom{margin-top:var(--s16); padding-top:var(--s6); border-top:1px solid rgba(255,255,255,.10); display:flex; justify-content:space-between; align-items:center; gap:var(--s5); flex-wrap:wrap; font-size:.8125rem}
.pay{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.pay span{padding:5px 9px; border-radius:var(--r-xs); background:rgba(255,255,255,.09); font-size:.6875rem; font-weight:600; letter-spacing:.04em; color:#D3E0DA}

.hidden{display:none !important}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
/* Por debajo de 1140px el buscador de la cabecera se comería el logotipo,
   así que se retira (queda la lupa del selector de idioma, que despliega
   la caja de búsqueda de siempre). */
@media (max-width:1140px){
  .nav-buscador{display:none}
}
@media (max-width:1080px){
  .cat-grid,.feat-grid,.feat-grid--3,.prod-grid,.stats,.swatches{grid-template-columns:repeat(2,1fr)}
  .rev-grid,.post-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid,.split,.dark-inner{grid-template-columns:1fr; gap:var(--s10)}
  .split--rev .media{order:0}
  .dark-inner .txt{padding:var(--s12) var(--s8) 0}
  .dark-inner .pic{aspect-ratio:16/10}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:grid}
  .header-cta{display:none}
  .header-inner{height:64px; justify-content:space-between}
  .hero{padding-block:var(--s12) var(--s10)}
  .section{padding-block:var(--s16)}
  .newsletter,.cta-band{padding:var(--s10) var(--s6)}
}
@media (max-width:620px){
  .prod-grid,.cat-grid,.feat-grid,.feat-grid--3,.rev-grid,.post-grid,.stats{grid-template-columns:1fr}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .nl-form{flex-direction:column}
  .valuebar ul{justify-content:flex-start; gap:var(--s4)}
  .btn{white-space:normal; text-align:center}
  .section-head{margin-bottom:var(--s8)}
}

/* =========================================================================
   PÁGINAS INTERIORES
   Añadido al dividir el sitio en páginas independientes. Mismo sistema:
   radios, sombras y ritmo de Hostinger; color de la hoja de marca.
   ========================================================================= */

/* --- Cabecera de página --- */
.page-head{background:var(--cream-100); border-bottom:1px solid var(--line); padding-block:var(--s16) var(--s12)}
.page-head .inner{max-width:760px}
.migas{display:flex; align-items:center; gap:8px; font-size:.8125rem; color:var(--muted); margin-bottom:var(--s5)}
.migas a:hover{color:var(--accent-700)}
.migas svg{width:13px; height:13px; opacity:.5}
.page-head .h1{margin-top:14px}
.page-head .lead{margin-top:18px}
.page-head .row{margin-top:var(--s8)}

/* --- Buscador grande: píldora con el botón dentro, como el de Hostinger --- */
.buscador{
  display:flex; align-items:center; gap:8px; max-width:660px;
  padding:4px 4px 4px 20px; border-radius:var(--r-pill);
  background:var(--cream-100); border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(12,31,24,.03);
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.buscador:focus-within{background:var(--white); border-color:var(--accent-600)}
.buscador input{
  flex:1; min-width:0; height:44px; padding:0;
  border:0; background:transparent; outline:none;
  font-size:1rem; color:var(--ink);
}
.buscador input::placeholder{color:var(--muted)}
.buscador .btn{flex:none; height:44px; padding:0 24px; border-radius:var(--r-pill)}

/* --- Índice de los 66 libros --- */
.testamento{display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s8)}
.testamento .h2{letter-spacing:-.026em}
.libros{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5)}
.grupo{padding:var(--s6); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--hair)}
.grupo > .n{font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-700)}
.grupo > .d{margin-top:6px; font-size:.875rem; color:var(--muted)}
.libro-lista{margin-top:var(--s5); display:flex; flex-direction:column; gap:2px}
.libro{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  padding:7px 10px; border-radius:var(--r-sm); transition:background .16s var(--ease);
}
.libro:hover{background:var(--accent-50)}
.libro .t{font-size:.9375rem; font-weight:500; color:var(--ink)}
.libro:hover .t{color:var(--accent-700)}
.libro .c{font-size:.8125rem; color:var(--muted); white-space:nowrap}

/* --- Tabla comparativa (Premium) --- */
.tabla-wrap{overflow-x:auto; border-radius:var(--r-lg); box-shadow:var(--hair); background:var(--white)}
.tabla{width:100%; border-collapse:collapse; min-width:520px}
.tabla th, .tabla td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--line)}
.tabla thead th{font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--cream-100)}
.tabla thead th:not(:first-child){text-align:center; width:22%}
.tabla tbody td:not(:first-child){text-align:center}
.tabla tbody th{font-weight:500; color:var(--ink); font-size:.9375rem}
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td{border-bottom:0}
.tabla .si{color:var(--accent-600)}
.tabla .no{color:var(--line-strong)}
.tabla svg{width:19px; height:19px}
.tabla .val{font-weight:600; color:var(--ink); font-size:.9375rem}
.tabla .col-pro{background:var(--accent-50)}

/* --- Fichas de datos (La app) --- */
.ficha{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--hair); background:var(--white)}
.ficha > div{padding:var(--s6); border-bottom:1px solid var(--line)}
.ficha > div:nth-child(odd){border-right:1px solid var(--line)}
.ficha .k{font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.ficha .v{margin-top:8px; font-size:1rem; color:var(--ink); font-weight:500}
.ficha .v small{display:block; margin-top:4px; font-size:.875rem; font-weight:400; color:var(--muted)}

/* --- Rejilla de temas con enlace de búsqueda --- */
.tema-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4)}
.tema{
  display:flex; flex-direction:column; gap:6px; padding:var(--s6);
  border-radius:var(--r-lg); background:var(--white); box-shadow:var(--hair);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tema:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.tema .w{font-size:1.125rem; font-weight:600; color:var(--ink); letter-spacing:-.012em}
.tema .g{font-size:.8125rem; color:var(--muted)}
.tema .go{margin-top:6px; font-size:.875rem; font-weight:600; color:var(--accent-700)}

/* --- Aviso / nota --- */
.nota{
  display:flex; gap:var(--s4); padding:var(--s6); border-radius:var(--r-lg);
  background:var(--accent-50); border:1px solid var(--accent-100);
}
.nota svg{width:20px; height:20px; color:var(--accent-600); flex:none; margin-top:2px}
.nota p{font-size:.9375rem; color:var(--brand-700)}

/* --- Artículo del blog en lista --- */
.post-lista{display:flex; flex-direction:column; gap:var(--s5)}
.post-fila{
  display:grid; grid-template-columns:280px 1fr; gap:var(--s6); align-items:center;
  padding:var(--s5); border-radius:var(--r-xl); background:var(--white); box-shadow:var(--hair);
  transition:box-shadow .18s var(--ease);
}
.post-fila:hover{box-shadow:var(--shadow-md)}
.post-fila .ph{aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden; background:var(--cream-100)}
.post-fila .ph img{width:100%; height:100%; object-fit:cover}
.post-fila .meta{font-size:.8125rem; color:var(--muted)}

@media (max-width:1080px){
  .libros{grid-template-columns:repeat(2,1fr)}
  .tema-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .page-head{padding-block:var(--s12) var(--s10)}
  .post-fila{grid-template-columns:1fr}
}
@media (max-width:620px){
  .libros,.tema-grid,.ficha{grid-template-columns:1fr}
  .ficha > div:nth-child(odd){border-right:0}
  .buscador{padding-left:16px}
  .buscador input{height:42px; font-size:.9375rem}
  .buscador .btn{height:42px; padding:0 18px}
}


/* =========================================================================
   BIBLIA RV1909 — BANNERS DE LECTURA DIARIA
   Tres diseños sobre el mismo sistema: DM Sans, radios 6/8/12/16/24/32,
   --hair + --shadow-*, escala de espaciado en múltiplos de 4 y los verdes de
   la hoja de marca. Sin oro, sin cinta roja y a una sola tinta.

   El plan corre por el calendario (día del año), no por lo que haya hecho el
   visitante: no hay casillas ni estado que guardar.

   Pegar al final de assets/estilos.css.
   ========================================================================= */

/* --- Piezas compartidas por los tres --- */
.plan-barra{
  height:6px; border-radius:var(--r-pill); background:rgba(18,61,49,.12);
  overflow:hidden; width:100%;
}
.plan-barra > i{
  display:block; height:100%; width:0; border-radius:var(--r-pill);
  background:var(--accent-600); transition:width .5s var(--ease);
}

.plan-anillo{position:relative; width:76px; height:76px; flex:0 0 76px}
.plan-anillo svg{width:76px; height:76px; transform:rotate(-90deg); display:block}
.plan-anillo .pista{stroke:rgba(18,61,49,.14)}
.plan-anillo .arco{stroke:var(--accent-600); stroke-linecap:round; transition:stroke-dashoffset .6s var(--ease)}
.plan-anillo .cifra{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; color:var(--ink);
}
.plan-anillo .cifra sup{font-size:.625rem; font-weight:600; margin-left:1px; top:-.45em}

/* =========================================================================
   A · BANDA — franja clara de borde a borde, entre dos secciones
   ========================================================================= */
.plan-banda{background:var(--cream-100); border-block:1px solid var(--line)}
.plan-banda-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s10); padding-block:var(--s6);
}
.plan-banda-txt{min-width:0}
.plan-banda-txt .h3{margin-top:10px}
.plan-banda-txt .meta{margin-top:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.plan-banda-txt .meta .pt{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.45}
.plan-banda-fin{display:flex; align-items:center; gap:var(--s6); flex:0 0 auto}
.plan-banda-fin .cta{display:flex; flex-direction:column; align-items:flex-start; gap:8px}

@media (max-width:860px){
  .plan-banda-in{flex-direction:column; align-items:flex-start; gap:var(--s6); padding-block:var(--s8)}
  .plan-banda-fin{width:100%; justify-content:space-between; gap:var(--s5)}
}
@media (max-width:420px){
  .plan-banda-fin .cta .btn{padding:11px 16px}
}

/* =========================================================================
   B · BLOQUE — marco blanco, como el fondo de la página, con el calendario de
   la semana y el día del año. El panel de la derecha se queda en verde: es el
   único golpe de color del bloque.
   ========================================================================= */
.plan-bloque{
  background:var(--white); border-radius:var(--r-2xl);
  position:relative; overflow:hidden;
}
/* Sin marco exterior: ni pelo de borde ni sombra. El bloque se funde con el
   fondo blanco de la página y solo el panel de la derecha lleva su propio
   pelo de borde. */
.plan-bloque-in{
  position:relative; display:grid; grid-template-columns:1.15fr .85fr;
  gap:var(--s12); align-items:center; padding:var(--s12);
}
.plan-bloque h2{color:var(--ink); margin-top:18px}
.plan-bloque .lead{color:var(--brand-700); margin-top:14px}
.plan-bloque .row{margin-top:var(--s8)}
.plan-bloque .fin{margin-top:var(--s5); font-size:.8125rem; color:var(--muted)}

/* El panel: blanco como el resto del bloque, separado solo por el pelo del
   borde. Todos los colores salen de las fichas del sistema. */
.plan-panel{
  background:var(--white); border-radius:var(--r-xl);
  padding:var(--s6); box-shadow:var(--hair);
}
.plan-panel .cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  color:var(--accent-700);
}
.plan-semana{display:flex; justify-content:space-between; gap:6px; margin-top:var(--s5)}
.plan-dia{display:flex; flex-direction:column; align-items:center; gap:7px; flex:1}
.plan-dia-p{
  width:100%; max-width:38px; aspect-ratio:1/1; border-radius:var(--r-md);
  display:grid; place-items:center; background:var(--accent-50);
  box-shadow:inset 0 0 0 1px rgba(18,61,49,.10);
  font-size:.875rem; font-weight:600; color:var(--brand-800); font-variant-numeric:tabular-nums;
}
/* Los días ya pasados se vacían (sin relleno, solo el pelo del borde); los que
   quedan por venir van rellenos; hoy, en el verde de la marca. */
.plan-dia.es-pasado .plan-dia-p{background:transparent; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line)}
.plan-dia.es-hoy .plan-dia-p{background:var(--accent-600); color:#fff; box-shadow:0 0 0 3px rgba(20,98,75,.15)}
.plan-dia-l{font-size:.75rem; font-weight:600; color:var(--muted)}
.plan-dia.es-hoy .plan-dia-l{color:var(--accent-700); font-weight:700}

.plan-cuenta{display:flex; align-items:baseline; gap:8px; margin-top:var(--s6)}
.plan-cuenta b{font-size:2rem; font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:1}
.plan-cuenta span{font-size:.9375rem; color:var(--muted)}
.plan-panel .pie{
  margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.plan-panel .pie .n{display:flex; justify-content:space-between; font-size:.8125rem; color:var(--muted)}

@media (max-width:1080px){
  .plan-bloque-in{grid-template-columns:1fr; gap:var(--s8); padding:var(--s10)}
}
@media (max-width:620px){
  .plan-bloque-in{padding:var(--s8) var(--s6)}
}

/* =========================================================================
   C · TARJETA — tarjeta blanca con los capítulos de hoy, cada uno enlazado
   ========================================================================= */
.plan-tarjeta{
  background:var(--white); border-radius:var(--r-xl);
  box-shadow:var(--hair), var(--shadow-sm);
  padding:var(--s6); display:flex; flex-direction:column; gap:var(--s5);
  max-width:560px;
}
.plan-tarjeta-cab{display:flex; align-items:center; gap:var(--s4)}
.plan-tarjeta-cab .t{flex:1; min-width:0}
.plan-tarjeta-cab .t .fila{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap}
.plan-tarjeta-cab .t .h4{margin-top:6px}

.plan-lista{display:flex; flex-direction:column; gap:2px}
.plan-fila{
  display:flex; align-items:center; gap:var(--s3);
  padding:9px 10px; border-radius:var(--r-md);
  transition:background .16s var(--ease);
}
.plan-fila:hover{background:var(--accent-50)}
.plan-num{
  width:24px; height:24px; flex:0 0 24px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  font-size:.75rem; font-weight:700; color:var(--accent-700);
  background:var(--accent-100); font-variant-numeric:tabular-nums;
}
.plan-ref{font-weight:600; color:var(--ink); letter-spacing:-.01em; flex:1; min-width:0}
.plan-ir{
  display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  font-size:.875rem; font-weight:600; color:var(--accent-700);
}
.plan-ir svg{width:14px; height:14px; transition:transform .18s var(--ease)}
.plan-fila:hover .plan-ir svg{transform:translateX(3px)}

.plan-tarjeta-pie{
  padding-top:var(--s5); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.plan-tarjeta-pie .n{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3) var(--s4); flex-wrap:wrap}

@media (max-width:440px){
  .plan-tarjeta{padding:var(--s5)}
  .plan-tarjeta-cab > .icon-badge{display:none}   /* el ancho se lo lleva el texto */
}

/* Cuando el bloque del plan abre la portada, justo debajo de la cabecera:
   menos aire arriba y ninguno abajo, porque el hero ya trae sus 80 px. */
.section--plan-inicio{padding-block:var(--s12) 0}
@media (max-width:860px){ .section--plan-inicio{padding-block:var(--s10) 0} }


/* SEO:bibliadia — paginas de temas y libros */
.vlist{list-style:none;padding:0;margin:var(--s6) 0 0;display:grid;gap:var(--s4)}
.vlist li{padding:var(--s5);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--hair)}
.vlist .vref{display:inline-block;font-weight:700;color:var(--accent-700);text-decoration:none;margin-bottom:6px;font-size:.9375rem}
.vlist .vref:hover{text-decoration:underline}
.vlist p{margin:0;color:var(--ink);line-height:1.62}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s5)}
.chips a{display:inline-flex;padding:8px 14px;border-radius:var(--r-pill);background:var(--accent-50);color:var(--accent-700);text-decoration:none;font-weight:600;font-size:.9rem;box-shadow:var(--hair)}
.chips a:hover{background:var(--accent-100)}
.caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;margin-top:var(--s5)}
.caps a{display:flex;align-items:center;justify-content:center;height:44px;border-radius:var(--r-md);background:var(--white);box-shadow:var(--hair);color:var(--ink);text-decoration:none;font-weight:600;font-size:.9375rem}
.caps a:hover{background:var(--accent-50);color:var(--accent-700)}
.migas{font-size:.8125rem;color:var(--muted);margin-bottom:var(--s4)}
.migas a{color:var(--muted);text-decoration:none}
.migas a:hover{text-decoration:underline}
.maxw-820{max-width:820px}
.datos-libro{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s4);margin-top:var(--s6)}
.datos-libro div{padding:var(--s4);border-radius:var(--r-md);background:var(--accent-50)}
.datos-libro b{display:block;font-size:1.35rem;color:var(--accent-700)}
.datos-libro span{font-size:.8125rem;color:var(--muted)}