/* ============================================================
   HOSTKOLPIX — Hoja de estilos principal
   Enfoque: Mobile-First · CSS Grid + Flexbox · Variables nativas
   Estructura del archivo:
     01. Design tokens (variables)
     02. Reset y base
     03. Utilidades (container, botones, chips, secciones)
     04. Header + navegación (glassmorphism)
     05. Hero + buscador de dominios
     06. Banda de tecnologías
     07. Soluciones
     08. Planes de hosting (pricing)
     09. Kolpix Care (mantenimiento)
     10. Características
     11. Testimonios (carrusel)
     12. Mapa de red global
     13. Soporte
     14. Blog
     15. FAQ (acordeón)
     16. CTA final
     17. Footer
     18. Flotantes, animaciones y accesibilidad
   ============================================================ */

/* ------------------------------------------------------------
   01. DESIGN TOKENS
   Cambia aquí la paleta completa de la marca.
   ------------------------------------------------------------ */
:root {
  /* Marca — azules profesionales que transmiten confianza */
  --primary-700: #003D99;   /* Azul profundo */
  --primary-600: #0052CC;   /* Azul principal */
  --primary-500: #2670E0;   /* Azul medio */
  --primary-200: #C7D7FE;   /* Azul claro (bordes suaves) */
  --primary-100: #DBEAFE;   /* Azul muy claro (fondos suaves) */
  --primary-50:  #EEF4FF;   /* Azul casi blanco (hover de filas) */
  --sky-500:     #0EA5E9;   /* Azul cielo (acento del degradado) */
  --mint-600:    #0BC98F;
  --mint-500:    #0FDFA0;   /* Acento "velocidad" y vistos buenos */
  --mint-100:    #D9FBEF;
  --grad-mint:   linear-gradient(135deg, #0BC98F 0%, #34D9A6 100%);
  --warning-bg:  #FDF3E1;   /* Ámbar claro (barra flotante del carrito) */

  /* Neutros */
  --ink-900: #0B1026;       /* Azul noche (fondos oscuros / titulares) */
  --ink-700: #262D52;
  --ink-500: #4A5170;       /* Texto secundario */
  --ink-300: #9AA1C0;
  --surface: #F5F6FB;       /* Fondo de secciones alternas */
  --line:    #E6E8F4;       /* Bordes sutiles */
  --white:   #FFFFFF;

  /* Degradados de marca */
  --grad-brand: linear-gradient(135deg, var(--primary-600) 0%, var(--sky-500) 100%);
  --grad-text:  linear-gradient(90deg, var(--primary-600), var(--sky-500) 55%, var(--mint-600));

  /* Tipografías */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  /* Escala tipográfica fluida */
  --fs-hero: clamp(1.55rem, 1rem + 2.05vw, 2.25rem);
  --fs-h2:   clamp(1.75rem, 1.25rem + 2.2vw, 2.7rem);
  --fs-h3:   clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --fs-lead: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm:   .875rem;

  /* Espaciado y forma */
  --section-y: clamp(4.5rem, 9vw, 7.5rem);  /* Respiración generosa entre secciones */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --header-h: 64px;                       /* altura de la píldora del header */
  --header-gap: clamp(8px, 1.5vw, 20px);  /* separación del header al borde superior */

  /* Sombras */
  --shadow-sm: 0 2px 10px rgba(11, 16, 38, .06);
  --shadow-md: 0 14px 40px rgba(11, 16, 38, .10);
  --shadow-lg: 0 30px 70px rgba(11, 16, 38, .16);
  --shadow-brand: 0 12px 30px rgba(37, 99, 235, .30);
}

/* ------------------------------------------------------------
   02. RESET Y BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

/* El atributo hidden siempre gana, incluso sobre display:flex/grid */
[hidden] { display: none !important; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

ul[class], ol[class] { list-style: none; padding: 0; }

a { color: var(--primary-600); text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--ink-900);
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--primary-100); color: var(--primary-700); }

/* Anclas: compensa la altura del header flotante + su margen superior */
[id] { scroll-margin-top: calc(var(--header-h) + var(--header-gap) + 16px); }

/* Foco visible para navegación con teclado */
:focus-visible {
  outline: 3px solid var(--primary-500);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ------------------------------------------------------------
   03. UTILIDADES
   ------------------------------------------------------------ */
.container {
  width: min(100% - 3rem, 1140px);
  margin-inline: auto;
}

.container--narrow { width: min(100% - 2.5rem, 820px); }

/* Solo lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--ink-900);
  color: var(--white);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* Secciones */
.section { padding-block: var(--section-y); }
.section--surface { background: var(--surface); }
.section--dark {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(37, 99, 235, .28), transparent 60%),
    radial-gradient(700px 380px at 0% 110%, rgba(15, 223, 160, .12), transparent 60%),
    var(--ink-900);
  color: var(--ink-300);
}
.section--dark .section__title { color: var(--white); }
.section--dark .section__lead { color: var(--ink-300); }

.section__head {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
  text-align: center;
}

.section__eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .35rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--primary-600);
  background: var(--primary-100);
  border-radius: 999px;
}
.section__eyebrow--mint { color: var(--mint-500); background: rgba(15, 223, 160, .12); }

.section__title { font-size: var(--fs-h2); }

.section__lead {
  margin-top: 1.1rem;
  font-size: var(--fs-lead);
  color: var(--ink-500);
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.7rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--primary-600);
  color: var(--white);
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { background: var(--primary-700); box-shadow: 0 16px 36px rgba(37, 99, 235, .40); }

.btn--ghost {
  color: var(--primary-600);
  border-color: var(--primary-500);
  background: transparent;
}
.btn--ghost:hover { background: var(--primary-100); }

.btn--light { background: var(--white); color: var(--ink-900); }
.btn--light:hover { box-shadow: var(--shadow-md); }

.btn--mint {
  background: var(--mint-500);
  color: var(--ink-900);
  box-shadow: 0 12px 30px rgba(15, 223, 160, .25);
}

.btn--outline-light {
  color: var(--white);
  border-color: rgba(255, 255, 255, .5);
}
.btn--outline-light:hover { background: rgba(255, 255, 255, .1); }

.btn--sm { padding: .6rem 1.25rem; font-size: var(--fs-sm); }
.btn--lg { padding: 1rem 2.1rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* Texto con degradado de marca */
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.chip {
  display: inline-block;
  padding: .2rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--primary-600);
  background: var(--primary-100);
  border-radius: 999px;
}

