/* =====================================================================
   Webs para Pymes — Hoja de estilos
   Diseno limpio y profesional, blanco + verde, mucho espacio en blanco.
   Acento de marca configurable en --accent. Mobile-first y accesible.
   ---------------------------------------------------------------------
   INDICE
   00 Tokens (variables)        06 Header / navegacion
   01 Reset                     07 Hero
   02 Tipografia / base         08 Secciones de contenido
   03 Layout / utilidades       09 Mecanismos (preloader, marquee...)
   04 Botones                   10 Footer / barras flotantes
   05 Componentes comunes       11 Responsive / reduced-motion
   ===================================================================== */

/* ==== 00 TOKENS ===================================================== */
:root {
  /* Paleta (blanco + verde) */
  --bg: #f8f8f6;              /* lienzo blanco calido (no blanco puro) */
  --surface: #ffffff;        /* tarjetas en blanco puro = profundidad sutil */
  --surface-2: #eef0ec;
  --text: #141518;           /* casi negro, no #000 */
  --text-muted: #5b5f66;
  --accent: #15803d;         /* verde de marca (profesional, accesible) — cambia esta linea */
  --accent-600: #11652f;     /* verde mas oscuro para hover */
  --accent-text: #ffffff;
  --dark: #0e1116;
  --dark-text: #f4f5f7;
  --dark-muted: #a7b0be;
  --accent-on-dark: #4ade80; /* verde brillante para fondos oscuros */
  --border: #e6e7e9;
  --border-dark: rgba(255, 255, 255, 0.12);

  /* Tipografia */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Escala fluida (compacta) */
  --step--2: clamp(0.68rem, 0.66rem + 0.1vw, 0.74rem);
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0: clamp(0.94rem, 0.91rem + 0.15vw, 1rem);
  --step-1: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --step-2: clamp(1.22rem, 1.1rem + 0.6vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-4: clamp(1.7rem, 1.4rem + 1.5vw, 2.55rem);
  --step-5: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-6: clamp(2.3rem, 1.7rem + 3vw, 4.6rem);

  /* Espaciado (mas compacto) */
  --space-section: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
  --container: 1180px;
  --container-narrow: 820px;
  --gutter: clamp(1.15rem, 0.85rem + 1.7vw, 2.25rem);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  /* Sombras y curvas */
  --shadow-sm: 0 2px 8px rgba(11, 13, 18, 0.05);
  --shadow: 0 18px 50px -22px rgba(11, 13, 18, 0.22);
  --shadow-lg: 0 40px 90px -40px rgba(11, 13, 18, 0.34);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 73px;
  --mobilebar-h: 0px; /* en escritorio no hay barra; en movil se pone a 58px */

  /* Tokens semanticos (unifican valores antes hardcodeados y divergentes) */
  --danger: #b3261e;          /* rojo de error/negativo */
  --danger-strong: #7f1d1d;
  --danger-bg: #fdecea;
  --star: #f5b50a;            /* dorado de las estrellas de valoracion */
  --border-strong: #c9cacc;   /* borde con contraste >=3:1 (WCAG 1.4.11) */
}

/* ==== 01 RESET ===================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
html.js [data-reveal] { opacity: 0; }
html:focus-within { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; }
svg { fill: currentColor; }
/* Respeta el fill="none" explicito de los iconos de linea (si no, la regla de
   arriba rellenaba sus formas cerradas — p.ej. el <rect> del icono de tarjeta
   del boton Pagar salia como un cuadrado blanco macizo). */
svg[fill="none"] { fill: none; }
input, button, textarea, select { font: inherit; color: inherit; }
/* iOS Safari hace ZOOM automatico al enfocar cualquier control con fuente < 16px,
   y la escala fluida deja los inputs en ~15px en movil. Forzamos 16px en pantallas
   estrechas para evitar ese salto en TODOS los formularios (contacto, acceso,
   cuestionario, chat, cupon). No afecta al escritorio. */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }
}
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:where(h1, h2, h3, h4) { line-height: 1.05; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.02em; }

/* Accesibilidad: foco visible */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: var(--text); color: var(--bg); padding: 0.7rem 1.2rem;
  border-radius: 0 0 10px 10px; z-index: 2000; transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==== 02 TIPOGRAFIA / BASE ========================================= */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block;
}
.section--dark .eyebrow { color: var(--accent-on-dark); }
.section--dark .eyebrow::before { background: var(--accent-on-dark); }

.lead { font-size: var(--step-1); color: var(--text-muted); line-height: 1.55; }
.muted { color: var(--text-muted); }
.accent { color: var(--accent); }

/* ==== 03 LAYOUT / UTILIDADES ====================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--dark { background: var(--dark); color: var(--dark-text); }
.section--dark .muted, .section--dark .lead { color: var(--dark-muted); }
.section--surface { background: var(--surface); }

.section__head { max-width: 720px; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { font-size: var(--step-4); margin-top: 0.85rem; }
.section__intro { margin-top: 1rem; font-size: var(--step-1); color: var(--text-muted); }
.section--dark .section__intro { color: var(--dark-muted); }

.grid { display: grid; gap: var(--gutter); }

/* ==== 04 BOTONES ================================================== */
.btn {
  --btn-bg: var(--text); --btn-fg: var(--bg);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem; padding: 0.9rem 1.5rem; border-radius: 100px; font-weight: 600;
  font-size: var(--step-0); line-height: 1; background: var(--btn-bg); color: var(--btn-fg);
  transition: transform 0.35s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  will-change: transform; white-space: nowrap;
}
.btn__label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; }
.btn svg { width: 1.15em; height: 1.15em; }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-text); box-shadow: 0 12px 26px -16px var(--accent); }
.btn--primary:hover { --btn-bg: var(--accent-600); transform: translateY(-2px); }
.btn--dark { --btn-bg: var(--text); --btn-fg: var(--bg); }
.btn--dark:hover { transform: translateY(-2px); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--dark); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text);
  border: 1.5px solid var(--border-strong); box-shadow: none; /* borde con contraste >=3:1 */
}
.btn--ghost:hover { border-color: var(--text); transform: translateY(-2px); }
.section--dark .btn--ghost { --btn-fg: #fff; border-color: var(--border-dark); }
.section--dark .btn--ghost:hover { border-color: #fff; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--step-1); }
.btn--block { width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
/* Estado deshabilitado: un boton inactivo NO debe parecer pulsable. */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; pointer-events: none;
}

/* enlace con subrayado animado */
.link-underline {
  position: relative; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ==== 05 COMPONENTES COMUNES (tarjetas, etc.) ==================== */
.card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.3vw, 2rem);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }

.tag {
  display: inline-block; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em;
  padding: 0.35rem 0.8rem; border-radius: 100px; background: var(--surface-2); color: var(--text-muted);
}

/* ==== 09 MECANISMOS ============================================== */

/* Reveal on scroll (suave y rapido) */
html.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 55ms);
}
html.js [data-reveal="left"] { transform: translateX(-32px); }
html.js [data-reveal="right"] { transform: translateX(32px); }
html.js [data-reveal="scale"] { transform: scale(0.96); }
html.js [data-reveal="none"] { transform: none; }
html.js [data-reveal].is-inview { opacity: 1; transform: none; }

/* Texto del hero (split en palabras) */
[data-hero-title] .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
[data-hero-title] .word-inner { display: inline-block; will-change: transform; }
html.js [data-hero-fade] { opacity: 0; }
html.js [data-hero-fade].is-in { opacity: 1; }

/* Fallback sin JavaScript: nunca dejar el preloader tapando la pagina */
html.no-js .preloader { display: none !important; }

/* Cursor personalizado: desactivado para maxima fluidez y accesibilidad
   (se conserva el puntero nativo; los botones magneticos siguen activos). */
.cursor { display: none !important; }

