/* ============================================================
   TBEO Marketing + Publicidad — Sistema de diseño
   Identidad: "Corporativo Premium Claro"
   Tipografía: Poppins (títulos) + Inter (texto)
   Compartido por: index, servicios, planes, nosotros, contacto
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- 1. Variables ---------- */
:root {
  /* Paleta oficial TBEO */
  --tbeo-amarillo: #FFC900;
  --tbeo-naranja: #F5A623;
  --tbeo-morado: #6C2BD9;
  --tbeo-morado-claro: #A855F7;
  --tbeo-petroleo: #146C8C;
  --tbeo-tinta: #17102B;
  --tbeo-fondo-oscuro: #0B0614;
  --tbeo-crema: #FAF8FF;
  --degradado-firma: linear-gradient(135deg, #FFC900 0%, #F5A623 35%, #A855F7 70%, #6C2BD9 100%);

  /* Derivados de sistema */
  --texto: #241B3D;
  --texto-suave: #55496E;
  --texto-tenue: #7A6F93;
  --blanco: #FFFFFF;
  --borde: #E8E2F5;
  --morado-tenue: #F3EDFC;
  --amarillo-tenue: #FFF6D6;
  --verde-whatsapp: #25D366;
  --verde-whatsapp-oscuro: #1DA851;

  /* Tipografía */
  --fuente-titulos: 'Poppins', 'Segoe UI', sans-serif;
  --fuente-texto: 'Inter', 'Segoe UI', sans-serif;

  /* Sombras moradas suaves */
  --sombra-suave: 0 6px 24px rgba(108, 43, 217, 0.08);
  --sombra-media: 0 12px 40px rgba(108, 43, 217, 0.14);
  --sombra-alta: 0 24px 60px rgba(23, 16, 43, 0.18);

  /* Métricas */
  --radio-sm: 10px;
  --radio: 16px;
  --radio-lg: 24px;
  --ancho-max: 1200px;
  --alto-header: 76px;
  --transicion: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 2. Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-header) + 12px); }

body {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--tbeo-crema);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--tbeo-morado); text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
strong { color: var(--tbeo-tinta); }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  color: var(--tbeo-tinta);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.35rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: 24px;
}

.icono { width: 24px; height: 24px; flex-shrink: 0; }
.icono-sm { width: 18px; height: 18px; flex-shrink: 0; }

/* Utilidades de espaciado */
.mt-40 { margin-top: 40px; }
.mb-24 { margin-bottom: 24px; }

/* Texto con degradado firma */
.texto-degradado {
  background: var(--degradado-firma);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Kicker / etiqueta superior de sección */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-titulos);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tbeo-morado);
  background: var(--morado-tenue);
  border: 1px solid #E3D5F9;
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 16px;
}
.kicker::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--degradado-firma);
}

/* ---------- 3. Botones y CTA ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion), color var(--transicion), border-color var(--transicion);
  text-align: center;
}
.btn .icono, .btn .icono-sm { transition: transform var(--transicion); }
.btn:hover .icono, .btn:hover .icono-sm { transform: translateX(3px); }

.btn-primario {
  background: linear-gradient(135deg, var(--tbeo-morado) 0%, var(--tbeo-morado-claro) 100%);
  color: var(--blanco);
  box-shadow: 0 8px 24px rgba(108, 43, 217, 0.32);
}
.btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(108, 43, 217, 0.42);
}

.btn-secundario {
  background: var(--blanco);
  color: var(--tbeo-morado);
  border-color: var(--tbeo-morado);
}
.btn-secundario:hover {
  background: var(--morado-tenue);
  transform: translateY(-2px);
  box-shadow: var(--sombra-suave);
}

.btn-whatsapp {
  background: var(--verde-whatsapp);
  color: var(--blanco);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.32);
}
.btn-whatsapp:hover {
  background: var(--verde-whatsapp-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.4);
}

.btn-amarillo {
  background: var(--tbeo-amarillo);
  color: var(--tbeo-tinta);
  box-shadow: 0 8px 24px rgba(255, 201, 0, 0.35);
}
.btn-amarillo:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255, 201, 0, 0.45); }

.btn-grande { padding: 17px 36px; font-size: 1.06rem; }
.btn-bloque { width: 100%; }

/* Enlace con flecha (CTA terciario) */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--tbeo-morado);
}
.enlace-flecha .icono-sm { transition: transform var(--transicion); }
.enlace-flecha:hover .icono-sm { transform: translateX(4px); }