.badge {
  padding: .25rem .7rem;
  font-size: .75rem;
  font-weight: 700;
  border-radius: 999px;
}
.badge--mint { background: var(--mint-100); color: #067a57; }

/* ------------------------------------------------------------
   04. HEADER — Píldora flotante con glassmorphism
   El header queda "despegado" del borde superior (--header-gap)
   y permanece flotando al hacer scroll, estilo iOS.
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: var(--header-gap);
  z-index: 100;
  background: transparent;
}

/* La píldora de vidrio */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--header-h);
  padding: .45rem .55rem .45rem 1.35rem;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(28px) saturate(1.9);
  backdrop-filter: blur(28px) saturate(1.9);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(11, 16, 38, .08);
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* Estado al hacer scroll (lo añade js/main.js): la píldora gana presencia sutil */
.site-header.is-scrolled .site-header__inner {
  background: rgba(255, 255, 255, .65);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 36px rgba(11, 16, 38, .12);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -.01em;
}
.brand__name strong { font-weight: 800; color: var(--primary-600); }

/* Navegación de escritorio (oculta en móvil) */
.nav { display: none; }

.nav__list {
  display: flex;
  gap: .25rem;
}

.nav__link {
  display: inline-block;
  padding: .55rem .9rem;
  font-weight: 500;
  color: var(--ink-700);
  border-radius: 999px;
  transition: color .15s ease;
}
.nav__link:hover { color: var(--primary-600); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Botones circulares de icono (campana y persona) */
.icon-btn {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink-700);
  background: rgba(255, 255, 255, .65);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.icon-btn:hover {
  color: var(--primary-600);
  background: var(--primary-100);
  transform: translateY(-2px);
}

/* Variante destacada: acceso al área de clientes */
.icon-btn--primary {
  color: var(--white);
  background: var(--primary-600);
  border-color: transparent;
  box-shadow: var(--shadow-brand);
}
.icon-btn--primary:hover {
  color: var(--white);
  background: var(--primary-700);
  box-shadow: 0 14px 32px rgba(37, 99, 235, .40);
}

/* Glifos: los SVG locales se aplican como máscara y se tiñen
   con currentColor (así un mismo archivo sirve en claro y oscuro) */
.icon-btn__glyph {
  width: 21px;
  height: 21px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon-btn__glyph--bell { --icon: url("../assets/icons/bell.svg"); }
.icon-btn__glyph--user { --icon: url("../assets/icons/user.svg"); }

/* Campanita: dropdown de promociones (contenido estático, sin sesión). */
.promo-bell { position: relative; }
.promo-bell .icon-btn { position: relative; }
.promo-bell__dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger, #E5484D); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.promo-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 300px; max-width: calc(100vw - 32px);
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 8px;
  box-shadow: 0 20px 48px rgba(11, 16, 38, .16); transform-origin: top right; animation: promoPop .16s ease;
}
@keyframes promoPop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
/* El subrayado mide lo mismo que el texto (arranca en el ícono) porque
   el título se ajusta a su contenido con width: fit-content. */
.promo-panel__head { width: fit-content; margin: 6px 10px 10px; padding-bottom: 7px;
  font-size: .78rem; font-weight: 800; color: var(--ink-500); border-bottom: 2px solid var(--line); }
.promo-panel__item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 12px;
  font-size: .82rem; line-height: 1.4; color: var(--ink-700); transition: background-color .15s ease; }
/* Separador entre promos: línea fina centrada que se desvanece en los
   extremos. Va en position:absolute para no entrar en el flex del ítem. */
.promo-panel__item + .promo-panel__item::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 62%; height: 1px; background: linear-gradient(90deg, transparent, rgba(154, 161, 192, .35), transparent);
}
.promo-panel__item:hover { background: var(--primary-50, #EEF4FF); }
.promo-panel__item strong { color: var(--ink-900); }
.promo-panel__emoji { flex: none; font-size: 1.05rem; line-height: 1.2; }

/* Efecto "chévere" al clic en el botón de login (pulso + destello). */
.icon-btn--primary { position: relative; overflow: hidden; }
.icon-btn--primary.is-pressed { animation: loginPulse .4s ease; }
@keyframes loginPulse { 40% { transform: scale(.9); } 100% { transform: scale(1); } }
.icon-btn__ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55);
  transform: translate(-50%, -50%) scale(0); pointer-events: none; animation: loginRipple .5s ease-out forwards; }
@keyframes loginRipple { to { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } }

/* Botón hamburguesa */
.nav-toggle {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.nav-toggle__bar {
  width: 22px;
  height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
/* Animación hamburguesa → X */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel móvil — tarjeta de vidrio bajo la píldora */
.mobile-nav {
  position: absolute;
  inset-inline: 1.25rem; /* alinea con los márgenes del container en móvil */
  top: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1.25rem 1.75rem;
  background: rgba(255, 255, 255, .90);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.mobile-nav__list { display: grid; gap: .15rem; }

.mobile-nav__link {
  display: block;
  padding: .8rem 1rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink-900);
  border-radius: var(--radius-sm);
}
.mobile-nav__link:hover { background: var(--primary-100); color: var(--primary-600); }

/* Escritorio: muestra menú, oculta hamburguesa */
@media (min-width: 960px) {
  .nav { display: block; }
  .nav-toggle, .mobile-nav { display: none; }
}

/* ------------------------------------------------------------
   05. HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: clip;
  /* El fondo sube por detrás del header hasta el borde superior de la ventana.
     El padding-top compensa el margin negativo para que el contenido no se mueva. */
  margin-top: calc(-1 * (var(--header-h) + var(--header-gap) + 0.9rem));
  padding-block:
    calc(clamp(1.75rem, 4vw, 3.25rem) + var(--header-h) + var(--header-gap) + 0.9rem)
    clamp(2rem, 4.5vw, 3.5rem);
  background:
    radial-gradient(760px 420px at 90% -12%, rgba(59, 130, 246, .14), transparent 65%),
    radial-gradient(620px 420px at -8% 42%, rgba(15, 223, 160, .10), transparent 60%),
    linear-gradient(180deg, #FAFCFF 0%, var(--white) 100%);
}

/* Resplandores decorativos */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.hero__glow--a {
  width: 420px; height: 420px;
  top: -160px; right: -120px;
  background: rgba(37, 99, 235, .15);
}
.hero__glow--b {
  width: 360px; height: 360px;
  bottom: -180px; left: -140px;
  background: rgba(15, 223, 160, .13);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem 1rem;
  font-size: .78rem;
  font-weight: 400;
  color: var(--ink-700);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}


.hero__title {
  margin-top: 1.5rem;
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.hero__title-highlight {
  color: var(--primary-600);
}

/* ---------- Contenedor rotativo bajo el titular ----------
   Tarjeta rectangular baja: el mensaje ocupa la mitad izquierda y la
   foto la derecha, con un difuminado que va de opaco a transparente
   para que el texto se lea siempre sobre la imagen. */
.hero-rotator {
  position: relative;
  max-width: 34rem;
  margin-top: 1.4rem;
  margin-bottom: 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--ink-900);
  box-shadow: var(--shadow-md);
  /* La perspectiva la usa el leve giro 3D al cambiar de tarjeta */
  perspective: 60em;
  isolation: isolate;
}

.hero-rotator__viewport {
  position: relative;
  height: clamp(132px, 21vw, 158px);
  border-radius: inherit;
  overflow: hidden;
  transform-style: preserve-3d;
}

.hero-rotator__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 1.15rem 1.5rem 1.55rem;
  opacity: 0;
  transform: translateX(14%) rotateY(-12deg);
  transform-origin: left center;
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, .8, .3, 1);
  pointer-events: none;
}
.hero-rotator__slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Foto de la tarjeta: ocupa todo el fondo y se desvanece hacia la
   izquierda, dejando la zona oscura donde va el texto. */
