/* ============================================================
   PORTADA · Prisma Cactus
   ------------------------------------------------------------
   Modo Persuade. La primera pantalla es la demostración de
   refracción: un haz entra, el globo lo abre en ocho rayos, y
   cada rayo aterriza en un rubro que ES el filtro de demos.
   Depende de css/prisma.css para tokens y primitivas.
   ============================================================ */

/* ── Fondo 3D — el globo, conservado tal cual ────────────────
   El canvas vive detrás de TODO el scroll. Los parámetros de
   la escena no se tocan (assets/prisma-cactus-3d.js es la
   pieza fijada); lo único que cambia acá es DÓNDE se para el
   globo, porque la composición de la lámina lo quiere en el
   punto de incidencia del haz y no al centro.

   El canvas ocupa SIEMPRE la pantalla completa. Dónde se para
   el globo (hero, acoplado, fondo) ya no se hace con transform
   acá: lo encuadra la cámara desde js/globo.js, para que las
   partículas del hero, que van en el mismo canvas, puedan quedar
   de fondo a pantalla completa. Acá solo quedan la opacidad del
   estado de fondo y el lanzamiento. */
#pc-bg {
  position: fixed; inset: 0; z-index: 0;
  background: var(--noche);
  pointer-events: none;
  transition: transform .6s var(--sal), opacity .5s var(--sal);
  will-change: transform;
}
#pc-bg canvas { display: block; width: 100%; height: 100%; }
/* Partículas ambientales: apenas visibles fuera del hero y sin halos. */
.particulas-fondo {
  position: fixed; inset: -22vmax; z-index: 0; pointer-events: none;
  opacity: .16;
  transition: opacity .6s var(--sal);
  background-image:
    radial-gradient(circle, rgba(242, 244, 239, .7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(61, 220, 110, .5) 0 1px, transparent 1.5px);
  background-size: 94px 94px, 137px 137px;
  background-position: 12px 28px, 54px 73px;
  animation: pc-particulas-giro 100s linear infinite;
  will-change: transform;
}
@keyframes pc-particulas-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .particulas-fondo { animation: none; } }

/* ESTADOS 1 y 2 — HERO y ACOPLADO: los encuadra la cámara
   (ver "Encuadre" en js/globo.js). */

/* ESTADO 3 — FUERA DEL HERO: la bola no se ve. Solo existe en el
   hero; el resto de la página tendrá su propio fondo. (Mientras está
   oculta, js/globo.js deja de dibujarla.) */
body.pc-scrolled #pc-bg,
body.pc-docked #pc-bg { opacity: 0; }

/* Sin barra de scroll visible en la portada (el scroll sigue igual). */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ESTADO 4 — LANZAMIENTO a CactusWork: el globo se traga la
   pantalla. El JS sube el pixelRatio antes para que el zoom
   salga nítido y no pixelado. */
body.pc-launching #pc-bg {
  transform: scale(9) !important;
  opacity: 1 !important;
  z-index: 900;
  transition: transform 1.1s cubic-bezier(.7, 0, .84, 0), opacity 1.1s ease;
}
body.pc-launching { overflow: hidden; }

/* Todo el contenido vive por encima del canvas. */
#view-portada { position: relative; z-index: 1; }

/* ── Barra de progreso ──────────────────────────────────────
   Una regla que se llena, no una barra con brillo. */
/* Escala en vez de ancho: animar width recalcula la disposición en
   cada fotograma; scaleX solo toca el compositor. En un teléfono
   modesto esa diferencia se siente al hacer scroll. */
.progreso {
  position: fixed; top: 0; left: 0; right: 0; z-index: 260;
  height: 2px;
  background: var(--sol);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .1s linear;
}

/* ── Nav ────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 250;
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--e4);
  padding-inline: var(--e5);
  background: var(--noche);
  border-bottom: 1px solid var(--linea);
}
@media (max-width: 620px), (hover: none) { .nav { padding-inline: var(--e4); } }

/* min-height 44: el logo tambien es un enlace y 30px no es un
   objetivo tactil aceptable. */
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none;
         flex: 0 0 auto; min-height: 44px; }
.marca-ico { width: 30px; height: 30px; flex: 0 0 auto; }
.marca-logo { width: 30px; height: 40px; object-fit: contain; }
.marca-tx {
  font-weight: 800; font-stretch: 112%;
  font-size: 15px; letter-spacing: -.01em; line-height: 1;
  white-space: nowrap;
}
.marca-tx .b { color: var(--arena); }   /* PRISMA en el secundario, igual que en el pie y en la entrada */
.marca-tx .c { color: var(--prisma); }

/* Arranques editoriales solicitados: la primera idea termina en su
   punto y la explicación continúa debajo con peso normal. */
.texto-arranque,
.texto-continuacion { display: block; }
.texto-continuacion { margin-top: var(--e2); }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link {
  font-size: 14px; font-weight: 600;
  color: var(--tiza-2);
  padding: 11px;
  min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: var(--r2);
  text-decoration: none;
  white-space: nowrap;
  text-align: left;   /* "Encuéntrala en 3 toques" es <button>: abre el asistente, no navega */
  cursor: pointer;
  transition: color .18s var(--sal), background-color .18s var(--sal);
}
/* Hover: el texto pasa a blanco y aparece una línea verde prisma
   debajo, que crece desde el centro. Sin cuadro de fondo. */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 7px;
  height: 2px; background: var(--ray-4);
  transform: scaleX(0); transition: transform .22s var(--sal);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--tiza); }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link.activo { color: var(--tiza); }
.nav-link.activo::after { transform: scaleX(1); }
/* "Clientes" no es parte del recorrido: una regla de 1px lo separa. */
.nav-link-aparte { margin-left: var(--e3); position: relative; }
.nav-link-aparte::before {
  content: ""; position: absolute; left: calc(var(--e3) / -2 - 1px); top: 12px; bottom: 12px;
  border-left: 1px solid var(--linea);
}

.nav-fin { display: flex; align-items: center; gap: var(--e1); flex: 0 0 auto; margin-left: var(--e3); }
.nav-ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  color: var(--tiza-2);
  transition: color .18s var(--sal), border-color .18s var(--sal);
}
.nav-ico:hover { color: var(--sol); border-color: var(--sol); }
.nav-ico svg { width: 18px; height: 18px; }
/* En la portada ya está el botón grande "Escríbenos por WhatsApp";
   el del menú aparece recién al bajar, para no repetir la misma acción
   dos veces en la primera pantalla. */

.nav-hamb { display: none; }

@media (max-width: 1080px), (hover: none) {
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--noche);
    border-bottom: 1px solid var(--linea-viva);
    padding: var(--e2) var(--e4) var(--e4);
    /* Cerrado con visibility, no con display:none, para que el foco
       de teclado no entre a un panel invisible. El movimiento es
       transform+opacity: animar max-height recalcula la disposición
       en cada fotograma. */
    max-height: 80vh; overflow-y: auto;
    visibility: hidden; opacity: 0;
    transform: translateY(-10px);
    transition: opacity .26s var(--sal), transform .3s var(--sal), visibility .3s;
  }
  .nav-links.abierto { visibility: visible; opacity: 1; transform: none; }
  /* Opciones centradas: el panel ocupa el ancho de la pantalla, así que
     una columna alineada a la izquierda deja el texto flotando solo. */
  .nav-links { align-items: center; padding: var(--e3) var(--e4) var(--e4); }
  .nav-link {
    padding: 14px var(--e3);
    font-size: 16px;
    width: 100%;
    justify-content: center;
    text-align: center;
    border-bottom: 1px solid var(--linea);
  }
  .nav-link:last-child { border-bottom: 0; }
  /* Detalle prisma: la línea verde crece desde el centro bajo la opción. */
  .nav-link::after {
    left: 50%; right: auto; width: 46px; bottom: 8px;
    margin-left: -23px;
    transform-origin: center center;
  }
  .nav-link.activo { color: var(--tiza); }
  .nav-link-aparte { margin-left: 0; }
  .nav-link-aparte::before { display: none; }
  .nav-hamb { display: grid; }
}

/* El menú se toca con el pulgar: el borde derecho es el borde de la
   pantalla, sin aire sobrante entre la hamburguesa y el canto. */
@media (max-width: 620px), (hover: none) {
  .nav { padding-inline: var(--e4) 6px; gap: var(--e2); }
  .nav-fin { gap: 6px; margin-left: auto; }
}

/* ══════════════════════════════════════════════════════════
   LÁMINA 1 — EL HERO
   Título grande arriba, a lo ancho. Debajo: la información (hacia el
   centro, acompañando al globo) y el globo a la derecha.
   ══════════════════════════════════════════════════════════ */
.hero > * { position: relative; }
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "titulo titulo" "info globo";
  column-gap: var(--e4);
  padding: calc(var(--nav-h) + var(--e6)) var(--e5) var(--e4);
  max-width: 1480px; margin-inline: auto;
}

/* ── Título ── */
.hero-h1 {
  grid-area: titulo;
  text-align: center;
  font-size: clamp(36px, 6.7vw, 100px);
  margin-bottom: var(--e4);
}
.hero-h1 em { color: var(--prisma); }
/* Cada línea es una ventana: el texto sube desde abajo recortado por
   su propio borde, como un rótulo que se revela. El relleno deja sitio
   a las descendentes y a la inclinación de la itálica. */
.hero-h1 .l1, .hero-h1 .l2 {
  display: block; overflow: hidden;
  padding: .02em .12em .1em;
  margin: -.02em -.12em -.1em;
}
.hero-h1 .lin { display: inline-block; }
@media (min-width: 760px) {
  .hero-h1 .lin { white-space: nowrap; }
}

/* ── Información: pegada al centro, del lado del globo ── */
.hero-info {
  grid-area: info;
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 560px;   /* cabe WhatsApp + Instagram en una fila */
}
.hero-sub { margin-bottom: var(--e4); }
.hero-breve {
  font-size: 15px; color: var(--tiza-3);
  margin-bottom: var(--e5);
  padding-left: var(--e3);
  border-left: 1px solid var(--linea-viva);
}
.hero-breve b { color: var(--arena); font-weight: 700; }

/* WhatsApp e Instagram con el tamaño normal de botón del sitio (el
   mismo de "Cuéntanos qué necesitas"), uno al lado del otro; "Ver
   ejemplos" debajo como enlace. */
.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.hero-acciones .btn-texto { flex-basis: 100%; justify-content: flex-start; }

.hero-sub, .hero-breve, .hero-acciones {
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .7s ease;
}
.hero-sub      { transition-delay: .15s; }
.hero-breve    { transition-delay: .25s; }
.hero-acciones { transition-delay: .35s; }

/* ── ENTRADA (js/intro.js) ────────────────────────────────────
   Mientras dura, la página no se mueve y solo se ve la animación:
   menú, barra de progreso,
   información y leyenda esperan escondidos y aparecen al final
   (pc-intro-fin). El título del hero entra con el hero (lo anima el JS). Si la entrada
   no arranca, la clase pc-intro se quita y todo se ve normal. */
body.pc-intro .hero-h1 { opacity: 0; }
html.pc-intro-quieta, html.pc-intro-quieta body { overflow: hidden; overscroll-behavior: none; }

/* La bola aparece con un fundido cuando la escena ya está lista (sin
   los tirones de los primeros cuadros de WebGL). */
body.pc-intro #pc-bg canvas { opacity: 0; transition: opacity .9s ease; }
body.pc-intro.pc-intro-lista #pc-bg canvas { opacity: 1; }

/* Durante la entrada, el título del hero espera: dentro del cristal se
   arma la marca "Prisma Cactus" (js/intro.js) y el título entra con el
   hero, al final. */
.intro-marca {
  position: fixed; left: 0; right: 0; top: 50%; z-index: 300;
  transform: translateY(-50%);
  text-align: center;
  pointer-events: none;
  font-family: 'Clash Display', 'Poppins', system-ui, sans-serif;
  font-weight: 600; font-stretch: normal;
  font-size: clamp(40px, min(9vw, 15vh), 136px);
  line-height: 1; letter-spacing: -.01em;
  white-space: nowrap;
}
/* "PRISMA" en arena y "CACTUS" en verde: los dos colores de la marca,
   uno por palabra. El contorno negro de 1px es lo que los separa del
   diorama que se ve detrás del cristal — sin él, el ocre se mezcla con
   la arena de la escena y la palabra pierde el filo. Va con sombras y
   no con -webkit-text-stroke, que come el interior de la letra. */
.intro-marca .b { color: var(--arena); }
.intro-marca .c { color: var(--prisma); }
.intro-marca .b,
.intro-marca .c {
  text-shadow:
     0  1px 0 var(--noche),  1px  0   0 var(--noche),
     0 -1px 0 var(--noche), -1px  0   0 var(--noche),
     1px 1px 0 var(--noche), -1px  1px 0 var(--noche),
     1px -1px 0 var(--noche), -1px -1px 0 var(--noche);
}
.intro-marca .ch { display: inline-block; }
@media (max-width: 620px), (hover: none) {
  .intro-marca { white-space: normal; }
  .intro-marca .pal { display: block; }
}

/* Flecha verde prisma, flotando dentro del cristal sobre su base. El JS
   calcula el alto (top); un toque o un scroll hace correr la entrada. */
.intro-flecha {
  position: fixed; left: 50%; z-index: 300;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  color: var(--ray-4);
  cursor: pointer;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .9)) drop-shadow(0 0 14px rgba(61, 220, 110, .8));
  transition: opacity .5s ease;
  animation: flechaFlota 2.2s ease-in-out infinite;
}
.intro-flecha svg {
  width: 46px; height: 46px;
  fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.intro-flecha:focus-visible { outline: 2px solid var(--ray-4); outline-offset: 4px; border-radius: 50%; }
.intro-flecha.fuera,
body:not(.pc-intro-lista) .intro-flecha { opacity: 0; pointer-events: none; }
@keyframes flechaFlota {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(6px); }
}

body.pc-intro .nav,
body.pc-intro .progreso { transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1), visibility .7s; }
body.pc-intro:not(.pc-intro-fin) .nav { opacity: 0; visibility: hidden; transform: translateY(-100%); }
body.pc-intro:not(.pc-intro-fin) .progreso { opacity: 0; }

body.pc-intro:not(.pc-intro-fin) .hero-sub,
body.pc-intro:not(.pc-intro-fin) .hero-breve,
body.pc-intro:not(.pc-intro-fin) .hero-acciones { opacity: 0; transform: translateY(26px); transition-delay: 0s; }

/* ── Globo (derecha) ── */
.hero-globo {
  grid-area: globo;
  position: relative;
  min-height: clamp(380px, 66vh, 780px);
}
/* Cuando la vitrina trajo datos, el hueco se puede tocar para abrirla. */
body.pc-globe-ready .hero-globo.tiene-datos { cursor: pointer; }

/* Leyenda grabada en la base del cristal, en curva. No es un botón:
   lo que se toca es el globo. El JS la coloca sobre la base según el
   tamaño real del globo (--ley-y, --ley-w). Aparece al terminar la
   entrada. */
.hero-leyenda {
  position: absolute; left: 50%;
  top: var(--ley-y, 80%);
  width: var(--ley-w, 320px);
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
  transition: opacity .8s ease .3s;
}
.hero-leyenda text {
  font-family: 'Teko', sans-serif;
  font-size: 16.5px; font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  fill: var(--arena);
  opacity: .85;
}
body.pc-intro:not(.pc-intro-fin) .hero-leyenda { opacity: 0; transition-delay: 0s; }
/* Sin datos de la vitrina no hay nada que abrir: no se promete. */
.hero-globo:not(.tiene-datos) .hero-leyenda { display: none; }

/* ── Escritorio: el hero entero cabe en la ventana ──
   El hueco del globo toma lo que sobra en vez de exigir 66vh (eso
   empujaba el hero más alto que la pantalla). El globo se escala solo
   al hueco (js/globo.js). El título también respeta el alto. */
@media (min-width: 900px) and (hover: hover) {
  .hero { height: 100vh; height: 100svh; min-height: 560px; }
  .hero-globo { min-height: 0; }
  .hero-h1 { font-size: clamp(36px, min(6.7vw, 11vh), 100px); }
}

