/* ══════════════════════════════════════════════════════════════════════════
   Sannu · «Hilo» — la web como conversación
   ──────────────────────────────────────────────────────────────────────────
   Mario, 1-oct-2026: «no me cambies lo de todas las conversaciones empiezan
   con un hola, el logo y los colores del logo; el resto, haz algo que no sea
   aburrido ni lo mismo de siempre».

   La idea: la web no describe conversaciones, las tiene. Cada sección llega
   con la gramática que todo el mundo lee a diario en el móvil —burbujas,
   horas, doble check, separadores de fecha, previsualizaciones de enlace,
   lista de chats, la nota de cifrado, la barra de escribir— y se contesta.

   Sustituye a nova.css. Lo que se fue a propósito: resplandores de color sin
   desplazamiento, vidrio decorativo, rejilla de fondo, red de nodos, texto
   en degradado (salvo el «hola», que es marca), puntos que laten, cintas en
   bucle y rótulos encima de los titulares. El degradado del símbolo vive
   solo donde es marca: el logotipo, el «hola» y el botón principal.

   Movimiento (criterio de Emil Kowalski): curvas de salida fuertes, nada por
   encima de 300 ms en la interfaz, botones que se hunden al pulsar, nada que
   nazca de escala 0, y todo apagado con `prefers-reduced-motion`.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Sora";
  src: url("../fuentes/sora-variable-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fuentes/figtree-variable-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────────────────── */

:root {
  /* Modo oscuro en azul pizarra, no en negro: más amable para leer rato. */
  --h-fondo: #142630;
  --h-fondo-2: #183039;
  --h-fondo-3: #1E3842;
  --h-superficie: #1C343F;
  --h-linea: rgb(255 255 255 / 10%);
  --h-linea-2: rgb(255 255 255 / 17%);
  --h-texto: #ECF3F2;
  --h-suave: #A7B8BD;
  --h-tenue: #8FA3AA;

  --h-vivo: #13E612;
  --h-verde: #01B271;
  --h-azul: #0061DD;
  --h-azul-claro: #4A93FF;
  --h-chispa: linear-gradient(100deg, #13E612 0%, #0061DD 100%);

  --h-cliente: #24404C;
  --h-cliente-texto: #E6EEF0;
  --h-agente: #0A4A38;
  --h-agente-texto: #EAFFF5;
  --h-check: #53BDEB;
  --h-sistema: #1E3842;
  --h-sistema-texto: #D8C98E;
  --h-pildora: #22404B;

  --h-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --h-letra: "Figtree", ui-sans-serif, system-ui, sans-serif;

  --h-sale: cubic-bezier(0.23, 1, 0.32, 1);
  --h-mueve: cubic-bezier(0.77, 0, 0.175, 1);
  --h-radio: 18px;
  --h-radio-burbuja: 18px;
  --h-sombra: 0 1px 1px rgb(0 0 0 / 30%), 0 12px 32px -18px rgb(0 0 0 / 70%);

  --wp--preset--color--linea: rgb(255 255 255 / 10%);
  --wp--preset--color--gris: #A7B8BD;
  --wp--preset--font-family--jakarta: var(--h-letra);
  color-scheme: dark;
}

html[data-tema="claro"] {
  --h-fondo: #F2F5F4;
  --h-fondo-2: #E8EEEC;
  --h-fondo-3: #DEE7E4;
  --h-superficie: #FFFFFF;
  --h-linea: rgb(1 11 16 / 9%);
  --h-linea-2: rgb(1 11 16 / 16%);
  --h-texto: #0A171D;
  --h-suave: #43565E;
  --h-tenue: #5F7279;
  --h-cliente: #FFFFFF;
  --h-cliente-texto: #0A171D;
  --h-agente: #D6F5E6;
  --h-agente-texto: #07291E;
  --h-check: #2B8FD6;
  --h-sistema: #FBF1CF;
  --h-sistema-texto: #5A4B12;
  --h-pildora: #FFFFFF;
  --h-sombra: 0 1px 1px rgb(1 11 16 / 8%), 0 12px 30px -20px rgb(1 11 16 / 30%);
  --wp--preset--color--linea: rgb(1 11 16 / 10%);
  --wp--preset--color--gris: #43565E;
  color-scheme: light;
}

/* ── Base ────────────────────────────────────────────────────────────── */

html { background: var(--h-fondo); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--h-fondo) !important;
  color: var(--h-texto) !important;
  font-family: var(--h-letra) !important;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Lo que venía del CSS adicional del personalizador y ya no pertenece a
   este mundo: la barra de marca fija, el degradado y la «S» gigante del
   hero. */
body::before,
body::after,
.wp-site-blocks::before,
.wp-site-blocks::after { content: none !important; display: none !important; animation: none !important; }

.wp-site-blocks { background: transparent; }

::selection { background: rgb(1 178 113 / 35%); color: inherit; }
:focus-visible { outline: 2px solid var(--h-verde); outline-offset: 3px; border-radius: 6px; }
input, textarea, select { caret-color: var(--h-verde); }

html { scrollbar-color: var(--h-linea-2) transparent; }

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title {
  font-family: var(--h-display) !important;
  color: var(--h-texto) !important;
  font-weight: 700;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  text-wrap: balance;
  -webkit-text-fill-color: currentColor;
  background: none !important;
}

h2.wp-block-heading, .entry-content h2 { font-size: clamp(2rem, 1.6vw + 1.4rem, 3rem) !important; }
h3.wp-block-heading { font-size: clamp(1.2rem, 0.5vw + 1.05rem, 1.45rem) !important; }

p, li, td, summary, label { color: inherit; }
strong { color: var(--h-texto); font-weight: 700; }

.has-gris-color, .has-gris-color p, .has-gris-color li { color: var(--h-suave) !important; }

a { color: var(--h-texto); text-decoration-color: var(--h-verde); text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--h-verde); }
.entry-content p a:not(.wp-block-button__link) { text-decoration-line: underline; }

/* Cifras como lecturas de instrumento: tabulares y alineadas. */
time, .precio-unidad, .has-titulo-2-font-size, .cifras-ia p:first-child, .planes-ia p:nth-child(2),
.hilo-hora, .ia-estado, .fecha-nota, .wp-block-post-date { font-variant-numeric: tabular-nums; }

/* Sección: ritmo vertical común y más aire encima del titular que debajo. */
.entry-content > .wp-block-group { padding-top: clamp(4.5rem, 8vw, 7.5rem) !important; padding-bottom: clamp(4.5rem, 8vw, 7.5rem) !important; }
.entry-content > .wp-block-group > h2:first-child,
.entry-content > .wp-block-group > h2.wp-block-heading { margin-bottom: 1rem !important; }
.entry-content > .wp-block-group > p { max-width: 62ch; margin-left: 0 !important; }

/* Las secciones «hueso» ya no son un gris claro distinto: un escalón de
   marino, sin degradados ni velos. */
.has-hueso-background-color,
.entry-content > .wp-block-group.has-hueso-background-color {
  background: var(--h-fondo-2) !important;
  background-image: none !important;
  border-top: 1px solid var(--h-linea);
  border-bottom: 1px solid var(--h-linea);
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  padding-left: max(24px, calc(50vw - 590px)) !important;
  padding-right: max(24px, calc(50vw - 590px)) !important;
}
.entry-content > .wp-block-group.has-hueso-background-color > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.has-marino-background-color:not(.wp-block-button__link) { background: var(--h-fondo-3) !important; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--h-fondo) 88%, transparent) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--h-linea) !important;
}
header .cabecera-fija { background: transparent !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
header .cabecera-fija > .wp-block-group { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; }

header .wp-block-navigation { font-family: var(--h-letra); }
header .wp-block-navigation-item__content {
  position: relative;
  color: var(--h-suave) !important;
  font-weight: 600;
  transition: color 160ms ease;
}
header .wp-block-navigation-item__content:hover,
header .wp-block-navigation-item__content[aria-current="page"] { color: var(--h-texto) !important; }
header .wp-block-navigation-item__content[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--h-verde);
}

/* Botón de hamburguesa: objetivo táctil de 44 px (solo cambia su tamaño;
   cuándo se ve lo sigue decidiendo WordPress). */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--h-texto) !important; }
@media (max-width: 599px) {
  .wp-block-navigation__responsive-container-open { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
  .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }
}
.wp-block-navigation__responsive-container.is-menu-open { background: var(--h-fondo) !important; color: var(--h-texto) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--h-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--h-texto) !important;
  padding: 0.35rem 0 !important;
}

/* ── Botones ──────────────────────────────────────────────────────────── */

.wp-block-button__link {
  font-family: var(--h-letra) !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  border-radius: 999px !important;
  padding: 0.95rem 1.6rem !important;
  min-height: 48px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  transition: transform 160ms var(--h-sale), background-color 200ms ease, border-color 200ms ease, color 200ms ease !important;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: none !important;
}
.wp-block-button__link:active { transform: scale(0.97); }
.wp-block-button__link::after { content: none !important; }

/* Principal: el degradado del símbolo, texto oscuro legible encima, y la
   flecha de «enviar». */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  background: var(--h-verde) !important;
  color: #03140A !important;
  border: 0 !important;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link::before {
  content: "";
  order: 2;
  width: 1.05rem;
  height: 1.05rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.4 21 12 3.4 3.6l-.1 6.5L15 12 3.3 13.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.4 21 12 3.4 3.6l-.1 6.5L15 12 3.3 13.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 200ms var(--h-sale);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::before { transform: translateX(3px); }
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: #12C482 !important; }

.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent !important;
  color: var(--h-texto) !important;
  border: 1.5px solid var(--h-linea-2) !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--h-verde) !important; color: var(--h-texto) !important; }