.hero-rotator__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 32%;
  -webkit-mask-image: linear-gradient(to right, transparent 4%, rgba(0, 0, 0, .45) 34%, #000 62%);
  mask-image: linear-gradient(to right, transparent 4%, rgba(0, 0, 0, .45) 34%, #000 62%);
}

/* Variante espejo: la foto va a la izquierda y se desvanece hacia la
   derecha, que es donde queda el texto. El corte es más temprano que
   en la primera tarjeta porque esta foto tiene una pared muy clara que,
   si se deja llegar al centro, blanquea la tarjeta. */
.hero-rotator__photo--left {
  object-position: 24% 40%;
  -webkit-mask-image: linear-gradient(to left, transparent 36%, rgba(0, 0, 0, .18) 47%, rgba(0, 0, 0, .5) 59%, rgba(0, 0, 0, .85) 70%, #000 80%);
  mask-image: linear-gradient(to left, transparent 36%, rgba(0, 0, 0, .18) 47%, rgba(0, 0, 0, .5) 59%, rgba(0, 0, 0, .85) 70%, #000 80%);
}

/* Tarjeta con el mensaje alineado a la derecha */
.hero-rotator__slide--right {
  justify-content: flex-end;
}
.hero-rotator__slide--right .hero-rotator__text {
  text-align: right;
}

/* Ícono de regalo: va en la misma línea que "gratis", sin fondo. */
.hero-rotator__gift {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.15em;
  color: var(--white);
}

.hero-rotator__text {
  position: relative;
  z-index: 1;
  max-width: 57%;
  font-family: var(--font-display);
  font-size: clamp(1rem, .88rem + .5vw, 1.22rem);
  font-weight: 600;
  line-height: 1.32;
  color: var(--white);
  text-wrap: balance;
}

/* Fondo de cada tarjeta. La 2ª usa el mismo tono que la 1ª (el fondo
   del contenedor), que es el color contra el que se funde su foto. */
.hero-rotator__slide:nth-child(2) { background: var(--ink-900); }
.hero-rotator__slide:nth-child(3) { background: linear-gradient(135deg, var(--primary-700) 0%, var(--ink-900) 82%); }
/* Los cortes de línea van con <br> en el HTML, así que el párrafo no
   necesita tope de ancho: se ajusta solo a su línea más larga. */
.hero-rotator__slide:nth-child(2) .hero-rotator__text { max-width: 100%; }
.hero-rotator__slide:nth-child(3) .hero-rotator__text { max-width: 55%; }

/* Bloque de imagen de la tarjeta de soporte, al costado derecho. */
.hero-rotator__media {
  position: absolute;
  top: 50%;
  right: calc(1.4rem + 15px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  width: 34%;
  max-width: 168px;
}
.hero-rotator__team {
  width: 100%;
  height: auto;
}

.hero-rotator__dots {
  position: absolute;
  z-index: 2;
  left: 1.5rem;
  bottom: .8rem;
  display: flex;
  gap: .38rem;
}

.hero-rotator__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  transition: width .3s ease, background .3s ease;
}
.hero-rotator__dot.is-active {
  width: 20px;
  background: var(--white);
}
.hero-rotator__dot:focus-visible { outline-offset: 3px; }

/* CTA principal: comprar hosting (el servicio estrella) */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}

.hero__cta-note {
  font-size: var(--fs-sm);
  color: var(--ink-500);
}
.hero__cta-note strong { color: var(--ink-900); }

/* Buscador de dominios */
.hero__search-wrapper {
  width: min(100% - 2.5rem, 900px);
  margin-inline: auto;
  margin-top: clamp(3.5rem, 7vw, 5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.domain-search { margin-top: 0; }

.domain-search__field {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* Campo señuelo (honeypot) contra bots: invisible para personas. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.domain-search__icon { display: none; color: var(--ink-300); }

.domain-search__input {
  flex: 1;
  min-width: 0;
  padding: .5rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
}
.domain-search__input::placeholder { color: var(--ink-300); }
.domain-search__input:focus { outline: none; }
.domain-search__field:focus-within {
  border-color: var(--primary-500);
}

/* ---------- Resultados del buscador de dominios (mismo diseño que "Mis Dominios") ---------- */
.domain-results { margin-top: 1.4rem; text-align: left; }
.domain-results__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.domain-results__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--grad-mint); color: #fff; box-shadow: 0 8px 18px rgba(11, 201, 143, .28); }
.domain-results__icon svg { width: 22px; height: 22px; }
.domain-results__icon--warn { background: linear-gradient(135deg, #F5A524 0%, #F8BC55 100%); box-shadow: 0 8px 18px rgba(245, 165, 36, .28); }
.domain-results__head h2 { font-family: var(--font-display); font-size: calc(1.22rem + 3px); color: var(--ink-900); margin: 0; overflow-wrap: anywhere; }
.domain-results__head h2 span { color: var(--mint-600); }
.domain-results__head h2 .domain-results__status { color: var(--ink-900); font-weight: 400; }
.domain-results__head p { margin: 3px 0 0; color: var(--ink-500); font-size: .86rem; }
.domain-results__more { margin: 34px 0 6px; font-size: calc(1.22rem + 3px); color: var(--ink-500); }
.domain-results__more strong { color: var(--ink-900); font-weight: 700; overflow-wrap: anywhere; }
.domain-empty { color: var(--ink-500); font-size: .95rem; }

.domain-featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.domain-option {
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "identity pricing" "cycle action";
  align-items: center; gap: 14px 18px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.domain-option--featured:hover { transform: translateY(-2px); border-color: var(--primary-200); box-shadow: var(--shadow-sm); background: var(--white); }
.domain-option-list { display: flex; flex-direction: column; }
.domain-option--row {
  background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 14px 6px;
  grid-template-columns: minmax(200px, 1.4fr) minmax(180px, .8fr) minmax(160px, .7fr) auto;
  column-gap: 18px; grid-template-areas: "identity cycle pricing action";
}
.domain-option--row:hover { background: var(--primary-50); }
.domain-option__identity { grid-area: identity; min-width: 0; }
.domain-option__cycle { grid-area: cycle; display: flex; }
.domain-option__pricing { grid-area: pricing; text-align: right; }
.domain-option__add { grid-area: action; justify-self: end; min-width: 118px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.domain-option__add svg { width: 1rem; height: 1rem; }
.domain-option__add.is-added, .domain-option__add.is-added:hover { background: var(--white); border-color: rgba(11, 201, 143, .5); color: #067A57; box-shadow: none; }
.domain-option.is-added { background: var(--mint-100); border-color: rgba(11, 201, 143, .45); }
.domain-option__avail { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #067A57; }
.domain-option__avail svg { width: .82rem; height: .82rem; color: var(--mint-600); }
.domain-option h3 { font-family: var(--font-display); font-size: 1.18rem; color: var(--ink-900); overflow-wrap: anywhere; margin: 0; }
.domain-option__tld { color: var(--mint-600); }
.domain-option--row h3 { font-size: 1.18rem; margin: 0; }
.domain-option--row .domain-option__avail { font-size: .64rem; }
/* Promo "por la compra de X, Y gratis": pill de regalo con sombra verde y la
   nota del TLD de compra por fuera. */
.domain-option__free-wrap { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.domain-option__free-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--mint-100); color: #067A57; border: 1px solid rgba(11, 201, 143, .45);
}
.domain-option__free-pill svg { width: .82rem; height: .82rem; color: var(--mint-600); }
.domain-option__free-note { font-size: .74rem; font-weight: 500; color: var(--ink-500); }
.domain-option--row .domain-option__free-pill { font-size: .64rem; }
.domain-option__price--gratis { color: var(--mint-600); }
.domain-option__after--struck [data-domain-option-total] { text-decoration: line-through; }
.domain-option__first { margin: 0 0 2px; color: var(--ink-500); font-size: .76rem; font-weight: 400; }
.domain-option__cop { font-size: .72rem; font-weight: 600; color: var(--ink-500); }
.domain-option__price { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1.1; }
.domain-option--row .domain-option__price { font-size: 1.2rem; }
.domain-option__after { margin: 3px 0 0; color: var(--ink-500); font-size: .76rem; font-weight: 400; }
.domain-option__after [data-domain-option-total] { color: var(--ink-500); font-weight: 400; }
/* Icono de info + tooltip con efecto glass (costo de renovación estimado) */
.domain-option__info { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px;
  padding: 0; border: 0; background: transparent; color: var(--ink-300); cursor: help; vertical-align: -3px; }
.domain-option__info svg { width: 15px; height: 15px; }
.domain-option__info:hover, .domain-option__info:focus-visible { color: var(--primary-500); outline: none; }
.domain-option__info::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); right: -4px; width: max-content; max-width: 230px; padding: 8px 11px;
  font-size: .74rem; font-weight: 500; line-height: 1.35; text-align: left; color: var(--ink-900);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 12px; box-shadow: 0 10px 30px rgba(11, 16, 38, .16);
  opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .16s ease, transform .16s ease; z-index: 6; pointer-events: none;
}
.domain-option__info:hover::after, .domain-option__info:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); }
.domain-option__cycle select {
  appearance: none; -webkit-appearance: none; width: 150px; max-width: 100%; padding: 7px 28px 7px 14px;
  font-size: .8rem; font-weight: 500; color: var(--ink-700); border: 1px solid var(--line); border-radius: 999px;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; outline: none; cursor: pointer; transition: border-color .15s ease;
}
.domain-option__cycle select:focus, .domain-option__cycle select:focus-visible { border-color: var(--primary-500); outline: none; box-shadow: none; }

/* Dropdown de ciclo a medida (mismo del carrito): muestra el % de descuento
   como badge verde. Un <select> nativo no permite un badge de color. */
.hk-cycle { position: relative; display: inline-block; }
.domain-option .hk-cycle { grid-area: cycle; justify-self: start; }
.hk-cycle__btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--white); font-weight: 500; font-size: .8rem; color: var(--ink-700); cursor: pointer; transition: border-color .15s; }
.hk-cycle__btn:hover { border-color: var(--primary-500); }
.hk-cycle__btn[disabled] { cursor: default; opacity: .75; }
.hk-cycle__label { white-space: nowrap; }
.hk-cycle__badge { background: var(--mint-100); color: #067A57; font-weight: 800; font-size: .68rem; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.hk-cycle__caret { margin-left: auto; display: inline-flex; color: var(--primary-600); }
.hk-cycle__caret svg { width: 11px; height: 8px; }
.hk-cycle__menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.hk-cycle__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px;
  font-size: .8rem; font-weight: 500; color: var(--ink-700); background: transparent; text-align: left; cursor: pointer; white-space: nowrap; border: 0; }
.hk-cycle__opt:hover, .hk-cycle__opt.is-active { background: var(--primary-50); }

@media (max-width: 640px) {
  .domain-featured { grid-template-columns: 1fr; }
  .domain-option--row {
    border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 16px; margin-top: 10px;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "identity pricing" "cycle action"; gap: 12px 14px;
  }
  .domain-option--row:hover { background: var(--surface); }
}

/* ---------- Página de resultados de dominios (/resultados-dominios) ---------- */
.results-page { padding-top: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: 4rem; min-height: 60vh; }
/* Encabezado sobre el buscador, con espacio amplio respecto al header. */
.results-heading {
  max-width: 960px;
  margin: clamp(2.5rem, 6vw, 5rem) auto clamp(1.1rem, 2.5vw, 1.6rem);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.results-page .domain-search { max-width: 960px; margin: 0 auto 1rem; }
.results-page .domain-results { max-width: 1080px; margin: 1.4rem auto 0; }
.results-empty { max-width: 1080px; margin: 2rem auto; text-align: center; color: var(--ink-500); }

/* Píldora de estado "Consultando…" (misma de la app: orbe con anillo que
   gira). Aquí el orbe usa un SVG en línea porque la landing no carga
   FontAwesome. */
.query-pill-wrap { display: flex; justify-content: center; margin: 2.4rem auto; }
.query-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 6px 18px 6px 6px;
  border: 1px solid rgba(38, 112, 224, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink-700);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 14px 38px rgba(11, 16, 38, .14), inset 0 1px 0 rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  animation: queryPillIn .2s ease both;
}
.query-pill strong { color: var(--ink-900); }
.query-pill__orb {
  position: relative;
  width: 36px; height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-50);
  color: var(--primary-600);
  overflow: hidden;
}
.query-pill__orb::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0 42%, var(--primary-500) 62%, var(--mint-500) 100%);
  animation: queryPillSpin .9s linear infinite;
}
.query-pill__orb::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--primary-50);
}
.query-pill__orb svg { position: relative; z-index: 1; width: 15px; height: 15px; }
@keyframes queryPillIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes queryPillSpin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .query-pill__orb::before { animation: none; }
}

