/* base.css — reglas globales de robertomatera.com. Va después de tokens.css y
   antes de cualquier componente. Todo hereda de aquí.

   REGLA DURA a partir de este fichero: un font-size, color, radio o sombra
   escrito en un componente que podría heredar de la base es un defecto, igual
   que un hex a pelo. Las excepciones (el h1 del hero, por ejemplo) van con un
   comentario que diga por qué.

   Mismo contenido que la base de materamarketing.com, más lo que este sitio
   tiene y aquél no: la prosa del blog y las listas limpias de los menús. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-fondo);color:var(--c-tinta);font-family:var(--f-texto);font-size:var(--t-cuerpo);line-height:1.55;-webkit-font-smoothing:antialiased}

/* `height:auto` no es decorativo: las imágenes llevan width y height en el HTML
   para reservar su hueco, y sin esto el navegador aplica ese height tal cual y
   la imagen sale estirada — la portada del libro se pintó a 260x1280 en
   producción por eso. Las que necesiten alto fijo lo ponen en su clase. */
img,svg,video{max-width:100%;height:auto;display:block}
/* Todas las imágenes del sitio vienen envueltas en <picture> (la etiqueta
   `estatica_webp`). `picture` es inline por defecto, y dentro de una rejilla
   eso deja la caja a ancho cero y la imagen no aparece: pasó con la portada
   del libro. Un ancho o un aspect-ratio no hacen nada sobre un inline. */
picture{display:block}

h1,h2,h3,h4{font-family:var(--f-disp);line-height:1.05;margin:0 0 .5em;letter-spacing:-.02em;font-weight:600;font-variation-settings:"opsz" 96}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-h4)}
p{margin:0 0 1em}
small,.small{font-size:var(--t-small);color:var(--c-texto-suave)}
a{color:var(--c-primario);text-decoration-thickness:1px;text-underline-offset:.15em}
a:hover{color:var(--c-primario-osc)}
:focus-visible{outline:3px solid var(--c-acento);outline-offset:3px;border-radius:6px}

/* Menús, paginaciones y cualquier lista que no sea texto corrido. El sitio
   viejo hacía `ul{list-style:none}` global y por eso las entradas del blog no
   podían llevar viñetas: las listas del contenido se quedan como son. */
.lista-limpia{list-style:none;margin:0;padding:0}

