/*
Theme Name: Holistic Marketing Latam
Theme URI: https://www.holisticmarketinglatam.com
Author: Holistic Marketing Latam
Description: Tema oficial de Holistic Marketing Latam. Sistema de diseño 2026: amarillo, celeste, crema y gris; Manrope e Instrument Serif; la flor del logo gira despacio.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: Propietario
Text Domain: hml
*/

/* Holistic Marketing Latam — hoja de estilos
   Sistema de diseño 2026: amarillo #FFF763 · celeste #337899 · crema #F0ECE0 · gris #1B1B1B
   Tipografías: Manrope (marca y texto) · Instrument Serif (titulares editoriales)
   Regla del amarillo (29/9/2026): nunca como texto sobre fondo oscuro ni como fondo grande;
   solo como destacado pequeño de fondo (.chip, .dato__cifra, .boton--amarillo) y siempre con letras celestes. */

:root {
  --amarillo: #FFF763;
  --celeste: #337899;
  --celeste-texto: #2A6480;
  --crema: #F0ECE0;
  --gris: #1B1B1B;
  --blanco: #FFFFFF;
  --tinta: #1B1B1B;
  --tinta-suave: #5B5B5B;
  --linea: #D9D4C4;
  --linea-oscura: #3A3A3A;
  --suave-oscuro: #C9C9C9;

  --sans: Manrope, Avenir, Inter, system-ui, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;

  --ancho: 1312px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --seccion: clamp(56px, 7.2vw, 104px);
  --radio-boton: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 26px;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--celeste); text-decoration: none; }