/* Página de transferencia de dominios (/transferir-dominio) */
.transfer-intro { max-width: 960px; margin: 0 auto 1.2rem; text-align: center; }
.transfer-intro__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2rem); color: var(--ink-900); margin: 0 0 .5rem; }
.transfer-intro__lead { color: var(--ink-500); font-size: 1rem; margin: 0; }
.transfer-intro__lead strong { color: var(--ink-900); font-weight: 600; }
.transfer-card {
  max-width: 1080px; margin: 18px auto 0;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 18px 20px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px;
}
.transfer-card--ready { background: var(--mint-100); border-color: rgba(11, 201, 143, .45); }
.transfer-card__identity { min-width: 0; margin-right: auto; }
.transfer-card__identity h3 { font-family: var(--font-display); font-size: 1.18rem; color: var(--ink-900); overflow-wrap: anywhere; margin: 0; }
.transfer-card__pricing { text-align: right; }
.transfer-card__cta { border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
.transfer-card__cta svg { width: 1.05rem; height: 1.05rem; }
.transfer-actions { max-width: 1080px; margin: 18px auto 0; display: flex; }
.transfer-actions .btn { border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
.transfer-actions .btn svg { width: 1rem; height: 1rem; }
.domain-option__avail--warn { color: #9A6400; }
.domain-option__avail--warn svg { color: #C77700; }
@media (max-width: 620px) {
  .transfer-card { align-items: flex-start; }
  .transfer-card__pricing { text-align: left; }
  .transfer-card__cta { width: 100%; justify-content: center; }
}

/* Barra flotante del carrito (misma que "Mis Dominios") */
.domain-sticky {
  position: sticky; bottom: 14px; max-width: 1080px; margin: 22px auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 10px 10px 10px 16px; background: var(--warning-bg); border: 1px solid rgba(245, 165, 36, .45);
  border-radius: 999px; box-shadow: var(--shadow-md); z-index: 5;
}
.domain-sticky p { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--ink-700); font-weight: 600; font-size: .9rem; }
.domain-sticky__icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--mint-100); color: #067A57; }
.domain-sticky__icon svg { width: 1rem; height: 1rem; }
.domain-sticky strong { color: var(--ink-900); }
.domain-sticky .btn { border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
.domain-sticky .btn svg { width: 1rem; height: 1rem; }
@media (max-width: 620px) {
  .domain-sticky { border-radius: var(--radius-md); }
  .domain-sticky .btn { width: 100%; justify-content: center; }
}

/* Mensajes de estado del buscador */
.domain-search__feedback {
  min-height: 1.4rem;
  margin-top: .6rem;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.domain-search__feedback.is-error { color: #C2354B; }
.domain-search__feedback.is-ok { color: var(--mint-600); }

/* ---------- Tarjetas de extensiones destacadas ----------
   Logo arriba, "Desde" y el precio debajo. El importe lo escribe
   js/main.js con el precio real del core. */
.tld-cards {
  /* Alto del riel donde se centra cada logo: mantiene alineadas las
     seis tarjetas aunque cada logo tenga una altura óptica distinta. */
  --logo-rail: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: .7rem;
  margin-top: 1.15rem;
}

.tld-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: .95rem .7rem .85rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tld-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-200);
  box-shadow: var(--shadow-md);
}

/* Altura ÓPTICA por logo: unos son puro texto (.com, .co, .shop) y
   otros una marca con forma alrededor (.org, .store), así que a la
   misma altura se ven de tamaños muy distintos. Estos valores igualan
   el peso visual, no la medida. */
.tld-card__logo {
  height: var(--logo-h, 24px);
  width: auto;
  /* Los márgenes completan el riel: sin importar su altura óptica,
     cada logo ocupa siempre --logo-rail y queda centrado en él, así
     todos caen en la misma línea de una tarjeta a otra. */
  margin-block: calc((var(--logo-rail) - var(--logo-h, 24px)) / 2);
}
.tld-card__logo--com   { --logo-h: 17px; }
.tld-card__logo--co    { --logo-h: 18px; }
.tld-card__logo--org   { --logo-h: 26px; }
.tld-card__logo--ai    { --logo-h: 24px; }
.tld-card__logo--shop  { --logo-h: 19px; }
.tld-card__logo--store { --logo-h: 26px; }

/* "Desde" y el precio, apilados y alineados a la izquierda para que
   quede justo encima del símbolo $. */
.tld-card__pricing {
  /* Ocupa todo el ancho de la tarjeta para que "Desde" y el $ (o el
     "Pronto") arranquen en el mismo punto en las seis. */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .16rem;
}

.tld-card__from {
  font-size: .68rem;
  line-height: 1;
  color: var(--ink-300);
}

.tld-card__price {
  display: flex;
  align-items: baseline;
  gap: .22em;
  line-height: 1;
}
.tld-card__amount {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.tld-card__cop {
  font-size: .66rem;
  font-weight: 600;
  color: var(--ink-500);
}
/* Extensión aún sin precio configurado en el core */
.tld-card.is-pending .tld-card__amount { font-size: .92rem; color: var(--ink-500); }
.tld-card.is-pending .tld-card__cop { display: none; }

/* Visual del hero (mockup de una página web) */
.hero__visual {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  perspective: 65em;
}

/* La imagen se inclina siguiendo el cursor. --tilt-x / --tilt-y son la
   posición del puntero (-1 a 1 desde el centro) y las escribe main.js;
   el giro lo resuelve el navegador en la GPU (solo transform). */
.hero__visual-img {
  width: 100%;
  height: auto;
  transform-origin: 50% 50% 4em;
  transform:
    rotateX(calc(var(--tilt-y, 0) * 9deg))
    rotateY(calc(var(--tilt-x, 0) * 9deg));
  transition: transform .4s cubic-bezier(.175, .885, .32, 1.275);
}

/* ---------- Capa de físicas del hero (píldoras de TLD) ----------
   Las píldoras las crea js/hero-physics.js y las posiciona con
   transform. La capa es decorativa: no intercepta ningún clic, así
   que el buscador y los botones siguen funcionando igual. */
.hero-pills {
  position: absolute;
  inset: 0;
  z-index: 3;              /* sobre el contenido del hero, bajo el header */
  overflow: hidden;
  pointer-events: none;
  contain: layout style paint;   /* aísla el trabajo de layout y pintado */
}

.hero-pill {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  /* El texto y el borde comparten color (neón); lo inyecta el JS. */
  color: var(--pill-color, var(--primary-600));
  background: transparent;
  border: .5px solid var(--pill-color, var(--primary-600));
  border-radius: 999px;
  backface-visibility: hidden;
}

/* Hero en pantallas medianas y grandes */
@media (min-width: 640px) {
  .domain-search__field {
    flex-direction: row;
    align-items: center;
    padding: .5rem .5rem .5rem 1.1rem;
    border-radius: 999px;
  }
  .domain-search__icon { display: block; flex-shrink: 0; }
  .domain-search__btn { flex-shrink: 0; }
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
  }
  .hero__visual { margin-inline: 0 0; }
}

/* ------------------------------------------------------------
   06. BANDA DE TECNOLOGÍAS
   ------------------------------------------------------------ */
.logos-band {
  padding-block: 2.25rem;
  border-block: 1px solid var(--line);
  background: var(--white);
}

.logos-band__caption {
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-300);
}

.logos-band__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.75rem;
  margin-top: 1.4rem;
}

/* Wordmarks temporales — sustituir por SVG oficiales de cada marca */
.tech-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-300);
  transition: color .2s ease;
}
.tech-logo::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--grad-brand);
  opacity: .55;
}
.tech-logo:hover { color: var(--ink-700); }

