/* ============================================================
   BIOMA — v2.css  (sistema del rediseño, oct 2026)
   Se carga DESPUÉS de style.css en todas las páginas del sitio
   (salvo las landings de Ads, que tienen su propio CSS).
   Dirección: la de la landing de Ads — primero el trabajo real,
   más liviano (sin preloader, cursor, GSAP ni Lenis), y el texto
   largo en dos capas: lo esencial a la vista, el detalle abierto
   a pedido sin sacarlo del HTML.
   ============================================================ */

/* ---------- Ritmo: menos aire muerto entre secciones ---------- */
main .section { padding-block: var(--sp-lg); }

/* ---------- Botones: sombra de elevación neutra, sin halo de color ---------- */
.btn--primary { box-shadow: 0 8px 20px rgba(6, 5, 18, 0.45); }
.btn--primary:hover { box-shadow: 0 12px 26px rgba(6, 5, 18, 0.5); }

/* ---------- Revelado: visible por defecto, animado solo con JS ---------- */
.js-anim .rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-expo), transform .9s var(--ease-expo);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js-anim .rv.is-in { opacity: 1; transform: none; }

.v2-title {
  font-size: var(--fs-2xl);
  max-width: 18ch;
  margin-bottom: var(--sp-sm);
}
.v2-title em {
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.v2-lead {
  text-wrap: balance;
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: 1.55;
  max-width: 52ch;
}
.v2-head { margin-bottom: var(--sp-md); }
.v2-head--center { text-align: center; }
.v2-head--center .v2-title,
.v2-head--center .v2-lead { margin-inline: auto; }
.v2-head--center .v2-title { max-width: 24ch; }

/* ============================================================
   HERO — el trabajo asoma desde el horizonte
   ============================================================ */
.hero.hero--v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* sin esto la bajada estira la grilla y se corta en móvil */
  grid-template-rows: 1fr auto;
  align-items: center;
  padding: calc(var(--sp-md) + 5.5rem) 0 0;
}
.hero--v2 .hero__title {
  font-size: clamp(2.5rem, 1.2rem + 4vw, 4.75rem);
  max-width: none;                     /* siempre 2 líneas: "Tu presencia digital," / "operable." */
  margin-bottom: var(--sp-sm);
}
.hero--v2 .hero__subtitle {
  max-width: 44ch;
  margin-bottom: var(--sp-md);
}
/* texto y botones centrados, como la landing */
.hero--v2 .hero__container { text-align: center; }
.hero--v2 .hero__title,
.hero--v2 .hero__subtitle { margin-inline: auto; }
.hero--v2 .hero__subtitle { text-wrap: balance; }
.hero--v2 .hero__ctas { justify-content: center; }
.hero--v2 .hero__ctas .btn svg { width: 20px; height: 20px; position: relative; z-index: 1; }

/* CTA de WhatsApp en verde, el mismo de la landing. Esmeralda oscuro para que
   el texto blanco se lea (4,6:1 al centro); la menta de marca daría 1,6:1. */
.btn--verde {
  background: linear-gradient(120deg, #047857 0%, #0B9465 100%);
  color: #fff;
  border-color: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  box-shadow: 0 10px 28px rgba(4, 120, 87, 0.35), 0 0 0 1px rgba(62, 230, 168, 0.18) inset;
}
.btn--verde::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #05805B 0%, #0E9C6A 100%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-expo);
}
.btn--verde:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(4, 120, 87, 0.45), 0 0 0 1px rgba(62, 230, 168, 0.3) inset; }
.btn--verde:hover::before { opacity: 1; }
.btn--verde:active { transform: translateY(0) scale(.97); }
.btn--verde svg { width: 20px; height: 20px; flex: none; position: relative; z-index: 1; }
/* destello que cruza el botón a los 1,2 s, 10,2 s y 19,2 s y se queda quieto (WCAG 2.2.2) */
.btn--shine::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(-130%) skewX(-20deg);
  animation: brillo 9s cubic-bezier(.4, 0, .2, 1) 1.2s 3;
}
@keyframes brillo {
  0% { transform: translateX(-130%) skewX(-20deg); }
  11%, 100% { transform: translateX(330%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) { .btn--shine::after { animation: none; display: none; } }

/* Polvo de partículas de la landing: motas iris / menta / lavanda que suben
   desde la base del hero (canvas 2D, sin librerías; JS en home-v2.js). */
.hero__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Pantallas bajas (notebooks de 768–860px de alto): hero más compacto
   para que el abanico siga asomando en el primer pantallazo. */
@media (min-width: 768px) and (max-height: 860px) {
  .hero.hero--v2 { padding-top: 6.5rem; }
  .hero--v2 .hero__title { font-size: clamp(2.4rem, 1rem + 3.2vw, 3.9rem); }
  .hero--v2 .hero__subtitle { font-size: var(--fs-base); max-width: 52ch; margin-bottom: 1.5rem; }
  .hero--v2 .fan { margin-top: 1rem; }
}

/* abanico de proyectos */
.fan::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: min(1200px, 120%);
  height: 170%;
  translate: -50% 0;
  background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(6, 5, 18, 0.92), rgba(6, 5, 18, 0.55) 55%, transparent 75%);
  pointer-events: none;
}
.fan {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: var(--sp-md);
  height: clamp(170px, 19vw, 250px);   /* lo visible: el resto queda bajo el horizonte */
  overflow: visible;
  pointer-events: none;
}
.fan__card {
  --w: clamp(150px, 15vw, 230px);
  position: relative;
  flex: none;
  width: var(--w);
  margin-inline: calc(var(--w) * -0.09);
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  box-shadow: 0 -6px 18px rgba(6, 5, 18, 0.5);
  transform: translateY(calc(var(--fy) + 20%)) rotate(var(--fr));
  transform-origin: 50% 100%;
  transition: transform .6s var(--ease-expo), border-color .4s var(--ease-expo), box-shadow .4s var(--ease-expo);
  pointer-events: auto;
  animation: fan-in 1.25s var(--ease-expo) backwards;
  animation-delay: calc(.25s + var(--i) * 90ms);
}
.fan__card:nth-child(1) { --i: 0; --fy: 30px; --fr: -8deg; }
.fan__card:nth-child(2) { --i: 1; --fy: 10px; --fr: -4deg; }
.fan__card:nth-child(3) { --i: 2; --fy: 0px;  --fr: 0deg;  z-index: 2; }
.fan__card:nth-child(4) { --i: 3; --fy: 10px; --fr: 4deg; }
.fan__card:nth-child(5) { --i: 4; --fy: 30px; --fr: 8deg; }
.fan__card:nth-child(2), .fan__card:nth-child(4) { z-index: 1; }

.fan__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.fan__name {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.2rem .9rem .8rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(to top, rgba(6, 5, 18, 0.92), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease-expo), transform .35s var(--ease-expo);
}
.fan__card:hover,
.fan__card:focus-visible {
  transform: translateY(calc(var(--fy) + 20% - 26px)) rotate(0deg);
  border-color: rgba(62, 230, 168, 0.55);
  box-shadow: 0 -10px 24px rgba(6, 5, 18, 0.6);
  z-index: 3;
}
.fan__card:hover .fan__name,
.fan__card:focus-visible .fan__name { opacity: 1; transform: none; }
.fan__card:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }

@keyframes fan-in {
  from { transform: translateY(130%) rotate(0deg); }
}

@media (max-width: 767px) {
  .hero.hero--v2 { padding-top: 7.5rem; }
  /* la 1.ª línea mide ~9,26 em: con 9,4vw entra en el ancho útil del celular */
  .hero--v2 .hero__title { font-size: clamp(1.75rem, 9.4vw, 2.5rem); }
  .fan { height: 150px; }
  .fan__card { --w: 128px; border-radius: 12px; }
  .fan__card:nth-child(1), .fan__card:nth-child(5) { display: none; }
}

/* ============================================================
   ¿TE SUENA ESTO? — se toca, no se lee
   ============================================================ */
