/*
Theme Name: Impulsa Tu Pyme
Theme URI: https://impulsatupyme.cl
Author: ImpulsaTuPyme
Author URI: https://impulsatupyme.cl
Description: Tema custom para ImpulsaTuPyme - Asesorías web para PYMEs chilenas
Version: 1.0.3
License: GNU General Public License v2 or later
Text Domain: impulsa-tu-pyme
*/

/* @font-face Helvetica inyectado vía PHP en functions.php con URL absoluta */

/* =============================================
   VARIABLES Y RESET
   ============================================= */
:root {
  --color-bg-dark:      #0a0718;
  --color-bg-secondary: #120d2e;
  --color-accent-cyan:  #00e5ff;
  --color-accent-purple:#7c3aed;
  --color-accent-light: #a855f7;
  --color-white:        #ffffff;
  --color-text-muted:   rgba(255,255,255,0.7);
  --color-card-bg:      rgba(255,255,255,0.04);
  --color-card-border:  rgba(255,255,255,0.15);
  --font-main:          'Helvetica', Arial, sans-serif;
  --border-radius:      12px;
  --transition:         0.3s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  background-color: var(--color-bg-dark);
  color: var(--color-white);
  overflow-x: hidden;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* =============================================
   UTILIDADES
   ============================================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-padding { padding: 80px 0; }

.text-cyan   { color: var(--color-accent-cyan) !important; }
.text-purple { color: var(--color-accent-purple) !important; }
.text-white  { color: var(--color-white); }

.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
}

/* Botones — fondo #01d9ff, letras #271f56 */
.btn,
.btn-primary,
.btn-outline,
#hero .btn,
#hero .btn-primary,
#hero .btn-outline,
.hero-buttons .btn,
.hero-buttons .btn-primary,
.hero-buttons .btn-outline {
  background: #01d9ff !important;
  color: #271f56 !important;
  border: 2px solid #01d9ff !important;
  box-shadow: 0 4px 16px rgba(1, 217, 255, 0.35) !important;
}

/* Hover: fondo #271f56, letras #01d9ff */
.btn:hover,
.btn-primary:hover,
.btn-outline:hover,
#hero .btn:hover,
#hero .btn-primary:hover,
#hero .btn-outline:hover,
.hero-buttons .btn:hover,
.hero-buttons .btn-primary:hover,
.hero-buttons .btn-outline:hover {
  background: #271f56 !important;
  color: #01d9ff !important;
  border: 2px solid #01d9ff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(39, 31, 86, 0.5) !important;
}

/* =============================================
   NAVBAR
   ============================================= */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 10px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
}

/* Fondo aparece al hacer scroll */
#site-header.scrolled {
  background: rgba(8, 5, 21, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255,255,255,0.06);
  padding: 6px 0;
}

#site-header .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(40px, 6vw, 120px);
}

/* Logo navbar */
.site-logo img {
  min-height: 100px;
  height: 100px;
  width: auto;
  display: block;
}

.main-nav ul {
  display: flex;
  gap: clamp(80px, 5.5vw, 120px);
  align-items: center;
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
  transition: color var(--transition);
  position: relative;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent-cyan);
  transition: width var(--transition);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-accent-cyan);
}

.main-nav a:hover::after,
.main-nav a.active::after {
  width: 100%;
}

/* Hamburger — siempre al extremo derecho del header */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 5px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
}

/* Botón cerrar dentro del menú mobile */
.nav-close {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  transition: color var(--transition);
}
.nav-close:hover { color: var(--color-accent-cyan); }

/* =============================================
   HERO
   ============================================= */
#hero {
  min-height: 105vh; /* Desktop Full HD 1920px — referencia */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
  /*
    Fondo exacto maqueta:
    - Base muy oscura púrpura-negra: #060314
    - Capas de gradiente: azul-violeta hacia el centro
  */
  background: linear-gradient(
    to top,
    #231550,
    #251754,
    #261855,
    #261856,
    #271957
  );
}

/* Overlay de imagen de fondo administrable (opcional, desde plugin) */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  z-index: 0;
}

/* Contenedor de partículas hero: solo visible en mobile (portrait y landscape) */
#hero-particles {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Mobile portrait ≤ 768px */
@media (max-width: 768px) {
  #hero-particles { display: block; }
}