/* ------------------------------------------------------------
   07. SOLUCIONES
   ------------------------------------------------------------ */
.solutions-grid {
  display: grid;
  gap: 1.5rem;
}

.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.solution-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-100);
  box-shadow: var(--shadow-md);
}

.solution-card__icon {
  display: grid;
  place-content: center;
  width: 54px; height: 54px;
  margin-bottom: 1.4rem;
  color: var(--primary-600);
  background: var(--primary-100);
  border-radius: var(--radius-md);
}

.solution-card__title { font-size: var(--fs-h3); }

.solution-card__text {
  flex: 1;
  margin-top: .7rem;
  color: var(--ink-500);
}

.solution-card__price {
  margin-top: 1.3rem;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}
.solution-card__price strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink-900);
}

.solution-card__link {
  display: inline-block;
  margin-top: .9rem;
  font-weight: 600;
}
.solution-card__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Tarjeta destacada: Mantenimiento Web */
.solution-card--highlight {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    var(--grad-brand) border-box;
}
.solution-card__flag {
  position: absolute;
  top: -12px;
  right: 1.5rem;
  padding: .25rem .8rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--white);
  background: var(--grad-brand);
  border-radius: 999px;
}

@media (min-width: 640px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .solutions-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }

/* ------------------------------------------------------------
   08. PLANES DE HOSTING
   ------------------------------------------------------------ */