.dolor { --ease: var(--ease-expo); }   /* las coreografías de la landing usan --ease */
.dolor__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
/* tarjeta con ilustración arriba y el texto abajo */
.dolor__card.dcard {
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  padding: .8rem .8rem 1.3rem;
  font-size: clamp(1rem, .92rem + .25vw, 1.12rem);
}
.dcard .pillus {
  flex: none;
  order: 0;
  height: auto;
  aspect-ratio: 300 / 140;
  padding: 6px 8px;
}
.dcard__txt { display: flex; align-items: flex-start; gap: .85rem; padding-inline: .4rem; }
.dcard__txt .dolor__check { width: 26px; height: 26px; }
.dolor__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--grad-card);
  color: var(--muted);
  font: inherit;
  font-size: clamp(1.05rem, 0.92rem + 0.45vw, 1.3rem);
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .35s var(--ease-expo), background-color .35s var(--ease-expo),
              color .35s var(--ease-expo), transform .35s var(--ease-expo);
}
.dolor__card em { font-style: normal; color: var(--text); font-weight: 600; }
.dolor__card:hover { border-color: var(--line-strong); color: var(--text); transform: translateY(-3px); }
.dolor__check {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: .1rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  transition: background-color .3s var(--ease-expo), border-color .3s var(--ease-expo);
}
.dolor__check svg {
  width: 16px;
  height: 16px;
  stroke: var(--ink);
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .4s var(--ease-expo) .05s;
}
.dolor__card[aria-pressed="true"] {
  border-color: rgba(62, 230, 168, 0.6);
  background: linear-gradient(155deg, rgba(62, 230, 168, 0.12), rgba(19, 16, 41, 0.92));
  color: var(--text);
}
.dolor__card[aria-pressed="true"] .dolor__check { background: var(--mint); border-color: var(--mint); }
.dolor__card[aria-pressed="true"] .dolor__check svg { stroke-dashoffset: 0; }

.dolor__salida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem 2rem;
  margin-top: var(--sp-md);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--line);
}
.dolor__cierre {
  font-size: var(--fs-lg);
  color: var(--muted);
  transition: color .4s var(--ease-expo);
}
.dolor[data-sies="1"] .dolor__cierre { color: var(--text); }
.dolor__hint { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-sm); }

@media (max-width: 1199px) {
  .dolor__grid { gap: .75rem; }
  .dolor__card.dcard { padding: .6rem .6rem 1.1rem; font-size: 1rem; }
  .dcard__txt { gap: .65rem; padding-inline: .25rem; }
}
@media (max-width: 999px) {
  .dolor__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; gap: 1rem; }
}
@media (max-width: 599px) {
  .dolor__grid { grid-template-columns: 1fr; }
}