/* Preloader (pantalla de carga editorial) */
.preloader {
  position: fixed; inset: 0; z-index: 10000; background: #0b0d11; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.5rem, 4vw, 3rem);
  transition: transform 0.9s var(--ease), opacity 0.5s var(--ease) 0.2s;
}
.preloader.is-hidden { transform: translateY(-101%); pointer-events: none; }
.preloader__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.preloader__brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.preloader__mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.preloader__mark svg { width: 17px; height: 17px; }
.preloader__tag { font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dark-muted); }
.preloader__center { flex: 1; display: grid; place-items: center; }
.preloader__count { font-family: var(--font-display); font-weight: 600; font-size: clamp(4.5rem, 24vw, 15rem); line-height: 0.85; letter-spacing: -0.05em; color: #fff; }
.preloader__count::after { content: "%"; font-size: 0.26em; vertical-align: super; color: var(--accent-on-dark); margin-left: 0.12em; }
.preloader__bottom { display: flex; flex-direction: column; gap: 0.85rem; }
.preloader__status { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-muted); }
.preloader__track { height: 2px; width: 100%; background: rgba(255,255,255,0.14); overflow: hidden; }
.preloader__bar { display: block; height: 100%; background: var(--accent-on-dark); transform-origin: left; transform: scaleX(0); }
@media (max-width: 600px) { .preloader__tag { display: none; } }

/* Marquee */
.marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: inline-flex; gap: 1rem; white-space: nowrap; will-change: transform; }
.marquee.is-ready .marquee__track { animation: marquee var(--marquee-duration, 30s) linear infinite; }
.marquee.is-ready .marquee__track.is-reverse { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(var(--marquee-distance, -50%)); } }

/* Chips de sectores */
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto;
  padding: 0.65rem 1.15rem; border: 1px solid var(--border); border-radius: 100px;
  font-weight: 500; font-size: var(--step-0); background: var(--bg); transition: all 0.3s var(--ease);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.section--dark .chip { border-color: var(--border-dark); background: rgba(255,255,255,0.03); }

/* ==== 06 HEADER / NAVEGACION ===================================== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  transition: transform 0.4s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.header.is-scrolled {
  background: rgba(248, 248, 246, 0.92);
  box-shadow: 0 1px 0 var(--border);
}
.header.is-hidden { transform: translateY(-100%); }
/* (Ya no hace falta anclar las acciones a una columna: con flex y
   margin-left:auto siempre quedan pegadas a la derecha.) */
/* Mismas medidas que la cabecera de la portada (index.html), para que sea
   exactamente la misma barra en todo el sitio: flex, 16 px de separacion,
   marca a la izquierda, enlaces a continuacion y acciones a la derecha. */
.header__inner { display: flex; align-items: center; gap: 16px; height: var(--header-h);
  /* 24 px fijos, como la portada: si no, el logo arranca en un punto
     distinto en cada pagina segun el ancho de la pantalla. */
  padding-inline: 24px; max-width: 1180px; }
