/* ============================================================
   FB Sistemas — identidad monocromática, sobria, sin un solo
   color de acento. Todo el peso visual lo lleva la tipografía y
   el espaciado, no una paleta.
   ============================================================ */

:root {
  --negro: #050505;
  --negro-2: #0c0c0c;
  --superficie: rgba(255, 255, 255, 0.035);
  --superficie-alta: rgba(255, 255, 255, 0.07);
  --borde: rgba(255, 255, 255, 0.1);
  --borde-fuerte: rgba(255, 255, 255, 0.22);
  --blanco: #f5f5f4;
  --gris: #a3a3a1;
  --gris-tenue: #6b6b69;
  --sombra: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  --radio: 18px;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Curvas con más carácter que las nativas del navegador: ease-out con
     "empuje" real, para que el movimiento se sienta intencional y no
     genérico. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Tamaño de las capturas del hero — ajustable desde el panel sin redeploy
     de código (content.json.imagenes.mosaicoEscala, ver script.js). */
  --mosaico-escala: 1;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 17px;
}
/* En pantallas grandes todo el sitio escala un poco más — nada de letra
   chica en un monitor de escritorio. */
@media (min-width: 1280px) {
  html {
    font-size: 19px;
  }
}

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

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--font);
  font-weight: 450;
  letter-spacing: -0.01em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* Dos halos blancos muy tenues y desenfocados: la única "decoración" del
   fondo, para que no quede un negro plano y sin profundidad. */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
body::before {
  width: 46vw;
  height: 46vw;
  top: -18vw;
  right: -14vw;
  background: rgba(255, 255, 255, 0.05);
  animation: respirar1 22s ease-in-out infinite;
}
body::after {
  width: 38vw;
  height: 38vw;
  bottom: -16vw;
  left: -12vw;
  background: rgba(255, 255, 255, 0.035);
  animation: respirar2 26s ease-in-out infinite;
}
/* Respiración muy lenta de los halos: casi imperceptible a simple vista,
   pero evita que el fondo se sienta una imagen fija. */
@keyframes respirar1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-3vw, 2vw) scale(1.08);
  }
}
@keyframes respirar2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(2vw, -3vw) scale(1.1);
  }
}

/* Grano fino sobre todo el sitio: rompe el negro plano típico de una
   pantalla generada por IA y le da una textura casi de papel/película. */
.grano {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Grilla sutil de fondo, fija, detrás de todo el contenido: le da estructura
   al negro plano sin competir con el texto. Se desvanece hacia abajo para
   no repetirse de forma monótona en toda la altura del sitio. */
.grilla-fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85vh);
  mask-image: linear-gradient(to bottom, black, transparent 85vh);
}

::selection {
  background: var(--blanco);
  color: var(--negro);
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--blanco);
  outline-offset: 3px;
  border-radius: 6px;
}

img {
  max-width: 100%;
  display: block;
}

.envoltura {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.hero .envoltura {
  z-index: 2;
}

/* Sitio completo un poco más grande en desktop: nada de letra chica en un
   monitor grande. Solo texto de lectura — headings ya escalan con rem. */
@media (min-width: 1280px) {
  .envoltura {
    max-width: 1180px;
  }
  .hero h1 {
    max-width: 900px;
  }
  .hero .lead {
    font-size: 18.5px;
    max-width: 640px;
  }
  .encabezado-seccion {
    max-width: 620px;
  }
  .encabezado-seccion p {
    font-size: 16.5px;
  }
  .feature p,
  .paso p,
  .caso-real .texto p,
  .tarjeta-confianza p {
    font-size: 14.5px;
  }
  .feature h3,
  .paso h3 {
    font-size: 17px;
  }
  .boton {
    height: 56px;
    font-size: 15.5px;
  }
  section {
    padding: 84px 0;
  }
}

/* ---------- header ---------- */
header.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(5, 5, 5, 0.72);
  border-bottom: 1px solid var(--borde);
}
.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.nav-principal {
  display: none;
  align-items: center;
  gap: 26px;
}
.nav-principal a {
  font-size: 13px;
  font-weight: 600;
  color: var(--gris);
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}
.nav-principal a:hover {
  color: var(--blanco);
}
@media (min-width: 860px) {
  .nav-principal {
    display: flex;
  }
}
.marca img {
  height: 26px;
  width: auto;
}
.marca span {
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: -0.02em;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease,
    border-color 0.2s ease;
}
.nav-cta:hover {
  background: var(--superficie-alta);
  border-color: rgba(255, 255, 255, 0.4);
}
.nav-cta:active {
  transform: scale(0.96);
}