a:hover { color: var(--celeste-texto); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--celeste); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
strong { font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* ---------- Contenedor y secciones ---------- */
.contenedor { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.seccion { padding-block: var(--seccion); }
.seccion--filetes { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.fondo-amarillo { background: var(--amarillo); }
.fondo-crema { background: var(--crema); }
.fondo-gris { background: var(--gris); color: var(--blanco); }
.fondo-celeste { background: var(--celeste); color: var(--blanco); }

/* ---------- Tipografía ---------- */
.etiqueta {
  font-size: 13px; line-height: 16px; font-weight: 300;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.etiqueta--celeste { color: var(--celeste); }
.etiqueta--suave { color: var(--tinta-suave); }
.etiqueta--claro { color: var(--suave-oscuro); }
/* Viñeta: el único uso del amarillo como fondo, siempre con letras celestes */
.chip { display: inline-block; align-self: flex-start; width: fit-content; background: var(--amarillo); color: var(--celeste-texto); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px 4px; }

.titular-serif { font-family: var(--serif); line-height: 1.0; letter-spacing: -0.01em; }
.h1 { font-family: var(--serif); font-size: clamp(46px, 6.4vw, 92px); line-height: 0.95; letter-spacing: -0.01em; }
.h2 { font-family: var(--serif); font-size: clamp(36px, 3.9vw, 56px); line-height: 1.0; }
.h2--grande { font-size: clamp(44px, 5vw, 72px); line-height: 0.98; }
.h2--sans { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(36px, 3.9vw, 56px); line-height: 1.0; }
.h3 { font-size: 22px; line-height: 1.25; font-weight: 700; }
.h3--serif { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; }
.bajada { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; font-weight: 200; }
.parrafo-grande { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.58; }
.texto-pequeno { font-size: 14px; line-height: 20px; }
.texto-suave { color: var(--tinta-suave); }
.cursiva { font-style: italic; }
.acento { color: var(--celeste); }
.medida { max-width: 640px; }
.medida-corta { max-width: 560px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; min-height: 48px;
  border-radius: var(--radio-boton); border: 1px solid transparent;
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.boton svg { width: 15px; height: 15px; flex: 0 0 auto; }
.boton--celeste { background: var(--celeste); color: var(--blanco); }
.boton--celeste:hover { background: var(--celeste-texto); color: var(--blanco); }
.boton--gris { background: var(--gris); color: var(--blanco); }
.boton--gris:hover { background: #000; color: var(--blanco); }
.boton--amarillo { background: var(--amarillo); color: var(--celeste-texto); }
.boton--amarillo:hover { background: #F5EC3A; color: var(--celeste-texto); }
.boton--borde { background: transparent; color: var(--gris); border-color: var(--gris); }
.boton--borde:hover { background: var(--gris); color: var(--blanco); }
.enlace { font-size: 15px; font-weight: 600; color: var(--celeste); border-bottom: 1px solid var(--celeste); padding-bottom: 2px; }
.enlace:hover { color: var(--celeste-texto); border-color: var(--celeste-texto); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--blanco); border-bottom: 1px solid var(--linea);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.logo { width: 132px; height: 62px; }
.cabecera__logo { display: block; }
.menu { display: flex; align-items: center; gap: 32px; }
.menu-items { display: contents; } /* WordPress envuelve los enlaces; así participan del mismo flex */
.menu a { font-size: 15px; font-weight: 500; color: var(--tinta); padding: 6px 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--celeste); }
.menu a[aria-current="page"] { color: var(--celeste); border-bottom-color: var(--celeste); }
.menu .boton { padding: 12px 20px; min-height: 44px; }
.menu-boton { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--gris); }

/* La flor del logo gira despacio; las letras quedan quietas */
.flor { transform-box: fill-box; transform-origin: center; animation: girar 40s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.simbolo-girando { animation: girar 40s linear infinite; transform-origin: center; }

/* ---------- Rejillas ---------- */
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9-4 { grid-column: 9 / span 4; }
.col-7-6 { grid-column: 7 / span 6; }
.col-10-3 { grid-column: 10 / span 3; }
.al-final { align-items: end; }
.al-centro { align-items: center; }
.al-inicio { align-items: start; }
.pila { display: flex; flex-direction: column; }
.pila--s { gap: 14px; } .pila--m { gap: 22px; } .pila--l { gap: 28px; }
.fila { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.entre { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }

/* ---------- Portada ---------- */
.portada { padding-block: clamp(48px, 5.6vw, 80px); }
.portada__foto { width: 100%; height: clamp(360px, 40vw, 560px); object-fit: cover; object-position: center top; }
.paises { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.punto { width: 4px; height: 4px; border-radius: 9999px; background: var(--celeste); display: inline-block; }

/* ---------- Dato ---------- */
.dato { display: flex; flex-direction: column; gap: 14px; }
.dato__cifra { align-self: flex-start; font-size: clamp(56px, 6.2vw, 92px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: var(--celeste-texto); white-space: nowrap; padding: 0 .06em; background: linear-gradient(to top, transparent 16%, var(--amarillo) 16%, var(--amarillo) 46%, transparent 46%); }
.dato__texto { max-width: 340px; }
.cita { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; text-wrap: pretty; }
.regla { border-top: 1px solid var(--linea); }
.regla--oscura { border-top: 1px solid var(--linea-oscura); }

/* ---------- Tarjetas ---------- */
.tarjeta { padding: 36px 32px 40px; display: flex; flex-direction: column; gap: 16px; }
.tarjeta--blanca { background: var(--blanco); }
.tarjeta--gris { background: var(--gris); color: var(--blanco); }
.tarjeta--crema { background: var(--crema); }
.tarjeta .p { font-family: var(--serif); font-size: 72px; line-height: 0.9; color: var(--celeste); }
.tarjeta--gris .h3 { color: var(--blanco); }

.lista-lineas { display: flex; flex-direction: column; gap: 14px; }
.lista-lineas > * { border-top: 1px solid var(--linea); padding-top: 14px; }
.lista-lineas--oscura > * { border-top-color: var(--linea-oscura); }
.lista-lineas--gris > * { border-top-color: var(--gris); }

.numerado { display: flex; gap: 14px; align-items: flex-start; }
.numerado__n { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--celeste-texto); flex: 0 0 auto; }

/* Cuadrícula de servicios con filetes */
.servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.servicio { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 36px 32px 40px; display: flex; flex-direction: column; gap: 14px; }
.servicio--destacado { background: var(--crema); }
.servicio__n { font-size: 13px; line-height: 16px; font-weight: 300; letter-spacing: 0.12em; color: var(--celeste); }
.servicio--destacado .servicio__n { color: var(--celeste-texto); font-weight: 500; }

/* Lista de entregables en dos columnas */
.entregables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.entregable { display: flex; gap: 22px; padding: 24px 0; border-top: 1px solid var(--linea); }
.entregable__n { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--celeste); flex: 0 0 auto; }
.entregable__t { font-size: 19px; font-weight: 700; display: block; margin-bottom: 6px; }
.entregable--extra { background: var(--crema); padding-inline: 24px; border-bottom: 1px solid var(--linea); }

/* Pasos */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.paso { border-top: 1px solid var(--gris); padding-top: 22px; display: flex; flex-direction: column; gap: 12px; }

/* Equipo */
.equipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.persona { display: flex; flex-direction: column; gap: 18px; }
.persona__foto { width: 100%; height: clamp(360px, 36vw, 520px); object-fit: cover; object-position: center 20%; }
.persona__sinfoto { width: 100%; height: clamp(360px, 36vw, 520px); background: var(--crema); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.persona__sinfoto img { width: 96px; height: 96px; opacity: .55; }
.persona__datos { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--linea); padding-top: 16px; }
.persona__nombre { font-family: var(--serif); font-size: 30px; line-height: 1.05; }
.persona__rol { font-weight: 200; }
.persona__bio { font-size: 15px; line-height: 22px; color: var(--tinta-suave); }

/* Servicios secundarios (fila) */
.fila-servicio { padding: 36px 40px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
.fila-servicio__t { grid-column: span 4; font-size: 26px; line-height: 1.2; font-weight: 700; }
.fila-servicio__d { grid-column: span 5; font-size: 16px; line-height: 24px; }
.fila-servicio__p { grid-column: span 3; text-align: right; }
.precio { font-family: var(--serif); font-size: 40px; line-height: 1.1; color: var(--celeste); }
.precio--texto { font-size: 26px; line-height: 1.3; color: var(--gris); }

/* Caja de inversión */
.caja-precio { background: var(--blanco); padding: 34px 32px 36px; display: flex; flex-direction: column; gap: 18px; }
.caja-precio .precio { font-size: 50px; line-height: 1; }
.caja-precio__fila { display: flex; justify-content: space-between; font-size: 15px; }
.caja-precio hr { border: 0; border-top: 1px solid var(--linea); margin: 0; }

/* Triángulo 3P */
.triangulo { flex: 0 0 auto; width: 150px; height: 130px; }

/* ---------- Contacto ---------- */
.contacto__dato { font-size: 15px; line-height: 22px; }
.contacto__email { font-size: clamp(16px, 1.35vw, 20px); font-weight: 600; color: var(--blanco); overflow-wrap: anywhere; }

/* ---------- Pie ---------- */
.pie { background: var(--gris); color: var(--suave-oscuro); padding-block: 56px 40px; }
.pie__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--linea-oscura); }
.pie__marca { grid-column: span 4; display: flex; flex-direction: column; gap: 18px; }
.pie__lema { color: var(--blanco); font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.pie__texto { max-width: 340px; }
.pie__col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.pie__col a { color: var(--suave-oscuro); }
.pie__col a:hover { color: var(--blanco); }
.pie__titulo { color: var(--blanco); font-weight: 700; margin-bottom: 4px; }
.pie__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; }
.pie__legal a { color: var(--suave-oscuro); }
.pie .logo { width: 150px; height: 70px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .g3, .equipo, .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--blanco); border-bottom: 1px solid var(--linea); padding: 12px var(--gutter) 24px; flex-direction: column; align-items: stretch; gap: 4px; }
  .menu.abierto { display: flex; }
  .menu a { padding: 12px 0; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--linea); }
  .menu a[aria-current="page"] { border-bottom: 1px solid var(--linea); }
  .menu .boton { margin-top: 12px; justify-content: center; }
  .menu-boton { display: inline-flex; }
  .g12 { grid-template-columns: 1fr; gap: 28px; }
  .g12 > * { grid-column: 1 / -1 !important; }
  .g2, .entregables { grid-template-columns: 1fr; }
  .entregables { gap: 0; }
  .entregable--extra { margin-inline: 0; }
  .fila-servicio { padding: 28px 24px; gap: 14px; }
  .fila-servicio__t, .fila-servicio__d, .fila-servicio__p { grid-column: 1 / -1; text-align: left; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .pie__rejilla > * { grid-column: 1 / -1 !important; }
  .portada__foto { height: clamp(320px, 90vw, 460px); }
  .entre { align-items: flex-start; }
  .triangulo { width: 110px; height: 96px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; line-height: 25px; }
  .g3, .equipo, .pasos, .servicios { grid-template-columns: 1fr; }
  .tarjeta, .servicio { padding: 28px 24px 30px; }
  .boton { width: 100%; }
  .fila .boton { width: 100%; }
  .logo { width: 108px; height: 51px; }
  .cabecera__fila { min-height: 72px; }
  .persona__foto, .persona__sinfoto { height: 380px; }
  .dato__cifra { font-size: 64px; }
}

/* ---------- Reseñas (carrusel) ---------- */
.resenas__cabecera + .resenas { margin-top: 40px; }
.google-ficha { background: var(--blanco); padding: 28px 30px 30px; display: flex; flex-direction: column; gap: 14px; }
.google-ficha__nota { display: flex; align-items: center; gap: 16px; }
.google-ficha__cifra { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--celeste-texto); }
.google-ficha__estrellas svg { width: 22px; height: 22px; }
.google-ficha__total { margin: 0; font-size: 15px; color: var(--tinta-suave); }
.google-ficha .fila { gap: 10px; }
.google-ficha .boton { flex: 1 1 auto; justify-content: center; }
.resenas { position: relative; }
.resenas[hidden] { display: none; }
.resenas__pista { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.resenas__pista::-webkit-scrollbar { display: none; }
.resena { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; background: var(--blanco); padding: 32px 30px 34px; display: flex; flex-direction: column; gap: 16px; min-height: 260px; }
.resena__estrellas { display: flex; gap: 3px; color: var(--celeste); }
.resena__estrellas svg { width: 18px; height: 18px; }
.resena__texto { font-size: 16px; line-height: 25px; flex-grow: 1; }
.resena__autor { border-top: 1px solid var(--linea); padding-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.resena__nombre { font-weight: 700; font-size: 15px; }
.resena__fuente { font-size: 13px; color: var(--tinta-suave); }
.resenas__controles { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.resenas__botones { display: flex; gap: 8px; }
.resenas__btn { width: 44px; height: 44px; border: 1px solid var(--gris); background: var(--blanco); border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gris); }
.resenas__btn:hover { background: var(--gris); color: var(--blanco); }
.resenas__puntos { display: flex; gap: 8px; }
.resenas__punto { width: 8px; height: 8px; border-radius: 9999px; background: var(--linea); border: 0; padding: 0; cursor: pointer; }
.resenas__punto[aria-current="true"] { background: var(--celeste); }
@media (max-width: 1100px) { .resena { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 600px) { .resena { flex-basis: 100%; } }

/* ---------- Blog ---------- */
.blog-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.blog-tarjeta { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--gris); padding-top: 22px; }
.blog-tarjeta__titulo { font-family: var(--serif); font-size: 28px; line-height: 1.08; color: var(--tinta); }
.blog-tarjeta__titulo a { color: inherit; }
.blog-tarjeta__titulo a:hover { color: var(--celeste); }
.blog-tarjeta__extracto { font-size: 16px; line-height: 24px; color: var(--tinta); }
.blog-tarjeta__meta { font-size: 13px; color: var(--tinta-suave); display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.paginacion { display: flex; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.paginacion a, .paginacion span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--tinta); }
.paginacion .current { background: var(--gris); color: var(--blanco); border-color: var(--gris); }

.entrada-cabecera { padding-block: clamp(48px, 5.6vw, 80px); }
.entrada-cabecera .h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.0; max-width: 980px; }
.entrada-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--tinta-suave); }
.entrada { max-width: 760px; }
.entrada > * + * { margin-top: 22px; }
.entrada__intro { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; font-weight: 300; }
.entrada h2 { font-family: var(--serif); font-size: clamp(30px, 2.8vw, 38px); line-height: 1.08; margin-top: 52px; }
.entrada h3 { font-size: 21px; line-height: 1.3; font-weight: 700; margin-top: 34px; }
.entrada ul, .entrada ol { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.entrada li::marker { color: var(--celeste); font-weight: 700; }
.entrada a { border-bottom: 1px solid var(--celeste); }
.entrada blockquote { margin: 0; padding-left: 24px; border-left: 3px solid var(--celeste); font-family: var(--serif); font-size: 24px; line-height: 1.3; }
.entrada img { width: 100%; height: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.tabla th, .tabla td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--linea); vertical-align: top; }
.tabla th { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--tinta-suave); border-top: 0; }
.tabla tbody tr:last-child td { border-bottom: 1px solid var(--linea); }
.tabla-envoltura { overflow-x: auto; }
.entrada__cta { background: var(--crema); padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 10px; margin-top: 48px; }
.entrada__cta p { margin: 0; }
.entrada__cta a { border-bottom: 1px solid var(--celeste); font-weight: 600; }
.autor { display: flex; gap: 22px; align-items: center; border-top: 1px solid var(--linea); padding-top: 28px; margin-top: 56px; max-width: 760px; }
.autor__foto { width: 88px; height: 88px; border-radius: 9999px; object-fit: cover; object-position: center 15%; flex: 0 0 auto; }
.autor__nombre { font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.autor__bio { font-size: 15px; line-height: 22px; color: var(--tinta-suave); }
.relacionados { border-top: 1px solid var(--linea); padding-top: 40px; margin-top: 64px; }
@media (max-width: 1100px) { .blog-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .blog-lista { grid-template-columns: 1fr; } .autor { flex-direction: column; align-items: flex-start; } }

/* ---------- Agente de IA (widget de conversación) ---------- */
.agente-boton { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; background: var(--celeste); color: var(--blanco); border: 0; border-radius: 9999px; padding: 14px 20px 14px 16px; font: 600 15px/1 var(--sans); cursor: pointer; }
.agente-boton:hover { background: var(--celeste-texto); }
.agente-boton svg { width: 22px; height: 22px; }
.agente-boton[hidden] { display: none; }
.agente-panel { position: fixed; right: 20px; bottom: 20px; z-index: 61; width: min(400px, calc(100vw - 40px)); height: min(640px, calc(100vh - 40px)); background: var(--blanco); border: 1px solid var(--linea); display: flex; flex-direction: column; overflow: hidden; }
.agente-panel[hidden] { display: none; }
.agente-cabecera { background: var(--crema); padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--linea); }
.agente-cabecera img { width: 36px; height: 36px; }
.agente-cabecera__t { font-weight: 700; font-size: 15px; line-height: 18px; }
.agente-cabecera__s { font-size: 12px; line-height: 16px; color: var(--tinta-suave); }
.agente-cerrar { margin-left: auto; background: none; border: 0; cursor: pointer; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--gris); }
.agente-mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.agente-msg { max-width: 88%; padding: 10px 14px; font-size: 15px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.agente-msg--a { align-self: flex-start; background: var(--crema); }
.agente-msg--u { align-self: flex-end; background: var(--celeste); color: var(--blanco); }
.agente-msg--nota { align-self: center; max-width: 100%; text-align: center; font-size: 12px; line-height: 16px; color: var(--tinta-suave); padding: 2px 0; }
.agente-escribiendo { display: inline-flex; gap: 4px; padding: 6px 0; }
.agente-escribiendo i { width: 6px; height: 6px; border-radius: 9999px; background: var(--celeste); animation: agente-punto 1.2s infinite; }
.agente-escribiendo i:nth-child(2) { animation-delay: .2s; } .agente-escribiendo i:nth-child(3) { animation-delay: .4s; }
@keyframes agente-punto { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.agente-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; }
.agente-chips[hidden] { display: none; }
.agente-chip { border: 1px solid var(--linea); background: var(--blanco); padding: 7px 12px; font: 500 13px/16px var(--sans); color: var(--tinta); cursor: pointer; border-radius: 9999px; }
.agente-chip:hover { border-color: var(--celeste); color: var(--celeste-texto); }
.agente-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linea); }
.agente-form textarea { flex: 1; resize: none; border: 1px solid var(--linea); padding: 10px 12px; font: 15px/22px var(--sans); height: 44px; max-height: 120px; color: var(--tinta); background: var(--blanco); }
.agente-form textarea:focus { outline: 2px solid var(--celeste); outline-offset: -1px; }
.agente-enviar { width: 44px; height: 44px; flex: 0 0 44px; background: var(--gris); color: var(--blanco); border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radio-boton); }
.agente-enviar:disabled { opacity: .5; cursor: default; }
.agente-enviar svg { width: 20px; height: 20px; }
.agente-pie { padding: 0 16px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--tinta-suave); }
.agente-pie a { color: var(--celeste-texto); font-weight: 600; text-decoration: none; }
.agente-pie a:hover { text-decoration: underline; }
.enlace-agente { font-weight: 600; color: var(--celeste-texto); text-decoration: underline; text-underline-offset: 3px; }
.enlace-agente[hidden] { display: none; }
@media (max-width: 600px) {
  .agente-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border: 0; }
  .agente-boton span { display: none; }
  .agente-boton { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) { .agente-escribiendo i { animation: none; opacity: .7; } }


/* Ajustes propios de WordPress */
.wp-block-image img, .entrada .alignwide, .entrada .alignfull { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.entrada .wp-block-table table { width: 100%; border-collapse: collapse; }
.entrada .wp-block-table td, .entrada .wp-block-table th { padding: 12px 14px; border-top: 1px solid var(--linea); text-align: left; }