/* ==================================================================
   mateosolivares.com — Sistema de diseño (Muestra C, aprobada Chat 01)

   Principios que este archivo respeta:
   - Sin tarjetas con sombra. La estructura se hace con líneas finas y espacio.
   - Lacre SOLO en acciones. Si todo es lacre, nada destaca.
   - Números solo en el proceso, porque ahí sí hay una secuencia.
   - Sin animaciones de entrada. Solo respuesta a lo que hace la persona.
   - Los colores de marca son fijos y no cambian con el modo oscuro del sistema.
================================================================== */

/* ------------------------------------------------------------------
   Tipografías autoalojadas (licencia OFL)
   Los archivos van en /recursos/fuentes/. Mientras no estén, el sitio
   usa la pila de respaldo y se ve correcto, solo menos personal.
------------------------------------------------------------------ */
@font-face {
  font-family: 'Besley';
  src: url('/recursos/fuentes/besley-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Besley';
  src: url('/recursos/fuentes/besley-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/recursos/fuentes/public-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/recursos/fuentes/public-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/recursos/fuentes/public-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------
   Variables
------------------------------------------------------------------ */
:root {
  /* Paleta */
  --verde:        #1F3D36;
  --verde-claro:  #2A4D45;
  --lacre:        #B23A58;
  --lacre-oscuro: #8A2E48;
  --bond:         #F7F8F6;
  --niebla:       #E3E9E5;
  --tinta:        #17211E;
  --grafito:      #5B635F;
  --linea:        #D5DDD8;
  --linea-verde:  rgba(255, 255, 255, .22);
  --blanco:       #FFFFFF;

  /* Tipografía */
  --titulos: 'Besley', 'Bookman Old Style', Georgia, 'Times New Roman', serif;
  --texto:   'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

  /* Escala: base 17px, razón cercana a 1.25 */
  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-base: 1.0625rem;
  --t-md:  1.1875rem;
  --t-lg:  1.4375rem;
  --t-xl:  1.75rem;
  --t-2xl: 2.125rem;
  --t-3xl: 2.625rem;

  /* Espacio */
  --e-1: .25rem;
  --e-2: .5rem;
  --e-3: .75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 5.5rem;

  /* Medidas */
  --ancho: 68rem;
  --lectura: 36rem;      /* menos de 80 caracteres por línea */
  --radio: 2px;          /* casi recto: documento, no aplicación */
}

/* ------------------------------------------------------------------
   Base
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--bond);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--titulos);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); font-weight: 600; }

p { margin: 0 0 var(--e-4); max-width: var(--lectura); }
p:last-child { margin-bottom: 0; }

a { color: var(--lacre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--lacre-oscuro); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--lacre);
  outline-offset: 2px;
  border-radius: var(--radio);
}

strong { font-weight: 700; }

.salta-al-contenido {
  position: absolute; left: -9999px; top: 0;
  background: var(--blanco); color: var(--tinta);
  padding: var(--e-3) var(--e-4); z-index: 100;
}
.salta-al-contenido:focus { left: var(--e-4); top: var(--e-4); }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------------
   Rejilla
------------------------------------------------------------------ */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--e-5);
}

.bloque { padding: var(--e-8) 0; }
.bloque--verde { background: var(--verde); color: var(--blanco); }
.bloque--niebla { background: var(--niebla); }
.bloque + .bloque:not(.bloque--verde):not(.bloque--niebla) { border-top: 1px solid var(--linea); }

.bloque--verde h1, .bloque--verde h2, .bloque--verde h3 { color: var(--blanco); }
.bloque--verde p { color: #D9E3DF; }

.encabezado-bloque { max-width: 44rem; margin-bottom: var(--e-6); }
.encabezado-bloque p { color: var(--grafito); font-size: var(--t-md); }
.bloque--verde .encabezado-bloque p { color: #C9D6D1; }

/* ------------------------------------------------------------------
   Botones
   El lacre marca acción. Sobre verde el botón es blanco con letra verde,
   porque el lacre no contrasta bien sobre el verde.
------------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--texto); font-size: var(--t-base); font-weight: 600;
  line-height: 1.2; text-decoration: none; text-align: center;
  padding: .85rem 1.4rem; border: 1px solid transparent; border-radius: var(--radio);
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
  min-height: 48px;
}
.boton--principal { background: var(--lacre); color: var(--blanco); }
.boton--principal:hover { background: var(--lacre-oscuro); color: var(--blanco); }

.boton--claro { background: var(--blanco); color: var(--verde); }
.boton--claro:hover { background: #E8EFEC; color: var(--verde); }

.boton--linea { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton--linea:hover { background: var(--tinta); color: var(--bond); }

/* Sobre cualquier fondo verde (bloques, portada y encabezados de página) el
   botón de línea va en blanco. Con el color normal queda 1.4:1 de contraste:
   ilegible. */
.bloque--verde .boton--linea,
.portada .boton--linea,
.encabezado-pagina .boton--linea { color: var(--blanco); border-color: var(--linea-verde); }
.bloque--verde .boton--linea:hover,
.portada .boton--linea:hover,
.encabezado-pagina .boton--linea:hover { background: var(--blanco); color: var(--verde); }

.botones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

/* Los botones dentro del menú y del pie: ahí hay reglas de color para los
   enlaces normales (.menu a, .sitio-pie a) que le ganan en especificidad al
   color del botón y lo dejan blanco sobre blanco. Estas dos líneas lo evitan. */
.menu a.boton--claro,
.sitio-pie a.boton--claro { color: var(--verde); }
.menu a.boton--claro:hover,
.sitio-pie a.boton--claro:hover { color: var(--verde); }
.menu a.boton--principal,
.sitio-pie a.boton--principal { color: var(--blanco); }

/* ------------------------------------------------------------------
   Encabezado del sitio
------------------------------------------------------------------ */
.sitio-cabecera {
  background: var(--verde);
  color: var(--blanco);
  border-bottom: 1px solid var(--linea-verde);
}
.sitio-cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); min-height: 68px;
}
.marca {
  font-family: var(--titulos); font-weight: 800; font-size: var(--t-md);
  color: var(--blanco); text-decoration: none; letter-spacing: -0.01em; line-height: 1.1;
}
.marca span { display: block; font-family: var(--texto); font-size: var(--t-xs); font-weight: 400; color: #A8BDB6; letter-spacing: 0; }

.menu { display: none; }
.menu a { color: var(--blanco); text-decoration: none; font-size: var(--t-sm); font-weight: 600; }
.menu a:hover, .menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }

.menu-boton {
  background: transparent; border: 1px solid var(--linea-verde); color: var(--blanco);
  border-radius: var(--radio); padding: .6rem .8rem; font: inherit; font-size: var(--t-sm);
  font-weight: 600; cursor: pointer; min-height: 44px;
}
.menu-movil { display: none; padding-bottom: var(--e-5); }
.menu-movil[data-abierto="si"] { display: block; }
.menu-movil ul { list-style: none; margin: 0; padding: 0; }
.menu-movil li + li { border-top: 1px solid var(--linea-verde); }
.menu-movil a { display: block; padding: .8rem 0; color: var(--blanco); text-decoration: none; font-weight: 600; }

@media (min-width: 62rem) {
  .menu { display: flex; gap: var(--e-5); align-items: center; }
  .menu-boton { display: none; }
  .menu-movil { display: none !important; }
}

/* ------------------------------------------------------------------
   Portada
   Verde completo, nombre grande en blanco, una sola acción clara.
------------------------------------------------------------------ */
.portada { background: var(--verde); color: var(--blanco); padding: var(--e-8) 0 var(--e-7); }
.portada__nombre {
  font-size: clamp(2.5rem, 11vw, 5.25rem);
  font-weight: 800; line-height: .98; letter-spacing: -0.03em;
  margin: 0 0 var(--e-5); color: var(--blanco);
}
.portada__oficio {
  font-family: var(--texto); font-size: var(--t-lg); font-weight: 600;
  line-height: 1.35; color: var(--blanco); margin: 0 0 var(--e-4); max-width: 30rem;
}
.portada__texto { color: #C9D6D1; max-width: 34rem; margin-bottom: var(--e-6); }
.portada__foto { margin-top: var(--e-6); }
.portada__foto img { width: 100%; border-radius: var(--radio); filter: saturate(.92); }
.portada__foto-pendiente {
  border: 1px dashed var(--linea-verde); border-radius: var(--radio);
  padding: var(--e-6) var(--e-4); text-align: center; color: #A8BDB6; font-size: var(--t-sm);
}

@media (min-width: 62rem) {
  .portada { padding: var(--e-9) 0 var(--e-8); }
  .portada__rejilla {
    display: grid; grid-template-columns: 7fr 5fr; gap: var(--e-7); align-items: end;
  }
  /* Mientras no haya fotografía, el texto no se queda solo en media pantalla */
  .portada__rejilla--sin-foto { grid-template-columns: minmax(0, 46rem); }
  .portada__foto { margin-top: 0; }
}

/* Franja de datos: alcance, formación, cédula */
.franja-datos { background: var(--verde-claro); color: var(--blanco); padding: var(--e-5) 0; }
.franja-datos ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-4);
}
.franja-datos li { font-size: var(--t-sm); line-height: 1.4; }
.franja-datos strong { display: block; font-size: var(--t-base); font-weight: 700; }
.franja-datos span { color: #A8BDB6; }

@media (min-width: 48rem) {
  .franja-datos ul { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--e-5); }
  .franja-datos li + li { border-left: 1px solid var(--linea-verde); padding-left: var(--e-5); }
}