/* ---------- hero ---------- */
.hero {
  padding: 130px 0 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-contenido {
  position: relative;
  z-index: 2;
}

/* Mosaico de paneles reales como fondo del hero: ocupa casi todo el banner,
   con tilt 3D variado en cada pieza para que se sienta un collage armado a
   mano y no una grilla prolija. El velo oscuro (más abajo) es lo que hace
   que el texto siga siendo legible encima. Cada pieza flota muy despacio
   (ver @keyframes flotar) para que el fondo no se sienta congelado. */
.hero-mosaico {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  perspective: 1800px;
  transform: scale(var(--mosaico-escala));
  transition: transform 260ms var(--ease-out);
}
.mosaico-item {
  position: absolute;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 25px 50px -18px rgba(0, 0, 0, 0.8);
  transform-style: preserve-3d;
  animation: flotar 9s ease-in-out infinite;
}
.mosaico-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

@keyframes flotar {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -14px;
  }
}

.mosaico-item--1 {
  width: 340px;
  height: 190px;
  left: -3%;
  top: 12%;
  z-index: 2;
  transform: rotate3d(0.3, 1, -0.1, 16deg) rotate(-4deg);
  animation-duration: 10s;
  animation-delay: -1.2s;
}
.mosaico-item--2 {
  width: 370px;
  height: 236px;
  left: 50%;
  top: -6%;
  margin-left: -185px;
  z-index: 4;
  transform: rotate3d(0.2, -1, 0.05, 9deg) rotate(1.5deg);
  animation-duration: 12s;
  animation-delay: -4s;
}
.mosaico-item--3 {
  width: 290px;
  height: 345px;
  right: -2%;
  top: 6%;
  z-index: 2;
  transform: rotate3d(0.25, -1, -0.1, -15deg) rotate(4deg);
  animation-duration: 11s;
  animation-delay: -7s;
}
.mosaico-item--4 {
  width: 265px;
  height: 160px;
  left: 4%;
  bottom: -6%;
  z-index: 1;
  transform: rotate3d(0.2, 1, 0.1, 18deg) rotate(-6deg);
  animation-duration: 8.5s;
  animation-delay: -2.5s;
}
.mosaico-item--5 {
  width: 240px;
  height: 218px;
  right: 15%;
  bottom: -12%;
  z-index: 1;
  transform: rotate3d(0.15, -1, 0.1, -12deg) rotate(5deg);
  animation-duration: 10.5s;
  animation-delay: -5.5s;
}
.mosaico-item--6 {
  width: 300px;
  height: 184px;
  left: 21%;
  bottom: -10%;
  z-index: 1;
  transform: rotate3d(0.1, 1, -0.05, 10deg) rotate(-2deg);
  animation-duration: 9.5s;
  animation-delay: -3.3s;
}
.mosaico-item--7 {
  width: 218px;
  height: 172px;
  right: -3%;
  bottom: 3%;
  z-index: 1;
  transform: rotate3d(0.2, -1, 0.1, -16deg) rotate(6deg);
  animation-duration: 11.5s;
  animation-delay: -6.2s;
}
.mosaico-item--8 {
  width: 230px;
  height: 160px;
  left: -2%;
  top: -9%;
  z-index: 1;
  transform: rotate3d(0.15, 1, 0.05, 14deg) rotate(-5deg);
  animation-duration: 9.8s;
  animation-delay: -0.6s;
}
.mosaico-item--9 {
  width: 210px;
  height: 155px;
  left: 39%;
  bottom: -15%;
  z-index: 1;
  transform: rotate3d(0.15, -1, 0.05, -13deg) rotate(3deg);
  animation-duration: 10.2s;
  animation-delay: -3.8s;
}
.mosaico-item--10 {
  width: 195px;
  height: 145px;
  right: 20%;
  top: -11%;
  z-index: 1;
  transform: rotate3d(0.2, 1, -0.05, 15deg) rotate(-4deg);
  animation-duration: 9.2s;
  animation-delay: -1.9s;
}

