/* sitio.css — los componentes del sitio público de robertomatera.com.
   Va DESPUÉS de tokens.css y base.css, y antes de main.css.

   Aquí vive lo que ya está migrado al sistema de diseño. `main.css` es lo
   VIEJO pendiente de migrar: cada fase del rediseño mueve un bloque de allí a
   aquí y lo borra de allí, hasta que main.css desaparezca. Nada de lo que se
   escriba en este fichero fija un font-size, un color, un radio o una sombra
   que pueda heredar de la base.

   Fase 3a (14/09/2026): cabecera y pie. */

/* ── Cabecera ──────────────────────────────────────────────────────────────
   Fija arriba. La altura es una variable porque las páginas la necesitan para
   reservar su hueco: una cabecera fija no ocupa sitio en el flujo y sin esto
   el primer bloque de cada página se le mete debajo. */
:root{--alto-cabecera:clamp(60px,6vw,72px)}

.cabecera{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
/* `.sombra` la pone el JavaScript al bajar de 40 px. */
.cabecera.sombra{border-color:var(--c-borde);box-shadow:var(--sombra)}
.cabecera__in{display:flex;align-items:center;gap:var(--e-3);height:var(--alto-cabecera)}
.cabecera__logo{display:flex;align-items:center;flex:0 0 auto}
.cabecera__logo img{height:clamp(34px,4vw,44px);width:auto}
/* Empuja el carrito, el botón y la hamburguesa a la derecha. */
.cabecera__fin{display:flex;align-items:center;gap:var(--e-2);margin-left:auto;flex:0 0 auto}

/* Menú. En móvil es un cajón que se despliega bajo la cabecera; a partir de
   860 px (corte canónico de la hamburguesa) es una fila. */
.menu{display:none;position:fixed;top:var(--alto-cabecera);left:0;right:0;background:var(--c-superficie);flex-direction:column;padding:var(--e-2) var(--aire) var(--e-4);border-bottom:1px solid var(--c-borde);box-shadow:var(--sombra);z-index:99}
.menu.abierto{display:flex}
.menu a{display:flex;align-items:center;min-height:var(--tactil);padding:.6rem 0;border-bottom:1px solid var(--c-borde);color:var(--c-tinta);text-decoration:none;font-weight:500}
.menu a:last-child{border-bottom:0}
.menu a:hover,.menu a.activo{color:var(--c-primario)}

.menu-boton{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:var(--e-2);min-width:var(--tactil);min-height:var(--tactil);align-items:center}
.menu-boton span{display:block;width:24px;height:2px;background:var(--c-tinta);border-radius:2px;transition:transform .3s,opacity .3s}
.menu-boton.abierto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-boton.abierto span:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-boton.abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* El carrito de la cabecera. Los atributos data- los lee carrito-panel.js:
   no se tocan al renombrar clases. */
.cabecera__carrito{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--tactil);height:var(--tactil);border-radius:var(--radio-pastilla);color:var(--c-tinta);text-decoration:none}
.cabecera__carrito:hover{background:var(--c-fondo)}
.cabecera__chapa[hidden]{display:none}
.cabecera__chapa{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radio-pastilla);background:var(--c-primario);color:#fff;font-size:.7rem;font-weight:700;font-family:var(--f-disp)}

/* El botón de la sesión: la única acción llena de la cabecera. Más bajo que
   el .btn general (48 px no cabe en una barra de 60) — por eso pisa la altura. */
.cabecera .btn--cabecera{min-height:38px;padding:.4rem 1rem;font-size:var(--t-small)}
/* Hasta los 640 no cabe junto al logo, el carrito y la hamburguesa: ahí el
   acceso a la agenda es el del menú desplegable, que sí lo lleva. */
@media (max-width:640px){.cabecera .btn--cabecera{display:none}}