/* ------------------------------------------------------------------
   Problemas, en la voz del cliente
   Esta es la decisión memorable del diseño: la frase que dice la persona,
   en Besley grande, y la respuesta breve al lado.
------------------------------------------------------------------ */
.problemas { display: grid; gap: 0; }
.problema {
  display: block; padding: var(--e-6) 0; border-top: 1px solid var(--linea);
  text-decoration: none; color: inherit;
}
.problema:last-child { border-bottom: 1px solid var(--linea); }
.problema__frase {
  font-family: var(--titulos); font-weight: 800; font-size: clamp(1.4rem, 4.6vw, 1.95rem);
  line-height: 1.16; letter-spacing: -0.02em; color: var(--verde); margin: 0 0 var(--e-3);
  max-width: 30ch;
}
.problema__respuesta { color: var(--grafito); margin: 0 0 var(--e-3); max-width: 34rem; }
.problema__accion { font-size: var(--t-sm); font-weight: 600; color: var(--lacre); }
.problema:hover .problema__accion { color: var(--lacre-oscuro); text-decoration: underline; text-underline-offset: .25em; }
.problema:hover .problema__frase { color: var(--tinta); }

@media (min-width: 55rem) {
  .problema { display: grid; grid-template-columns: 6fr 5fr; gap: var(--e-6); align-items: start; }
  .problema__frase { margin-bottom: 0; }
}