/* ---------- 4. Header sticky ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
  transition: box-shadow var(--transicion);
}
.header.con-sombra { box-shadow: var(--sombra-suave); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--alto-header);
}

.logo { display: inline-flex; align-items: center; }
.logo img { height: 60px; width: auto; animation: tambaleo 4.5s ease-in-out infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .logo img { animation: none; } }

.nav { display: flex; align-items: center; gap: 28px; }
.nav-lista { display: flex; align-items: center; gap: 6px; }

.nav-enlace {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--texto);
  padding: 8px 14px;
  border-radius: 999px;
  transition: color var(--transicion), background var(--transicion);
}
.nav-enlace:hover { color: var(--tbeo-morado); background: var(--morado-tenue); }
.nav-enlace.activo { color: var(--tbeo-morado); font-weight: 600; background: var(--morado-tenue); }

.nav-cta { padding: 11px 22px; font-size: 0.92rem; white-space: nowrap; }

/* Hamburguesa */
.hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 11px;
  background: var(--morado-tenue);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}
.hamburguesa span {
  display: block;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--tbeo-morado);
  transition: transform var(--transicion), opacity var(--transicion);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- 5. Secciones ---------- */
.seccion { padding: 84px 0; }
.seccion-compacta { padding: 64px 0; }
.seccion-alterna { background: var(--blanco); }

.seccion-cabecera { max-width: 760px; margin-bottom: 48px; }
.seccion-cabecera.centrada { margin-inline: auto; text-align: center; }
.seccion-cabecera p { margin-top: 14px; color: var(--texto-suave); font-size: 1.06rem; }

/* ---------- 6. Hero (2 columnas) ---------- */
.hero {
  position: relative;
  padding: 72px 0 84px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -220px; right: -180px;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, rgba(255, 201, 0, 0.10) 45%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -260px; left: -200px;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 0, 0.12) 0%, rgba(108, 43, 217, 0.08) 50%, transparent 70%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.hero-copy .kicker { margin-bottom: 20px; }
.hero-copy h1 { margin-bottom: 20px; }
.hero-copy .hero-bajada {
  font-size: 1.13rem;
  color: var(--texto-suave);
  max-width: 540px;
  margin-bottom: 30px;
}
.hero-copy .hero-bajada strong {
  color: var(--tbeo-amarillo);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

.hero-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }

.hero-garantias { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero-garantias li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto-suave);
}
.hero-garantias .icono-sm { color: var(--tbeo-morado); }

/* Visual del hero: foto del líder a la DERECHA con tratamiento de marca */
.hero-visual { position: relative; display: flex; justify-content: center; }

.hero-marco {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: var(--radio-lg);
  padding: 8px;
  background: var(--degradado-firma);
  box-shadow: var(--sombra-alta);
}
.hero-marco::before {
  content: "";
  position: absolute;
  inset: -34px;
  border-radius: 40px;
  background: var(--degradado-firma);
  opacity: 0.18;
  filter: blur(46px);
  z-index: -1;
}
.hero-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radio-lg) - 6px);
  background: var(--blanco);
}

/* Tarjetas flotantes sobre la foto */
.tarjeta-flotante {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
  padding: 12px 18px;
  z-index: 2;
}
.tarjeta-flotante .icono { color: var(--tbeo-morado); }
.tarjeta-flotante-dato {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--tbeo-tinta);
}
.tarjeta-flotante-texto { font-size: 0.78rem; color: var(--texto-tenue); line-height: 1.3; }
.tarjeta-flotante.arriba { top: 26px; left: -30px; }
.tarjeta-flotante.abajo { bottom: 30px; right: -26px; }

/* ---------- 7. Barra de cifras ---------- */
.barra-cifras {
  background: var(--tbeo-tinta);
  color: var(--blanco);
  padding: 40px 0;
}
.barra-cifras-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.cifra { text-align: center; }
.cifra-numero {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  background: var(--degradado-firma);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cifra-texto { font-size: 0.88rem; color: #CBC2E4; margin-top: 6px; }

/* ---------- 8. Cards genéricas ---------- */
.card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sombra-media); border-color: #D9CCF3; }

/* Card con borde degradado sutil */
.card-borde {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--blanco), var(--blanco)) padding-box,
    linear-gradient(135deg, rgba(255, 201, 0, 0.55), rgba(168, 85, 247, 0.55), rgba(108, 43, 217, 0.55)) border-box;
}