/* ── Móvil: una columna; el globo va debajo de la información ── */
@media (max-width: 899px), (hover: none) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "titulo" "info";
    padding: calc(var(--nav-h) + var(--e6)) var(--e4) var(--e5);
  }
  .hero-h1,
  .hero-info,
  .hero-sub { text-align: center; }
  /* El párrafo respira del título sin separarse de él. */
  .hero-h1 { margin-bottom: var(--e6); }
  /* Todo el bloque sube y se apoya en el título en vez de flotar en el
     centro de la fila: el globo ya no ocupa sitio acá (va fijo en la
     esquina), así que centrarlo dejaba un hueco muerto bajo el titular. */
  .hero-info { justify-self: stretch; align-self: start; max-width: none; }
  .hero-sub { margin-bottom: var(--e5); }
  .hero-breve { margin-bottom: var(--e6); }
  .hero-breve {
    text-align: center;
    padding-left: 0;
    border-left: 0;
  }
  /* El globo acoplado: un solo punto define dónde vive, para que el
     aro blanco, el recorte del canvas y el área táctil coincidan.
     Los valores salen de ubicarGlobo() en js/globo.js (52px del canto
     derecho, 76px del inferior). */
  :root {
    --glb-d: 46px;                 /* diámetro del aro */
    --glb-b: 1.5px;                /* grosor del aro */
    --glb-x: 52px;                 /* centro, desde la derecha */
    --glb-y: 76px;                 /* centro, desde abajo */
  }
  .hero-globo {
    position: fixed;
    z-index: 310;                  /* por encima del nav y de todo lo demás */
    right: calc(var(--glb-x) - var(--glb-d) / 2);
    bottom: calc(var(--glb-y) - var(--glb-d) / 2);
    width: var(--glb-d);
    height: var(--glb-d);
    min-height: 0;
    margin: 0;
    border-radius: 50%;
    /* Contorno blanco. Va como box-shadow y no como border: el borde de
       un elemento con fondo transparente se mezcla con lo que asoma
       detrás y se lee más grueso del lado oscuro del globo que del
       claro. La sombra se dibuja de una pieza, pareja en toda la vuelta. */
    border: 0;
    box-shadow:
      inset 0 0 0 var(--glb-b) rgb(255 255 255 / .92),
      0 4px 14px rgb(0 0 0 / .5);
    /* Durante la entrada el globo ocupa la pantalla entera: el aro de la
       esquina no tiene nada que enmarcar todavía y aparecía flotando
       solo sobre la animación. Aparece cuando la bola ya está en su
       sitio, con el mismo gesto que el recorte del canvas. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease .15s, visibility .45s;
  }
  body.pc-globe-ready:not(.pc-intro):not(.pc-launching):not(.vit-abierta) .hero-globo {
    opacity: 1;
    visibility: visible;
  }
  /* El globo lo dibuja el canvas de fondo, que va a pantalla completa:
     se recorta al círculo del aro y sube por encima de la página. Solo
     cuando ya está acoplado — durante la entrada ocupa la pantalla y
     al lanzar CactusWork se la traga. */
  /* Con la vitrina abierta el globo se aparta: su ventana está por
     debajo de él en la pila y lo veía flotar encima, recortado. */
  body.vit-abierta .hero-globo { opacity: 0; visibility: hidden; }
  body.vit-abierta #pc-bg { clip-path: none !important; z-index: 0 !important; opacity: 0; }

  body.pc-globe-ready:not(.pc-intro):not(.pc-launching):not(.vit-abierta) #pc-bg {
    z-index: 305;
    /* El recorte termina justo donde empieza el aro: si se solapan,
       el canvas pisa un píxel del blanco y el grosor parece desigual. */
    clip-path: circle(calc(var(--glb-d, 46px) / 2 - var(--glb-b, 1.5px))
                      at calc(100% - var(--glb-x, 52px)) calc(100% - var(--glb-y, 76px)));
  }
  /* En el teléfono la primera pantalla es casi toda fondo negro: las
     partículas suben apenas lo justo para que se note el cielo. Al
     bajar vuelven a su discreción de siempre. */
  body:not(.pasado-hero) .particulas-fondo { opacity: .26; }

  .hero-leyenda { display: none; }
  body.pc-intro:not(.pc-intro-fin) .hero-globo { pointer-events: none; }
  body.pc-globe-ready.pc-intro-fin .hero-globo.tiene-datos { pointer-events: auto; }

  /* Contactos compactos: se conservan colores y formas, mostrando solo
     sus iconos. El enlace a ejemplos sigue siendo una acción de texto. */
  .hero-acciones { justify-content: center; align-items: center; gap: var(--e4); }
  .hero-acciones .btn-wa,
  .hero-acciones .btn-ig {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    overflow: hidden;
    /* !important: la tipografía de controles fija 20px en prisma.css.
       Acá el rótulo sobra, el icono ya dice cuál es cada uno. */
    font-size: 0 !important;
    line-height: 0;
    gap: 0;
    border-radius: 50%;
    animation: heroContactoFlota 3s ease-in-out infinite;
  }
  .hero-acciones .btn-ig { animation-delay: -.8s; }
  .hero-acciones .btn-wa svg,
  .hero-acciones .btn-ig svg { width: 21px; height: 21px; margin: 0; }
  .hero-acciones .btn-texto {
    flex-basis: 100%;
    justify-content: center;
    margin-top: var(--e3);
  }
  @keyframes heroContactoFlota {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(3px); }
  }

  /* En móvil el canvas ya no se apaga fuera del hero: la cámara deja el
     globo reducido en la esquina. Escritorio conserva su regla original. */
  body.pc-scrolled #pc-bg,
  body.pc-docked #pc-bg { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-h1 .lin, .hero-sub, .hero-breve, .hero-acciones, .hero-leyenda { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   TRES PASOS — reglones numerados, no tarjetas
   ══════════════════════════════════════════════════════════ */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); max-width: 1060px; margin-inline: auto; }
.pasos-intro {
  width: 100%;
  max-width: 700px;
  margin: -28px auto var(--e5);
  padding-inline: var(--e4);
  text-align: center;
  color: var(--tiza-2);
}
.paso {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgb(61 220 110 / .22);
  border-radius: var(--r3);
  isolation: isolate;
  transition: border-color .35s var(--sal), transform .45s var(--sal);
}
.paso:hover, .paso:focus-visible { border-color: var(--prisma); transform: translateY(-5px); outline: 0; }
.paso-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity .45s var(--sal); z-index: 0; }
.paso:nth-child(1) .paso-video { object-position: center bottom; }
.paso:nth-child(2) .paso-video { object-position: center 32%; }
.paso:hover .paso-video, .paso:focus-visible .paso-video { opacity: .9; }
.paso-capa { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; height: 100%; min-height: inherit; padding: var(--e5); background: transparent; }
.paso::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 54px; height: 54px; transform: translate(-50%, -50%); border: 1px solid rgba(61, 220, 110, .45); border-radius: 50%; background: rgba(61, 220, 110, .1); opacity: .48; transition: opacity .3s var(--sal), transform .3s var(--sal); pointer-events: none; }
.paso::after { content: ""; position: absolute; z-index: 3; left: calc(50% + 2px); top: 50%; transform: translate(-50%, -50%); border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 13px solid var(--prisma); opacity: .58; transition: opacity .3s var(--sal); pointer-events: none; }
.paso:hover::before, .paso:hover::after, .paso:focus-visible::before, .paso:focus-visible::after { opacity: 0; }
.paso-n {
  font-family: 'Teko', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: var(--prisma);
  padding-top: 2px;
  transition: color .3s var(--sal), font-size .3s var(--sal);
}
.paso-ico { width: 30px; height: 30px; color: var(--prisma); }
.paso-texto { align-self: end; grid-column: 1 / -1; }
.paso-t { font-size: 22px; font-weight: 700; font-stretch: 106%; margin-bottom: 7px; }
.paso-d { font-size: 15px; color: var(--tiza-2); max-width: 30ch; }
.paso-texto, .paso-ico { transition: opacity .25s var(--sal); }
.paso:hover .paso-texto, .paso:hover .paso-ico, .paso:focus-visible .paso-texto, .paso:focus-visible .paso-ico { opacity: 0; }
.paso:hover .paso-n, .paso:focus-visible .paso-n { color: var(--prisma); font-size: 14px; }

@media (max-width: 820px), (hover: none) {
  .pasos { grid-template-columns: 1fr; }
  .paso { min-height: 360px; }

  /* ── Los tres videos en teléfono (js/pasos.js) ──
     Quién manda es el estado, no el mouse: sin él, el :hover se queda
     pegado al tocar y el texto aparecía y desaparecía sin motivo. Con
     el video quieto se lee la tarjeta entera; con el video corriendo
     quedan solo el rótulo del paso y su icono, y la pantalla es del
     video. */
  .paso-n { font-size: 22px; letter-spacing: .06em; padding-top: 0; }
  .paso:hover .paso-n,
  .paso:focus-visible .paso-n { font-size: 22px; }
  .paso:hover .paso-texto, .paso:hover .paso-ico,
  .paso:focus-visible .paso-texto, .paso:focus-visible .paso-ico { opacity: 1; }

  /* Reproduciendo: se va el texto, se quedan el paso y el icono. */
  .paso.viendo .paso-texto { opacity: 0; }
  .paso.viendo .paso-ico { opacity: 1; }
  .paso.viendo .paso-video { opacity: .95; }
  .paso.viendo::before, .paso.viendo::after { opacity: 0; }
  .paso.viendo { border-color: var(--prisma); }

  /* El paso 2 mostraba su parte alta y la figura tapaba el texto: se
     baja el encuadre para dejar el rótulo despejado. */
  .paso:nth-child(2) .paso-video { object-position: center 62%; }
}

/* ══════════════════════════════════════════════════════════
   POR QUÉ PRISMA CACTUS — panel + hueco del globo
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   QUIÉNES SOMOS · por qué nos llamamos así
   ------------------------------------------------------------
   El cactus es una imagen 2D, grande y quieta bajo el subtítulo.
   Sin JS, en móvil o con movimiento reducido, las tres ideas se
   leen en lista debajo del cactus. Con .pq-anima (lo pone
   js/identidad.js) la sección se retiene en pantalla y cada
   scroll hace aparecer una idea en su esquina.
   ══════════════════════════════════════════════════════════ */
.seccion#porquepc .sec-cab {
  position: relative;
  z-index: 4;
  justify-content: center;
  text-align: center;
}
.seccion#porquepc .sec-cab .d2 {
  width: 100%;
  text-align: center;
}
.pq { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--e7); max-width: 1180px; align-items: start; }
.pq-intro { margin-bottom: var(--e6); }
.pq-equipo { color: var(--tiza-2); font-size: 16px; max-width: 62ch; margin-bottom: var(--e5); }
.pq-cuidamos { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-bottom: var(--e6); color: var(--arena); font-size: 14px; font-weight: 650; }
.pq-cuidamos span::before { content: "•"; margin-right: 7px; }

.pq-identidad { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.pq-sub {
  font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; font-stretch: 110%;
  line-height: 1.08; letter-spacing: -.02em;
  color: var(--tiza); text-align: center;
  margin-bottom: var(--e4);
}
.pq-sub.pq-entra { animation: pqTitulo .85s var(--sal) both; }
@keyframes pqTitulo {
  0% { color: transparent; background: linear-gradient(90deg, var(--ray-1), var(--ray-4), var(--ray-6), var(--ray-8)); -webkit-background-clip: text; background-clip: text; letter-spacing: .03em; }
  100% { color: var(--tiza); letter-spacing: -.02em; }
}

/* Lista (estado base) */
.pq-escena { display: grid; gap: var(--e4); }
.pq-lente { display: contents; }
.pq-3d { display: none; }
.pq-cactus { display: block; justify-self: center; width: auto; height: clamp(300px, 80vw, 440px); }
.pq-idea { padding-top: var(--e3); border-top: 1px solid var(--linea); }
.pq-nombre { display: block; color: var(--prisma); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--e1); }
.pq-frase {
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; font-stretch: 108%;
  line-height: 1.15; letter-spacing: -.02em;
  color: var(--arena);   /* las tres ideas son encabezados: mismo ocre que los títulos de sección */
  margin-bottom: var(--e2);
}
.pq-cuerpo { font-size: 15.5px; line-height: 1.55; color: var(--tiza-2); max-width: 48ch; }

/* ── Teléfono: primero quiénes somos, después el cactus ──────
   El bloque llegaba como un muro de texto. Acá se parte en dos: arriba
   la presentación (hasta "toda Venezuela") y el cactus; el resto del
   texto baja y queda DESPUÉS del cactus, que es lo que la gente mira
   primero. Las tres ideas no se leen de corrido: salen al tocar el
   cactus, una tras otra (js/identidad-movil.js). Nada retiene la
   página: el scroll sigue siendo del visitante en todo momento. */
@media (max-width: 899px), (hover: none) {
  .pq { display: flex; flex-direction: column; gap: 0; }
  /* Los hijos de la presentación pasan a ser piezas de la columna, y
     así se pueden reordenar sin tocar el HTML. */
  .pq-presentacion { display: contents; }
  .seccion#porquepc .sec-cab { order: 0; justify-content: center; text-align: center; }
  .seccion#porquepc .sec-cab .d2 { text-align: center; width: 100%; }
  .pq-intro      { order: 1; text-align: center; margin-bottom: var(--e5); }
  .pq-identidad  { order: 2; }
  /* El párrafo largo y la lista de tres se van: en una columna angosta
     eran seis líneas de texto corrido seguidas de tres viñetas, y nadie
     las lee. Los sustituye una sola frase (.pq-breve). */
  .pq-equipo, .pq-cuidamos { display: none; }
  .pq-breve {
    order: 3;
    margin: var(--e6) auto 0;
    max-width: 30ch;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    color: var(--tiza-2);
  }
  .pq-breve b { color: var(--arena); font-weight: 650; }

  /* "Tres ideas que nos definen" iba centrado desde siempre, pero a
     32px ocupaba el ancho completo y llegaba de borde a borde: un
     título que arranca pegado al canto izquierdo se LEE como alineado
     a la izquierda, aunque no lo esté. Se le pone freno de ancho para
     que parta en dos líneas y el centrado se vea. */
  .pq-sub {
    font-size: clamp(22px, 6.4vw, 30px);
    max-width: 15ch;
    margin-inline: auto;
    margin-bottom: var(--e5);
    text-align: center;
  }

  /* El cactus flota. Es la única pieza en movimiento mientras se
     espera el toque: de ahí que se vea viva sin pedir nada. */
  .pq-cactus {
    height: clamp(260px, 62vw, 380px);
    animation: pqFlota 6s ease-in-out infinite;
    transition: transform .9s var(--sal), filter .9s ease;
    cursor: pointer;
  }
  @keyframes pqFlota {
    0%, 100% { transform: translateY(-6px); }
    50%      { transform: translateY(8px); }
  }
  /* Al presionar, el cactus se despierta y pasa a ser fondo: se apaga,
     se estira detrás de la escena y deja la pantalla para las tres
     ideas, que salen encima de él. */
  #porquepc.pq-revela .pq-escena {
    position: relative;
    display: grid; grid-template-columns: 1fr;
    gap: var(--e5);
    padding: var(--e5) var(--e2);
    min-height: clamp(300px, 72vw, 430px);
    align-content: center;
    /* El cactus del fondo crece un 22% al despertar. Sin este recorte
       se salía de la sección y se montaba sobre lo de abajo: eso era lo
       que se veía "roto" después de presionar. */
    overflow: hidden;
  }
  #porquepc.pq-revela .pq-cactus {
    position: absolute; inset: 0; margin: auto;
    height: 92%; width: auto;
    max-width: 88%; max-height: 92%;
    object-fit: contain;
    z-index: 0;
    opacity: .16;
    animation: pqDespierta 1.1s var(--sal) both;
    pointer-events: none;
  }
  @keyframes pqDespierta {
    0%   { opacity: .95; transform: scale(1) rotate(0deg); }
    45%  { opacity: .55; transform: scale(1.06) rotate(-4deg); }
    100% { opacity: .16; transform: scale(1.1) rotate(0deg); }
  }

  /* La invitación. Discreta: el cactus es el botón, esto solo lo dice. */
  .pq-toque {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: var(--e4) auto 0;
    padding: 14px 26px;
    min-height: 52px;
    border: 1px solid rgb(61 220 110 / .5);
    border-radius: 999px;
    background: rgb(61 220 110 / .08);
    color: var(--prisma);
    font-size: 19px;
    animation: pqLate 2.6s ease-in-out infinite;
  }
  .pq-toque[hidden] { display: none; }
  @keyframes pqLate {
    0%, 100% { opacity: .75; }
    50%      { opacity: 1; }
  }

  /* Antes de presionar no hay texto: solo el cactus y su invitación.
     Se quitan del flujo, no se transparentan, para que no dejen un
     hueco alto y vacío debajo. */
  #porquepc.pq-listo:not(.pq-revela) .pq-idea { display: none; }

  /* La info se lee siempre: el cactus es un extra, no un peaje. Quien
     presiona ve las tres ideas; quien no, sigue bajando y no se pierde
     nada del texto. */

  /* Centrado explícito de toda la columna. En una caja flexible
     `justify-self` no hace nada (es cosa de rejillas), así que el
     cactus se centra con márgenes automáticos, que sí valen en las
     dos. */
  .pq-identidad { width: 100%; align-items: center; }
  .pq-escena    { width: 100%; justify-items: center; }
  .pq-sub       { width: 100%; }
  .pq-cactus    { margin-inline: auto; }

  /* Ya encima del cactus: las tres ocupan su sitio desde el primer
     momento (así el bloque no da tres saltos) y aparecen de una en
     una. */
  #porquepc.pq-revela .pq-idea {
    position: relative; z-index: 1;
    text-align: center;
    border-top: 0;
    padding-top: 0;
    opacity: 0;
    transform: translateY(22px);
    /* Lenta y suave: cada idea se lee antes de que llegue la siguiente. */
    transition: opacity .55s var(--sal), transform .6s var(--sal);
  }
  #porquepc.pq-revela .pq-idea.on { opacity: 1; transform: none; }
  #porquepc.pq-revela .pq-cuerpo { margin-inline: auto; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce), (hover: none) and (prefers-reduced-motion: reduce) {
  .pq-cactus, .pq-toque { animation: none; }
  #porquepc.pq-revela .pq-cactus { animation: none; opacity: .16; }
  #porquepc.pq-revela .pq-idea { transition: none; }
}