.wp-block-button__link.has-hub-background-color { background: var(--h-verde) !important; color: #03140A !important; }

header .wp-block-button__link { padding: 0.6rem 1.1rem !important; min-height: 44px; font-size: 0.9rem !important; }
header .wp-block-button__link.has-marino-background-color { background: var(--h-verde) !important; color: #03140A !important; border: 0 !important; }
header .wp-block-button__link::before { display: none; }

/* Botón de modo claro / oscuro (lo crea nova.js). */
.nova-modo {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--h-linea-2);
  background: transparent;
  color: var(--h-texto);
  cursor: pointer;
  transition: transform 160ms var(--h-sale), border-color 200ms ease;
}
.nova-modo:hover { border-color: var(--h-verde); }
.nova-modo:active { transform: scale(0.94); }
.nova-modo svg { width: 18px; height: 18px; }
.nova-modo .nova-sol { display: none; }
html[data-tema="claro"] .nova-modo .nova-sol { display: block; }
html[data-tema="claro"] .nova-modo .nova-luna { display: none; }
html[data-tema="claro"] img.custom-logo { content: url("../marca/sannu-claro.png"); }

/* ══════════════════════════════════════════════════════════════════════
   PORTADA
   ══════════════════════════════════════════════════════════════════════ */

/* ── Primer pliegue: el claim y la bandeja viva ────────────────────── */

body.home .entry-content > .wp-block-group:first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "claim bandeja"
    "h1 bandeja"
    "texto bandeja"
    "acciones bandeja";
  align-content: center;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 0;
  min-height: min(calc(100svh - 76px), 880px);
  padding-top: clamp(3rem, 7vh, 6rem) !important;
  padding-bottom: clamp(3rem, 7vh, 6rem) !important;
  max-width: 1180px;
  margin-inline: auto !important;
}
body.home .entry-content > .wp-block-group:first-child > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body.home .entry-content > .wp-block-group:first-child > .claim-portada { grid-area: claim; }
body.home .entry-content > .wp-block-group:first-child > h1 { grid-area: h1; }
body.home .entry-content > .wp-block-group:first-child > p:not(.claim-portada) { grid-area: texto; }
body.home .entry-content > .wp-block-group:first-child > .wp-block-buttons { grid-area: acciones; }
body.home .entry-content > .wp-block-group:first-child > .bandeja-viva { grid-area: bandeja; align-self: center; }

.claim-portada {
  font-family: var(--h-display) !important;
  font-size: clamp(2.6rem, 3.6vw + 1.2rem, 5.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  color: var(--h-texto) !important;
  text-align: left !important;
  text-shadow: none !important;
  margin: 0 0 1.4rem !important;
}

/* El «hola»: marca, degradado del símbolo. Es el único texto en degradado. */
.texto-chispa {
  background: var(--h-chispa) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: none !important;
  filter: none !important;
  padding-right: 0.04em;
}

body.home .entry-content > .wp-block-group:first-child .claim-portada + h1 {
  font-family: var(--h-letra) !important;
  font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  color: var(--h-verde) !important;
  -webkit-text-fill-color: currentColor !important;
  margin: 0 0 0.6rem !important;
  animation: none !important;
}

body.home .entry-content > .wp-block-group:first-child > p:not(.claim-portada) {
  color: var(--h-suave) !important;
  font-size: 1.0625rem !important;
  text-align: left !important;
  max-width: 52ch !important;
  margin: 0 !important;
}

body.home .entry-content > .wp-block-group:first-child > .wp-block-buttons {
  justify-content: flex-start !important;
  margin-top: 2rem !important;
}

/* La bandeja: una lista de conversaciones que llegan por cuatro canales y
   se contestan. El contenido está escrito en el editor (se lee sin
   script); hilo.js lo hace suceder. */
.bandeja-viva {
  position: relative;
  border-radius: 24px;
  background: var(--h-fondo-2);
  border: 1px solid var(--h-linea);
  padding: 0.5rem !important;
  box-shadow: var(--h-sombra);
}

.bandeja-viva > .bandeja-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 !important;
  padding: 0.8rem 0.9rem 0.7rem !important;
  font-size: 0.8rem !important;
  font-weight: 700;
  color: var(--h-tenue) !important;
  letter-spacing: 0.01em;
}

.bandeja-viva > .wp-block-group.hilo {
  position: relative;
  margin: 0 !important;
  padding: 0.85rem 0.9rem 0.95rem 3.6rem !important;
  border-top: 1px solid var(--h-linea);
  display: grid !important;
  gap: 0.45rem;
}