.header__inner > .brand { flex: 0 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.brand__mark {
  width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center; font-size: 1rem; flex: 0 0 auto;
}
.nav { display: none; align-items: center; gap: 18px; flex: 0 0 auto; }
.nav__link {
  position: relative; padding: 0.5rem 0; border-radius: 100px; font-weight: 500; font-size: 13.5px;
  color: var(--text-muted); transition: color 0.25s var(--ease); white-space: nowrap;
}
.nav__link:hover, .nav__link.is-active { color: var(--text); }
.nav__link.is-active::before {
  content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.header__actions { display: flex; align-items: center; gap: 18px; margin-left: auto; flex: 0 0 auto; }
.header__cta { display: none; }
/* En moviles pequenos (<=479px) el header queda como logo + menu (hamburguesa):
   el CTA "Pide presupuesto gratis" ya esta dentro del menu movil y del pie, asi
   que aqui lo ocultamos para que la barra no se sature ni desborde en pantallas
   estrechas (iPhone SE/mini, Android 360-393). En tablet y escritorio se mantiene. */
@media (max-width: 479px) {
  .header__actions .btn--primary { display: none; }
}

.burger {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  display: grid; place-items: center; gap: 5px; background: var(--bg);
}
.burger span { display: block; width: 18px; height: 2px; background: var(--text); transition: transform 0.35s var(--ease), opacity 0.2s; }
body.nav-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }

/* Menu movil: panel compacto tipo dropdown + velo detras */
.nav-mobile {
  position: fixed; inset: 0; z-index: 850;
  /* velo/backdrop semitransparente que cubre toda la web */
  background: rgba(10, 12, 14, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: block; opacity: 0; pointer-events: none;
  /* visibility:hidden saca sus 10 enlaces del orden de tabulacion y del arbol
     de accesibilidad mientras esta cerrado. Con solo opacity:0 seguian ahi:
     al tabular desde la cabecera habia que pasar por todo el menu invisible
     (y en escritorio, ademas, duplicaba los enlaces de la barra). */
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s 0.3s;
}
body.nav-open .nav-mobile {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity 0.3s var(--ease);
}

/* El panel: pequeno, anclado arriba a la derecha bajo la cabecera */
.nav-mobile__panel {
  position: absolute; top: calc(var(--header-h) + 0.5rem); right: var(--gutter);
  width: min(320px, 88vw); max-height: calc(100vh - var(--header-h) - 1.5rem);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--dark); color: #fff;
  border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 0.75rem; display: flex; flex-direction: column; gap: 0.1rem;
  transform: translateY(-8px) scale(0.98); transform-origin: top right; opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
body.nav-open .nav-mobile__panel { transform: translateY(0) scale(1); opacity: 1; }

.nav-mobile__link {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.01em; padding: 0.6rem 0.65rem; border-radius: calc(var(--radius) - 6px);
  color: #fff; transition: color 0.2s, background 0.2s;
}
.nav-mobile__link:hover { color: var(--accent-on-dark); background: rgba(255, 255, 255, 0.06); }
.nav-mobile__footer {
  margin-top: 0.5rem; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-direction: column; gap: 0.6rem;
}

/* ==== 07 HERO ==================================================== */
.hero { position: relative; min-height: 88svh; display: flex; align-items: center; padding-top: calc(var(--header-h) + 2rem); padding-bottom: 3rem; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(60px); }
.hero__blob--1 { width: 42vw; height: 42vw; right: -10vw; top: -8vw; background: radial-gradient(circle, var(--accent), transparent 68%); opacity: 0.14; }
.hero__blob--2 { width: 34vw; height: 34vw; left: -12vw; bottom: -14vw; background: radial-gradient(circle, #34d399, transparent 70%); opacity: 0.12; }
.hero__grid-overlay {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px; -webkit-mask-image: radial-gradient(circle at 70% 20%, #000, transparent 60%); mask-image: radial-gradient(circle at 70% 20%, #000, transparent 60%); opacity: 0.5;
}
.hero__inner { width: 100%; display: grid; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 980px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; } }
.hero__content { min-width: 0; }
.hero__eyebrow { margin-bottom: 1.25rem; }
.hero__title { font-size: var(--step-6); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.hero__title .accent { color: var(--accent); }
.hero__subtitle { margin-top: 1.5rem; max-width: 40ch; font-size: var(--step-1); color: var(--text-muted); }
.hero__actions { margin-top: 2rem; }
.hero__proof { margin-top: 1.25rem; display: flex; align-items: center; gap: 0.6rem; font-size: var(--step--1); color: var(--text-muted); max-width: 52ch; }
.hero__proof svg { color: var(--accent); width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.hero__stats { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); border-top: 1px solid var(--border); padding-top: 1.5rem; }
.stat__value { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.stat__label { margin-top: 0.4rem; font-size: var(--step--1); color: var(--text-muted); max-width: 18ch; }
.hero__scroll { position: absolute; left: var(--gutter); bottom: 1.25rem; display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--step--1); color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.hero__scroll .dot { width: 26px; height: 40px; border: 1.5px solid var(--border); border-radius: 100px; position: relative; }
.hero__scroll .dot::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 4px; background: var(--accent); transform: translateX(-50%); animation: scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot { 0%, 100% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%, 12px); } }

/* Mockup de navegador (visual del hero) */
.hero__visual { position: relative; display: none; }
@media (min-width: 980px) { .hero__visual { display: block; } }

/* ===== Hero: nube de ventajas flotantes (solo escritorio) ===== */
.hero-cloud { position: relative; width: 100%; height: 480px; }
.hero-cloud__blob { position: absolute; border-radius: 50%; z-index: 0; }
.hero-cloud__blob--a { width: 270px; height: 270px; top: 2%; right: 0; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); }
.hero-cloud__blob--b { width: 230px; height: 230px; bottom: 0; left: 0; background: radial-gradient(circle, color-mix(in srgb, var(--accent-on-dark, #4ade80) 22%, transparent), transparent 70%); }

.hero-cloud__core {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 206px; padding: 26px 20px 18px; text-align: center;
  background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%);
  animation: cloudFloatCore 9s ease-in-out infinite;
}
.hero-cloud__gauge { position: relative; width: 128px; height: 128px; margin: 0 auto; }
.hero-cloud__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.hero-cloud__track { fill: none; stroke: var(--surface-2); stroke-width: 10; }
.hero-cloud__arc { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; animation: cloudArc 1.6s 0.3s ease-out forwards; }
.hero-cloud__num { position: absolute; inset: 0; display: grid; place-content: center; line-height: 1; gap: 2px; }
.hero-cloud__num strong { font-family: var(--font-display); font-size: 2.5rem; color: var(--text); }
.hero-cloud__num span { font-size: 0.8rem; color: var(--text-muted); }
.hero-cloud__corelabel { margin: 12px 0 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.95rem; color: var(--accent-600); }
.hero-cloud__corelabel svg { width: 1.05em; height: 1.05em; }

.hero-cloud__chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--border); border-radius: 100px;
  padding: 9px 16px 9px 9px; box-shadow: 0 16px 34px -18px rgba(0,0,0,0.30);
  font-size: 0.9rem; font-weight: 600; color: var(--text); white-space: nowrap;
  animation: cloudFloat calc(6s + var(--i) * 0.7s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.9s);
}
.hero-cloud__chip b { color: var(--accent-600); }
.hero-cloud__ico { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.hero-cloud__ico svg { width: 18px; height: 18px; }
.hero-cloud__chip--a { top: 1%; left: 1%; }
.hero-cloud__chip--b { top: 15%; right: 0; }
.hero-cloud__chip--c { top: 53%; left: 0; }
.hero-cloud__chip--d { bottom: 13%; left: 24%; }
.hero-cloud__chip--e { bottom: 1%; right: 1%; }

@keyframes cloudFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes cloudFloatCore { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 9px)); } }
@keyframes cloudArc { to { stroke-dashoffset: 20; } }
@media (prefers-reduced-motion: reduce) {
  .hero-cloud__core, .hero-cloud__chip { animation: none; }
  .hero-cloud__arc { animation: none; stroke-dashoffset: 20; }
}
.mockup { position: relative; border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden; transform: rotate(0.4deg); }
.mockup__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.mockup__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); display: block; flex: 0 0 auto; }
.mockup__url { margin-left: 10px; font-size: 0.72rem; color: var(--text-muted); background: var(--bg); padding: 3px 12px; border-radius: 100px; }
.mockup__screen { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mockup__nav { display: flex; align-items: center; gap: 8px; }
.mockup__brand { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--text); }
.mockup__dot { width: 16px; height: 16px; border-radius: 5px; background: var(--accent); display: block; flex: 0 0 auto; }
.mockup__links { display: flex; gap: 11px; margin-left: auto; }
.mockup__links span { font-size: 0.66rem; color: var(--text-muted); font-weight: 500; }
.mockup__navbtn { font-size: 0.66rem; font-weight: 600; color: #fff; background: var(--accent); padding: 4px 10px; border-radius: 100px; flex: 0 0 auto; }
.mockup__body { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.mockup__kicker { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin: 0; }
.mockup__title { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.12; letter-spacing: -0.02em; color: var(--text); margin: 0; }
.mockup__text { font-size: 0.72rem; line-height: 1.4; color: var(--text-muted); margin: 0; }
.mockup__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 0.72rem; font-weight: 600; color: #fff; background: var(--accent); padding: 7px 14px; border-radius: 100px; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.mockup__cta svg { width: 0.85em; height: 0.85em; }
.mockup__photo { height: 92px; border-radius: 10px; overflow: hidden; }
.mockup__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mockup__feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mockup__feat { display: flex; flex-direction: column; gap: 7px; font-size: 0.62rem; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 9px; line-height: 1.2; }
.mockup__featico { width: 18px; height: 18px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 18%, transparent); display: block; }
.mockup__chip {
  position: absolute; display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--dark); color: #fff; font-size: 0.78rem; font-weight: 600;
  padding: 0.55rem 0.9rem; border-radius: 100px; box-shadow: var(--shadow);
}
.mockup__chip svg { width: 1em; height: 1em; color: var(--accent-on-dark); }
.mockup__chip--edit { top: 16px; right: -14px; }
.mockup__chip--speed { bottom: 18px; left: -16px; background: #fff; color: var(--text); border: 1px solid var(--border); }
.mockup__chip--speed svg { color: var(--accent); }
/* Mockup "vivo": marca de agua de sector que cambia + transicion suave */
.mockup__screen { position: relative; overflow: hidden; }
.mockup__ghost { position: absolute; top: 38px; right: 16px; font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; letter-spacing: -0.03em; line-height: 1; color: color-mix(in srgb, var(--accent) 15%, transparent); pointer-events: none; transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); }
.mockup__url { transition: opacity 0.28s var(--ease); }
.mockup.is-swapping .mockup__url { opacity: 0; }
.mockup.is-swapping .mockup__ghost { opacity: 0; transform: translateY(8px); }

/* ===== Mockup vivo: animaciones sutiles y premium (sin jank) =====
   Solo transform/opacity (compositor). El ciclo de sectores del JS sigue
   intacto: aqui no tocamos opacidad de .mockup__url ni .mockup__ghost. */
.mockup {
  animation: mockupFloat 7s var(--ease) infinite;
  will-change: transform;
}
@keyframes mockupFloat {
  0%, 100% { transform: rotate(0.4deg) translateY(0); }
  50%      { transform: rotate(0.4deg) translateY(-9px); }
}

/* Brillo suave que recorre la pantalla del navegador */
.mockup__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: mockupSheen 7s var(--ease) infinite;
}
@keyframes mockupSheen {
  0%, 70%, 100% { transform: translateX(-120%); }
  85%           { transform: translateX(120%); }
}

/* (Se quito el shimmer tipo "esqueleto de carga": el mockup ahora parece una
   web real, no un placeholder. Se mantiene el flotar, el brillo y los chips.) */

/* Las "pestañas" del navegador laten despacio (acento que respira) */
.mockup__bar i:first-child { animation: mockupPulse 3.6s var(--ease) infinite; }
@keyframes mockupPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Los chips flotantes flotan en contrafase para dar profundidad */
.mockup__chip--edit  { animation: mockupChipA 6s var(--ease) infinite; }
.mockup__chip--speed { animation: mockupChipB 6s var(--ease) infinite; }
@keyframes mockupChipA {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@keyframes mockupChipB {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* El rayo del chip de velocidad brilla puntualmente */
.mockup__chip--speed svg { animation: mockupBolt 4.5s steps(1, end) infinite; }
@keyframes mockupBolt {
  0%, 88%, 100% { filter: none; opacity: 1; }
  92%           { filter: drop-shadow(0 0 5px var(--accent)); opacity: 0.55; }
  94%           { filter: drop-shadow(0 0 7px var(--accent)); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mockup,
  .mockup__screen::after,
  .mockup__line, .mockup__btn, .mockup__cards span,
  .mockup__bar i:first-child,
  .mockup__chip--edit, .mockup__chip--speed,
  .mockup__chip--speed svg { animation: none !important; }
  .mockup__line, .mockup__btn, .mockup__cards span { background-image: none; }
  .mockup { transform: rotate(0.4deg); }
}

/* Barra de progreso de lectura (fina, arriba del todo) */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1500; pointer-events: none; }
.scroll-progress__bar { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--accent-on-dark)); }