/* Escenario (escritorio ancho con movimiento). Por debajo de 1100px
   no hay aire a los lados del cactus y se queda la lista. */
@media (min-width: 1100px) and (hover: hover) {
  #porquepc.pq-anima {
    min-height: calc(100svh - var(--nav-h));
    display: grid; align-content: center;
    padding-block: var(--e4) var(--e5);
  }
  #porquepc.pq-anima .sec-cab { margin-bottom: var(--e3); }
  #porquepc.pq-anima .pq { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--e7); }
  #porquepc.pq-anima .pq-sub { margin-bottom: var(--e3); }
  /* Ambos títulos viven en su respectiva columna y arrancan a la par,
     sin levantar el canvas encima de "Quiénes somos". */
  #porquepc.pq-anima .pq-identidad {
    margin-top: 0;
    padding-top: calc(var(--e2) + var(--e4) + 1px);
  }
  #porquepc.pq-anima .pq-escena {
    display: block; position: relative;
    height: clamp(430px, calc(100svh - var(--nav-h) - 250px), 600px);
  }
  /* La lente recorta arriba y abajo: al acercarse, el cactus no
     invade el subtítulo ni el resto de la página. Cada idea que
     aparece acerca un poco más la vista (data-paso, js/identidad.js). */
  #porquepc.pq-anima .pq-lente {
    display: block; position: absolute; inset: 0; overflow: hidden;
    /* La lente es la cámara: con perspectiva, acercar es avanzar en Z y
       los giros se leen en profundidad. */
    perspective: 1100px;
    perspective-origin: 50% 42%;
  }
  #porquepc.pq-anima .pq-cactus {
    position: absolute; left: 50%; top: 50%;
    height: 94%;
    transform:
      translate(-50%, -50%)
      translateZ(var(--pq-z, 0px))
      rotateY(var(--pq-giro-y, 0deg))
      rotateX(var(--pq-giro-x, 0deg))
      rotateZ(var(--pq-giro, 0deg));
    transform-origin: 50% 45%;
    filter: brightness(var(--pq-luz, 1)) drop-shadow(0 24px 30px rgb(0 0 0 / .45));
    backface-visibility: hidden;
    will-change: transform;
    transition:
      transform 1.5s cubic-bezier(.2, .75, .18, 1),
      filter 1.5s cubic-bezier(.2, .75, .18, 1);
  }
  /* Cactus 3D real (js/cactus-3d.js). Mientras no está listo, o si el
     navegador no tiene WebGL, se ve la imagen con el movimiento de abajo.
     "lighten" funde el fondo del lienzo con el de la página. */
  #porquepc.pq-anima .pq-3d {
    display: block; position: absolute; inset: 0;
    pointer-events: none;
    mix-blend-mode: lighten;
    opacity: 0; transition: opacity .6s var(--sal);
  }
  #porquepc.pq-anima.pq-con-3d .pq-3d { opacity: 1; }
  #porquepc.pq-anima.pq-con-3d .pq-cactus { opacity: 0; }
  /* Cada paso la cámara se acerca un poco y el cactus gira en 3D:
     derecha, izquierda, derecha. El acercamiento total (~18 %) es el
     mismo de antes; lo que cambia es que ahora se siente profundidad. */
  #porquepc[data-paso="1"] { --pq-z: 55px;  --pq-giro-y: 24deg;  --pq-giro-x: 6deg;  --pq-giro: 3deg;  --pq-luz: 1.06; }
  #porquepc[data-paso="2"] { --pq-z: 110px; --pq-giro-y: -24deg; --pq-giro-x: -4deg; --pq-giro: -3deg; --pq-luz: 1.1; }
  #porquepc[data-paso="3"] { --pq-z: 165px; --pq-giro-y: 16deg;  --pq-giro-x: 8deg;  --pq-giro: 2deg;  --pq-luz: 1.14; }
  #porquepc.pq-anima .pq-idea {
    position: absolute; z-index: 1; width: min(22%, 178px);
    text-shadow: 0 1px 10px var(--noche), 0 0 3px var(--noche);
    background: linear-gradient(90deg, rgb(5 7 12 / .86) 65%, rgb(5 7 12 / 0));
    padding: var(--e1) 0 var(--e1) var(--e3);
    border: 0; border-left: 2px solid var(--prisma);
    opacity: 0; visibility: hidden;
    transform: translate3d(0, 16px, 0);
    filter: blur(6px);
    transition:
      opacity .8s var(--sal),
      transform .9s var(--sal),
      filter .8s var(--sal),
      visibility 0s linear .9s;
  }
  #porquepc.pq-anima .pq-idea.on {
    opacity: 1; visibility: visible; transform: none; filter: none;
    transition-delay: 0s;
  }
  #porquepc.pq-anima .pq-frase { font-size: clamp(18px, 1.5vw, 22px); }
  #porquepc.pq-anima .pq-cuerpo { font-size: 14px; color: var(--tiza); }
  /* Una esquina para cada idea, siempre a los lados del cactus */
  #porquepc.pq-anima .pq-idea[data-pqp="prisma"] {
    top: 16px;
    left: clamp(42px, 5vw, 72px);
  }
  #porquepc.pq-anima .pq-idea[data-pqp="cactus"] {
    top: 50%; right: -24px; margin-top: -4.5em;
    padding: var(--e1) var(--e3) var(--e1) 0;
    border-left: 0; border-right: 2px solid var(--prisma);
    text-align: right;
    background: linear-gradient(270deg, rgb(5 7 12 / .86) 65%, rgb(5 7 12 / 0));
  }
  #porquepc.pq-anima .pq-idea[data-pqp="cactus"].on { transform: none; }
  #porquepc.pq-anima .pq-idea[data-pqp="juntos"] {
    bottom: 16px;
    left: clamp(42px, 5vw, 72px);
  }
}


@media (max-width: 760px) {
  .pq { grid-template-columns: 1fr; gap: var(--e6); }
}

/* ══════════════════════════════════════════════════════════
   DEMOS — acordeón por rubro
   ══════════════════════════════════════════════════════════ */
.pf-intro { margin-bottom: var(--e6); }
.pf-intro .cuerpo {
  max-width: 860px;
  margin: 0 auto var(--e4);
  text-align: center;
}
.pf-cta { margin-top: var(--e6); }
.bd-resumen {
  display: flex;
  justify-content: flex-end;
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--linea);
}

.bd-cat { border-top: 1px solid var(--linea); }
.bd-resumen + #bdAcordeon .bd-cat:first-child { border-top: 0; }
.bd-cat:last-child { border-bottom: 1px solid var(--linea); }
#bdAcordeon { overflow-anchor: none; }

.bd-cat-cab {
  display: flex; align-items: center; gap: var(--e3);
  width: 100%;
  padding: var(--e4) 0;
  text-align: left;
  min-height: 60px;
  transition: color .18s var(--sal);
}
.bd-cat-cab:hover { color: var(--sol); }
.bd-cat-cuadro { width: 14px; height: 14px; flex: 0 0 auto; background: var(--rc, var(--tiza-3)); border-radius: 1px; }
.bd-cat-ico { width: 24px; height: 24px; flex: 0 0 auto; color: var(--tiza-2); }
.bd-cat-nm { font-size: 18px; font-weight: 700; font-stretch: 106%; flex: 1 1 auto; }
.bd-cat-n {
  font-family: 'Teko', sans-serif; font-size: 12px;
  color: var(--tiza-3); flex: 0 0 auto;
}
.bd-cat-chev {
  width: 20px; height: 20px; flex: 0 0 auto; color: var(--prisma);
  transition: transform .34s var(--sal);
}
.bd-cat.open .bd-cat-chev { transform: rotate(180deg); }
.bd-cat.open .bd-cat-cab { color: var(--tiza); }

/* grid-template-rows 0fr→1fr anima el alto sin medirlo ni provocar
   recálculo de disposición, y de paso el JS deja de tener que leer
   scrollHeight y recalcularlo al girar el teléfono. */
.bd-cat-cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--sal);
}
.bd-cat.open .bd-cat-cuerpo { grid-template-rows: 1fr; }
.bd-cat-cuerpo > .bd-cat-cuerpo-in { min-height: 0; overflow: hidden; }
/* El aire de abajo va en el HIJO, no en la caja recortada: el
   padding propio de un elemento con overflow:hidden no se recorta,
   así que una categoría cerrada se quedaba en 26px en vez de 0 y
   dejaba una franja muerta bajo cada rubro plegado. */
.bd-cat-cuerpo-in > * { margin-bottom: var(--e5); }

/* Tarjetas sueltas, negras y redondeadas, separadas por aire: el borde
   iluminado necesita espacio para no pisar a la vecina. (Antes eran
   celdas de una lámina cuadriculada, separadas por reglas de 1px.) */
.bd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--e4);
  padding: 8px;   /* aire para la escala del hover dentro del acordeón */
}
.bd-card {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--e4);
  border-radius: var(--r3);
  /* Borde fijo del color del rubro, tenue: es el código de color que
     queda en teléfono, donde no hay mouse que ilumine nada. */
  border: 1px solid rgb(var(--rc-rgb, 61 220 110) / .22);
  background: var(--noche-honda);
  text-decoration: none;
  transition: transform .28s var(--sal), border-color .28s ease;
}
.bd-card-nm { font-size: 16.5px; font-weight: 700; line-height: 1.25; }
.bd-card-tx {
  font-size: 14px; color: var(--tiza-2); line-height: 1.45;
  /* dos líneas siempre: descripciones de largo distinto descuadraban
     el bloque de texto de cada fila */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.45em);
}
.bd-card-ir {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 650; color: var(--sol);
  margin-top: 2px;
}
.bd-card-ir svg { width: 15px; height: 15px; transition: transform .28s var(--sal); }
.bd-card:hover .bd-card-ir { color: var(--sol-alto); }
.bd-card:hover .bd-card-ir svg { transform: translateX(3px); }

/* La captura, abajo. El hueco existe desde el primer pintado (3:2), así
   que no hay salto cuando la imagen entra. */
.bd-card-img {
  position: relative;
  display: block;
  margin-top: var(--e3);
  aspect-ratio: 3 / 2;
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--noche-alta);
}
.bd-card-img img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  /* entra con un fundido corto cuando termina de cargar; el hueco ya
     estaba reservado, así que no mueve nada */
  animation: bdEntra .45s ease both;
}
@keyframes bdEntra { from { opacity: 0; } to { opacity: 1; } }

/* ── Borde iluminado que sigue al mouse ──────────────────────
   Tomado del border-glow de Magic Bento (React Bits): un degradado
   radial colocado en --glow-x / --glow-y y recortado con máscaras que
   se excluyen, para que solo pinte el borde. Sin partículas, ni
   inclinación, ni imán, ni onda de clic: eso clonaba nodos y dejaba
   animaciones infinitas por tarjeta.
   La intensidad (--glow) la escribe js/borde-glow.js según la
   distancia del mouse. */
.bd-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2.5px;
  background: radial-gradient(280px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgb(var(--rc-rgb, 61 220 110) / 1),
    rgb(var(--rc-rgb, 61 220 110) / .45) 46%,
    transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: var(--glow, 0);
  transition: opacity .25s ease;
  pointer-events: none;
}

/* Hover: la tarjeta se despega. Solo donde hay mouse de verdad. */
@media (hover: hover) and (pointer: fine) {
  .bd-card:hover {
    transform: scale(1.015);
    border-color: rgb(var(--rc-rgb, 61 220 110) / .38);
    z-index: 2;
  }
}
@media (pointer: coarse) {
  .bd-card:active { transform: scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
  .bd-card, .bd-card::after, .bd-card-img img { transition: none; }
  .bd-card:hover { transform: none; }
}

/* Sobre la captura, no en el flujo: así no baja el título de su
   tarjeta ni descuadra la fila. */
.bd-tag {
  position: absolute; left: 8px; bottom: 8px;
  font-family: 'Teko', sans-serif;
  font-size: 10.5px; letter-spacing: .05em;
  color: var(--arena);
  background: rgba(2, 3, 7, .82);
  border: 1px solid rgba(221, 164, 94, .4);
  border-radius: 1px;
  padding: 3px 6px;
}

/* ══════════════════════════════════════════════════════════
   BLOQUES DE DOS COLUMNAS (CactusWork, portal, registro)
   ══════════════════════════════════════════════════════════ */
.dos { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: var(--e7); align-items: start; }
@media (max-width: 899px), (hover: none) { .dos { grid-template-columns: 1fr; gap: var(--e5); } }

/* Panel: plano levantado con regla. Cero sombra. */
.panel {
  background: var(--noche-alta);
  border: 1px solid var(--linea);
  border-radius: var(--r3);
  padding: var(--e6) var(--e5);
}
.panel-t {
  display: flex; align-items: center; gap: var(--e2);
  font-size: 21px; font-weight: 700; font-stretch: 106%;
  margin-bottom: var(--e3);
}
.panel-t svg { width: 24px; height: 24px; color: var(--arena); flex: 0 0 auto; }
.panel p { font-size: 15.5px; color: var(--tiza-2); margin-bottom: var(--e4); max-width: 52ch; }
.panel-pie { font-size: 13.5px; color: var(--tiza-3); margin-top: var(--e4); margin-bottom: 0; }

/* CactusWork: el rayo verde lo firma, con un campo de color
   que ocupa la franja superior del panel — no un border-left
   de color, que es el atajo. */
.panel-chamba { border-color: rgba(61, 220, 110, .3); }
.panel-chamba .franja {
  height: 6px; margin: calc(var(--e6) * -1) calc(var(--e5) * -1) var(--e5);
  border-radius: var(--r3) var(--r3) 0 0;
  background: var(--ray-4);
}

/* ══════════════════════════════════════════════════════════
   SERVICIOS
   ══════════════════════════════════════════════════════════ */
/* Sección más corta: menos relleno que el resto de las láminas. */
#servicios { padding-block: var(--e7); }
.sv-lead { margin-bottom: var(--e5); }
.sv-pie { margin-bottom: var(--e5); }

/* Dos columnas: texto + lista a la izquierda, visor a la derecha. */
.sv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  column-gap: var(--e8);
  align-items: center;
}

/* ── Lista tipo menú ── */
.sv-lista { list-style: none; margin: 0 0 var(--e5); padding: 0; border-top: 1px solid var(--linea); }
.sv-item {
  display: flex; align-items: center; gap: var(--e4);
  padding: 9px 4px;
  border-bottom: 1px solid var(--linea);
  color: var(--tiza-2);
  text-decoration: none;
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; font-stretch: 106%;
  letter-spacing: -.01em;
  transition: color .25s var(--sal);
}
.sv-item-foto { display: none; }
.sv-num {
  font-family: 'Teko', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: var(--tiza-3);
  transition: color .25s var(--sal);
}
/* El nombre gira sobre su eje: dos copias apiladas en una ventana; al
   pasar el mouse las dos suben una línea. */
.sv-giro {
  display: inline-block; position: relative;
  height: 1.25em; line-height: 1.25em;
  overflow: hidden;
}
.sv-giro > span { display: block; transition: transform .45s var(--sal); }
.sv-ir {
  width: 20px; height: 20px; margin-left: auto;
  color: var(--prisma);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .25s var(--sal), transform .35s var(--sal);
}
.sv-item.on, .sv-item:hover, .sv-item:focus-visible { color: var(--tiza); }
.sv-item.on .sv-num { color: var(--prisma); }
.sv-item:hover .sv-giro > span,
.sv-item:focus-visible .sv-giro > span { transform: translateY(-100%); }
.sv-item.on .sv-ir, .sv-item:hover .sv-ir, .sv-item:focus-visible .sv-ir { opacity: 1; transform: none; }
.sv-item:focus-visible { outline: 2px solid var(--prisma); outline-offset: 2px; }

