/* ==========================================================================
   home.css — portada «underground» (solo la carga index.html, DESPUÉS de
   editorial.css). Todo lo nuevo lleva prefijo u- para no pisar a las demás
   páginas, que comparten editorial.css.

   Reglas de rendimiento de esta hoja (medidas en la Fase 0):
   · overflow: clip en el envoltorio raíz, la franja de textos cruzados y el
     marco del retrato. Con overflow: hidden el contenedor pasa a ser el
     "scroller" y se mueren las animaciones ligadas al scroll y el sticky.
   · Lo que gira o flota anima SOLO transform (compositor), sobre un
     envoltorio HTML; nunca las propiedades rotate/translate sueltas.
   · backdrop-filter solo en la píldora de la cabecera. Las tarjetas son
     degradados opacos: sobre un fondo casi plano el vidrio no se ve y
     cuesta una superficie de render por tarjeta.
   · Las animaciones ligadas al scroll viven dentro de @supports
     (animation-timeline: view()): donde no hay soporte todo queda estático
     y visible, nunca invisible.
   · prefers-reduced-motion apaga todo el movimiento.
   · Por debajo de 381 px editorial.css pone overflow-x:clip en <html>; con eso
     el overflow-x:hidden del <body> deja de pasar al viewport y el BODY se
     vuelve contenedor de scroll (aunque no se desplace): las animaciones
     ligadas al scroll se enganchan a él y la cabecera pegajosa deja de
     pegarse. Más abajo se pasa el body a clip en ese tramo.
   ========================================================================== */

.u-root {
  --u-lime: #B6FF00;
  --u-pur: #9D00FF;
  --u-ink: #0B0710;
  --u-mu: #C3B2CC;
  --u-line: rgba(255, 255, 255, .12);
  --u-ease: cubic-bezier(.2, .7, .2, 1);
  position: relative;
  background: #0B0710;
  color: #fff;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow: hidden;      /* respaldo para navegadores sin clip */
  overflow: clip;
  -webkit-font-smoothing: antialiased;
}
.u-root *, .u-root *::before, .u-root *::after { box-sizing: border-box; }

/* Con html{overflow-x:clip} (editorial.css, ≤ 380 px) el body hidden pasa a ser
   el "scroller" de las animaciones y del sticky. clip recorta igual sin serlo.
   Medido a 320, 360 y 375: la fuente de las 30 animaciones vuelve a ser HTML y
   #nav queda en top:0; scrollWidth sigue igual al ancho de la ventana. */
@media (max-width: 380px) { body { overflow-x: clip; } }

/* Teclado (WCAG 2.4.11, foco no oculto): con la cabecera pegajosa arriba y la barra fija
   .cta-fijo abajo (solo ≤ 820 px), un elemento que ya está dentro de la ventana pero
   TAPADO por ellas no se desplaza al recibir el foco (el navegador lo da por visible).
   scroll-padding reduce el área que el navegador considera visible. Medido: con Tab y
   Shift+Tab el foco nunca queda debajo de la píldora ni de la barra. De paso, los saltos
   a #servicios, #precios… dejan el eyebrow libre de la cabecera. */
html { scroll-padding-top: 96px; }
@media (max-width: 820px) { html { scroll-padding-bottom: 96px; } }
:where(.u-root) a { color: inherit; }
:where(.u-root) :where(p, ul, figure, blockquote) { margin: 0; }
:where(.u-root) ul { padding: 0; list-style: none; }
.u-root h1, .u-root h2, .u-root h3 { text-align: left; }
/* editorial.css pone display:block a los spans de h1/h2: en los h2 las
   palabras en serif van en línea con el resto del titular. */
.u-root h1 > span { display: block; }
.u-root h2 > span, .u-root h3 > span { display: inline; }

.u-w { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
.u-s { position: relative; padding-block: clamp(80px, 11vw, 170px); }

/* --- Tipografía ---------------------------------------------------------- */
.u-an {
  font-family: 'Anton', 'Impact', sans-serif;
  text-transform: uppercase; line-height: .9; font-weight: 400;
  letter-spacing: 0; margin: 0; text-wrap: wrap;
}
.u-se {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em;
}
.u-ey { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--u-mu); }
.u-ey--lime { color: var(--u-lime); }
.u-mu { color: var(--u-mu); }
.u-lime { color: var(--u-lime); }
.u-h2 { font-size: clamp(46px, 7vw, 112px); }
.u-h2--md { font-size: clamp(44px, 5.6vw, 88px); }
.u-h2--xl { font-size: clamp(52px, 8.5vw, 136px); }
.u-h2--sm { font-size: clamp(46px, 6vw, 92px); }
.u-ey + .u-an { margin-top: 24px; }
.u-lead { max-width: 600px; margin-top: 28px; }