/* Tira de confianza */
.trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); }
.trust__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; padding-block: 1.1rem; }
.trust__item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); font-weight: 500; color: var(--text-muted); }
.trust__item svg { width: 1.05em; height: 1.05em; color: var(--accent); flex: 0 0 auto; }

/* ==== 08 SECCIONES ============================================== */

/* Como funciona — pasos */
.steps { display: grid; gap: clamp(1.1rem, 0.9rem + 1.3vw, 1.75rem); grid-template-columns: 1fr; counter-reset: step; }
.step { position: relative; padding: clamp(1.4rem, 1rem + 1.3vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.step__num { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; color: var(--accent); line-height: 1; opacity: 0.9; }
.step__title { font-size: var(--step-2); margin-top: 0.85rem; }
.step__text { margin-top: 0.6rem; color: var(--text-muted); }

/* Que incluye — features (aireado, sin cajas pesadas) */
.features { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); grid-template-columns: 1fr; }
.feature { background: none; padding: 0; }
.feature__icon { width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); display: grid; place-items: center; margin-bottom: 1rem; }
.feature__icon svg { width: 22px; height: 22px; }
.feature__title { font-size: var(--step-1); }
.feature__text { margin-top: 0.5rem; color: var(--text-muted); font-size: var(--step-0); }

/* Sectores */
.sectors__marquees { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.sectors__footnote { margin-top: 2rem; text-align: center; color: var(--text-muted); }
.section--dark .sectors__footnote { color: var(--dark-muted); }

/* Ejemplos / portfolio */
.work__grid { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
.work-card { display: block; color: inherit; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.work-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.work-card__cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-weight: 600; font-size: var(--step--1); color: var(--accent); }
.work-card__cta svg { width: 1em; height: 1em; transition: transform 0.3s var(--ease); }
.work-card:hover .work-card__cta svg { transform: translateX(4px); }
.work-card__media { aspect-ratio: 16 / 11; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--surface), var(--surface-2)); display: grid; place-items: center; }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.work-card__placeholder { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); color: color-mix(in srgb, var(--text) 14%, transparent); letter-spacing: -0.03em; }
.work-card__browser { position: absolute; inset: 14px 14px auto 14px; height: 26px; background: var(--bg); border-radius: 8px; display: flex; align-items: center; gap: 6px; padding-inline: 10px; box-shadow: var(--shadow-sm); }
.work-card__browser i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); display: block; }
.work-card__body { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.55rem; }
.work-card__title { font-size: var(--step-1); font-family: var(--font-display); font-weight: 600; }
.work-card__desc { color: var(--text-muted); font-size: var(--step-0); }
.work-card__tag { position: absolute; top: 14px; right: 14px; z-index: 2; }

/* Por que yo — razones */
.reasons { display: grid; gap: clamp(1.1rem, 0.9rem + 1.3vw, 1.75rem); grid-template-columns: 1fr; counter-reset: reason; }
.reason { display: flex; gap: 1.25rem; padding-block: 1.4rem; border-top: 1px solid var(--border-dark); }
.reason:first-child { border-top: none; }
.reason__num { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--accent-on-dark); flex: 0 0 auto; width: 2.5rem; }
.reason__title { font-size: var(--step-2); }
.reason__text { margin-top: 0.5rem; color: var(--dark-muted); max-width: 60ch; }

/* Precios */
.pricing { display: grid; gap: var(--gutter); grid-template-columns: 1fr; align-items: start; }
.plan { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); background: var(--bg); display: flex; flex-direction: column; gap: 1rem; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.plan--featured { background: var(--dark); color: #fff; border-color: var(--dark); box-shadow: var(--shadow-lg); }
.plan--featured .plan__period, .plan--featured .plan__tagline, .plan--featured .plan__features li { color: var(--dark-muted); }
.plan__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-text); padding: 0.35rem 1rem; border-radius: 100px; font-size: var(--step--1); font-weight: 600; }
.plan__badge--soft { background: var(--dark); color: #fff; }
.plan--maintenance { border-color: var(--accent); }
.plan__hint { font-size: var(--step--1); color: var(--accent); font-weight: 600; margin-top: -0.25rem; }
.plan__name { font-size: var(--step-2); font-family: var(--font-display); }
.plan__tagline { color: var(--text-muted); font-size: var(--step--1); }
.plan__price { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.plan__period { font-size: var(--step--1); color: var(--text-muted); }
.plan__features { display: flex; flex-direction: column; gap: 0.65rem; margin-block: 0.5rem; }
.plan__features li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--step-0); color: var(--text); }
.plan--featured .plan__features li { color: var(--dark-text); }
.plan__features svg { width: 1.2em; height: 1.2em; color: var(--accent); flex: 0 0 auto; margin-top: 0.2em; }
.plan--featured .plan__features svg { color: var(--accent-on-dark); }
.plan__cta { margin-top: auto; }
.pricing__note { margin-top: 2rem; text-align: center; color: var(--text-muted); }

/* FAQ */
.faq { max-width: var(--container-narrow); margin-inline: auto; }
@media (min-width: 820px) {
  .faq { max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; align-items: start; }
}
.faq__item { border-bottom: 1px solid var(--border); }
.faq__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); transition: color 0.25s var(--ease); }
.faq__trigger:hover { color: var(--accent); }
.faq__icon { position: relative; flex: 0 0 auto; width: 24px; height: 24px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; transition: transform 0.35s var(--ease); }
.faq__icon::before { width: 15px; height: 2px; transform: translate(-50%, -50%); }
.faq__icon::after { width: 2px; height: 15px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__item.is-open .faq__trigger { color: var(--accent); }
.faq__panel { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease); }
.faq__answer { padding-bottom: 1.4rem; color: var(--text-muted); max-width: 64ch; }

/* CTA final */
.cta-final { text-align: center; }
.cta-final__title { font-size: var(--step-5); letter-spacing: -0.03em; max-width: 18ch; margin-inline: auto; }
.cta-final__text { margin-top: 1.1rem; font-size: var(--step-1); color: var(--dark-muted); max-width: 52ch; margin-inline: auto; }
.cta-final__actions { margin-top: 2rem; justify-content: center; }

/* Contacto */
.contact__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); grid-template-columns: 1fr; }
.contact__form { display: grid; gap: 1rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-weight: 600; font-size: var(--step--1); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.85rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
/* Estado de ERROR a nivel de campo (aria-invalid o .field.is-err). */
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"],
.field.is-err input, .field.is-err textarea, .field.is-err select { border-color: var(--danger); }
.field input[aria-invalid="true"]:focus, .field.is-err input:focus,
.field textarea[aria-invalid="true"]:focus, .field.is-err textarea:focus,
.field select[aria-invalid="true"]:focus, .field.is-err select:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }
/* El fondo amarillo del autocompletado de Chrome pisa el diseno: lo neutralizamos. */
.field input:-webkit-autofill, .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 100px var(--bg) inset; caret-color: var(--text);
}
/* OJO: esta clase se usa SOLA (sin .field) en reservar.html, contratar.html,
   panel/registro.php y el blog, asi que tiene que valerse por si misma. Antes
   solo traia flex-direction y el gap no hacia nada: la casilla y el texto
   salian pegados, en linea y con el tamano por defecto del navegador. */
/* OJO: esto NO puede ser display:flex. En un contenedor flex, cada trozo de
   texto suelto y cada <a> de dentro se convierte en una columna propia, y la
   frase "He leido y acepto los terminos y condiciones y la politica de
   privacidad" se partia en cinco bloques apilados, justo antes de pagar.
   Con la casilla en posicion absoluta el texto fluye como lo que es: una
   frase. */
