/* ============================================================
   LCS — portal.css
   La portada (/): dos caminos, Branding y Diseño web.
   Solo la carga index.html. Todo lo que se mueve anima transform,
   translate, scale u opacity: nada que obligue a recalcular el
   layout cuadro a cuadro, salvo el reparto de ancho entre las dos
   cards al pasar el mouse (dos elementos, una sola transición).
   Las entradas esperan a la intro del logo con --intro-d.
   ============================================================ */

.portal {
  --d: var(--intro-d, 0s);
  background: var(--cream); color: var(--ink);
  min-height: 100vh; min-height: 100svh;
  display: flex;
  padding-block: clamp(84px, 12vh, 124px) clamp(22px, 3.4vh, 40px);
}
.portal__inner { display: flex; flex-direction: column; gap: clamp(22px, 3.4vh, 42px); }

/* ---------- Encabezado: título y, debajo, la bajada ---------- */
.portal__head { display: grid; gap: clamp(10px, 1.6vh, 18px); max-width: 60rem; }
.portal__title {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(34px, 4.6vw, 72px); line-height: .95; letter-spacing: -.035em;
  text-wrap: balance;
}
.portal__title .ln { display: block; overflow: hidden; padding-block: .03em; }
.portal__title .ln > span { display: block; animation: heroReveal .9s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--d) + .1s); }
.portal__title em { font-style: normal; color: inherit; }
.portal__lead {
  max-width: 62ch;
  font-size: clamp(15px, 1.25vw, 19px); font-weight: 300; line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  animation: portalUp .9s var(--ease) both; animation-delay: calc(var(--d) + .3s);
}

/* ---------- Las dos cards ---------- */
.paths {
  display: flex; gap: clamp(12px, 1.2vw, 18px);
  height: clamp(440px, calc(100svh - 340px), 720px);
}
.path {
  --r: clamp(20px, 1.9vw, 30px);
  --fg: var(--cream);
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.1vw, 34px);
  border-radius: var(--r);
  color: var(--fg);
  transition: flex-grow .95s var(--ease), box-shadow .6s var(--ease);
  animation: portalCard 1.15s cubic-bezier(.16, 1, .3, 1) both;
  -webkit-tap-highlight-color: transparent;
}
.path--brand { background: var(--ink); --glow: rgba(1, 135, 81, .38); animation-delay: calc(var(--d) + .34s); }
.path--web   { background: var(--green); --glow: rgba(255, 255, 255, .2); animation-delay: calc(var(--d) + .46s); }
.path:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.path--web:focus-visible { outline-color: var(--ink); }

/* Luz que sigue al puntero (portal.js escribe --mx / --my) */
.path__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), var(--glow), transparent 62%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.path:hover .path__glow, .path:focus-visible .path__glow { opacity: 1; }

/* Fila superior: número · rubro · flecha */
.path__top { display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; }
.path__no {
  font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .06em;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
}
.path__kicker {
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 70%, transparent);
}
.path__go {
  margin-left: auto; flex: none;
  width: clamp(46px, 3.6vw, 56px); height: clamp(46px, 3.6vw, 56px); border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--fg) 38%, transparent);
  display: grid; place-items: center;
  transition: background-color .45s var(--ease), border-color .45s var(--ease), transform .6s var(--ease);
}
.path__go::after {
  content: ""; width: 38%; height: 38%; background: var(--fg);
  -webkit-mask: var(--ico-arrow) center / contain no-repeat;
          mask: var(--ico-arrow) center / contain no-repeat;
  transition: transform .6s var(--ease), background-color .45s var(--ease);
}
.path:hover .path__go, .path:focus-visible .path__go { background: var(--fg); border-color: var(--fg); transform: scale(1.06); }
.path:hover .path__go::after, .path:focus-visible .path__go::after { transform: rotate(45deg); background: var(--ink); }
.path--web:hover .path__go::after, .path--web:focus-visible .path__go::after { background: var(--green); }

/* Zona visual: ocupa el centro y no recibe el mouse */
.path__visual {
  position: relative; flex: 1 1 auto; min-height: 0; pointer-events: none;
  margin-block: clamp(14px, 2.4vh, 28px);
  /* Las piezas se dimensionan contra este recuadro (cqw / cqh): así nunca
     invaden el rótulo de arriba ni el nombre de abajo, mida lo que mida
     la pantalla. */
  container-type: size;
}