/* El menú pasa a fila a 1200, no en el corte canónico de 860: este sitio
   lleva diez enlaces más el carrito y el botón de la sesión, y entre 861 y
   1199 el botón se salía de la pantalla (medido). Es el único corte propio
   del proyecto y está aquí, no inventado en una pantalla suelta. */
@media (min-width:1200px){
  .menu-boton{display:none}
  .menu{display:flex;position:static;flex-direction:row;align-items:center;gap:clamp(14px,1.7vw,28px);padding:0;border:0;box-shadow:none;background:none;margin-left:var(--e-4)}
  .menu a{min-height:auto;padding:0;border:0;white-space:nowrap;color:var(--c-texto-suave);font-size:var(--t-small)}
  .menu a:hover,.menu a.activo{color:var(--c-primario)}
}

/* ── Pie ───────────────────────────────────────────────────────────────── */
.pie{background:var(--c-fondo);border-top:1px solid var(--c-borde);padding:var(--e-5) 0}
.pie__in{display:flex;flex-direction:column;align-items:center;gap:var(--e-3);text-align:center}
.pie__copia{font-size:var(--t-small);color:var(--c-texto-suave)}
.pie__enlaces{display:flex;gap:var(--e-4);flex-wrap:wrap;justify-content:center}
.pie__enlaces a{font-size:var(--t-small);color:var(--c-texto-suave);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tactil)}
.pie__enlaces a:hover{color:var(--c-primario);text-decoration:underline}
@media (min-width:641px){
  .pie__in{flex-direction:row;justify-content:space-between;text-align:left}
}

/* Se ve solo donde el botón «Reservar sesión» de la cabecera no cabe, para
   que el acceso a la agenda nunca falte sin duplicarse en pantalla ancha.
   Va con `.menu a` delante a propósito: `.solo-movil` a secas pierde contra
   el `.menu a{display:flex}` de arriba, que tiene más especificidad, y el
   enlace se colaba en escritorio junto al botón. */