.field--check {
  display: block; position: relative; padding-left: 1.75rem;
  font-size: var(--step--1); color: var(--text-muted); line-height: 1.5;
  cursor: pointer;
}
.field--check input {
  position: absolute; left: 0; top: 0.15rem; margin: 0; accent-color: var(--accent);
  /* 18 px: la casilla de 13 px del navegador es dificil de acertar con el dedo. */
  width: 18px; height: 18px;
}
.field--check a { color: var(--accent); }
.form-status { padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: var(--surface); font-size: var(--step-0); }
.form-status.is-success { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-600); }

.contact__aside { display: flex; flex-direction: column; gap: 1rem; }
.contact-method { display: flex; align-items: center; gap: 1rem; padding: 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.4s var(--ease), border-color 0.3s; }
.contact-method:hover { transform: translateY(-3px); border-color: var(--accent); }
.contact-method__icon { width: 48px; height: 48px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); display: grid; place-items: center; flex: 0 0 auto; font-size: 1rem; }
.contact-method__label { display: block; font-size: var(--step--1); color: var(--text-muted); margin-bottom: 0.1rem; }
.contact-method__value { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.25; overflow-wrap: anywhere; }
.contact-method > span:last-child { min-width: 0; }

/* ==== 10 FOOTER / BARRAS FLOTANTES =============================== */
.footer { background: var(--dark); color: var(--dark-text); padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem; }
.footer__top { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border-dark); }
.footer__tagline { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; max-width: 22ch; }
.footer__cols { display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__col h3, .footer__col h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--dark-muted); margin-bottom: 1rem; font-family: var(--font-body); font-weight: 600; }
.footer__col li { margin-bottom: 0.6rem; }
.footer__col a { color: var(--dark-text); opacity: 0.85; transition: opacity 0.2s, color 0.2s; }
.footer__col a:hover { opacity: 1; color: var(--accent-on-dark); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 2rem; color: var(--dark-muted); font-size: var(--step--1); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__legal a:hover { color: #fff; }

/* =====================================================================
   BARRA FIJA DE CONTACTO EN MOVIL
   ---------------------------------------------------------------------
   Es el "ancla" del movil: pase lo que pase y por donde vaya el visitante,
   siempre tiene a un dedo Llamar, WhatsApp y reservar. En escritorio no
   aparece (ahi manda la cabecera y el boton flotante).
   ===================================================================== */
.mobilebar { display: none; }
@media (max-width: 999px) {
  .mobilebar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 940;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px -12px rgba(20, 21, 24, 0.35);
    /* Respeta la franja del iPhone (barra de gestos) */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobilebar__btn {
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    min-height: 58px; padding: 0.7rem 0.4rem;
    font-weight: 700; font-size: 0.86rem; line-height: 1.2;
    color: var(--text); text-align: center;
    border-right: 1px solid var(--border);
  }
  .mobilebar__btn:last-child { border-right: 0; }
  .mobilebar__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .mobilebar__btn--wa { background: #ffffff; color: #0e1116; }
  .mobilebar__btn--wa svg { color: #25D366; }
  .mobilebar__btn--cta { background: var(--accent); color: #fff; font-weight: 800; }
  .mobilebar__btn:active { filter: brightness(0.96); }
  /* Con la barra puesta, el boton flotante de WhatsApp sobra: son lo mismo. */
  .wa-fab { display: none !important; }
}
/* Hueco al final de la pagina para que la barra no tape el pie */
@media (max-width: 999px) { :root { --mobilebar-h: 58px; } }

/* Boton flotante de WhatsApp (FAB) */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 24px -8px rgba(37, 211, 102, 0.55), var(--shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.wa-fab__icon { width: 30px; height: 30px; display: block; }
.wa-fab:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -10px rgba(37, 211, 102, 0.6), var(--shadow-lg); }
.wa-fab:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px #25D366, var(--shadow); }
/* En movil: un poco mas pequeno y por encima de la barra de contacto inferior */
@media (max-width: 999px) {
  .wa-fab { width: 50px; height: 50px; bottom: calc(var(--mobilebar-h) + 1rem); right: 1rem; }
  .wa-fab__icon { width: 27px; height: 27px; }
}
/* No colisionar con el boton "volver arriba" cuando este aparece */
.to-top.is-visible ~ .wa-fab { bottom: calc(1.5rem + 46px + 0.75rem); }
@media (max-width: 999px) {
  .to-top.is-visible ~ .wa-fab { bottom: calc(var(--mobilebar-h) + 1rem + 46px + 0.75rem); }
}
@media print { .wa-fab { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: box-shadow 0.3s var(--ease); }
  .wa-fab:hover { transform: none; }
}

/* Back to top */
.to-top { position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 700; width: 46px; height: 46px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease); }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); }

/* Cookie banner */
.cookie { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 950; max-width: 460px; background: var(--dark); color: #fff; border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-lg); transform: translateY(160%); transition: transform 0.5s var(--ease); }
.cookie.is-visible { transform: translateY(0); }
.cookie__text { font-size: var(--step--1); color: var(--dark-muted); }
.cookie__text a { color: #fff; text-decoration: underline; }
.cookie__actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.cookie .btn { padding: 0.7rem 1.2rem; font-size: 0.9rem; }

/* ==== RESPONSIVE ================================================ */
@media (min-width: 600px) {
  .form-row { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .work__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 880px) {
  .footer__top { grid-template-columns: 1.2fr 1.8fr; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
  .contact__grid { grid-template-columns: 1.3fr 0.7fr; }
  .pricing { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .steps--4 { grid-template-columns: repeat(4, 1fr); }
  .steps--3 { grid-template-columns: repeat(3, 1fr); }
  .features { grid-template-columns: repeat(3, 1fr); }
  .reason__num { width: 4rem; font-size: var(--step-2); }
  .mobilebar { display: none; }
}
/* Cabecera de escritorio completa: a partir de 1200px hay sitio holgado para la
   marca + nav (6 enlaces) + acciones (Area de clientes + "Pide tu web"). Por
   debajo se usa el menu movil (burger). Antes el toggle estaba en 1000px y, con
   la nav crecida a 8 enlaces, el CTA quedaba recortado fuera del viewport. */
/* 1000 px: el MISMO corte que la portada. Antes las interiores esperaban a
   1200 px y en un portatil de 1100 px la portada ensenaba el menu completo
   y el blog una hamburguesa. A 900 px no cabia: la barra se salia 60 px. */
@media (min-width: 1000px) {
  .nav { display: flex; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
}

/* En movil las barras fijas inferiores no deben taparse entre si */
@media (max-width: 999px) {
  body { padding-bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px)); }
  .cookie { bottom: calc(var(--mobilebar-h) + 1rem); left: 0.75rem; right: 0.75rem; }
  .to-top { bottom: calc(var(--mobilebar-h) + 1rem); }
}
/* En pantallas de poca altura, oculta el indicador de scroll para evitar solapes */
@media (max-height: 720px) {
  .hero__scroll { display: none; }
}

/* ==== ICONOS + AJUSTES FINOS ==================================== */
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon--solid { fill: currentColor; stroke: none; }
/* Robustez de iconos: en Chrome un <svg> con viewBox y SIN width/height se
   estira hasta LLENAR el contenedor ("icono gigante"); Safari no. En el shell
   de la app/admin/login todos los SVG son iconos pequenos, asi que los
   acotamos. No afecta a los SVG que ya declaran width/height ni reduce los
   iconos reales (todos <= estos topes). */
.app-body svg:not([width]):not([height]),
.auth-wrap svg:not([width]):not([height]),
.admin-auth svg:not([width]):not([height]) { max-width: 28px; max-height: 28px; }
.sr-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero__title .line { display: block; }
.hero__title .line--accent { color: var(--accent); }
.brand__mark .icon { width: 18px; height: 18px; }
.contact-method__icon .icon { width: 24px; height: 24px; }
.hero__scroll .icon { width: 1em; height: 1em; }

/* ==== PAGINAS LEGALES (prose) =================================== */
.legal-main { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-bottom: var(--space-section); }
.legal-header { position: sticky; top: 0; z-index: 900; background: var(--bg); border-bottom: 1px solid var(--border); }
.legal-header .header__inner { height: var(--header-h); }
.prose { max-width: 760px; margin-inline: auto; }
.prose h1 { font-size: var(--step-4); margin-bottom: 0.5rem; }
.prose .updated { color: var(--text-muted); font-size: var(--step--1); margin-bottom: 2.5rem; display: block; }
.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose h3 { font-size: var(--step-1); margin-top: 1.75rem; margin-bottom: 0.5rem; }
.prose p, .prose li { color: var(--text-muted); margin-bottom: 1rem; }
.prose ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1rem; }
.prose ul li { margin-bottom: 0.5rem; }
.prose a { color: var(--accent); text-decoration: underline; }
.prose .note { background: var(--surface); border-left: 3px solid var(--accent); padding: 1rem 1.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--step--1); }
.prose strong { color: var(--text); }
.legal-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: var(--step--1); display: block; overflow-x: auto; }
.legal-table th, .legal-table td { text-align: left; padding: 0.7rem 0.9rem; border: 1px solid var(--border); }
.legal-table th { background: var(--surface); }

/* ==== 12 REDISENO A MEDIDA (secciones) ========================== */

/* Header: boton "Area de clientes" */
.header__login {
  display: none; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.9rem; line-height: 1;
  white-space: nowrap; flex: 0 0 auto;
  color: var(--text); padding: 0.85rem 1.15rem; border: 1.5px solid var(--border);
  border-radius: 100px; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.header__login svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.header__login:hover { border-color: var(--text); background: var(--surface); }
@media (min-width: 1200px) { .header__login { display: inline-flex; } }
.header__user { display: none; color: var(--text-muted); font-weight: 500; font-size: 0.92rem; }
@media (min-width: 1200px) { .header__user { display: inline-flex; align-items: center; } }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
/* En movil, area tactil minima de 44px tambien para los botones pequenos. */
@media (max-width: 768px) { .btn--sm, .btn--xs { min-height: 44px; } }
/* Cabecera unificada en subpaginas (legales y panel): solida y en el flujo */
.header.header--solid { position: sticky; top: 0; background: #f8f8f6; box-shadow: 0 1px 0 var(--border); }

/* (A) Como funciona — layout editorial 2 columnas + timeline conectada */
.howto { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .howto { grid-template-columns: 0.85fr 1.15fr; } }
@media (min-width: 880px) { .howto__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.howto__title { margin-top: 0.85rem; }
.howto__cta { margin-top: 1.75rem; }

/* Ilustraciones tipo blog (realzan, no recargan) */
.section-illu {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow);
}
.howto__illu { margin-top: 1.75rem; }
@media (max-width: 879px) {
  /* En movil el aside no es sticky: limitamos la altura para que no domine */
  .howto__illu { max-width: 420px; margin-inline: auto; }
}
.guarantee__illu {
  flex: 0 0 auto; width: clamp(150px, 26%, 240px); align-self: stretch;
  object-fit: cover; box-shadow: none;
}
@media (max-width: 719px) {
  .guarantee { flex-wrap: wrap; }
  .guarantee__illu { display: none; }
}

.timeline { position: relative; display: flex; flex-direction: column; gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.timeline::before {
  content: ""; position: absolute; left: calc(clamp(2.75rem, 2.2rem + 2vw, 3.75rem) / 2);
  top: 0.4rem; bottom: 0.4rem; width: 2px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 15%, transparent));
}
.timeline__step { position: relative; display: flex; gap: clamp(1rem, 0.6rem + 1.5vw, 1.75rem); align-items: flex-start; }
.timeline__num {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: clamp(2.75rem, 2.2rem + 2vw, 3.75rem); height: clamp(2.75rem, 2.2rem + 2vw, 3.75rem);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1;
  box-shadow: 0 0 0 6px var(--bg);
}
.timeline__body { padding-top: 0.35rem; }
.timeline__title { font-size: var(--step-2); }
.timeline__text { margin-top: 0.55rem; color: var(--text-muted); max-width: 56ch; }

/* (B) Que incluye — banda destacada tipo banner */
.includes__banner {
  display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem); grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 920px) { .includes__banner { grid-template-columns: 0.95fr 1.05fr; } }
@media (min-width: 920px) { .includes__lead { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.includes__title { margin-top: 0.85rem; }
.includes__cta { margin-top: 1.75rem; }
.includes__list { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 560px) { .includes__list { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); } }
.includes__item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding-block: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
  border-top: 1px solid var(--border-dark);
}
.includes__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent-on-dark) 16%, transparent);
  color: var(--accent-on-dark); display: grid; place-items: center;
}
.includes__icon svg { width: 22px; height: 22px; }
.includes__item span strong {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  color: var(--dark-text); margin-bottom: 0.3rem; letter-spacing: -0.01em;
}
.includes__item > span:last-child { color: var(--dark-muted); font-size: var(--step-0); line-height: 1.55; }

