/*
Theme Name: Sannu
Theme URI: https://sannu.es
Author: Sannu
Description: Tema de la web de Sannu. Tema de bloques: los colores, la tipografía y la maquetación se editan desde Apariencia → Editor, sin tocar código. La paleta está cerrada a los colores de la guía de marca a propósito, para que no se pueda pintar un botón de un color que no es de Sannu.
Version: 1.7.2
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: Propietario
Text Domain: sannu

OJO AL TOCAR ESTE ARCHIVO: sube la Version de arriba. El tema encola su hoja
con `?ver=<Version>`, así que sin subirla el navegador y la CDN siguen
sirviendo el CSS anterior aunque el archivo del servidor ya sea el nuevo —
y el cambio parece que "no se ha guardado" cuando sí lo está. Lo mismo vale
para assets/js/carrusel.js, que va con la misma versión.
*/

/* La maquetación vive en theme.json y en los patrones. Aquí solo lo que el
   editor de bloques no sabe expresar todavía. */

/* Los titulares reparten sus líneas equilibradas y no se guionan. Guionar de
   oficio salía caro en el titular ancho de la portada: la palabra cabía entera
   y el navegador la partía igual para cuadrar el renglón, dejando "telefonía y
   mensajería cor-porativa" en el primer golpe de vista. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}

/* En columna estrecha sí interesa el guion: "Solicitar una demostración" en
   media columna cortaba en "demostració / n", que es lo peor de las dos
   opciones. El navegador sabe silabear en español porque el documento va en
   lang="es". */
@media (max-width: 600px) {
  h1, h2, h3, h4 { hyphens: auto; }
}

/* El degradado del símbolo aplicado a texto — se usa en el claim, en la
   palabra "hola". Un bloque de WordPress no tiene "texto con degradado", así
   que se marca con esta clase desde el editor (Avanzado → clases CSS). */