/* --- Ilustraciones animadas: portadas de landings-ads/diseno-web-uruguay.html (oct 2026) --- */
.pillus{
  flex:0 0 100%;order:-1;height:clamp(118px,30vw,168px);padding:8px 10px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,rgba(108,99,255,.1),transparent 70%),rgba(6,5,18,.45);
}
.pillus svg{display:block;width:100%;height:100%}
.pillus *{transform-box:fill-box;transform-origin:center}
.pillus text{font-family:var(--font-display);font-weight:600;font-size:9.5px;fill:var(--muted)}
.il-defs{position:absolute;width:0;height:0;overflow:hidden}
/* piezas compartidas */
.il-vent{fill:rgba(19,16,41,.92);stroke:var(--line-strong)}
.il-barra{fill:var(--surface-2)}
.il-sk{fill:rgba(169,164,248,.16)}
.il-sk2{fill:rgba(169,164,248,.32)}
.il-dot1{fill:#FF5F57}.il-dot2{fill:#FEBC2E}.il-dot3{fill:#28C840}
.il-dotg{fill:rgba(169,164,248,.3)}
.il-viejo{fill:rgba(138,134,184,.3)}
.il-cursor path{fill:#fff;stroke:var(--ink);stroke-linejoin:round}
.il-click{fill:none;stroke:var(--iris);stroke-width:2;opacity:0}
/* 1 · la web quedo vieja: el negocio crece, el sitio junta telaraña */
.il-eje{stroke:rgba(169,164,248,.3)}
.il-b{fill:var(--mint);transform-origin:50% 100%}
.il-b1{opacity:.4}.il-b2{opacity:.6}.il-b3{opacity:.8}
.il-tend,.il-flecha{fill:none;stroke:var(--mint);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.il-tend{stroke-dasharray:1;stroke-dashoffset:0}
.il-roto{fill:none;stroke:rgba(169,164,248,.35);stroke-dasharray:3 2}
.il-roto-x{stroke:rgba(255,92,135,.5);stroke-width:1.2}
.pillus .il-copy{font-size:8px;font-weight:500;fill:rgba(165,160,204,.75)}
.il-telarana{fill:none;stroke:rgba(169,164,248,.55);stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:0}
/* 2 · cambiar algo: un clic, horas de reloj y se rompe otra cosa */
.il-foto{fill:rgba(108,99,255,.22)}
.il-monte{fill:rgba(169,164,248,.45)}
.il-sol{fill:var(--mint);opacity:.75}
.il-sel{fill:none;stroke:var(--iris);stroke-width:1.5;stroke-dasharray:4 3}
.il-boton{fill:var(--danger);transform-origin:0 0;transform:rotate(16deg) translate(2px,4px)}
.il-alerta path:first-child{fill:var(--danger)}
.il-alerta-i{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.il-esfera{fill:rgba(19,16,41,.92);stroke:var(--line-strong);stroke-width:1.5}
.il-marcas{stroke:rgba(169,164,248,.45);stroke-width:1.5;stroke-linecap:round}
.il-hora,.il-min{stroke-linecap:round;transform-box:view-box;transform-origin:250px 58px}
.il-hora{stroke:var(--lavender);stroke-width:3;transform:rotate(90deg)}
.il-min{stroke:var(--mint);stroke-width:2}
.il-eje-reloj{fill:var(--text)}
.pillus .il-horas{font-size:11px;font-weight:700;fill:var(--danger)}
/* 3 · nadie contesta: mensajes vistos, pasan los dias */
.il-avatar{fill:rgba(169,164,248,.45)}
.pillus .il-estado{font-size:7.5px;font-weight:500}
.il-div{stroke:var(--line)}
.il-chip{fill:rgba(169,164,248,.12)}
.pillus .il-d{font-size:8px;fill:var(--lavender)}
.il-m rect{fill:var(--iris)}
.pillus .il-m text{font-size:8px;font-weight:500;fill:#fff}
.il-visto{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.il-tipeo rect{fill:rgba(169,164,248,.14)}
.il-tipeo circle{fill:var(--lavender)}

/* --- coreografías --- */
.pill--vieja{--d:5.6s}.pill--cambio{--d:6.4s}.pill--espera{--d:7.2s}
/* lo que cambia durante la historia se desvanece al final de cada vuelta y reaparece en su estado inicial */
.dcard .il-ciclo{animation:il-ciclo var(--d) linear infinite}
@keyframes il-ciclo{0%{opacity:0}5%,90%{opacity:1}100%{opacity:0}}

.dcard .il-b1{animation:il-b1 var(--d) var(--ease) infinite}
.dcard .il-b2{animation:il-b2 var(--d) var(--ease) infinite}
.dcard .il-b3{animation:il-b3 var(--d) var(--ease) infinite}
.dcard .il-b4{animation:il-b4 var(--d) var(--ease) infinite}
@keyframes il-b1{0%,6%{transform:scaleY(0)}18%,100%{transform:scaleY(1)}}
@keyframes il-b2{0%,14%{transform:scaleY(0)}26%,100%{transform:scaleY(1)}}
@keyframes il-b3{0%,22%{transform:scaleY(0)}34%,100%{transform:scaleY(1)}}
@keyframes il-b4{0%,30%{transform:scaleY(0)}42%,100%{transform:scaleY(1)}}
.dcard .il-tend{animation:il-tend var(--d) ease-in-out infinite}
@keyframes il-tend{0%,38%{stroke-dashoffset:1}58%,100%{stroke-dashoffset:0}}
.dcard .il-flecha{animation:il-flecha var(--d) var(--ease) infinite}
@keyframes il-flecha{0%,56%{opacity:0;transform:translate(-4px,4px)}62%,100%{opacity:1;transform:none}}
.dcard .il-telarana{animation:il-telarana var(--d) ease-in-out infinite}
@keyframes il-telarana{0%,50%{stroke-dashoffset:1}74%,100%{stroke-dashoffset:0}}

.dcard .pill--cambio .il-cursor{animation:il-c2-cursor var(--d) var(--ease) infinite}
@keyframes il-c2-cursor{0%,4%{transform:translate(150px,128px)}18%,100%{transform:translate(57px,70px)}}
.dcard .pill--cambio .il-click{animation:il-c2-click var(--d) ease-out infinite}
@keyframes il-c2-click{0%,18%{opacity:0;transform:scale(.3)}20%{opacity:1}28%,100%{opacity:0;transform:scale(1.8)}}
.dcard .il-sel{animation:il-c2-sel var(--d) linear infinite}
@keyframes il-c2-sel{0%,19%{opacity:0}22%,100%{opacity:1}}
.dcard .il-min{animation:il-c2-min var(--d) cubic-bezier(.45,0,.55,1) infinite}
@keyframes il-c2-min{0%,24%{transform:rotate(0)}58%,100%{transform:rotate(1080deg)}}
.dcard .il-hora{animation:il-c2-hora var(--d) cubic-bezier(.45,0,.55,1) infinite}
@keyframes il-c2-hora{0%,24%{transform:rotate(0)}58%,100%{transform:rotate(90deg)}}
.dcard .il-horas{animation:il-c2-horas var(--d) linear infinite}
@keyframes il-c2-horas{0%,54%{opacity:0}60%,100%{opacity:1}}
.dcard .il-boton{animation:il-c2-boton var(--d) ease-in infinite}
@keyframes il-c2-boton{
  0%,62%{fill:var(--mint);transform:none}
  64%{fill:var(--danger)}
  69%{transform:rotate(22deg) translate(2px,6px)}
  74%,100%{fill:var(--danger);transform:rotate(16deg) translate(2px,4px)}
}
.dcard .il-alerta{animation:il-c2-alerta var(--d) var(--ease) infinite}
@keyframes il-c2-alerta{0%,66%{opacity:0;transform:scale(.3)}72%{opacity:1;transform:scale(1.15)}76%,100%{opacity:1;transform:scale(1)}}

.dcard .il-m1{animation:il-c3-m1 var(--d) var(--ease) infinite}
.dcard .il-m2{animation:il-c3-m2 var(--d) var(--ease) infinite}
.dcard .il-m3{animation:il-c3-m3 var(--d) var(--ease) infinite}
@keyframes il-c3-m1{0%,4%{opacity:0;transform:translateX(10px)}10%,100%{opacity:1;transform:none}}
@keyframes il-c3-m2{0%,40%{opacity:0;transform:translateX(10px)}46%,100%{opacity:1;transform:none}}
@keyframes il-c3-m3{0%,68%{opacity:0;transform:translateX(10px)}74%,100%{opacity:1;transform:none}}
.dcard .il-tipeo{animation:il-c3-tipeo var(--d) linear infinite}
@keyframes il-c3-tipeo{0%,14%{opacity:0}18%,30%{opacity:1}34%,100%{opacity:0}}
.dcard .il-tipeo circle{animation:il-rebote .9s ease-in-out infinite}
.dcard .il-tipeo circle:nth-of-type(2){animation-delay:.15s}
.dcard .il-tipeo circle:nth-of-type(3){animation-delay:.3s}
@keyframes il-rebote{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}}
.dcard .il-d1{animation:il-c3-d1 var(--d) linear infinite}
.dcard .il-d2{animation:il-c3-d2 var(--d) linear infinite}
.dcard .il-d3{animation:il-c3-d3 var(--d) linear infinite}
@keyframes il-c3-d1{0%,3%{opacity:0}8%,34%{opacity:1}38%,100%{opacity:0}}
@keyframes il-c3-d2{0%,36%{opacity:0}40%,62%{opacity:1}66%,100%{opacity:0}}
@keyframes il-c3-d3{0%{opacity:1}4%,64%{opacity:0}68%,100%{opacity:1}}

/* 6 · tu marca se ve distinta en cada pieza: tres autores, tres logos */
.pill--marca{--d:6.4s;--il-amarillo:#FBBC04}
.il-m-heart{fill:none;stroke:rgba(169,164,248,.55);stroke-width:1.2;stroke-linejoin:round}
.pillus .il-m-dorso{opacity:.55;transform:rotate(7deg)}
.il-m-ma{fill:var(--iris)}
.il-m-mb{fill:var(--mint)}
.il-m-mc{fill:none;stroke:var(--il-amarillo);stroke-width:1.6;stroke-linejoin:round}
.pillus .il-m-wa{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:-.2px;fill:var(--iris)}
.pillus .il-m-wb{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:13px;fill:var(--mint)}
.pillus .il-m-wc{font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:1.3px;fill:var(--il-amarillo)}
.il-m-cmp{stroke:var(--danger);stroke-width:1.3;stroke-dasharray:3 2.5}
.pillus .il-m-cmp{transform-origin:0 50%}
.il-m-ne circle{fill:var(--danger)}
.il-m-ne path{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round}
.pillus .il-m-clk-b{stroke:var(--mint)}
.pillus .il-m-clk-c{stroke:var(--il-amarillo)}
.il-cursor .il-m-av{stroke:var(--ink);stroke-width:1}
.il-m-cur-a .il-m-av{fill:var(--iris)}
.il-m-cur-b .il-m-av{fill:var(--mint)}
.il-m-cur-c .il-m-av{fill:var(--il-amarillo)}


/* coreografia: entra un autor por pieza, cada uno estampa "su" version del logo; al final la regla de comparacion marca ≠ */
.dcard .il-m-cur-a{animation:il-m-cur-a var(--d) var(--ease) infinite}
.dcard .il-m-cur-b{animation:il-m-cur-b var(--d) var(--ease) infinite}
.dcard .il-m-cur-c{animation:il-m-cur-c var(--d) var(--ease) infinite}
@keyframes il-m-cur-a{0%,3%{opacity:0;transform:translate(-20px,150px)}5%{opacity:1}13%,15%{transform:translate(46px,58px)}21%,100%{opacity:1;transform:translate(60px,68px)}}
@keyframes il-m-cur-b{0%,21%{opacity:0;transform:translate(150px,150px)}23%{opacity:1}31%,33%{transform:translate(132px,58px)}39%,100%{opacity:1;transform:translate(148px,68px)}}
@keyframes il-m-cur-c{0%,39%{opacity:0;transform:translate(300px,150px)}41%{opacity:1}49%,51%{transform:translate(252px,58px)}57%,100%{opacity:1;transform:translate(268px,68px)}}
.dcard .il-m-clk-a{animation:il-m-clk-a var(--d) ease-out infinite}
.dcard .il-m-clk-b{animation:il-m-clk-b var(--d) ease-out infinite}
.dcard .il-m-clk-c{animation:il-m-clk-c var(--d) ease-out infinite}
@keyframes il-m-clk-a{0%,13%{opacity:0;transform:scale(.3)}14%{opacity:1}22%,100%{opacity:0;transform:scale(1.8)}}
@keyframes il-m-clk-b{0%,31%{opacity:0;transform:scale(.3)}32%{opacity:1}40%,100%{opacity:0;transform:scale(1.8)}}
@keyframes il-m-clk-c{0%,49%{opacity:0;transform:scale(.3)}50%{opacity:1}58%,100%{opacity:0;transform:scale(1.8)}}
.dcard .il-m-la{animation:il-m-la var(--d) var(--ease) infinite}
.dcard .il-m-lb{animation:il-m-lb var(--d) var(--ease) infinite}
.dcard .il-m-lc{animation:il-m-lc var(--d) var(--ease) infinite}
@keyframes il-m-la{0%,13.5%{opacity:0;transform:scale(.3)}17%{opacity:1;transform:scale(1.14)}20%,100%{opacity:1;transform:none}}
@keyframes il-m-lb{0%,31.5%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.14)}38%,100%{opacity:1;transform:none}}
@keyframes il-m-lc{0%,49.5%{opacity:0;transform:scale(.3)}53%{opacity:1;transform:scale(1.14)}56%,100%{opacity:1;transform:none}}
.dcard .il-m-cmp1{animation:il-m-cmp1 var(--d) cubic-bezier(.45,0,.55,1) infinite}
.dcard .il-m-cmp2{animation:il-m-cmp2 var(--d) cubic-bezier(.45,0,.55,1) infinite}
@keyframes il-m-cmp1{0%,58%{transform:scaleX(0)}63%,100%{transform:scaleX(1)}}
@keyframes il-m-cmp2{0%,61%{transform:scaleX(0)}67%,100%{transform:scaleX(1)}}
.dcard .il-m-ne1{animation:il-m-ne1 var(--d) var(--ease) infinite}
.dcard .il-m-ne2{animation:il-m-ne2 var(--d) var(--ease) infinite}
@keyframes il-m-ne1{0%,61%{opacity:0;transform:scale(.3)}64%{opacity:1;transform:scale(1.25)}67%,100%{opacity:1;transform:none}}
@keyframes il-m-ne2{0%,65%{opacity:0;transform:scale(.3)}68%{opacity:1;transform:scale(1.25)}71%,100%{opacity:1;transform:none}}

/* las ilustraciones se animan solo con la sección en pantalla */
.dolor:not(.en-vista) .dcard .pillus * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .dcard .pillus * { animation: none !important; } }

/* ============================================================
   WEB SANA — el organismo al centro (40% de la pantalla) y las
   6 cosas que una web tiene que tener, enganchadas a sus partículas
   ============================================================ */
.sana { overflow: hidden; }
.sana__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.5vw, 3rem);
}
.sana__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;                          /* encima del organismo: el punto se ve enganchado a la partícula */
}
.sana__core { position: relative; z-index: 1; display: grid; place-items: center; }
.sana__core::before {                 /* halo que lo despega del fondo */
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66, 59, 199, 0.34), transparent 68%);
  filter: blur(34px);
  pointer-events: none;
}
.sana__canvas {
  position: relative;
  display: block;
  width: min(40vw, 70vh, 640px);      /* 40% de la pantalla */
  height: auto;
  aspect-ratio: 1 / 1;                /* imprescindible: three-scene.js toma el tamaño de la caja */
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 66%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 66%, transparent 100%);
}