/* (C) Banner de accion de compra */
.buy-banner__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  background: var(--accent); color: var(--accent-text);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.25rem);
  box-shadow: var(--shadow-lg);
  background-image: radial-gradient(circle at 88% -10%, rgba(255,255,255,0.18), transparent 45%);
}
.buy-banner__text { flex: 1 1 360px; min-width: 0; }
.buy-banner__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.4rem 0.85rem; border-radius: 100px; background: rgba(255,255,255,0.18); color: #fff;
}
.buy-banner__badge svg { width: 1.05em; height: 1.05em; }
.buy-banner__title { font-size: var(--step-4); letter-spacing: -0.02em; margin-top: 1rem; max-width: 18ch; }
.buy-banner__support { margin-top: 0.9rem; font-size: var(--step-1); color: rgba(255,255,255,0.92); max-width: 54ch; }
.buy-banner__actions { flex: 0 0 auto; flex-direction: column; align-items: stretch; }
.buy-banner__call { --btn-fg: #fff; border-color: rgba(255,255,255,0.5); }
.buy-banner__call:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
@media (max-width: 620px) { .buy-banner__actions { width: 100%; } .buy-banner__actions .btn { width: 100%; } }

/* (D) Contacto — metodos en fila + formulario en tarjeta elevada */
.contact-methods {
  display: grid; gap: 1rem; grid-template-columns: 1fr;
  margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
@media (min-width: 560px) { .contact-methods { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .contact-methods { grid-template-columns: repeat(4, 1fr); } }
.contact-methods .contact-method { background: var(--surface); }
.contact__form--card {
  max-width: 880px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.1rem + 2.5vw, 3rem);
  box-shadow: var(--shadow);
  gap: 1.35rem;
}
.contact__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.25rem; }
.contact__submit .btn { flex: 0 0 auto; }
.contact__note { font-size: var(--step--1); flex: 1 1 240px; min-width: 0; margin: 0; }
.contact__shortcut { margin-top: 0.85rem; font-size: var(--step--1); }
.contact__shortcut a { color: var(--accent); font-weight: 600; }
.contact__note a { color: var(--accent); font-weight: 600; }

/* (E) Footer — gran llamada final + datos de marca */
.footer__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-bottom: 1px solid var(--border-dark);
}
.footer__cta-eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-2);
  color: var(--accent-on-dark); letter-spacing: -0.01em;
}
.footer__cta-title { font-size: var(--step-4); letter-spacing: -0.02em; margin-top: 0.5rem; max-width: 22ch; }
.footer__cta-actions { flex: 0 0 auto; }
.footer__legalname { margin-top: 1.1rem; font-size: var(--step--1); color: var(--dark-muted); line-height: 1.6; }