/* Avatar del canal. */
.bandeja-viva > .hilo::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.9rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--h-fondo-3);
}
.bandeja-viva > .hilo::after {
  content: "";
  position: absolute;
  left: calc(0.9rem + 0.52rem);
  top: calc(0.9rem + 0.52rem);
  width: 1.05rem;
  height: 1.05rem;
  background: var(--canal-color, var(--h-verde));
  -webkit-mask: var(--canal-icono) center / contain no-repeat;
  mask: var(--canal-icono) center / contain no-repeat;
}
.hilo-llamada { --canal-color: #29C6D1; --canal-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.hilo-whatsapp { --canal-color: #25D366; --canal-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 1.8a8.2 8.2 0 1 1-4.2 15.3l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 0 1 12 3.8zm-3.3 4.4c-.2 0-.5 0-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.2 5 4.4 2.5 1 3 .8 3.5.7.6 0 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4 0-.1-.2-.2-.5-.4l-1.8-.9c-.3-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.6.1-.3-.1-1.1-.4-2.2-1.3-.8-.7-1.3-1.6-1.5-1.9-.1-.3 0-.4.1-.5l.4-.5.3-.5v-.5l-.8-2c-.2-.5-.4-.5-.6-.5h-.5z'/%3E%3C/svg%3E"); }
.hilo-instagram { --canal-color: #E1306C; --canal-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9a5.5 5.5 0 0 1-5.5 5.5h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2zm0 2A3.5 3.5 0 0 0 4 7.5v9A3.5 3.5 0 0 0 7.5 20h9a3.5 3.5 0 0 0 3.5-3.5v-9A3.5 3.5 0 0 0 16.5 4zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm5.3-3.3a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E"); }
.hilo-web { --canal-color: #4A93FF; --canal-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm3 5v2h10V9zm0 4v2h6v-2z'/%3E%3C/svg%3E"); }

.hilo > p { margin: 0 !important; max-width: none !important; font-size: 0.95rem; line-height: 1.45; }

.hilo > .entra {
  justify-self: start;
  max-width: 88%;
  padding: 0.55rem 0.8rem 0.6rem !important;
  border-radius: 4px var(--h-radio-burbuja) var(--h-radio-burbuja) var(--h-radio-burbuja);
  background: var(--h-cliente);
  color: var(--h-cliente-texto) !important;
}
.hilo > .sale {
  justify-self: end;
  max-width: 88%;
  padding: 0.55rem 0.8rem 0.6rem !important;
  border-radius: var(--h-radio-burbuja) 4px var(--h-radio-burbuja) var(--h-radio-burbuja);
  background: var(--h-agente);
  color: var(--h-agente-texto) !important;
}
.hilo > p .hilo-hora {
  float: right;
  margin: 0.45rem -0.2rem -0.3rem 0.7rem;
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.7;
  white-space: nowrap;
}
.hilo > .sale .hilo-hora::after {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 0.75em;
  margin-left: 0.25em;
  vertical-align: -0.05em;
  background: var(--h-check);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M11.9.3 5.3 7.7 2.1 4.6.7 6l4.7 4.6L13.3 1.7zm4.3 0-6.7 7.4-.8-.8-1.4 1.4 2.3 2.3L17.6 1.7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M11.9.3 5.3 7.7 2.1 4.6.7 6l4.7 4.6L13.3 1.7zm4.3 0-6.7 7.4-.8-.8-1.4 1.4 2.3 2.3L17.6 1.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Nombre del canal encima del primer mensaje. */
.hilo-llamada > .entra::before { content: "Llamada"; }
.hilo-whatsapp > .entra::before { content: "WhatsApp"; }
.hilo-instagram > .entra::before { content: "Instagram"; }
.hilo-web > .entra::before { content: "Chat de la web"; }
.hilo > .entra::before {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--canal-color);
}

/* Animación de la bandeja (hilo.js pone .hilo-js): cada «hola» entra, se
   escribe la respuesta y aparece con su doble check. */
.hilo-js .bandeja-viva > .hilo > p { opacity: 0; transform: translateY(8px) scale(0.98); transform-origin: left top; }
.hilo-js .bandeja-viva > .hilo > .sale { transform-origin: right top; }
.hilo-js .bandeja-viva > .hilo > p.visto {
  opacity: 1;
  transform: none;
  transition: opacity 260ms var(--h-sale), transform 260ms var(--h-sale);
}
.hilo-escribiendo {
  justify-self: end;
  display: inline-flex;
  gap: 4px;
  padding: 0.7rem 0.85rem;
  border-radius: var(--h-radio-burbuja) 4px var(--h-radio-burbuja) var(--h-radio-burbuja);
  background: var(--h-agente);
}
.hilo-escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: var(--h-agente-texto); opacity: 0.35; animation: hilo-punto 1s ease-in-out infinite; }
.hilo-escribiendo i:nth-child(2) { animation-delay: 150ms; }
.hilo-escribiendo i:nth-child(3) { animation-delay: 300ms; }
@keyframes hilo-punto { 50% { opacity: 1; transform: translateY(-2px); } }

/* ── Lo que está cambiando: separadores de fecha y enlaces compartidos ── */

.seccion-notas {
  display: grid !important;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  max-width: 1180px;
  margin-inline: auto !important;
}
.seccion-notas > h2 { grid-column: 1; position: sticky; top: 110px; margin-top: 0 !important; }
.seccion-notas > p:not(:last-child) { grid-column: 1; }
.seccion-notas > .notas { grid-column: 2; grid-row: 1 / span 4; }
.seccion-notas > p:last-child { grid-column: 1; }

.seccion-notas .notas { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.seccion-notas .notas > .tarjeta-nota {
  position: relative;
  flex: none !important;
  width: min(100%, 520px) !important;
  display: flex !important;
  flex-direction: column;
  margin: 0 0 1.4rem !important;
  padding: 0.3rem !important;
  border-radius: 4px var(--h-radio) var(--h-radio) var(--h-radio) !important;
  background: var(--h-cliente) !important;
  border: 0 !important;
  box-shadow: var(--h-sombra) !important;
  overflow: visible !important;
  transform: none !important;
}
.seccion-notas .notas > .tarjeta-nota:nth-child(even) { align-self: flex-end; border-radius: var(--h-radio) 4px var(--h-radio) var(--h-radio) !important; }
.tarjeta-nota::before { content: none !important; }
.tarjeta-nota .wp-block-image { margin: 0 !important; overflow: hidden; border-radius: 14px; }
.tarjeta-nota .wp-block-image img { display: block; width: 100%; aspect-ratio: 16 / 9 !important; object-fit: cover; transition: transform 300ms var(--h-sale); }
.tarjeta-nota:hover .wp-block-image img { transform: scale(1.02); }
.tarjeta-nota .cuerpo-nota { position: static !important; padding: 0.75rem 0.75rem 0.6rem !important; }
.tarjeta-nota .cuerpo-nota > p:not(.fecha-nota) { color: var(--h-suave) !important; font-size: 0.95rem; margin: 0.35rem 0 0 !important; }
.tarjeta-nota h3, .tarjeta-nota h3 a { font-size: 1.05rem !important; color: var(--h-texto) !important; text-decoration: none !important; line-height: 1.25 !important; }
.tarjeta-nota h3 a::after { content: ""; position: absolute; inset: 0; }

/* La fecha sale del mensaje y se convierte en el separador de día. */
.tarjeta-nota .fecha-nota {
  position: absolute;
  top: -2.3rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 8px;
  background: var(--h-pildora);
  color: var(--h-suave) !important;
  font-size: 0.8rem !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  box-shadow: var(--h-sombra);
}
.seccion-notas .notas > .tarjeta-nota { margin-top: 3.2rem !important; }
.seccion-notas .notas > .tarjeta-nota:first-child { margin-top: 2.6rem !important; }
.seccion-notas .notas > .tarjeta-nota:nth-child(even) .fecha-nota { left: auto; right: 0; transform: none; }
.seccion-notas .notas > .tarjeta-nota:nth-child(odd) .fecha-nota { left: 0; transform: none; }

.seccion-notas > p:last-child a { font-weight: 700; }

/* ── Escaparate de vídeo ─────────────────────────────────────────────── */

.nova-escaparate {
  width: min(1180px, calc(100vw - 48px));
  margin: 0 auto !important;
  max-width: none !important;
  padding: clamp(3.5rem, 7vw, 6rem) 0 !important;
}
body.home .entry-content > .wp-block-group:first-child > .nova-escaparate { display: none; }
.nova-pestanas { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.nova-pestana {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1rem 0.55rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--h-linea-2);
  background: transparent;
  color: var(--h-suave);
  font: 700 0.9rem var(--h-letra);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms var(--h-sale);
}
.nova-pestana:active { transform: scale(0.97); }
.nova-pestana img { width: 26px; height: 26px; object-fit: contain; border-radius: 50%; background: var(--h-fondo-3); padding: 3px; }
.nova-pestana[aria-selected="true"] { color: var(--h-texto); border-color: var(--h-verde); }
.nova-avance { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--h-verde); transform-origin: left; transform: scaleX(var(--avance, 0)); opacity: 0; }
.nova-pestana[aria-selected="true"] .nova-avance { opacity: 1; }

.nova-escena { position: relative; }
.nova-escena > .nova-ventana { transform: none; }
.nova-reflejo { display: none; }
.nova-ventana {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #0A141B;
  border: 1px solid var(--h-linea-2);
  box-shadow: 0 30px 80px -40px rgb(0 0 0 / 70%);
}
.nova-ventana::before { content: none; }
.nova-ventana-barra { display: flex; align-items: center; gap: 1rem; height: 36px; padding: 0 14px; background: #101D25; border-bottom: 1px solid rgb(255 255 255 / 7%); }
.nova-puntos { width: 52px; height: 12px; background: radial-gradient(circle at 6px 6px, #FF5F57 5px, transparent 5.5px), radial-gradient(circle at 26px 6px, #FEBC2E 5px, transparent 5.5px), radial-gradient(circle at 46px 6px, #28C840 5px, transparent 5.5px); opacity: 0.85; }
.nova-direccion { display: flex; align-items: center; justify-content: center; flex: 0 1 38%; height: 22px; margin-inline: auto; border-radius: 7px; background: rgb(255 255 255 / 5%); transform: translateX(-26px); }
.nova-candado { width: 11px; height: 11px; background: #01B271; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm2 0h6V7a3 3 0 0 0-6 0v3Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm2 0h6V7a3 3 0 0 0-6 0v3Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.nova-pantalla { position: relative; display: grid; aspect-ratio: 16 / 10; background: #0A141B; }
.nova-video { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; background: #0A141B; transition: opacity 400ms var(--h-sale); }
.nova-video.nova-oculto { opacity: 0; pointer-events: none; }
.nova-video.nova-sin-video { visibility: hidden; }
.nova-producto-medio { width: min(1180px, calc(100vw - 48px)); margin: 0 auto clamp(4rem, 8vw, 6rem) !important; max-width: none !important; }
.nova-miniaturas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.nova-miniatura { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px; border: 1px solid var(--h-linea-2); background: #0A141B; }
.nova-miniatura .nova-video { height: 100%; }
.nova-miniatura:has(.nova-sin-video) { display: none; }
/* La cinta de capturas en bucle se retira: ruido que no se lee. */
.nova-cinta { display: none !important; }

/* ── Soluciones: la lista de chats ───────────────────────────────────── */

/* Sin script: las tarjetas, sobrias. Con script (hilo.js), la lista de la
   izquierda y el chat abierto a la derecha, como en el escritorio de
   cualquier mensajería. */
#productos {
  background: var(--h-fondo-2) !important;
  background-image: none !important;
}
#productos > h2 { margin-bottom: 2rem !important; }
.tarjeta {
  position: relative;
  background: var(--h-superficie) !important;
  border: 1px solid var(--h-linea) !important;
  border-radius: var(--h-radio) !important;
  box-shadow: none !important;
  transform: none !important;
}
.tarjeta::before, .tarjeta::after { content: none !important; }
.tarjeta:hover { transform: none !important; border-color: var(--h-linea-2) !important; }

.chats {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.4fr);
  border: 1px solid var(--h-linea);
  border-radius: 22px;
  overflow: hidden;
  background: var(--h-fondo);
  min-height: 520px;
}
.chats-lista { border-right: 1px solid var(--h-linea); display: flex; flex-direction: column; }
.chats-buscador {
  margin: 0.8rem;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  background: var(--h-fondo-3);
  color: var(--h-tenue);
  font-size: 0.85rem;
}
.chat-fila {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 0.2rem 0.8rem;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-top: 1px solid var(--h-linea);
  background: transparent;
  color: var(--h-texto);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.chat-fila:hover { background: color-mix(in srgb, var(--h-texto) 4%, transparent); }
.chat-fila[aria-selected="true"] { background: color-mix(in srgb, var(--h-verde) 12%, transparent); }
.chat-fila:active { background: color-mix(in srgb, var(--h-verde) 18%, transparent); }
.chat-avatar { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; background: var(--h-fondo-3); display: grid; place-items: center; overflow: hidden; }
.chat-avatar img { width: 30px; height: 30px; object-fit: contain; }
.chat-nombre { font-weight: 700; font-size: 1rem; }
.chat-hora { font-size: 0.72rem; color: var(--h-tenue); justify-self: end; font-variant-numeric: tabular-nums; }
.chat-vista { grid-column: 2; font-size: 0.86rem; color: var(--h-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sin-leer { grid-column: 3; justify-self: end; min-width: 1.3rem; height: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--h-verde); color: #03140A; font-size: 0.72rem; font-weight: 800; display: grid; place-items: center; }
.chat-fila[aria-selected="true"] .chat-sin-leer { visibility: hidden; }

.chat-abierto { display: flex; flex-direction: column; min-width: 0; }
.chat-cabecera { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--h-linea); background: var(--h-fondo-2); }
.chat-cabecera img { height: 34px; width: auto; }
.chat-cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem 1.2rem 1.6rem;
}
.chat-cuerpo .burbuja {
  max-width: 82%;
  padding: 0.7rem 0.95rem 0.75rem;
  border-radius: 4px var(--h-radio-burbuja) var(--h-radio-burbuja) var(--h-radio-burbuja);
  background: var(--h-cliente);
  color: var(--h-cliente-texto);
  font-size: 0.98rem;
  line-height: 1.5;
  animation: hilo-llega 260ms var(--h-sale) both;
}
.chat-cuerpo .burbuja:nth-child(2) { animation-delay: 60ms; }
.chat-cuerpo .burbuja:nth-child(3) { animation-delay: 120ms; }
.chat-cuerpo .burbuja strong { display: block; margin-bottom: 0.2rem; font-family: var(--h-display); font-size: 1.15rem; letter-spacing: -0.02em; }
.chat-cuerpo .burbuja ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.chat-cuerpo .burbuja li { margin: 0.2rem 0; color: var(--h-suave); }
.chat-cuerpo .burbuja-enlace { align-self: flex-end; background: var(--h-agente); color: var(--h-agente-texto); border-radius: var(--h-radio-burbuja) 4px var(--h-radio-burbuja) var(--h-radio-burbuja); }
.chat-cuerpo .burbuja-enlace a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
@keyframes hilo-llega { from { opacity: 0; transform: translateY(6px) scale(0.98); } }

@media (max-width: 781px) {
  .chats { grid-template-columns: 1fr; min-height: 0; }
  .chats-lista { border-right: 0; }
  .chats-buscador { display: none; }
  .chat-abierto { border-top: 1px solid var(--h-linea); }
}

/* ── Agentes de IA ───────────────────────────────────────────────────── */

.seccion-ia {
  position: relative;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  padding: clamp(4.5rem, 9vw, 7.5rem) max(24px, calc(50vw - 590px)) !important;
  background: var(--h-fondo) !important;
  border-top: 1px solid var(--h-linea);
}
.seccion-ia::before { content: none !important; }
.seccion-ia > * { max-width: 1180px; margin-left: auto !important; margin-right: auto !important; }
/* El rótulo encima del titular sobra: el titular habla solo. */
.seccion-ia > .rotulo-ia { display: none !important; }
.seccion-ia > h2, .seccion-ia > h1 {
  font-size: clamp(2.4rem, 3.4vw + 1.2rem, 4.6rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  max-width: 16ch;
  margin: 0 0 1.2rem !important;
}
.seccion-ia > h2 em, .seccion-ia > h1 em { font-style: normal; color: var(--h-verde); -webkit-text-fill-color: currentColor; background: none; animation: none; }
.seccion-ia > p:not(.rotulo-ia) { color: var(--h-suave) !important; font-size: 1.1rem !important; max-width: 60ch; margin-left: 0 !important; }

/* Las cifras: un mensaje de Sannu con los números dentro, no un bloque de
   métricas de plantilla. Siguen bien visibles (lo pidió Mario). */
.cifras-ia {
  display: grid !important;
  gap: 0.15rem !important;
  width: fit-content;
  max-width: 640px !important;
  margin: 2.2rem 0 0 !important;
  padding: 1rem 1.2rem 1.1rem !important;
  border-radius: 4px var(--h-radio) var(--h-radio) var(--h-radio) !important;
  background: var(--h-agente) !important;
  color: var(--h-agente-texto) !important;
  border: 0 !important;
}
.cifras-ia > .wp-block-group { display: flex !important; align-items: baseline; gap: 0.7rem; margin: 0 !important; padding: 0.25rem 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.cifras-ia > .wp-block-group > p:first-child {
  flex: 0 0 5.4rem;
  margin: 0 !important;
  font-family: var(--h-display) !important;
  font-size: 1.35rem !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: inherit !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.cifras-ia > .wp-block-group > p + p { margin: 0 !important; font-size: 0.95rem; color: inherit !important; opacity: 0.85; max-width: none; }
.ia-modos { gap: 1.2rem !important; margin-top: 2.6rem !important; align-items: stretch !important; }
.entry-content .ia-modos > .wp-block-column {
  position: relative;
  padding: 1.8rem 1.6rem !important;
  border-radius: var(--h-radio) !important;
  border: 1px solid var(--h-linea) !important;
  background: var(--h-fondo-2) !important;
  backdrop-filter: none !important;
}
.ia-modos > .wp-block-column::before, .ia-modos > .wp-block-column::after { content: none !important; }
.ia-modos .rotulo-modo { display: none !important; }
.ia-modos h3 { margin-top: 0 !important; }
.ia-modos ul.wp-block-list, .tarjeta ul.wp-block-list, .lista-funciones { list-style: none; padding-left: 0 !important; }
.ia-modos ul.wp-block-list li, .tarjeta ul.wp-block-list li { position: relative; padding-left: 1.6rem; margin: 0.45rem 0; color: var(--h-suave) !important; }
.ia-modos ul.wp-block-list li::before, .tarjeta ul.wp-block-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.05rem;
  height: 0.75rem;
  background: var(--h-check);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M11.9.3 5.3 7.7 2.1 4.6.7 6l4.7 4.6L13.3 1.7zm4.3 0-6.7 7.4-.8-.8-1.4 1.4 2.3 2.3L17.6 1.7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M11.9.3 5.3 7.7 2.1 4.6.7 6l4.7 4.6L13.3 1.7zm4.3 0-6.7 7.4-.8-.8-1.4 1.4 2.3 2.3L17.6 1.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Demostración: la llamada y el WhatsApp dentro de un teléfono. */
.demo-agente { margin-top: clamp(3rem, 6vw, 4.5rem) !important; }
.demo-agente > .demo-voz, .demo-agente > .demo-texto { padding: 1.2rem; border-radius: var(--h-radio); border: 1px solid var(--h-linea); }
.demo-agente .habla-cliente, .demo-agente .habla-agente { margin: 0.35rem 0 !important; }
.demo-agente .habla-agente { color: var(--h-verde) !important; }
.demo-agente.demo-lista > .demo-voz, .demo-agente.demo-lista > .demo-texto { display: none; }
.ia-escenario { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.ia-lado h3 { font-size: clamp(1.8rem, 1.6vw + 1.2rem, 2.6rem) !important; margin: 0 0 0.8rem !important; }
.ia-lado p { color: var(--h-suave) !important; margin: 0 0 1.4rem !important; }
.ia-aviso { font-size: 0.8rem !important; color: var(--h-tenue) !important; margin-top: 1rem !important; }
.ia-pestanas { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; border: 1px solid var(--h-linea-2); }
.ia-pestana { min-height: 44px; padding: 0.55rem 1.15rem; border: 0; border-radius: 999px; background: transparent; color: var(--h-suave); font: 700 0.92rem var(--h-letra); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--h-sale); }
.ia-pestana:active { transform: scale(0.97); }
.ia-pestana[aria-selected="true"] { background: var(--h-verde); color: #03140A; }
.ia-dispositivo { position: relative; width: min(100%, 360px); margin-inline: auto; aspect-ratio: 9 / 17; max-height: 620px; border-radius: 44px; padding: 11px; background: #0B1419; box-shadow: 0 0 0 1px rgb(255 255 255 / 12%), 0 40px 90px -40px rgb(0 0 0 / 80%); }
html[data-tema="claro"] .ia-dispositivo { box-shadow: 0 0 0 1px rgb(1 11 16 / 14%), 0 40px 80px -40px rgb(1 11 16 / 45%); }
.ia-pantalla { position: relative; height: 100%; overflow: hidden; border-radius: 34px; background: #07121A; display: flex; flex-direction: column; }
.ia-llamada-cabeza { padding: 2.4rem 1.2rem 1rem; text-align: center; }
.ia-orbe { position: relative; width: 96px; height: 96px; margin: 0 auto 0.9rem; border-radius: 50%; background: #0F2A33 url("../marca/sannu-isotipo.png") center / 52% no-repeat; }
.ia-orbe::before, .ia-orbe::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgb(1 178 113 / 50%); opacity: 0; }
.ia-habla-agente .ia-orbe::before { animation: hilo-onda 1.8s var(--h-sale) infinite; }
.ia-habla-agente .ia-orbe::after { animation: hilo-onda 1.8s var(--h-sale) 0.9s infinite; }
@keyframes hilo-onda { from { transform: scale(0.95); opacity: 0.9; } to { transform: scale(1.4); opacity: 0; } }
.ia-nombre { color: #fff; font-weight: 700; }
.ia-estado { color: #53D6A0; font-size: 0.82rem; }
.ia-ondas { display: flex; justify-content: center; align-items: center; gap: 4px; height: 40px; margin: 0.4rem 0 0.2rem; }
.ia-ondas i { display: block; width: 4px; height: 10%; border-radius: 4px; background: #01B271; }
.ia-transcripcion { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.55rem; padding: 0.8rem 1rem 1.4rem; -webkit-mask-image: linear-gradient(transparent, #000 25%); mask-image: linear-gradient(transparent, #000 25%); }
.ia-linea { font-size: 0.86rem; line-height: 1.45; color: #C9D6DA; animation: hilo-llega 260ms var(--h-sale) both; }
.ia-linea b { display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7A8F96; }
.ia-linea.es-agente { color: #fff; }
.ia-linea.es-agente b { color: #53D6A0; }
.ia-chat-cabeza { display: flex; align-items: center; gap: 0.7rem; padding: 1.6rem 1rem 0.8rem; border-bottom: 1px solid rgb(255 255 255 / 7%); background: #0C1A22; }
.ia-chat-cabeza .ia-orbe { width: 38px; height: 38px; margin: 0; }
.ia-chat-cuerpo { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.45rem; padding: 1rem 0.8rem 1.2rem; background: #07121A; }
.ia-burbuja { max-width: 84%; padding: 0.55rem 0.8rem; font-size: 0.86rem; line-height: 1.42; animation: hilo-llega 260ms var(--h-sale) both; }
.ia-burbuja.de-cliente { align-self: flex-start; background: #1B2A33; color: #E6F0F2; border-radius: 4px 16px 16px 16px; }
.ia-burbuja.de-agente { align-self: flex-end; background: #0A4A38; color: #EAFFF5; border-radius: 16px 4px 16px 16px; }
.ia-escribiendo { align-self: flex-end; display: inline-flex; gap: 4px; padding: 0.7rem 0.9rem; border-radius: 16px 4px 16px 16px; background: #0A4A38; }
.ia-escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: #CFFFE0; opacity: 0.4; animation: hilo-punto 1s ease-in-out infinite; }
.ia-escribiendo i:nth-child(2) { animation-delay: 150ms; }
.ia-escribiendo i:nth-child(3) { animation-delay: 300ms; }
.ia-escuchar { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; min-height: 44px; padding: 0.6rem 1.2rem; border: 0; border-radius: 999px; background: #01B271; color: #03140A; font: 800 0.92rem var(--h-letra); cursor: pointer; }

/* ── Sectores: tamaños y selector ────────────────────────────────────── */

.seccion-sectores > p.has-gris-color { max-width: 60ch; }
.tamanos-empresa { gap: 0 !important; margin-top: 2.4rem !important; border-top: 1px solid var(--h-linea); }
.entry-content .tamanos-empresa > .wp-block-column {
  padding: 1.6rem 1.6rem 1.6rem 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
}
.entry-content .tamanos-empresa > .wp-block-column + .wp-block-column { padding-left: 1.6rem !important; border-left: 1px solid var(--h-linea) !important; }
.tamanos-empresa > .wp-block-column::before { content: none !important; }
.tamanos-empresa h3 { order: -2; margin: 0 0 0.3rem !important; }
.tamanos-empresa .rotulo-tamano { order: -1; margin: 0 0 0.8rem !important; font-size: 0.85rem !important; font-weight: 700; letter-spacing: 0 !important; text-transform: none !important; color: var(--h-verde) !important; }
.subtitulo-sectores { margin-top: 3.6rem !important; font-size: 1.35rem !important; }

/* Sin script: la rejilla de sectores, sin cajas. Con script: chips. */
.rejilla-sectores { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4rem 2rem; margin-top: 1.2rem !important; }
.rejilla-sectores > .wp-block-group { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.rejilla-sectores > .wp-block-group::before { content: none !important; }
.rejilla-sectores > .wp-block-group > p { margin: 0 !important; }
.rejilla-sectores > .wp-block-group > p:first-child { font-weight: 700; color: var(--h-texto) !important; }
.rejilla-sectores > .wp-block-group > p + p { color: var(--h-suave) !important; font-size: 0.95rem; margin-top: 0.3rem !important; }

.sectores-js .rejilla-sectores { display: none !important; }
.selector-sectores { margin-top: 1.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--h-linea-2);
  background: transparent;
  color: var(--h-suave);
  font: 600 0.95rem var(--h-letra);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms var(--h-sale);
}
.chip:hover { color: var(--h-texto); border-color: var(--h-texto); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--h-texto); color: var(--h-fondo); border-color: var(--h-texto); }
.sector-respuesta { display: grid; gap: 0.5rem; margin-top: 1.4rem; max-width: 640px; }
.sector-respuesta .burbuja { padding: 0.75rem 1rem 0.8rem; border-radius: 4px var(--h-radio-burbuja) var(--h-radio-burbuja) var(--h-radio-burbuja); background: var(--h-cliente); color: var(--h-cliente-texto); box-shadow: var(--h-sombra); animation: hilo-llega 240ms var(--h-sale) both; justify-self: start; max-width: 92%; }
.sector-respuesta .burbuja.de-sannu { justify-self: end; background: var(--h-agente); color: var(--h-agente-texto); border-radius: var(--h-radio-burbuja) 4px var(--h-radio-burbuja) var(--h-radio-burbuja); animation-delay: 80ms; }
.sector-respuesta .burbuja strong { color: inherit; }

/* ── Confianza: la nota de sistema, como el aviso de cifrado ─────────── */

.sn-oscura {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  padding: clamp(3rem, 6vw, 5rem) max(24px, calc(50vw - 590px)) !important;
  background: var(--h-fondo-2) !important;
  background-image: none !important;
  color: var(--h-texto) !important;
  border-top: 1px solid var(--h-linea);
  border-bottom: 1px solid var(--h-linea);
}
.sn-oscura::before, .sn-oscura::after { content: none !important; display: none !important; }
.sn-oscura > .wp-block-columns {
  max-width: 820px !important;
  margin: 0 auto !important;
  display: block !important;
  padding: 1.3rem 1.5rem 1.3rem 3.6rem !important;
  border-radius: 14px;
  background: var(--h-sistema);
  color: var(--h-sistema-texto) !important;
  position: relative;
}
.sn-oscura > .wp-block-columns::before {
  content: "";
  position: absolute;
  left: 1.3rem;
  top: 1.45rem;
  width: 1.2rem;
  height: 1.2rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm2 0h6V7a3 3 0 0 0-6 0v3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm2 0h6V7a3 3 0 0 0-6 0v3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sn-oscura > .wp-block-columns > .wp-block-column { margin: 0 0 0.7rem !important; padding: 0 !important; background: none !important; border: 0 !important; }
.sn-oscura > .wp-block-columns > .wp-block-column:last-child { margin-bottom: 0 !important; }
.sn-oscura > .wp-block-columns > .wp-block-column::before, .sn-oscura > .wp-block-columns > .wp-block-column::after { content: none !important; }
.sn-oscura > .wp-block-columns p { color: inherit !important; font-size: 0.95rem !important; margin: 0 !important; display: inline; }
.sn-oscura > .wp-block-columns .wp-block-column > p:first-child { font-weight: 800 !important; color: inherit !important; }
.sn-oscura > .wp-block-columns .wp-block-column > p:first-child::after { content: ". "; }

/* sn-oscura en páginas de producto = cierre con titular y botón. */
.sn-oscura > h2 { text-align: center; margin: 0 auto 0.8rem !important; max-width: 20ch; color: var(--h-texto) !important; }
.sn-oscura > p { text-align: center; margin-inline: auto !important; color: var(--h-suave) !important; }
.sn-oscura > .wp-block-buttons { justify-content: center; margin-top: 1.6rem !important; }

/* ── Cierre: la barra de escribir ─────────────────────────────────────── */

.cierre-redactar {
  max-width: 820px;
  margin-inline: auto !important;
  text-align: center;
}
.cierre-redactar > h2 { margin-inline: auto !important; max-width: 16ch; font-size: clamp(2.4rem, 3vw + 1.3rem, 4rem) !important; }
.cierre-redactar > p { margin-inline: auto !important; color: var(--h-suave) !important; max-width: 52ch; }
.cierre-redactar .redactar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 2rem auto 0 !important;
  max-width: 640px !important;
  padding: 0.4rem 0.4rem 0.4rem 1.2rem;
  border-radius: 999px;
  background: var(--h-superficie);
  border: 1px solid var(--h-linea-2);
  text-align: left;
}
.cierre-redactar .redactar a {
  flex: 1;
  color: var(--h-tenue) !important;
  text-decoration: none !important;
  font-size: 1rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.cierre-redactar .redactar a::after {
  content: "";
  width: 2px;
  height: 1.2em;
  margin-left: 2px;
  background: var(--h-verde);
  animation: hilo-cursor 1.1s steps(1) infinite;
}
@keyframes hilo-cursor { 50% { opacity: 0; } }
.cierre-redactar .redactar .enviar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--h-chispa);
  color: #03140A;
}
.cierre-redactar .redactar .enviar::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.4 21 12 3.4 3.6l-.1 6.5L15 12 3.3 13.9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.4 21 12 3.4 3.6l-.1 6.5L15 12 3.3 13.9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cierre-redactar .redactar .enviar { transition: transform 160ms var(--h-sale); }
.cierre-redactar .redactar .enviar:active { transform: scale(0.94); }
.cierre-redactar .redactar a.enviar::after { content: none; }
.cierre-redactar > p.telefono { margin-top: 1.2rem !important; font-size: 0.95rem; }
.bandeja-viva > .bandeja-cabecera span { font-weight: 600; color: var(--h-tenue); }
.cierre-redactar .wp-block-buttons { justify-content: center; margin-top: 1.2rem !important; }

/* ══════════════════════════════════════════════════════════════════════
   RESTO DE PÁGINAS (producto, tarifas, artículos, demo)
   ══════════════════════════════════════════════════════════════════════ */

.entry-content > .wp-block-group:first-child h1.has-titulo-1-font-size {
  font-size: clamp(2.6rem, 3.6vw + 1.2rem, 4.6rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
  max-width: 18ch;
}
body:not(.home) .entry-content > .wp-block-group:first-child { padding-top: clamp(3.5rem, 8vh, 6rem) !important; }

/* Logotipos de producto: la versión para fondo oscuro de la guía de marca
   («Sannu» en blanco), sin placa. En modo claro, la de siempre. hilo.js
   también cambia el `src` para los navegadores que no aplican `content`. */
.entry-content figure.wp-block-image:has(img[src*="-comun"]) { display: inline-block !important; width: auto !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
.entry-content figure.wp-block-image img[src*="-comun"] { height: 56px !important; width: auto !important; max-width: none !important; }
html:not([data-tema="claro"]) img[src*="sannu-contact-comun"] { content: url("../marca/contact-fondo-oscuro.png"); }
html:not([data-tema="claro"]) img[src*="sannu-hub-comun"] { content: url("../marca/hub-fondo-oscuro.png"); }
html:not([data-tema="claro"]) img[src*="sannu-calendar-comun"] { content: url("../marca/calendar-fondo-oscuro.png"); }

/* Rejillas de prestaciones: sin cajas; líneas y aire. */
.entry-content > .wp-block-group:not(.sn-oscura) > .wp-block-columns:not(.notas):not(.ia-modos):not(.ia-pasos):not(.tamanos-empresa):not(.planes-ia) > .wp-block-column:not(.tarjeta):not([style*="border"]) {
  padding: 1.2rem 0 0 !important;
  border-top: 1px solid var(--h-linea);
  background: none !important;
  border-radius: 0 !important;
}
.entry-content > .wp-block-group:not(.sn-oscura) > .wp-block-columns > .wp-block-column::before { content: none !important; }

.wp-block-group.has-border-color, .entry-content .wp-block-group.has-border-color.has-background { background: var(--h-superficie) !important; border-color: var(--h-linea) !important; border-radius: var(--h-radio) !important; }

/* Vitrina de Contact */
.vitrina { color: var(--h-texto) !important; background: var(--h-fondo-2) !important; animation: none !important; border-top: 1px solid var(--h-linea); border-bottom: 1px solid var(--h-linea); }
.vitrina::before, .vitrina::after { content: none !important; }
.vitrina-flujo { color: var(--h-suave) !important; }
.vitrina-caja { fill: var(--h-fondo-3) !important; stroke: var(--h-verde) !important; stroke-opacity: 0.6 !important; }
.vitrina-halo { fill: var(--h-verde) !important; fill-opacity: 0.35 !important; }
.vitrina-barra { fill: var(--h-verde) !important; }
.vitrina-cifra { padding: 1rem 0 0; border-top: 1px solid var(--h-linea); }
.vitrina-cifra strong { color: var(--h-texto) !important; }
.vitrina-cifra span { color: var(--h-suave) !important; }
.vitrina-pieza { background: var(--h-superficie) !important; border: 1px solid var(--h-linea); box-shadow: var(--h-sombra) !important; }

/* Tablas */
.wp-block-table table { border-collapse: separate !important; border-spacing: 0; width: 100%; border: 1px solid var(--h-linea) !important; border-radius: var(--h-radio); overflow: hidden; background: var(--h-superficie); }
.wp-block-table td, .ficha-tecnica td { border: 0 !important; border-bottom: 1px solid var(--h-linea) !important; padding: 1rem 1.3rem !important; color: var(--h-suave) !important; vertical-align: top; }
.wp-block-table tr:last-child td { border-bottom: 0 !important; }
.wp-block-table tr td:first-child { width: 15rem; color: var(--h-texto) !important; font-weight: 700; }

/* Preguntas frecuentes */
.wp-block-details { border: 0 !important; border-bottom: 1px solid var(--h-linea) !important; border-radius: 0; padding: 0 !important; margin: 0 !important; background: none; }
.wp-block-details summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; padding: 0.9rem 0; font-weight: 700; color: var(--h-texto); cursor: pointer; list-style: none; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; border-right: 2px solid var(--h-verde); border-bottom: 2px solid var(--h-verde); transform: rotate(45deg) translate(-3px, -3px); transition: transform 200ms var(--h-sale); background: none; border-radius: 0; }
.wp-block-details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.wp-block-details > :not(summary) { color: var(--h-suave) !important; padding-bottom: 1rem; margin: 0 !important; }

/* Tarifas */
.rotulo-plan { display: inline-block; width: fit-content !important; margin-bottom: 0.6rem !important; padding: 0.25rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--h-verde) 14%, transparent); color: var(--h-verde) !important; font-size: 0.75rem !important; font-weight: 800; letter-spacing: 0.06em !important; }
.tarjeta .has-titulo-2-font-size, .tarjeta p[style*="font-weight:800"] { font-family: var(--h-display) !important; color: var(--h-texto) !important; letter-spacing: -0.04em; }
.tarjeta.tarjeta-destacada { border: 1.5px solid var(--h-verde) !important; }
.tarjeta.tarjeta-destacada::before { content: none !important; animation: none !important; }
.precio-unidad { color: var(--h-suave) !important; }
.has-titulo-2-font-size s { color: var(--h-tenue) !important; }
.has-titulo-2-font-size s::after { background: var(--h-tenue) !important; }
.nota-legal { color: var(--h-suave) !important; font-size: 0.9rem !important; line-height: 1.6; }
.has-contact-color { color: #2CC4BC !important; }
.has-hub-color { color: var(--h-verde) !important; }
.planes-ia { gap: 1rem !important; align-items: stretch !important; }
.entry-content .planes-ia > .wp-block-column { padding: 1.5rem !important; border-radius: var(--h-radio) !important; border: 1px solid var(--h-linea) !important; background: var(--h-superficie) !important; box-shadow: none !important; }
.entry-content .planes-ia > .wp-block-column:nth-child(2) { border-color: var(--h-verde) !important; }
.planes-ia > .wp-block-column > p:nth-child(2) { font-family: var(--h-display); font-size: 1.9rem !important; font-weight: 700; letter-spacing: -0.03em; margin: 0 !important; color: var(--h-texto) !important; }
.planes-ia > .wp-block-column > p:nth-child(3) { color: var(--h-suave) !important; font-size: 0.95rem; margin-top: 0.3rem !important; }
.ia-pasos { gap: 1rem !important; }
.entry-content .ia-pasos > .wp-block-column { padding: 1.3rem 1.2rem 1.2rem 3.6rem !important; border-radius: var(--h-radio) !important; border: 1px solid var(--h-linea) !important; background: var(--h-superficie) !important; position: relative; counter-increment: paso; }
.ia-pasos { counter-reset: paso; }
.ia-pasos > .wp-block-column::before { content: counter(paso) !important; position: absolute; left: 1.1rem; top: 1.2rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--h-verde); color: #03140A; font-weight: 800; font-size: 0.9rem; }
.ia-pasos > .wp-block-column > p:first-child { font-weight: 700; color: var(--h-texto) !important; margin: 0 0 0.2rem !important; }
.ia-pasos > .wp-block-column > p + p { color: var(--h-suave) !important; margin: 0 !important; font-size: 0.95rem; }
.lista-funciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 2rem; }
.lista-funciones li { position: relative; padding: 0.8rem 0 0.8rem 1.7rem; border-bottom: 1px solid var(--h-linea); color: var(--h-texto) !important; background: none !important; border-radius: 0; }
.lista-funciones li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 1.05rem; height: 0.75rem; background: var(--h-check); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M11.9.3 5.3 7.7 2.1 4.6.7 6l4.7 4.6L13.3 1.7zm4.3 0-6.7 7.4-.8-.8-1.4 1.4 2.3 2.3L17.6 1.7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M11.9.3 5.3 7.7 2.1 4.6.7 6l4.7 4.6L13.3 1.7zm4.3 0-6.7 7.4-.8-.8-1.4 1.4 2.3 2.3L17.6 1.7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.placa-ia { display: none !important; }

/* Formulario de demo */
.sannu-formulario { background: var(--h-superficie) !important; border: 1px solid var(--h-linea) !important; border-radius: 22px !important; box-shadow: var(--h-sombra); }
.sannu-formulario label > span { color: var(--h-texto); }
.sannu-formulario :is(input[type="text"], input[type="tel"], input[type="email"], textarea, select) { background: var(--h-fondo) !important; border: 1px solid var(--h-linea-2) !important; color: var(--h-texto) !important; border-radius: 12px !important; font-size: 16px !important; min-height: 48px; }
.sannu-formulario :is(input, textarea):focus { border-color: var(--h-verde) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-verde) 25%, transparent) !important; outline: none; }
.sannu-formulario .sannu-consentimiento { color: var(--h-suave) !important; }
.sannu-formulario input[type="checkbox"] { accent-color: var(--h-verde); width: 20px; height: 20px; }
.sannu-formulario button { background: var(--h-verde) !important; color: #03140A !important; font-weight: 800 !important; min-height: 50px; border-radius: 999px !important; transition: transform 160ms var(--h-sale) !important; }
.sannu-formulario button:active { transform: scale(0.97); }

/* Artículos */
.wp-block-post-title a { color: var(--h-texto) !important; text-decoration: none; }
.wp-block-post-title a:hover { color: var(--h-verde) !important; }
.wp-block-post-date, .fecha-articulo { color: var(--h-verde) !important; font-size: 0.85rem; font-weight: 700; }
.wp-block-post-template > li > .wp-block-group { transition: background-color 160ms ease; border-radius: 12px; }
.portada-articulo img { border-radius: 16px !important; border: 1px solid var(--h-linea); }
.wp-block-post-content .wp-block-quote { border: 0 !important; background: color-mix(in srgb, var(--h-verde) 10%, var(--h-superficie)); padding: 1.1rem 1.4rem !important; border-radius: 4px var(--h-radio) var(--h-radio) var(--h-radio); font-size: 1.15rem; }
.dato-suelto { background: var(--h-superficie) !important; border: 1px solid var(--h-linea) !important; border-radius: var(--h-radio) !important; }
.dato-cifra { font-family: var(--h-display); color: var(--h-texto); }
.dato-cifra span { color: var(--h-verde) !important; -webkit-text-fill-color: currentColor; background: none !important; }
.dato-pie { color: var(--h-suave) !important; }
.fuentes { background: var(--h-superficie) !important; border: 1px solid var(--h-linea); }
.wp-block-separator { border-color: var(--h-linea) !important; opacity: 1; }
.single .wp-block-post-content > p, .single .wp-block-post-content .wp-block-group > p { font-size: 1.1rem; line-height: 1.7; max-width: 68ch; }

/* ── Pie ──────────────────────────────────────────────────────────────── */

footer.wp-block-template-part { background: var(--h-fondo-2); border-top: 1px solid var(--h-linea); margin-top: 0 !important; }
footer.wp-block-template-part > .wp-block-group { border-top: 0 !important; padding-top: 3.5rem !important; padding-bottom: 3rem !important; }
footer :is(.wp-block-navigation-item__content, .has-gris-color, p) { color: var(--h-suave) !important; }
footer a { color: var(--h-texto) !important; }
footer a:hover { color: var(--h-verde) !important; }
footer .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; }

/* ── Aparición al hacer scroll ─────────────────────────────────────────
   Visible por defecto. Solo cuando la pieza entra en pantalla, nova.js le
   pone .nova-visto y corre una entrada corta. Sin script, o si falla, todo
   está ahí. */
@keyframes hilo-entra { from { opacity: 0; transform: translateY(14px); } }
.nova-js .nova-entra.nova-visto { animation: hilo-entra 320ms var(--h-sale) both; animation-delay: var(--retraso, 0ms); }
.nova-red { display: none !important; }

/* ── Móvil ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  body.home .entry-content > .wp-block-group:first-child {
    grid-template-columns: 1fr;
    grid-template-areas: "claim" "h1" "texto" "acciones" "bandeja";
    min-height: 0;
    row-gap: 0;
  }
  body.home .entry-content > .wp-block-group:first-child > .bandeja-viva { margin-top: 2.5rem !important; }
  .seccion-notas { grid-template-columns: 1fr; }
  .seccion-notas > h2 { position: static; }
  .seccion-notas > .notas { grid-column: 1; grid-row: auto; }
  .seccion-notas .notas > .tarjeta-nota { width: 100% !important; }
  .ia-escenario { grid-template-columns: 1fr; }
}

@media (max-width: 781px) {
  body { font-size: 1rem; }
  .entry-content > .wp-block-group { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .entry-content .tamanos-empresa > .wp-block-column { padding: 1.3rem 0 !important; }
  .entry-content .tamanos-empresa > .wp-block-column + .wp-block-column { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid var(--h-linea) !important; }
  .cifras-ia > .wp-block-group > p:first-child { flex-basis: 4.6rem; font-size: 1.15rem !important; }
  .wp-block-table tr td:first-child { width: 36%; }
  .wp-block-table td { padding: 0.8rem 0.9rem !important; font-size: 0.92rem; }
  header .wp-block-button__link { padding: 0.55rem 0.9rem !important; font-size: 0.82rem !important; white-space: nowrap; }
  header .wp-block-site-logo img { width: 108px !important; height: auto !important; }
  header .cabecera-fija > .wp-block-group > .wp-block-group { gap: 0.4rem !important; }
  .portada-articulo { margin-inline: calc(var(--wp--style--root--padding-left, 1.5rem) * -1) !important; }
  .portada-articulo img { border-radius: 0 !important; border-left: 0; border-right: 0; }
  .nova-pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nova-pestana { flex: 0 0 auto; }
  .cierre-redactar .redactar a { font-size: 0.92rem; }
}

@media (hover: none) {
  .chat-fila:hover { background: transparent; }
  .tarjeta-nota:hover .wp-block-image img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Menos movimiento no es cero: se quitan desplazamientos y bucles (en cada
     componente) y se conservan los fundidos cortos de opacidad y color. */
  html { scroll-behavior: auto !important; }
  .hilo-js .bandeja-viva > .hilo > p { opacity: 1; transform: none; }
  .nova-js .nova-entra.nova-visto { animation: none; }
}

/* Lo que el script sustituye se oculta de verdad (WordPress fuerza display). */
.wp-block-columns[hidden], .wp-block-group[hidden] { display: none !important; }

/* Los titulares no se parten con guion: en móvil «respon-den» rompía la lectura. */
h1, h2, h3, h4, .claim-portada { -webkit-hyphens: manual !important; hyphens: manual !important; overflow-wrap: normal; }

/* ══════════════════════════════════════════════════════════════════════
   VIDA: fondo de chat, campo de color y los «hola» que llegan
   Mario, 1-oct-2026: «no tiene ninguna animación, el fondo es oscuro sin
   ninguna textura, la veo muy sosa». La textura es la del propio mundo: el
   patrón de marca de dibujos de chat (burbujas, doble check, avioncito,
   reloj, clip), como el fondo de pantalla de cualquier conversación. El
   color vuelve como campo que ocupa una región entera, no como halo.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --h-campo: linear-gradient(120deg, #087A35 0%, #01795A 32%, #036A73 64%, #0049AD 100%);
  --h-patron: url("../marca/patron-oscuro.svg");
  --h-patron-campo: url("../marca/patron-campo.svg");
}
html[data-tema="claro"] { --h-patron: url("../marca/patron-claro-hilo.svg"); }

/* El fondo de chat en toda la web: muy sutil, desaparece hacia el pie. */
body { background-image: var(--h-patron) !important; background-size: 240px 240px !important; background-attachment: fixed !important; }
.has-hueso-background-color, #productos, .sn-oscura { background-image: var(--h-patron) !important; background-size: 240px 240px !important; }

/* ── El escenario del primer pliegue ─────────────────────────────────── */

.bandeja-escena {
  grid-area: bandeja;
  position: relative;
  isolation: isolate;
  align-self: center;
  padding: clamp(2.2rem, 4vw, 3.4rem) clamp(1.4rem, 3vw, 2.4rem);
  border-radius: 32px;
  overflow: hidden;
  background: var(--h-campo);
  background-size: 260% 260%;
  animation: hilo-deriva 22s ease-in-out infinite alternate;
  box-shadow: 0 40px 90px -45px rgb(0 0 0 / 75%);
}
@keyframes hilo-deriva {
  0%   { background-position: 0% 30%; }
  50%  { background-position: 70% 60%; }
  100% { background-position: 100% 40%; }
}
.bandeja-escena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--h-patron-campo) 0 0 / 220px 220px;
  animation: hilo-papel 60s linear infinite;
}
@keyframes hilo-papel { to { background-position: 220px -220px; } }
.bandeja-escena > .bandeja-viva { position: relative; z-index: 2; margin: 0 !important; }

/* Los «hola» que suben por el campo. */
.holas { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hola-flota {
  position: absolute;
  bottom: -3rem;
  left: var(--x, 50%);
  padding: 0.35rem 0.75rem;
  border-radius: 4px 14px 14px 14px;
  background: rgb(255 255 255 / 88%);
  color: #06281C;
  font: 700 var(--t, 0.85rem) var(--h-letra);
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgb(0 0 0 / 50%);
  opacity: 0;
  animation: hilo-sube var(--d, 12s) linear var(--r, 0s) infinite;
}
.hola-flota.es-sannu { background: #EAFFF5; color: #07291E; border-radius: 14px 4px 14px 14px; }
@keyframes hilo-sube {
  0%   { transform: translateY(0) scale(0.96); opacity: 0; }
  8%   { opacity: var(--o, 0.9); transform: translateY(-6vh) scale(1); }
  75%  { opacity: var(--o, 0.9); }
  100% { transform: translateY(-78vh); opacity: 0; }
}

/* La bandeja en movimiento continuo: una ventana fija que se desplaza como
   un chat al llegar mensajes nuevos. */
.hilo-js .bandeja-viva { display: flex !important; flex-direction: column; }
.hilo-js .bandeja-viva .bandeja-lista { height: min(56vh, 470px); overflow: hidden; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(transparent 0, #000 9%, #000 100%); mask-image: linear-gradient(transparent 0, #000 9%, #000 100%); }
.bandeja-lista > .hilo {
  position: relative;
  padding: 0.85rem 0.9rem 0.95rem 3.6rem !important;
  border-top: 1px solid var(--h-linea);
  display: grid !important;
  gap: 0.45rem;
  margin: 0 !important;
}
.bandeja-lista > .hilo::before, .bandeja-lista > .hilo::after { content: ""; position: absolute; }
.bandeja-lista > .hilo::before { left: 0.9rem; top: 0.9rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--h-fondo-3); }
.bandeja-lista > .hilo::after { left: calc(0.9rem + 0.52rem); top: calc(0.9rem + 0.52rem); width: 1.05rem; height: 1.05rem; background: var(--canal-color, var(--h-verde)); -webkit-mask: var(--canal-icono) center / contain no-repeat; mask: var(--canal-icono) center / contain no-repeat; }
.hilo-js .bandeja-lista > .hilo > p { opacity: 0; transform: translateY(8px) scale(0.98); }
.hilo-js .bandeja-lista > .hilo > p.visto { opacity: 1; transform: none; transition: opacity 260ms var(--h-sale), transform 260ms var(--h-sale); }
.hilo-js .bandeja-lista > .hilo > .entra { transform-origin: left top; }
.hilo-js .bandeja-lista > .hilo > .sale { transform-origin: right top; }

/* Canales nuevos de la bandeja. */
.hilo-telegram { --canal-color: #2AABEE; --canal-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 4.1 2.9 11.2c-1.3.5-1.2 1.2-.2 1.5l4.7 1.5 1.8 5.6c.2.6.4.8.8.8.4 0 .6-.2.9-.5l2.3-2.2 4.8 3.5c.9.5 1.5.2 1.7-.8l3.1-14.6c.3-1.3-.5-1.9-1.4-1.5zM8 14l9.4-6c.4-.3.8-.1.5.2l-7.6 6.9-.3 3.3z'/%3E%3C/svg%3E"); }
.hilo-correo { --canal-color: #F5B400; --canal-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.2L4.4 7H4v.6l8 5.5 8-5.5V7h-.4z'/%3E%3C/svg%3E"); }
.hilo-messenger { --canal-color: #A974FF; --canal-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.4 2 2 6.1 2 11.6c0 2.9 1.2 5.4 3.1 7.1V22l2.9-1.6c1.2.3 2.6.5 4 .5 5.6 0 10-4.1 10-9.4S17.6 2 12 2zm1 12.6-2.6-2.7-5 2.7 5.5-5.8 2.6 2.7 4.9-2.7z'/%3E%3C/svg%3E"); }
.hilo-telegram > .entra::before { content: "Telegram"; }
.hilo-correo > .entra::before { content: "Correo"; }
.hilo-messenger > .entra::before { content: "Messenger"; }

/* ── Agentes de IA: campo verde profundo con el fondo de chat ───────── */
.seccion-ia {
  background: radial-gradient(120% 90% at 85% 0%, #14513C 0%, transparent 60%), #0D2D23 !important;
  background-image: var(--h-patron-campo), radial-gradient(120% 90% at 85% 0%, #0A3B2B 0%, transparent 60%) !important;
  background-size: 240px 240px, auto !important;
  background-color: #0D2D23 !important;
}
.seccion-ia > p:not(.rotulo-ia) { color: #B9D3C9 !important; }
.seccion-ia h2, .seccion-ia h3, .seccion-ia strong { color: #fff !important; }
.seccion-ia > h2 em, .seccion-ia > h1 em { color: #3EE08F !important; }
.seccion-ia .ia-modos > .wp-block-column { background: rgb(255 255 255 / 5%) !important; border-color: rgb(255 255 255 / 10%) !important; }
.seccion-ia .ia-modos p, .seccion-ia .ia-modos li { color: #B9D3C9 !important; }
.seccion-ia .ia-lado p { color: #B9D3C9 !important; }
.seccion-ia .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff !important; border-color: rgb(255 255 255 / 30%) !important; }
html[data-tema="claro"] .seccion-ia { background-color: #DDF3E8 !important; background-image: var(--h-patron), none !important; }
html[data-tema="claro"] .seccion-ia > p:not(.rotulo-ia), html[data-tema="claro"] .seccion-ia .ia-modos p, html[data-tema="claro"] .seccion-ia .ia-modos li, html[data-tema="claro"] .seccion-ia .ia-lado p { color: #2C4A3F !important; }
html[data-tema="claro"] .seccion-ia h2, html[data-tema="claro"] .seccion-ia h3, html[data-tema="claro"] .seccion-ia strong { color: #06291D !important; }
html[data-tema="claro"] .seccion-ia > h2 em { color: #087A35 !important; }
html[data-tema="claro"] .seccion-ia .ia-modos > .wp-block-column { background: rgb(255 255 255 / 70%) !important; border-color: rgb(1 11 16 / 8%) !important; }
html[data-tema="claro"] .seccion-ia .wp-block-button.is-style-outline > .wp-block-button__link { color: #06291D !important; border-color: rgb(1 11 16 / 20%) !important; }

/* ── Cierre: el campo de color de marca, de punta a punta ───────────── */
.cierre-redactar {
  position: relative;
  isolation: isolate;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  padding: clamp(5rem, 10vw, 8rem) max(24px, calc(50vw - 420px)) !important;
  background: var(--h-campo) !important;
  background-size: 260% 260% !important;
  animation: hilo-deriva 22s ease-in-out infinite alternate;
  overflow: hidden;
}
.cierre-redactar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--h-patron-campo) 0 0 / 220px 220px; animation: hilo-papel 60s linear infinite; }
.cierre-redactar > h2 { color: #fff !important; }
.cierre-redactar > p { color: rgb(255 255 255 / 92%) !important; }
.cierre-redactar > p a { color: #fff !important; text-decoration-color: #fff; }
.cierre-redactar .redactar { background: #fff !important; border: 0 !important; box-shadow: 0 24px 60px -30px rgb(0 0 0 / 60%); }
.cierre-redactar .redactar a { color: #5C6E74 !important; }
.cierre-redactar .redactar .enviar { background: var(--h-verde) !important; color: #03140A !important; }

@media (max-width: 900px) {
  .bandeja-escena { margin-top: 2.4rem; padding: 1.8rem 1rem; border-radius: 26px; }
  .hilo-js .bandeja-viva .bandeja-lista { height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .bandeja-escena, .bandeja-escena::before, .cierre-redactar, .cierre-redactar::before { animation: none !important; }
  .holas { display: none; }
  .hilo-js .bandeja-lista > .hilo > p { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   EL MAPA DE LOS «HOLA» (mapa.js) — el gran momento de la portada
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  body.home .entry-content > .wp-block-group:first-child {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(1rem, 3vw, 3rem);
  }
}

.mapa-hola {
  grid-area: bandeja;
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 1 / 0.78;
  width: calc(100% + clamp(0rem, 8vw, 9rem));
  margin-right: calc(-1 * clamp(0rem, 8vw, 9rem));
  margin-left: calc(-1 * clamp(0rem, 2vw, 2rem));
}

.mapa-plano {
  --rx: 0deg;
  --ry: 0deg;
  position: absolute;
  inset: 0;
  transform: perspective(1500px) rotateX(calc(22deg + var(--rx))) rotateY(var(--ry)) rotateZ(-4deg);
  transform-origin: 50% 62%;
}
.mapa-plano canvas { display: block; width: 100%; height: 100%; }

/* Un suelo de luz muy suave bajo el mapa: la luz que hace el propio mapa. */
.mapa-hola::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: 4%;
  height: 40%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(1 178 113 / 16%), transparent 70%);
  pointer-events: none;
}

.mapa-feed {
  position: absolute;
  right: 0;
  bottom: 2%;
  z-index: 2;
  display: grid;
  gap: 0.45rem;
  width: min(280px, 52%);
}
.mapa-msg {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.05rem 0.6rem;
  padding: 0.55rem 0.85rem 0.6rem;
  border-radius: 4px 16px 16px 16px;
  background: color-mix(in srgb, var(--h-superficie) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--h-sombra);
  animation: hilo-llega 300ms var(--h-sale) both;
}
.mapa-msg:nth-child(2) { opacity: 0.7; }
.mapa-msg:nth-child(3) { opacity: 0.4; }
.mapa-canal { grid-column: 1; font-size: 0.72rem; font-weight: 700; color: var(--canal); }
.mapa-texto { grid-column: 1; font-size: 0.9rem; color: var(--h-texto); line-height: 1.35; }
.mapa-msg small { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.75rem; color: var(--h-tenue); white-space: nowrap; }

.mapa-aviso {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0 !important;
  font-size: 0.75rem !important;
  color: var(--h-tenue) !important;
}

@media (max-width: 900px) {
  .mapa-hola { margin: 1.5rem -1rem 0 !important; width: calc(100% + 2rem) !important; aspect-ratio: 1 / 0.95; }
  .mapa-feed { width: 78%; bottom: -1rem; }
  .mapa-msg:nth-child(3) { display: none; }
}

/* Ajustes tras la primera captura del mapa. */
.bandeja-viva[hidden] { display: none !important; }
:root { --h-patron: url("../marca/patron-fondo.svg"); }
html[data-tema="claro"] { --h-patron: url("../marca/patron-fondo-claro.svg"); }
.claim-portada { font-size: clamp(2.4rem, 2.6vw + 1.3rem, 4.5rem) !important; }
body.home .entry-content > .wp-block-group:first-child > p:not(.claim-portada) { max-width: 46ch !important; }

@media (max-width: 900px) {
  .mapa-hola { aspect-ratio: auto !important; }
  .mapa-plano { position: relative; inset: auto; aspect-ratio: 1 / 0.9; }
  .mapa-feed { position: static; width: auto; margin: 0.4rem 1rem 0; }
  .mapa-aviso { position: static; text-align: right; margin: 0.4rem 1rem 0 !important; }
}


/* Mario, 1-oct-2026: el patrón de dibujos de chat como fondo no le
   convence («sé que quieres emular un WhatsApp, pero no me gusta mucho»).
   Fuera de toda la web; los campos de color se quedan sin trama. */
body { background-image: none !important; }
.has-hueso-background-color, #productos, .sn-oscura { background-image: none !important; }
.seccion-ia { background-image: radial-gradient(120% 90% at 85% 0%, #0A3B2B 0%, transparent 60%) !important; background-size: auto !important; }
html[data-tema="claro"] .seccion-ia { background-image: radial-gradient(120% 90% at 85% 0%, #C6EBD8 0%, transparent 60%) !important; }
.cierre-redactar::before, .bandeja-escena::before { content: none !important; }
html[data-tema="claro"] .mapa-hola::before { background: radial-gradient(50% 50% at 50% 50%, rgb(1 140 90 / 14%), transparent 70%); }