/* Mobile landscape: ancho ≤ 1024px + alto ≤ 500px */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
  #hero-particles { display: block; }
}

/* Bloque centrado, texto alineado izquierda (según maqueta) */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  width: 100%;
  text-align: left;
  padding: 0 24px;
}

.hero-titles-wrapper {
  position: relative;
  margin-bottom: clamp(16px, 1.46vw, 28px);
}

.hero-title {
  /* Inactivos: superpuestos en absolute, invisibles pero en el DOM */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  font-size: clamp(1.4rem, 2.17vw, 41.6px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--color-white);
  transition: opacity 0.6s ease;
  text-transform: uppercase;
  text-align: left;
}

.hero-title.active {
  /* Activo: vuelve al flujo normal, visible */
  display: block;
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.hero-subtitle {
  font-size: clamp(0.8rem, 0.79vw, 15.2px);
  color: var(--color-text-muted);
  margin-bottom: clamp(20px, 1.875vw, 36px);
  line-height: 1.8;
  text-align: left;
}

/* Botones alineados a la izquierda del bloque */
.hero-buttons {
  display: flex;
  gap: clamp(10px, 0.73vw, 14px);
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Botones del hero escalan con vw (base 1920px) */
.hero-buttons .btn {
  font-size: clamp(0.7rem, 0.75vw, 14.4px);
  padding: clamp(10px, 0.73vw, 14px) clamp(20px, 1.67vw, 32px);
}

/* ── Imágenes flotantes hero ──
   Posicionadas relativas a .hero-stage → se mueven con el contenido */
.hero-float-images {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.float-img { position: absolute; }

/* CORAZÓN — 450px natural / 1920px base = 23.4vw */
.float-img.corazon {
  width: 23.4vw;
  height: auto;
  top: 40%;
  left: 12%;
  opacity: 0.82;
  filter: drop-shadow(0 8px 24px rgba(0,210,240,.35));
  animation: floatCorazon 4.2s ease-in-out infinite;
}

/* FLECHA — 428px natural / 1920px base = 22.3vw */
.float-img.flecha {
  width: 22.3vw;
  height: auto;
  top: 8%;
  right: 16%;
  opacity: 0.80;
  mix-blend-mode: screen;
  animation: floatFlecha 4.5s ease-in-out infinite;
}

/* MANO — 526px natural / 1920px base = 27.4vw */
.float-img.mano {
  width: 27.4vw;
  height: auto;
  bottom: 3%;
  right: 17%;
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: floatMano 5s ease-in-out infinite;
}

@keyframes floatCorazon {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-18px); }
}

@keyframes floatFlecha {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@keyframes floatMano {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}


/* =============================================
   TU WEB EN 5 PASOS
   ============================================= */
#pasos {
  position: relative;
  padding: 100px 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.pasos-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 7, 24, 0.82);
  z-index: 0;
}

#pasos .container { position: relative; z-index: 1; }

.section-title {
  text-align: center;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -1.03px;
  line-height: 76px;
  margin-bottom: 60px;
}

/* Caja contenedora única */
.pasos-box {
  background: #281f56;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 28px;
  padding: 52px 48px 44px;
  box-shadow: 0 8px 40px rgba(40, 31, 86, 0.55);
}

.pasos-box .section-title {
  margin-bottom: 48px;
}

.pasos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.paso-item {
  text-align: left;
  padding: 20px 10px;
}

.paso-icon {
  width: 93px;
  height: 93px;
  margin: 0 0 0 0;
  object-fit: contain;
  display: block;
}

/* Títulos PASO N ocultos */
.paso-item h3 { display: none; }

/* Texto desplazado a la derecha del ícono con ligero solapamiento vertical */
.paso-item p,
.paso-item ul {
  padding-left: 71px;
  margin-top: 0;
  text-align: left;
}

.paso-item p,
.paso-item li {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.paso-item ul li::before { content: '• '; color: var(--color-accent-cyan); }

/* =============================================
   PLANES WEB LANDING
   ============================================= */
#planes {
  position: relative;
  padding: 100px 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.planes-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 7, 24, 0.78);
  z-index: 0;
}

#planes .container { position: relative; z-index: 1; }