/* El punto que va detrás de la palabra en degradado quedaba despegado. */
.texto-chispa {
  margin-right: -0.08em;
  background: var(--wp--preset--gradient--chispa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tarjeta de producto y de sección: borde fino, esquina redonda y una sombra
   muy contenida. Se aplica a un grupo desde el editor. */
.tarjeta {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  background: var(--wp--preset--color--blanco);
  box-shadow: 0 1px 2px rgb(1 11 16 / 4%), 0 12px 32px -24px rgb(1 11 16 / 30%);
}

/* El plan del medio, destacado. No es un adorno: en una rejilla de tres, si
   ninguno destaca, la mirada se va al más barato y ahí se queda. */
.tarjeta.tarjeta-destacada {
  border-color: var(--wp--preset--color--contact);
  box-shadow: 0 1px 2px rgb(1 11 16 / 4%), 0 20px 48px -28px rgb(1 11 16 / 40%);
}

/* El rótulo del plan sobre el precio: "STARTER", "PROFESSIONAL". */
.rotulo-plan {
  margin-bottom: 0.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Las tres tarjetas, a la misma altura y con el botón abajo del todo: los
   planes no tienen el mismo número de líneas y sin esto los botones quedan
   escalonados, que es justo donde la vista compara. */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.tarjeta {
  display: flex;
  flex-direction: column;
}
/* "por agente y mes", debajo del importe. En una columna de tres no cabe al
   lado del precio y, heredando el interlineado del titular, se partía en dos
   renglones separados por un hueco enorme. */
.precio-unidad {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--gris);
}

.tarjeta > .wp-block-buttons {
  margin-top: auto;
  padding-top: 1rem;
}

/* Las capturas de la aplicación, que necesitan destacar del fondo sin marco
   pesado. */
.captura img {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  box-shadow: 0 20px 60px -30px rgb(1 11 16 / 45%);
}

/* ── Vitrina en movimiento ────────────────────────────────────────────────
   Mario, 25-ago-2026: «la animación es muy oscura, ese fondo negro con las
   capturas en oscuro; dale vida y color, nuestros colores son alegría, el
   motion graphic también, y más movimiento — esas capturas están ahí
   estáticas sin decir nada».

   Tres decisiones que salen de ahí:

   · **Fondo de marca, no negro.** Un degradado vivo verde → turquesa → azul,
     que son los colores de los cuatro productos de Sannu, moviéndose despacio.
   · **Texto OSCURO sobre el color**, no blanco. Además de ser lo alegre, es
     lo legible: blanco sobre el turquesa se queda en 3:1, y el marino sobre
     el mismo turquesa pasa de 6:1. La alegría no está reñida con que se lea.
   · **Las capturas flotan solas**, cada una a su ritmo, sin esperar al
     scroll. El parálax sigue ahí encima, pero ya no es lo único que las mueve:
     una imagen quieta en una página que se vende sola no dice nada.

   Todo el movimiento se apaga con `prefers-reduced-motion`, al final. */
.vitrina {
  position: relative;
  color: var(--wp--preset--color--marino);
  overflow: hidden;
  background: linear-gradient(
    115deg,
    #01B271 0%,
    #02A34C 22%,
    #029F97 55%,
    #006DFD 100%
  );
  background-size: 220% 220%;
  animation: vitrina-marea 18s ease-in-out infinite;
}

@keyframes vitrina-marea {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Dos manchas de luz que giran despacio: le quitan la planitud al degradado
   sin meter ni una imagen. */
.vitrina::before,
.vitrina::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}

.vitrina::before {
  width: 38rem; height: 38rem;
  top: -14rem; left: -10rem;
  background: rgb(255 255 255 / 26%);
  animation: vitrina-vagar 24s ease-in-out infinite;
}

.vitrina::after {
  width: 30rem; height: 30rem;
  right: -8rem; bottom: -12rem;
  background: rgb(0 109 253 / 34%);
  animation: vitrina-vagar 30s ease-in-out infinite reverse;
}

@keyframes vitrina-vagar {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(6rem, 3rem, 0) scale(1.12); }
  66%      { transform: translate3d(-3rem, 5rem, 0) scale(0.94); }
}

.vitrina-lienzo {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin-inline: auto;
}

/* El recorrido de la llamada */
.vitrina-flujo {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 3.5rem;
  color: var(--wp--preset--color--marino);
}

.vitrina-caja {
  fill: rgb(255 255 255 / 55%);
  stroke: currentColor;
  stroke-opacity: 0.35;
  stroke-width: 1.5;
}

.vitrina-rotulo {
  fill: currentColor;
  fill-opacity: 0.75;
  font-size: 13px;
  font-weight: 700;
}

.vitrina-halo {
  fill: #fff;
  fill-opacity: 0.55;
  animation: vitrina-latido 2.4s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes vitrina-latido {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

.vitrina-hilo {
  stroke-dasharray: 90 610;
  animation: vitrina-corriente 4.5s linear infinite;
}

@keyframes vitrina-corriente {
  from { stroke-dashoffset: 700; }
  to   { stroke-dashoffset: 0; }
}

.vitrina-barra {
  fill: #fff;
  fill-opacity: 0.95;
  transform-box: fill-box;
  transform-origin: bottom;
  animation: vitrina-espera 1.8s ease-in-out infinite;
}

.vitrina-barra-2 { animation-delay: 0.25s; }
.vitrina-barra-3 { animation-delay: 0.5s; }

@keyframes vitrina-espera {
  0%, 100% { transform: scaleY(0.45); }
  50%      { transform: scaleY(1); }
}

.vitrina-viajera {
  filter: drop-shadow(0 0 8px rgb(255 255 255 / 95%));
}

/* Los rótulos */
.vitrina-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem 2rem;
  margin-bottom: 4.5rem;
  text-align: left;
}

.vitrina-cifra strong {
  display: block;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--marino);
}

.vitrina-cifra span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(1 11 16 / 72%);
}