/* En pantallas grandes las piezas crecen todavía más — se pidió que el
   mosaico sea protagonista, no un detalle chico en un monitor grande. */
@media (min-width: 1280px) {
  .hero {
    min-height: 760px;
  }
  .mosaico-item--1 {
    width: 400px;
    height: 224px;
  }
  .mosaico-item--2 {
    width: 440px;
    height: 282px;
    margin-left: -220px;
  }
  .mosaico-item--3 {
    width: 340px;
    height: 405px;
  }
  .mosaico-item--4 {
    width: 310px;
    height: 188px;
  }
  .mosaico-item--5 {
    width: 280px;
    height: 254px;
  }
  .mosaico-item--6 {
    width: 350px;
    height: 214px;
  }
  .mosaico-item--7 {
    width: 255px;
    height: 200px;
  }
  .mosaico-item--8 {
    width: 270px;
    height: 188px;
  }
  .mosaico-item--9 {
    width: 250px;
    height: 184px;
  }
  .mosaico-item--10 {
    width: 232px;
    height: 172px;
  }
}

/* Velo mucho más liviano que antes: ahora la legibilidad del texto la da el
   panel propio (.hero-texto-fondo) y no un oscurecimiento general — así las
   capturas se ven de verdad, que es justamente el pedido: que se note que
   el fondo son paneles reales, no una mancha negra con formas. */
.hero-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 5, 0.5) 0%,
    rgba(5, 5, 5, 0.28) 32%,
    rgba(5, 5, 5, 0.34) 68%,
    var(--negro) 100%
  );
}

/* Panel translúcido detrás del bloque de texto: es esto, y no el velo
   general, lo que garantiza que el mensaje se siga leyendo bien encima de
   capturas que ahora están mucho más visibles. */
.hero-texto-fondo {
  position: absolute;
  inset: -18px -28px;
  z-index: -1;
  border-radius: 28px;
  background: rgba(5, 5, 5, 0.52);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
@media (min-width: 1280px) {
  .hero-texto-fondo {
    inset: -30px -44px;
    border-radius: 36px;
  }
}

@media (max-width: 900px) {
  .mosaico-item--7,
  .mosaico-item--8,
  .mosaico-item--9,
  .mosaico-item--10 {
    display: none;
  }
}

/* ---------- hero en mobile: se reordena, no solo se achica ---------- */
@media (max-width: 640px) {
  .hero {
    min-height: 0;
    padding: 108px 16px 56px;
    overflow: hidden;
  }
  .mosaico-item--5,
  .mosaico-item--6 {
    display: none;
  }
  .mosaico-item {
    border-radius: 10px;
    animation-name: flotarSuave;
  }
  @keyframes flotarSuave {
    0%,
    100% {
      translate: 0 0;
    }
    50% {
      translate: 0 -6px;
    }
  }
  .mosaico-item--1 {
    width: 42vw;
    height: 27vw;
    left: 2vw;
    top: 4%;
  }
  .mosaico-item--2 {
    width: 48vw;
    height: 32vw;
    left: auto;
    right: 3vw;
    margin-left: 0;
    top: -2%;
  }
  .mosaico-item--3 {
    width: 38vw;
    height: 46vw;
    right: auto;
    left: 6vw;
    top: auto;
    bottom: -6%;
  }
  .mosaico-item--4 {
    width: 40vw;
    height: 26vw;
    left: auto;
    right: 2vw;
    bottom: -4%;
  }
  .hero-velo {
    background: linear-gradient(
      to bottom,
      rgba(5, 5, 5, 0.55) 0%,
      rgba(5, 5, 5, 0.3) 30%,
      rgba(5, 5, 5, 0.4) 70%,
      var(--negro) 100%
    );
  }
  .hero-texto-fondo {
    inset: -14px -18px;
    border-radius: 22px;
  }
}

/* Kicker editorial: reemplaza el típico chip-pill-con-punto-pulsante de las
   landings genéricas por una línea de texto entre dos hairlines. */
.kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 30px;
  color: var(--gris);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kicker-linea {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--borde-fuerte));
}
.kicker-linea:last-child {
  background: linear-gradient(270deg, transparent, var(--borde-fuerte));
}
@media (max-width: 560px) {
  .kicker-linea {
    display: none;
  }
}