.planes-header {
  display: flex;
  align-items: flex-start; /* imagen y título alineados al tope */
  justify-content: center;
  gap: 16px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

/* Flecha rotada y subida al nivel del inicio del título */
.planes-header .flecha-titulo {
  width: auto;
  height: clamp(3rem, 5.5vw, 5rem);
  object-fit: contain;
  mix-blend-mode: screen;
  transform: rotateZ(71deg);
  position: relative;
  top: -2.5rem;
  flex-shrink: 0;
}

.planes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.plan-card {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 36px 28px;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
}

.plan-card.featured {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
}

.plan-card:hover {
  transform: translateY(-8px);
  background: transparent;
  border-color: #01c9e8;
  box-shadow: 0 0 24px rgba(1, 201, 232, 0.3);
}

.plan-title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: #01c9e8;
}

.plan-list {
  margin-bottom: 24px;
  text-align: left;
  flex: 1; /* empuja precio + botón al fondo */
}

.plan-list li {
  padding: 7px 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 8px;
}

.plan-list li::before {
  content: '✓';
  color: #01c9e8;
  font-weight: 700;
  flex-shrink: 0;
}

.plan-price-badge {
  display: inline-block;
  background: #01d9ff;
  color: #271f56;
  font-size: 1.5rem;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 50px;
  border: 2px solid #01d9ff;
  letter-spacing: 1px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(1, 217, 255, 0.35);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
}

.plan-price-badge:hover,
.plan-price-badge:focus-visible {
  background: #271f56;
  color: #01d9ff;
  box-shadow: 0 6px 20px rgba(39, 31, 86, 0.5);
  transform: translateY(-2px);
  outline: none;
}

.plan-price-badge small {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.85;
}

.plan-btn {
  display: none;
  width: 100%;
  background: #01d9ff;
  color: #251e55;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 13px 20px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 16px rgba(1, 217, 255, 0.3);
}

.plan-btn:hover {
  background: #00c4e8;
  color: #251e55;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(1, 217, 255, 0.45);
}

/* =============================================
   MÁS SERVICIOS
   ============================================= */
#servicios {
  position: relative;
  padding: 100px 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.servicios-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 7, 24, 0.82);
  z-index: 0;
}

#servicios .container { position: relative; z-index: 1; }

.servicios-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

/* Mano tiene fondo negro → screen la hace invisible sobre oscuro */
.servicios-header .mano-titulo {
  height: clamp(2.2rem, 8vw, 10.2rem);
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  margin-left: 24px;
}

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