/* Los recortes de interfaz, en tarjeta blanca para que el oscuro de la
   captura tenga contra qué recortarse. */
.vitrina-piezas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  min-height: 22rem;
}

.vitrina-pieza {
  margin: 0;
  padding: 0.5rem;
  border-radius: 18px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 30px 60px -20px rgb(1 11 16 / 45%);
  will-change: transform;
  /* El parálax escribe `transform` desde el script, así que el flotar va en
     una propiedad que no pisa: la animación mueve el hijo, no la tarjeta. */
}

/* Un hueco donde las láminas se turnan. La altura la marca la lámina más
   alta, que se queda ocupando sitio en el flujo (`visibility: hidden`) para
   que el bloque no dé un salto cada vez que cambia la imagen. */
.gira {
  position: relative;
  display: grid;
}

.gira > * {
  grid-area: 1 / 1;
  /* Centrado: las láminas de un mismo hueco no miden igual, y sin esto la
     baja se pegaba arriba dejando un hueco blanco debajo. */
  align-self: center;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gira > .es-visible {
  opacity: 1;
  transform: none;
}

.vitrina-pieza img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  animation: vitrina-flotar 7s ease-in-out infinite;
}

.vitrina-pieza .gira img { animation: none; }
.vitrina-pieza:has(.gira) { animation: vitrina-flotar 7s ease-in-out infinite; }

@keyframes vitrina-flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-0.35deg); }
}

.vitrina-pieza-a { grid-column: 1 / span 3;  z-index: 2; }
.vitrina-pieza-b { grid-column: 4 / span 6;  z-index: 3; }
.vitrina-pieza-c { grid-column: 9 / span 4;  z-index: 1; margin-top: 4rem; }

/* Cada una a su ritmo: si flotan a la vez parece un ascensor. */
.vitrina-pieza-b img { animation-duration: 8.5s; animation-delay: -2s; }
.vitrina-pieza-c img { animation-duration: 6.2s; animation-delay: -4s; }

/* Aparecer al entrar en pantalla. Solo se esconde si el script está vivo. */
.hay-movimiento .aparece {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hay-movimiento .aparece.se-ve {
  opacity: 1;
  transform: none;
}

.hay-movimiento .vitrina-cifra:nth-child(2) { transition-delay: 90ms; }
.hay-movimiento .vitrina-cifra:nth-child(3) { transition-delay: 180ms; }
.hay-movimiento .vitrina-cifra:nth-child(4) { transition-delay: 270ms; }
.hay-movimiento .vitrina-pieza-b { transition-delay: 120ms; }
.hay-movimiento .vitrina-pieza-c { transition-delay: 240ms; }

@media (max-width: 781px) {
  .vitrina-piezas { display: grid; grid-template-columns: 1fr; gap: 1.5rem; min-height: 0; }
  .vitrina-pieza-a, .vitrina-pieza-b, .vitrina-pieza-c { grid-column: 1; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vitrina,
  .vitrina::before,
  .vitrina::after,
  .vitrina-halo,
  .vitrina-hilo,
  .vitrina-barra,
  .vitrina-pieza img { animation: none; }
  .vitrina-viajera { display: none; }
}

/* ── Carrusel de capturas ─────────────────────────────────────────────────
   Mario, 25-ago-2026: «prefiero imágenes sin contexto a modo de carrusel o
   animaciones, quiero una página dinámica que venda, no un manual». Así que
   las capturas van sin pie: la imagen enseña el producto y el texto de venta
   ya está en su sección.

   El desplazamiento lo hace `scroll-snap`, no JavaScript: el arrastre con el
   dedo, la inercia y el ajuste a cada lámina son del navegador, salen bien
   en cualquier móvil y funcionan aunque el script no llegue a cargar. El JS
   solo añade flechas, puntos y avance automático.

   El `alt` de cada imagen SÍ se queda: no se ve, describe la captura para
   quien navega con lector de pantalla y es lo que lee un buscador. Quitar el
   pie visible no es motivo para dejar la imagen muda. */
.carrusel {
  position: relative;
}

.carrusel-pista {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Sin barra a la vista: el carrusel ya dice que hay más con los puntos. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Sitio para que la sombra de las láminas no salga cortada. */
  padding-block: 0.5rem;
}

.carrusel-pista::-webkit-scrollbar { display: none; }

/* Láminas que NO ocupan la pantalla entera. Una captura a 1180 px es un
   pantallazo, no un argumento de venta: se ve todo y no se mira nada. A este
   tamaño caben dos y asoma la tercera, que es lo que dice «hay más» sin
   escribirlo. */
.carrusel-pista > * {
  flex: 0 0 min(30rem, 78%);
  scroll-snap-align: center;
  margin: 0;
}

/* Recortadas por la parte de arriba, no encogidas: se enseña un trozo de
   pantalla a tamaño legible en vez de la pantalla entera ilegible. */
.carrusel-pista img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left top;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  box-shadow: 0 20px 60px -30px rgb(1 11 16 / 45%);
  transition: transform 400ms ease, box-shadow 400ms ease;
}

.carrusel-pista img:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -30px rgb(1 11 16 / 55%);
}

