/* EquipArti · estilos compartidos por todas las páginas */

/* Poppins alojada en el sitio (antes venía de Google Fonts): woff2, solo el subconjunto latino, que cubre el español.
   Poppins © Indian Type Foundry, licencia SIL Open Font License 1.1 (https://openfontlicense.org). */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Respaldo de Poppins con sus mismas medidas (medidas en Chrome): mientras carga la fuente el texto ya ocupa
   el mismo lugar, así no se mueve la página cuando aparece Poppins. El peso 700 está ajustado para que los títulos
   de la home y de Nosotros corten igual que con Poppins en los anchos de celular más comunes. */
@font-face { font-family: "Poppins Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 113.00%; ascent-override: 92.92%; descent-override: 30.97%; line-gap-override: 0%; }
@font-face { font-family: "Poppins Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 112.38%; ascent-override: 93.43%; descent-override: 31.14%; line-gap-override: 0%; }
@font-face { font-family: "Poppins Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 105.81%; ascent-override: 99.23%; descent-override: 33.08%; line-gap-override: 0%; }
@font-face { font-family: "Poppins Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 109.50%; ascent-override: 95.89%; descent-override: 31.96%; line-gap-override: 0%; }
/* Layout: secciones de ancho completo que alternan negro / violeta / blanco, contenido centrado a 1120px. */
:root {
  /* Paleta de marca (sin cambios respecto del original) */
  --black: #000000;
  --ink: #0e0b14;
  --header: #0a0a0a;
  --line: #2a2533;
  --lime: #c6ff5a;
  --lime-ink: #10140a;
  --violet: #6f24d9;
  --violet-deep: #4300a5;
  --white: #ffffff;
  --paper: #f6f5f9;
  --text: #f3f1f7;
  --muted: #aaa4b6;
  --muted-dark: #5d5768;
  --wa: #25d366;
  /* Tonos que el original ya usaba sueltos, ahora con nombre */
  --ink-on-light: #17141d;
  --on-violet: #d9ccf3;
  --on-violet-soft: #d6cbee;
  --wa-ink: #062b14;

  --font: "Poppins", "Poppins Fallback", "Helvetica Neue", Arial, sans-serif;
  --radius: 16px;
  --radius-lg: 24px;
  --wrap: 1120px;
  --gap: 20px;
  --section-y: clamp(56px, 7.5vw, 96px);
  --focus: var(--lime);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
/* Safari anterior a 15.4 no conoce :focus-visible */
@supports not selector(:focus-visible) { :focus { outline: 3px solid var(--focus); outline-offset: 3px; } }
.on-light { --focus: var(--violet); }
[hidden] { display: none !important; }
main:focus { outline: none; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--lime); color: var(--lime-ink); font-weight: 600; text-decoration: none;
  padding: 12px 18px; border-radius: 999px;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 480px) { .wrap { padding-inline: 16px; } }

/* Tipografía */
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 4.3vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.3rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.015em; }
h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
p { margin: 0; text-wrap: pretty; }
.hl { color: var(--lime); }
.hl-v { color: var(--violet); }
.nowrap { white-space: nowrap; }
.lead { color: var(--muted); font-size: 1.0625rem; max-width: 58ch; }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.section-head { display: grid; gap: 14px; justify-items: center; text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font: 600 .95rem/1.2 var(--font); text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-lime { background: var(--lime); color: var(--lime-ink); }
.btn-lime:hover { box-shadow: 0 8px 24px -10px var(--lime); }
.btn-violet { background: var(--violet); color: var(--white); }
.btn-violet:hover { box-shadow: 0 8px 24px -10px var(--violet); }
.btn-ghost { border-color: rgba(255,255,255,.4); color: var(--text); }
.btn-ghost:hover { border-color: var(--lime); color: var(--lime); }
.btn-sm { min-height: 42px; padding: 10px 18px; font-size: .875rem; }
@media (max-width: 400px) { .btn { white-space: normal; text-align: center; padding-inline: 16px; } }

.text-link {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  font-weight: 600; font-size: .95rem; color: var(--lime); text-decoration: none;
  padding-block: 6px; border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.text-link:hover { border-bottom-color: currentColor; }
.text-link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.text-link:hover svg { transform: translateX(3px); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px);
  background: var(--header); border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; }
.logo img { display: block; height: 30px; width: auto; }
.main-nav { display: flex; gap: 28px; margin-left: auto; }
.main-nav a {
  position: relative; padding-block: 10px; text-decoration: none;
  font-size: .9rem; font-weight: 500; color: var(--muted); transition: color .2s ease;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.main-nav a:hover { color: var(--text); }
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--text); }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-cta .label-short { display: none; }
.menu-toggle { display: none; }
@media (max-width: 940px) {
  .header-inner { gap: 12px; min-height: 64px; }
  .logo { margin-right: auto; }
  .logo img { height: 26px; }
  .header-cta .label-long { display: none; }
  .header-cta .label-short { display: inline; }
  .main-nav { margin-left: 0; gap: 20px; }
  /* Sin JavaScript el menú queda visible en una segunda fila */
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: 10px; }
  html:not(.js) .main-nav { order: 3; width: 100%; flex-wrap: wrap; }
  .js .menu-toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  }
  .menu-toggle svg { width: 22px; height: 22px; }
  .menu-toggle .i-close, .menu-toggle[aria-expanded="true"] .i-open { display: none; }
  .menu-toggle[aria-expanded="true"] .i-close { display: block; }
  .js .main-nav {
    position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; gap: 0;
    background: var(--header); border-bottom: 1px solid var(--line); padding: 4px 24px 16px;
  }
  .js .main-nav.is-open { display: flex; }
  .js .main-nav a { padding-block: 14px; font-size: 1rem; color: var(--text); border-bottom: 1px solid var(--line); }
  .js .main-nav a:last-child { border-bottom: 0; }
  .js .main-nav a::after { display: none; }
}
@media (max-width: 480px) { .js .main-nav { padding-inline: 16px; } }
@media (max-width: 360px) { .logo img { height: 22px; } }

/* Hero */
.hero { padding-block: clamp(40px, 5.5vw, 72px) clamp(48px, 6vw, 80px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.hero-kicker { display: inline-flex; align-items: center; gap: 14px; }
.hero-kicker::before { content: ""; width: 40px; height: 3px; background: var(--lime); border-radius: 2px; }
.hero-copy .lead { color: var(--text); opacity: .84; font-size: clamp(1.05rem, 1.5vw, 1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.hero-points li { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--text); }
.hero-points svg { width: 20px; height: 20px; color: var(--lime); flex-shrink: 0; }
/* Datos clave del hero: una línea lima a la izquierda, sin recuadros ni íconos */
.hero-facts { list-style: none; margin: 2px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--lime); display: grid; gap: 6px; }
.hero-facts li { font-size: .95rem; color: var(--muted); }
.hero-facts strong { color: var(--text); font-weight: 600; }
.hero-art { min-width: 0; }
.hero-art img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 480px) { .hero-actions .btn { width: 100%; } }

/* Clientes (prueba social) */
.clients { background: var(--white); color: var(--ink-on-light); padding-block: clamp(44px, 6vw, 68px); }
.clients h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; text-align: center; margin-bottom: clamp(28px, 4vw, 40px); }
.clients .track { --gap: 64px; }
.clients .track img { display: block; height: 40px; width: auto; max-width: none; }
@media (max-width: 640px) {
  .clients .track { --gap: 44px; }
  .clients .track img { height: 30px; }
  /* El logo de Oveja solo existe a 144x32: más bajo para que alcance la resolución en pantallas de alta densidad */
  .clients .track img[src$="oveja.png"] { height: 26px; }
}

/* Carruseles sin fin: el script duplica la tira y la pista se desplaza exactamente el 50% */
.carousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; width: max-content; }
.track > li { flex-shrink: 0; margin-right: var(--gap, 56px); }
.track.is-ready { animation: slide var(--speed, 40s) linear infinite; will-change: transform; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.track.is-ready.is-paused { animation-play-state: paused !important; }
.carousel-shell { position: relative; }
.carousel-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--white); color: var(--ink-on-light); border: 1px solid rgba(23,20,29,.22);
  opacity: .8; transition: opacity .2s ease;
}
.carousel-toggle:hover, .carousel-toggle:focus-visible { opacity: 1; }
.carousel-toggle svg { width: 14px; height: 14px; }
/* Sin JavaScript no hay duplicado: los ítems quedan fijos y centrados */
html:not(.js) .track { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 20px; }