.servicio-card {
  position: relative;
  border-radius: 0;
  border: 1.5px solid #00e5ff;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.servicio-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.servicio-overlay-card {
  position: absolute;
  inset: 0;
  background: rgba(33, 2, 100, 0.79);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.servicio-title {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.87px;
  line-height: 1.3;
  text-transform: uppercase;
  color: #00e5ff;
  text-align: center;
}

/* =============================================
   CONTÁCTANOS
   ============================================= */
#contacto {
  padding: 90px 0 110px;
  position: relative;
  /* Fondo: azul-púrpura oscuro según maqueta */
  background: linear-gradient(180deg, #0d0a2e 0%, #1a1060 40%, #0d0a2e 100%);
}

.contacto-badge {
  display: inline-block;
  background: #7900ff;
  color: #ffffff;
  padding: 18px 72px;
  border-radius: 50px;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 50px;
  box-shadow: 0 8px 36px rgba(121, 0, 255, 0.45);
}

.contacto-wrapper {
  text-align: center;
}

.contacto-form-wrap {
  max-width: 600px;
  margin: 0 auto;
  background: #01d9ff;
  border-radius: 20px;
  padding: 36px 32px;
}

/* Inputs sin esquinas redondas, texto negro, placeholder negro */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-textarea,
.wpcf7-form .wpcf7-select,
.contacto-form-wrap input[type="text"],
.contacto-form-wrap input[type="email"],
.contacto-form-wrap input[type="tel"],
.contacto-form-wrap textarea,
.contacto-form-wrap select {
  width: 100%;
  background: #ffffff;
  border: none;
  border-radius: 0;
  color: #000000;
  font-family: var(--font-main);
  font-size: 0.9rem;
  padding: 16px 20px;
  margin-bottom: 14px;
  outline: none;
  transition: box-shadow var(--transition);
  display: block;
}

.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-textarea:focus,
.contacto-form-wrap input:focus,
.contacto-form-wrap textarea:focus {
  box-shadow: inset 0 0 0 2px #7900ff;
}

.wpcf7-form .wpcf7-text::placeholder,
.wpcf7-form .wpcf7-textarea::placeholder
.wpcf7-form .wpcf7-select::placeholder,
.contacto-form-wrap input::placeholder,
.contacto-form-wrap textarea::placeholder
.contacto-form-wrap select::placeholder {
  color: #000000;
  letter-spacing: 1px;
  font-size: 0.8rem;
  text-transform: uppercase;
  opacity: 0.6;
}

.wpcf7-form .wpcf7-textarea,
.contacto-form-wrap textarea {
  height: 130px;
  resize: vertical;
}

/* Select plan — apariencia nativa eliminada, flecha custom SVG */
.wpcf7-form .wpcf7-select,
.contacto-form-wrap select,
.contacto-form-wrap .itp-select-plan {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 44px;
  cursor: pointer;
}

.wpcf7-form .wpcf7-select:focus,
.contacto-form-wrap select:focus,
.contacto-form-wrap .itp-select-plan:focus {
  box-shadow: inset 0 0 0 2px #7900ff;
  outline: none;
}

/* Placeholder de select (opción deshabilitada) */
.contacto-form-wrap .itp-select-plan option[value=""] {
  color: rgba(0,0,0,0.5);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Opciones del dropdown en negro sólido */
.wpcf7-form .wpcf7-select option,
.contacto-form-wrap select option,
.contacto-form-wrap .itp-select-plan option {
  color: #000000;
  background: #ffffff;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Color tenue mientras no se ha seleccionado ninguna opción real */
.wpcf7-form .wpcf7-select.itp-empty,
.contacto-form-wrap select.itp-empty,
.contacto-form-wrap .itp-select-plan.itp-empty {
  color: rgba(0,0,0,0.55);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wpcf7-form input[type="submit"],
.contacto-form-wrap input[type="submit"],
#contacto .contacto-form-wrap button[type="submit"],
#contacto .contacto-form-wrap .btn,
#contacto .contacto-form-wrap .btn-primary {
  background: #7900ff !important;
  color: #ffffff !important;
  border: none !important;
  border-color: #7900ff !important;
  padding: 16px 60px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  font-family: var(--font-main);
  box-shadow: 0 6px 20px rgba(121, 0, 255, 0.4) !important;
  margin-top: 8px;
}

.wpcf7-form input[type="submit"]:hover,
.contacto-form-wrap input[type="submit"]:hover,
#contacto .contacto-form-wrap button[type="submit"]:hover,
#contacto .contacto-form-wrap .btn:hover,
#contacto .contacto-form-wrap .btn-primary:hover {
  background: #6600dd !important;
  color: #ffffff !important;
  opacity: 1;
  transform: translateY(-2px);
}

/* Mensajes de respuesta CF7 */
.wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  border: none !important;
}

/* Éxito */
.wpcf7-form.sent .wpcf7-response-output {
  background: #00c853 !important;
  color: #ffffff !important;
}

/* Error de envío */
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
  background: #ff1744 !important;
  color: #ffffff !important;
}

/* Error de validación */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
  background: #ff6d00 !important;
  color: #ffffff !important;
}

/* Mensajes de validación por campo */
.wpcf7-not-valid-tip {
  color: #ff1744 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  display: block !important;
  margin-top: -10px !important;
  margin-bottom: 10px !important;
  padding-left: 4px !important;
}

/* Borde rojo en campo inválido */
.wpcf7-form .wpcf7-not-valid {
  border: 2px solid #ff1744 !important;
  box-shadow: inset 0 0 0 2px #ff1744 !important;
}

/* =============================================
   INFORMATIVO / CLIENTES
   ============================================= */
#clientes {
  padding: 90px 0 100px;
  background: #080515;
  text-align: center;
}

/* Corazón + título: dos bloques lado a lado, imagen pegada al texto */
.clientes-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 50px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Imagen corazón */
.corazon-titulo {
  height: 271px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0,210,240,.30));
}

.clientes-title {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.25;
  max-width: 720px;
  margin: 0;
  text-align: center;
}

.logos-carrusel {
  overflow: hidden;
  position: relative;
  padding: 20px 0;
}