/* ------------------------------------------------------------------
   Perfil / por qué él
------------------------------------------------------------------ */
.perfil__rejilla { display: grid; gap: var(--e-6); }
.perfil__texto p { font-size: var(--t-md); }
.credenciales { list-style: none; margin: 0; padding: 0; }
.credenciales li { padding: var(--e-4) 0; border-top: 1px solid var(--linea); }
.credenciales li:last-child { border-bottom: 1px solid var(--linea); }
.credenciales strong { display: block; font-family: var(--titulos); font-weight: 600; font-size: var(--t-md); }
.credenciales span { color: var(--grafito); font-size: var(--t-sm); }

@media (min-width: 55rem) {
  .perfil__rejilla { grid-template-columns: 7fr 5fr; gap: var(--e-7); }
}

/* ------------------------------------------------------------------
   Proceso: aquí sí hay secuencia, así que aquí sí van números
------------------------------------------------------------------ */
.proceso { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.proceso li {
  counter-increment: paso;
  display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--e-4);
  padding: var(--e-5) 0; border-top: 1px solid var(--linea);
}
.proceso li:last-child { border-bottom: 1px solid var(--linea); }
.proceso li::before {
  content: counter(paso);
  font-family: var(--titulos); font-weight: 800; font-size: var(--t-lg);
  color: var(--lacre); line-height: 1.1;
}
.proceso h3 { margin-bottom: var(--e-2); }
.proceso p { color: var(--grafito); margin: 0; }