.sana__col {
  position: relative;
  z-index: 3;
  list-style: none;
  display: grid;
  gap: clamp(2rem, 7vh, 4.5rem);
}
.sana__item {
  position: relative;
  display: grid;
  gap: .3rem;
  max-width: 21rem;
  padding: .9rem 1.1rem;
  border-radius: 14px;
  transition: background-color .35s var(--ease-expo);
}
.sana__t {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.sana__d { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.sana__node {
  position: absolute;
  top: 1.45rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(62, 230, 168, 0.16);
  transition: box-shadow .35s var(--ease-expo), transform .35s var(--ease-expo);
}
/* el anillo: arriba y abajo más cerca del centro, el del medio más afuera */
.sana__col--izq { justify-items: end; text-align: right; }
.sana__col--izq .sana__node { right: -6px; }
.sana__col--izq .sana__item:nth-child(1),
.sana__col--izq .sana__item:nth-child(3) { translate: 2.5vw 0; }
.sana__col--izq .sana__item:nth-child(2) { translate: -1vw 0; }
.sana__col--der { justify-items: start; }
.sana__col--der .sana__node { left: -6px; }
.sana__col--der .sana__item:nth-child(1),
.sana__col--der .sana__item:nth-child(3) { translate: -2.5vw 0; }
.sana__col--der .sana__item:nth-child(2) { translate: 1vw 0; }

.sana__item:hover { background: rgba(169, 164, 248, 0.06); }
.sana__item:hover .sana__node { transform: scale(1.25); box-shadow: 0 0 0 7px rgba(62, 230, 168, 0.18); }

/* líneas (las crea home-v2.js): se dibujan al entrar la sección */
.sana__line {
  fill: none;
  stroke: url(#sana-grad);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .75;
  transition: stroke-dashoffset 1.4s var(--ease-expo), opacity .3s var(--ease-expo), stroke-width .3s var(--ease-expo);
  transition-delay: calc(.35s + var(--i, 0) * 110ms), 0s, 0s;
}
.sana__dot { fill: var(--mint); opacity: 0; transition: opacity .5s var(--ease-expo); transition-delay: calc(1.1s + var(--i, 0) * 110ms); }
.sana__halo { fill: rgba(62, 230, 168, 0.22); opacity: 0; transition: opacity .5s var(--ease-expo); transition-delay: calc(1.1s + var(--i, 0) * 110ms); }
.sana.is-in .sana__line { stroke-dashoffset: 0; }
.sana.is-in .sana__dot, .sana.is-in .sana__halo { opacity: 1; }
.sana__line.is-hot { opacity: 1; stroke-width: 2.4; }
/* las ventajas entran solo con opacidad: las líneas nacen de su punto exacto */
.js-anim .sana__item.rv { transform: none; }
/* si el sistema de revelado se desactiva, las líneas igual se ven */
html:not(.js-anim) .sana__line { stroke-dashoffset: 0; }
html:not(.js-anim) .sana__dot, html:not(.js-anim) .sana__halo { opacity: 1; }

/* tablet angosta y celular: el organismo arriba, las 6 en lista, sin líneas */
@media (max-width: 759px) {
  .sana__stage { grid-template-columns: 1fr; justify-items: center; gap: var(--sp-sm); }
  .sana__lines { display: none; }
  .sana__core { order: -1; }
  .sana__canvas { width: min(78vw, 360px); }
  .sana__col { width: 100%; gap: .4rem; justify-items: stretch; text-align: left; }
  .sana__col .sana__item { translate: none !important; max-width: none; padding: .7rem .5rem .7rem 2rem; }
  .sana__col--izq .sana__node, .sana__col--der .sana__node { left: .5rem; right: auto; top: 1.15rem; }
}

/* ============================================================
   MANIFIESTO
   ============================================================ */
.manif2 { text-align: center; background: var(--bg); }
.manif2 .v2-title { max-width: 22ch; margin-inline: auto; }
.manif2__line {
  text-wrap: balance;
  max-width: 46ch;
  margin: var(--sp-sm) auto 0;
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: 1.55;
}
.manif2__line strong { color: var(--text); font-weight: 600; }
.manif2__line em { font-style: normal; color: var(--mint); }

/* ============================================================
   SERVICIOS — índice, sin scroll secuestrado
   ============================================================ */
.servs__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--sp-lg);
  align-items: start;
}
.servs__head { position: sticky; top: 7rem; }
/* títulos en columna lateral: máximo 3 líneas */
@media (min-width: 900px) {
  .servs__head .v2-title,
  .opera__wrap .v2-title { font-size: clamp(2rem, 0.6rem + 3vw, 3.5rem); max-width: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .servs__head .v2-title,
  .opera__wrap .v2-title { font-size: calc(0.2rem + 3.2vw); }
}
@media (max-width: 599px) {
  .servs__head .v2-title,
  .opera__wrap .v2-title { font-size: min(var(--fs-2xl), 8.8vw); }
}
.servs__list { list-style: none; border-top: 1px solid var(--line); }
.serv {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.35rem 32px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  isolation: isolate;
}
.serv::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(108, 99, 255, 0.14), rgba(62, 230, 168, 0.06));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease-expo);
}
.serv:hover::before,
.serv:focus-visible::before { transform: scaleX(1); }
.serv__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--lavender);
  border: 1px solid var(--line);
  transition: color .35s var(--ease-expo), border-color .35s var(--ease-expo);
}
.serv__icon svg { width: 22px; height: 22px; }
.serv__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.serv__text { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: .2rem; line-height: 1.5; }
.serv__arrow {
  font-size: 1.3rem;
  color: var(--muted);
  transition: transform .45s var(--ease-expo), color .35s var(--ease-expo);
}
.serv:hover .serv__icon { color: var(--mint); border-color: rgba(62, 230, 168, 0.4); }
.serv:hover .serv__arrow { transform: translateX(6px); color: var(--mint); }
.serv:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }

@media (max-width: 899px) {
  .servs__wrap { grid-template-columns: 1fr; gap: var(--sp-sm); }
  .servs__head { position: static; }
}

/* ============================================================
   TRABAJOS — cada web en su marco de navegador (de la landing)
   ============================================================ */
.works2__list {
  list-style: none;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.wcard { min-width: 0; }
.wcard__link { display: flex; flex-direction: column; gap: 1rem; color: inherit; text-decoration: none; }
.wcard__link:focus-visible { outline: 2px solid var(--mint); outline-offset: 6px; border-radius: 14px; }
.wcard__browser {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 10px 22px rgba(6, 5, 18, 0.45);
  transition: transform .45s var(--ease-expo), border-color .45s var(--ease-expo), box-shadow .45s var(--ease-expo);
}
.wcard:hover .wcard__browser {
  transform: translateY(-6px);
  border-color: rgba(62, 230, 168, 0.5);
  box-shadow: 0 16px 30px rgba(6, 5, 18, 0.55);
}
.wcard__chrome {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.wcard__dots { display: inline-flex; gap: .3rem; flex: none; }
.wcard__dots i { width: 9px; height: 9px; border-radius: 50%; }
.wcard__dots i:nth-child(1) { background: #FF5F57; }
.wcard__dots i:nth-child(2) { background: #FEBC2E; }
.wcard__dots i:nth-child(3) { background: #28C840; }
.wcard__url {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  background: rgba(6, 5, 18, 0.6);
  border-radius: 100px;
  padding: .22rem .7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .35s var(--ease-expo);
}
.wcard:hover .wcard__url { color: var(--mint); }
.wcard__shot { overflow: hidden; background: var(--surface); aspect-ratio: 16 / 10; }
.wcard__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transform: scale(1.01);
  transition: transform .7s var(--ease-expo);
}
.wcard:hover .wcard__shot img { transform: scale(1.06); }
.wcard__body { display: flex; flex-direction: column; gap: .3rem; }
.wcard__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.wcard__rubro { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.wcard__feat {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .3rem;
  font-size: var(--fs-xs);
  color: var(--mint);
  line-height: 1.5;
}
.wcard__feat svg { width: 14px; height: 14px; flex: none; margin-top: .15rem; }
.trab__mas { margin-top: var(--sp-md); }

@media (max-width: 719px) {
  .works2__list {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .wcard { flex: 0 0 min(82%, 320px); scroll-snap-align: center; }
  .wcard:hover .wcard__browser { transform: none; }
}

/* ============================================================
   RESEÑAS DE GOOGLE (literales)
   ============================================================ */
.resenas2 { background: var(--bg); }
.reviews {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.review {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: var(--sp-md);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--grad-card);
  transition: border-color .3s var(--ease-expo), transform .3s var(--ease-expo);
}
.review:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.review__head { display: flex; align-items: center; gap: .8rem; }
.review__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--grad-brand);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
}
.review__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); }
.review__meta { font-size: var(--fs-xs); color: var(--muted); }
.review__stars { display: inline-flex; gap: .2rem; }
.review__stars svg { width: 16px; height: 16px; fill: #FBBC04; }
.review__text { font-size: var(--fs-base); color: var(--text); line-height: 1.6; }
.reviews__mas { margin-top: var(--sp-md); text-align: center; }

/* ============================================================
   OPERABLE — la misma web, vista por el cliente y por el equipo
   ============================================================ */
.opera__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--sp-lg);
  align-items: center;
}
.opera__vals { display: grid; gap: 1.1rem; margin-top: var(--sp-md); }
.opera__val { padding-left: 1.1rem; border-left: 1px solid var(--line-strong); }
.opera__val h3 { font-size: var(--fs-base); font-weight: 600; margin-bottom: .2rem; }
.opera__val p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }

