/* base.css — reglas globales COMUNES de materamarketing.com y robertomatera.com.
   Va después de tokens.css y antes de cualquier componente. Idéntico en los
   dos repos: lo que uno tiene y el otro no (la prosa del blog, las listas
   limpias) vive aquí igual, para que el fichero sea el mismo.

   REGLA DURA a partir de aquí: 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 van con un comentario que diga por qué. */

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

/* `height:auto` no es decorativo: las imágenes llevan width y height en el HTML
   para reservar su hueco, y sin esto se estiran (la portada del libro salió a
   260x1280 en producción por eso). `picture` es inline de serie y dentro de una
   rejilla deja la caja a ancho cero. */
img,svg,video{max-width:100%;height:auto;display:block}
picture{display:block}

h1,h2,h3,h4{font-family:var(--f-disp);font-weight:700;line-height:1.05;margin:0 0 .5em;letter-spacing:-.02em;color:inherit}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.01em}
h4{font-size:var(--t-h4);letter-spacing:0}
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:4px}
.lista-limpia{list-style:none;margin:0;padding:0}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Estructura */
.contenedor{width:min(var(--ancho-max),calc(100% - 2*var(--aire)));margin-inline:auto}
.seccion{padding:var(--sec-y) 0;display:flow-root}
.seccion--alt{background:var(--c-fondo-alt)}
/* --fuerte es la sección marino de la propuesta C. --oscura y --azul son los
   nombres de antes: se quedan como alias para que las plantillas viejas no
   pierdan el fondo mientras se reescriben. */