/* ------------------------------------------------------------------
   Consultor
------------------------------------------------------------------ */
.consultor__caja { border: 1px solid var(--linea-verde); padding: var(--e-6); border-radius: var(--radio); }
.consultor__nota { font-size: var(--t-sm); color: #A8BDB6; margin-top: var(--e-4); }

/* ------------------------------------------------------------------
   Testimonios
------------------------------------------------------------------ */
.testimonios { display: grid; gap: var(--e-6); }
.testimonio { border-left: 2px solid var(--lacre); padding-left: var(--e-5); }
.testimonio blockquote {
  margin: 0 0 var(--e-3); font-family: var(--titulos); font-weight: 600;
  font-size: var(--t-md); line-height: 1.45;
}
.testimonio figcaption { color: var(--grafito); font-size: var(--t-sm); }

@media (min-width: 48rem) {
  .testimonios { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--e-6) var(--e-7); }
}

/* ------------------------------------------------------------------
   Medios y publicaciones
------------------------------------------------------------------ */
.medios { list-style: none; margin: 0; padding: 0; }
.medios li { padding: var(--e-4) 0; border-top: 1px solid var(--linea); }
.medios li:last-child { border-bottom: 1px solid var(--linea); }
.medios__titulo { font-family: var(--titulos); font-weight: 600; font-size: var(--t-md); display: block; }
.medios__meta { color: var(--grafito); font-size: var(--t-sm); }

/* ------------------------------------------------------------------
   Blog
------------------------------------------------------------------ */
.entradas { display: grid; gap: var(--e-6); }
.entrada-resumen { border-top: 1px solid var(--linea); padding-top: var(--e-4); }
.entrada-resumen h3 { margin-bottom: var(--e-2); }
.entrada-resumen h3 a { color: var(--verde); text-decoration: none; }
.entrada-resumen h3 a:hover { color: var(--lacre); text-decoration: underline; text-underline-offset: .2em; }
.entrada-resumen p { color: var(--grafito); font-size: var(--t-sm); }
.entrada-resumen__fecha { color: var(--grafito); font-size: var(--t-xs); }

@media (min-width: 48rem) {
  .entradas { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--e-6); }
}

/* ------------------------------------------------------------------
   Preguntas frecuentes (acordeón nativo, accesible sin JavaScript)
------------------------------------------------------------------ */
.preguntas { max-width: 48rem; }
.pregunta { border-top: 1px solid var(--linea); }
.preguntas .pregunta:last-of-type { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  cursor: pointer; list-style: none; padding: var(--e-4) 2.5rem var(--e-4) 0;
  position: relative; font-family: var(--titulos); font-weight: 600; font-size: var(--t-md);
  line-height: 1.3;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: '+'; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--texto); font-weight: 400; font-size: 1.5rem; color: var(--lacre); line-height: 1;
}
.pregunta[open] summary::after { content: '–'; }
.pregunta__respuesta { padding: 0 0 var(--e-5); color: var(--grafito); }
.pregunta__respuesta p { max-width: 40rem; }