/* ── Visor: capturas apiladas, rotadas y recortadas ── */
/* ── Visor: la mesa de capturas ──────────────────────────────
   Como en "Scrollaroids" (Codrops): todas las capturas están sobre una
   mesa, cada una algo girada, y una cámara con zoom viaja de una a otra
   rotando levemente la vista; las vecinas asoman por los bordes. Acá
   la mueve el hover, no el scroll.
   La ventana manda por ALTO (una captura vertical no puede crecer más
   que la pantalla) y el ancho sale de la proporción 4:5. */
.sv-visor {
  position: relative;
  height: max(420px, min(560px, calc(100svh - var(--nav-h) - 96px)));
  aspect-ratio: 4 / 5;
  justify-self: center;
}
/* Halo del color del servicio activo, detrás de la ventana. */
.sv-visor::before {
  content: ""; position: absolute; inset: -10%;
  background: radial-gradient(closest-side, var(--sv-halo, var(--prisma)), transparent 72%);
  opacity: .16;
  transition: background .6s ease;
  pointer-events: none;
  display: none;
}
.sv-ventana {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: var(--r3);
  border: 1px solid var(--linea);
  background: radial-gradient(120% 90% at 50% 40%, var(--noche-alta), var(--noche-honda));
}
/* La cámara: .sv-pov rota y acerca alrededor del centro de la ventana;
   .sv-mesa se desplaza para dejar la carta elegida en ese centro. */
.sv-pov { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.sv-mesa { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sv-carta {
  position: absolute; left: 0; top: 0; margin: 0;
  width: var(--carta-w, 240px);
  padding: 3.5% 3.5% 0;
  background: var(--noche-mas);
  border: 1px solid var(--linea-viva);
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.sv-carta img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 430 / 770; object-fit: cover; object-position: top center;
}
/* Pie tipo polaroid: número y nombre del servicio. */
.sv-carta figcaption {
  padding: 9px 2px 11px;
  font-family: 'Teko', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--tiza-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv-carta figcaption span { color: var(--prisma); margin-right: 4px; }
/* Luminosidad pareja sobre fondo negro: las claras bajan un poco y las
   oscuras suben, sin animar el filtro. */
.sv-carta img, .sv-item-foto { filter: brightness(.9); }
.sv-carta img.oscura, .sv-item-foto.oscura { filter: brightness(1.08); }

/* ── Móvil: carrusel deslizable, una tarjeta por servicio ── */
@media (max-width: 899px), (hover: none) {
  .sv-grid { display: block; }
  .sv-visor { display: none; }
  /* Una sola columna angosta: el texto alineado a la izquierda deja el
     bloque descolgado del carrusel, que va centrado. */
  #servicios .sec-cab,
  #servicios .sv-lead,
  #servicios .sv-pie { text-align: center; }
  #servicios .sv-lead,
  #servicios .sv-pie { margin-inline: auto; max-width: 42ch; }
  #servicios .btn-sol { display: flex; margin-inline: auto; width: fit-content; }
  .sv-lista {
    /* La tarjeta se mide DESDE EL ALTO disponible, no desde el ancho:
       así entra entera en una sola pantalla, sin recortar la captura.
       La foto es 430×770, de ahí sale el ancho. */
    --sv-foto: clamp(190px, 42svh, 320px);
    --sv-card: calc(var(--sv-foto) * 430 / 770);

    display: flex; gap: var(--e2);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* El dedo puede hacer las dos cosas: llevar el carrusel de lado y
       seguir bajando por la página. Sin esto el gesto vertical que
       empieza sobre una tarjeta se lo queda el carrusel y la página
       parece trabada. */
    touch-action: pan-x pan-y;
    /* Al llegar al último servicio el rebote no se contagia a la página
       (hacia los lados), pero el scroll vertical sigue pasando. */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    margin-inline: calc(var(--e4) * -1);
    /* Los costados dejan sitio para que la primera y la última tarjeta
       también puedan quedar centradas. */
    padding: var(--e3) calc((100vw - var(--sv-card)) / 2) var(--e4);
    border-top: 0;
    /* La profundidad va en cada tarjeta (js/servicios.js) y no acá: con
       perspective en el contenedor las dos se multiplican y las de los
       extremos se deforman de más. */
  }
  .sv-lista::-webkit-scrollbar { display: none; }
  .sv-lista li {
    flex: 0 0 var(--sv-card);
    scroll-snap-align: center;
    /* Un empujón = un servicio. Sin esto, con tarjetas angostas un
       arrastre rápido se salta tres de golpe y el carrusel se siente
       nervioso. */
    scroll-snap-stop: always;
    /* Archivero: la tarjeta que sale gira sobre su canto interior, como
       una ficha que se voltea dentro de la gaveta. js/servicios.js
       cambia este origen según el lado hacia el que se va. */
    transform-origin: center center;
    will-change: transform;
  }
  .sv-item {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--linea-viva);
    border-radius: var(--r3);
    background: var(--noche-alta);
    color: var(--tiza);
    /* La tarjeta es angosta porque su alto manda: el rótulo baja de
       tamaño para no partirse en tres líneas. */
    font-size: 15.5px;
  }
  /* El rótulo va arriba, sobre la imagen: se lee el nombre del servicio
     antes de mirar la captura, no después. */
  .sv-item-foto {
    order: 1;
    display: block;
    width: 100%;
    height: var(--sv-foto);
    object-fit: contain;      /* la captura entra completa, no se recorta */
    object-position: top center;
    border-radius: 0;
  }
  .sv-num {
    order: -1;
    padding: 10px 12px 0;
    color: var(--prisma);
  }
  .sv-giro {
    order: 0;
    padding: 0 12px 10px;
    height: auto;
    line-height: 1.15;
  }
  /* El giro del rótulo es un gesto de mouse. En una pantalla táctil el
     :hover se queda pegado después de tocar, y el nombre se iba hacia
     arriba de su ventana recortada: la tarjeta quedaba sin título. Acá
     el rótulo no se mueve y nada lo recorta. */
  .sv-giro { overflow: visible; }
  .sv-giro > span { transform: none !important; }
  .sv-giro > span + span { display: none; }
  .sv-item .sv-ir { display: none; }
  .sv-item.on .sv-num { color: var(--prisma); }

  /* ── Mando: flechas y puntos ── */
  .sv-mando {
    display: flex; align-items: center; justify-content: center;
    gap: var(--e4);
    margin-bottom: var(--e5);
  }
  /* Sin JS el mando no serviría de nada: queda oculto y el carrusel
     sigue siendo una lista que se arrastra con el dedo. */
  .sv-mando[hidden] { display: none; }
  .sv-flecha {
    width: 40px; height: 40px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1px solid var(--linea-viva);
    border-radius: 50%;
    color: var(--tiza-2);
    background: var(--noche-alta);
    transition: color .2s var(--sal), border-color .2s var(--sal), opacity .2s var(--sal);
  }
  .sv-flecha svg { width: 18px; height: 18px; }
  .sv-ant svg { transform: scaleX(-1); }   /* una sola flecha en el sprite */
  .sv-flecha:active { color: var(--prisma); border-color: var(--prisma); }
  .sv-flecha[disabled] { opacity: .3; pointer-events: none; }

  .sv-puntos { display: flex; align-items: center; gap: 7px; }
  .sv-punto {
    width: 7px; height: 7px; padding: 0;
    border-radius: 50%;
    background: var(--linea-viva);
    transition: background-color .3s var(--sal), width .3s var(--sal);
  }
  /* El punto activo se estira: dice en qué paso vas sin añadir números. */
  .sv-punto.on { width: 20px; border-radius: 4px; background: var(--prisma); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-giro > span, .sv-ir { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   PROYECTOS PROPIOS (CactusWork + taller Ubuntu)
   ══════════════════════════════════════════════════════════ */
.proy-intro { margin: 0 auto var(--e6); text-align: center; }
.proy-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5); align-items: stretch;
}
@media (max-width: 899px), (hover: none) { .proy-grid { grid-template-columns: 1fr; } }

/* Columna flexible: el botón se asienta al pie aunque un panel
   tenga más texto que el otro. */
.proy-grid .panel {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: transparent;
  border-color: rgba(61, 220, 110, .24);
  transition: border-color .45s var(--sal), transform .45s var(--sal);
}
.proy-grid .panel:is(:hover, :focus-within) {
  border-color: rgba(61, 220, 110, .72);
  transform: scale(1.012);
}
.proy-grid .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  padding: 2.5px;
  background: radial-gradient(280px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgb(61 220 110 / 1),
    rgb(61 220 110 / .45) 46%,
    transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: var(--glow, 0);
  transition: opacity .25s ease;
  pointer-events: none;
}
.proy-contenido {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: width .55s var(--sal2), margin-left .55s var(--sal2);
}
.proy-contenido > .btn { margin-top: auto; }
.proy-grid .panel-chamba .franja { align-self: stretch; flex: 0 0 auto; }
.proy-media {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: calc(100% + (var(--e5) * 2));
  max-width: none;
  height: 0;
  margin: var(--e4) calc(var(--e5) * -1) calc(var(--e6) * -1);
  overflow: hidden;
  border: 0;
  border-top: 1px solid rgba(61, 220, 110, .34);
  border-radius: 0 0 var(--r3) var(--r3);
  opacity: 0;
  filter: saturate(.9) brightness(.88);
  pointer-events: none;
  transform: translateY(22px);
  transition: height .62s var(--sal2), opacity .42s var(--sal), transform .62s var(--sal2), filter .42s var(--sal);
}
.proy-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: var(--noche-honda);
}
.panel-ubuntu .proy-media {
  border-color: rgba(221, 164, 94, .4);
}
.proy-grid .panel-ubuntu { min-height: 400px; align-self: start; }
@media (hover: hover) and (min-width: 700px) {
  .proy-grid .panel:is(:hover, :focus-within) .proy-media {
    height: clamp(180px, 18vw, 240px);
    opacity: 1;
    filter: saturate(1) brightness(1);
    transform: none;
  }
}
@media (max-width: 699px), (hover: none) {
  .proy-media { display: none; }
  .proy-grid .panel { min-height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .proy-grid .panel, .proy-grid .panel::after, .proy-media, .proy-contenido { transition: none; }
  .proy-grid .panel:hover { transform: none; }
}
.panel-t em { font-style: italic; color: var(--prisma); }

.ubuntu-acot { display: block; margin: calc(var(--e2) * -1) 0 var(--e4); }
.panel .proy-cita {
  font-size: clamp(17px, 2.2vw, 20px); font-style: italic;
  color: var(--tiza-2);
  margin-bottom: var(--e5);
  max-width: 44ch;
}
.proy-cita b { font-style: normal; color: var(--ray-4); }
.ubuntu-lista { display: grid; gap: var(--e2); margin-bottom: var(--e5); }

/* ══════════════════════════════════════════════════════════
   CONTACTO
   ══════════════════════════════════════════════════════════ */
.reg-tx { max-width: 720px; margin: 0 auto var(--e5); }
.reg-intro { max-width: 820px; margin-inline: auto; text-align: center; }
.reg-intro .sec-cab { justify-content: center; text-align: center; }
#registro .dos {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e6);
}
#regForm {
  width: min(100%, 760px);
  margin-inline: auto;
  background: transparent;
  border-color: rgb(61 220 110 / .28);
}
#regForm .form-intro {
  text-align: left;
  font-size: 21px;
  margin-bottom: var(--e5);
}
#regForm .campo input,
#regForm .campo select,
#regForm .campo textarea {
  background-color: transparent;
  border-color: rgb(61 220 110 / .34);
}
#regForm .campo select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color-scheme: dark;
  cursor: pointer;
  background-color: var(--noche-honda);
  letter-spacing: .015em;
  word-spacing: .12em;
  /* Misma señal Prisma que el borde; reemplaza la flecha gris nativa. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233ddc6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e3) center;
  background-size: 12px 8px;
  padding-right: var(--e6);
}
#regForm .campo select::-ms-expand { display: none; }
#regForm .campo select option {
  color: var(--tiza);
  background-color: var(--noche-honda);
  padding: 10px 14px;
  line-height: 1.65;
}
#regForm .campo select option[value=""] { color: var(--tiza-3); }
#regForm .campo input:hover,
#regForm .campo select:hover,
#regForm .campo textarea:hover { border-color: rgb(61 220 110 / .68); }
#regForm .campo select:hover {
  background-color: transparent;
  border-color: var(--prisma);
}
#regForm .campo input:focus,
#regForm .campo select:focus,
#regForm .campo textarea:focus {
  border-color: var(--prisma);
  background-color: rgb(61 220 110 / .035);
}

/* Selector propio: evita el menú azul que Windows impone al <select>. */
#regForm .select-pc { position: relative; }
#regForm .campo select.select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#regForm .select-pc-btn {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: 14px var(--e3);
  color: var(--tiza-3);
  background: var(--noche-honda);
  border: 1px solid rgb(61 220 110 / .34);
  border-radius: var(--r2);
  text-align: left;
  letter-spacing: .015em;
  word-spacing: .12em;
  transition: border-color .18s var(--sal), color .18s var(--sal);
}
#regForm .select-pc-btn.tiene-valor { color: var(--tiza); }
#regForm .select-pc-btn:hover,
#regForm .select-pc-btn:focus-visible,
#regForm .select-pc.abierto .select-pc-btn {
  color: var(--tiza);
  background: transparent;
  border-color: var(--prisma);
}
#regForm .select-pc-flecha {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-right: 2px solid var(--prisma);
  border-bottom: 2px solid var(--prisma);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--sal);
}
#regForm .select-pc.abierto .select-pc-flecha { transform: translateY(3px) rotate(225deg); }
#regForm .select-pc-lista {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 290px;
  overflow-y: auto;
  padding: var(--e1);
  background: var(--noche-honda);
  border: 1px solid var(--prisma);
  border-radius: var(--r2);
}
#regForm .select-pc-lista[hidden] { display: none; }
#regForm .select-pc-opcion {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--tiza-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r1);
  text-align: left;
  line-height: 1.4;
  letter-spacing: .015em;
  word-spacing: .12em;
}
#regForm .select-pc-opcion:hover,
#regForm .select-pc-opcion:focus-visible {
  color: var(--tiza);
  background: transparent;
  border-color: var(--prisma);
  outline: none;
}
#regForm .select-pc-opcion[aria-selected="true"] {
  color: var(--prisma);
  border-color: rgb(61 220 110 / .42);
}
#regForm .opt {
  color: var(--arena);
  background: transparent;
  border-color: rgb(221 164 94 / .42);
}
#regForm .opt:hover,
#regForm .opt:focus-visible {
  color: var(--arena-clara, var(--arena));
  border-color: var(--arena);
  background: rgb(221 164 94 / .08);
  outline: none;
}
#regForm .opt.sel {
  color: var(--noche);
  border-color: var(--arena);
  background: var(--arena);
}
.reg-acciones { display: flex; align-items: stretch; gap: var(--e2); }
.reg-consentimiento {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 var(--e3); color: var(--tiza-2);
  font-size: 13.5px; line-height: 1.45; cursor: pointer;
}
.reg-consentimiento input { width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--prisma); }
.reg-consentimiento a { color: var(--tiza); text-underline-offset: 3px; }
.reg-consentimiento a:hover { color: var(--prisma); }
#regForm .reg-acciones .btn-ancho { width: auto; flex: 1 1 auto; }
.reg-acciones .btn-wa-ico { flex: 0 0 48px; }
.form-intro {
  font-size: 17px; font-weight: 700; font-stretch: 106%;
  color: var(--tiza);
}
.panel p.form-intro { color: var(--tiza); margin-bottom: var(--e4); }
/* Dice por qué el botón está apagado; se oculta cuando ya se puede enviar. */
.panel p.form-ayuda { font-size: 13.5px; color: var(--tiza-3); margin: var(--e2) 0 0; }
.panel p.form-ayuda a { color: var(--tiza-2); text-underline-offset: 3px; }
.panel p.form-ayuda a:hover { color: var(--sol); }
.ubuntu-it { display: flex; align-items: center; gap: var(--e3); font-size: 15px; color: var(--tiza-2); }
.ubuntu-it svg { width: 19px; height: 19px; color: var(--arena); flex: 0 0 auto; }
.ubuntu-it b { color: var(--tiza); }

/* ── Credencial que celebra un registro confirmado ─────────
   La sección no ocupa ni un píxel antes del envío. Al abrirse,
   gana una pantalla completa entre Contacto y el pie. */
.lanyard-reveal {
  position: relative;
  height: 0;
  min-height: 0;
  overflow: clip;
  opacity: 0;
  border-top: 1px solid transparent;
  background: transparent;
  transition: height 1s var(--sal2), opacity .6s var(--sal), border-color .6s var(--sal);
}
.lanyard-reveal[hidden] { display: none; }
.lanyard-reveal.is-open {
  height: 100svh;
  min-height: 620px;
  opacity: 1;
  border-top-color: rgb(61 220 110 / .28);
}
.lanyard-wrapper {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(1);
  transform-origin: center;
  perspective: 1100px;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}