/* Secciones */
.section { padding-block: var(--section-y); }

/* Tarjetas */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  background: linear-gradient(160deg, #15101f 0%, var(--ink) 65%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; display: grid; gap: 10px; align-content: start;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--violet); transform: translateY(-2px); }
.card p { color: var(--muted); font-size: .94rem; }
.icon-chip {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px;
  background: rgba(198,255,90,.1); color: var(--lime);
}
.icon-chip svg { width: 26px; height: 26px; }
.icon-chip.violet { background: var(--violet); color: var(--white); }
@media (max-width: 900px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cards-3 { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 500px) {
  /* En mobile las tarjetas pasan a fila: ícono a la izquierda, texto a la derecha */
  .cards-4 { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 20px; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .card .icon-chip { grid-row: 1 / span 2; margin-bottom: 0; }
  .card h3, .card p { grid-column: 2; }
}

/* Marcas */
.brands { background: var(--white); color: var(--ink-on-light); padding-block: 30px 34px; overflow: hidden; }
/* Título de la franja: es un h2 (para la estructura de la página) con el aspecto de un texto chico */
.brands-title { font-weight: 500; font-size: .95rem; line-height: 1.6; letter-spacing: 0; text-align: center; margin-bottom: 20px; padding-inline: 16px; }
/* Logos oficiales con sus colores; cada uno trae su alto (--h) para que se vean parejos */
.brands .track { --gap: clamp(44px, 6vw, 72px); }
.brands .track img { display: block; height: var(--h, 28px); width: auto; max-width: none; }
@media (max-width: 640px) { .brands .track { --gap: 40px; } .brands .track img { height: calc(var(--h, 28px) * .85); } }

/* Servicios */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.feature { border-radius: 20px; padding: clamp(24px, 3.4vw, 36px); display: grid; gap: 12px; align-content: start; min-width: 0; }
.feature h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); font-weight: 700; line-height: 1.2; }
.feature p { color: var(--muted); max-width: 44ch; }
.feature-violet { background: linear-gradient(150deg, #4f15b0 0%, #1f0840 100%); border: 1px solid var(--violet); }
.feature-violet p { color: var(--on-violet); }
.feature-lime { background: linear-gradient(150deg, #1d2410 0%, #0d0f08 100%); border: 1px solid var(--lime); }
.tag { justify-self: start; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.feature-violet .tag { background: var(--violet); color: var(--white); }
.feature-lime .tag { color: var(--lime); border: 1px solid var(--lime); }
.features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-ink { background: linear-gradient(160deg, #15101f 0%, var(--ink) 65%); border: 1px solid var(--muted-dark); }
.feature-ink .tag { color: var(--text); border: 1px solid rgba(255,255,255,.4); }
@media (max-width: 900px) { .features-3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .features { grid-template-columns: 1fr; } }

/* Cómo funciona */
.how { background: linear-gradient(180deg, var(--violet-deep) 0%, var(--violet) 100%); }
.how .lead { color: var(--on-violet); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.step { background: rgba(10,4,30,.5); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 28px 24px; display: grid; gap: 8px; align-content: start; }
.step .num {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px;
  border: 1.5px solid var(--lime); color: var(--lime); font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.step p { color: var(--on-violet-soft); font-size: .94rem; }
.section-cta { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 44px); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) {
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .step { padding: 20px; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .step .num { grid-row: 1 / span 2; margin-bottom: 0; }
  .step h3, .step p { grid-column: 2; }
}

/* Avatares del equipo (iniciales mientras no estén las fotos) */
.avatar {
  display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  font-weight: 700; letter-spacing: .02em; line-height: 1; background: var(--violet); color: var(--white);
}
.avatar.alt { background: var(--lime); color: var(--lime-ink); }
.avatar.soft { background: var(--ink); color: var(--lime); box-shadow: inset 0 0 0 2px var(--lime); }
.avatar picture { display: block; width: 100%; height: 100%; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.completar {
  display: inline; font-size: .75rem; font-weight: 600; color: var(--lime);
  border: 1px dashed var(--lime); border-radius: 6px; padding: 1px 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Franja "Personas reales" (home) */
.team-strip { padding-block: clamp(36px, 5vw, 52px); border-bottom: 1px solid var(--line); }
.team-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; text-align: center; }
.avatar-stack { list-style: none; margin: 0; padding: 0; display: flex; }
.avatar-stack li + li { margin-left: -6px; }
.avatar-stack .avatar { width: 48px; height: 48px; font-size: .85rem; box-shadow: 0 0 0 3px var(--black); }
.team-strip-text { font-weight: 600; font-size: 1.05rem; line-height: 1.6; letter-spacing: 0; }

/* Página Nosotros */
.about-hero { padding-bottom: clamp(40px, 6vw, 72px); }
.about-hero .wrap { gap: 18px; }
.about-story { padding-bottom: clamp(40px, 6vw, 64px); }
.about-story p {
  max-width: 62ch; margin-inline: auto; text-align: center; font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 40px);
}
.about-hero .hero-actions { justify-content: center; margin-top: 6px; }
.mini-logos { background: var(--white); color: var(--ink-on-light); padding-block: 28px 32px; }
.mini-logos .wrap { margin-bottom: 20px; }
.mini-logos p { font-size: .9rem; font-weight: 600; text-align: center; }
.page-hero { padding-block: clamp(48px, 7vw, 88px) clamp(8px, 2vw, 24px); }
.page-hero .wrap { display: grid; gap: 16px; justify-items: center; text-align: center; }
.page-hero .lead { color: var(--text); opacity: .84; font-size: clamp(1.05rem, 1.5vw, 1.18rem); }
.section-divided { border-top: 1px solid var(--line); }
.people { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: var(--gap); }
.people-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.people-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; }
.person {
  background: linear-gradient(160deg, #15101f 0%, var(--ink) 65%); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 28px; display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center;
  transition: border-color .2s ease;
}
.person:hover { border-color: var(--violet); }
.person .avatar { width: 128px; height: 128px; font-size: 2.1rem; }
.person h3 { font-size: 1.3rem; margin-top: 6px; }
.person-role { color: var(--lime); font-weight: 600; font-size: .9rem; }
.person-bio { color: var(--muted); font-size: .95rem; max-width: 42ch; }
.person .btn { margin-top: 8px; }
.people-sm .person { padding: 26px 22px; border-radius: var(--radius); }
.people-sm .avatar { width: 92px; height: 92px; font-size: 1.5rem; }
.people-sm h3 { font-size: 1.1rem; }
@media (max-width: 700px) { .people-sm { grid-template-columns: 1fr; max-width: 440px; } }
@media (max-width: 640px) { .people-lg { grid-template-columns: 1fr; max-width: 480px; } .person { padding: 28px 20px; } }

/* Apple: reseller autorizado (home). Formato banner: texto a la izquierda y la foto a sangre hasta el borde */
.apple-band { padding-block: var(--section-y); }
.apple-band + .section:not(.how):not(.parque) { padding-top: 0; }
.apple-card {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch;
  background: var(--black); border: 1px solid rgba(198,255,90,.55); border-radius: var(--radius-lg); overflow: hidden;
}
.apple-copy { display: grid; gap: 22px; justify-items: start; align-content: center; padding: clamp(32px, 5vw, 64px); }
/* Logo de reseller en blanco sobre el fondo negro, sin recuadro */
.apple-badge { width: 168px; height: auto; }
.apple-copy h2 { font-size: clamp(1.75rem, 2.9vw, 2.4rem); line-height: 1.1; }
.apple-lead { color: var(--muted); font-size: 1.05rem; max-width: 46ch; }
.apple-copy .btn { margin-top: 6px; }
.apple-art { position: relative; min-height: 420px; }
.apple-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
/* Fundido de la foto hacia el negro del texto */
.apple-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--black) 0%, rgba(0,0,0,0) 32%); pointer-events: none; }
@media (max-width: 860px) {
  .apple-card { grid-template-columns: 1fr; }
  .apple-art { order: -1; min-height: 0; height: clamp(220px, 56vw, 420px); }
  .apple-art::after { background: linear-gradient(0deg, var(--black) 0%, rgba(0,0,0,0) 38%); }
  .apple-copy { padding: 14px 28px 36px; }
}
@media (max-width: 480px) { .apple-art { height: 66vw; } .apple-copy { padding: 12px 22px 30px; } .apple-badge { width: 136px; } .apple-copy .btn { width: 100%; } }

/* Para quién sí y para quién no (home) */
.fit { padding-block: var(--section-y); }
.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); max-width: 960px; }
.fit-col {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  background: linear-gradient(160deg, #15101f 0%, var(--ink) 65%); display: grid; gap: 8px; align-content: start;
}
.fit-yes { border-color: rgba(198,255,90,.55); }
.fit-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; }
.fit-icon svg { width: 22px; height: 22px; }
.fit-yes .fit-icon { background: rgba(198,255,90,.12); color: var(--lime); }
.fit-no .fit-icon { background: rgba(255,255,255,.08); color: var(--muted); }
.fit-col h3 { font-size: 1.2rem; }
.fit-col p { color: var(--muted); }
@media (max-width: 700px) { .fit-grid { grid-template-columns: 1fr; } .fit-col { padding: 22px 20px; } }

/* Preguntas frecuentes (home) */
.faq-list { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq-item {
  background: linear-gradient(160deg, #15101f 0%, var(--ink) 65%); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s ease;
}
.faq-item:hover, .faq-item[open] { border-color: var(--violet); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; font-weight: 600; font-size: 1.0625rem; border-radius: var(--radius);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 20px; height: 20px; color: var(--lime); flex-shrink: 0; transition: transform .2s ease; }
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item p { padding: 0 24px 22px; color: var(--muted); }
@media (max-width: 500px) { .faq-item summary { padding: 18px 20px; font-size: 1rem; } .faq-item p { padding: 0 20px 20px; } }

/* Soluciones */
.segments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.segment {
  background: var(--white); color: var(--ink-on-light); border-radius: var(--radius); padding: 28px 24px;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; align-content: start;
  transition: transform .2s ease;
}
.segment:hover { transform: translateY(-2px); }
.segment p { color: var(--muted-dark); font-size: .94rem; }
.segment .btn { justify-self: start; margin-top: 10px; }
.segment .icon-chip { background: var(--paper); color: var(--violet); }
.segment-open { background: transparent; color: var(--text); border: 1px dashed var(--muted-dark); }
.segment-open p { color: var(--muted); }
.segment-open .icon-chip { background: rgba(198,255,90,.1); color: var(--lime); }
.segment-open .text-link { margin-top: 10px; }
@media (max-width: 900px) { .segments { grid-template-columns: repeat(2, minmax(0, 1fr)); } .segment-open { grid-column: 1 / -1; } }
@media (max-width: 600px) { .segments { grid-template-columns: 1fr; } }

/* Cotización */
.contact { background: var(--lime); padding-block: clamp(48px, 8vw, 96px); }
.contact-card {
  background: var(--black); border-radius: var(--radius-lg); padding: clamp(24px, 5vw, 56px);
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start;
}
.contact-copy { display: grid; gap: 16px; justify-items: start; }
.contact-copy > p:not(.eyebrow) { color: var(--muted); }
.contact-direct { display: grid; gap: 12px; justify-items: start; margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--line); width: 100%; }
.contact-direct p { color: var(--text); font-weight: 500; }
.contact-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .9rem; color: var(--muted); }
.contact-lines a { display: inline-block; padding-block: 4px; text-decoration: none; transition: color .2s ease; }
.contact-lines a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.quote-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.quote-form > * { min-width: 0; }
.field { display: grid; gap: 8px; align-content: start; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 500; }
.field .optional { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: 400 1rem/1.4 var(--font); color: var(--text);
  background: var(--ink); border: 1px solid var(--muted-dark); border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa4b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(198,255,90,.28); }
.field.has-error input, .field.has-error select { border-color: var(--text); }
.field-error { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 500; color: var(--text); }
.field-error svg { width: 16px; height: 16px; color: var(--lime); flex-shrink: 0; }
.form-actions { position: relative; grid-column: 1 / -1; display: grid; gap: 12px; justify-items: start; margin-top: 4px; }
.form-note { color: var(--muted); font-size: .82rem; }
.form-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-status.is-shown {
  position: static; width: 100%; height: auto; overflow: visible; clip-path: none; white-space: normal;
  color: var(--text); font-size: .92rem; font-weight: 500; padding: 14px 16px;
  border: 1px solid var(--lime); border-radius: 12px; background: rgba(198,255,90,.08);
}
.form-status a { color: var(--lime); font-weight: 600; }
@media (max-width: 860px) { .contact-card { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .quote-form { grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; }
}

/* Footer */
.site-footer { background: var(--header); border-top: 1px solid var(--line); padding-block: 48px 28px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; }
.footer-brand { display: grid; gap: 12px; align-content: start; justify-items: start; }
.footer-brand img { height: 26px; width: auto; display: block; }
.footer-brand p { color: var(--muted); font-size: .9rem; }
.footer-title { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-bottom: 12px; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--muted); font-size: .9rem; }
.footer-list a { display: inline-block; padding-block: 5px; text-decoration: none; transition: color .2s ease; }
.footer-list a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px;
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* WhatsApp flotante */
.float-wa {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--wa); color: var(--wa-ink); font: 600 .9rem var(--font);
  padding: 13px 18px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 10px 26px -10px rgba(37,211,102,.7);
  transition: transform .2s ease, opacity .25s ease, visibility .25s;
}
.float-wa:hover { transform: translateY(-2px); }
.float-wa:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; box-shadow: 0 0 0 9px var(--black); }
.float-wa svg { width: 22px; height: 22px; }
/* Siempre visible y con un poco de movimiento para que se note: una onda verde y un pequeño saludo del ícono cada 3,5 s */
.float-wa::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: wa-onda 3.5s ease-out infinite; }
.float-wa svg { animation: wa-saludo 3.5s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes wa-onda { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.6); } 60%, 100% { box-shadow: 0 0 0 18px rgba(37,211,102,0); } }
@keyframes wa-saludo { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-14deg) scale(1.12); } 82% { transform: rotate(12deg) scale(1.12); } 88% { transform: rotate(-6deg); } 94% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .float-wa::before, .float-wa svg { animation: none; } }
@media (max-width: 480px) { .float-wa span { display: none; } .float-wa { padding: 14px; right: 16px; } }