/* Texto inferior */
.path__body { position: relative; z-index: 2; display: grid; gap: 12px; justify-items: start; }
.path__name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(44px, 5.6vw, 96px); line-height: .88; letter-spacing: -.045em;
}
.path__desc {
  max-width: 34ch; font-size: clamp(14px, 1.05vw, 16px); font-weight: 400; line-height: 1.5;
  color: color-mix(in srgb, var(--fg) 82%, transparent);
}
.path__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.path__tags span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  color: color-mix(in srgb, var(--fg) 88%, transparent);
}
.path__cta {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Visual 1 · brandbook en abanico ---------- */
.bb {
  --rx: 0deg; --ry: 0deg;
  position: absolute; left: 50%; top: 50%;
  width: min(60cqw, calc(84cqh * 1.414), 480px); aspect-ratio: 800 / 566;
  transform: perspective(1100px) translate(-50%, -50%) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.bb__grid {
  position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1;
  translate: -50% -50%;
  fill: none; stroke: color-mix(in srgb, var(--cream) 14%, transparent); stroke-width: 1;
  animation: bbSpin 80s linear infinite;
}
.bb__grid circle, .bb__grid line {
  stroke-dasharray: 1100; stroke-dashoffset: 1100;
  animation: bbDraw 2.2s cubic-bezier(.65, 0, .35, 1) forwards;
  animation-delay: calc(var(--d) + .55s);
}
.bb__grid circle:nth-child(2) { animation-delay: calc(var(--d) + .7s); }
.bb__grid line { animation-delay: calc(var(--d) + .85s); }
.bb__page {
  position: absolute; inset: 0;
  border-radius: clamp(6px, .6vw, 10px); overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 34px 60px -24px rgba(0,0,0,.75), 0 12px 24px -12px rgba(0,0,0,.5);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  animation: bbIn 1.1s cubic-bezier(.16, 1, .3, 1) both;
}
.bb__page img { width: 100%; height: 100%; object-fit: cover; }
.bb__page--1 { transform: translate(-17%, 5%) rotate(-9deg);  animation-delay: calc(var(--d) + .7s); }
.bb__page--2 { transform: translate(16%, -3%) rotate(7.5deg); animation-delay: calc(var(--d) + .8s); }
.bb__page--3 { transform: translate(0, 7%) rotate(-1.5deg);   animation-delay: calc(var(--d) + .92s); }
.path:hover .bb__page--1, .path:focus-visible .bb__page--1 { transform: translate(-31%, 1%) rotate(-14deg); }
.path:hover .bb__page--2, .path:focus-visible .bb__page--2 { transform: translate(30%, -7%) rotate(12deg); }
.path:hover .bb__page--3, .path:focus-visible .bb__page--3 { transform: translate(0, 3%) rotate(0deg) scale(1.05); }
.bb__chips {
  position: absolute; right: -4%; bottom: -10%; z-index: 3;
  display: flex; animation: bbIn 1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--d) + 1.05s);
}
.bb__chips i {
  width: clamp(22px, 2vw, 30px); aspect-ratio: 1; border-radius: 50%;
  background: var(--c); border: 2px solid var(--ink);
  margin-left: -8px; transition: margin .6s var(--ease), transform .6s var(--ease);
}
.path:hover .bb__chips i, .path:focus-visible .bb__chips i { margin-left: 3px; }
.path:hover .bb__chips i:nth-child(2) { transform: translateY(-4px); }
.path:hover .bb__chips i:nth-child(4) { transform: translateY(-4px); }

/* ---------- Visual 2 · navegador con un sitio real ---------- */
.browser {
  --rx: 0deg; --ry: 0deg;
  position: absolute; left: 50%; top: 50%;
  width: min(86cqw, calc(100cqh * 16 / 10.4), 560px); aspect-ratio: 16 / 10.4;
  display: flex; flex-direction: column;
  background: var(--cream); border-radius: clamp(8px, .8vw, 12px); overflow: hidden;
  box-shadow: 0 40px 70px -30px rgba(0, 40, 22, .75), 0 14px 26px -14px rgba(0, 0, 0, .35);
  transform: perspective(1100px) translate(-50%, -50%) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
  animation: bbIn 1.1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--d) + .8s);
}
.browser__bar {
  flex: none; display: flex; align-items: center; gap: 6px;
  height: clamp(24px, 2.2vw, 32px); padding-inline: 12px;
  background: #ecebe7; border-bottom: 1px solid rgba(10,10,10,.06);
}
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(10,10,10,.16); }
.browser__url {
  margin-left: 10px; padding: 3px 12px; border-radius: 999px;
  font-size: 10px; letter-spacing: .02em; color: rgba(10,10,10,.5); background: rgba(255,255,255,.75);
}
.browser__screen { position: relative; flex: 1; overflow: hidden; }
.browser__screen img {
  width: 100%; height: auto;
  animation: shotScroll 22s cubic-bezier(.65, 0, .35, 1) infinite alternate;
  animation-delay: calc(var(--d) + 1.6s);
}
.path:hover .browser, .path:focus-visible .browser { box-shadow: 0 50px 80px -30px rgba(0, 40, 22, .85), 0 16px 30px -14px rgba(0,0,0,.4); }

/* ---------- Pie de la portada ---------- */
.portal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  font-size: 13px; color: color-mix(in srgb, var(--ink) 62%, transparent);
  animation: portalUp .9s var(--ease) both; animation-delay: calc(var(--d) + .9s);
}
.portal__foot .link-arrow { color: var(--accent-text); }