.lanyard-cuerda {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lanyard-card {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: clamp(190px, 20vw, 238px);
  aspect-ratio: .72;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px 22px 22px;
  overflow: hidden;
  border: 1px solid rgb(61 220 110 / .72);
  border-radius: var(--r3);
  background: var(--noche-alta);
  color: var(--tiza);
  cursor: grab;
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  touch-action: none;
}
.lanyard-card:active { cursor: grabbing; }
.lanyard-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--prisma);
}
.lanyard-pin {
  position: absolute;
  top: 17px;
  left: 50%;
  width: 48px;
  height: 10px;
  border: 1px solid var(--linea-viva);
  border-radius: 8px;
  background: var(--noche-honda);
  transform: translateX(-50%);
}
.lanyard-marca {
  display: grid;
  justify-items: center;
  gap: var(--e3);
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
}
.lanyard-marca .marca-ico { width: 82px; height: 82px; }
.lanyard-marca img.marca-ico { object-fit: contain; }
.lanyard-marca .marca-tx {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
.lanyard-marca .marca-tx .c { color: var(--prisma); }
.lanyard-card-pie {
  display: grid;
  gap: 3px;
  padding-top: var(--e4);
  border-top: 1px solid var(--linea);
}
.lanyard-card-pie .acot { color: var(--arena); }
.lanyard-card-pie strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--tiza);
  font-size: 16px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lanyard-pista {
  position: absolute;
  left: 50%;
  bottom: var(--e5);
  transform: translateX(-50%);
  color: var(--tiza-3);
  opacity: 0;
  transition: opacity .45s var(--sal) 1.2s;
}
.lanyard-reveal.is-open .lanyard-pista { opacity: 1; }
@media (max-width: 620px), (hover: none) {
  .lanyard-reveal.is-open, .lanyard-wrapper { min-height: 560px; }
  .lanyard-card { padding: 39px 18px 18px; }
  .lanyard-marca .marca-ico { width: 68px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .lanyard-reveal { transition: none; }
  .lanyard-pista { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   PIE
   ══════════════════════════════════════════════════════════ */
.pie {
  background: var(--noche-honda);
  border-top: 1px solid var(--linea);
  padding-block: var(--e7);
}
.pie-in { display: flex; flex-wrap: wrap; gap: var(--e6); justify-content: space-between; align-items: flex-start; }
.pie-nm { color: var(--arena); font-size: 27px; font-weight: 800; font-stretch: 112%; letter-spacing: -.025em; }
.pie-nm em { font-style: italic; color: var(--prisma); }
.pie-loc {
  margin-top: var(--e2);
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 400 !important;
}
.pie-lema {
  margin-top: var(--e2);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--tiza-3);
}
.pie-cols { display: flex; flex-wrap: wrap; gap: var(--e6); }
.pie-col { display: grid; gap: 0; align-content: start; }
.pie-col .acot {
  color: var(--tiza-2);
  margin-bottom: var(--e1);
  font-size: 16px;
}
/* 40px de alto minimo: en el pie tambien se toca con el dedo. */
.pie-col a { display: inline-flex; align-items: center; min-height: 40px;
             font-family: 'Teko', 'Poppins', sans-serif;
             font-size: 19px; color: var(--tiza-2); text-decoration: none; }
.pie-col a:hover { color: var(--sol); }
.pie-col a.pie-interno { color: var(--tiza-3); }
.pie-col a.pie-interno:hover { color: var(--sol); }

/* ══════════════════════════════════════════════════════════
   RECORRIDO GUIADO
   ══════════════════════════════════════════════════════════ */
/* La entrada de la guía vive en la esquina derecha del header: siempre
   está localizable y nunca tapa contenido de la página. */
.guia-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 40px;
  padding: 9px var(--e3);
  background: transparent;
  border: 1px solid rgb(61 220 110 / .48);
  border-radius: var(--r2);
  color: var(--tiza-2);
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: border-color .2s var(--sal), color .2s var(--sal),
              opacity .24s var(--sal), visibility .24s, transform .24s var(--sal);
}
body.pasado-hero .guia-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);
}
.guia-btn:hover,
.guia-btn:focus-visible {
  color: var(--tiza);
  border-color: var(--prisma);
}
.guia-btn svg { width: 17px; height: 17px; color: var(--arena); }
.guia-btn.corriendo { border-color: var(--arena); color: var(--arena); }
.guia-btn.corriendo svg { color: var(--prisma); }
@media (max-width: 620px), (hover: none) {
  .guia-btn { width: 42px; height: 42px; padding: 0; }
  .guia-btn span { display: none; }
}

.guia-pista {
  position: fixed;
  z-index: 260;
  width: min(360px, calc(100vw - 24px));
  padding: var(--e4);
  overflow: hidden;
  background: var(--noche-alta);
  border: 1px solid var(--prisma);
  border-radius: var(--r3);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s var(--sal), visibility .26s;
}
.guia-pista::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--arena);
}
.guia-pista.on { opacity: 1; visibility: visible; }
.guia-pista .acot { color: var(--prisma); margin-bottom: var(--e1); }
.guia-titulo {
  display: block;
  margin-bottom: var(--e2);
  color: var(--arena);
  font-size: 17px;
  line-height: 1.25;
}
.guia-pista p { font-size: 14.5px; color: var(--tiza); margin-bottom: var(--e4); }
.guia-nav { display: flex; flex-wrap: wrap; gap: var(--e2); }
.guia-nav #guiaSig {
  color: var(--noche);
  background: var(--prisma);
  border-color: var(--prisma);
}
.guia-nav #guiaSig:hover { color: var(--prisma); background: transparent; }
.guia-nav #guiaAnt { color: var(--arena); border-color: rgb(221 164 94 / .55); }
.guia-nav #guiaAnt:hover { border-color: var(--arena); }
.guia-nav #guiaFin { color: var(--tiza-2); }

/* El foco del recorrido conserva el verde principal; la acotación y
   los controles secundarios usan arena. */
.guia-foco {
  outline: 2px solid var(--prisma);
  outline-offset: 6px;
  border-radius: var(--r2);
}

/* ══════════════════════════════════════════════════════════
   VITRINA
   ══════════════════════════════════════════════════════════ */
.vit-intro { margin-top: var(--e2); font-size: 15px; }

/* Cada negocio es un banner: su logo en un sello redondo con el color
   de su franja, el nombre, el rubro y la acción. Planos, sin sombra. */
.vit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--e3);
}
.vit-banner {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--e4);
  align-items: center;
  padding: var(--e5) var(--e4) var(--e4);
  background: var(--noche);
  border: 1px solid var(--linea);
  border-radius: var(--r3);
  overflow: hidden;
  text-decoration: none;
  transition: background-color .2s var(--sal), border-color .2s var(--sal), transform .25s var(--sal);
}
.vit-banner::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--rc, var(--ray-4));
}
.vit-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 2.5px;
  background: radial-gradient(280px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgb(var(--rc-rgb, 61 220 110) / 1),
    rgb(var(--rc-rgb, 61 220 110) / .45) 46%,
    transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: var(--glow, 0);
  transition: opacity .25s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .vit-banner:hover {
    background: var(--noche);
    border-color: rgb(var(--rc-rgb, 61 220 110) / .38);
    transform: scale(1.015);
    z-index: 2;
  }
}
.vit-banner-logo {
  grid-row: 1 / span 2;
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--noche-honda);
  border: 2px solid var(--rc, var(--linea-viva));
  overflow: hidden;
}
.vit-banner-logo img { width: 100%; height: 100%; object-fit: cover; }
.vit-banner-logo .ini { font-size: 30px; font-weight: 800; color: var(--arena); }
.vit-banner-nom {
  font-size: 18px; font-weight: 700; font-stretch: 106%;
  line-height: 1.2; letter-spacing: -.012em;
  color: var(--tiza);
  align-self: end;
}
.vit-banner-pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e3);
  align-self: start; margin-top: var(--e1);
}
.vit-banner-rubro { font-size: 13.5px; color: var(--tiza-3); }
.vit-banner-ir {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--sol);
}
.vit-banner-ir svg { width: 14px; height: 14px; }
.vit-banner-pronto { font-size: 13px; color: var(--tiza-3); font-style: italic; }

.vit-pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e3);
  margin-top: var(--e5);
  padding-top: var(--e3);
  border-top: 1px solid var(--linea);
}
.vit-conteo { font-size: 14px; color: var(--tiza-2); }
.vit-conteo b { color: var(--tiza); }

/* ══════════════════════════════════════════════════════════
   ASISTENTE DE DEMOS (3 toques)
   ══════════════════════════════════════════════════════════ */
.wiz-ind { margin-bottom: var(--e2); }
.wiz-opts { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r2); }
.wiz-opt {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4);
  min-height: 58px;
  background: var(--noche);
  text-align: left;
  transition: background-color .2s var(--sal);
}
.wiz-opt:hover { background: var(--noche-mas); }
.wiz-opt .cuadro { width: 14px; height: 14px; flex: 0 0 auto; background: var(--rc, var(--tiza-3)); border-radius: 1px; }
.wiz-opt .ico { width: 24px; height: 24px; flex: 0 0 auto; color: var(--prisma); }

.wiz-opt .nm { font-size: 16px; font-weight: 650; flex: 1 1 auto; }
.wiz-opt .fl { width: 18px; height: 18px; flex: 0 0 auto; color: var(--tiza-3); }
.wiz-opt:hover .fl { color: var(--prisma); }

.wiz-volver {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--tiza-2);
  margin-bottom: var(--e3);
}
.wiz-volver svg { width: 15px; height: 15px; transform: rotate(180deg); }
.wiz-volver:hover { color: var(--prisma); }

.wiz-fases { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r2); }
@media (max-width: 560px) { .wiz-fases { grid-template-columns: 1fr; } }
.wiz-fase {
  padding: var(--e5) var(--e4);
  background: var(--noche);
  text-align: left;
  transition: background-color .2s var(--sal);
}
.wiz-fase:hover { background: var(--noche-mas); }
.wiz-fase svg { width: 26px; height: 26px; color: var(--prisma); margin-bottom: var(--e3); }
.wiz-fase .t { font-size: 16.5px; font-weight: 700; margin-bottom: 5px; }
.wiz-fase .t, .wiz-fase .d { display: block; }
.wiz-fase .d { font-size: 14px; color: var(--tiza-2); }

/* ══════════════════════════════════════════════════════════
   MOVIMIENTO
   Un solo momento orquestado: el haz entra, toca el globo, el
   abanico se abre, los chips se asientan. Después de eso la
   página está quieta y solo responde a lo que tocas.

   Todo por animación CSS con fill-mode both, NO por una clase
   que agregue el JS: si el JS falla, la animación igual corrió
   y el contenido está visible. Nada nace en opacity:0 esperando
   que alguien lo rescate.
   ══════════════════════════════════════════════════════════ */

@keyframes pc-haz    { from { transform: scaleX(0) }            to { transform: none } }
@keyframes pc-fan    { from { transform: scaleY(.04); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes pc-sube   { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes pc-entra  { from { transform: translateX(-10px); opacity: 0 } to { transform: none; opacity: 1 } }


/* Revelados de scroll. La clase .rev la pone el JS SOLO si el
   IntersectionObserver existe de verdad — o sea, el estado
   escondido nunca se aplica sin alguien que lo pueda revelar. */
.rev {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s var(--sal2), transform .9s var(--sal2);
}
.rev-on { opacity: 1; transform: none; }

/* Ajustes de ritmo de la portada: secciones más cercanas y encabezados
   centrados, sin alterar las páginas que comparten prisma.css. */
.seccion { padding-block: var(--e7); }
.seccion .sec-cab {
  justify-content: center;
  text-align: center;
}
.seccion .sec-cab > .t-lamina { flex: 0 1 auto; }
@media (max-width: 720px) { .seccion { padding-block: 44px; } }

@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════
   LAPTOP — pantallas anchas pero bajas
   ------------------------------------------------------------
   En una laptop (1280–1600 de ancho, 650–880 px útiles de alto)
   varias secciones medían más que la pantalla y quedaban
   cortadas. Acá se compactan: menos aire, bloques más bajos y
   el contacto en dos columnas. El escritorio (1080 px o más de
   alto) no cambia. "Quiénes somos" tampoco: su escenario ya se
   ajusta solo a la altura.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-height: 880px) and (hover: hover) {
  .seccion:not(#porquepc) { padding-block: 30px; }
  .seccion:not(#porquepc) .sec-cab { margin-bottom: var(--e4); padding-top: var(--e3); }
  .seccion:not(#porquepc) .d2 { font-size: clamp(30px, 3.6vw, 44px); }

  /* Servicios: lista y visor más bajos para que el botón quede a la vista */
  #servicios { padding-block: 24px; }
  .sv-lead { margin-bottom: var(--e3); }
  .sv-lead .texto-continuacion { font-size: 15.5px; }
  .sv-lista { margin-bottom: var(--e3); }
  .sv-item { padding: 5px 4px; font-size: 17px; }
  .sv-pie { margin-bottom: var(--e3); font-size: 15px; }
  .sv-visor { height: max(400px, min(520px, calc(100svh - var(--nav-h) - 90px))); }

  /* Cómo trabajamos: conserva el formato vertical de escritorio porque
     los tres videos fueron compuestos para una tarjeta alargada. */
  .pasos-intro { margin: -6px auto var(--e4); }
  .paso { min-height: 460px; }

  /* El título de la metáfora queda a la altura de "Quiénes somos" y,
     al subir su columna completa, también aprovecha mejor el alto del cactus. */
  #porquepc.pq-anima .pq-identidad { transform: none; }
  #porquepc.pq-anima .pq-sub {
    font-size: clamp(26px, 2.7vw, 34px);
    margin-bottom: var(--e2);
  }
  #porquepc.pq-anima .pq-escena {
    height: clamp(350px, calc(100svh - var(--nav-h) - 285px), 470px);
  }
  #porquepc.pq-anima .pq-cactus { height: 88%; }
  #porquepc.pq-anima .pq-idea { width: min(21%, 154px); }
  #porquepc.pq-anima .pq-nombre { font-size: 11px; }
  #porquepc.pq-anima .pq-frase { font-size: clamp(16px, 1.35vw, 19px); }
  #porquepc.pq-anima .pq-cuerpo { font-size: 12.5px; line-height: 1.45; }
  #porquepc.pq-anima .pq-idea[data-pqp="prisma"],
  #porquepc.pq-anima .pq-idea[data-pqp="juntos"] { left: 48px; }
  #porquepc.pq-anima .pq-idea[data-pqp="prisma"] { top: 4px; }
  /* Clash Display ocupa más alto que la fuente anterior. En portátiles
     bajamos el último bloque para conservar aire después de Prisma. */
  #porquepc.pq-anima .pq-idea[data-pqp="juntos"] { bottom: -24px; }
  #porquepc.pq-anima .pq-idea[data-pqp="cactus"] { right: 0; }

  /* Proyectos: menos aire y paneles más bajos */
  .proy-intro { margin-bottom: var(--e4); }
  .proy-grid .panel { min-height: 0; padding: var(--e5) var(--e5); }
  .proy-grid .proy-media { margin-bottom: calc(var(--e5) * -1); }
  .proy-cita { font-size: 17px; }

  /* Contacto: título y explicación centrados arriba; la tarjeta conserva
     su distribución interna de dos columnas debajo. */
  #registro .dos {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e4);
    align-items: start;
  }
  #registro .reg-intro { text-align: center; margin-inline: auto; }
  #registro .reg-intro .sec-cab { justify-content: center; text-align: center; }
  #registro .reg-tx { margin-inline: auto; }
  #regForm {
    width: min(100%, 760px);
    padding: var(--e5);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--e4);
  }
  #regForm > * { grid-column: 1 / -1; }
  #regForm > .campo { grid-column: auto; margin-bottom: var(--e3); }
  #regForm > .campo:has(#rg_interes) { grid-column: 1 / -1; }
  #regForm .form-intro { margin-bottom: var(--e3); }
  #regForm .campo input,
  #regForm .select-pc-btn { height: 46px; min-height: 0; padding-block: 0; }
}

/* ══════════════════════════════════════════════════════════
   MÓVIL — ajustes finos
   ══════════════════════════════════════════════════════════ */