/* Cotizá tu parque */
.parque { background: radial-gradient(120% 90% at 0% 0%, rgba(111,36,217,.28) 0%, transparent 55%), var(--ink); border-block: 1px solid var(--line); }
.parque-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.parque-copy { display: grid; gap: 18px; justify-items: start; }
.parque-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; width: 100%; }
.parque-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.02); transition: border-color .2s ease, transform .2s ease; }
.parque-steps li:hover { border-color: var(--lime); transform: translateX(4px); }
.parque-steps .num { font-weight: 700; font-size: .9rem; color: var(--lime-ink); background: var(--lime); border-radius: 10px; width: 38px; height: 38px; display: grid; place-items: center; }
.parque-steps p { color: var(--muted); font-size: .92rem; }
.parque-form { background: var(--black); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 40px); }
.hero-parque { font-size: .95rem; }
@media (max-width: 900px) { .parque-grid { grid-template-columns: 1fr; } }

/* Agendá una reunión */
.meet { padding-block: var(--section-y); }
.meet-card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--violet-deep) 0%, var(--violet) 100%); border: 1px solid var(--violet);
}
.meet-copy { display: grid; gap: 10px; max-width: 60ch; }
.meet-copy .eyebrow { color: var(--lime); }
.meet-copy p { color: var(--on-violet); }
@media (max-width: 560px) { .meet-card .btn { width: 100%; } }