.demo { position: relative; }
.demo__switch {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: rgba(6, 5, 18, 0.6);
  margin-bottom: 1rem;
}
.demo__tab {
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 100px;
  padding: .6rem 1.15rem;
  min-height: 44px;
  cursor: pointer;
  transition: color .3s var(--ease-expo), background-color .3s var(--ease-expo);
}
.demo__tab[aria-selected="true"] { background: var(--text); color: var(--ink); }
.demo__tab:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.demo__frame {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 16px 32px rgba(6, 5, 18, 0.5);
}
.demo__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.demo__view { position: absolute; inset: 0; }
.demo__view--cliente img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* la vista del equipo se descubre como una capa, de izquierda a derecha */
.demo__view--equipo {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .85s var(--ease-expo);
  display: grid;
  grid-template-columns: 26% 1fr;
  background: #F5F4FB;
  color: #1B1839;
  font-size: clamp(.62rem, .5rem + .45vw, .82rem);
}
.demo[data-vista="equipo"] .demo__view--equipo { clip-path: inset(0 0 0 0); }
.panel__side { background: #1B1839; color: #CFCBF5; padding: 1.1em .9em; display: grid; align-content: start; gap: .5em; }
.panel__side b { color: #fff; font-family: var(--font-display); font-size: 1.05em; margin-bottom: .6em; }
.panel__side span { padding: .45em .6em; border-radius: 6px; }
.panel__side span.is-on { background: rgba(108, 99, 255, 0.35); color: #fff; }
.panel__main { padding: 1.3em 1.5em; display: grid; align-content: start; gap: .85em; }
.panel__h { font-family: var(--font-display); font-weight: 700; font-size: 1.35em; }
.panel__field { display: grid; gap: .3em; }
.panel__field label { font-weight: 600; color: #5B5786; font-size: .9em; }
.panel__input {
  background: #fff;
  border: 1px solid #DAD7EE;
  border-radius: 7px;
  padding: .55em .75em;
  color: #1B1839;
}
.panel__row { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.panel__fotos { display: flex; gap: .5em; }
.panel__fotos i {
  width: 3.4em;
  height: 2.5em;
  border-radius: 6px;
  background: linear-gradient(135deg, #B8D9A8, #6E9F5E);
}
.panel__fotos i:nth-child(2) { background: linear-gradient(135deg, #D9C9A0, #9C8455); }
.panel__fotos i:nth-child(3) { background: #EEEDF7; border: 1px dashed #B9B5DA; }
.panel__pub {
  justify-self: start;
  background: #423BC7;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 100px;
  padding: .6em 1.4em;
}
.demo__cap { margin-top: .9rem; font-size: var(--fs-sm); color: var(--muted); }
.demo__cap a { color: var(--mint); text-underline-offset: 3px; }

@media (max-width: 899px) {
  .opera__wrap { grid-template-columns: 1fr; }
}

/* ============================================================
   GEO — mapa de puntos + detalle en segunda capa
   ============================================================ */
.geo2__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sp-lg);
  align-items: center;
}
.geo2__grupos { display: grid; gap: 1.1rem; margin-top: var(--sp-md); }
.geo2__grupos[hidden] { display: none; }
.geo2__grupo-t {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--lavender);
  margin-bottom: .55rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .45rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: var(--fs-sm);
  color: var(--text);
  text-decoration: none;
  transition: border-color .3s var(--ease-expo), color .3s var(--ease-expo), background-color .3s var(--ease-expo);
}
.chip:hover { border-color: var(--mint); color: var(--mint); background: var(--mint-dim); }
.chip:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.mapa { width: 100%; max-width: 520px; justify-self: center; }
.mapa svg { width: 100%; height: auto; display: block; overflow: visible; }
.mapa__dots { stroke: var(--iris); stroke-width: 5.5; stroke-linecap: round; opacity: .7; }
.mapa__reveal {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1.8s var(--ease-quart);
}
.js-anim .mapa:not(.is-in) .mapa__reveal { transform: scale(0); }
.mapa__pin { opacity: 1; transition: opacity .6s var(--ease-expo); transition-delay: calc(.9s + var(--i, 0) * 180ms); }
.js-anim .mapa:not(.is-in) .mapa__pin { opacity: 0; }
.mapa__pin circle { fill: var(--mint); }
.mapa__pin .mapa__ring {
  fill: none;
  stroke: var(--mint);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.mapa.is-in .mapa__ring { animation: ping 1.6s var(--ease-expo) calc(1s + var(--i, 0) * 180ms) 2; }
.mapa__pin text {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  fill: var(--text);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 6px;
  stroke-linejoin: round;
}
.mapa__pin .mapa__sub { font-family: var(--font-body); font-size: 15px; font-weight: 500; fill: var(--muted); }
@keyframes ping {
  from { opacity: .9; transform: scale(.6); }
  to   { opacity: 0;  transform: scale(2.6); }
}

/* segunda capa: el texto completo sigue en el HTML, abierto a pedido */
.capa {
  max-width: 900px;
  margin-top: var(--sp-lg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.capa summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  transition: color .3s var(--ease-expo);
}
.capa summary::-webkit-details-marker { display: none; }
.capa summary:hover { color: var(--mint); }
.capa summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 6px; }
.capa__mas {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  transition: transform .45s var(--ease-expo), border-color .3s var(--ease-expo);
}
.capa__mas svg { width: 16px; height: 16px; }
.capa[open] .capa__mas { transform: rotate(45deg); border-color: var(--mint); }
.capa__body { padding-bottom: var(--sp-md); }
.capa__body .section-text:first-child { margin-top: 0; }
.capa[open] .capa__body { animation: capa-in .6s var(--ease-expo); }
@keyframes capa-in { from { opacity: 0; transform: translateY(-8px); } }
.geo2__contacto { margin-top: var(--sp-md); font-size: var(--fs-sm); color: var(--muted); }
.geo2__contacto a { color: var(--mint); text-underline-offset: 3px; }

@media (max-width: 899px) {
  .geo2__wrap { grid-template-columns: 1fr; }
  .mapa { max-width: 420px; order: -1; }
}

/* ============================================================
   FAQ en dos columnas
   ============================================================ */
.faq2 { background: var(--bg); }
.faq2__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--sp-lg);
  align-items: start;
}
.faq2__wrap .v2-title { position: sticky; top: 7rem; }
@media (max-width: 899px) {
  .faq2__wrap { grid-template-columns: 1fr; gap: var(--sp-sm); }
  .faq2__wrap .v2-title { position: static; }
}

/* ============================================================
   CIERRE — el mismo degradado de los destacados (como la landing)
   ============================================================ */
.cierre2 {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--grad-brand);
  color: var(--ink);
}
.cierre2::before {
  content: '';
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  left: 50%;
  top: -40vmax;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 62%);
  pointer-events: none;
}
.cierre2 .container { position: relative; display: grid; justify-items: center; gap: var(--sp-sm); }
.cierre2__title { font-size: var(--fs-2xl); max-width: 20ch; color: var(--ink); }
.cierre2__title em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .12em;
}
.cierre2__text { font-size: var(--fs-lg); max-width: 44ch; color: rgba(6, 5, 18, 0.88); line-height: 1.5; }
.cierre2__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: var(--sp-xs); }
.btn--tinta {
  background: var(--ink);
  color: var(--text);
  border-color: var(--ink);
  box-shadow: 0 10px 22px rgba(6, 5, 18, 0.3);
}
.btn--tinta:hover { background: #17143A; border-color: #17143A; color: #fff; }
.btn--tinta svg { width: 20px; height: 20px; position: relative; z-index: 1; }
.btn--borde-tinta { background: transparent; color: var(--ink); border-color: rgba(6, 5, 18, 0.45); }
.btn--borde-tinta:hover { border-color: var(--ink); background: rgba(6, 5, 18, 0.08); }
.cierre2 .btn:focus-visible { outline-color: var(--ink); }

/* ---------- Footer: la lista larga de servicios en columnas ---------- */
@media (min-width: 901px) { .footer__top { grid-template-columns: 1fr 2fr 0.8fr auto; } }
.footer__nav-group[aria-label="Servicios"] .footer__nav-list { display: block; columns: 2; column-gap: 2.5rem; }
.footer__nav-group[aria-label="Servicios"] .footer__nav-list li { break-inside: avoid; margin-bottom: .55rem; }
@media (max-width: 599px) {
  .footer__nav-group[aria-label="Servicios"] .footer__nav-list { columns: 1; }
}

/* ---------- Móvil: botones del hero a todo el ancho ---------- */
@media (max-width: 519px) {
  .hero--v2 .hero__ctas .btn { flex: 1 1 100%; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .fan__card { animation: none; }
  .js-anim .rv { opacity: 1; transform: none; }
  .js-anim .mapa:not(.is-in) .mapa__reveal { transform: none; }
  .js-anim .mapa:not(.is-in) .mapa__pin { opacity: 1; }
  .sana__line { stroke-dashoffset: 0; transition: none; }
  .sana__dot, .sana__halo { opacity: 1; transition: none; }
  .demo__view--equipo { transition: none; }
}

/* ============================================================
   PÁGINAS INTERIORES (page-hero y bloques de contenido)
   ============================================================ */
/* Heroes interiores: el objeto de partículas de cada página (three-scene.js)
   va a la derecha, así que el texto queda a la izquierda, como siempre. */
.page-hero--v2 { padding: calc(var(--sp-lg) + 5rem) 0 var(--sp-lg); }
.page-hero--v2 .page-hero__container { position: relative; z-index: var(--z-content); }
.page-hero--v2 .page-hero__title { max-width: 16ch; font-size: clamp(2.2rem, 1.1rem + 3.6vw, 4.4rem); text-wrap: balance; }
.page-hero--v2 .page-hero__subtitle { max-width: 44ch; }   /* deja lugar al objeto de la derecha */
.page-hero--v2 .page-hero__ctas .btn svg { width: 20px; height: 20px; flex: none; position: relative; z-index: 1; }
@media (max-width: 519px) { .page-hero--v2 .page-hero__ctas .btn { flex: 1 1 100%; } }

/* listas con tilde o cruz: el texto fluye normal.
   Antes cada nodo de texto y cada <strong> era una columna de flex y en
   el celular las frases quedaban de una palabra por renglón y se cortaban. */
.list-check li,
.list-cross li { display: block; position: relative; padding-left: calc(22px + 1.1rem); }
.list-check li::before,
.list-cross li::before { position: absolute; left: 0; top: 0; }
.list-check--big li::before { top: 1.3rem; }
.list-cross li::before { top: .5rem; }

/* la segunda capa dentro de una sección de texto */
.section-lead + .capa,
.section-text + .capa,
.section-title + .capa { margin-top: var(--sp-sm); }

/* FAQ en dos columnas también con el título de siempre */
.faq2__wrap .section-title { position: sticky; top: 7rem; margin-bottom: 0; }
@media (max-width: 899px) { .faq2__wrap .section-title { position: static; margin-bottom: var(--sp-sm); } }

/* ============================================================
   CORRECCIONES DE LA REVISIÓN VISUAL (oct 2026)
   ============================================================ */

/* Menú del celular. backdrop-filter convertía a la barra scrolleada en el
   contenedor del menú fijo y lo encerraba en ~70px; el submenú heredaba el
   corrimiento de escritorio; el fondo era transparente y no se podía scrollear. */
@media (max-width: 900px) {
  .navbar--scrolled {
    background: rgba(6, 5, 18, 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .navbar__item--dropdown:hover .navbar__dropdown,
  .navbar__item--dropdown:focus-within .navbar__dropdown { transform: none; }
  .navbar__menu {
    background: radial-gradient(120% 120% at 80% 10%, rgba(66, 59, 199, 0.35) 0%, transparent 55%), var(--ink);
    justify-content: flex-start;
    padding-top: calc(6.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* comparativas: los íconos del encabezado no tenían tamaño */
.compare__col h3 svg { width: 1.2em; height: 1.2em; flex: none; }
/* la columna "ellos" marca sus contras con cruz, no con tilde */
.compare__col--them .list-check li::before {
  background: var(--danger-dim) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5C87' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: rgba(255, 92, 135, 0.3);
}

/* aire entre el párrafo de entrada y el bloque que le sigue */
:is(.section-lead, .section-text, .capa) + :is(.steps, .duo__grid, .features__grid, .compare__grid, .price-note) { margin-top: var(--sp-md); }
:is(.section-lead, .section-text, .capa) + :is(.list-check, .list-cross) { margin-top: var(--sp-sm); }
/* la etiqueta del plan sobresale 13px por arriba de la tarjeta */
:is(.section-lead, .section-text, .capa) + .plans__grid { margin-top: calc(var(--sp-md) + 13px); }

/* enlaces dentro del texto de los componentes: igual que .section-text a */
:is(.faq-item__answer, .price-note__text, .step-row__text, .feature-card__text, .duo-card p, .list-check li, .list-cross li) a:not(.btn) {
  color: var(--mint);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:is(.faq-item__answer, .price-note__text, .step-row__text, .feature-card__text, .duo-card p, .list-check li, .list-cross li) a:not(.btn):hover { opacity: .8; }

/* precio de los planes: "+ IVA" no queda solo en otro renglón */
.plan-card__price { line-height: 1.15; font-size: clamp(1.7rem, 1.2rem + 1.1vw, 2.4rem); }
.plan-card__price .plan-card__period { white-space: nowrap; }

/* listas: aire entre ítems y tilde alineada con la primera línea */
.list-check:not(.list-check--big):not(.list-check--plain) { gap: .65rem; }
.list-check--plain li::before { top: calc(.45rem + (1lh - 22px) / 2 - .15em); }
.list-check--big li::before { top: calc(1.3rem + (1lh - 22px) / 2 - .15em); }
/* ítems largos (negrita + párrafo) en letra de lectura, no de título */
.list-check--big li:has(strong) {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
}
.list-check--big li:has(strong) strong { color: var(--text); font-weight: 600; }

/* pasos con varios párrafos */
.step-row__text + .step-row__text { margin-top: .75em; }
/* una sola raya cuando la capa sigue a los pasos */
.steps + .capa { margin-top: 0; border-top: 0; }

/* botones del celular: mismo ancho y etiquetas en un renglón */
@media (max-width: 519px) {
  .cierre2__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .cierre2__ctas .btn { justify-content: center; }
  .page-hero--v2 .page-hero__ctas .btn,
  .cierre2__ctas .btn { padding-inline: 1.25rem; }
}

/* subrayado del destacado del cierre sin cortes en las letras con descendente */
.cierre2__title em { text-decoration-skip-ink: none; }
/* título + primer párrafo de cuerpo: el mismo aire que con una bajada */
.section-title + .section-text { margin-top: 0; }

/* ============================================================
   NAVBAR SIN SUBMENÚ — los servicios van directo en la barra
   ============================================================ */
.navbar__sep { width: 1px; height: 1.1rem; background: var(--line-strong); align-self: center; }
@media (min-width: 901px) {
  .navbar__link { white-space: nowrap; }
  .navbar__menu { gap: clamp(1rem, 4.2vw - 1.6rem, 2.2rem); }
}
@media (min-width: 901px) and (max-width: 1079px) {
  .navbar__link { font-size: .84rem; }
  .navbar__cta { padding-inline: 1.1rem; }
}
@media (max-width: 900px) {
  .navbar__sep { width: 2.5rem; height: 1px; margin-block: .4rem; align-self: flex-start; }
  /* sin el link "Contacto", el botón Hablemos pasa a ser el acceso al contacto en el celular */
  .navbar__menu .navbar__cta { display: inline-flex; margin: 1rem 0 0; }
}
@media (max-width: 519px) { .serv { padding-inline: 1rem; } }

/* mapa: capitales departamentales y ciudades (oct 2026) */
.mapa__pin--cap text { font-size: 14px; }
.mapa__pin--ciudad circle { fill: var(--lavender); }
.mapa__pin--ciudad text { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; fill: var(--muted); }
.mapa__pin--mvd text:not(.mapa__sub) { font-size: 20px; }
.mapa__pin { transition-delay: calc(.9s + var(--i, 0) * 120ms); }
/* título del mapa (columna lateral): máximo 3 líneas */
@media (min-width: 900px) { .geo2__wrap .v2-title { font-size: clamp(2rem, .6rem + 3vw, 3.5rem); max-width: none; } }
@media (min-width: 900px) and (max-width: 1199px) { .geo2__wrap .v2-title { font-size: calc(.2rem + 3.2vw); } }
@media (max-width: 599px) { .geo2__wrap .v2-title { font-size: min(var(--fs-2xl), 7.4vw); } }

/* ============================================================
   FOOTER COMPACTO (versión 3) · 4 columnas cortas; la lista
   completa de guías vive en guias.html
   ============================================================ */
.footer--compacto .footer__top{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--sp-md) var(--sp-lg);align-items:start}
@media (max-width:900px){.footer--compacto .footer__top{grid-template-columns:repeat(3,minmax(0,1fr))}.footer--compacto .footer__brand{grid-column:1 / -1}}
@media (max-width:560px){.footer--compacto .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-md) var(--sp-sm)}}
.footer--compacto .footer__description{max-width:34ch}
.footer__contacto{display:flex;flex-direction:column;gap:.35rem;margin:1rem 0 1.1rem}
.footer__contacto a{color:var(--text);text-decoration:none;font-size:var(--fs-sm);width:fit-content;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.footer__contacto a:hover{color:var(--mint);border-color:rgba(62,230,168,.5)}
.footer--compacto .footer__nav-list a{white-space:nowrap}
.footer__ver-todo{color:var(--mint) !important;font-weight:600}
.footer--compacto .footer__meta a{color:var(--mint)}

/* ---------- guias.html ---------- */
.page-hero--corto{padding-bottom:var(--sp-md)}
.guias__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-sm)}
@media (max-width:1000px){.guias__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.guias__grid{grid-template-columns:1fr}}
.guias__grupo{padding:var(--sp-md);border-radius:24px;border:1px solid var(--line);background:var(--grad-card);scroll-margin-top:7rem}
.guias__titulo{font-size:var(--fs-lg);margin-bottom:1rem}
.guias__lista{list-style:none;padding:0;display:flex;flex-direction:column}
.guias__lista a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font-size:var(--fs-sm);transition:color .25s,padding .25s}
.guias__lista li:last-child a{border-bottom:0}
.guias__lista a span{color:var(--muted);transition:transform .25s,color .25s}
.guias__lista a:hover{color:var(--mint);padding-left:4px}
.guias__lista a:hover span{color:var(--mint);transform:translateX(3px)}
.footer--compacto .footer__nav-group .footer__nav-list{display:flex;flex-direction:column;columns:auto;gap:.55rem}
.footer--compacto .footer__nav-group .footer__nav-list li{margin-bottom:0}
.footer--compacto .footer__nav-group{grid-column:auto}

/* ============================================================
   CIERRE 3 · panel con borde de degradado en movimiento y un
   formulario de dos datos que abre WhatsApp con el mensaje armado
   ============================================================ */
.cierre3{background:var(--bg)}
.cierre3__marco{position:relative;border-radius:34px;padding:2px;overflow:hidden;isolation:isolate;box-shadow:0 30px 90px rgba(6,5,18,.55),0 0 80px rgba(62,230,168,.07)}
.cierre3__marco::before{
  content:'';position:absolute;top:0;bottom:0;left:-100%;width:200%;z-index:-1;
  background:linear-gradient(90deg,#5B4FE0 0%,#2F7FD8 8%,#0A9672 16%,#0A9672 34%,#2F7FD8 42%,#5B4FE0 50%,#2F7FD8 58%,#0A9672 66%,#0A9672 84%,#2F7FD8 92%,#5B4FE0 100%);
  animation:cierre-flujo 14s linear infinite;
}
.cierre3__panel{
  position:relative;overflow:hidden;border-radius:32px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp-lg);align-items:center;
  padding:clamp(1.75rem,4.5vw,4rem);
  background:
    radial-gradient(70% 110% at 0% 0%,rgba(108,99,255,.24),transparent 60%),
    radial-gradient(60% 110% at 100% 100%,rgba(62,230,168,.16),transparent 62%),
    #0B0920;
}
/* destello que cruza el panel cada tanto */
.cierre3__panel::after{
  content:'';position:absolute;top:-30%;bottom:-30%;left:0;width:22%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(-160%) skewX(-18deg);animation:cierre-destello 8s cubic-bezier(.45,0,.2,1) 2s infinite;
}
@media (max-width:900px){.cierre3__panel{grid-template-columns:1fr}}
.cierre3__eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;color:var(--mint);
  padding:.45rem .95rem;border-radius:100px;background:rgba(62,230,168,.1);border:1px solid rgba(62,230,168,.28)}
.cierre3__punto{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(62,230,168,.6);animation:c3-latido 2s ease-out infinite}
@keyframes c3-latido{0%{box-shadow:0 0 0 0 rgba(62,230,168,.55)}80%,100%{box-shadow:0 0 0 10px rgba(62,230,168,0)}}
.cierre3__title{font-size:clamp(2rem,1.2rem + 2.6vw,3.5rem);line-height:1.04;margin:1.1rem 0 1rem;text-wrap:balance}
.cierre3__title em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cierre3__text{color:var(--muted);font-size:1.15rem;line-height:1.6;max-width:46ch}
.cierre3__puntos{list-style:none;padding:0;margin-top:1.4rem;display:flex;flex-direction:column;gap:.55rem}
.cierre3__puntos li{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);color:var(--text)}
.cierre3__puntos svg{width:16px;height:16px;flex:none;color:var(--mint)}
.cierre3__form{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.25rem,3vw,2rem);border-radius:24px;background:rgba(6,5,18,.6);border:1px solid var(--line-strong);backdrop-filter:blur(6px)}
.cierre3__form-t{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);margin-bottom:.2rem}
.cierre3__form label[for],.cierre3__form legend{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;color:var(--lavender)}
.cierre3__form input[type="text"]{
  width:100%;background:rgba(6,5,18,.7);border:1px solid var(--line-strong);border-radius:14px;padding:.95rem 1.1rem;
  color:var(--text);font-family:var(--font-body);font-size:1rem;transition:border-color .25s,background .25s;caret-color:var(--mint);
}
.cierre3__form input[type="text"]::placeholder{color:rgba(165,160,204,.75)}
.cierre3__form input[type="text"]:focus{outline:none;border-color:var(--iris);background:rgba(6,5,18,.9)}
.cierre3__form input[aria-invalid="true"]{border-color:var(--danger)}
.cierre3__error{min-height:1em;font-size:var(--fs-xs);color:var(--danger);margin-top:-.3rem}
.cierre3__form fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.cierre3__seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.3rem;border-radius:14px;background:rgba(6,5,18,.7);border:1px solid var(--line)}
.cierre3__seg label{position:relative;cursor:pointer}
.cierre3__seg input{position:absolute;opacity:0;width:1px;height:1px}
.cierre3__seg span{display:grid;place-items:center;min-height:42px;border-radius:10px;font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--muted);transition:background .25s,color .25s}
.cierre3__seg input:checked + span{background:rgba(62,230,168,.16);color:var(--mint);box-shadow:inset 0 0 0 1px rgba(62,230,168,.5)}
.cierre3__seg input:focus-visible + span{outline:2px solid var(--mint);outline-offset:2px}
.cierre3__form .btn{width:100%;justify-content:center;margin-top:.4rem;padding-inline:1.25rem;white-space:nowrap}
.cierre3__form .btn svg{width:20px;height:20px;flex:none;position:relative;z-index:1}
.cierre3__alt{align-self:center;font-size:var(--fs-sm);color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:.3rem}
.cierre3__alt:hover{color:var(--mint)}
@media (prefers-reduced-motion:reduce){.cierre3__marco::before,.cierre3__panel::after,.cierre3__punto{animation:none}}