/* Encabezado y toggle de esta sección alineados a la izquierda */
#planes-hosting .section__head {
  margin-inline: 0;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  text-align: left;
}

.billing-toggle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
  width: min(100%, 640px);
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: .4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.billing-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .65rem 1rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-500);
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
.billing-toggle__btn.is-active {
  color: var(--white);
  background: var(--primary-600);
  box-shadow: var(--shadow-brand);
}

.billing-toggle__save {
  padding: .15rem .55rem;
  font-size: .7rem;
  font-weight: 700;
  color: #067a57;
  background: var(--mint-100);
  border-radius: 999px;
}

.plans-grid {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-500);
  box-shadow: var(--shadow-md);
}

/* Tarjeta recomendada: borde azul + banner superior a todo el ancho */
.plan-card--featured {
  border: .5px solid var(--primary-600);
  box-shadow: var(--shadow-lg);
  padding-top: 2rem;
  overflow: visible;
}

.plan-card__badge {
  position: absolute;
  top: -18px;
  right: 1.5rem;
  z-index: 2;
  padding: .55rem 1.35rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  color: var(--white);
  background: var(--primary-600);
  border-radius: 999px;
  box-shadow: var(--shadow-brand);
}

.plan-card__name {
  font-size: clamp(1.45rem, 1.2rem + .8vw, 1.75rem);
  font-weight: 700;
}
.plan-card__name::after {
  content: "";
  display: block;
  width: 62px;
  margin-top: 1px;
  border-top: 1px solid var(--primary-600);
}

.plan-card__tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  margin-top: .95rem;
  padding: .38rem .8rem;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
  color: #067a57;
  background: var(--mint-100);
  border-radius: 999px;
}

.plan-card__tag-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
}

.plan-card__desc {
  margin-top: 1rem;
  max-width: 34ch;
  font-size: clamp(.95rem, .9rem + .16vw, 1rem);
  line-height: 1.55;
  color: var(--ink-500);
  min-height: 3.1em;
  text-wrap: pretty;
}

.price__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin-top: 1.35rem;
}

.price__old {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-500);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.price__discount {
  padding: .2rem .65rem;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink-900);
  background: var(--mint-100);
  border-radius: 999px;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .18rem;
  margin-top: .55rem;
  font-family: var(--font-display);
  color: var(--ink-900);
}
.price__currency { font-size: 1.05rem; font-weight: 700; }
.price__amount { font-size: clamp(1.7625rem, 3vw, 2.1625rem); font-weight: 800; letter-spacing: 0; }
.price__suffix {
  font-size: clamp(1.0125rem, 2vw, 1.2625rem);
  font-weight: 800;
}
.price__period {
  margin-left: .1rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-700);
}
.price__note {
  margin-top: .25rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-500);
}