.contenedor{width:min(var(--ancho-max),calc(100% - 2*var(--aire)));margin-inline:auto}
.seccion{padding:var(--sec-y) 0}
.seccion--oscura{background:var(--c-tinta);color:#F3F6F9}
.seccion--oscura h1,.seccion--oscura h2,.seccion--oscura h3{color:#fff}
.seccion--azul{background:var(--c-primario);color:#EAF1FA}
.seccion--azul h1,.seccion--azul h2,.seccion--azul h3{color:#fff}
.entradilla{font-size:var(--t-entradilla);color:var(--c-texto-suave);max-width:58ch}
.seccion--oscura .entradilla,.seccion--azul .entradilla{color:rgba(255,255,255,.78)}
.cejilla{font-family:var(--f-disp);font-weight:500;font-size:var(--t-cejilla);letter-spacing:.14em;text-transform:uppercase;color:var(--c-texto-suave);margin-bottom:var(--e-3);display:inline-flex;gap:.6rem;align-items:center}
.cejilla::before{content:"";width:22px;height:2px;background:var(--c-acento);border-radius:2px}
.seccion--oscura .cejilla,.seccion--azul .cejilla{color:rgba(255,255,255,.7)}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Botones: base + variantes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.75rem 1.4rem;border-radius:var(--radio-pastilla);font-family:var(--f-disp);font-weight:600;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .2s ease,color .2s ease;color:inherit}
.btn:hover{transform:translateY(-1px)}
.btn--lleno{background:var(--c-primario-osc);color:#fff}
.btn--lleno:hover{background:var(--c-primario);color:#fff}
.btn--suave{background:var(--c-acento-claro);color:var(--c-primario-osc)}
.btn--fantasma{background:transparent;border-color:currentColor}
.btn--claro{background:#fff;color:var(--c-tinta)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}

/* Campos: una sola definición para todo el sitio, checkout incluido */
.campo{display:grid;gap:.35rem}
.campo label,.campo legend{font-family:var(--f-disp);font-weight:600;font-size:.95rem}
.campo input,.campo textarea,.campo select{font:inherit;color:inherit;padding:.75rem .9rem;border:1.5px solid var(--c-borde);border-radius:10px;background:var(--c-fondo);min-height:48px;width:100%}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--c-primario);outline:none;box-shadow:0 0 0 3px var(--c-acento-claro)}
.campo textarea{min-height:120px;resize:vertical}
.campo .ayuda{font-size:var(--t-small);color:var(--c-texto-suave)}
.campo .error{font-size:var(--t-small);color:var(--c-error)}
.campo.invalido input,.campo.invalido textarea,.campo.invalido select{border-color:var(--c-error)}
.opcion{display:flex;gap:.7rem;align-items:center;padding:.7rem .9rem;border:1.5px solid var(--c-borde);border-radius:10px;cursor:pointer;min-height:48px;font-weight:500;background:var(--c-superficie)}
.opcion input{width:20px;height:20px;accent-color:var(--c-primario)}

/* Cajas */
.caja{background:var(--c-superficie);border:1px solid var(--c-borde);border-radius:var(--radio);padding:var(--e-4)}
.caja--grande{border-radius:var(--radio-grande);padding:var(--e-5);box-shadow:var(--sombra)}
.etiqueta{display:inline-block;font-family:var(--f-disp);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;border-radius:var(--radio-chico);color:#fff;background:var(--c-primario)}
.etiqueta--acento{background:var(--c-acento);color:var(--c-tinta)}
.etiqueta--ok{background:var(--c-ok)}
.etiqueta--aviso{background:var(--c-aviso)}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:.4rem .8rem;border-radius:var(--radio-pastilla);border:1.5px solid var(--c-borde);font-family:var(--f-disp);font-size:var(--t-small);font-weight:500}
.aviso{display:inline-flex;gap:.5rem;align-items:center;background:var(--c-tinta);color:#fff;font-size:.85rem;padding:.55rem .9rem;border-radius:var(--radio-pastilla)}
.aviso::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-ok)}

/* Tabla: la caja lleva el scroll, nunca la página */
.tabla-caja{overflow-x:auto;border:1px solid var(--c-borde);border-radius:var(--radio);background:var(--c-superficie)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:.8rem .9rem;border-bottom:1px solid var(--c-borde);text-align:left;vertical-align:top}
th{font-family:var(--f-disp);font-weight:600;background:var(--c-fondo)}
tr:last-child td{border-bottom:0}

/* Acordeón (preguntas frecuentes) */
.acordeon details{border-bottom:1px solid var(--c-borde);padding:.4rem 0}
.acordeon summary{cursor:pointer;font-family:var(--f-disp);font-weight:600;font-size:1.1rem;padding:.9rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;min-height:var(--tactil);align-items:center}
.acordeon summary::after{content:"+";font-size:1.5rem;color:var(--c-acento);font-weight:300}
.acordeon details[open] summary::after{content:"–"}
.acordeon p{color:var(--c-texto-suave);padding-bottom:.8rem}

/* Prosa: el cuerpo de las entradas del blog y de las páginas de texto largo.
   Es lo único de este sitio que Matera no tiene. La medida se acota en ch
   para que la línea no pase de lo legible por ancha que sea la pantalla. */
.prosa{max-width:68ch;font-size:var(--t-entradilla);line-height:1.7}
.prosa h2{margin-top:1.6em}
.prosa h3{margin-top:1.4em}
.prosa ul,.prosa ol{margin:0 0 1em;padding-left:1.3em}
.prosa li{margin-bottom:.4em}
.prosa blockquote{margin:1.5em 0;padding:.2em 0 .2em var(--e-4);border-left:3px solid var(--c-acento);color:var(--c-texto-suave);font-style:italic}
.prosa img{border-radius:var(--radio);margin:1.5em 0}
.prosa code{font-family:ui-monospace,monospace;font-size:.9em;background:var(--c-primario-osc-claro);padding:.15em .4em;border-radius:var(--radio-chico)}

/* Rejillas fluidas */
.rejilla{display:grid;gap:var(--e-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}

/* Los TRES cortes canónicos. No se inventa ninguno más. */
@media (max-width:980px){.dos-columnas{grid-template-columns:1fr}}
@media (max-width:640px){body{font-size:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}