.card-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--morado-tenue);
  color: var(--tbeo-morado);
  margin-bottom: 18px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--texto-suave); font-size: 0.96rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Lista con checks */
.lista-check { display: grid; gap: 10px; }
.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--texto-suave);
}
.lista-check .icono-sm { color: var(--tbeo-morado); margin-top: 3px; }

/* Chip de precio */
.chip-precio {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--amarillo-tenue);
  border: 1px solid #F2DE9B;
  color: var(--tbeo-tinta);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 999px;
  padding: 6px 16px;
}
.chip-precio small { font-weight: 500; font-size: 0.75rem; color: var(--texto-tenue); }

/* ---------- 9. Filas de servicio (imagen alternada) ---------- */
.servicio-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 44px 0;
}
.servicio-fila + .servicio-fila { border-top: 1px solid var(--borde); }
.servicio-fila.invertida .servicio-media { order: 2; }
.servicio-fila.invertida .servicio-info { order: 1; }

.servicio-media { position: relative; }
.servicio-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-media);
}
.servicio-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radio-lg);
  background: linear-gradient(135deg, rgba(108, 43, 217, 0.12), transparent 55%);
  pointer-events: none;
}

.servicio-numero {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  color: var(--tbeo-morado-claro);
  margin-bottom: 8px;
}
.servicio-info h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 12px; }
.servicio-info > p { color: var(--texto-suave); margin-bottom: 18px; }
.servicio-info .lista-check { margin-bottom: 20px; }
.servicio-precios { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.servicio-acciones { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }

/* ---------- 10. Planes ---------- */
.planes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 30px 26px;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-media); }

.plan-card.destacado {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--blanco), var(--blanco)) padding-box,
    var(--degradado-firma) border-box;
  box-shadow: var(--sombra-media);
}

.plan-insignia {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--degradado-firma);
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(108, 43, 217, 0.35);
}

.plan-nivel {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tbeo-morado-claro);
  margin-bottom: 6px;
}
.plan-nombre { font-size: 1.18rem; margin-bottom: 14px; }
.plan-precio {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--tbeo-tinta);
  line-height: 1.1;
}
.plan-precio small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--texto-tenue); margin-top: 2px; }
.plan-precio-nota { font-size: 0.78rem; color: var(--texto-tenue); margin-top: 4px; }

.plan-card .lista-check { margin: 20px 0 26px; flex-grow: 1; }
.plan-card .lista-check li { font-size: 0.9rem; }
.plan-card .btn { margin-top: auto; }

.nota-precios {
  text-align: center;
  font-size: 0.88rem;
  color: var(--texto-tenue);
  margin-top: 26px;
}

/* Pestañas (planes.html) */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}
.pestana {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--texto-suave);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 11px 26px;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.pestana:hover { color: var(--tbeo-morado); border-color: var(--tbeo-morado-claro); }
.pestana.activa {
  background: linear-gradient(135deg, var(--tbeo-morado) 0%, var(--tbeo-morado-claro) 100%);
  color: var(--blanco);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(108, 43, 217, 0.3);
}
.panel-planes[hidden] { display: none; }

/* Tabla de precios (diseño gráfico / servicios) */
.tabla-envoltura { overflow-x: auto; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--blanco); box-shadow: var(--sombra-suave); }
.tabla-precios { width: 100%; border-collapse: collapse; min-width: 520px; }
.tabla-precios th, .tabla-precios td { text-align: left; padding: 15px 22px; font-size: 0.95rem; }
.tabla-precios th {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--tbeo-tinta);
}
.tabla-precios tbody tr { border-top: 1px solid var(--borde); }
.tabla-precios tbody tr:hover { background: var(--morado-tenue); }
.tabla-precios td:last-child { font-family: var(--fuente-titulos); font-weight: 700; color: var(--tbeo-morado); white-space: nowrap; }

/* ---------- 11. Diferenciales ---------- */
.diferencial-card { position: relative; overflow: hidden; }
.diferencial-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--degradado-firma);
}
.diferencial-cita {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 3px solid var(--tbeo-amarillo);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--texto-tenue);
}