/* Hero: verbo que rota + mensaje corto */
.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; }
.hero-copy { gap: 26px; }
.hero-title { font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; display: grid; }
.rotator { display: grid; overflow: hidden; color: var(--lime-ink); justify-self: start; padding: .02em .28em .08em; margin-left: -.06em; border-radius: .22em; background: var(--lime); box-shadow: 0 18px 50px -22px var(--lime); }
.rotator { transition: width .55s cubic-bezier(.7,0,.2,1); }
/* Las palabras solo se deslizan (el recuadro con overflow: hidden las recorta): sin transparencia, así el contraste es siempre el mismo */
.rotator > span { grid-area: 1 / 1; justify-self: start; white-space: nowrap; transition: transform .55s cubic-bezier(.7,0,.2,1); }
.rotator > span:not(.is-on) { transform: translateY(115%); }
.rotator > span.is-out { transform: translateY(-115%); }
/* La palabra que ya salió vuelve a esperar abajo sin animación (si no, cruzaría el recuadro a la vista) */
.rotator > span:not(.is-on):not(.is-out) { transition: none; }
.hero-title-rest { margin-top: .12em; }
@media (min-width: 901px) { .hero-title-rest > span { display: block; } .hero-title { font-size: clamp(2.6rem, 5.4vw, 4.4rem); } }
.hero-copy .lead { max-width: 44ch; }
.hero-actions { align-items: center; gap: 14px 28px; }
.btn-lg { min-height: 56px; padding: 16px 30px; font-size: 1.02rem; }
/* Datos de confianza del encabezado: logo oficial de Apple y textos con ícono, sin recuadro (antes parecían botones) */
.hero-trust { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 500; color: var(--muted); }
.hero-trust svg { width: 18px; height: 18px; color: var(--lime); flex: none; }
.hero-trust-apple img { display: block; width: 108px; height: auto; }
.hero-art { position: relative; }
.hero-art::before { content: ""; position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(111,36,217,.55), transparent); filter: blur(30px); z-index: -1; }
@media (max-width: 900px) { .hero-art { max-width: 440px; } }
/* Home: tres notebooks sobre negro, sin recuadro. Con "aclarar", el negro de la foto se confunde con el del sitio y
   la imagen se ve flotando; en computadora sale un poco de su columna para verse más grande */