@media (max-width: 820px), (hover: none) {
  /* Una columna: el botón de reproducir sube para no pisar el texto
     de los pasos con descripción larga. */
  .paso::before, .paso::after { top: 34%; }
}
@media (max-width: 620px), (hover: none) {
  /* Ejemplos: cada categoría es una fila que se desliza de lado, como
     los servicios. La tarjeta siguiente asoma para que se note. Antes
     eran 9 tarjetas altas una debajo de otra. */
  .bd-grid {
    display: flex;
    gap: var(--e3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding: 8px 2px 14px;
    scrollbar-width: none;
  }
  .bd-grid::-webkit-scrollbar { display: none; }
  /* Mientras la fila se pasea sola (js/ejemplos.js) el imán se suelta:
     con él puesto, el navegador tira de vuelta a la tarjeta más cercana
     en cada cuadro y el movimiento continuo se traba. */
  .bd-grid.bd-paseo { scroll-snap-type: none; }
  .bd-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
    scroll-snap-stop: always;   /* un empujón, una tarjeta */
    /* Sin mouse no hay borde iluminado que siga al cursor: el color del
       rubro se declara acá, más vivo y con su propio halo, para que la
       tarjeta se lea como parte de su categoría. */
    border-color: rgb(var(--rc-rgb, 61 220 110) / .62);
    box-shadow:
      0 0 0 1px rgb(var(--rc-rgb, 61 220 110) / .18),
      0 0 18px -6px rgb(var(--rc-rgb, 61 220 110) / .55);
    transition: transform .28s var(--sal), border-color .35s ease, box-shadow .35s ease;
  }
  /* La que está en el centro se enciende del todo (js/ejemplos.js). */
  .bd-card.enfoque {
    border-color: rgb(var(--rc-rgb, 61 220 110) / .95);
    box-shadow:
      0 0 0 1px rgb(var(--rc-rgb, 61 220 110) / .3),
      0 0 26px -4px rgb(var(--rc-rgb, 61 220 110) / .85);
  }

  /* Las dos acciones de la sección van centradas, como el resto. */
  .pf-intro .btn,
  .pf-cta .btn { display: flex; width: fit-content; margin-inline: auto; }
  .pf-intro .cuerpo { text-align: center; }

  /* Proyectos: el título del taller en una sola pieza (como flex, el
     texto y la cursiva quedaban en dos columnas). */
  .proy-grid .panel-t { display: block; }

  /* Contacto: las cuatro opciones en dos columnas. */
  #regForm #rg_interes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #regForm #rg_interes .opt { justify-content: center; text-align: center; }
}
/* Galería acordeón horizontal de Proyectos propios */
.proy-grid {
  display: flex;
  grid-template-columns: none;
  gap: 0;
  min-height: clamp(300px, 31vw, 390px);
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(61, 220, 110, .24);
  border-radius: calc(var(--r3) + 8px);
  background: rgba(3, 7, 13, .34);
}
.proy-grid .panel,
.proy-grid .panel-ubuntu {
  position: relative;
  flex: 0 1 50%;
  min-width: 0;
  min-height: 100%;
  align-self: stretch;
  justify-content: flex-end;
  padding: clamp(24px, 3vw, 42px);
  overflow: hidden;
  isolation: isolate;
  background: #03070d;
  border-color: rgba(61, 220, 110, .24);
  transform: none;
  transition: flex-basis .78s cubic-bezier(.22, 1, .36, 1), border-color .4s var(--sal);
}
.proy-grid .panel + .panel { margin-left: 12px; }
.proy-grid .panel:is(:hover, :focus, :focus-within) {
  border-color: rgba(61, 220, 110, .72);
  transform: none;
  outline: none;
}
.proy-grid .proy-contenido {
  z-index: 3;
  flex: 0 0 auto;
  width: min(100%, 560px);
  min-height: 0;
  color: var(--tiza);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .9);
}
.proy-grid .panel-t {
  min-height: 1.15em;
  margin: 0 0 var(--e3);
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.05;
  font-weight: 900;
  color: var(--tiza);
  white-space: nowrap;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .95);
}
.proy-grid .proy-contenido > :not(.panel-t) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .28s ease, transform .48s var(--sal2), visibility 0s linear .3s;
}
.proy-grid .proy-contenido > .btn { margin-top: var(--e3); }
.proy-grid .proy-media,
.proy-grid .panel:is(:hover, :focus, :focus-within) .proy-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  opacity: .3;
  filter: saturate(.72) brightness(.5);
  pointer-events: none;
  transform: scale(1.035);
  transition: opacity .5s ease, filter .5s ease, transform .8s var(--sal2);
}
.proy-grid .proy-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 7, 13, .2) 12%, rgba(3, 7, 13, .52) 54%, rgba(3, 7, 13, .96) 100%);
  transition: background .5s ease;
}
.proy-grid .proy-media img {
  object-fit: cover;
  object-position: center;
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .proy-grid:has(.panel:is(:hover, :focus, :focus-within)) .panel { flex-basis: 30%; }
  .proy-grid .panel:is(:hover, :focus, :focus-within) { flex-basis: 70%; }
  .proy-grid .panel:is(:hover, :focus, :focus-within) .proy-media {
    opacity: .9;
    filter: saturate(1) brightness(.82);
    transform: scale(1);
  }
  .proy-grid .panel:is(:hover, :focus, :focus-within) .proy-media::after {
    background: linear-gradient(180deg, rgba(3, 7, 13, .08), rgba(3, 7, 13, .3) 46%, rgba(3, 7, 13, .94) 100%);
  }
  .proy-grid .panel:is(:hover, :focus, :focus-within) .proy-contenido > :not(.panel-t) {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: .18s, .12s, 0s;
  }
}
@media (max-width: 899px), (hover: none) {
  .proy-grid { min-height: 0; flex-direction: column; overflow: visible; }
  .proy-grid .panel, .proy-grid .panel-ubuntu { min-height: 300px; flex-basis: auto; }
  .proy-grid .panel + .panel { margin: 12px 0 0; }
  .proy-grid .panel-t { white-space: normal; }
  .proy-grid .panel .proy-media { opacity: .72; filter: saturate(.9) brightness(.7); }
  .proy-grid .panel .proy-contenido > :not(.panel-t) {
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
}

/* Medida final: dos tarjetas apaisadas dentro de una sola vista. */
@media (min-width: 900px) and (hover: hover) {
  #proyectos { padding-block: clamp(42px, 5vw, 60px); }
  #proyectos .sec-cab { margin-bottom: var(--e4); }
  #proyectos .proy-intro { margin-bottom: var(--e4); }
  #proyectos .proy-grid {
    height: clamp(350px, 29vw, 400px);
    min-height: 0;
    align-items: stretch;
  }
  #proyectos .proy-grid .panel,
  #proyectos .proy-grid .panel-ubuntu,
  #proyectos .proy-grid:has(.panel:is(:hover, :focus, :focus-within)) .panel,
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) {
    height: 100%;
    min-height: 0;
    padding: clamp(20px, 2vw, 28px);
  }
  #proyectos .proy-grid .proy-contenido {
    height: 62%;
    min-height: 0;
    overflow: hidden;
  }
  #proyectos .proy-grid .panel-t {
    font-size: clamp(30px, 3vw, 48px);
  }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .panel-t {
    top: clamp(18px, 1.7vw, 24px);
    left: clamp(20px, 2vw, 28px);
    width: calc(100% - clamp(40px, 4vw, 56px));
    font-size: clamp(23px, 2vw, 32px);
  }
  #proyectos .proy-grid .panel-chamba:is(:hover, :focus, :focus-within) .panel-t {
    left: 50%;
    width: calc(100% - clamp(40px, 4vw, 56px));
    text-align: center;
    transform: translateX(-50%);
  }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .proy-contenido {
    height: 62%;
    padding: clamp(42px, 4vw, 54px) 0 5px;
    justify-content: flex-start;
  }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .proy-cita {
    margin-bottom: 8px;
    max-width: 100%;
    font-size: clamp(13px, 1.08vw, 16px);
    line-height: 1.3;
  }
  #proyectos .proy-grid .panel-chamba:is(:hover, :focus, :focus-within) .proy-cita {
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.42;
  }
  #proyectos .proy-grid .panel-chamba:is(:hover, :focus, :focus-within) .btn {
    min-height: 40px;
    padding: 10px 16px;
    font-size: 15px;
  }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .ubuntu-acot {
    margin: 0 0 4px;
    font-size: 11px;
  }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .ubuntu-lista {
    gap: 1px;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.15;
  }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .ubuntu-it {
    gap: 7px;
    font-size: inherit;
  }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .ubuntu-it svg {
    width: 14px;
    height: 14px;
  }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .btn {
    min-height: 36px;
    margin-top: 3px;
    padding: 8px 13px;
    font-size: 13px;
  }
  #proyectos .proy-grid .proy-media,
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .proy-media {
    height: 38%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .proy-grid .panel, .proy-grid .proy-media,
  .proy-grid .proy-media::after, .proy-grid .proy-contenido > * { transition: none; }
}

/* Proyectos: títulos flotantes; contenido e imagen aparecen al hover. */
.proy-grid {
  gap: 12px;
  min-height: clamp(380px, 35vw, 430px);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
.proy-grid .panel,
.proy-grid .panel-ubuntu,
.proy-grid:has(.panel:is(:hover, :focus, :focus-within)) .panel,
.proy-grid .panel:is(:hover, :focus, :focus-within) {
  flex: 1 1 50%;
  flex-basis: 50%;
  min-height: 100%;
  margin: 0;
  padding: clamp(26px, 3vw, 42px);
  padding-bottom: calc(30% + var(--e5));
  justify-content: flex-start;
  background: transparent;
  transform: none;
  transition: border-color .38s ease, background-color .38s ease;
}
.proy-grid .panel:is(:hover, :focus, :focus-within) { background: rgba(3, 7, 13, .5); }
.proy-grid .proy-contenido { position: static; width: 100%; height: 100%; }
.proy-grid .panel-t {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: calc(100% - 48px);
  min-height: 0;
  margin: 0;
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.02;
  text-align: center;
  white-space: normal;
  transform: translate(-50%, -50%);
  animation: proyTituloFlota 3.4s ease-in-out infinite;
  transition: top .62s var(--sal2), left .62s var(--sal2), width .62s var(--sal2),
    font-size .62s var(--sal2), transform .62s var(--sal2), text-align .35s ease;
}
.proy-grid .panel:nth-child(2) .panel-t { animation-delay: -.9s; }
@keyframes proyTituloFlota {
  0%, 100% { translate: 0 -4px; }
  50% { translate: 0 5px; }
}
.proy-grid .proy-contenido > :not(.panel-t) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .52s var(--sal2), visibility 0s linear .3s;
}
.proy-grid .proy-media,
.proy-grid .panel:is(:hover, :focus, :focus-within) .proy-media {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  margin: 0;
  border-radius: 0 0 var(--r3) var(--r3);
  opacity: 0;
  filter: saturate(.85) brightness(.72);
  transform: translateY(18px);
  transition: opacity .42s ease, filter .42s ease, transform .62s var(--sal2);
}
.proy-grid .proy-media::after {
  background: linear-gradient(180deg, rgba(3, 7, 13, .35), rgba(3, 7, 13, .06));
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .proy-grid .panel:is(:hover, :focus, :focus-within) .panel-t {
    top: clamp(26px, 3vw, 42px);
    left: clamp(26px, 3vw, 42px);
    width: calc(100% - clamp(52px, 6vw, 84px));
    font-size: clamp(28px, 2.7vw, 42px);
    text-align: left;
    transform: none;
    translate: 0;
    animation-play-state: paused;
  }
  .proy-grid .panel:is(:hover, :focus, :focus-within) .proy-contenido {
    height: 70%;
    padding: clamp(54px, 5vw, 68px) 0 10px;
    justify-content: flex-end;
  }
  .proy-grid .panel:is(:hover, :focus, :focus-within) .proy-contenido > :not(.panel-t) {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: .18s, .12s, 0s;
  }
  .proy-grid .panel:is(:hover, :focus, :focus-within) .proy-media {
    opacity: 1;
    filter: saturate(1) brightness(.9);
    transform: none;
  }
  .proy-grid .panel:is(:hover, :focus, :focus-within) .proy-cita {
    margin: 0 0 10px;
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.38;
  }
  .proy-grid .panel:is(:hover, :focus, :focus-within) .ubuntu-acot {
    margin: 0 0 8px;
  }
  .proy-grid .panel:is(:hover, :focus, :focus-within) .ubuntu-lista {
    gap: 4px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.25;
  }
  .proy-grid .panel:is(:hover, :focus, :focus-within) .btn {
    margin-top: 4px;
  }
}
@media (max-width: 899px), (hover: none) {
  .proy-grid { gap: var(--e4); }
  .proy-grid .panel, .proy-grid .panel-ubuntu {
    min-height: 430px;
    padding-bottom: calc(30% + var(--e4));
  }
  .proy-grid .panel-t {
    position: static;
    width: 100%;
    margin-bottom: var(--e3);
    font-size: clamp(30px, 8vw, 46px);
    text-align: left;
    transform: none;
    translate: 0;
    animation: none;
  }
  .proy-grid .panel .proy-contenido > :not(.panel-t) {
    opacity: 1; visibility: visible; transform: none;
  }
  .proy-grid .panel .proy-media {
    display: block; opacity: 1; transform: none; filter: saturate(1) brightness(.86);
  }
}

/* CactusWork siempre centrado; esta regla debe cerrar la cascada. */
@media (min-width: 900px) and (hover: hover) {
  #proyectos #cactuswork .panel-t,
  #proyectos #cactuswork:is(:hover, :focus, :focus-within) .panel-t {
    left: 50% !important;
    text-align: center !important;
    transform: translateX(-50%) !important;
  }
  #proyectos #cactuswork:not(:hover):not(:focus):not(:focus-within) .panel-t {
    transform: translate(-50%, -50%) !important;
  }
}
/* Proyectos sin imágenes: títulos centrados y rastro Prisma interior. */
#proyectos .proy-grid .proy-media { display: none !important; }
#proyectos .proy-grid .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(105px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(142, 255, 174, .24) 0, rgba(61, 220, 110, .13) 22%,
    rgba(61, 220, 110, .045) 50%, transparent 74%);
  transition: opacity .24s ease;
}
@media (hover: hover) and (pointer: fine) {
  #proyectos .proy-grid .panel:hover::before { opacity: 1; }
}
.proy-rastro {
  position: absolute; z-index: 2;
  width: 12px; height: 12px; border-radius: 50%;
  pointer-events: none; background: var(--prisma);
  box-shadow: 0 0 14px rgba(61,220,110,.9), 0 0 30px rgba(61,220,110,.42);
  transform: translate(-50%, -50%) scale(1);
  animation: proyRastroSale .62s ease-out forwards;
}
@keyframes proyRastroSale {
  to { opacity: 0; transform: translate(-50%, -50%) scale(.15); filter: blur(3px); }
}
@media (min-width: 900px) and (hover: hover) {
  #proyectos .proy-grid .proy-contenido,
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .proy-contenido {
    height: 100%;
    padding: clamp(64px, 5vw, 78px) clamp(18px, 2.2vw, 32px) 68px;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    overflow: hidden;
  }
  #proyectos .proy-grid .panel-t,
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .panel-t,
  #proyectos #cactuswork .panel-t,
  #proyectos #cactuswork:is(:hover, :focus, :focus-within) .panel-t {
    left: 50% !important;
    width: calc(100% - 48px);
    text-align: center !important;
    justify-content: center !important;
    align-items: center;
    transform: translateX(-50%) !important;
  }
  #proyectos .proy-grid .panel:not(:hover):not(:focus):not(:focus-within) .panel-t {
    top: 50%;
    transform: translate(-50%, -50%) !important;
  }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .panel-t {
    top: clamp(20px, 2vw, 28px);
    font-size: clamp(25px, 2.25vw, 36px);
  }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .proy-cita {
    max-width: none;
    margin: 0;
    text-align: left;
    font-size: clamp(19px, 1.55vw, 24px);
    line-height: 1.4;
  }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .ubuntu-acot { margin: 0 0 7px; font-size: 13px; }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .ubuntu-lista {
    align-self: stretch; gap: 5px; margin-top: 8px;
    font-size: clamp(16px, 1.2vw, 18px); line-height: 1.3;
  }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .ubuntu-it { justify-content: flex-start; }
  #proyectos .proy-grid .panel:is(:hover, :focus, :focus-within) .btn {
    position: absolute; z-index: 4;
    left: clamp(20px, 2vw, 28px); bottom: clamp(18px, 1.8vw, 25px);
    align-self: auto; min-height: 42px; padding: 10px 17px; font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) { .proy-rastro { display: none; } }
@media (max-width: 899px), (hover: none) {
  #proyectos .proy-grid .panel,
  #proyectos .proy-grid .panel-ubuntu { padding-bottom: var(--e5); }
}