/* Franja de protocolos */
.protocolos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  background: var(--tbeo-tinta);
  border-radius: var(--radio-lg);
  padding: 30px;
}
.protocolo { display: flex; align-items: flex-start; gap: 12px; }
.protocolo .icono { color: var(--tbeo-amarillo); }
.protocolo p { font-size: 0.88rem; color: #CBC2E4; line-height: 1.45; }
.protocolo strong { color: var(--blanco); display: block; font-size: 0.94rem; margin-bottom: 2px; }

/* ---------- 12. Metodología (4 pasos) ---------- */
.pasos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: paso;
}
.paso {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px 24px 26px;
  box-shadow: var(--sombra-suave);
}
.paso-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--degradado-firma);
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(108, 43, 217, 0.28);
}
.paso h3 { font-size: 1.12rem; margin-bottom: 8px; }
.paso p { font-size: 0.92rem; color: var(--texto-suave); }

/* ---------- 13. Biografía ---------- */
.bio-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.bio-media { position: relative; }
.bio-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta);
  filter: grayscale(1) contrast(1.05);
}
.bio-media::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border-radius: var(--radio-lg);
  background: var(--degradado-firma);
  opacity: 0.22;
  z-index: -1;
}
.bio-copy h2 { margin-bottom: 16px; }
.bio-copy p { color: var(--texto-suave); margin-bottom: 14px; }
.bio-cita {
  margin: 22px 0 26px;
  padding: 18px 22px;
  background: var(--morado-tenue);
  border-left: 4px solid var(--tbeo-morado);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--tbeo-tinta);
}
.bio-firma { font-family: var(--fuente-titulos); font-weight: 700; color: var(--tbeo-tinta); }
.bio-firma small { display: block; font-family: var(--fuente-texto); font-weight: 500; color: var(--texto-tenue); }

/* ---------- 14. FAQ ---------- */
.faq-lista { max-width: 820px; margin-inline: auto; display: grid; gap: 14px; }
.faq-item {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
  transition: border-color var(--transicion);
}
.faq-item[open] { border-color: var(--tbeo-morado-claro); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--tbeo-tinta);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icono {
  color: var(--tbeo-morado);
  transition: transform var(--transicion);
}
.faq-item[open] summary .icono { transform: rotate(45deg); }
.faq-respuesta { padding: 0 24px 22px; color: var(--texto-suave); font-size: 0.97rem; }

/* ---------- 15. CTA de cierre ---------- */
.cta-final {
  position: relative;
  overflow: hidden;
  background: var(--tbeo-tinta);
  border-radius: var(--radio-lg);
  padding: 64px 48px;
  text-align: center;
  color: var(--blanco);
}
.cta-final::before {
  content: "";
  position: absolute;
  top: -160px; left: 50%;
  transform: translateX(-50%);
  width: 720px; height: 420px;
  background: radial-gradient(ellipse, rgba(168, 85, 247, 0.35), rgba(255, 201, 0, 0.12) 55%, transparent 75%);
  pointer-events: none;
}
.cta-final > * { position: relative; z-index: 1; }
.cta-final h2 { color: var(--blanco); margin-bottom: 14px; }
.cta-final p { color: #CBC2E4; max-width: 620px; margin: 0 auto 30px; font-size: 1.06rem; }
.cta-final-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* Franja CTA intermedia (tras bloques de valor) */
.cta-franja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, var(--morado-tenue), #FDF6E3);
  border: 1px solid #E3D5F9;
  border-radius: var(--radio-lg);
  padding: 28px 34px;
  margin-top: 48px;
}
.cta-franja p {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--tbeo-tinta);
  max-width: 560px;
}

/* ---------- 16. Footer ---------- */
.footer {
  background: var(--tbeo-fondo-oscuro);
  color: #B9AFD6;
  padding: 64px 0 0;
  font-size: 0.93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 48px;
}
.footer-marca .footer-logo {
  display: inline-flex;
  background: var(--blanco);
  border-radius: 12px;
  padding: 8px 14px;
  margin-bottom: 18px;
}
.footer-marca .footer-logo img { height: 40px; width: auto; }
.footer-marca p { max-width: 320px; line-height: 1.6; }