@media (min-width:641px){.menu a.solo-movil{display:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   Fase 3b (14/09/2026): la portada.
   Casi todo lo hace la base: .seccion, .contenedor, .caja, .rejilla, .cejilla,
   .entradilla y los .btn. Aquí solo va lo que la base no puede saber: la
   composición de cada bloque.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La aparición al bajar, que mueve el JavaScript (.reveal → .in). La usan la
   portada y la página del libro. */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Cabecera de bloque: cejilla, título y entradilla. Sustituye a
   .section__hdr/__eyebrow/__h2/__sub, que fijaban sus propios tamaños. */
.bloque-cab{margin-bottom:var(--e-6);max-width:70ch}
.bloque-cab--centrado{margin-inline:auto;text-align:center}
.bloque-cab--centrado .cejilla{justify-content:center}
.bloque-cab--centrado .entradilla{margin-inline:auto}

/* ── Hero ────────────────────────────────────────────────────────────────
   El padding de arriba reserva el hueco de la cabecera, que es fija y no
   ocupa sitio en el flujo. */
.hero{padding:calc(var(--alto-cabecera) + var(--e-6)) 0 var(--sec-y);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-80px;right:-80px;width:min(46vw,420px);aspect-ratio:1;background:radial-gradient(circle,var(--c-acento-claro) 0%,transparent 70%);pointer-events:none}
.hero__marca{display:inline-flex;align-items:center;gap:.5rem;background:var(--c-acento-claro);color:var(--c-primario-osc);padding:.4rem .9rem;border-radius:var(--radio-pastilla);font-family:var(--f-disp);font-size:var(--t-small);font-weight:600;margin-bottom:var(--e-4)}
.hero__punto{width:8px;height:8px;background:var(--c-acento);border-radius:50%;animation:latido 2s infinite}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
.hero h1 em{color:var(--c-primario);font-style:normal}
.hero__botones{display:flex;flex-wrap:wrap;gap:var(--e-3);margin:var(--e-5) 0}
.hero__botones .btn{flex:1 1 240px;min-width:0}
.hero__foto-caja{position:relative;min-width:0}
.hero__foto{border-radius:var(--radio-grande);width:100%;box-shadow:var(--sombra)}
/* Las dos chapas flotantes sobre la foto. Se apoyan en los bordes de la caja,
   no en medidas fijas, para que no se despeguen al cambiar el ancho. */
.chapa{position:absolute;background:var(--c-superficie);border-radius:var(--radio);box-shadow:var(--sombra);padding:var(--e-3);display:flex;align-items:center;gap:var(--e-2);max-width:min(62%,260px)}
.chapa--arriba{top:8%;left:-4%}
.chapa--abajo{bottom:10%;right:-4%;background:var(--c-primario-osc);color:#fff;flex-direction:column;align-items:flex-start;gap:0}
.chapa__n{font-family:var(--f-disp);font-size:var(--t-h3);font-weight:700;line-height:1}
.chapa__txt{display:grid}
.chapa__txt strong{font-family:var(--f-disp);font-size:var(--t-small)}
.chapa__txt span,.chapa__l{font-size:.75rem;color:var(--c-texto-suave);line-height:1.3}
.chapa--abajo .chapa__l{color:rgba(255,255,255,.78)}
@media (max-width:640px){.chapa{display:none}}

/* ── Frase ── */
.frase__grande{font-family:var(--f-disp);font-size:var(--t-h2);font-weight:600;line-height:1.05;letter-spacing:-.02em;color:#fff}
.frase__texto p:last-child{margin-bottom:0}

/* Cuatro en fila donde caben, sin dejar el último colgando en una línea
   para él solo, que es lo que hacía la rejilla general con sus 280 px. */
.rejilla--cuatro{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}

/* ── Números ── */
.numero{text-align:center}
.numero__n{font-family:var(--f-disp);font-size:var(--t-h2);font-weight:700;color:var(--c-primario);line-height:1}
.numero__l{font-size:var(--t-small);color:var(--c-texto-suave);margin-top:var(--e-2)}

/* ── Método AUGE ── */
.paso{position:relative;overflow:hidden}
/* La inicial gigante de fondo: es adorno, y por eso va en celeste claro y no
   se lee. El texto del paso va encima. */
.paso__letra{position:absolute;top:-.15em;right:.05em;font-family:var(--f-disp);font-size:6rem;font-weight:700;color:var(--c-acento-claro);line-height:1;pointer-events:none}
.paso__ico{font-size:1.8rem;margin-bottom:var(--e-2)}
.paso > *{position:relative}
.paso p{color:var(--c-texto-suave);margin-bottom:0}

/* ── Resultados ── */
.caso{display:flex;flex-direction:column;overflow:hidden;padding:0}
.caso__fotos{display:grid;grid-template-columns:2fr minmax(0,1fr) minmax(0,1fr);gap:2px;background:var(--c-borde)}
.caso__fotos img{aspect-ratio:4/3;object-fit:cover;width:100%}
.caso__cuerpo{padding:var(--e-4);display:flex;flex-direction:column;flex:1}
.caso__sector{font-family:var(--f-disp);font-weight:600;font-size:var(--t-small);color:var(--c-texto-suave);margin-bottom:var(--e-3)}
.caso__cifras{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;margin-bottom:var(--e-3)}
.caso__cifra{font-family:var(--f-disp);font-size:var(--t-h3);font-weight:700;line-height:1}
.caso__cifra--antes{color:var(--c-error)}
.caso__cifra--despues{color:var(--c-ok)}
.caso__cifra--medio{color:var(--c-primario)}
.caso__cifra-l{font-size:.75rem;color:var(--c-texto-suave)}
.caso__flecha{color:var(--c-texto-suave)}
.caso__desc{color:var(--c-texto-suave);font-size:var(--t-small);flex:1}
.caso__mejora{background:var(--c-acento-claro);color:var(--c-primario-osc);border-radius:var(--radio-chico);padding:.6rem .9rem;font-family:var(--f-disp);font-weight:600;font-size:var(--t-small)}
.caso__nota{font-size:.75rem;color:var(--c-texto-suave);font-style:italic;margin:var(--e-2) 0 0}

/* ── Servicios ── */
.servicio{display:flex;flex-direction:column}
.servicio--destacado{border-color:var(--c-primario);box-shadow:var(--sombra)}
.servicio__ico{font-size:1.8rem;margin:var(--e-3) 0 var(--e-2)}
.servicio p{color:var(--c-texto-suave);flex:1}
.servicio__enlace{font-family:var(--f-disp);font-weight:600;font-size:var(--t-small);min-height:var(--tactil);display:inline-flex;align-items:center}

/* ── Quién soy ── */
.quien__foto{border-radius:var(--radio-grande);width:100%;box-shadow:var(--sombra)}
.credencial{display:flex;gap:var(--e-3);padding:var(--e-3) 0;border-top:1px solid var(--c-borde)}
.credencial__ico{font-size:1.3rem;flex:0 0 auto}
.credencial strong{display:block;font-family:var(--f-disp);font-size:var(--t-small)}
.credencial span{font-size:var(--t-small);color:var(--c-texto-suave)}

/* ── Libros ──
   Fuera de .rejilla: sus columnas de 280 px mínimo parten el libro destacado
   en dos tiras inservibles, porque dentro lleva su propia rejilla de portada
   + texto. Aquí el destacado manda y el otro le acompaña. */
.libros-rejilla{display:grid;gap:var(--e-4);grid-template-columns:1fr}
@media (min-width:981px){.libros-rejilla{grid-template-columns:1.5fr minmax(0,1fr)}}
.libro{display:grid;gap:var(--e-4);align-items:start}
.libro--destacado{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
.libro__portada{border-radius:var(--radio-chico);width:100%;box-shadow:var(--sombra)}
/* El libro que no es el destacado lleva la portada arriba, y sin tope se come
   la tarjeta entera. */
.libro:not(.libro--destacado){justify-items:center;text-align:center}
.libro:not(.libro--destacado) .libro__portada{max-width:180px}
.libro p{color:var(--c-texto-suave)}
.libro__proximo{font-size:var(--t-small);color:var(--c-texto-suave);font-family:var(--f-disp);font-weight:600}
@media (max-width:640px){.libro--destacado{grid-template-columns:1fr;justify-items:center;text-align:center}
  .libro--destacado .libro__portada{max-width:220px}}

/* ── Blog de la portada ── */
.blog-pie{margin-top:var(--e-6);display:flex;justify-content:center}

/* La tarjeta de entrada. La pintan dos sitios: el JavaScript de la portada
   (inicio.js) y el listado del blog, así que sus nombres de clase no se tocan
   sin mirar ese fichero. */
.post{display:flex;flex-direction:column;overflow:hidden;padding:0;transition:transform .35s,box-shadow .35s}
.post:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.post__thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--c-acento-claro),var(--c-fondo));display:flex;align-items:center;justify-content:center;font-size:2.5rem;position:relative;overflow:hidden}
.post__thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.post__body{padding:var(--e-4);flex:1;display:flex;flex-direction:column}
.post__cat{font-family:var(--f-disp);font-size:.75rem;font-weight:700;color:var(--c-primario);text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--e-2)}
.post__title{font-size:var(--t-h4);margin-bottom:var(--e-2)}
.post__excerpt{font-size:var(--t-small);color:var(--c-texto-suave);flex:1}
.post__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);border-top:1px solid var(--c-borde);padding-top:var(--e-3)}
.post__date{font-size:var(--t-small);color:var(--c-texto-suave)}
.post__link{font-family:var(--f-disp);font-weight:600;font-size:var(--t-small);display:inline-flex;align-items:center;gap:.3rem;min-height:var(--tactil);transition:gap .2s}
.post__link:hover{gap:.6rem}