.logos-track {
  display: flex;
  gap: 48px;
  animation: scrollLogos 20s linear infinite;
  width: max-content;
}

.logos-track img {
  height: 56px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity var(--transition);
}

.logos-track img:hover { opacity: 1; }

@keyframes scrollLogos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =============================================
   FOOTER
   ============================================= */
#site-footer {
  background: #060410;
  padding: 56px 0 32px;
  border-top: 1.5px solid rgba(255,255,255,0.85);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}

/* Separadores verticales entre columnas — no tocan el borde superior */
.footer-col {
  position: relative;
}

.footer-col:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 22px;        /* espacio desde el borde superior del footer */
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.30);
}

.footer-logo img {
  height: 65px;
  width: auto;
  margin-bottom: 16px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.65);
  font-size: 1.28rem;
  margin-top: 12px;
}

.footer-contact-item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.footer-col h4 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent-cyan);
  margin-bottom: 16px;
}

.footer-nav {
  text-align: center;
}

.footer-nav a {
  display: block;
  color: rgba(255,255,255,0.6);
  font-size: 1.25rem;
  padding: 4px 0;
  transition: color var(--transition);
}

.footer-nav a:hover { color: var(--color-accent-cyan); }

.footer-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-info-list li {
  color: rgba(255,255,255,0.60);
  font-size: 1.25rem;
  line-height: 1.45;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 24px;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
}

/* =============================================
   WHATSAPP FLOTANTE
   ============================================= */
/* Botón flotante Contáctanos */
.contacto-float {
  position: fixed;
  bottom: 100px;
  right: 30px;
  z-index: 999;
  background: #7900ff;
  color: #ffffff;
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 30px;
  box-shadow: 0 6px 20px rgba(121, 0, 255, 0.5);
  transition: transform 0.3s ease, background 0.3s ease,
              opacity 0.35s ease, visibility 0.35s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 1;
  visibility: visible;
}

/* Oculto cuando se llega a la sección contacto */
.contacto-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

/* Hover — solo dispositivos con mouse real */
@media (hover: hover) {
  .contacto-float:hover {
    background: #01d9ff;
    color: #271f56;
    transform: scale(1.06);
    box-shadow: 0 6px 24px rgba(1, 217, 255, 0.45);
  }
}

/* Touch / iPad — feedback al tap */
.contacto-float:active {
  background: #01d9ff;
  color: #271f56;
  transform: scale(0.97);
}

.contacto-float svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
}

.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  width: 58px;
  height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  transition: transform var(--transition);
}

.whatsapp-float:hover { transform: scale(1.12); }

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  fill: white;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1200px) and (orientation: portrait) {
  #hero { min-height: 50vh; }

  /* Navbar — logo proporcional, menú con gap reducido */
  .site-logo img           { height: 88px; min-height: 88px; width: auto; }
  .main-nav a              { font-size: 0.85rem; }
  .main-nav ul             { gap: 38px; }
  #site-header .container  { gap: 32px; }

  /* Hero — título compacto en iPad / Galaxy Tab ≤1200px */
  .hero-title          { font-size: clamp(1rem, 1.8vw, 1.35rem); line-height: 1.05; letter-spacing: -0.04em; max-width: 500px; text-align: left; }
  .hero-titles-wrapper { margin-bottom: 12px; display: flex; flex-direction: column; align-items: center; }
  .hero-subtitle       { font-size: clamp(0.75rem, 1vw, 0.88rem); margin-bottom: 16px; text-align: center; }
  .hero-buttons        { gap: 12px; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; }
  .hero-buttons .btn   { font-size: 0.85rem; padding: 12px 28px; width: auto; }

  /* Imágenes flotantes: proporcionales al desktop */
  .float-img.corazon { width: 20vw; }
  .float-img.flecha  { width: 19vw; }
  .float-img.mano    { width: 22vw; }

  /* Footer 1200px — col 1 más ancha, padding interno */
  .footer-grid {
    grid-template-columns: 1.4fr 0.9fr 0.9fr;
    gap: 0;
  }
  .footer-col          { padding: 0 24px; }
  .footer-col:first-child { padding-left: 0; }
  .footer-col:last-child  { padding-right: 0; }
  .footer-contact-item { font-size: 0.88rem; }
  .footer-nav a        { font-size: 0.88rem; }
  .footer-info-list li { font-size: 0.88rem; }
}