@keyframes cierre-flujo{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes cierre-destello{0%,68%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(520%) skewX(-18deg)}}

/* trabajos realizados: 3 columnas en escritorio */
.work__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.work__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.work__grid{grid-template-columns:1fr}}

/* ============================================================
   NAVBAR CON "SISTEMA PARA INSTITUTOS" (oct 2026)
   El logo no se achica nunca; entre 901 y 1279 px los ítems se
   aprietan, y por debajo de 1060 px dos etiquetas se acortan
   ("Automatización", "Para institutos") y se oculta el separador.
   ============================================================ */
.navbar__logo { flex: none; }
.nav-corto { display: none; }
@media (min-width: 901px) and (max-width: 1279px) {
  .navbar__menu { gap: clamp(.7rem, 2.6vw - 1rem, 1.4rem); }
  .navbar__link { font-size: .84rem; }
  .navbar__cta { padding-inline: 1.1rem; }
}
@media (min-width: 901px) and (max-width: 1059px) {
  .nav-largo, .navbar__sep { display: none; }
  .nav-corto { display: inline; }
}
/* "Soporte técnico" y "Automatización de procesos": en los anchos más justos se aprieta un poco más */
@media (min-width: 901px) and (max-width: 979px) {
  .navbar__menu { gap: .75rem; }
  .navbar__link { font-size: .8rem; }
  .navbar__cta { padding-inline: .95rem; }
}
/* entre 901 y 979 px no entra "Soporte y Mantenimiento": queda "Soporte" */
@media (min-width: 901px) and (max-width: 979px) { .nav-estrecho { display: none; } }