/* ==== 12 FORMULARIO AMPLIADO ==================================== */
.field-help { font-size: var(--step--1); color: var(--text-muted); margin-top: -0.05rem; line-height: 1.5; }
.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.fieldset > legend { font-weight: 600; font-size: var(--step--1); padding: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem; border: 1.5px solid var(--border); border-radius: 100px; font-size: var(--step--1); font-weight: 500; cursor: pointer; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease); user-select: none; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice:hover { border-color: var(--text); }
.choice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-600); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
/* El campo de URL aparece solo si el cliente dice que YA tiene web */
[data-web-url] { display: none; }
.contact__form:has(#web-si:checked) [data-web-url] { display: flex; }
/* Trampa antispam (oculta a humanos) */
.hp-field { position: absolute !important; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status.is-error { background: var(--danger-bg); color: var(--danger); }

/* Garantia de entrega (72 h o devolucion) */
.guarantee { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border: 1.5px solid var(--accent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.guarantee__icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; }
.guarantee__icon svg { width: 28px; height: 28px; }
.guarantee__title { font-size: var(--step-2); }
.guarantee__text { margin-top: 0.4rem; color: var(--text-muted); max-width: 70ch; }
@media (max-width: 600px) { .guarantee { flex-direction: column; text-align: center; } }

/* ==== 14 CAPTACION / NEWSLETTER ================================= */
.newsletter__card {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  grid-template-columns: 1fr; align-items: center;
  background: var(--accent); color: var(--accent-text);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.25rem);
  box-shadow: var(--shadow-lg);
  background-image: radial-gradient(circle at 88% -10%, rgba(255,255,255,0.18), transparent 45%);
}
@media (min-width: 880px) { .newsletter__card { grid-template-columns: 1fr 1fr; } }
.newsletter__eyebrow { color: #fff; }
.newsletter__eyebrow::before { background: #fff; }
.newsletter__title { font-size: var(--step-4); letter-spacing: -0.02em; margin-top: 0.85rem; max-width: 18ch; }
.newsletter__intro { margin-top: 0.9rem; font-size: var(--step-1); color: rgba(255,255,255,0.92); max-width: 54ch; }

.newsletter__form { min-width: 0; }
.newsletter__row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; }
.newsletter__field { flex: 1 1 240px; min-width: 0; }
.newsletter__field input {
  width: 100%; height: 48px; padding: 0 1.1rem;
  border: 1.5px solid transparent; border-radius: 100px;
  background: #fff; color: var(--text);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.newsletter__field input::placeholder { color: var(--text-muted); }
.newsletter__field input:focus { outline: none; border-color: var(--dark); box-shadow: 0 0 0 4px rgba(255,255,255,0.45); }
.newsletter__btn { flex: 0 0 auto; --btn-bg: var(--dark); --btn-fg: #fff; box-shadow: none; }
.newsletter__btn:hover { --btn-bg: #000; }
.newsletter__consent { margin-top: 0.9rem; font-size: var(--step--1); color: rgba(255,255,255,0.92); max-width: 52ch; }
.newsletter__consent a { color: #fff; text-decoration: underline; }
@media (max-width: 540px) {
  .newsletter__row { flex-direction: column; }
  .newsletter__btn { width: 100%; }
}

/* Trampa antispam (oculta a humanos, accesible a bots) */
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Estados del mensaje inline (newsletter) */
.form-msg { margin-top: 0.9rem; padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); font-size: var(--step--1); }
.form-msg.is-ok { background: rgba(255,255,255,0.18); color: #fff; }
.form-msg.is-error { background: var(--danger-bg); color: var(--danger); }
.newsletter--compact { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* ==== 15 MODAL "TE LLAMAMOS" (callback) ======================== */
.cb-dialog {
  width: min(94vw, 460px); max-width: 460px;
  margin: auto; inset: 0;
  padding: 0; border: none; border-radius: var(--radius-lg);
  background: transparent; color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: visible;
}
.cb-dialog::backdrop { background: rgba(10, 20, 14, 0.55); backdrop-filter: blur(2px); }
.cb-dialog[open] { animation: cb-pop 0.22s var(--ease); }
@keyframes cb-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

.cb-dialog__card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  max-height: 88vh; overflow-y: auto;
}
.cb-dialog__close {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cb-dialog__close:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.cb-dialog__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.cb-dialog__title { font-size: var(--step-3); letter-spacing: -0.02em; margin-top: 0.6rem; }
.cb-dialog__intro { margin-top: 0.6rem; font-size: var(--step-0); color: var(--text-muted); }
.cb-dialog__field { margin-top: 1rem; display: grid; gap: 0.35rem; }
.cb-dialog__field label { font-size: var(--step--1); font-weight: 600; }
.cb-dialog__field input,
.cb-dialog__field select,
.cb-dialog__field textarea {
  width: 100%; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cb-dialog__field textarea { resize: vertical; min-height: 56px; }
.cb-dialog__field input:focus,
.cb-dialog__field select:focus,
.cb-dialog__field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.cb-dialog__consent { margin-top: 1rem; font-size: var(--step--1); color: var(--text-muted); }
.cb-dialog__consent a { color: var(--accent); text-decoration: underline; }
.cb-dialog__actions { margin-top: 1.25rem; }
.cb-dialog__msg { margin-top: 0.9rem; }
.cb-dialog__msg.is-ok { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-600); }
.cb-dialog__msg.is-error { background: var(--danger-bg); color: var(--danger); }

/* ==== 11 REDUCED MOTION ========================================== */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  html.js [data-hero-fade] { opacity: 1 !important; }
  .marquee__track { animation: none !important; }
}

/* ==== 11b MODO LIGERO (dispositivos debiles: html.is-lite) =========
   Complementa al bloque de reduced-motion de arriba (no lo duplica).
   Lo activa main.js cuando detecta poca RAM / pocos nucleos / ahorro de
   datos / reduced-motion. Objetivo: cero animaciones continuas costosas
   y contenido visible al instante, sin tirones en moviles baratos. */

/* Hero: la nube de ventajas deja de flotar y el arco se queda en su estado final */
html.is-lite .hero-cloud__core { animation: none !important; transform: translate(-50%, -50%); }
html.is-lite .hero-cloud__chip { animation: none !important; transform: none; }
html.is-lite .hero-cloud__arc { animation: none !important; stroke-dashoffset: 20; }
/* En tactil (movil/tablet) quitamos las animaciones continuas del hero para una
   entrada fluida sin tirones; el escritorio conserva la version animada. */
@media (hover: none), (pointer: coarse) {
  .hero-cloud__core { animation: none !important; transform: translate(-50%, -50%); }
  .hero-cloud__chip { animation: none !important; transform: none; }
  .hero-cloud__arc { animation: none !important; stroke-dashoffset: 20; }
}

/* Blobs difuminados del hero: el blur(60px) es caro en GPUs lentas */
html.is-lite .hero__blob { filter: none; }

/* Mockup del hero: sin flotar, sin brillo, sin latido ni chips animados */
html.is-lite .mockup,
html.is-lite .mockup__bar i:first-child,
html.is-lite .mockup__chip--edit,
html.is-lite .mockup__chip--speed,
html.is-lite .mockup__chip--speed svg { animation: none !important; }
html.is-lite .mockup { transform: rotate(0.4deg); }
html.is-lite .mockup__screen::after { display: none; animation: none !important; }

/* Marquee: detenida (el JS ya la pausa; aqui lo reforzamos) */
html.is-lite .marquee__track { animation: none !important; }

/* Indicador de scroll del hero: deja de latir */
html.is-lite .hero__scroll .dot::after { animation: none !important; }

/* Reveals y fade del hero: visibles de inmediato, sin transicion */
html.is-lite.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
html.is-lite.js [data-hero-fade] { opacity: 1 !important; transform: none !important; transition: none !important; }
html.is-lite [data-hero-title] .word-inner { transform: none !important; }

/* ==== 13 TESTIMONIOS Y FRANJA DE PAGO SEGURO ===================== */
.testimonials {
  list-style: none; display: grid; gap: var(--gutter); margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.testimonial__stars { display: inline-flex; gap: 2px; color: var(--star); }
.testimonial__stars svg { width: 1.05rem; height: 1.05rem; }
.testimonial__quote { color: var(--text); font-size: var(--step-0); line-height: 1.6; margin: 0; }
.testimonial__author { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.testimonial__avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.testimonial__meta { display: flex; flex-direction: column; line-height: 1.25; }
.testimonial__meta strong { color: var(--text); font-size: var(--step-0); }
.testimonial__meta span { color: var(--text-muted); font-size: var(--step--1); }
.testimonials__avg {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 1.5rem; text-align: center; color: var(--text-muted); font-size: var(--step--1);
}
.testimonials__avg-stars { display: inline-flex; gap: 2px; color: var(--star); }
.testimonials__avg-stars svg { width: 1rem; height: 1rem; }

/* Franja discreta de pago seguro / confianza (cerca de #precios) */
.secure {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.6rem 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
}
.secure__item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); font-weight: 500; color: var(--text-muted); }
.secure__item svg.icon { width: 1.05em; height: 1.05em; color: var(--accent); flex: 0 0 auto; }
.secure__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--border); flex: 0 0 auto; }
.secure__pay { gap: 0.55rem; }
.secure__card { width: 34px; height: 23px; color: var(--text-muted); flex: 0 0 auto; }
@media (max-width: 560px) { .secure__sep { display: none; } }

/* ==== BLOG ======================================================= */
.blog-main { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-bottom: var(--space-section); }

/* Cabecera de seccion */
.blog-head { max-width: 720px; margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.25rem); }
.blog-head__eyebrow {
  display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem;
}
.blog-head h1 { font-size: var(--step-5); line-height: 1.1; margin-bottom: 0.75rem; }
.blog-head p { color: var(--text-muted); font-size: var(--step-1); max-width: 60ch; }

/* Rejilla de tarjetas */
.blog-grid {
  display: grid; gap: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.blog-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.blog-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.blog-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__media--placeholder {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-600) 55%, var(--dark) 130%);
}
.blog-card__body { display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); flex: 1; }
.blog-card__date { color: var(--text-muted); font-size: var(--step--1); font-weight: 500; }
.blog-card__title { font-size: var(--step-2); line-height: 1.25; }
.blog-card__excerpt { color: var(--text-muted); font-size: var(--step-0); margin-bottom: 0.25rem; }
.blog-card__more {
  margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--accent); font-weight: 600; font-size: var(--step-0);
}
.blog-card__more svg { transition: transform 0.3s var(--ease); }
.blog-card:hover .blog-card__more svg { transform: translateX(4px); }

/* Estado vacio */
.blog-empty {
  max-width: 560px; margin: clamp(2rem, 1rem + 4vw, 5rem) auto; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}
.blog-empty h1, .blog-empty h2 { font-size: var(--step-3); margin-bottom: 0.75rem; }
.blog-empty p { color: var(--text-muted); margin-bottom: 1.5rem; }

/* Lectura de articulo */
.article { max-width: 760px; margin-inline: auto; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: var(--step--1); color: var(--text-muted); margin-bottom: 1.75rem; }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs__current { color: var(--text); font-weight: 500; }
.article__head { margin-bottom: 1.5rem; }
.article__title { font-size: var(--step-5); line-height: 1.12; margin-bottom: 0.6rem; }
.article__date { color: var(--text-muted); font-size: var(--step--1); font-weight: 500; }
.article__cover { margin: 1.75rem 0 2.25rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.article__cover img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* Cuerpo (HTML de confianza) */
.article__body { font-size: var(--step-1); line-height: 1.8; color: var(--text); }
.article__body > * + * { margin-top: 1.15rem; }
.article__body h2 { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.2; margin-top: 2.5rem; margin-bottom: 0.25rem; }
.article__body h3 { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; margin-top: 2rem; }
.article__body p, .article__body li { color: var(--text-muted); }
.article__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article__body a:hover { color: var(--accent-600); }
.article__body strong { color: var(--text); font-weight: 600; }
.article__body ul, .article__body ol { padding-left: 1.5rem; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li + li { margin-top: 0.5rem; }
.article__body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
.article__figure { margin: 2rem 0; }
.article__figure img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); display: block; background: var(--surface); }
.article__figure figcaption { margin-top: 0.6rem; font-size: var(--step--1); color: var(--text-muted); text-align: center; font-style: italic; }
.article__body blockquote {
  border-left: 3px solid var(--accent); padding: 0.5rem 0 0.5rem 1.25rem; color: var(--text-muted); font-style: italic;
}

/* CTA al final del articulo */
.article__cta {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); text-align: center;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  border: 1.5px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: var(--radius-lg); padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
}
.article__cta h2 { font-size: var(--step-3); margin-bottom: 0.6rem; }
.article__cta p { color: var(--text-muted); max-width: 48ch; margin: 0 auto 1.5rem; }
.article__back { margin-top: 2.5rem; }