@media (max-width: 1024px) and (orientation: portrait) {
  #hero { min-height: 50vh; }

  /* Navbar iPad — logo coherente, menú compacto */
  .site-logo img          { height: 80px; min-height: 80px; width: auto; }
  .main-nav ul            { gap: 24px; }
  .main-nav a             { font-size: 0.80rem; }
  #site-header .container { gap: 20px; }

  /* Hero iPad — título compacto */
  .hero-title          { font-size: clamp(0.9rem, 1.6vw, 1.2rem); line-height: 1.05; letter-spacing: -0.04em; max-width: 500px; text-align: left; }
  .hero-titles-wrapper { margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; }
  .hero-subtitle       { font-size: 0.78rem; margin-bottom: 14px; text-align: center; }
  .hero-buttons        { gap: 8px; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; }
  .hero-buttons .btn   { font-size: 0.82rem; padding: 11px 24px; width: auto; }

  .pasos-grid { grid-template-columns: repeat(3, 1fr); }
  .pasos-box  { padding: 40px 32px 36px; }
  .planes-header .flecha-titulo { height: clamp(2.5rem, 5vw, 3.8rem); top: -0.9rem; }
  .servicios-grid { grid-template-columns: repeat(2, 1fr); }

  /* Imágenes flotantes hero: proporcionales, no demasiado pequeñas */
  .float-img.corazon { width: 19vw; }
  .float-img.flecha  { width: 18vw; }
  .float-img.mano    { width: 21vw; }

  /* Footer iPad — col 1 más ancha, padding interno, fuentes ajustadas */
  .footer-grid {
    grid-template-columns: 1.4fr 0.9fr 0.9fr;
    gap: 0;
  }
  .footer-col {
    padding: 0 20px;
  }
  .footer-col:first-child { padding-left: 0; }
  .footer-col:last-child  { padding-right: 0; }
  .footer-contact-item { font-size: 0.82rem; }
  .footer-nav a        { font-size: 0.82rem; }
  .footer-info-list li { font-size: 0.82rem; }

  /* Clientes */
  .corazon-titulo { height: 220px; }
  .clientes-title { font-size: clamp(1.2rem, 2.8vw, 1.8rem); }
}

/* Galaxy Tab S7/S8/S9 y tablets similares — portrait (1201–1366px) */
@media (min-width: 1201px) and (max-width: 1366px) and (orientation: portrait) {
  #hero { min-height: 50vh; }

  .hero-title          { font-size: clamp(1rem, 1.8vw, 1.35rem); line-height: 1.05; letter-spacing: -0.04em; max-width: 500px; text-align: left; }
  .hero-titles-wrapper { margin-bottom: 12px; display: flex; flex-direction: column; align-items: center; }
  .hero-subtitle       { font-size: clamp(0.75rem, 1vw, 0.88rem); margin-bottom: 16px; text-align: center; }
  .hero-buttons        { gap: 12px; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; }
  .hero-buttons .btn   { font-size: 0.85rem; padding: 12px 28px; width: auto; }

  .float-img.corazon { width: 20vw; }
  .float-img.flecha  { width: 19vw; }
  .float-img.mano    { width: 22vw; }
}