/* Menú del celular: enlaces a 24px. Como bloque (no inline-flex) para que
   "Soporte y Mantenimiento" corte como texto normal y no en columnas. */
@media (max-width: 900px) {
  .navbar__menu .navbar__link {
    display: inline-block;
    font-size: 24px;
    line-height: 1.2;
    white-space: normal;
    text-wrap: balance;
    max-width: 100%;
    padding-block: .1em;
  }
  .navbar__menu { gap: 1rem; }
}
/* menú del celular: todo alineado abajo (el margen automático del primer
   ítem lo empuja sin cortar el principio si el menú no entra) y el botón
   Hablemos a todo el ancho, al pie */
@media (max-width: 900px) {
  .navbar__menu { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .navbar__menu > li:first-child { margin-top: auto; }
  .navbar__menu > li:has(> .navbar__cta) { align-self: stretch; padding-top: 1.25rem; }
  .navbar__menu .navbar__cta { display: flex; width: 100%; justify-content: center; min-height: 52px; }
}

/* hero de todas las páginas: alto de pantalla completa, contenido centrado
   en vertical (min-height para que nunca corte el contenido si no entra) */
.page-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-hero > .page-hero__container { width: 100%; }
/* con el centrado vertical alcanza con dejar lugar para la barra de navegación */
.page-hero--v2 { padding: 6.5rem 0 3rem; }
@media (max-width: 767px) { .page-hero--v2 { padding: 6rem 0 2.5rem; } }

/* home: "Tu presencia digital, / operable y automatizada" en 2 líneas también
   en el celular (la 2ª línea mide 11,5 veces el tamaño de letra) */
@media (max-width: 767px) {
  .hero--v2 .hero__title { font-size: min(2.5rem, calc((100vw - 40px) / 12.4)); }
}

/* FAQ con el título arriba y las preguntas debajo (automatización) */
.faq2__wrap--arriba { grid-template-columns: 1fr; gap: var(--sp-md); }
.faq2__wrap--arriba .v2-title,
.faq2__wrap--arriba .section-title { position: static; max-width: none; margin-bottom: 0; }
.faq2__wrap--arriba .faq__list { max-width: none; container-type: inline-size; }
/* preguntas sin negrita y un 20% más chicas que el resto del sitio */
.faq2__wrap--arriba .faq-item summary { font-weight: 400; font-size: calc(var(--fs-lg) * .8); }
/* con el título arriba ya no hace falta achicarlo como en la columna lateral:
   mismo tamaño que el resto de los títulos de sección */
.faq2__wrap.faq2__wrap--arriba .section-title { font-size: var(--fs-2xl); }


/* ============================================================
   QUÉ INCLUYE EN TARJETAS (.inc-cards) · todo el sitio (oct 2026)
   Cada punto es una tarjeta con su ícono. En 4 columnas el encabezado
   ocupa 2 celdas (o 3, o la fila entera, según cuántas tarjetas haya)
   para que las filas queden completas; si sobra un lugar, lo llena una
   tarjeta de WhatsApp. Los puntos con párrafo largo (guías y rubros)
   usan 2 columnas (.inc-cards--largo) para que se lean bien.
   El enlace a la guía es la última tarjeta y abre el panel lateral
   (js/panel-detalle.js).
   ============================================================ */
.inc-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.inc-cards__head{grid-column:span 2;align-self:center;padding-right:var(--sp-md)}
.inc-cards--cab3 .inc-cards__head{grid-column:span 3}
.inc-cards--cab4 .inc-cards__head,.inc-cards--largo .inc-cards__head{grid-column:1 / -1;padding-right:0;margin-bottom:.5rem}
.inc-cards__head .section-title{margin-bottom:.6rem}
.inc-cards__head > :last-child{margin-bottom:0}
.inc-card{
  position:relative;display:flex;flex-direction:column;gap:1.1rem;min-height:200px;
  padding:1.4rem 1.3rem 1.5rem;border-radius:20px;border:1px solid var(--line);
  background:var(--grad-card,var(--surface));
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s;
}
.inc-card:hover{transform:translateY(-4px);border-color:rgba(62,230,168,.45)}
.inc-card__ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex:none;color:var(--mint);background:rgba(62,230,168,.1);border:1px solid rgba(62,230,168,.28)}
.inc-card__ico svg{width:25px;height:25px;display:block}
.inc-card__num{position:absolute;top:1.35rem;right:1.35rem;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;color:var(--lavender);opacity:.7}
.inc-card__t{margin:auto 0 0;font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1.35;color:var(--text);text-wrap:pretty}
.inc-card:has(.inc-card__d) .inc-card__t{margin-top:.1rem;font-size:1.12rem}
.inc-card__d{margin:-.35rem 0 0;color:var(--muted);font-size:var(--fs-sm);line-height:1.65}
.inc-card__d strong{color:var(--text);font-weight:600}
.inc-card__d a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.inc-cards--largo{grid-template-columns:repeat(2,minmax(0,1fr))}
.inc-cards--largo .inc-card{min-height:0;padding:1.6rem 1.6rem 1.7rem}
/* tarjeta-enlace a la guía y tarjeta de WhatsApp */
.inc-card--guia,.inc-card--wa{padding:0;border-style:dashed;border-color:rgba(62,230,168,.4);background:rgba(62,230,168,.04)}
.inc-card--guia a,.inc-card--wa a{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;height:100%;padding:1.4rem 1.3rem 1.5rem;color:var(--mint);text-decoration:none;border-radius:inherit}
.inc-card--guia .inc-card__t,.inc-card--wa .inc-card__t{margin-top:0;color:var(--mint)}
.inc-card--wa .inc-card__t{color:var(--text)}
.inc-card__flecha{font-size:1.6rem;line-height:1;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.inc-card__wa{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--mint)}
.inc-card__wa svg{width:20px;height:20px;flex:none}
.inc-card--guia:hover,.inc-card--wa:hover{border-color:var(--mint);background:rgba(62,230,168,.08)}
.inc-card--guia:hover .inc-card__flecha{transform:translateX(6px)}
.inc-card--guia a:focus-visible,.inc-card--wa a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
@media (max-width:1099px){
  .inc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inc-cards__head,.inc-cards--cab3 .inc-cards__head{grid-column:1 / -1;padding-right:0;margin-bottom:.5rem}
}
@media (max-width:560px){
  .inc-cards,.inc-cards--largo{grid-template-columns:1fr;gap:.7rem}
  .inc-card{flex-direction:row;align-items:center;min-height:0;padding:1rem 1.1rem;gap:.9rem}
  .inc-card:has(.inc-card__d){flex-direction:column;align-items:flex-start;padding:1.2rem}
  .inc-card__num{display:none}
  .inc-card__t{margin-top:0;font-size:1rem}
  .inc-card__ico{width:44px;height:44px}
  .inc-card--guia a,.inc-card--wa a{flex-direction:row;align-items:center;padding:1rem 1.1rem}
  .inc-card--wa a{flex-direction:column;align-items:flex-start}
}
/* "Trabajos realizados": entre 901 y 1099 px no entra y queda "Trabajos" */
@media (min-width: 901px) and (max-width: 1099px) { .nav-trab { display: none; } }


/* indicador "Scroll" al pie del hero: flecha que baja y rebota */
.hero-scroll{position:absolute;left:50%;bottom:clamp(1rem,3vh,2rem);z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.45rem;color:var(--muted);text-decoration:none;transition:color .25s}
.hero-scroll:hover,.hero-scroll:focus-visible{color:var(--mint)}
.hero-scroll:focus-visible{outline:2px solid var(--mint);outline-offset:6px;border-radius:12px}
.hero-scroll__t{font-family:var(--font-display);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.hero-scroll__flecha{position:relative;display:grid;place-items:center;width:34px;height:52px;border-radius:100px;border:1.5px solid currentColor;opacity:.85;overflow:hidden}
.hero-scroll__flecha svg{width:18px;height:18px;animation:hero-scroll 1.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes hero-scroll{0%{transform:translateY(-14px);opacity:0}25%{opacity:1}60%{transform:translateY(6px);opacity:1}100%{transform:translateY(16px);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-scroll__flecha svg{animation:none}}
@media (max-height:640px){.hero-scroll{display:none}}
.page-hero:has(.hero-scroll),.hero:has(.hero-scroll){padding-bottom:calc(clamp(1rem,3vh,2rem) + 105px)}