/* ══════════════════════════════════════════════════════════
   "Quiénes somos": el título, centrado en teléfono
   ------------------------------------------------------------
   Va al final del archivo y a propósito: la regla de la sección
   (línea ~617) lo alinea a la izquierda para el escritorio, que NO
   se toca. Puesta acá, esta gana por orden sin subirle la
   especificidad a nadie ni alterar la de arriba.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 899px), (hover: none) {
  /* !important a conciencia: este título lo tocan la regla de la
     sección, la del encabezado genérico y la de prisma.css, y las tres
     lo quieren a la izquierda. En teléfono va centrado y no se discute.
     El escritorio no entra acá. */
  /* El encabezado deja de ser una caja flexible. Mientras lo era, el
     <h2> entraba como pieza con `flex: 1 1 320px` y su posición la
     discutían tres reglas a la vez. Como bloque no hay discusión: el
     título ocupa el ancho completo y su texto va centrado, punto. */
  .seccion#porquepc .sec-cab {
    display: block !important;
    width: 100% !important;
    align-self: stretch !important;
    text-align: center !important;
  }
  .seccion#porquepc .sec-cab > * {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    text-align: center !important;
  }
}

/* ══════════════════════════════════════════════════════════
   CONTACTO en teléfono: rótulos y botones un punto más grandes
   ------------------------------------------------------------
   Los rótulos usan Teko en versalitas a 11.5px, que en pantalla
   grande funciona como una anotación discreta. En la mano, con el
   formulario ocupando todo el ancho, se lee como letra chica de
   contrato. Un punto más y el campo se entiende de un vistazo.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 899px), (hover: none) {
  #registro .campo > label,
  #registro .campo > .etq {
    font-size: 15px;
    letter-spacing: .05em;
    color: var(--tiza);
  }
  /* Los chips dicen qué te interesa: son la respuesta, no una
     etiqueta. Con 14.5px de Teko en versalitas se leían como letra
     de apoyo; a 18px pesan lo que pesan. */
  #regForm .opt { font-size: 18px; line-height: 1.25; padding: 12px 14px; }
  #registro .btn { font-size: 21px !important; }
}

/* ══════════════════════════════════════════════════════════
   PROYECTOS · PORTADAS 3D CON TÍTULO ENMASCARADO
   La información se abre de forma explícita con la flecha.
   ══════════════════════════════════════════════════════════ */
#proyectos .proy-grid--mascara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  perspective: 1100px;
}

#proyectos .proy-grid--mascara .panel,
#proyectos .proy-grid--mascara .panel-ubuntu {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  height: clamp(360px, 30vw, 420px);
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  isolation: isolate;
  background-color: #03070d;
  background-image:
    linear-gradient(180deg, rgba(3, 7, 13, .24), rgba(3, 7, 13, .62)),
    url("../images/proyectos-desierto-prisma.jpg");
  background-repeat: no-repeat;
  background-size: 205% 100%;
  border: 1px solid rgba(61, 220, 110, .38);
  border-radius: var(--r3);
  transform: perspective(1100px) rotateX(calc(var(--tilt-x) * .18)) rotateY(calc(var(--tilt-y) * .18));
  transform-style: preserve-3d;
  transition: height .68s var(--sal2), border-color .35s ease,
    box-shadow .35s ease, transform .22s ease-out, filter .35s ease;
}

#proyectos .proy-grid--mascara #cactuswork { background-position: left center; }
#proyectos .proy-grid--mascara #ubuntu { background-position: right center; }

#proyectos .proy-grid--mascara .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(420px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(61, 220, 110, .12), transparent 66%),
    linear-gradient(180deg, rgba(2, 6, 11, .08), rgba(2, 6, 11, .42));
  transition: background .35s ease;
}

#proyectos .proy-grid--mascara .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: .48;
  background: radial-gradient(360px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(112, 255, 153, .95), rgba(61, 220, 110, .28) 48%, transparent 76%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: opacity .35s ease;
}

#proyectos .proy-grid--mascara .panel:is(:hover, :focus-within),
#proyectos .proy-grid--mascara .panel.proy-abierto {
  border-color: rgba(61, 220, 110, .8);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .32), 0 0 28px rgba(61, 220, 110, .08);
  filter: saturate(1.08) brightness(1.04);
}

#proyectos .proy-grid--mascara .proy-portada {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: calc(100% - clamp(32px, 5vw, 72px));
  text-align: center;
  transform: translate3d(-50%, -50%, 42px) perspective(850px)
    rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: top .68s var(--sal2), transform .25s ease-out, width .68s var(--sal2);
}

#proyectos .proy-grid--mascara #cactuswork .panel-t,
#proyectos .proy-grid--mascara #ubuntu .panel-t {
  position: relative !important;
  inset: auto !important;
  display: grid;
  place-items: center;
  width: 100% !important;
  min-height: 1.2em;
  margin: 0 !important;
  color: var(--tiza);
  font-family: "Clash Display", sans-serif;
  font-size: clamp(34px, 3.5vw, 54px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-align: center !important;
  text-wrap: balance;
  white-space: normal;
  text-shadow:
    0 1px 0 rgba(61, 220, 110, .7),
    0 3px 0 rgba(23, 97, 54, .72),
    0 7px 18px rgba(0, 0, 0, .85);
  transform: none !important;
  translate: 0 !important;
  animation: none;
}

#proyectos .proy-grid--mascara .panel-t > span {
  position: relative;
  z-index: 1;
  display: block;
  animation: proyTituloFlota3d 3.8s ease-in-out infinite;
}

#proyectos .proy-grid--mascara .panel:nth-child(2) .panel-t > span {
  animation-delay: -1.25s;
}

#proyectos .proy-grid--mascara .proy-masked::after {
  content: attr(data-text);
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: transparent;
  background:
    linear-gradient(100deg, #3ddc6e 8%, #8effae 33%, #f1b260 53%, #85e6ff 72%, #3ddc6e 92%);
  background-size: 220% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  clip-path: inset(0 100% 0 0);
  animation: proyMascaraTitulo 5.6s cubic-bezier(.22, 1, .36, 1) infinite;
  pointer-events: none;
}

#proyectos .proy-grid--mascara .panel:nth-child(2) .proy-masked::after {
  animation-delay: -2.1s;
}

@keyframes proyTituloFlota3d {
  0%, 100% { transform: translate3d(0, -5px, 24px); }
  50% { transform: translate3d(0, 6px, 38px); }
}

@keyframes proyMascaraTitulo {
  0%, 13% { clip-path: inset(0 100% 0 0); background-position: 100% 50%; }
  34%, 58% { clip-path: inset(0 0 0 0); background-position: 0 50%; }
  78%, 100% { clip-path: inset(0 0 0 100%); background-position: -100% 50%; }
}

#proyectos .proy-grid--mascara .proy-abrir {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: clamp(16px, 2vw, 24px);
  padding: 5px 18px 7px;
  color: var(--tiza);
  font: 400 18px/1 "Teko", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(3, 7, 13, .34);
  border: 1px solid rgba(61, 220, 110, .42);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}

#proyectos .proy-grid--mascara .proy-abrir:hover,
#proyectos .proy-grid--mascara .proy-abrir:focus-visible {
  color: var(--prisma);
  border-color: var(--prisma);
  background: rgba(3, 7, 13, .68);
  outline: none;
  transform: translateY(2px);
}

#proyectos .proy-grid--mascara .proy-abrir svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .5s var(--sal2);
}

#proyectos .proy-grid--mascara .proy-detalle,
#proyectos .proy-grid--mascara .panel:is(:hover, :focus, :focus-within) .proy-detalle {
  position: absolute;
  z-index: 4;
  inset: clamp(112px, 9vw, 130px) clamp(22px, 3vw, 38px) clamp(22px, 2.5vw, 32px);
  display: flex;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 18px, 0);
  transition: opacity .36s ease, visibility 0s linear .36s, transform .62s var(--sal2);
}

#proyectos .proy-grid--mascara .proy-detalle > * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#proyectos .proy-grid--mascara .panel.proy-abierto .proy-portada {
  top: clamp(20px, 2vw, 28px);
  width: calc(100% - 40px);
  transform: translate3d(-50%, 0, 42px) perspective(850px)
    rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

#proyectos .proy-grid--mascara .panel.proy-abierto .panel-t {
  font-size: clamp(24px, 2.25vw, 34px) !important;
}

#proyectos .proy-grid--mascara .panel.proy-abierto .proy-abrir {
  margin-top: 7px;
  padding-block: 3px 4px;
  font-size: 14px;
}

#proyectos .proy-grid--mascara .panel.proy-abierto .proy-abrir svg {
  transform: rotate(180deg);
}

#proyectos .proy-grid--mascara .panel.proy-abierto .proy-detalle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: .17s, 0s, .08s;
}

#proyectos .proy-grid--mascara .proy-cita {
  max-width: 48ch;
  margin: 0 auto 12px;
  color: var(--tiza);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.38;
  text-align: center;
}

#proyectos .proy-grid--mascara .ubuntu-acot {
  margin: 0 0 6px;
  color: var(--arena);
}

#proyectos .proy-grid--mascara .ubuntu-lista {
  display: inline-grid;
  gap: 5px;
  align-self: center;
  margin: 0 auto 12px;
  color: var(--tiza-2);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.25;
  text-align: left;
}

#proyectos .proy-grid--mascara .ubuntu-it { justify-content: flex-start; }
#proyectos .proy-grid--mascara .ubuntu-it svg { flex: 0 0 auto; }

#proyectos .proy-grid--mascara .proy-detalle > .btn,
#proyectos .proy-grid--mascara .panel.proy-abierto .proy-detalle > .btn {
  position: static;
  align-self: center;
  min-height: 40px;
  margin: 0;
  padding: 9px 16px;
  font-size: 16px;
}

@media (max-width: 899px), (hover: none) {
  #proyectos .proy-grid--mascara {
    grid-template-columns: 1fr;
    gap: var(--e4);
  }
  #proyectos .proy-grid--mascara .panel,
  #proyectos .proy-grid--mascara .panel-ubuntu {
    height: 300px;
    min-height: 300px !important;
    background-size: cover;
    background-position: center;
  }
  #proyectos .proy-grid--mascara .panel.proy-abierto { height: 500px; }
  #proyectos .proy-grid--mascara #cactuswork.proy-abierto { height: 470px; }
  #proyectos .proy-grid--mascara #cactuswork .panel-t,
  #proyectos .proy-grid--mascara #ubuntu .panel-t {
    font-size: clamp(31px, 9vw, 44px);
    text-align: center !important;
  }
  #proyectos .proy-grid--mascara .panel.proy-abierto .panel-t {
    font-size: clamp(23px, 6.7vw, 31px) !important;
  }
  #proyectos .proy-grid--mascara .proy-detalle,
  #proyectos .proy-grid--mascara .panel:is(:hover, :focus, :focus-within) .proy-detalle {
    inset: 112px 18px 20px;
  }
  #proyectos .proy-grid--mascara .proy-cita { font-size: 15px; }
  #proyectos .proy-grid--mascara .ubuntu-lista { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #proyectos .proy-grid--mascara .panel,
  #proyectos .proy-grid--mascara .proy-portada,
  #proyectos .proy-grid--mascara .proy-detalle,
  #proyectos .proy-grid--mascara .panel-t > span,
  #proyectos .proy-grid--mascara .proy-masked::after {
    animation: none;
    transition-duration: .01ms;
  }
  #proyectos .proy-grid--mascara .proy-masked::after { clip-path: inset(0 0 0 0); }
}

/* ══════════════════════════════════════════════════════════
   El selector de tipo de negocio, con la letra de un campo
   ------------------------------------------------------------
   El desplegable está hecho con <button> (hace falta para que la
   lista se vea igual en todos los navegadores), y en prisma.css
   todo botón lleva Teko. Resultado: el negocio elegido salía en la
   tipografía de los controles mientras que lo escrito en los demás
   campos salía en Poppins — dos letras distintas en el mismo
   formulario. Acá el selector deja de vestirse de botón y se viste
   de campo, que es lo que en realidad es.
   ══════════════════════════════════════════════════════════ */
#regForm .select-pc-btn,
#regForm .select-pc-opcion {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px;            /* el mismo de los inputs: sin zoom en iOS */
  font-stretch: normal !important;
}

/* Ajustes finales del estado abierto de Proyectos propios. */
#proyectos .proy-grid--mascara .panel { transform: none; }
#proyectos .proy-grid--mascara #cactuswork.proy-abierto .panel-t,
#proyectos .proy-grid--mascara #ubuntu.proy-abierto .panel-t {
  font-size: clamp(24px, 2.25vw, 34px) !important;
}
@media (max-width: 899px), (hover: none) {
  #proyectos .proy-grid--mascara #cactuswork.proy-abierto .panel-t,
  #proyectos .proy-grid--mascara #ubuntu.proy-abierto .panel-t {
    font-size: clamp(23px, 6.7vw, 31px) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PROYECTOS PROPIOS en teléfono
   ------------------------------------------------------------
   Dos cosas cambian respecto al escritorio:

   1. ABRIR ABRE DE VERDAD. En pantalla ancha el detalle es una capa
      flotante colocada con `inset` dentro de una tarjeta de alto
      fijo: bonito, pero en un teléfono ese alto no alcanza y el
      texto quedaba recortado o directamente fuera de la caja. Acá el
      detalle vuelve al flujo normal y la tarjeta crece lo que haga
      falta. Nada que medir, nada que recortar.

   2. EL TÍTULO DEJA DE BARRERSE. La copia con degradado que lo
      recorría de izquierda a derecha se quita; en su lugar el título
      queda en relieve —blanco con dos sombras verdes que lo
      levantan del fondo— y conserva su flotación 3D.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 899px), (hover: none) {
  /* ── 1 · La apertura ── */
  #proyectos .proy-grid--mascara .panel,
  #proyectos .proy-grid--mascara .panel-ubuntu {
    height: auto !important;
    min-height: 300px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    transition: min-height .4s var(--sal2);
  }
  #proyectos .proy-grid--mascara .panel.proy-abierto,
  #proyectos .proy-grid--mascara #cactuswork.proy-abierto {
    height: auto !important;
    min-height: 0 !important;
  }

  /* La portada deja de estar anclada con posición absoluta: pasa a ser
     la primera fila de la tarjeta. */
  #proyectos .proy-grid--mascara .proy-portada {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    padding: var(--e5) var(--e4) 0;
  }

  /* El detalle: en el flujo, debajo del título. */
  #proyectos .proy-grid--mascara .proy-detalle,
  #proyectos .proy-grid--mascara .panel:is(:hover, :focus, :focus-within) .proy-detalle,
  #proyectos .proy-grid--mascara .panel.proy-abierto .proy-detalle {
    position: static !important;
    inset: auto !important;
    display: grid;
    gap: var(--e3);
    width: 100%;
    padding: 0 var(--e4);
    transform: none !important;
  }
  /* Cerrado: ni se ve ni ocupa sitio. Abierto: aparece con un fundido
     corto, sin mover la tarjeta de golpe. */
  #proyectos .proy-grid--mascara .proy-detalle,
  #proyectos .proy-grid--mascara .panel:is(:hover, :focus, :focus-within) .proy-detalle {
    display: none !important;
    opacity: 0;
  }
  #proyectos .proy-grid--mascara .panel.proy-abierto .proy-detalle {
    display: grid !important;
    opacity: 1;
    visibility: visible !important;
    pointer-events: auto !important;
    padding-bottom: var(--e5);
    animation: proyDetalleEntra .45s var(--sal2) both;
  }
  @keyframes proyDetalleEntra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  #proyectos .proy-grid--mascara .proy-detalle > .btn {
    justify-self: center;
    margin-top: var(--e2);
  }

  /* ── 2 · El título en relieve ── */
  /* Fuera el barrido: era una segunda copia del texto encima de la
     primera, y en una pantalla chica se leía como un parpadeo. */
  #proyectos .proy-grid--mascara .proy-masked::after { display: none !important; }

  #proyectos .proy-grid--mascara .panel-t > span {
    color: var(--tiza);
    /* El verde no pinta la letra: la levanta. Dos sombras cortas hacen
       el canto del relieve y una tercera, ancha y difusa, el halo que
       la despega del fondo. */
    text-shadow:
      0 1px 0 rgb(61 220 110 / .85),
      0 3px 0 rgb(22 120 58 / .55),
      0 10px 26px rgb(0 0 0 / .75),
      0 0 34px rgb(61 220 110 / .3);
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce), (hover: none) and (prefers-reduced-motion: reduce) {
  #proyectos .proy-grid--mascara .panel.proy-abierto .proy-detalle { animation: none; }
}

/* Abierto, el botón ya no necesita explicarse: la flecha apuntando
   hacia arriba dice "cerrar" sola. La palabra no se borra, se oculta
   solo a la vista — un lector de pantalla la sigue anunciando. */