.hero-art--foto::before { display: none; }
.hero-art--foto img { mix-blend-mode: lighten; }
@media (min-width: 901px) { .hero-art--foto { margin: -40px calc(-1 * clamp(0px, (100vw - 1088px) / 2, 170px)) -40px calc(-1 * min(4vw, 56px)); } }
@media (max-width: 900px) { .hero-art--foto { max-width: 560px; } }
@media (max-width: 480px) { .hero-actions { gap: 16px; } .hero-actions .text-link { justify-self: center; margin-inline: auto; } }

/* Movimiento sutil: entrada del hero, luz que sigue al cursor en tarjetas y micro-interacciones */
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes art-in { from { opacity: .001; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.js .hero-copy > * { animation: hero-in .7s cubic-bezier(.2,.7,.2,1) backwards; }
.js .hero-copy > :nth-child(2) { animation-delay: .08s; }
.js .hero-copy > :nth-child(3) { animation-delay: .16s; }
.js .hero-copy > :nth-child(4) { animation-delay: .24s; }
.js .hero-copy > :nth-child(n+5) { animation-delay: .32s; }
.js .hero-art { animation: art-in .9s cubic-bezier(.2,.7,.2,1) .1s backwards; }
.hero-art picture, .hero-art img { display: block; will-change: transform; }
.spotlight, .feature { position: relative; isolation: isolate; }
.spotlight::before, .feature::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(198,255,90,.10), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
}
.spotlight:hover::before, .feature:hover::before { opacity: 1; }
.feature { transition: transform .25s ease, border-color .25s ease; }
.feature:hover { transform: translateY(-3px); }
.card .icon-chip, .step .num { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.card:hover .icon-chip { transform: scale(1.08) rotate(-4deg); }
.step { transition: transform .25s ease, border-color .25s ease; }
.step:hover { transform: translateY(-3px); border-color: rgba(198,255,90,.5); }
.section-head h2 .hl { background: linear-gradient(var(--lime), var(--lime)) left 100% / 0 2px no-repeat; transition: background-size .8s cubic-bezier(.2,.7,.2,1) .2s; }
.section-head.is-visible h2 .hl { background-size: 100% 2px; }

/* Aparición al hacer scroll: el script solo oculta (.pre-reveal) lo que el observer confirma que está debajo de la pantalla,
   así nada queda invisible si el script o el observer fallan. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pre-reveal { opacity: 0; }
.reveal.is-visible { animation: rise .55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: var(--d, 0s); }
.stagger > :nth-child(2) { --d: .07s; }
.stagger > :nth-child(3) { --d: .14s; }
.stagger > :nth-child(4) { --d: .21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .track.is-ready { animation: slide calc(var(--speed, 40s) * 4) linear infinite !important; }
  .pre-reveal { opacity: 1; }
  .hero-art picture { transform: none !important; }
  .rotator > span { transition: none !important; }
}
@media print { .pre-reveal { opacity: 1; } .float-wa, .skip-link { display: none; } }

/* Nosotros: misma franja de clientes que la home, más compacta */
.clients.clients-compact { padding-block: clamp(28px, 4vw, 40px); }
.clients.clients-compact h2 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-bottom: clamp(16px, 2.4vw, 24px); }
.clients.clients-compact .track { --gap: 48px; }
.clients.clients-compact .track img { height: 30px; }
@media (max-width: 640px) {
  .clients.clients-compact .track { --gap: 36px; }
  .clients.clients-compact .track img { height: 24px; }
}

/* ===== Menú: desplegable de Servicios ===== */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-drop {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 0; background: none; border: 0; cursor: pointer;
  font: 500 .9rem/1.6 var(--font); color: var(--muted); transition: color .2s ease;
}
.nav-drop svg { width: 16px; height: 16px; transition: transform .25s ease; }
.nav-drop:hover, .nav-group.is-open .nav-drop, .nav-group.is-current .nav-drop { color: var(--text); }
.nav-group.is-open .nav-drop svg { transform: rotate(180deg); }
.subnav {
  position: absolute; top: 100%; left: -20px; z-index: 60; width: 384px;
  display: grid; gap: 4px; padding: 10px; margin-top: 10px;
  background: #121019; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.9);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* puente para el hover */
.nav-group.is-open .subnav { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 941px) {
  .nav-group:hover .subnav { opacity: 1; visibility: visible; transform: none; }
  .nav-group:hover .nav-drop svg { transform: rotate(180deg); }
}
.main-nav .subnav-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 12px; border-radius: 12px; color: var(--text); transition: background-color .2s ease;
}
.main-nav .subnav-link::after { display: none; }
.main-nav .subnav-link:hover, .main-nav .subnav-link[aria-current="page"] { background: rgba(255,255,255,.05); }
.subnav-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(198,255,90,.1); color: var(--lime); }
.subnav-ico svg { width: 24px; height: 24px; }
.subnav-txt { display: grid; gap: 1px; }
.subnav-name { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.subnav-desc { font-size: .8rem; color: var(--muted); line-height: 1.35; }
@media (max-width: 940px) {
  .nav-group { display: block; border-bottom: 1px solid var(--line); }
  .nav-drop { width: 100%; justify-content: space-between; padding-block: 14px; font-size: 1rem; color: var(--text); }
  .subnav {
    position: static; width: auto; margin: 0 0 10px; padding: 0; background: none; border: 0; box-shadow: none;
    display: none; opacity: 1; visibility: visible; transform: none;
  }
  .nav-group.is-open .subnav { display: grid; }
  .js .main-nav .subnav-link { padding: 10px 8px; border-bottom: 0; }
  html:not(.js) .subnav { display: grid; }
}

/* Tarjetas de servicio de la home: toda la tarjeta es clickeable */
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.feature:has(.card-link) { cursor: pointer; }

/* ===== Páginas de servicio ===== */
.svc-hero { padding-block: clamp(32px, 5vw, 64px) clamp(48px, 6vw, 80px); overflow: hidden;
  background: radial-gradient(70% 80% at 100% 0%, rgba(111,36,217,.3) 0%, transparent 60%); }
/* Cada servicio tiene su propio fondo para que se note el cambio de página (misma paleta) */
.svc-hero--venta { background: radial-gradient(60% 75% at 100% 10%, rgba(198,255,90,.16) 0%, transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(111,36,217,.18) 0%, transparent 65%); }
.svc-hero--compra { background: radial-gradient(55% 70% at 95% 15%, rgba(111,36,217,.32) 0%, transparent 60%), radial-gradient(45% 55% at 70% 95%, rgba(198,255,90,.12) 0%, transparent 65%); }
.svc-hero--apple { background: radial-gradient(55% 75% at 85% 30%, rgba(255,255,255,.10) 0%, transparent 60%), linear-gradient(180deg, #000 0%, #0b0a0f 100%); }
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.svc-art img { display: block; width: 100%; height: auto; }
/* Foto del encabezado (alquiler, venta, compra): más grande, con un recuadro de color corrido detrás */
@media (min-width: 901px) { .svc-hero--alquiler .svc-hero-grid, .svc-hero--venta .svc-hero-grid, .svc-hero--compra .svc-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.foto-marco { --acento: var(--lime); position: relative; isolation: isolate; margin: 0 22px 22px 0; }
.foto-marco::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border-radius: 26px; background: var(--acento); z-index: -1; }
.foto-marco picture { display: block; }
.foto-marco img { border-radius: 26px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.85); }
.svc-hero--alquiler .foto-marco { --acento: var(--violet); }
.svc-hero--compra .foto-marco { --acento: linear-gradient(135deg, var(--lime), var(--violet)); }
/* Alquiler: tres notebooks distintas en un solo recuadro (la grande ocupa las dos filas) */
.foto-collage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; aspect-ratio: 5 / 4; }
.foto-collage picture { min-height: 0; }
.foto-collage picture:first-child { grid-row: 1 / 3; }
.foto-collage img { height: 100%; object-fit: cover; border-radius: 20px; box-shadow: 0 20px 50px -25px rgba(0,0,0,.85); }
/* Apple: el logo oficial de Apple Authorized Reseller es la imagen principal */
.apple-stage { display: grid; place-items: center; gap: 18px; padding: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 48px); border-radius: var(--radius-lg);
  background: radial-gradient(80% 80% at 50% 35%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%), #08070c; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 90px -50px rgba(255,255,255,.35); }
.apple-stage img { width: min(340px, 90%); }
.apple-stage p { margin: 0; font-size: .95rem; font-weight: 500; color: var(--muted); }
.solo-celular { display: none; }
.svc-hero-copy { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.svc-hero h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1.04; letter-spacing: -0.03em; }
.svc-hero .lead { color: var(--text); opacity: .84; font-size: clamp(1.05rem, 1.5vw, 1.18rem); max-width: 48ch; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.breadcrumb a { display: inline-block; padding-block: 4px; text-decoration: none; transition: color .2s ease; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--text); }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: .95rem; }
.check-list svg { width: 20px; height: 20px; color: var(--lime); margin-top: 2px; }
@media (max-width: 900px) {
  .svc-hero-grid { grid-template-columns: 1fr; gap: 20px; }
  /* en celular y tablet la ilustración va primero, chica: se nota de entrada en qué servicio estás */
  .svc-art { order: -1; max-width: 360px; width: 100%; justify-self: center; }
  .apple-stage { display: none; }
  .solo-celular { display: block; }
}
@media (max-width: 560px) { .svc-art { max-width: 270px; } }
@media (max-width: 900px) {
  .svc-art.foto { max-width: 440px; }
  .foto-marco { margin: 0 14px 14px 0; }
  .foto-marco::before { inset: 14px -14px -14px 14px; border-radius: 20px; }
  .foto-marco img { border-radius: 20px; }
  .foto-collage { gap: 8px; }
  .foto-collage img { border-radius: 14px; }
}
@media (max-width: 560px) { .svc-art.foto { max-width: none; } }
@media (max-width: 480px) { .svc-hero .hero-actions .btn { width: 100%; } .svc-hero .hero-actions .text-link { margin-inline: auto; } }