/* ---------- Transición al entrar a un camino ----------
   portal.js clona el color de la card y lo expande a pantalla
   completa; la página de destino aparece con un fundido nativo. */
.path-wipe {
  position: fixed; inset: 0; z-index: 9500; pointer-events: none;
  transition: clip-path .62s cubic-bezier(.76, 0, .24, 1);
}

/* ---------- Escritorio: la card elegida gana ancho ---------- */
@media (hover: hover) and (min-width: 861px) {
  .paths:has(.path:hover, .path:focus-visible) .path { flex-grow: .8; }
  .paths:has(.path:hover, .path:focus-visible) .path:is(:hover, :focus-visible) { flex-grow: 1.22; }
  .path__tags span { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .path:hover .path__tags span, .path:focus-visible .path__tags span { opacity: 1; transform: none; }
  .path:hover .path__tags span:nth-child(2) { transition-delay: .05s; }
  .path:hover .path__tags span:nth-child(3) { transition-delay: .1s; }
  .path:hover .path__tags span:nth-child(4) { transition-delay: .15s; }
}

/* ---------- Tablet y celular: siguen una al lado de la otra ----------
   Las dos cards comparten la pantalla también en el celular. Con el alto
   fijo de .paths el recuadro visual sigue siendo flexible y las piezas se
   miden contra él (cq), así que entran sin pisar el texto. Lo que no
   cabe en media pantalla —rótulo y etiquetas— se guarda en el celular. */
@media (max-width: 860px) {
  .paths { height: clamp(420px, calc(100svh - 300px), 620px); gap: 12px; }
  .path { padding: clamp(14px, 3.2vw, 22px); --r: clamp(18px, 4vw, 24px); }
  .path__go { width: clamp(34px, 8.6vw, 46px); height: clamp(34px, 8.6vw, 46px); }
  .path__visual { margin-block: 10px 14px; }
  .bb { width: min(64cqw, calc(80cqh * 1.414)); }
  .browser { width: min(94cqw, calc(96cqh * 16 / 10.4)); }
  .browser__bar { height: clamp(16px, 4.4vw, 26px); padding-inline: 8px; gap: 4px; }
  .browser__bar i { width: 5px; height: 5px; }
  .browser__url { font-size: clamp(7px, 1.9vw, 10px); padding: 2px 8px; margin-left: 4px; }
  .bb__chips i { width: clamp(14px, 3.6vw, 24px); margin-left: -5px; border-width: 1.5px; }
  .path__name { font-size: clamp(27px, 7.6vw, 58px); line-height: .92; }
  .path__desc { font-size: clamp(12px, 3.1vw, 15px); line-height: 1.42; }
}
@media (max-width: 560px) {
  .portal { padding-top: 92px; }
  .portal__title { font-size: clamp(30px, 9.2vw, 42px); }
  .portal__inner { gap: 20px; }
  .paths { gap: 10px; height: clamp(360px, calc(100svh - 290px), 480px); }
  /* En media pantalla las piezas pueden crecer y asomarse por el borde:
     la card las recorta. El navegador se para en vertical, como una
     ventana alta, y recorre menos porque muestra más del sitio. */
  .bb { width: min(86cqw, calc(70cqh * 1.414)); }
  .browser { aspect-ratio: 10 / 13.5; width: min(90cqw, calc(96cqh * 10 / 13.5)); }
  .browser__screen img { animation-name: shotScrollTall; }
  /* El botón de WhatsApp taparía el texto de las cards; acá el contacto
     ya está al pie de la portada. */
  .wa-fab { display: none; }
  .path__kicker, .path__tags { display: none; }
  .path__top { justify-content: space-between; }
  .path__no { font-size: 11px; padding: 4px 8px; }
  .path__body { gap: 8px; }
}
@media (max-width: 359px) {
  .paths { height: clamp(316px, calc(100svh - 252px), 420px); }
  .path { padding: 12px; }
  .path__desc { font-size: 11.5px; }
  .portal__foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- Keyframes ---------- */
@keyframes portalUp   { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes portalCard { from { opacity: 0; translate: 0 90px; } to { opacity: 1; translate: 0 0; } }
@keyframes bbIn   { from { opacity: 0; scale: .86; translate: 0 36px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes bbDraw { to { stroke-dashoffset: 0; } }
@keyframes bbSpin { to { rotate: 360deg; } }
@keyframes shotScrollTall {
  0%, 12%  { transform: translateY(0); }
  44%, 56% { transform: translateY(-26%); }
  88%, 100% { transform: translateY(-50%); }
}
@keyframes shotScroll {
  0%, 12%  { transform: translateY(0); }
  44%, 56% { transform: translateY(-38%); }
  88%, 100% { transform: translateY(-76%); }
}

@media (prefers-reduced-motion: reduce) {
  .portal *, .portal *::before, .portal *::after { animation: none !important; transition: none !important; }
  .bb__grid circle, .bb__grid line { stroke-dashoffset: 0; }
}