/* --- Botones ------------------------------------------------------------- */
.u-bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 30px; border-radius: 999px;
  background: #B6FF00; color: #0B0710;
  font: 700 13px/1.15 'Archivo', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer; text-align: center;
  transition: transform .25s, box-shadow .25s, color .25s;
  box-shadow: 0 0 0 rgba(182, 255, 0, 0);
}
.u-bt--sm { min-height: 44px; padding: 0 22px; font-size: 12px; }
.u-bo { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.u-bt:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 999px; }
.u-bo:focus-visible { outline-color: #B6FF00; }
.u-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--u-lime);
}
.u-link::after { content: '→'; transition: transform .25s; }
.u-link:focus-visible { outline: 3px solid #B6FF00; outline-offset: 3px; border-radius: 6px; }
.u-link--soft { color: var(--u-mu); letter-spacing: .06em; text-transform: none; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.u-link--soft::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  .u-bt:hover { color: #0B0710; transform: translateY(-3px); box-shadow: 0 18px 50px -10px rgba(182, 255, 0, .55); }
  .u-bo:hover { color: #B6FF00; box-shadow: inset 0 0 0 1px #B6FF00; }
  .u-link:hover { color: #fff; }
  .u-link:hover::after { transform: translateX(4px); }
  .u-foot-site a:hover, .u-mail:hover, .u-big:hover { color: #B6FF00; }
}

/* --- Tarjetas ------------------------------------------------------------ */
.u-card {
  background: linear-gradient(160deg, #1d1724, #130e18);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 28px;
}
.u-tl { transition: transform .5s var(--u-ease), border-color .3s, box-shadow .5s; }
.u-tl:focus-within { border-color: rgba(182, 255, 0, .55); box-shadow: 0 50px 90px -40px rgba(157, 0, 255, .7); }
@media (hover: hover) and (pointer: fine) {
  .u-tl:hover { border-color: rgba(182, 255, 0, .55); box-shadow: 0 50px 90px -40px rgba(157, 0, 255, .7); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .u-tl:hover, .u-tl:focus-within { transform: perspective(1000px) rotateX(5deg) rotateY(-7deg) translateY(-10px); }
}

/* --- Esferas y toro (decoración pura) ------------------------------------ */
.u-px { position: absolute; pointer-events: none; transform: translate3d(0, 0, 0); transition: transform .6s var(--u-ease); }
.u-orb { border-radius: 50%; width: var(--s, 120px); height: var(--s, 120px); }
.u-orb--lime {
  background: radial-gradient(circle at 32% 26%, #fff 0, #E4FF8A 7%, #B6FF00 28%, #5C8200 62%, #141C00 100%);
  box-shadow: 0 40px 90px -20px rgba(182, 255, 0, .45), inset -18px -26px 50px rgba(0, 0, 0, .55);
}
.u-orb--purp {
  background: radial-gradient(circle at 32% 26%, #fff 0, #DFA6FF 7%, #9D00FF 30%, #3D0066 66%, #0B0710 100%);
  box-shadow: 0 40px 90px -20px rgba(157, 0, 255, .6), inset -18px -26px 50px rgba(0, 0, 0, .6);
}
.u-orb--chro {
  background: radial-gradient(circle at 30% 24%, #fff 0, #BDB4C6 9%, #3A3142 34%, #0B0710 60%, #2E2038 82%, #9D00FF 100%);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .9), inset 0 -8px 24px rgba(182, 255, 0, .35);
}
.u-tor {
  width: var(--s, 260px); height: var(--s, 260px); border-radius: 50%;
  border: calc(var(--s, 260px) * .13) solid transparent;
  background: conic-gradient(from 210deg, #0B0710, #9D00FF, #fff, #B6FF00, #263600, #0B0710, #9D00FF, #0B0710) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  transform: rotateX(62deg) rotateZ(0);
}
/* Los bucles solo corren si hay movimiento permitido (y home.js los pausa
   cuando su sección sale de pantalla). */
@keyframes u-fl { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, var(--u-fy, -30px), 0); } }
@keyframes u-rot { to { transform: rotate(360deg); } }
@keyframes u-tor { from { transform: rotateX(62deg) rotateZ(0); } to { transform: rotateX(62deg) rotateZ(360deg); } }
@keyframes u-mq { to { transform: translate3d(-50%, 0, 0); } }
@keyframes u-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .u-fl { animation: u-fl 8s ease-in-out infinite; }
  .u-fl2 { animation: u-fl 11s ease-in-out -4s infinite; }
  .u-tor--spin { animation: u-tor 14s linear infinite; }
  .u-spin { animation: u-rot 18s linear infinite; }
  .u-mq { animation: u-mq 34s linear infinite; }
}
/* Solo se pausan los BUCLES; las entradas del hero y las ligadas al scroll no se tocan. */
.u-off .u-fl, .u-off .u-fl2, .u-off .u-tor--spin, .u-off .u-spin, .u-off .u-mq, .u-off .u-halo { animation-play-state: paused; }

/* ==========================================================================
   CABECERA — píldora de vidrio (único backdrop-filter de la página)
   ========================================================================== */
#nav {
  position: sticky; top: 0; z-index: 60;
  background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 20px clamp(16px, 4vw, 48px) 0;
  pointer-events: none;
}
.u-nav__pill {
  pointer-events: auto; position: relative;
  max-width: 1184px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 8px 8px 8px 24px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)), rgba(11, 7, 16, .62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.u-nav__marca {
  display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px;
  text-decoration: none; font-weight: 700; white-space: nowrap;
}
.u-nav__ac { font-size: 22px; color: #B6FF00; }
.u-nav__links {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px);
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.u-nav__links a { text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.u-nav__der { display: flex; align-items: center; gap: 14px; }
#nav .lang { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--u-mu); }
#nav .lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; padding: 0 4px; text-decoration: none; }
#nav .lang .on { color: #fff; }
#nav .lang .off { color: var(--u-mu); }
.lang--menu { display: none !important; }
.u-burger {
  display: none; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(182, 255, 0, .45); background: transparent;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.u-burger span { display: block; width: 18px; height: 2px; background: #B6FF00; transition: transform .25s, opacity .2s; }
.u-burger[aria-expanded="true"] span:nth-child(1) { transform: translate3d(0, 7px, 0) rotate(45deg); }
.u-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.u-burger[aria-expanded="true"] span:nth-child(3) { transform: translate3d(0, -7px, 0) rotate(-45deg); }
.u-burger:focus-visible { outline: 3px solid #B6FF00; outline-offset: 3px; }
.u-nav__links a:focus-visible, #nav .lang a:focus-visible, .u-nav__marca:focus-visible { border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
  .u-nav__links a:hover, #nav .lang a:hover { color: #B6FF00; }
}
/* 1140 y no 1080: entre 1081 y 1119 px el nombre «Alejandro Chalarca» pisaba el primer enlace. */
@media (max-width: 1140px) {
  .u-burger { display: flex; }
  .u-nav__links { display: none; }
  .u-nav__links.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    padding: 8px; border-radius: 28px;
    background: #17101e; border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85);
  }
  .u-nav__links.is-open a { min-height: 54px; padding: 0 18px; font-size: 14px; }
  .u-nav__links.is-open > a + a { border-top: 1px solid rgba(255, 255, 255, .08); }
  .u-nav__links.is-open .lang--menu { display: inline-flex !important; margin: 4px 0 4px 8px; }
}
@media (max-width: 640px) {
  #nav .lang--bar { display: none; }
  .u-nav__pill { padding-left: 18px; gap: 10px; }
}
@media (max-width: 480px) { .u-nav__name { display: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.u-hero { position: relative; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(72px, 9vw, 130px); }
.u-halo {
  position: absolute; top: -300px; right: -200px; width: 1100px; height: 1100px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(157, 0, 255, .5) 0, rgba(157, 0, 255, .12) 40%, transparent 68%);
}
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .u-halo { animation: u-pulse 9s ease-in-out infinite; }
}
.u-hero__in { position: relative; z-index: 2; }
.u-top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--u-mu); margin-bottom: 20px;
}
.u-top span { white-space: nowrap; }
/* Orden: texto · clientes · muestras de color (a la derecha). El acento de la «Á» de
   «VENDE MÁS» sube 0,23 em por encima de la caja del titular y, con la línea a 20 px
   como en el diseño, cae sobre ella: a TODOS los anchos entre 821 y 2400 px coincide
   con el extremo derecho de la línea. Por eso el texto de clientes (lo único que hay
   que leer) va pegado a la izquierda, lejos del acento, y lo que queda bajo el
   acento son las muestras de color, que son decoración. */
.u-top { justify-content: flex-start; gap: 16px 40px; }
.u-sw { display: flex; margin-left: auto; }
@media (max-width: 1180px) { .u-top__a { display: none; } }
@media (max-width: 1000px) { .u-sw { display: none; } .u-top { font-size: 10.5px; letter-spacing: .16em; } }
.u-sw i { display: block; width: 26px; height: 14px; }
.u-stage { position: relative; }

/* Un solo <h1>; las tres líneas son spans con su propia entrada. El h1 no
   crea contexto de apilamiento: así cada línea se ordena contra la foto. */
.u-h1 { margin: 0; }
.u-l1, .u-l3 { font-size: clamp(60px, 19.5vw, 310px); white-space: nowrap; position: relative; }
.u-l1 { z-index: 1; margin-left: -.03em; }
.u-l2 {
  font-size: clamp(50px, 15.5vw, 250px); line-height: .78; color: #fff;
  position: relative; z-index: 3; padding-left: 14%; white-space: nowrap;
  /* halo oscuro: el toro (lima/blanco) pasa por detrás y sin esto el blanco se pierde sobre él */
  text-shadow: 0 0 3px rgba(11, 7, 16, .85), 0 0 14px rgba(11, 7, 16, .55), 0 2px 30px rgba(11, 7, 16, .5);
}
.u-l3 {
  color: #B6FF00; text-shadow: 0 0 110px rgba(182, 255, 0, .45);
  z-index: 3; text-align: right; margin-right: -.02em;
}
@keyframes u-inL { from { opacity: 0; transform: translate3d(-12%, 0, 0) skewX(8deg); } to { opacity: 1; transform: none; } }
@keyframes u-inR { from { opacity: 0; transform: translate3d(12%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes u-inU { from { opacity: 0; transform: translate3d(0, 40%, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .u-in1 { animation: u-inL 1.1s cubic-bezier(.2, .8, .2, 1) both; }
  .u-in2 { animation: u-inR 1.1s cubic-bezier(.2, .8, .2, 1) .15s both; }
  .u-in3 { animation: u-inU 1.1s cubic-bezier(.2, .8, .2, 1) .3s both; }
}

/* La foto. .u-hpw es la caja (posición y tamaño); dentro, el marco en arco
   (.u-hp, que home.js inclina con el ratón) y la insignia, HERMANOS. Si la
   insignia (texto SVG) fuera hija del marco que cambia de transform, Chrome
   recalcularía su texto en cada movimiento del ratón (1 layout por frame). */
.u-hpw {
  position: absolute; right: 9%; top: 40px; z-index: 2;
  width: min(430px, 34%); height: clamp(460px, 47vw, 680px);
}
.u-hp {
  position: absolute; inset: 0;
  transform: perspective(1400px) rotateY(0) rotateX(0);
  transition: transform .6s var(--u-ease);
}
.u-arch {
  height: 100%; border-radius: 260px 260px 28px 28px; overflow: hidden; overflow: clip;
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    radial-gradient(90% 55% at 50% 8%, rgba(182, 255, 0, .16), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, #9D00FF 0, #4a0079 48%, #170c24 100%);
  box-shadow: 0 70px 140px -40px rgba(157, 0, 255, .9);
}
.u-arch picture, .u-arch img { display: block; width: 100%; height: 100%; }
.u-arch img { object-fit: cover; object-position: 50% 0; }
/* La burbuja vive en la esquina inferior izquierda del escenario: debajo de
   «menos.» (alineado a la derecha) hay hueco, y así ninguna línea la tapa. */
.u-bubble { width: 100%; }
.u-bubble__in {
  padding: 16px 20px; border-radius: 20px;
  background: linear-gradient(160deg, #241a2e, #150f1b); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8);
}
.u-bubble .u-ey { font-size: 11px; letter-spacing: .14em; color: #B6FF00; }
.u-bubble__txt { font-weight: 600; line-height: 1.3; margin-top: 6px; }
/* .u-bplane es un plano del tamaño de la foto: escalado 1,085 desde SU centro reproduce
   lo que antes hacía la perspectiva con la insignia a 110 px de profundidad (más grande
   y desplazada hacia fuera del centro de la foto). home.js le suma el desplazamiento
   del ratón. La insignia dentro conserva su posición y tamaño de siempre. */
.u-bplane { position: absolute; inset: 0; pointer-events: none; transform: scale(1.085); transition: transform .6s var(--u-ease); }
.u-badge { position: absolute; right: -70px; top: 90px; width: 180px; height: 180px; }
.u-badge__spin { width: 100%; height: 100%; }
.u-badge svg { display: block; width: 100%; height: 100%; }
.u-badge text { font: 700 11.5px/1 'Archivo', system-ui, sans-serif; letter-spacing: .1em; }

/* Orbes del hero */
.u-px--tor { left: 30%; top: 30%; z-index: 0; }
.u-px--lime { right: 1%; top: -2%; z-index: 4; }
.u-px--purp { left: 2%; top: 46%; z-index: 4; }
.u-px--chro { left: 44%; bottom: 6%; z-index: 4; }
.u-px--bub { left: 0; bottom: 0; z-index: 5; width: 262px; }

.u-foot {
  display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-end; justify-content: space-between;
  margin-top: 48px; position: relative; z-index: 4;
  border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 32px;
}
.u-foot__p { max-width: 480px; font-size: clamp(17px, 1.5vw, 21px); }
#hero .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; max-width: none; animation: none; }
.u-meta { display: grid; gap: 12px; width: 100%; }
.u-prueba { font-size: 14px; color: var(--u-mu); }
.u-prueba span { color: #fff; font-weight: 700; }
.u-ventajas { display: flex; flex-wrap: wrap; gap: 6px 22px; width: 100%; font-size: 14px; font-weight: 600; color: var(--u-mu); }
.u-ventajas li { display: flex; align-items: center; gap: 8px; }
.u-ventajas b { color: #B6FF00; font-size: 15px; line-height: 1; }

@media (max-width: 820px) {
  .u-hs { display: none !important; }
  .u-hero__in { display: flex; flex-direction: column; }
  .u-stage { display: contents; }
  .u-h1 { order: 0; }
  .u-foot { order: 1; margin-top: 28px; padding-top: 24px; gap: 24px; }
  .u-hpw {
    order: 2; position: relative; right: auto; top: auto; width: 100%;
    height: clamp(380px, 112vw, 460px); margin: 36px 0 0;
  }
  .u-px--bub { left: 8px; bottom: 118px; width: 250px; }
  .u-hpw .u-badge { right: 6px; top: auto; bottom: 28px; width: 124px; height: 124px; }
  /* El orbe lima se ancla a la ALTURA de la foto (no a un número fijo): su borde
     superior queda 10 px sobre la foto y, con la flotación reducida a 16 px,
     nunca sube más de 26 px, menos que el hueco de 36 px que hay sobre ella.
     Así monta sobre el hombro derecho del arco y no pisa la lista de ventajas
     ni la prueba social a ningún ancho (medido a 320, 360, 375, 390 y 414). */
  .u-px--lime { top: auto; bottom: calc(clamp(380px, 112vw, 460px) - 120px); right: -10px; }
  .u-px--lime .u-fl { --u-fy: -16px; }
  .u-px--chro { left: 6%; bottom: 40px; }
  .u-foot__p { max-width: none; }
  #hero .hero__cta { width: 100%; }
  #hero .hero__cta .u-bt { flex: 1 1 100%; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .u-px--bub { width: 230px; }
  .u-badge { right: -40px; width: 150px; height: 150px; }
}
/* De 821 a 1280 px la burbuja (con su flotación de 30 px y el parallax del ratón)
   llegaba a tocar las letras de «trabajando» y a quedar a pocos píxeles de la
   «M» de «MENOS.»: se baja 28 px para que su punto más alto siga libre. */
@media (min-width: 821px) and (max-width: 1280px) {
  .u-px--bub { bottom: -28px; }
}

/* ==========================================================================
   TEXTOS QUE SE CRUZAN + BANDA MORADA
   ========================================================================== */
.u-cross { position: relative; z-index: 2; padding: 20px 0 60px; overflow: hidden; overflow: clip; }
.u-cross .u-an { font-size: clamp(80px, 17vw, 270px); white-space: nowrap; }
.u-kL { color: transparent; -webkit-text-stroke: 2px #9D00FF; }
.u-kR { color: #B6FF00; line-height: .8; margin-left: -40%; }
@keyframes u-kL { from { transform: translate3d(4%, 0, 0); } to { transform: translate3d(-38%, 0, 0); } }
@keyframes u-kR { from { transform: translate3d(-10%, 0, 0); } to { transform: translate3d(30%, 0, 0); } }
.u-band {
  position: relative; z-index: 2; overflow: hidden; overflow: clip;
  background: #9D00FF; color: #fff; padding: 22px 0;
  transform: rotate(-2deg) scale(1.04);
  box-shadow: 0 0 110px rgba(157, 0, 255, .6);
}
.u-mq { display: flex; align-items: center; gap: 56px; width: max-content; white-space: nowrap; font-size: 34px; line-height: 1; }
.u-mq .u-se { color: #B6FF00; }

/* ==========================================================================
   ENTRADAS LIGADAS AL SCROLL — solo donde hay soporte; si no, estático
   ========================================================================== */
@keyframes u-up { from { opacity: 0; transform: translate3d(0, 80px, 0) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes u-dA { from { transform: translate3d(0, 140px, 0); } to { transform: translate3d(0, -140px, 0); } }
@keyframes u-dB { from { transform: translate3d(0, -110px, 0); } to { transform: translate3d(0, 110px, 0); } }
@keyframes u-zoom { from { transform: scale(1); } to { transform: scale(1.18); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .u-kL { animation: u-kL linear both; animation-timeline: view(); }
    .u-kR { animation: u-kR linear both; animation-timeline: view(); }
    .u-dA { animation: u-dA linear both; animation-timeline: view(); }
    .u-dB { animation: u-dB linear both; animation-timeline: view(); }
    .u-zm { animation: u-zoom linear both; animation-timeline: view(); }
  }
}
@media (max-width: 820px) { .u-dA, .u-dB { animation: none !important; } }
/* Aparición de bloques (.u-up): con IntersectionObserver desde home.js, no con
   animation-timeline. En Safari los bloques ya en pantalla se quedaban invisibles.
   Solo se ocultan si el JS lo pidió (.u-js-up); sin JS o con movimiento reducido, todo visible. */
.u-js-up .u-up { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.u-js-up .u-up:not(.u-in) { opacity: 0; transform: translate3d(0, 48px, 0) scale(.98); }

/* ==========================================================================
   EL PROBLEMA
   ========================================================================== */
.u-split { display: flex; flex-wrap: wrap; gap: 56px; }
.u-split__a { flex: 1 1 380px; min-width: 0; }
.u-split__b { flex: 1.2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.u-sticky { position: sticky; top: 120px; }
.u-dolor { padding: 26px 28px; display: flex; gap: 20px; align-items: baseline; }
.u-dolor .u-an { font-size: 22px; color: #B6FF00; flex: none; }
.u-dolor__t { font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; }
.u-cierre { margin-top: 28px; font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.3; }
.u-cierre span { color: #B6FF00; }
.u-sticky .u-orbwrap { margin-top: 56px; }
@media (max-width: 820px) { .u-sticky { position: static; } }

/* ==========================================================================
   TESTIMONIOS
   ========================================================================== */
.u-grid { display: grid; gap: 20px; margin-top: 64px; }
.u-grid--t { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.u-cita { padding: 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
.u-cita__q { font-size: 28px; line-height: 1.2; }
.u-cita figcaption { font-weight: 700; }
.u-cita figcaption .u-ey { margin-top: 4px; }

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.u-px--tor2 { right: 2%; top: 70px; }
.u-grid--serv { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.u-grid > .u-up { display: flex; }
.u-serv { flex: 1; padding: 36px; min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.u-serv__head { display: flex; justify-content: space-between; align-items: flex-start; }
.u-serv__num { font-size: 72px; color: #B6FF00; }
.u-serv h3 { font-size: 36px; line-height: 1.04; }
.u-serv p { margin-top: 14px; }
.u-serv .u-ia {
  color: #fff; font-weight: 600; font-size: 15.5px; line-height: 1.45;
  padding-left: 12px; border-left: 3px solid #B6FF00;
}
.u-serv__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 10px; }
.u-serv--1 { background: linear-gradient(150deg, rgba(157, 0, 255, .38), rgba(157, 0, 255, .04) 60%), linear-gradient(160deg, #1d1724, #130e18); }
.u-serv--6 { background: #B6FF00; color: #0B0710; border-color: #B6FF00; }
.u-serv--6 .u-serv__num, .u-serv--6 h3 { color: #0B0710; }
.u-serv--6 p { color: #0B0710; font-weight: 500; }
.u-serv--6 .u-link { color: #0B0710; }
.u-serv--6 .u-link--soft { color: #0B0710; }
.u-serv--6 .u-link:focus-visible { outline-color: #0B0710; }

/* ==========================================================================
   PROYECTOS — rejilla con parallax; sin capturas, con fondos de marca
   ========================================================================== */
#proyectos { background: linear-gradient(180deg, transparent, rgba(157, 0, 255, .16) 50%, transparent); }
.u-proj-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px; margin-top: 120px; padding-bottom: 80px;
}
.u-col { display: flex; flex-direction: column; gap: 24px; }
.u-proj { overflow: hidden; overflow: clip; }
.u-art { position: relative; height: var(--h, 260px); overflow: hidden; overflow: clip; background-color: #150E1D; }
.u-art__n {
  position: absolute; left: 22px; bottom: 6px; font-size: 96px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55);
}
.u-art .u-orb { position: absolute; }
.u-art--a { background: radial-gradient(circle at 18% 112%, rgba(182, 255, 0, .6), transparent 55%), linear-gradient(135deg, #34095a, #0f0916 70%); }
.u-art--b { background: radial-gradient(circle at 88% -12%, rgba(157, 0, 255, .95), transparent 58%), linear-gradient(200deg, #1d1236, #0c0712); }
.u-art--c { background: conic-gradient(from 210deg at 72% 62%, #0B0710, #9D00FF 18%, #0B0710 38%, #B6FF00 58%, #0B0710 78%, #9D00FF); }
.u-art--d { background: repeating-radial-gradient(circle at 78% 88%, rgba(182, 255, 0, .0) 0 22px, rgba(182, 255, 0, .38) 22px 23px), linear-gradient(160deg, #3b0a63, #120a1b 75%); }
.u-art--e { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 34px), radial-gradient(circle at 30% 20%, rgba(157, 0, 255, .85), transparent 60%), #130c1b; }
.u-art--f { background: repeating-linear-gradient(135deg, #1b1224 0 14px, #150e1d 14px 28px), radial-gradient(circle at 85% 100%, rgba(182, 255, 0, .5), transparent 60%); background-blend-mode: normal; }
.u-art--f::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 105%, rgba(182, 255, 0, .55), transparent 55%); }
.u-proj__body { padding: 26px; }
.u-proj__body h3 { font-size: 30px; line-height: 1.04; margin-top: 10px; }
.u-proj__body > .u-ey + .u-an { margin-top: 10px; }
.u-proj__body p { margin-top: 12px; }
.u-proj__body .u-stack { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--u-mu); }
.u-nota { margin-top: 8px; color: var(--u-mu); }
.u-nota a { color: var(--u-lime); font-weight: 700; text-underline-offset: 4px; }
@media (max-width: 820px) {
  /* En una sola columna las tarjetas siguen el orden 01…06 */
  .u-col { display: contents; }
  .u-proj { order: var(--o, 0); }
  .u-proj-grid { margin-top: 56px; padding-bottom: 32px; }
  .u-art { height: 120px !important; }
  .u-art__n { font-size: 72px; }
}

/* ==========================================================================
   SOBRE MÍ
   ========================================================================== */
.u-about { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.u-about__a { flex: 1 1 340px; min-width: 0; position: relative; }
.u-about__b { flex: 1.2 1 420px; min-width: 0; }
.u-frame {
  overflow: hidden; overflow: clip; border-radius: 32px; border: 1px solid rgba(255, 255, 255, .14);
  background: radial-gradient(120% 80% at 50% 0%, #9D00FF 0, #4a0079 50%, #170c24 100%);
}
.u-frame .u-zm { height: clamp(420px, 56vw, 560px); transform-origin: 50% 40%; }
.u-frame picture, .u-frame img { display: block; width: 100%; height: 100%; }
.u-frame img { object-fit: cover; object-position: 50% 0; }
.u-px--lime2 { right: -30px; top: -40px; z-index: 2; }
.u-about__b p + p { margin-top: 18px; }
.u-flecha { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; font-weight: 600; }
.u-flecha li span { color: #B6FF00; }
.u-about__cta { margin-top: 36px; }

/* ==========================================================================
   PROCESO
   ========================================================================== */
.u-grid--p { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.u-paso { flex: 1; padding: 32px; }
.u-paso__n { font-size: 96px; color: transparent; -webkit-text-stroke: 1.5px #B6FF00; }
.u-paso h3 { font-size: 28px; line-height: 1.04; margin-top: 28px; }
.u-paso p { margin-top: 10px; }

/* ==========================================================================
   PRECIOS
   ========================================================================== */
.u-px--purp2 { left: 58%; top: 60px; }
.u-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 20px; margin-top: 64px; align-items: stretch; }
.u-plans--q { margin-top: 20px; }
.u-sub { margin-top: 72px; }
.u-plan { flex: 1; padding: 40px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.u-plan h3 { font-size: 30px; line-height: 1.04; }
.u-plan > .u-ey { display: flex; align-items: center; min-height: 26px; }
.u-plan > .u-ey + .u-an, .u-plan > .u-pill + .u-an { margin-top: 0; }
.u-para { margin: 0; }
.u-price { font-size: clamp(56px, 8vw, 88px); line-height: .9; white-space: nowrap; }
.u-price .u-se { font-size: .39em; margin-left: .06em; }
html[data-moneda="cop"] .u-price:not(.u-price--q) { font-size: clamp(40px, 12.5vw, 64px); }
.u-price--q { font-size: clamp(30px, 3vw, 36px); line-height: 1; white-space: normal; }
.u-unit { font-weight: 600; color: var(--u-mu); }
.u-nota-p { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); color: var(--u-mu); }
.u-nota-p b { color: #fff; }
.u-nota-p a { color: #B6FF00; font-weight: 700; text-underline-offset: 3px; }
.u-list { display: grid; gap: 9px; font-size: 15.5px; color: var(--u-mu); }
.u-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.u-list li::before { content: '✓'; color: #B6FF00; font-weight: 700; }
.u-list strong { color: #fff; font-weight: 600; }
.u-cta { margin-top: auto; padding-top: 6px; display: grid; gap: 4px; }
.u-cta .u-bt { width: 100%; }
.u-wa { text-align: center; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; color: var(--u-mu); min-height: 44px; display: flex; align-items: center; justify-content: center; }
.u-plan--hot {
  background: linear-gradient(160deg, #9D00FF, #3D0066); border-color: #B6FF00;
  box-shadow: 0 60px 120px -50px #9D00FF;
}
.u-plan--hot .u-unit, .u-plan--hot .u-nota-p, .u-plan--hot .u-list, .u-plan--hot .u-para, .u-plan--hot .u-wa { color: #fff; }
.u-plan--hot .u-nota-p { border-top-color: rgba(255, 255, 255, .3); }
.u-plan--hot .u-bo { background: #B6FF00; color: #0B0710; box-shadow: none; }
.u-plan--hot .u-bo:focus-visible { outline-color: #fff; }
@media (min-width: 1030px) { .u-plan .u-para { min-height: 4.65em; } }
.u-plan--hot .u-nota-p a { color: #fff; }
.u-pill { align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: #B6FF00; color: #0B0710; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.u-amedida {
  margin-top: 20px; padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
}
.u-amedida h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.04; }
.u-amedida p { margin-top: 10px; max-width: 56ch; }
.u-mercados { margin-top: 28px; font-size: 14px; color: var(--u-mu); }
html[data-moneda] .u-price, .u-nota-p, .u-unit { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   PREGUNTAS
   ========================================================================== */
.u-faq { flex: 1.6 1 460px; min-width: 0; border-top: 1px solid var(--u-line); }
.u-q { border-bottom: 1px solid var(--u-line); }
.u-q summary {
  list-style: none; cursor: pointer; min-height: 76px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; font-weight: 600; font-size: clamp(18px, 1.9vw, 23px); padding: 12px 0;
}
.u-q summary::-webkit-details-marker { display: none; }
.u-q summary::after {
  content: ''; flex: none; width: 14px; height: 14px; margin-right: 6px;
  border-right: 2px solid #B6FF00; border-bottom: 2px solid #B6FF00; transform: rotate(45deg); transition: transform .3s;
}
.u-q[open] summary::after { transform: rotate(225deg); }
.u-q summary:focus-visible { outline: 3px solid #B6FF00; outline-offset: 2px; border-radius: 8px; }
.u-q p { margin: 0 0 28px; max-width: 680px; color: var(--u-mu); line-height: 1.6; }
.u-q p span[data-eur] { color: #fff; font-weight: 600; }

/* ==========================================================================
   ACTUALIDAD (la sección conserva sus clases para el motor del blog)
   ========================================================================== */
#actualidad.seccion { overflow: visible; background: transparent; padding-block: clamp(80px, 11vw, 170px); }
.u-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; margin-top: 64px; }
.u-ficha { display: flex; flex-direction: column; overflow: hidden; overflow: clip; text-decoration: none; color: #fff; }
.u-ficha img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.u-ficha__t { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.u-ficha__f { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #B6FF00; }
.u-ficha h3 { font-size: 28px; line-height: 1.04; }
.u-ficha p { color: var(--u-mu); font-size: 15.5px; line-height: 1.5; }
.u-ficha__m { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #B6FF00; }
.u-ficha:focus-visible { outline: 3px solid #B6FF00; outline-offset: 3px; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.u-contact { position: relative; overflow: hidden; overflow: clip; padding-block: clamp(80px, 11vw, 170px); }
.u-glow {
  position: absolute; left: 50%; bottom: -520px; width: 1300px; height: 1300px; margin-left: -650px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(182, 255, 0, .28) 0, rgba(157, 0, 255, .22) 38%, transparent 66%);
}
.u-contact .u-w { position: relative; }
.u-px--lime3 { right: 4%; top: -30px; }
.u-px--chro2 { right: 20%; top: 150px; }
.u-hablemos { font-size: clamp(72px, 15vw, 236px); transform: perspective(1400px) rotateY(0) rotateX(0); transition: transform .6s var(--u-ease); transform-origin: 30% 50%; }
.u-contact__lead { max-width: 520px; margin-top: 28px; font-size: clamp(17px, 1.5vw, 21px); }
.u-contact__row { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 56px; }
.u-form { flex: 1.5 1 420px; min-width: 0; padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 20px; }
.u-field { display: flex; flex-direction: column; gap: 8px; }
.u-field > label { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.u-field > label span { color: var(--u-mu); letter-spacing: .04em; text-transform: none; font-weight: 500; }
.u-fd {
  width: 100%; min-height: 54px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px; color: #fff; font: 500 16px 'Archivo', system-ui, sans-serif; padding: 14px 16px;
}
textarea.u-fd { resize: vertical; min-height: 110px; }
.u-fd::placeholder { color: #A592B2; opacity: 1; }
.u-fd:focus, .u-fd:focus-visible { outline: 2px solid #B6FF00; outline-offset: 2px; border-radius: 14px; }
select.u-fd { appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, #B6FF00 50%), linear-gradient(135deg, #B6FF00 50%, transparent 50%);
  background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
select.u-fd option { background: #1A1022; color: #fff; }
.u-check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--u-mu); }
.u-check input { width: 24px; height: 24px; margin: 0; accent-color: #B6FF00; }
.u-check a { color: #B6FF00; text-underline-offset: 3px; }
.u-trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.u-aviso { margin: 0; padding: 12px 14px; border: 1px solid #B6FF00; border-radius: 14px; color: #B6FF00; font-size: 14px; font-weight: 600; }
.u-aviso[hidden] { display: none; }
.u-hint { font-size: 13px; color: var(--u-mu); }
.u-form .u-bt { align-self: flex-start; }
.u-side { flex: 1 1 280px; display: flex; flex-direction: column; gap: 32px; }
.u-side .u-ey { margin-bottom: 8px; }
.u-big { font-size: clamp(32px, 3.6vw, 52px); text-decoration: none; display: inline-block; min-height: 44px; }
.u-mail { font-size: 20px; font-weight: 600; display: inline-block; min-height: 44px; overflow-wrap: anywhere; }
@media (max-width: 820px) { .u-contact__row { margin-top: 40px; } }

/* ==========================================================================
   PIE y BARRA FIJA
   ========================================================================== */
.u-foot-site { border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: var(--u-mu); position: relative; }
.u-foot-site__in { display: flex; flex-direction: column; gap: 6px; padding-block: 28px; }
.u-foot-site__row { display: flex; flex-wrap: wrap; gap: 0 28px; align-items: center; }
.u-foot-site a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.u-foot-site__row--nav a { font-weight: 600; color: #fff; }
.u-foot-site a:focus-visible { outline: 3px solid #B6FF00; outline-offset: 2px; border-radius: 6px; }
.u-foot-site__c { display: inline-block; padding-block: 10px; }

/* La barra fija de WhatsApp (editorial.js la enciende): opaca, sin blur */
.cta-fijo { background: #130d19 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-top: 1px solid rgba(255, 255, 255, .14) !important; }
.cta-fijo .u-bt { width: 100%; }

/* ==========================================================================
   MOVIMIENTO REDUCIDO: nada se mueve, todo se ve
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .u-root *, .u-root *::before, .u-root *::after { animation: none !important; transition: none !important; }
  .u-spot { display: none !important; }
}

/* Foco de luz que sigue al cursor: solo con ratón fino (home.js lo mueve) */
.u-spot { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .u-spot {
    display: block; position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px;
    border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
    background: radial-gradient(circle, rgba(182, 255, 0, .13), transparent 62%);
    transform: translate3d(-999px, -999px, 0); transition: opacity .4s;
  }
  .u-spot.is-on { opacity: 1; }
}

/* ==========================================================================
   MÓVIL
   ========================================================================== */
@media (max-width: 820px) {
  .u-s, .u-contact, #actualidad.seccion { padding-block: 72px; }
  .u-plan { padding: 32px 26px; }
  .u-serv, .u-cita, .u-paso { padding: 30px 26px; }
  .u-dolor { padding: 22px 22px; }
  .u-cita__q { font-size: 25px; }
  .u-split { gap: 40px; }
  .u-about { gap: 40px; }
  .u-grid, .u-plans { margin-top: 44px; }
  .u-sub { margin-top: 56px; }
  .u-band { padding: 18px 0; }
  .u-mq { font-size: 28px; gap: 44px; }
  .u-paso__n { font-size: 64px; }
  .u-paso h3 { margin-top: 14px; }
  .u-serv__num { font-size: 60px; }
}

/* ---- /web/ (landing de la página web): piezas que la portada no usa ---- */
.u-art--foto { display: block; }
.u-art--foto picture, .u-art--foto img { display: block; width: 100%; height: 100%; }
.u-art--foto img { object-fit: cover; object-position: 50% 0; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.u-proj:hover .u-art--foto img { transform: scale(1.04); }
.u-mercados { text-align: center; margin: 28px auto 0; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .u-proj:hover .u-art--foto img { transform: none; } }
/* /web/: su segunda línea («no vende. Vende», 15 letras) es más larga que «trabajando». */
.u-l2--largo { font-size: clamp(36px, 10vw, 160px); padding-left: 6%; }

/* ==========================================================================
   TODO CENTRADO (2026-10-09, decisión del dueño: así está todo el sitio desde
   septiembre). Va al final para ganar por orden. El titular grande del hero en
   escritorio mantiene su composición escalonada (es tipografía, no texto de
   lectura); en móvil también se centra.
   ========================================================================== */
.u-root main, .u-foot-site { text-align: center; }
.u-root .u-h2, .u-root .u-hablemos, .u-root .u-lead, .u-root .u-contact__lead,
.u-root .u-foot__p, .u-root .u-q p, .u-root .u-cierre { margin-left: auto; margin-right: auto; text-align: center; }
.u-root .u-top, .u-root .hero__cta, .u-root .u-ventajas, .u-root .u-serv__links,
.u-root .u-cta, .u-root .u-foot-site__row, .u-root .u-contact__row { justify-content: center; }
.u-root .u-meta { justify-items: center; }
.u-root .u-prueba { text-align: center; }
/* Dos columnas → una columna centrada */
.u-root .u-split { flex-direction: column; align-items: center; }
.u-root .u-split > * { width: 100%; max-width: 860px; flex: none; }
.u-root .u-sticky { position: static; }
.u-root .u-sticky .u-orbwrap { display: none; }
.u-root .u-dolor { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
/* Tarjetas */
.u-root .u-serv__head { justify-content: center; gap: 18px; align-items: center; }
.u-root .u-card, .u-root .u-proj__body, .u-root .u-paso, .u-root .u-plan, .u-root .u-cita { text-align: center; }
.u-root .u-cita { align-items: center; }
.u-root .u-list { justify-items: center; }
.u-root .u-list li { grid-template-columns: auto auto; justify-content: center; text-align: center; }
.u-root .u-flecha { align-items: center; }
/* Preguntas: pregunta centrada con la flecha a su derecha */
.u-root .u-q summary { justify-content: center; text-align: center; }
/* Quién soy y contacto */
.u-root .u-about__b { text-align: center; }
.u-root .u-side { align-items: center; text-align: center; }
.u-root .u-form { text-align: center; }
.u-root .u-field label { display: block; text-align: center; }
.u-root .u-check { justify-content: center; text-align: left; max-width: 480px; margin-left: auto; margin-right: auto; }
@media (max-width: 820px) {
  .u-root .u-h1, .u-root .u-l1, .u-root .u-l2, .u-root .u-l3 { text-align: center; }
  .u-root .u-l1, .u-root .u-l3 { margin-left: 0; margin-right: 0; }
  .u-root .u-l2 { padding-left: 0; }
  /* La burbuja de ejemplo va abajo del arco, sobre la camiseta: no tapa la cara
     ni choca con la insignia lima (esquina inferior derecha). */
  .u-px--bub { left: 8px; bottom: 14px; width: min(240px, calc(100% - 150px)); }
}
.u-root h3 { text-align: center; }
.u-root .u-plan, .u-root .u-serv, .u-root .u-paso, .u-root .u-proj__body, .u-root .u-cita, .u-root .u-form { align-items: center; }
.u-root .u-plan .u-cta, .u-root .u-form .u-bt { align-self: stretch; }
.u-root .u-pill { align-self: center; }
.u-root .u-list li { display: block; }
.u-root .u-list li::before { margin-right: 8px; }
.u-root .u-ia { border-left: 0; padding-left: 0; border-top: 2px solid #B6FF00; padding-top: 12px; }
.u-root .u-serv__links { align-items: center; }
.u-root .u-split > * { flex: 0 0 auto !important; }
/* Formulario: los campos van a todo el ancho de la tarjeta (el centrado de arriba los encogía);
   solo las etiquetas y los textos van centrados. */
.u-root .u-form { align-items: stretch; }
.u-root .u-form .u-field, .u-root .u-form .u-fd { width: 100%; align-self: stretch; }
.u-root .u-form .u-check { max-width: none; width: 100%; }
/* Logo real en la cabecera (antes iban las letras «AC» del diseño). */
.u-nav__logo { display: block; height: 28px; width: auto; flex: none; }
/* Titular «No te prometo. / Te muestro / lo que hice.»: la primera línea (14 letras) es más
   larga que «Vende más»; se reduce para que quepa y la línea en lima quede como la grande. */
.u-l1--largo { font-size: clamp(44px, 13.4vw, 212px); }
/* Con «No te prometo. / Te muestro / lo que hice.» las líneas son más anchas que las del
   titular anterior: la primera va DELANTE de la foto (si no, el arco tapaba «PROMETO»), la
   esfera morada se quita del titular (tapaba «LO») y la burbuja pasa a la derecha, sobre la
   camiseta. En móvil la esfera lima baja para no pisar la línea «Ya lo hicieron». */
.u-l1--largo { z-index: 3; }
.u-hero .u-px--purp { display: none; }
@media (min-width: 821px) {
  .u-hero .u-px--bub { left: auto; right: 4%; bottom: -36px; }
}
@media (max-width: 820px) {
  .u-px--lime { bottom: calc(clamp(380px, 112vw, 460px) - 158px); right: -14px; }
}
@media (min-width: 821px) {
  .u-hero .u-px--bub, .u-hero .u-px--chro { display: none; }
  .u-l1--largo { font-size: clamp(44px, 11vw, 176px); }
}
@media (min-width: 1500px) { .u-l1--largo { font-size: 156px; } }

/* ==========================================================================
   HERO EN COMPUTADOR A DOS COLUMNAS (2026-10-09): con titulares más largos
   que «Vende más / trabajando / menos.» las letras cruzaban la cara de la foto.
   Ahora el titular va centrado en su columna y la foto entera en la suya. Las
   líneas se dimensionan contra el ancho de su columna (unidades cqi), así
   nunca se salen ni tocan la foto, sea cual sea el titular. Móvil: sin cambios.
   ========================================================================== */
@media (min-width: 821px) {
  .u-hero .u-stage { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; column-gap: clamp(24px, 3vw, 56px); }
  .u-hero .u-h1 { grid-column: 1; grid-row: 1; container-type: inline-size; text-align: center; position: relative; z-index: 3; }
  .u-hero .u-h1 > span { text-align: center; margin-left: 0; margin-right: 0; padding-left: 0; white-space: nowrap; }
  .u-hero .u-l1 { font-size: 24cqi; }
  .u-hero .u-l2 { font-size: 21cqi; }
  .u-hero .u-l3 { font-size: 21cqi; }
  .u-hero .u-l1--largo { font-size: 15cqi; }
  .u-hero .u-l2--largo { font-size: 16cqi; }
  .u-hero .u-hpw { grid-column: 2; grid-row: 1; position: relative; right: auto; top: auto; width: 100%; height: clamp(400px, 36vw, 560px); }
}
/* La frase y los botones suben a la columna del titular: el botón de WhatsApp queda
   en la primera pantalla y la foto ocupa toda la altura a la derecha. */
@media (min-width: 821px) {
  .u-hero .u-hero__in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 56px); align-items: center; }
  .u-hero .u-top { grid-column: 1 / -1; grid-row: 1; }
  .u-hero .u-stage { display: contents; }
  .u-hero .u-h1 { grid-column: 1; grid-row: 2; align-self: end; }
  .u-hero .u-foot { grid-column: 1; grid-row: 3; align-self: start; flex-direction: column; align-items: center; text-align: center; border-top: 0; padding-top: 0; margin-top: 26px; gap: 22px; }
  .u-hero .u-foot__p { max-width: 560px; }
  .u-hero .u-hpw { grid-column: 2; grid-row: 2 / span 2; height: clamp(440px, 40vw, 620px); }
  .u-hero { padding-top: clamp(32px, 4vw, 64px); }
}
/* /web/: su párrafo es más largo; el titular baja un poco para que el botón quepa en la primera pantalla. */
@media (min-width: 821px) {
  .u-hero--web .u-l1 { font-size: 18cqi; }
  .u-hero--web .u-l2--largo { font-size: 14cqi; }
  .u-hero--web .u-l3 { font-size: 17cqi; }
  .u-hero--web .u-foot { margin-top: 18px; gap: 18px; }
}
@media (min-width: 821px) {
  /* el anillo detrás de la foto (antes cruzaba el párrafo) y la esfera lima un poco más abajo */
  .u-hero .u-px--tor { left: auto; right: 14%; top: 46%; z-index: 0; }
  .u-hero .u-px--lime { top: 12%; }
}