.price__saving {
  width: fit-content;
  margin-top: .65rem;
  padding: .35rem .75rem;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-700);
  background: rgba(217, 251, 239, .45);
  border: 1px solid rgba(11, 201, 143, .35);
  border-radius: 999px;
}

.plan-card > .btn { margin-top: 1.5rem; }

.plan-card .btn--ghost:hover {
  color: var(--white);
  background: var(--primary-600);
  border-color: var(--primary-600);
  box-shadow: var(--shadow-brand);
}

.plan-card .btn--primary:hover {
  color: var(--primary-600);
  background: transparent;
  border-color: var(--primary-600);
  box-shadow: none;
}

.plan-card__features {
  flex: 1;
  display: grid;
  gap: .9rem;
  align-content: start;
  margin-top: 2rem;
  padding-top: 0;
  border-top: 1px solid var(--line);
}
.plan-card__features li:first-child { margin-top: 20px; }
.plan-card__features li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: .75rem;
  align-items: start;
  padding-left: 0;
  font-size: .94rem;
  line-height: 1.45;
  color: var(--ink-700);
}

.plan-feature__icon {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .16rem;
  color: var(--ink-500);
}

.plan-feature__icon--ok {
  color: var(--mint-600);
}

.plans-note {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* Estado del cargador/aviso de planes (ocupa todo el ancho del grid) */
.plans-status {
  grid-column: 1 / -1;
  padding: 2.5rem 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

@media (min-width: 900px) {
  .plans-grid { grid-template-columns: repeat(3, 1fr); }
  /* La tarjeta destacada sobresale ligeramente */
  .plan-card--featured { transform: translateY(-14px); }
  .plan-card--featured:hover { transform: translateY(-20px); }
}

@media (max-width: 560px) {
  .billing-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 24px;
  }

  .billing-toggle__btn {
    border-radius: 18px;
  }
}

/* ------------------------------------------------------------
   09. KOLPIX CARE — Mantenimiento web
   ------------------------------------------------------------ */
.care-values {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.75rem, 6vw, 4rem);
}

.care-value {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.4rem 1.5rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-md);
}

.care-value__num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--mint-500);
  white-space: nowrap;
}
.care-value__text { font-size: .95rem; }

.care-grid { display: grid; gap: 1.75rem; }

.care-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .25s ease, border-color .25s ease;
}
.care-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .25); }

.care-card--featured {
  background: rgba(15, 223, 160, .07);
  border-color: rgba(15, 223, 160, .45);
}
.care-card--featured .plan-card__badge {
  background: var(--mint-500);
  color: var(--ink-900);
  box-shadow: 0 10px 26px rgba(15, 223, 160, .3);
}

.care-card__name { font-size: 1.3rem; color: var(--white); }

.care-card__price { margin-top: .8rem; font-size: var(--fs-sm); color: var(--ink-300); }
.care-card__price strong {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--white);
}

.care-card__desc { margin-top: .4rem; font-size: var(--fs-sm); color: var(--ink-300); }

.care-card__list {
  flex: 1;
  display: grid;
  gap: .75rem;
  margin-block: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.care-card__list li {
  position: relative;
  padding-left: 1.7rem;
  font-size: .95rem;
  color: rgba(255, 255, 255, .85);
}
.care-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 800;
  color: var(--mint-500);
}

.care-note {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-300);
}

@media (min-width: 700px) { .care-values { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .care-grid { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------
   10. CARACTERÍSTICAS
   ------------------------------------------------------------ */
.features-grid { display: grid; gap: 1.5rem; }

.feature-card {
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.feature-card__icon {
  display: grid;
  place-content: center;
  width: 52px; height: 52px;
  margin-bottom: 1.3rem;
  color: var(--mint-600);
  background: var(--mint-100);
  border-radius: var(--radius-md);
}

.feature-card__title { font-size: 1.15rem; }
.feature-card__text { margin-top: .65rem; font-size: .95rem; color: var(--ink-500); }

@media (min-width: 640px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }

/* ------------------------------------------------------------
   11. TESTIMONIOS — Carrusel con scroll-snap
   ------------------------------------------------------------ */
.carousel { position: relative; }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(88%, 420px);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .5rem .25rem 1.5rem;
  scrollbar-width: none; /* Firefox */
}
.carousel__track::-webkit-scrollbar { display: none; }

.testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  scroll-snap-align: start;
}

.testimonial-card__stars {
  letter-spacing: .2em;
  color: #F5A623;
}

.testimonial-card__quote {
  flex: 1;
  margin-top: 1rem;
  color: var(--ink-700);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.avatar {
  display: grid;
  place-content: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--white);
  background: var(--grad-brand);
  border-radius: 50%;
}

.testimonial-card__name { font-style: normal; font-weight: 700; color: var(--ink-900); }
.testimonial-card__role { font-size: .82rem; color: var(--ink-500); }

.carousel__controls {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: .5rem;
}

.carousel__btn {
  display: grid;
  place-content: center;
  width: 46px; height: 46px;
  color: var(--ink-700);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.carousel__btn:hover {
  color: var(--white);
  background: var(--primary-600);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   12. MAPA DE RED GLOBAL
   ------------------------------------------------------------ */
.world-map {
  margin: 0;
  padding: clamp(.5rem, 2vw, 1.5rem);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-lg);
}

.world-map svg { width: 100%; height: auto; }

.map-grid path { stroke: rgba(255, 255, 255, .05); stroke-width: 1; fill: none; }

.map-land path { fill: rgba(255, 255, 255, .07); }

.map-links path {
  fill: none;
  stroke: rgba(15, 223, 160, .5);
  stroke-width: 1.6;
  stroke-dasharray: 5 7;
  animation: dashFlow 3.2s linear infinite;
}
@keyframes dashFlow { to { stroke-dashoffset: -48; } }

.pin-dot { fill: #7DD3FC; }
.pin-main { fill: var(--mint-500); }

.pin-pulse {
  fill: rgba(15, 223, 160, .22);
  transform-box: fill-box;
  transform-origin: center;
  animation: pinPulse 2.4s ease-out infinite;
}
@keyframes pinPulse {
  0%   { transform: scale(.45); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

.pin-label {
  font-family: var(--font-body);
  font-size: 13px;
  fill: rgba(255, 255, 255, .70);
}
.pin-label--main { font-weight: 700; fill: var(--mint-500); }

.map-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.map-stat {
  display: flex;
  flex-direction: column-reverse; /* número arriba, etiqueta abajo */
  gap: .3rem;
  padding: 1.5rem;
  text-align: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-md);
}
.map-stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--mint-500);
}
.map-stat dt { font-size: .85rem; color: var(--ink-300); }

@media (min-width: 900px) { .map-stats { grid-template-columns: repeat(4, 1fr); } }

/* Pines más legibles en pantallas pequeñas */
@media (max-width: 640px) {
  .pin-label { font-size: 17px; }
}

/* ------------------------------------------------------------
   13. SOPORTE
   ------------------------------------------------------------ */
.support__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: center;
}

.support__content .section__title { margin-top: 1rem; }
.support__content .section__lead { margin-top: 1.1rem; }

.channel-list {
  display: grid;
  gap: 1.4rem;
  margin-block: 2.25rem;
}

.channel {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.channel__icon {
  display: grid;
  place-content: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  color: var(--primary-600);
  background: var(--primary-100);
  border-radius: var(--radius-sm);
}

.channel__title { font-size: 1.05rem; }
.channel__text { margin-top: .2rem; font-size: .92rem; color: var(--ink-500); }

.support__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.support-stat {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.support-stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--primary-600);
}
.support-stat__label { font-size: .88rem; color: var(--ink-500); }

@media (min-width: 960px) {
  .support__grid { grid-template-columns: 1.1fr .9fr; }
}

/* ------------------------------------------------------------
   14. BLOG
   ------------------------------------------------------------ */
.blog-grid { display: grid; gap: 1.75rem; }

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.post-card__img {
  width: 100%;
  height: auto; /* evita que el atributo height fije la altura */
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.post-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.75rem 1.9rem;
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .82rem;
  color: var(--ink-300);
}

.post-card__title { margin-top: .9rem; font-size: 1.18rem; line-height: 1.35; }
.post-card__title a { color: var(--ink-900); }
.post-card__title a:hover { color: var(--primary-600); }

.post-card__excerpt { margin-top: .7rem; font-size: .93rem; color: var(--ink-500); }

@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------
   15. FAQ — Acordeón
   ------------------------------------------------------------ */
.faq { display: grid; gap: .9rem; }

.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq__item.is-open {
  border-color: var(--primary-100);
  box-shadow: var(--shadow-sm);
}

.faq__heading { margin: 0; }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.2rem 1.4rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink-900);
  border-radius: var(--radius-md);
}