/* iOS hace ZOOM automatico al tocar un campo con menos de 16 px y descoloca la
   pagina entera (y luego no vuelve a su sitio). Con 16 px exactos no pasa.
   Solo en pantallas pequenas: en escritorio se mantiene el tamano de diseno. */
@media (max-width: 640px) {
  .field input, .field select, .field textarea,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], select, textarea {
    font-size: 16px;
  }
}

/* =====================================================================
   LISTA "QUE INCLUYE" DE LAS LANDINGS (sectores/ y ciudades/)
   ---------------------------------------------------------------------
   Cada landing trae su propio <style> con `.sec-incluye li { display:flex }`,
   y eso partia cada punto de la lista en columnas: el <strong> por un lado y
   cada trozo de frase por otro (medido: 3 columnas de 87/47/120 px en un <li>
   de 335). No es cosa del <strong>: le pasa a CUALQUIER elemento en linea que
   se meta ahi dentro.
   Se corrige desde aqui, que se carga ANTES que esos <style>, ganando por
   especificidad (.sec-bloque .sec-incluye li) para no tener que editar los 33
   ficheros. El icono de la lista se coloca en absoluto y el texto fluye.
   ===================================================================== */
.sec-bloque .sec-incluye li {
  display: block;
  position: relative;
  padding-left: 1.65rem;
}
.sec-bloque .sec-incluye li > svg {
  position: absolute;
  left: 0;
  top: 0.28em;
}

/* =====================================================================
   LANDINGS EN MOVIL (sectores/ y ciudades/)
   ---------------------------------------------------------------------
   Dos arreglos medidos a 375 px con la barra fija de contacto puesta, que
   deja el contenido util en unos 606 px:

   1) En las 10 paginas de ciudad el boton caia entre 565 y 683 px, o sea
      DEBAJO de la barra: en la primera pantalla no habia nada que tocar. La
      culpa era del parrafo de entrada (de 53 a 89 palabras) a tamano grande.
      Se compacta en movil y el boton sube por encima del pliegue. No se
      reordena nada: mover el boton por delante del parrafo con `order`
      dejaria el recorrido del tabulador distinto de lo que se ve.

   2) El boton de la tarjeta negra ("Abrir el ejemplo (Restaurante La Parra)")
      se salia hasta 25 px de su tarjeta, y en reformas-y-construccion hacia
      que la pagina entera se desplazara de lado. Es .btn con
      white-space:nowrap dentro de un flex que no le deja encoger.
   ===================================================================== */
@media (max-width: 700px) {
  .sec-hero h1 { margin: 0.55rem 0 0.6rem; }
  .sec-hero .sec-hero__lead {
    font-size: var(--step-0);
    line-height: 1.55;
    margin: 0 0 1.1rem;
  }
  .sec-hero .sec-cta .btn { width: 100%; }
  .sec-bloque .sec-banda .btn { width: 100%; }
}
.sec-bloque .sec-banda .btn {
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}