/* Flechas y puntos los crea el script, así que no existen —ni ocupan— si no
   llega a cargar. */
.carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 50%;
  background: var(--wp--preset--color--base, #fff);
  color: var(--wp--preset--color--marino);
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  box-shadow: 0 8px 24px -12px rgb(1 11 16 / 45%);
}

.carrusel:hover .carrusel-flecha,
.carrusel-flecha:focus-visible { opacity: 1; }

.carrusel-flecha:hover { transform: translateY(-50%) scale(1.06); }
.carrusel-anterior { left: -1.375rem; }
.carrusel-siguiente { right: -1.375rem; }

.carrusel-flecha::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.carrusel-anterior::before { transform: rotate(-135deg); margin-left: 0.2rem; }
.carrusel-siguiente::before { transform: rotate(45deg); margin-right: 0.2rem; }

.carrusel-puntos {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.carrusel-punto {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--linea);
  cursor: pointer;
  transition: width 250ms ease, background 250ms ease;
}

.carrusel-punto.es-actual {
  width: 1.5rem;
  border-radius: 999px;
  background: var(--wp--preset--color--contact);
}

/* En pantallas pequeñas las flechas estorban más que ayudan: ahí se desliza
   con el dedo, que es el gesto natural. */
@media (max-width: 781px) {
  .carrusel-flecha { display: none; }
}

/* Si el sistema pide menos movimiento, ni desplazamiento suave ni el salto
   del punto activo. El avance automático lo desactiva el propio script. */
@media (prefers-reduced-motion: reduce) {
  .carrusel-pista { scroll-behavior: auto; }
  .carrusel-pista img,
  .carrusel-punto,
  .carrusel-flecha { transition: none; }
  .carrusel-pista img:hover { transform: none; }
}

/* Ficha técnica: una tabla de dos columnas donde la primera manda. El bloque
   de tabla de WordPress no distingue encabezado de fila lateral. */
.ficha-tecnica table { border-collapse: collapse; width: 100%; }
.ficha-tecnica td { padding: 1rem 1.5rem 1rem 0; border-bottom: 1px solid var(--wp--preset--color--linea); vertical-align: top; }
.ficha-tecnica tr td:first-child { width: 16rem; font-weight: 600; }
.ficha-tecnica tr td:last-child { color: var(--wp--preset--color--gris); }

/* Cabecera pegada arriba: se ve el menú sin volver al principio de una página
   larga. */
.cabecera-fija {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--wp--preset--color--linea);
}