@media (max-width: 899px), (hover: none) {
  #proyectos .proy-grid--mascara .panel.proy-abierto .proy-abrir {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  #proyectos .proy-grid--mascara .panel.proy-abierto .proy-abrir > span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ══════════════════════════════════════════════════════════
   PROYECTOS · el relieve para todas las pantallas
   ------------------------------------------------------------
   El barrido de degradado se va del escritorio también: era una
   segunda copia del título encima de la primera y competía con la
   flotación 3D, que es el gesto que de verdad cuenta. Queda el
   título en relieve, flotando, con el verde levantándolo en vez de
   pintándolo.
   ══════════════════════════════════════════════════════════ */
#proyectos .proy-grid--mascara .proy-masked::after { display: none !important; }
#proyectos .proy-grid--mascara .panel-t > span {
  color: var(--tiza);
  text-shadow:
    0 1px 0 rgb(61 220 110 / .85),
    0 3px 0 rgb(22 120 58 / .55),
    0 10px 26px rgb(0 0 0 / .75),
    0 0 34px rgb(61 220 110 / .3);
}

/* ── Teléfono: la flecha, arriba a la derecha ──
   Abierta, la tarjeta es una ficha con su contenido; el control de
   cerrar se aparta a la esquina en vez de quedarse en medio del
   camino, debajo del título. */
@media (max-width: 899px), (hover: none) {
  #proyectos .proy-grid--mascara .panel.proy-abierto { position: relative; }
  #proyectos .proy-grid--mascara .panel.proy-abierto .proy-abrir {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    margin-top: 0;
  }
  /* El título recupera el ancho que ocupaba el botón. */
  #proyectos .proy-grid--mascara .panel.proy-abierto .proy-portada {
    padding-right: 62px;
  }
}

/* ── Escritorio y laptop: manda el mouse, no un botón ──
   Con puntero fino la información sale al pasar por encima, que es
   más rápido que buscar un control y pulsarlo. Por eso ahí el botón
   sobra: la tarjeta cerrada es solo su fondo y su título flotando. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  #proyectos .proy-grid--mascara .proy-abrir { display: none !important; }

  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .proy-detalle {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: .12s, 0s, .05s;
  }
  /* Al asomar la información, el título se aparta: sube, se achica y
     deja de flotar, para no pelear con el texto que llega. */
  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .proy-portada {
    top: clamp(20px, 2vw, 28px);
    transform: translate3d(-50%, 0, 42px) perspective(850px)
      rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }
  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .panel-t > span {
    animation-play-state: paused;
  }
  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .panel-t {
    font-size: clamp(24px, 2.25vw, 34px) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PROYECTOS en laptop y escritorio · el hover despeja la mesa
   ------------------------------------------------------------
   Con la información encima, la foto de fondo deja de ayudar y
   empieza a estorbar: el texto se lee sobre un dibujo. Al pasar el
   mouse, la capa de arriba se vuelve casi opaca y tapa la imagen —
   se hace con la capa y no quitando el background, porque así la
   desaparición es gradual y la vuelta también.
   ══════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within)::before {
    background:
      radial-gradient(520px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(61, 220, 110, .1), transparent 70%),
      linear-gradient(180deg, rgba(4, 8, 14, .95), rgba(3, 6, 11, .985));
  }
  /* Sin foto detrás, el relieve verde del título sobra: se queda el
     texto limpio, que es lo que hay que leer. */
  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .panel-t > span {
    text-shadow: 0 2px 14px rgb(0 0 0 / .6);
  }

  /* El detalle, ordenado: la cita, la lista y el botón en una
     columna centrada, con el mismo aire entre piezas. */
  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .proy-detalle {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--e4);
  }
  #proyectos .proy-grid--mascara .proy-detalle > .btn { margin-top: 0; }
  #proyectos .proy-grid--mascara .ubuntu-lista {
    display: grid;
    gap: var(--e2);
    justify-items: start;
    text-align: left;
  }
}

/* ── El título, centrado en la tarjeta antes del hover ──
   La portada se coloca con `left: 50%` y se corrige con un
   translate del 50%: si el ancho no es exacto, el título queda
   descuadrado. Se ancla a los dos costados y así el centro es el
   centro de la tarjeta, mida lo que mida. */
@media (min-width: 900px) and (hover: hover) {
  #proyectos .proy-grid--mascara .proy-portada {
    left: 0 !important;
    right: 0;
    width: auto !important;
    margin-inline: clamp(16px, 2.5vw, 36px);
    transform: translate3d(0, -50%, 42px) perspective(850px)
      rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }
  #proyectos .proy-grid--mascara .panel.proy-abierto .proy-portada,
  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .proy-portada {
    transform: translate3d(0, 0, 42px) perspective(850px)
      rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }
}

/* Proyectos propios · ajuste final para laptop y escritorio.
   La portada conserva la imagen; el estado de lectura queda realmente
   transparente y organiza el contenido desde la izquierda. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) {
    background-color: transparent !important;
    background-image: none !important;
    filter: none;
  }

  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within)::before {
    background: transparent !important;
  }

  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .proy-detalle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(7px, .8vw, 11px);
    text-align: left;
  }

  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .proy-cita {
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .ubuntu-lista {
    width: 100%;
    align-self: stretch;
    margin: 0;
    justify-items: start;
  }

  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .proy-detalle > .btn {
    align-self: flex-start;
    justify-self: start;
    margin-top: auto !important;
    margin-right: auto;
  }
}

@media (min-width: 900px) and (hover: hover) {
  #proyectos .proy-grid--mascara #cactuswork:not(:hover):not(:focus-within):not(.proy-abierto) .proy-portada {
    left: 50% !important;
    right: auto !important;
    width: 100% !important;
    margin-inline: 0 !important;
    transform: translate3d(-50%, -50%, 42px) perspective(850px)
      rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }

  #proyectos .proy-grid--mascara #cactuswork:not(:hover):not(:focus-within):not(.proy-abierto) .panel-t {
    width: 100% !important;
    margin-inline: auto !important;
    place-items: center !important;
    text-align: center !important;
  }
}

/* Proyectos · ritmo del contenido abierto en pantallas grandes. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .proy-detalle {
    inset: clamp(84px, 7vw, 98px) clamp(22px, 3vw, 38px) clamp(22px, 2.5vw, 32px);
  }

  #proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .proy-detalle > .btn {
    position: static !important;
    flex: 0 0 auto;
    align-self: flex-start;
    margin: clamp(15px, 1.25vw, 20px) 0 0 !important;
  }
}

/* En teléfono el título deja de flotar cuando la ficha está abierta;
   la flecha de cierre ocupa menos espacio en la esquina. */
@media (max-width: 899px), (hover: none) {
  #proyectos .proy-grid--mascara .panel.proy-abierto .panel-t > span {
    animation: none !important;
    transform: none !important;
  }

  #proyectos .proy-grid--mascara .panel.proy-abierto .proy-abrir {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  #proyectos .proy-grid--mascara .panel.proy-abierto .proy-abrir svg {
    width: 14px;
    height: 14px;
  }
}

/* CactusWork · un solo sistema de centrado en escritorio.
   El contenedor marca el centro y el título ya no suma otro left/translate. */
@media (min-width: 900px) and (hover: hover) {
  #proyectos .proy-grid--mascara #cactuswork .proy-portada {
    left: 50% !important;
    right: auto !important;
    width: 100% !important;
    margin-inline: 0 !important;
    transform: translate3d(-50%, -50%, 42px) !important;
  }

  #proyectos .proy-grid--mascara #cactuswork:is(:hover, :focus-within, .proy-abierto) .proy-portada {
    transform: translate3d(-50%, 0, 42px) !important;
  }

  #proyectos .proy-grid--mascara #cactuswork .panel-t,
  #proyectos .proy-grid--mascara #cactuswork:is(:hover, :focus-within, .proy-abierto) .panel-t {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-inline: auto !important;
    place-items: center !important;
    text-align: center !important;
    transform: none !important;
  }
}

/* CactusWork cerrado: centrado estructural, sin coordenadas ni translate. */
@media (min-width: 900px) and (hover: hover) {
  #proyectos .proy-grid--mascara #cactuswork:not(:hover):not(:focus-within):not(.proy-abierto) {
    display: block !important;
  }

  #proyectos .proy-grid--mascara #cactuswork:not(:hover):not(:focus-within):not(.proy-abierto) .proy-portada {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  #proyectos .proy-grid--mascara #cactuswork:not(:hover):not(:focus-within):not(.proy-abierto) .panel-t {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    max-width: calc(100% - 48px);
    margin: 0 !important;
    text-align: center !important;
    transform: none !important;
    translate: none !important;
  }
}

/* Proyectos abiertos en móvil: velo oscuro para que la ficha se lea
   sin apagar por completo la fotografía del desierto. */
@media (max-width: 899px), (hover: none) {
  #proyectos .proy-grid--mascara .panel.proy-abierto {
    filter: none;
  }

  #proyectos .proy-grid--mascara .panel.proy-abierto::before {
    opacity: 1;
    background:
      radial-gradient(340px circle at var(--glow-x, 50%) var(--glow-y, 35%),
        rgba(61, 220, 110, .07), transparent 68%),
      linear-gradient(180deg, rgba(2, 6, 11, .78), rgba(2, 5, 10, .94));
  }
}

/* El Taller lleva un título de tres palabras que en el teléfono cae en
   dos o tres líneas, así que su última línea queda mucho más cerca del
   texto que la de CactusWork, de una sola. Un respiro extra, solo para
   esta tarjeta. */
@media (max-width: 899px), (hover: none) {
  #proyectos .proy-grid--mascara #ubuntu.proy-abierto .proy-detalle {
    padding-top: var(--e4);
  }
  /* CactusWork lleva menos porque su título es de una sola línea: con
     el mismo hueco que el Taller quedaría descolgado. */
  #proyectos .proy-grid--mascara #cactuswork.proy-abierto .proy-detalle {
    padding-top: var(--e3);
  }
}

/* ══════════════════════════════════════════════════════════
   PROYECTOS · que los enlaces se puedan tocar
   ------------------------------------------------------------
   La portada de la tarjeta (título + flecha) va en z-index 5 y el
   detalle en 4, así que la caja del título quedaba POR ENCIMA del
   contenido abierto. En escritorio no se notaba porque el botón
   cae lejos; en el teléfono, con todo en una columna estrecha, la
   portada se montaba sobre "Ver CactusWork" y sobre "Ver el
   taller", y el toque moría ahí.

   El detalle abierto pasa a tener su propio contexto de apilado,
   por encima de la portada. Es lo único que hacía falta.
   ══════════════════════════════════════════════════════════ */
#proyectos .proy-grid--mascara .panel.proy-abierto .proy-detalle,
#proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .proy-detalle {
  position: relative;
  z-index: 7;
}
#proyectos .proy-grid--mascara .proy-detalle > .btn { position: relative; z-index: 8; }

/* La portada no necesita interceptar nada: lo único que se toca en
   ella es la flecha, que tiene su propio z-index. */
#proyectos .proy-grid--mascara .panel.proy-abierto .proy-portada { pointer-events: none; }
#proyectos .proy-grid--mascara .panel.proy-abierto .proy-abrir { pointer-events: auto; }

/* ══════════════════════════════════════════════════════════
   Los títulos de sección, en arena
   ------------------------------------------------------------
   El titular del hero se queda en blanco: es el primero que se ve y
   manda. De ahí en adelante los encabezados pasan al ocre de la
   arena, el secundario de la marca, y la cursiva verde de cada uno
   sigue siendo el acento. Dos colores por título, uno por jerarquía.
   ══════════════════════════════════════════════════════════ */
.seccion .sec-cab > .t-lamina { color: var(--arena); }

/* ══════════════════════════════════════════════════════════
   PROYECTOS · el botón se toca donde se ve
   ------------------------------------------------------------
   El detalle abierto se movía con translate3d(…, 20px): un
   desplazamiento en el eje Z dentro de una escena con perspectiva.
   Eso lo dibuja un poco más grande y más arriba de donde está su
   caja real, así que el enlace respondía por encima del botón y no
   sobre él. La profundidad no aportaba nada que no diera ya la
   sombra, y sale.
   ══════════════════════════════════════════════════════════ */
#proyectos .proy-grid--mascara .proy-detalle {
  transform: translate3d(0, 18px, 0);
}
#proyectos .proy-grid--mascara .panel.proy-abierto .proy-detalle,
#proyectos .proy-grid--mascara .panel:is(:hover, :focus-within) .proy-detalle {
  transform: none;
}
/* Y el botón, un objetivo táctil de verdad: 48px de alto, que es la
   medida a partir de la cual el dedo no falla. */
#proyectos .proy-grid--mascara .proy-detalle > .btn {
  position: relative;
  z-index: 8;
  min-height: 48px;
  padding: 13px 22px;
}

/* ══════════════════════════════════════════════════════════
   Los títulos, letra a letra (js/titulo-letras.js)
   ------------------------------------------------------------
   El <span> de cada letra es de línea y solo cambia de color: la
   disposición del título no se entera de que existe.

   Dos gestos con el mismo vocabulario. Con el ratón encima, la
   letra se tiñe. Al entrar, una ola le da esa misma caricia sola,
   de la primera letra a la última, y se acaba. El retraso de cada
   una es su posición (--i), así que la ola es una sola animación
   escalonada y no veinte temporizadores.
   ══════════════════════════════════════════════════════════ */
.h1-letra, .tt-letra { color: inherit; }

/* ── Al pasar el ratón: en TODOS los títulos ──
   El titular del hero va de blanco a ocre. Los encabezados de
   sección ya SON ocre, así que ahí el ocre se aviva — sube al sol,
   que es ese mismo color un paso más encendido — en vez de
   repetirse y no notarse. Y toda cursiva verde, en cualquier
   título, se enciende como el cristal. Un solo vocabulario para el
   titular y los seis encabezados. */
@media (hover: hover) and (pointer: fine) {
  .h1-letra, .tt-letra {
    cursor: default;
    /* Entra rápido y sale despacio: así el rastro del ratón se ve
       un instante más, en vez de apagarse de golpe. */
    transition: color .45s var(--sal), text-shadow .45s var(--sal);
  }
  .h1-letra:hover { color: var(--arena); transition-duration: .08s; }
  /* Los encabezados ya SON arena: al pasar el ratón no cambian de
     color, se iluminan. La letra sube medio tono —la misma arena con
     el sol encima— y alrededor queda un halo cálido del mismo ocre.
     Subirlo al naranja habría sido cambiar de color; esto es la
     misma tierra, un poco más encendida. */
  .tt-letra:hover {
    color: #f3d0a0;
    text-shadow:
      0 0 2px rgb(255 245 230 / .35),
      0 0 14px rgb(221 164 94 / .7),
      0 0 34px rgb(221 164 94 / .32);
    transition-duration: .08s;
  }

  /* El verde no cambia de color: se ENCIENDE. Núcleo casi blanco y
     el verde irradiando en tres halos, uno ceñido y dos abiertos —
     lo que hace una pieza de vidrio cuando le da la luz, y el mismo
     lenguaje del globo de cristal de la portada. */
  .h1-letra-cristal:hover,
  em .tt-letra:hover {
    color: #eafff1;
    text-shadow:
      0 0 2px rgb(255 255 255 / .9),
      0 0 12px rgb(61 220 110 / .95),
      0 0 30px rgb(61 220 110 / .55),
      0 0 62px rgb(61 220 110 / .28);
    transition-duration: .08s;
  }
}

/* ── La ola: el mismo gesto, dado solo ── */
.ola .h1-letra,
.ola .tt-letra {
  /* Sin fill-mode: con `both` la letra se quedaría con el valor final
     de la animación aplicado para siempre, y un valor animado gana al
     :hover en la cascada — el titular dejaría de responder al ratón en
     cuanto la ola terminara de pasar. */
  animation: olaLetra .9s var(--sal);
  animation-delay: calc(var(--i, 0) * 42ms);
}
.ola .h1-letra-cristal,
.ola em .tt-letra {
  animation-name: olaCristal;
}

/* El titular del hero arranca en blanco; la ola lo lleva al ocre y
   lo devuelve. */
@keyframes olaLetra {
  0%   { color: var(--tiza); text-shadow: none; }
  28%  { color: var(--arena); }
  100% { color: var(--tiza); text-shadow: none; }
}
/* Los encabezados ya están en ocre: ahí la ola es un golpe de luz. */
.ola .tt-letra { animation-name: olaLuz; }
@keyframes olaLuz {
  0%   { color: var(--arena); }
  28%  { color: var(--tiza); }
  100% { color: var(--arena); }
}
/* Y la cursiva verde, en las dos, destella como el cristal. */
@keyframes olaCristal {
  0%   { color: var(--prisma); text-shadow: none; }
  28%  {
    color: #eafff1;
    text-shadow:
      0 0 2px rgb(255 255 255 / .9),
      0 0 12px rgb(61 220 110 / .95),
      0 0 30px rgb(61 220 110 / .5);
  }
  100% { color: var(--prisma); text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .h1-letra, .tt-letra { transition: none; animation: none; }
}