/* Flecha del acordeón */
.faq__chevron {
  position: relative;
  flex-shrink: 0;
  width: 34px; height: 34px;
  background: var(--surface);
  border-radius: 50%;
  transition: background-color .25s ease;
}
.faq__chevron::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-700);
  border-bottom: 2px solid var(--ink-700);
  transform: rotate(45deg);
  transition: transform .3s ease, border-color .25s ease;
}
.faq__item.is-open .faq__chevron { background: var(--primary-100); }
.faq__item.is-open .faq__chevron::before {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--primary-600);
}

/* Animación de apertura con grid-template-rows (sin medir alturas en JS) */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.faq__answer-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s .35s;
}
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__item.is-open .faq__answer-inner { visibility: visible; transition: none; }

.faq__answer-inner p {
  padding: 0 1.4rem 1.4rem;
  color: var(--ink-500);
}

/* ------------------------------------------------------------
   16. CTA FINAL
   ------------------------------------------------------------ */
.cta-final { padding-top: 0; }

.cta-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.75rem, 5vw, 4rem);
  text-align: center;
  background:
    radial-gradient(500px 260px at 85% 0%, rgba(255, 255, 255, .16), transparent 60%),
    radial-gradient(420px 260px at 8% 100%, rgba(15, 223, 160, .25), transparent 60%),
    var(--grad-brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-brand);
}

.cta-panel__title { font-size: var(--fs-h2); color: var(--white); }

.cta-panel__text {
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, .85);
}

.cta-panel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-top: 2.25rem;
}

/* ------------------------------------------------------------
   17. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.25rem;
  background: var(--ink-900);
  color: var(--ink-300);
}

.footer__top {
  display: grid;
  gap: 2.75rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.brand--footer .brand__name { color: var(--white); }
.brand--footer .brand__name strong { color: var(--mint-500); }

.footer__tagline {
  max-width: 300px;
  margin-top: 1.1rem;
  font-size: .92rem;
}

.socials {
  display: flex;
  gap: .6rem;
  margin-top: 1.5rem;
}

.social-link {
  display: grid;
  place-content: center;
  width: 40px; height: 40px;
  color: var(--ink-300);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.social-link:hover {
  color: var(--white);
  background: var(--primary-600);
  transform: translateY(-2px);
}

.footer__col-title {
  margin-bottom: 1.1rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
}

.footer__col ul {
  display: grid;
  gap: .6rem;
  list-style: none;
  padding: 0;
}

.footer__col a {
  color: var(--ink-300);
  font-size: .92rem;
  transition: color .15s ease;
}
.footer__col a:hover { color: var(--mint-500); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 2rem;
}

.payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.payments__label { font-size: .82rem; color: var(--ink-300); }

.payments__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Badges de pago — sustituir por logos SVG oficiales */
.pay-badge {
  padding: .3rem .8rem;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .75);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
}
.pay-badge--epayco {
  color: var(--mint-500);
  border-color: rgba(15, 223, 160, .5);
}

.footer__copy { font-size: .82rem; color: rgba(255, 255, 255, .45); }

@media (min-width: 640px) {
  .footer__top { grid-template-columns: repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .footer__top { grid-template-columns: 1.6fr repeat(4, 1fr); }
  .footer__brand { grid-column: auto; }
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ------------------------------------------------------------
   18. FLOTANTES, ANIMACIONES Y ACCESIBILIDAD
   ------------------------------------------------------------ */

/* Botón flotante de WhatsApp */
.whatsapp-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: grid;
  place-content: center;
  width: 56px; height: 56px;
  color: var(--white);
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(37, 211, 102, .40);
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-fab:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 36px rgba(37, 211, 102, .5);
}

/* Animación de entrada al hacer scroll.
   Solo se activa si JS está disponible (html.js) para no ocultar
   contenido a usuarios sin JavaScript. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; }
}