.footer h4 {
  color: var(--blanco);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-columna ul { display: grid; gap: 10px; }
.footer-columna a { color: #B9AFD6; transition: color var(--transicion); }
.footer-columna a:hover { color: var(--tbeo-amarillo); }

.footer-contacto li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contacto .icono-sm { color: var(--tbeo-amarillo); margin-top: 3px; }
.footer-contacto a { color: #B9AFD6; }
.footer-contacto a:hover { color: var(--tbeo-amarillo); }

.footer-redes { display: flex; gap: 12px; margin-top: 20px; }
.footer-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #D9D2EC;
  transition: background var(--transicion), color var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.footer-redes a:hover {
  background: var(--degradado-firma);
  border-color: transparent;
  color: var(--blanco);
  transform: translateY(-3px);
}

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 0;
  text-align: center;
  font-size: 0.85rem;
  color: #8A7FA8;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 18px;
}
.footer-resena {
  color: var(--tbeo-amarillo);
  font-weight: 600;
  transition: color var(--transicion);
}
.footer-resena:hover { color: var(--blanco); }

/* ---------- 17. Botón flotante WhatsApp ---------- */
.whatsapp-flotante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--verde-whatsapp);
  color: var(--blanco);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.whatsapp-flotante:hover {
  transform: translateY(-4px) scale(1.05);
  background: var(--verde-whatsapp-oscuro);
  box-shadow: 0 16px 38px rgba(37, 211, 102, 0.5);
}
.whatsapp-flotante svg { width: 30px; height: 30px; }

/* ---------- 18. Hero interno de subpáginas ---------- */
.hero-pagina {
  position: relative;
  overflow: hidden;
  background: var(--tbeo-tinta);
  color: var(--blanco);
  padding: 72px 0;
  text-align: center;
}
.hero-pagina::before {
  content: "";
  position: absolute;
  top: -180px; left: 50%;
  transform: translateX(-50%);
  width: 860px; height: 480px;
  background: radial-gradient(ellipse, rgba(168, 85, 247, 0.32), rgba(255, 201, 0, 0.1) 55%, transparent 75%);
  pointer-events: none;
}
.hero-pagina > .contenedor { position: relative; z-index: 1; }
.hero-pagina h1 { color: var(--blanco); font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 14px; }
.hero-pagina p { color: #CBC2E4; max-width: 680px; margin-inline: auto; font-size: 1.08rem; }
.hero-pagina .kicker { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: var(--tbeo-amarillo); }

/* ---------- 19. Formulario (contacto) ---------- */
.formulario {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 36px;
  box-shadow: var(--sombra-media);
  display: grid;
  gap: 20px;
}
.campo { display: grid; gap: 8px; }
.campo label {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tbeo-tinta);
}
.campo input,
.campo select,
.campo textarea {
  font-family: var(--fuente-texto);
  font-size: 0.98rem;
  color: var(--texto);
  background: var(--tbeo-crema);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 13px 16px;
  width: 100%;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--tbeo-morado);
  box-shadow: 0 0 0 4px rgba(108, 43, 217, 0.12);
}
.formulario-nota { font-size: 0.82rem; color: var(--texto-tenue); text-align: center; }