.ideal { padding-block: clamp(40px, 6vw, 64px); }
.ideal-inner { display: grid; gap: 18px; justify-items: center; text-align: center; }
.ideal h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 860px; }
.chips li { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: .92rem; font-weight: 500; transition: border-color .2s ease, transform .2s ease; }
.chips li:hover { border-color: var(--lime); transform: translateY(-2px); }

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); max-width: 960px; margin-inline: auto; }
.compare-col { display: grid; gap: 14px; align-content: start; justify-items: start; padding: clamp(24px, 3.4vw, 36px); border-radius: 20px; border: 1px solid var(--muted-dark); background: linear-gradient(160deg, #15101f 0%, var(--ink) 65%); }
.compare-col .tag { color: var(--text); border: 1px solid rgba(255,255,255,.4); }
.compare-main { background: linear-gradient(150deg, #4f15b0 0%, #1f0840 100%); border-color: var(--violet); }
.compare-main .tag { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.compare-col h3 { font-size: 1.3rem; }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }

.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); max-width: 860px; margin-inline: auto; }
.related-card {
  display: grid; gap: 6px; justify-items: start; padding: 26px 24px; border-radius: var(--radius); text-decoration: none;
  border: 1px solid var(--line); background: linear-gradient(160deg, #15101f 0%, var(--ink) 65%); transition: border-color .2s ease, transform .2s ease;
}
.related-card:hover { border-color: var(--lime); transform: translateY(-3px); }
.related-card:hover .text-link svg { transform: translateX(3px); }
.related-name { font-weight: 700; font-size: 1.15rem; }
.related-desc { color: var(--muted); font-size: .94rem; }
@media (max-width: 600px) { .related { grid-template-columns: 1fr; } }
.faq-item p a { color: var(--lime); text-underline-offset: 3px; }
.apple-copy .eyebrow { margin-bottom: -8px; }
@media (max-width: 380px) { .hero-title { font-size: 2.2rem; } .svc-hero h1 { font-size: 2.05rem; } }
.footer-grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr; } }
.rotator > span { text-transform: capitalize; }
.main-nav a, .nav-drop { white-space: nowrap; }
@media (min-width: 941px) and (max-width: 1100px) { .main-nav { gap: 20px; } .header-inner { gap: 20px; } .main-nav .nav-meet { display: none; } }
@media (max-width: 940px) { .js .main-nav { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; } }
.related { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: var(--wrap); }
.apple-copy .text-link { margin-top: -6px; }
/* El botón de pausa de los carruseles va a la izquierda para no quedar debajo del WhatsApp flotante */
.carousel-toggle { right: auto; left: 8px; }
.notfound { padding-bottom: 0; }
.notfound .hero-actions { justify-content: center; }
.about-story p a { color: var(--lime); text-underline-offset: 3px; }

/* Celular: cuando dos secciones con fondo negro van seguidas, el espacio entre las dos es uno solo (antes se sumaban
   los dos márgenes y quedaban 112 px de negro). Las secciones con línea divisoria (.section-divided) mantienen su espacio. */
@media (max-width: 640px) {
  :is(.hero, .svc-hero, .section:not(.parque):not(.how), .apple-band, .fit, .team-strip, .meet, .ideal)
    + :is(.section:not(.parque):not(.how), .apple-band, .fit, .team-strip, .meet, .ideal):not(.section-divided) { padding-top: 0; }
  :is(.hero, .svc-hero, .section:not(.parque):not(.how), .apple-band, .fit, .team-strip, .meet, .ideal):has(+ :is(.section:not(.parque):not(.how), .apple-band, .fit, .team-strip, .meet, .ideal):not(.section-divided)) { padding-bottom: var(--section-y); }
}

/* Logo de Apple Authorized Reseller en el encabezado de la página de Apple */
.svc-badge { width: 156px; height: auto; margin-bottom: 18px; }
@media (max-width: 480px) { .svc-badge { width: 128px; margin-bottom: 14px; } }

/* Nosotros: "De los creadores de Artifact y First Plug", bien visible en el encabezado */
.creators { display: grid; gap: 14px; justify-items: center; width: 100%; max-width: 760px; margin-inline: auto; }
.creators-label { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.creators-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; }
.creator-card { position: relative; display: grid; gap: 6px; padding: 22px 52px 22px 24px; border-radius: var(--radius); text-align: left; text-decoration: none;
  background: linear-gradient(150deg, #1d1530 0%, var(--ink) 75%); border: 1px solid rgba(198,255,90,.35); transition: border-color .2s ease, transform .2s ease; }
.creator-card:hover { border-color: var(--lime); transform: translateY(-2px); }
.creator-name { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.creator-desc { font-size: .92rem; color: var(--muted); }
.creator-ext { position: absolute; top: 20px; right: 20px; width: 18px; height: 18px; color: var(--lime); }
.about-hero .hero-trust { justify-content: center; }
@media (max-width: 560px) {
  .creators-grid { grid-template-columns: 1fr; } .creator-card { padding: 18px 48px 18px 20px; }
  .about-hero .hero-trust { flex-direction: column; gap: 10px; }
}

/* Página de preguntas frecuentes */
.faq-hero { padding-bottom: clamp(36px, 5vw, 56px); }
.faq-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin-top: 6px; }
.faq-index a { padding-block: 6px; font-weight: 600; color: var(--lime); text-decoration: none; }
.faq-index a:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq-tema-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(20px, 3vw, 28px); }
.faq-tema-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.faq-more { margin: clamp(20px, 3vw, 28px) 0 0; text-align: center; }
@media (max-width: 640px) { .faq-tema { padding-block: 40px; } }
/* Celular: el botón flotante de WhatsApp siempre está visible; el pie suma espacio abajo para que no tape la última línea */
@media (max-width: 640px) { .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }

/* Recuadro "Todo lo que incluye" de cada servicio: a mitad de página, ordenado y fácil de leer */
.incluye { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 56px); align-items: start;
  padding: clamp(28px, 4.5vw, 56px); border-radius: var(--radius-lg); border: 1px solid rgba(198,255,90,.4);
  background: radial-gradient(70% 90% at 0% 0%, rgba(111,36,217,.35) 0%, rgba(111,36,217,0) 60%), linear-gradient(160deg, #15101f 0%, var(--ink) 70%);
  box-shadow: 0 40px 90px -50px rgba(111,36,217,.9); }
.incluye-intro { display: grid; gap: 16px; justify-items: start; position: sticky; top: 96px; }
.incluye-intro h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.12; }
.incluye-intro p { margin: 0; color: var(--muted); font-size: 1.02rem; max-width: 38ch; }
.incluye-intro .hero-actions { margin-top: 6px; }
.incluye-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.incluye-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.incluye-lista li:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
.incluye-tick { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--lime-ink); box-shadow: 0 6px 18px -8px var(--lime); }
.incluye-tick svg { width: 17px; height: 17px; stroke-width: 3; }
.incluye-txt { display: grid; gap: 3px; }
.incluye-txt strong { font-size: 1.02rem; font-weight: 600; color: var(--text); }
.incluye-txt span { font-size: .93rem; color: var(--muted); }
@media (max-width: 900px) { .incluye { grid-template-columns: 1fr; } .incluye-intro { position: static; } }
@media (max-width: 560px) { .incluye-lista { grid-template-columns: 1fr; } .incluye-lista li:nth-child(2) { border-top: 1px solid var(--line); padding-top: 18px; } .incluye-intro .btn { width: 100%; } .incluye-intro .text-link { margin-inline: auto; } }
/* Métricas de Artifact y First Plug dentro de sus tarjetas */
.creator-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: .9rem; color: var(--muted); }
.creator-stats b { font-size: 1.15rem; font-weight: 700; color: var(--lime); margin-right: 4px; }