.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0 auto;
  max-width: 780px;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--gris);
}
.hero .lead {
  max-width: 560px;
  margin: 22px auto 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--gris);
}
.hero .acciones {
  margin-top: 38px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 12px 0 30px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 160ms var(--ease-out),
    filter 160ms var(--ease-out),
    background-color 160ms var(--ease-out),
    border-color 160ms var(--ease-out);
  white-space: nowrap;
}
.boton:not(:has(.boton-icono)) {
  padding: 0 30px;
}
.boton.primario {
  background: var(--blanco);
  color: var(--negro);
}
.boton.primario:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
}
.boton.primario:active {
  transform: scale(0.97);
}
.boton.secundario {
  background: transparent;
  border-color: var(--borde-fuerte);
  color: var(--blanco);
}
.boton.secundario:hover {
  background: var(--superficie);
  border-color: rgba(255, 255, 255, 0.4);
}
.boton.secundario:active {
  transform: scale(0.97);
}
.boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Ícono anidado en su propia píldora, en vez de una flecha suelta al lado
   del texto — un detalle "hecho a mano" que un botón genérico no tiene. */
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.08);
  transition:
    transform 200ms var(--ease-out),
    background-color 200ms var(--ease-out);
}
.boton.secundario .boton-icono {
  background: var(--superficie-alta);
}
.boton:hover .boton-icono {
  transform: translate(2px, -2px) rotate(6deg);
}


/* ---------- revelado al scroll ---------- */
/* Fade-up con un toque de blur: en cámara lenta se nota que las dos cosas
   que "entran" (nitidez y posición) se resuelven juntas, no dos capas
   pegadas una sobre otra. Es contenido de marketing, así que la duración
   puede ser más generosa que la de una interacción de UI. */
.revelar {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity 750ms var(--ease-out),
    transform 750ms var(--ease-out),
    filter 750ms var(--ease-out);
  will-change: transform, opacity, filter;
}
.revelar.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .revelar {
    filter: none;
  }
}

/* ---------- efecto de lectura al hacer scroll ---------- */
/* Cada palabra arranca al 40% de opacidad y sube a 100% a medida que el
   párrafo cruza el centro de la pantalla — como leer con el dedo. Se aplica
   por JS (separa el texto en <span>), esto solo define los dos estados. */
.lectura .palabra {
  color: var(--blanco);
  opacity: 0.4;
  transition: opacity 260ms ease;
}
.lectura .palabra.activa {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .lectura .palabra {
    opacity: 1;
    transition: none;
  }
}