/* ------------------------------------------------------------------
   Contacto y formulario
------------------------------------------------------------------ */
.contacto__rejilla { display: grid; gap: var(--e-7); }
.datos-contacto { list-style: none; margin: 0 0 var(--e-5); padding: 0; }
.datos-contacto li { padding: var(--e-3) 0; border-top: 1px solid var(--linea-verde); }
.datos-contacto span { display: block; font-size: var(--t-xs); color: #A8BDB6; }
.datos-contacto a { color: var(--blanco); }
.datos-contacto a:hover { color: var(--blanco); }

.formulario { display: grid; gap: var(--e-4); }
.campo { display: grid; gap: var(--e-2); }
.campo label { font-size: var(--t-sm); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; font-size: var(--t-base); color: var(--tinta);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .75rem .85rem; min-height: 48px;
}
.campo textarea { min-height: 7rem; resize: vertical; }
.campo--doble { display: grid; gap: var(--e-4); }
.campo-consentimiento {
  display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--e-3);
  align-items: start; font-size: var(--t-sm); color: #C9D6D1;
}
.campo-consentimiento input { width: 1.25rem; height: 1.25rem; margin-top: .25rem; min-height: 0; }
.campo-consentimiento a { color: var(--blanco); }
.formulario__nota { font-size: var(--t-xs); color: #A8BDB6; }
.formulario__error { background: var(--lacre); color: var(--blanco); padding: var(--e-3) var(--e-4); border-radius: var(--radio); font-size: var(--t-sm); }

@media (min-width: 48rem) {
  .campo--doble { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 62rem) {
  .contacto__rejilla { grid-template-columns: 5fr 7fr; gap: var(--e-8); }
}

/* ------------------------------------------------------------------
   Páginas internas
------------------------------------------------------------------ */
.migas { font-size: var(--t-xs); color: #A8BDB6; margin-bottom: var(--e-4); }
.migas a { color: #C9D6D1; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; }
.migas li + li::before { content: '/'; margin-right: var(--e-2); color: var(--linea-verde); }

.encabezado-pagina { background: var(--verde); color: var(--blanco); padding: var(--e-7) 0; }
.encabezado-pagina h1 { font-size: clamp(1.9rem, 6vw, 3rem); margin-bottom: var(--e-4); }
.encabezado-pagina__frase {
  font-family: var(--titulos); font-weight: 600; font-size: var(--t-lg);
  line-height: 1.3; color: var(--blanco); max-width: 30ch; margin: 0 0 var(--e-5);
}

.prosa { max-width: var(--lectura); }
.prosa h2 { font-size: var(--t-lg); margin-top: var(--e-6); }
.prosa h3 { margin-top: var(--e-5); }
.prosa ul { padding-left: 1.2rem; }
.prosa li { margin-bottom: var(--e-2); max-width: var(--lectura); }

.lista-marcada { list-style: none; margin: 0; padding: 0; }
.lista-marcada li { padding: var(--e-3) 0 var(--e-3) 1.5rem; border-top: 1px solid var(--linea); position: relative; }
.lista-marcada li:last-child { border-bottom: 1px solid var(--linea); }
.lista-marcada li::before {
  content: ''; position: absolute; left: 0; top: 1.4rem;
  width: .5rem; height: 1px; background: var(--lacre);
}

.aviso-legal {
  border-left: 2px solid var(--linea); padding-left: var(--e-4);
  font-size: var(--t-sm); color: var(--grafito); max-width: 40rem;
}

/* ------------------------------------------------------------------
   Pie
------------------------------------------------------------------ */
.sitio-pie { background: var(--verde); color: #C9D6D1; padding: var(--e-7) 0 var(--e-5); font-size: var(--t-sm); }
.sitio-pie a { color: var(--blanco); }
.sitio-pie__rejilla { display: grid; gap: var(--e-6); margin-bottom: var(--e-6); }
.sitio-pie h2 { font-size: var(--t-sm); font-family: var(--texto); font-weight: 700; color: var(--blanco); margin-bottom: var(--e-3); }
.sitio-pie ul { list-style: none; margin: 0; padding: 0; }
.sitio-pie li { margin-bottom: var(--e-2); }
.sitio-pie__legal {
  border-top: 1px solid var(--linea-verde); padding-top: var(--e-4);
  display: grid; gap: var(--e-3); font-size: var(--t-xs); color: #A8BDB6;
}
.sitio-pie__nombre { font-family: var(--titulos); font-weight: 800; font-size: var(--t-lg); color: var(--blanco); }

@media (min-width: 48rem) {
  .sitio-pie__rejilla { grid-template-columns: 2fr 1fr 1fr; gap: var(--e-7); }
  .sitio-pie__legal { grid-template-columns: 1fr auto; align-items: center; }
}

/* ------------------------------------------------------------------
   Barra fija de WhatsApp en móvil
   Una sola acción, siempre a la mano, sin tapar el contenido.
------------------------------------------------------------------ */
.barra-accion {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--bond); border-top: 1px solid var(--linea);
  padding: var(--e-3) var(--e-4);
  padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
}
.barra-accion .boton { width: 100%; }
body.con-barra { padding-bottom: 5.5rem; }

@media (min-width: 62rem) {
  .barra-accion { display: none; }
  body.con-barra { padding-bottom: 0; }
}

/* ------------------------------------------------------------------
   Aviso de cookies (se conecta en el Chat 07)
------------------------------------------------------------------ */
.cookies {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: var(--verde); color: var(--blanco); padding: var(--e-4);
  border-top: 1px solid var(--linea-verde);
}
.cookies__caja { max-width: var(--ancho); margin: 0 auto; display: grid; gap: var(--e-3); }
.cookies p { font-size: var(--t-sm); color: #C9D6D1; margin: 0; max-width: 46rem; }
.cookies .botones { gap: var(--e-2); }
/* Sobre el verde del aviso, el lacre no contrasta: enlace y botón van en blanco. */
.cookies a:not(.boton) { color: var(--blanco); }
.cookies .boton--linea { color: var(--blanco); border-color: var(--linea-verde); }
.cookies .boton--linea:hover { background: var(--blanco); color: var(--verde); }

/* Mientras se decide lo de las cookies, la barra de WhatsApp se quita:
   si no, quedan dos barras encimadas en la parte de abajo del celular. */
body.con-cookies .barra-accion { display: none; }

/* ------------------------------------------------------------------
   Impresión
------------------------------------------------------------------ */
@media print {
  .sitio-cabecera, .barra-accion, .cookies, .sitio-pie { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .bloque--verde, .portada, .encabezado-pagina { background: #fff !important; color: #000 !important; }
}

/* ==================================================================
   Blog (Chat 05)
================================================================== */

.cintillo-previa {
  background: var(--lacre); color: var(--blanco);
  padding: .7rem var(--e-5); font-size: var(--t-sm); font-weight: 600; text-align: center;
}

.filtros { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin: 0; padding: 0; }
.filtro { font-size: var(--t-sm); font-weight: 600; text-decoration: none; color: var(--grafito); }
.filtro:hover { color: var(--lacre); }
.filtro--activo { color: var(--tinta); text-decoration: underline; text-underline-offset: .3em; }

.entradas--listado { gap: var(--e-7) var(--e-6); }
.entrada-resumen__foto { display: block; margin-bottom: var(--e-3); }
.entrada-resumen__foto img { width: 100%; border-radius: var(--radio); }
.entrada-resumen h2 { font-size: var(--t-md); margin-bottom: var(--e-2); }
.entrada-resumen h2 a { color: var(--verde); text-decoration: none; }
.entrada-resumen h2 a:hover { color: var(--lacre); text-decoration: underline; text-underline-offset: .2em; }

.entrada__meta { color: #A8BDB6; font-size: var(--t-sm); margin-bottom: var(--e-4); }
.entrada__foto img { width: 100%; border-radius: var(--radio); }

/* Cuerpo de una entrada: columna de lectura cómoda */
.prosa--entrada { font-size: var(--t-md); }
.prosa--entrada h2 { font-size: var(--t-lg); margin-top: var(--e-7); }
.prosa--entrada h3 { font-size: var(--t-md); margin-top: var(--e-5); }
.prosa--entrada p, .prosa--entrada li { max-width: var(--lectura); }
.prosa--entrada ul, .prosa--entrada ol { padding-left: 1.2rem; margin-bottom: var(--e-4); }
.prosa--entrada li { margin-bottom: var(--e-2); }
.prosa--entrada blockquote {
  margin: var(--e-5) 0; padding-left: var(--e-5); border-left: 2px solid var(--lacre);
  font-family: var(--titulos); font-weight: 600; font-size: var(--t-lg); line-height: 1.4;
}
.prosa--entrada blockquote p { max-width: 32rem; }
.prosa--entrada figure { margin: var(--e-6) 0; }
.prosa--entrada figure img { width: 100%; border-radius: var(--radio); }
.prosa--entrada figcaption { color: var(--grafito); font-size: var(--t-sm); margin-top: var(--e-2); }

.paginacion {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap; margin-top: var(--e-7);
  border-top: 1px solid var(--linea); padding-top: var(--e-5);
}
.paginacion span { color: var(--grafito); font-size: var(--t-sm); }