.seccion--fuerte,.seccion--oscura,.seccion--azul{background:var(--c-primario-osc);color:#fff}
.seccion--fuerte p,.seccion--oscura p,.seccion--azul p{color:var(--c-sobre-oscuro)}
.seccion--fuerte a:not(.btn),.seccion--oscura a:not(.btn),.seccion--azul a:not(.btn){color:#fff}
.entradilla{font-size:var(--t-entradilla);color:var(--c-texto-suave);max-width:58ch}
.seccion--fuerte .entradilla,.seccion--oscura .entradilla,.seccion--azul .entradilla{color:var(--c-sobre-oscuro)}

/* Etiqueta: la voz de «ficha». Mono, mayúsculas, sin adorno.
   .cejilla es el nombre de antes; se queda como alias. */
.eti,.cejilla{display:inline-block;font-family:var(--f-datos);font-size:var(--t-cejilla);font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--c-texto-suave);margin-bottom:var(--e-3)}
.seccion--fuerte .eti,.seccion--oscura .eti,.seccion--azul .eti,
.seccion--fuerte .cejilla,.seccion--oscura .cejilla,.seccion--azul .cejilla{color:var(--c-acento)}
.dato{font-family:var(--f-datos);font-weight:700;letter-spacing:0}

/* Subrayado de la tesis: la palabra que importa en un titular */
.subraya{background:linear-gradient(transparent 72%,var(--c-acento-claro) 72%);padding:0 .08em}
.seccion--fuerte .subraya{background:linear-gradient(transparent 72%,rgba(105,164,249,.35) 72%)}

/* Botones: base + variantes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.35rem;border-radius:var(--radio-pastilla);font-family:var(--f-disp);font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;color:inherit;transition:background var(--t-rapida),color var(--t-rapida),border-color var(--t-rapida)}
.btn--primario{background:var(--c-acento);color:var(--c-primario-osc)}
.btn--primario:hover{background:#8BB9FB;color:var(--c-primario-osc)}
.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--suave:hover{background:var(--c-primario-claro);color:var(--c-primario-osc)}
.btn--fantasma{background:transparent;border-color:currentColor}
.btn--fantasma:hover{background:rgba(105,164,249,.12)}
.btn--claro{background:#fff;color:var(--c-primario-osc)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.enlace-flecha{display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tactil);font-family:var(--f-disp);font-weight:600;color:inherit;text-decoration:none;border-bottom:2px solid var(--c-acento)}
.enlace-flecha::after{content:"→";transition:transform var(--t-rapida)}
.enlace-flecha:hover::after{transform:translateX(3px)}

/* Migas de pan: IGUALES en las dos firmas.
   <nav class="migas" aria-label="Estás en"><ol><li><a>…</a></li><li aria-current="page">…</li></ol></nav> */
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 .45rem;font-family:var(--f-datos);font-size:var(--t-cejilla);letter-spacing:.06em;text-transform:uppercase;color:var(--c-texto-suave)}
.migas li{display:inline-flex;align-items:center}
.migas li+li::before{content:"/";margin-right:.45rem;opacity:.6}
.migas a{display:inline-flex;align-items:center;min-height:var(--tactil);color:inherit;text-decoration:none}
.migas a:hover{color:var(--c-primario-osc);text-decoration:underline}
.migas [aria-current="page"]{color:var(--c-tinta)}
.seccion--fuerte .migas ol{color:var(--c-sobre-oscuro)}
.seccion--fuerte .migas [aria-current="page"],.seccion--fuerte .migas a:hover{color:#fff}

/* Menú: la entrada activa se marca IGUAL en las dos firmas.
   <a href="…" aria-current="page"> (o aria-current="true" en el padre de un desplegable). */
.menu-principal a,.menu-principal button{display:inline-flex;align-items:center;min-height:var(--tactil);padding:0 .7rem;font-family:var(--f-texto);font-weight:500;color:var(--c-tinta);text-decoration:none;background:none;border:0;cursor:pointer;font-size:.98rem}
.menu-principal a:hover,.menu-principal button:hover{color:var(--c-primario-osc);background:var(--c-fondo-alt);border-radius:var(--radio-chico)}
.menu-principal [aria-current="page"],.menu-principal [aria-current="true"]{color:var(--c-primario-osc);box-shadow:inset 0 -2px 0 var(--c-acento);border-radius:0}

/* Campos: una sola definición para todo, 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:var(--radio);background:var(--c-superficie);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:var(--radio);cursor:pointer;min-height:48px;font-weight:500;background:var(--c-superficie)}
.opcion input{width:20px;height:20px;accent-color:var(--c-primario-osc)}

/* Cajas y marcas */
.caja{background:var(--c-superficie);border:1px solid var(--c-borde);border-radius:var(--radio-grande);padding:var(--e-4)}
.caja--grande{padding:var(--e-5);box-shadow:var(--sombra)}
.caja--fuerte{background:var(--c-primario-osc);border-color:var(--c-primario-osc);color:#fff}
.caja--fuerte p{color:var(--c-sobre-oscuro)}
/* Sobre marino, el precio y la etiqueta no pueden heredar sus colores de fondo claro. */
.caja--fuerte .precio{color:#fff}
.caja--fuerte .precio small{color:var(--c-sobre-oscuro)}
.caja--fuerte .eti{color:var(--c-acento)}
.etiqueta{display:inline-block;font-family:var(--f-datos);font-weight:700;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:.2rem .5rem;border-radius:4px;color:#fff;background:var(--c-primario-osc)}
.etiqueta--web{background:var(--c-acento);color:var(--c-primario-osc)}
.etiqueta--crm{background:var(--c-primario)}
.etiqueta--ai{background:var(--c-primario-osc)}
.etiqueta--acento{background:var(--c-acento);color:var(--c-primario-osc)}
.etiqueta--caos{background:var(--c-senal-claro);color:#9C3222;border:1px solid var(--c-senal)}
.etiqueta--ok{background:var(--c-ok)}
.etiqueta--aviso{background:var(--c-aviso)}
.chip{display:inline-flex;align-items:center;min-height:var(--tactil);padding:.4rem .9rem;border-radius:var(--radio-pastilla);border:1.5px solid var(--c-borde);font-family:var(--f-texto);font-size:var(--t-small);font-weight:600;color:var(--c-tinta);text-decoration:none;background:var(--c-superficie)}
a.chip:hover{border-color:var(--c-primario-osc)}
.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)}
.precio{font-family:var(--f-datos);font-weight:700;font-size:var(--t-h3);color:var(--c-primario-osc)}
.precio small{font-family:var(--f-texto);font-weight:500;font-size:var(--t-small);margin-left:.35rem}

/* 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-datos);font-weight:400;font-size:var(--t-cejilla);letter-spacing:.06em;text-transform:uppercase;color:var(--c-texto-suave);background:var(--c-fondo-alt)}
tr:last-child td{border-bottom:0}

/* Acordeón (preguntas frecuentes) — uno solo para las dos firmas */
.acordeon{border-top:1px solid var(--c-borde)}
.acordeon details{border-bottom:1px solid var(--c-borde)}
.acordeon summary{cursor:pointer;font-family:var(--f-disp);font-weight:600;font-size:1.08rem;padding:.6rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;min-height:56px;align-items:center}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"+";font-family:var(--f-datos);font-size:1.2rem;color:var(--c-primario-osc);flex:none}
.acordeon details[open] summary::after{content:"−"}
.acordeon p{color:var(--c-texto-suave);padding-bottom:1rem;max-width:44rem}

/* Prosa: el cuerpo de las entradas del blog y las páginas de texto largo */
.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:var(--f-datos);font-size:.9em;background:var(--c-fondo-alt);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 cortes canónicos (tokens.css). No se inventa ninguno más. */
@media (max-width:980px){.dos-columnas{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}