/* ---------- secciones generales ---------- */
section {
  padding: 64px 0;
  border-top: 1px solid var(--borde);
}
.encabezado-seccion {
  max-width: 560px;
  margin: 0 auto 44px;
  text-align: center;
}
.encabezado-seccion .eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gris-tenue);
  margin-bottom: 12px;
}
.encabezado-seccion h2 {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.encabezado-seccion p {
  margin-top: 12px;
  color: var(--gris);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- qué incluye ---------- */
.grilla-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.feature {
  border: 1px solid var(--borde);
  background: var(--superficie);
  border-radius: var(--radio);
  padding: 26px 22px;
  position: relative;
  overflow: hidden;
  transition:
    border-color 220ms var(--ease-out),
    background-color 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}
/* Filo superior que aparece con el hover en vez de un número de índice
   estilo "slide de presentación" — un detalle discreto, no decorativo. */
.feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: var(--blanco);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease-out);
}
.feature:hover::before {
  transform: scaleX(1);
}
.feature:hover {
  border-color: var(--borde-fuerte);
  background: var(--superficie-alta);
  transform: translateY(-3px);
}
.feature h3 {
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.feature p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gris);
}

/* ---------- cómo trabajamos ---------- */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  counter-reset: paso;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.paso {
  counter-increment: paso;
  padding: 30px 24px;
  border-left: 1px solid var(--borde);
  position: relative;
}
.paso:first-child {
  border-left: none;
}
.paso::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--gris-tenue);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.paso h3 {
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 700;
}
.paso p {
  margin: 0;
  font-size: 13.5px;
  color: var(--gris);
  line-height: 1.6;
}