/* ---------- 20. Animaciones de entrada ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 21. Responsive ---------- */
@media (max-width: 1024px) {
  .planes-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pasos-grid { grid-template-columns: repeat(2, 1fr); }
  .protocolos { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { gap: 40px; }
  .tarjeta-flotante.arriba { left: -10px; }
  .tarjeta-flotante.abajo { right: -8px; }
}

@media (max-width: 860px) {
  /* Navegación móvil */
  .hamburguesa { display: flex; }
  .nav {
    position: absolute;
    top: var(--alto-header);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra-media);
    padding: 18px 24px 24px;
    display: none;
  }
  .nav.abierto { display: flex; }
  .nav-lista { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-enlace { display: block; padding: 12px 16px; font-size: 1.02rem; }
  .nav-cta { width: 100%; margin-top: 8px; }

  .hero { padding: 48px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-visual { order: 2; }
  .hero-copy { order: 1; }
  .hero-marco { width: min(380px, 88%); }

  .seccion { padding: 64px 0; }
  .seccion-compacta { padding: 52px 0; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .barra-cifras-grid { grid-template-columns: repeat(2, 1fr); }

  .servicio-fila { grid-template-columns: 1fr; gap: 26px; padding: 36px 0; }
  .servicio-fila.invertida .servicio-media { order: 0; }
  .servicio-fila.invertida .servicio-info { order: 1; }

  .bio-grid { grid-template-columns: 1fr; gap: 36px; }
  .bio-media { max-width: 420px; margin-inline: auto; }

  .cta-franja { flex-direction: column; align-items: flex-start; padding: 26px; }
  .cta-final { padding: 52px 28px; }
}

@media (max-width: 560px) {
  .contenedor { padding-inline: 18px; }
  .logo img { height: 48px; }

  .planes-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .pasos-grid { grid-template-columns: 1fr; }
  .protocolos { grid-template-columns: 1fr; padding: 24px; }
  .barra-cifras-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }

  .hero-acciones .btn { width: 100%; }
  .cta-final-acciones .btn { width: 100%; }

  .tarjeta-flotante { padding: 10px 14px; }
  .tarjeta-flotante-dato { font-size: 1.05rem; }
  .tarjeta-flotante.arriba { top: 14px; left: -6px; }
  .tarjeta-flotante.abajo { bottom: 16px; right: -4px; }

  .formulario { padding: 26px 20px; }
  .whatsapp-flotante { width: 54px; height: 54px; right: 16px; bottom: 16px; }
  .whatsapp-flotante svg { width: 27px; height: 27px; }
}

/* ============================================================
   22. Ampliaciones — páginas Nosotros y Contacto
   (reglas añadidas al final; no modifican las existentes)
   ============================================================ */

/* Chips de dato (biografía del líder) */
.bio-datos { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 22px; }
.chip-dato {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--tbeo-tinta);
  box-shadow: var(--sombra-suave);
}
.chip-dato .icono-sm { color: var(--tbeo-morado); }

/* Galería de equipo y oficina (nosotros.html) */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.galeria-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  margin: 0;
}
.galeria-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--transicion);
}
.galeria-item:hover img { transform: scale(1.045); }
.galeria-pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 36px 18px 14px;
  background: linear-gradient(to top, rgba(23, 16, 43, 0.85), transparent);
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.35;
}

/* Layout de contacto (contacto.html) */
.contacto-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: start;
}
.contacto-lateral { display: grid; gap: 16px; }
.contacto-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 22px 24px;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.contacto-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-media); border-color: #D9CCF3; }
.contacto-card .card-icono { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 0; }
.contacto-card h3 { font-size: 1.02rem; margin-bottom: 4px; }
.contacto-card p { font-size: 0.92rem; color: var(--texto-suave); }
.contacto-dato {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  color: var(--tbeo-morado);
  margin-top: 4px;
  transition: color var(--transicion);
}
a.contacto-dato:hover { color: var(--tbeo-morado-claro); }

.formulario-titulo { font-size: 1.35rem; }
.formulario-intro { color: var(--texto-suave); font-size: 0.96rem; margin-top: 6px; }

/* Responsive de las ampliaciones */
@media (max-width: 1024px) {
  .galeria-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .contacto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .galeria-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   23. Ampliaciones — páginas Servicios y Planes
   (reglas añadidas al final; no modifican las existentes)
   ============================================================ */

/* Anclas rápidas bajo el hero de subpágina (servicios.html) */
.anclas-rapidas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.anclas-rapidas a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--blanco);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 9px 18px;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.anclas-rapidas a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--tbeo-amarillo);
  color: var(--tbeo-amarillo);
  transform: translateY(-2px);
}
.anclas-rapidas .icono-sm { width: 15px; height: 15px; }