/* Etiqueta de estado ("En servicio", "Abriendo plazas"). */
.etiqueta {
  display: inline-block;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Formulario (viene del plugin «Sannu · formulario a Contact») ────────── */

.sannu-formulario {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  padding: 2rem;
  background: var(--wp--preset--color--blanco);
  display: grid;
  gap: 1.1rem;
}
.sannu-formulario .sannu-fila {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr 1fr;
  /* Los campos abajo, no arriba: si una etiqueta ocupa dos líneas ("Nombre y
     apellidos *") y la de al lado una, sin esto los dos recuadros quedan a
     distinta altura y la fila se ve torcida. */
  align-items: end;
}
@media (max-width: 640px) {
  .sannu-formulario .sannu-fila { grid-template-columns: 1fr; }
}
.sannu-formulario label { display: block; }
.sannu-formulario label > span { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; }
.sannu-formulario input[type="text"],
.sannu-formulario input[type="tel"],
.sannu-formulario input[type="email"],
.sannu-formulario textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 10px;
  font: inherit;
  background: var(--wp--preset--color--blanco);
}
.sannu-formulario input:focus,
.sannu-formulario textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--contact);
  box-shadow: 0 0 0 3px rgb(2 159 151 / 15%);
}
.sannu-formulario .sannu-consentimiento {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--wp--preset--color--gris);
}
.sannu-formulario .sannu-consentimiento input { margin-top: 0.25rem; }
.sannu-formulario button {
  margin-top: 0.4rem;
  padding: 0.9rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--contact);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.sannu-formulario button:hover { filter: brightness(1.08); }
.sannu-formulario button:disabled { opacity: 0.6; cursor: default; }

/* La trampa para robots: fuera de la pantalla, no `display:none` — algunos
   robots saltan lo que está oculto de la forma evidente. */
.sannu-trampa { position: absolute; left: -9999px; }

.sannu-resultado { margin: 0; font-size: 0.9rem; min-height: 1.2em; }
.sannu-resultado.es-bien { color: var(--wp--preset--color--contact); }
.sannu-resultado.es-mal { color: #b91c1c; }

/* ── Preguntas frecuentes (bloque de detalles) ───────────────────────────
   Se usa <details> a propósito: es HTML nativo, funciona sin JavaScript y
   los buscadores —y los sistemas de IA— leen la pregunta y la respuesta
   aunque estén plegadas. El tema las convierte además en datos
   estructurados FAQPage (ver functions.php). */

.wp-block-details {
  border-bottom: 1px solid var(--wp--preset--color--linea);
  padding: 1.25rem 0;
}
.wp-block-details summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  content: "+";
  color: var(--wp--preset--color--contact);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 400;
}
.wp-block-details[open] summary::after { content: "−"; }
.wp-block-details p {
  margin-top: 0.9rem;
  color: var(--wp--preset--color--gris);
}

/* El contenedor va a 1180 px para aprovechar la pantalla, pero un párrafo a
   1180 px sale en renglones de 160 caracteres y no hay quien lo lea. El texto
   corrido lleva medida de lectura; los titulares y las rejillas usan el ancho
   entero. Dentro de una columna ya es estrecho, así que ahí no se toca.

   El anclaje a la izquierda no es opcional: el layout de WordPress centra todo
   lo que lleva ancho máximo, y un párrafo centrado debajo de un titular
   alineado a la izquierda se ve descolgado. */
.wp-block-post-content > p,
.wp-block-group > p {
  max-width: 68ch;
  margin-inline-start: 0;
}

/* El claim de la portada manda a la vista, pero el H1 debajo es el que lleva
   las palabras por las que se busca. Separar tamaño de jerarquía permite
   quedarse con las dos cosas: el claim no es un encabezado, es un párrafo. */
.claim-portada {
  margin-bottom: 0.75rem;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.claim-portada + h1 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 600;
  color: var(--wp--preset--color--gris);
}