/* ---------- casos reales ---------- */
.lista-casos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.caso-real {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  border: 1px solid var(--borde);
  background: var(--superficie);
  border-radius: var(--radio);
  padding: 28px 30px;
  transition: border-color 220ms var(--ease-out), background-color 220ms var(--ease-out);
}
.caso-real:hover {
  border-color: var(--borde-fuerte);
}
.caso-real .rubro-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris-tenue);
  margin-bottom: 10px;
}
.caso-real .texto h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
}
.caso-real .texto p {
  margin: 0;
  font-size: 13.5px;
  color: var(--gris);
  max-width: 46ch;
}
.enlaces-caso {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.enlace-alterno {
  font-size: 12px;
  color: var(--gris-tenue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.enlace-alterno:hover {
  color: var(--gris);
  border-color: var(--borde-fuerte);
}
.caso-proximo {
  background: transparent;
  border-style: dashed;
  opacity: 0.75;
}
.caso-proximo:hover {
  border-color: var(--borde);
}

/* ---------- galería 3D (tira que se mueve al costado con el scroll) ---------- */
.galeria-3d {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 40px;
  overflow: hidden;
  padding: 18px 0 28px;
  perspective: 1800px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.galeria-3d-pista {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  padding: 30px 10vw 30px 100vw; /* arranca fuera de pantalla, a la derecha */
  will-change: transform;
}
.galeria-3d-item {
  flex: 0 0 auto;
  margin: 0;
  width: 240px;
  height: 300px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 28px 55px -22px rgba(0, 0, 0, 0.8);
  transform: perspective(1200px) rotateY(16deg) rotate(-2.5deg);
  transform-style: preserve-3d;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
/* Cascada diagonal: alterna alto/bajo y el ángulo se invierte cada tres
   piezas para que la tira no se sienta una fila prolija sino un desfile en
   perspectiva. */
.galeria-3d-item:nth-child(2n) {
  transform: perspective(1200px) rotateY(16deg) rotate(-2.5deg) translateY(34px);
}
.galeria-3d-item:nth-child(3n) {
  height: 260px;
  transform: perspective(1200px) rotateY(-14deg) rotate(2deg) translateY(-16px);
}
.galeria-3d-item:nth-child(3n + 1) {
  height: 320px;
}
.galeria-3d-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.galeria-3d-item:hover {
  transform: perspective(1200px) rotateY(0deg) rotate(0deg) scale(1.05) translateY(0);
  box-shadow: 0 32px 60px -18px rgba(0, 0, 0, 0.9);
  z-index: 2;
}
@media (hover: none) {
  .galeria-3d-item:hover {
    transform: none;
  }
}
@media (max-width: 640px) {
  .galeria-3d-item {
    width: 170px;
    height: 220px;
  }
  .galeria-3d-item:nth-child(3n) {
    height: 190px;
  }
  .galeria-3d-item:nth-child(3n + 1) {
    height: 235px;
  }
  .galeria-3d-pista {
    gap: 14px;
    padding: 20px 8vw 20px 100vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .galeria-3d-pista {
    transform: none !important;
  }
}

/* ---------- confiaron en nosotros ---------- */
.grilla-confianza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.tarjeta-confianza {
  display: block;
  position: relative;
  border: 1px solid var(--borde);
  background: var(--superficie);
  border-radius: var(--radio);
  padding: 26px 22px 22px;
  text-decoration: none;
  color: var(--blanco);
  transition:
    border-color 220ms var(--ease-out),
    background-color 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}
a.tarjeta-confianza:hover {
  border-color: var(--borde-fuerte);
  background: var(--superficie-alta);
  transform: translateY(-3px);
}
.tarjeta-confianza.sin-enlace {
  opacity: 0.88;
}
.tc-comillas {
  position: absolute;
  top: 8px;
  left: 20px;
  font-size: 52px;
  line-height: 1;
  font-weight: 800;
  color: var(--borde-fuerte);
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
}
.tc-encabezado {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tc-encabezado h3 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Avatar circular: los archivos en assets/clientes/ ya vienen cuadrados
   (lienzo transparente con el logo centrado y aire alrededor), así que
   object-fit: cover llena el círculo entero sin recortar ni estirar nada
   — el "recorte" ya lo resolvió el padding del propio archivo. */
.tc-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--borde-fuerte);
  background: var(--negro-2);
}
.tc-iniciales {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--gris);
}
.tc-avatar img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-ig {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--borde-fuerte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gris);
  flex-shrink: 0;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.tc-ig svg {
  width: 13px;
  height: 13px;
}
a.tarjeta-confianza:hover .tc-ig {
  color: var(--blanco);
  border-color: var(--blanco);
}
.tarjeta-confianza p {
  margin: 6px 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gris);
}
.tc-cita {
  color: var(--gris) !important;
}
.tc-rubro {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gris-tenue);
}

/* ---------- preguntas frecuentes ---------- */
.lista-faq {
  max-width: 720px;
  margin: 0 auto;
  border-top: 1px solid var(--borde);
}
.faq-item {
  border-bottom: 1px solid var(--borde);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color 180ms var(--ease-out);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: var(--gris);
}
.faq-icono {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--borde-fuerte);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
  color: var(--gris);
  transition: transform 260ms var(--ease-out);
}
.faq-item[open] .faq-icono {
  transform: rotate(45deg);
}
.faq-item p {
  margin: 0;
  padding: 0 34px 22px 4px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--gris);
}
/* Apertura/cierre suave del contenido en navegadores que soportan
   @starting-style; en los que no, el <details> nativo igual funciona. */