@media (max-width: 768px) {
  #hero { min-height: 100vh; }
  .section-padding { padding: 60px 0; }

  /* Navbar */
  .nav-toggle { display: flex; }
  .nav-close   { display: block; }
  .site-logo img { height: 64px; min-height: 64px; width: auto; }
  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 75%;
    max-width: 300px;
    background: #0f0a28;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    transition: right 0.35s ease;
    z-index: 999;
  }
  .main-nav.open { right: 0; }
  .main-nav ul { flex-direction: column; gap: 28px; }
  .main-nav a { font-size: 0.95rem; color: #ffffff; }

  /* Hero — restaurar tamaños legibles en mobile (vw muy pequeño a 768px) */
  .hero-title { font-size: clamp(1.4rem, 5vw, 2rem); }
  .hero-subtitle { font-size: 0.9rem; margin-bottom: 24px; }
  .hero-buttons .btn { font-size: 0.8rem; padding: 12px 24px; width: auto; }
  .hero-buttons { flex-direction: row; flex-wrap: wrap; gap: 12px; justify-content: center; }
  .float-img.corazon,
  .float-img.flecha,
  .float-img.mano { display: none; }

  /* Pasos — ícono 72px → padding-left ~55px */
  .pasos-grid  { grid-template-columns: repeat(2, 1fr); }
  .pasos-box   { padding: 36px 24px 32px; border-radius: 20px; }
  .paso-icon   { width: 72px; height: 72px; }
  .paso-item p, .paso-item ul { padding-left: 55px; margin-top: 0; }

  /* Planes */
  .planes-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .planes-header .flecha-titulo { height: 2.4rem; top: -0.7rem; }

  /* Servicios */
  .servicios-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer 768px */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-col:not(:last-child)::after { display: none; }
  .footer-logo { text-align: center; }
  .footer-contact-item { justify-content: center; }
  .footer-info-list { text-align: center; }

  /* Clientes 768px: imagen reduce, texto centrado */
  .clientes-header { gap: 14px; flex-wrap: nowrap; }
  .corazon-titulo  { height: 160px; }
  .clientes-title  { text-align: center; font-size: clamp(1rem, 3.2vw, 1.4rem); }
}

/* iPad landscape — footer col 2 (nav) centrada */
@media (max-width: 1200px) and (orientation: landscape) {
  .footer-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .footer-col:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

/* TV / pantallas grandes ≥ 1920px */
@media (min-width: 1920px) {
  #hero          { min-height: 105vh; }
  .main-nav a    { font-size: 0.95rem; }
  .site-logo img { height: 100px; min-height: 100px; width: auto; }
}

@media (max-width: 480px) {
  #hero          { min-height: 100vh; padding-top: 70px; }
  .hero-content  { padding: 0 16px; }
  .hero-title    { font-size: clamp(1.2rem, 6vw, 1.6rem); }
  .hero-subtitle { font-size: 0.82rem; }

  /* Pasos: columna única, íconos grandes */
  .pasos-grid     { grid-template-columns: 1fr; gap: 6px; }
  .pasos-box      { padding: 24px 14px 20px; border-radius: 16px; }
  .servicios-grid { grid-template-columns: 1fr; }
  .planes-header .flecha-titulo { height: 2rem; top: -0.5rem; }

  #pasos, #planes, #servicios { padding: 70px 0; }
  .section-title { font-size: clamp(1.3rem, 7vw, 1.8rem); margin-bottom: 32px; }

  /* Pasos mobile: ícono centrado arriba, texto centrado abajo */
  .paso-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 8px;
  }
  .paso-icon {
    width: 170px;
    height: 170px;
    margin: 0 auto 12px;
    display: block;
  }
  .paso-item p,
  .paso-item ul {
    padding-left: 0;
    margin-top: 0;
    text-align: center;
  }
  .paso-item ul { padding-left: 0; }
  .paso-item p, .paso-item li { font-size: 0.99rem; }

  .plan-title { font-size: 1rem; }
  .plan-list li { font-size: 0.75rem; }
  .plan-price-badge { font-size: 1.1rem; padding: 12px 18px; }
  .plan-card { padding: 28px 20px; }

  .servicio-title { font-size: 0.78rem; }

  .contacto-badge   { padding: 14px 28px; font-size: clamp(1rem, 6vw, 1.4rem); letter-spacing: 2px; }
  .contacto-form-wrap input, .contacto-form-wrap textarea { padding: 12px 14px; font-size: 0.82rem; }
  .contacto-form-wrap textarea { height: 100px; }

  /* Footer mobile */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-col:not(:last-child)::after { display: none; }
  .footer-col h4 { font-size: 1.0rem; }
  .footer-contact-item { font-size: 1.0rem; }
  .footer-nav { text-align: center; }
  .footer-nav a { font-size: 1.0rem; }
  .footer-info-list { text-align: center; }
  .footer-info-list li { font-size: 1.0rem; }
  .footer-logo { text-align: center; }
  .footer-logo img { height: 52px; }
  .footer-contact-item { justify-content: center; }

  .btn { width: 100%; text-align: center; }

  /* Clientes: en mobile apilan en columna, centrado */
  .clientes-header { flex-direction: column; align-items: center; gap: 12px; }
  .corazon-titulo  { height: 140px; width: auto; }
  .clientes-title  { text-align: center; }
}