/* Galería de servicios en 4 columnas (servicios.html) */
.galeria-grid.cuatro { grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Bloque "¿Cómo elegir tu plan?" en 3 pasos (planes.html) */
.pasos-grid.tres { grid-template-columns: repeat(3, 1fr); }

/* Encabezado interno de cada panel de planes */
.panel-intro {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
  color: var(--texto-suave);
  font-size: 1.02rem;
}
.panel-intro strong { color: var(--tbeo-tinta); }

/* Responsive de las ampliaciones de Servicios y Planes */
@media (max-width: 1024px) {
  .galeria-grid.cuatro { grid-template-columns: repeat(3, 1fr); }
  .pasos-grid.tres { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .galeria-grid.cuatro { grid-template-columns: repeat(2, 1fr); }
  .pasos-grid.tres { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .galeria-grid.cuatro { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .anclas-rapidas a { padding: 8px 14px; font-size: 0.8rem; }
  .galeria-pie { font-size: 0.74rem; padding: 26px 12px 10px; }
}

/* Utilidad de accesibilidad: visible solo para lectores de pantalla */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Video de fondo del hero ===== */
.hero-video-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(95deg, rgba(250, 248, 255, 0.86) 0%, rgba(250, 248, 255, 0.62) 38%, rgba(250, 248, 255, 0.2) 100%),
    linear-gradient(180deg, rgba(250, 248, 255, 0.04) 72%, rgba(250, 248, 255, 0.78) 100%);
}
.hero::before, .hero::after { z-index: 1; }
.hero .hero-grid { position: relative; z-index: 2; }

/* ===== Tambaleo llamativo en botones de WhatsApp ===== */
@keyframes tambaleo{0%,100%{transform:rotate(0)}6%{transform:rotate(-16deg)}12%{transform:rotate(12deg)}18%{transform:rotate(-9deg)}24%{transform:rotate(6deg)}30%{transform:rotate(-3deg)}36%{transform:rotate(0)}}
a[href*="wa.me"] svg{ animation:tambaleo 2.8s ease-in-out infinite; transform-origin:50% 50%; }
@media (prefers-reduced-motion: reduce){ a[href*="wa.me"] svg{ animation:none; } }


/* Legibilidad sobre fondo mas visible */
.hero-copy h1, .hero-copy p, .hero-copy li{ text-shadow:0 1px 14px rgba(250,248,255,.65); }

/* ---------- Preheader (banner promocional NFC/QR) ---------- */
.preheader{
  position:relative; z-index:70;
  background:var(--degradado-firma);
  color:var(--tbeo-tinta);
}
.preheader-inner{
  position:relative;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.6rem 1rem;
  padding:.55rem 2.6rem .55rem 1rem;
  min-height:44px;
}
.preheader-texto{
  display:flex; align-items:center; gap:.5rem;
  margin:0; font-size:.85rem; font-weight:600; line-height:1.3; text-align:center;
}
.preheader-icono{ width:18px; height:18px; flex:none; }
.preheader-cta{
  display:inline-flex; align-items:center; white-space:nowrap;
  background:var(--tbeo-tinta); color:#fff; font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.03em;
  padding:.42rem .95rem; border-radius:999px;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.preheader-cta:hover{ background:#000; transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.25); }
.preheader-cerrar{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; border:0; background:transparent;
  color:var(--tbeo-tinta); cursor:pointer; transition:background .2s ease;
}
.preheader-cerrar svg{ width:16px; height:16px; }
.preheader-cerrar:hover{ background:rgba(23,16,43,.14); }
.preheader--oculto{ display:none; }
@media (max-width:640px){
  .preheader-inner{ padding-right:2.3rem; justify-content:flex-start; text-align:left; }
  .preheader-texto{ font-size:.76rem; text-align:left; }
}

/* ---------- Reseña de Google ---------- */
.resena-google{
  position: relative;
  text-align: center;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 56px 40px;
  box-shadow: var(--sombra-media);
  max-width: 720px;
  margin-inline: auto;
}
.resena-google-icono{
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--amarillo-tenue); margin-bottom: 20px;
}
.resena-google h2{ margin-bottom: 12px; max-width: 26ch; margin-inline: auto; }
.resena-google p{ color: var(--texto-suave); max-width: 52ch; margin: 0 auto 28px; font-size: 1.05rem; }
@media (max-width: 560px){ .resena-google{ padding: 40px 22px; } }

/* ---------- Redes sociales flotantes (columna izquierda) ---------- */
.redes-flotantes{
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 65;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 18px rgba(0,0,0,.18);
}
.redes-flotantes__item{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: #fff;
  transition: width .22s ease, padding .22s ease;
}
.redes-flotantes__item svg{ width: 22px; height: 22px; flex: none; }
.redes-flotantes__item:hover{ width: 60px; }
.redes-flotantes__item--instagram{ background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 75%, #515BD4 100%); }
.redes-flotantes__item--facebook{ background: #1877F2; }
.redes-flotantes__item--whatsapp{ background: #25D366; }
@media (max-width: 720px){
  .redes-flotantes{ display: none; }
}