.faq-item[open] p {
  animation: faqEntra 320ms var(--ease-out);
}
@keyframes faqEntra {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- cómo es la inversión ---------- */
.grilla-inversion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
}
.tarjeta-inversion {
  border: 1px solid var(--borde);
  background: var(--superficie);
  border-radius: var(--radio);
  padding: 28px 26px;
}
.ti-numero {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--gris-tenue);
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.tarjeta-inversion h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
}
.tarjeta-inversion p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--gris);
}
.banda-prueba {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 820px;
  margin: 16px auto 0;
  padding: 20px 24px;
  border-radius: var(--radio);
  border: 1px dashed var(--borde-fuerte);
  background: rgba(255, 255, 255, 0.02);
}
.bp-icono {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}
.banda-prueba p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gris);
}
.banda-prueba strong {
  color: var(--blanco);
}
@media (max-width: 560px) {
  .banda-prueba {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------- spotlight de producto: FBarberías ---------- */
#fbarberias {
  padding: 40px 0 84px;
  border-top: none;
}
.spotlight-fbarberias {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 52px;
  padding: 56px;
  border-radius: calc(var(--radio) * 1.5);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-alta);
  box-shadow: var(--sombra);
}
.spotlight-fbarberias::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 160%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
  pointer-events: none;
}
.spotlight-badge {
  display: inline-flex;
  align-items: center;
  background: var(--blanco);
  color: var(--negro);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 22px;
}
.spotlight-texto {
  position: relative;
  z-index: 1;
}
.spotlight-texto h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.16;
  margin: 0 0 16px;
  text-wrap: balance;
}
.spotlight-texto p.lectura {
  color: var(--gris);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 26px;
  max-width: 480px;
}
.spotlight-lista {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.spotlight-lista li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--blanco);
  line-height: 1.5;
}
.spotlight-lista li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--gris-tenue);
}
.spotlight-acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}
.spotlight-nota {
  font-size: 12.5px;
  color: var(--gris-tenue);
}
.spotlight-visual {
  position: relative;
  height: 420px;
}
.sv-img {
  position: absolute;
  width: 80%;
  border-radius: 20px;
  border: 1px solid var(--borde-fuerte);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.7);
  object-fit: cover;
}
.sv-img--atras {
  right: 0;
  top: 24px;
  transform: rotate(5deg);
  opacity: 0.82;
  z-index: 1;
}
.sv-img--adelante {
  left: 0;
  bottom: 24px;
  transform: rotate(-4deg);
  z-index: 2;
}
@media (max-width: 860px) {
  .spotlight-fbarberias {
    grid-template-columns: 1fr;
    padding: 36px 26px;
    gap: 36px;
  }
  .spotlight-texto p.lectura {
    max-width: none;
  }
  .spotlight-visual {
    height: 300px;
  }
}
@media (max-width: 480px) {
  .spotlight-fbarberias {
    padding: 30px 20px;
  }
}

/* ---------- formulario ---------- */
#contacto {
  scroll-margin-top: 90px;
}
.panel-formulario {
  border: 1px solid var(--borde);
  background: linear-gradient(180deg, var(--superficie), rgba(255, 255, 255, 0.015));
  border-radius: 24px;
  padding: 8px;
  box-shadow: var(--sombra);
}
.panel-formulario-interno {
  background: var(--negro-2);
  border: 1px solid var(--borde);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 30px);
}

.grupo-campo {
  margin-bottom: 13px;
}
.grupo-campo label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gris);
  margin-bottom: 5px;
}
.grupo-campo .ayuda {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--gris-tenue);
}
.fila-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .fila-campos {
    grid-template-columns: 1fr;
  }
}

input[type='text'],
input[type='tel'],
input[type='email'],
select,
textarea {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.03);
  color: var(--blanco);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 450;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
textarea {
  height: auto;
  min-height: 68px;
  padding: 10px 14px;
  resize: vertical;
  line-height: 1.5;
}
input::placeholder,
textarea::placeholder {
  color: var(--gris-tenue);
}
input:hover,
select:hover,
textarea:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--borde-fuerte);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%),
    linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) center,
    calc(100% - 17px) center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select option {
  background: var(--negro-2);
  color: var(--blanco);
}

.chips-rubro {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chip-opcion {
  position: relative;
}
.chip-opcion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-opcion span {
  display: inline-flex;
  align-items: center;
  height: 33px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.02);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gris);
  cursor: pointer;
  transition:
    background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out);
  user-select: none;
}
.chip-opcion input:checked + span {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--negro);
}
.chip-opcion:hover span {
  border-color: var(--borde-fuerte);
  color: var(--blanco);
}

/* Honeypot: invisible para una persona, alcanzable para un bot que
   completa todo a ciegas. */
.trampa {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.pie-formulario {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}
.pie-formulario .nota {
  font-size: 11.5px;
  color: var(--gris-tenue);
  max-width: 34ch;
}
.enlace-mail {
  font-size: 13px;
  font-weight: 600;
  color: var(--gris);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--borde-fuerte);
}
.enlace-mail:hover {
  color: var(--blanco);
}

.error-campo {
  margin-top: 6px;
  font-size: 12px;
  color: #f0a6a6;
  display: none;
}
.grupo-campo.con-error input,
.grupo-campo.con-error select,
.grupo-campo.con-error textarea {
  border-color: rgba(240, 102, 108, 0.55);
}
.grupo-campo.con-error .error-campo {
  display: block;
}

/* estado "un segundo" del botón de enviar */
.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: var(--negro);
  animation: girar 0.7s linear infinite;
  display: none;
}
.boton.cargando .spinner {
  display: inline-block;
}
.boton.cargando .texto-boton {
  display: none;
}
@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* pantalla de éxito */
.exito {
  display: none;
  text-align: center;
  padding: 30px 10px 10px;
}
.exito.visible {
  display: block;
  animation: aparecer 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.exito .marca-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
}
.exito h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
}
.exito p {
  margin: 0 auto;
  max-width: 40ch;
  font-size: 14px;
  color: var(--gris);
  line-height: 1.6;
}
.exito .acciones-exito {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.form-visible {
  display: block;
}
.form-oculto {
  display: none;
}

/* ---------- footer ---------- */
footer.pie {
  border-top: 1px solid var(--borde);
  padding: 34px 0;
}
.pie-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.pie-fila .marca {
  opacity: 0.85;
}
.pie-datos {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--gris-tenue);
}
.pie-datos a {
  color: var(--gris);
  text-decoration: none;
}
.pie-datos a:hover {
  color: var(--blanco);
}

/* ---------- footer grande (sitio principal) ---------- */
.pie-grande {
  padding: 56px 0 28px;
}
.pie-columnas {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--borde);
}
.pie-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pie-col a {
  font-size: 13px;
  color: var(--gris);
  text-decoration: none;
  transition: color 180ms var(--ease-out);
  width: fit-content;
}
.pie-col a:hover {
  color: var(--blanco);
}
.pie-col-titulo {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris-tenue);
  margin-bottom: 4px;
}
.pie-col-marca p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gris-tenue);
  margin: 2px 0 4px;
  max-width: 26ch;
}
.pie-contacto-iconos {
  display: flex;
  gap: 8px;
}
.pie-contacto-iconos a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris);
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.pie-contacto-iconos a:hover {
  color: var(--blanco);
  border-color: var(--borde-fuerte);
}
.pie-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  padding-top: 20px;
  font-size: 11.5px;
  color: var(--gris-tenue);
}
.pie-legal strong {
  color: var(--gris);
  font-weight: 700;
}
@media (max-width: 760px) {
  .pie-columnas {
    grid-template-columns: 1fr 1fr;
    row-gap: 30px;
  }
  .pie-col-marca {
    grid-column: 1 / -1;
  }
  .pie-legal {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  section {
    padding: 48px 0;
  }
}

/* ---------- botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.6);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.whatsapp-flotante svg {
  width: 26px;
  height: 26px;
}
.whatsapp-flotante:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.7);
}
.whatsapp-flotante:active {
  transform: scale(0.95);
}
/* ---------- aviso de cookies ---------- */
.aviso-cookies {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--borde-fuerte);
  background: rgba(12, 12, 12, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.7);
  animation: entrarAviso 400ms var(--ease-out);
}
.aviso-cookies[hidden] {
  display: none;
}
.aviso-cookies p {
  flex: 1;
  min-width: 200px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gris);
}
.aviso-cookies a {
  color: var(--blanco);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aviso-cookies .boton {
  height: 38px;
  padding: 0 18px;
  font-size: 12.5px;
  flex-shrink: 0;
}
@keyframes entrarAviso {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 560px) {
  .aviso-cookies {
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .whatsapp-flotante {
    width: 50px;
    height: 50px;
    right: 16px;
    bottom: 16px;
  }
  .whatsapp-flotante svg {
    width: 23px;
    height: 23px;
  }
}