/* =============================================================================
   VIDRIO LIQUIDO de la portada
   Tres cosas separan el vidrio de Apple de un gris esmerilado, y son las tres
   que van aca: la saturacion de lo que se ve detras (los colores se avivan en
   vez de apagarse), el canto especular (brilla arriba a la izquierda, se apaga
   en el medio y vuelve a asomar abajo a la derecha, como un borde grueso que
   refracta) y el grosor (luz interna arriba, sombra corta adentro abajo).
   Carga despues de portada.css y le gana por orden, no por especificidad.
   ============================================================================= */

.portada {
  --liq-base: light-dark(rgb(255 255 255 / 50%), rgb(20 31 54 / 52%));
  --liq-luz: light-dark(rgb(255 255 255 / 75%), rgb(190 225 255 / 11%));
  --liq-filtro: blur(22px) saturate(1.9) brightness(1.03);
  --liq-canto-alto: light-dark(#ffffff, rgb(255 255 255 / 62%));
  --liq-canto-medio: light-dark(rgb(255 255 255 / 22%), rgb(255 255 255 / 5%));
  --liq-canto-bajo: light-dark(rgb(255 255 255 / 80%), rgb(170 220 255 / 28%));
  --liq-sombra: light-dark(rgb(44 56 104 / 40%), rgb(0 0 0 / 70%));
  --liq-arriba: light-dark(rgb(255 255 255 / 95%), rgb(255 255 255 / 24%));
  --liq-abajo: light-dark(rgb(255 255 255 / 45%), rgb(255 255 255 / 5%));
}

/* ---- el material ---- */
.portada :is(.servicio:first-child, .entrega:nth-child(-n+3), .opinion, .retrato-firma, .retrato-oficio, .paso-vineta) {
  background:
    radial-gradient(130% 70% at 12% 0%, var(--liq-luz), transparent 56%),
    linear-gradient(180deg, light-dark(rgb(255 255 255 / 24%), rgb(255 255 255 / 5%)), transparent 46%),
    var(--liq-base);
  -webkit-backdrop-filter: var(--liq-filtro);
  backdrop-filter: var(--liq-filtro);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 var(--liq-arriba),
    inset 0 -1px 0 var(--liq-abajo),
    inset 0 0 22px light-dark(rgb(255 255 255 / 22%), rgb(255 255 255 / 3%)),
    0 22px 48px -28px var(--liq-sombra);
}
.portada :is(.servicio:first-child, .opinion) { position: relative; }

/* El canto especular es un anillo de 1px hecho con mascara: el fondo del anillo
   es la luz, y la mascara deja solo el borde. Lleva dos capas: la fija, que es
   el brillo del material, y la que sigue al puntero, que portada.js ya mueve con
   --luz-x y --luz-y. Antes la del puntero vivia sola y aparecia recien al pasar
   el mouse; ahora el borde brilla siempre y el mouse lo enciende mas. */
.portada :is(.servicio:first-child, .entrega:nth-child(-n+3), .opinion, .retrato-firma, .retrato-oficio, .paso-vineta)::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.2px; opacity: 1;
  background:
    radial-gradient(170px circle at var(--luz-x, 30%) var(--luz-y, 0%), rgb(255 255 255 / var(--canto-mouse, 0)), transparent 78%),
    linear-gradient(135deg, var(--liq-canto-alto), var(--liq-canto-medio) 32%, var(--liq-canto-medio) 64%, var(--liq-canto-bajo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity 300ms ease;
}
.portada .reflejo-activo { --canto-mouse: .95; }

/* ---- la barra: mismo material, y se asienta cuando se baja ---- */
.portada .nav-sitio {
  background:
    radial-gradient(120% 90% at 10% 0%, var(--liq-luz), transparent 60%),
    var(--liq-base);
  -webkit-backdrop-filter: var(--liq-filtro);
  backdrop-filter: var(--liq-filtro);
  border-color: light-dark(rgb(255 255 255 / 85%), rgb(255 255 255 / 15%));
  box-shadow: inset 0 1px 0 var(--liq-arriba), inset 0 -1px 0 var(--liq-abajo), 0 10px 30px -22px var(--liq-sombra);
  transition: box-shadow 400ms ease, background-color 400ms ease;
}
.portada.con-scroll .nav-sitio {
  box-shadow: inset 0 1px 0 var(--liq-arriba), inset 0 -1px 0 var(--liq-abajo), 0 16px 40px -18px var(--liq-sombra);
}

/* ---- botones liquidos ---- */
.portada .boton {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 85%),
    inset 0 -3px 8px rgb(60 80 160 / 16%),
    0 8px 30px -12px #76b9eb90;
  transition: box-shadow .25s ease, scale .45s cubic-bezier(.34, 1.56, .64, 1);
}
.portada .boton:not(.boton-suave) {
  background: linear-gradient(115deg, #c2c9ff, #9ce5e8 40%, #cdb9ff 70%, #c2c9ff);
  background-size: 260% 100%;
}
/* portada.css le cambia la sombra al hover con mas especificidad, y se llevaba
   las luces internas: sin ellas el boton se aplana justo cuando se lo señala. */
.portada .boton:hover {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), inset 0 -3px 8px rgb(60 80 160 / 16%), 0 8px 28px -6px #76b9eb90;
}
/* El apreton de una gota: se achica al tocar y vuelve con rebote. */
.portada .boton:active { scale: .95; transition-duration: .12s; }
.portada .boton-suave {
  background: radial-gradient(120% 90% at 20% 0%, var(--liq-luz), transparent 60%), var(--liq-base);
  -webkit-backdrop-filter: var(--liq-filtro);
  backdrop-filter: var(--liq-filtro);
  border-color: light-dark(rgb(255 255 255 / 90%), rgb(255 255 255 / 18%));
  box-shadow: inset 0 1px 0 var(--liq-arriba), inset 0 -1px 0 var(--liq-abajo), 0 8px 24px -16px var(--liq-sombra);
}
.portada .boton-suave:hover { background: radial-gradient(120% 90% at 20% 0%, var(--liq-luz), transparent 60%), var(--liq-base); }
.portada .opiniones-flechas button {
  border-radius: 50%; border-color: light-dark(rgb(255 255 255 / 90%), rgb(255 255 255 / 16%));
  background: radial-gradient(120% 90% at 30% 0%, var(--liq-luz), transparent 60%), var(--liq-base);
  -webkit-backdrop-filter: var(--liq-filtro);
  backdrop-filter: var(--liq-filtro);
  box-shadow: inset 0 1px 0 var(--liq-arriba), 0 8px 22px -16px var(--liq-sombra);
  transition: scale .45s cubic-bezier(.34, 1.56, .64, 1), color .2s, border-color .2s;
}
.portada .opiniones-flechas button:active { scale: .9; transition-duration: .1s; }

/* ---- el retrato ---- */
.portada .marco-retrato {
  background: radial-gradient(120% 60% at 20% 0%, var(--liq-luz), transparent 60%), var(--liq-base);
  -webkit-backdrop-filter: var(--liq-filtro);
  backdrop-filter: var(--liq-filtro);
  box-shadow: inset 0 1px 0 var(--liq-arriba), 0 30px 70px -40px var(--liq-sombra);
}

/* ---- las reseñas: pasan a ser vidrio de verdad ---- */
.portada .opinion { border-left: 0; border-radius: 22px; padding: 26px; }
.portada .opinion:hover { box-shadow: inset 0 1px 0 var(--liq-arriba), inset 0 -1px 0 var(--liq-abajo), 0 26px 52px -28px var(--liq-sombra); }

/* ---- los clientes: pastillas de vidrio en vez de una lista con puntitos ---- */
/* Sin backdrop-filter a proposito: son nueve, chicas y juntas, y el desenfoque
   no se nota a ese tamaño; se pagaria nueve veces por nada. */
.portada .clientes { gap: 10px; }
.portada .clientes li {
  padding: 9px 16px; border-radius: 99px; font-size: .95rem; color: var(--fg);
  background: radial-gradient(120% 100% at 20% 0%, var(--liq-luz), transparent 65%), var(--liq-base);
  border: 1px solid light-dark(rgb(255 255 255 / 85%), rgb(255 255 255 / 12%));
  box-shadow: inset 0 1px 0 var(--liq-arriba), 0 8px 20px -16px var(--liq-sombra);
  transition: translate .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
.portada .clientes li::before { background: light-dark(#5b6fd0, #8fd6ff); box-shadow: 0 0 8px light-dark(#5b6fd088, #8fd6ffaa); }
.portada .clientes li:hover { translate: 0 -2px; box-shadow: inset 0 1px 0 var(--liq-arriba), 0 12px 24px -14px var(--liq-sombra); }

/* ---- el plan: numeros con color y una linea que los une ---- */
.portada .pasos { position: relative; }
/* ponytail-keep: border-radius 0. El numero nacio adentro de un circulo y site.css
   le sigue dando border-radius 50%; portada lo estiro a todo el ancho, asi que su
   caja es una elipse de 352x46. El color solido no se recorta con el borde, pero
   el fondo si, y con background-clip text el degradé solo pinta adentro de la
   elipse: el cero caia en la punta angosta y se leia "◦1". Parecia culpa del
   display flex o del contenido en dos partes; se probaron las dos y no era. */
.portada .pasos li::before {
  border-radius: 0;
  background: linear-gradient(120deg, light-dark(#3a4bc0, #b8c4ff), light-dark(#1f8f8c, #8ff0e2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.portada .pasos::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, light-dark(#5063d0, #9fb0ff), light-dark(#2aa39e, #7fe8da));
  transform-origin: 0 50%;
}

/* ---- el contacto deja ver la aurora ---- */
/* Sin backdrop-filter: la aurora se mueve todo el tiempo, y desenfocar una franja
   de mil pixeles de alto encima la haria recalcular en cada cuadro. La aurora ya
   es difusa; alcanza con que el velo sea translucido. */
.portada .contacto { background: light-dark(rgb(222 231 244 / 74%), rgb(11 19 35 / 76%)); }
.portada .campo input, .portada .campo textarea {
  background: radial-gradient(120% 80% at 15% 0%, var(--liq-luz), transparent 55%), var(--liq-base);
  border-color: light-dark(rgb(255 255 255 / 90%), rgb(255 255 255 / 14%));
  box-shadow: inset 0 1px 0 var(--liq-arriba), inset 0 2px 6px light-dark(rgb(40 50 90 / 8%), rgb(0 0 0 / 25%));
  transition: box-shadow .3s ease, border-color .3s ease;
}
.portada .campo input:focus, .portada .campo textarea:focus {
  outline: none; border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: inset 0 1px 0 var(--liq-arriba), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 10px 26px -16px var(--liq-sombra);
}

/* ---- estrellas que brillan ---- */
.portada .estrellas {
  background: linear-gradient(100deg, currentColor 0 40%, light-dark(#fff3c4, #fffbe6) 50%, currentColor 60% 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =============================================================================
   MOVIMIENTO
   Todo detras de prefers-reduced-motion. Lo que aparece al hacer scroll usa las
   animaciones atadas al scroll del propio navegador: sin guion, sin
   IntersectionObserver y sin costo cuando la pagina esta quieta. Donde el
   navegador no las tiene, el contenido simplemente esta, que es lo correcto.
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* El degradé del boton principal se mueve despacio: vivo, no ansioso. */
  .portada .boton:not(.boton-suave) { animation: degrade-vivo 9s ease-in-out infinite alternate; }
  @keyframes degrade-vivo { from { background-position: 0% 50% } to { background-position: 100% 50% } }

  /* Las estrellas: un reflejo que pasa cada tanto. */
  .portada .estrellas { animation: brillo-estrellas 6s ease-in-out 1.2s infinite; }
  @keyframes brillo-estrellas { 0%, 70% { background-position: 100% 0 } 100% { background-position: 0% 0 } }

  /* ---- el hero entra en cascada al cargar ---- */
  .portada .hero-texto > * { animation: entrar-hero 950ms cubic-bezier(.22, 1, .3, 1) both; }
  .portada .hero-texto > :nth-child(1) { animation-delay: 60ms }
  .portada .hero-texto > :nth-child(2) { animation-delay: 150ms }
  .portada .hero-texto > :nth-child(3) { animation-delay: 260ms }
  .portada .hero-texto > :nth-child(4) { animation-delay: 340ms }
  .portada .hero-texto > :nth-child(5) { animation-delay: 430ms }
  .portada .hero-texto > :nth-child(6) { animation-delay: 520ms }
  @keyframes entrar-hero { from { opacity: 0; translate: 0 22px; filter: blur(6px) } }
  .portada .marco-caja { animation: entrar-retrato 1200ms cubic-bezier(.22, 1, .3, 1) 200ms both; }
  @keyframes entrar-retrato { from { opacity: 0; translate: 0 30px; scale: .96 } }
  /* Las dos fichas del retrato flotan a destiempo: juntas parecerian pegadas. */
  .portada .retrato-oficio { animation: flotar-ficha 6.5s ease-in-out 1.4s infinite alternate; }
  .portada .retrato-firma { animation: flotar-ficha 7.5s ease-in-out 2.2s infinite alternate-reverse; }
  @keyframes flotar-ficha { from { translate: 0 0 } to { translate: 0 -7px } }

  @supports (animation-timeline: view()) {
    /* ---- lo que aparece al entrar en pantalla ---- */
    .portada :is(
      :is(#servicios, #services) > .envoltorio > :is(.seccion-titulo, .seccion-bajada), .historia-servicio,
      :is(#servicios, #services) .grilla-3 > *,
      .respaldo-portada .envoltorio > *,
      .trabajos-portada .seccion-titulo, .trabajos-portada .seccion-bajada, .entrega,
      #plan .seccion-titulo, #plan .seccion-bajada, .pasos li,
      :is(#trayectoria, #clients) :is(.seccion-titulo, .seccion-bajada), .clientes li, .clientes-nota,
      #opiniones .seccion-titulo, #opiniones .seccion-bajada, .opiniones,
      .contacto .seccion-titulo, .contacto-grilla > *
    ) {
      animation: aparecer linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
    @keyframes aparecer { from { opacity: 0; translate: 0 36px; scale: .975 } }

    /* Las piezas de una misma fila entran escalonadas, no en bloque. */
    .portada .entrega:nth-child(2), .portada .pasos li:nth-child(2), .portada :is(#servicios, #services) .grilla-3 > :nth-child(2) { animation-range: entry 6% cover 30%; }
    .portada .entrega:nth-child(3), .portada .pasos li:nth-child(3), .portada :is(#servicios, #services) .grilla-3 > :nth-child(3) { animation-range: entry 12% cover 34%; }
    .portada .entrega:nth-child(4) { animation-range: entry 16% cover 38%; }
    .portada .clientes li { animation-name: aparecer-pastilla; }
    .portada .clientes li:nth-child(2n) { animation-range: entry 5% cover 30%; }
    .portada .clientes li:nth-child(3n) { animation-range: entry 10% cover 34%; }
    @keyframes aparecer-pastilla { from { opacity: 0; scale: .6; translate: 0 14px } }

    /* La linea del plan se traza mientras se baja por la seccion. */
    .portada .pasos::after { animation: trazar linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    @keyframes trazar { from { transform: scaleX(0) } }

    /* Los aparatos de la tarjeta de Apple se dibujan con el scroll. El trazo
       arranca oculto solo aca adentro: sin estas animaciones queda dibujado.
       .medido lo pone liquido.js despues de darle pathLength=1 a cada forma: sin
       eso, dasharray 1 son rayitas de un pixel y el dibujo saldria punteado. */
    .portada .dispositivos.medido :is(rect, path) {
      stroke-dasharray: 1; stroke-dashoffset: 0;
      animation: dibujar linear both; animation-timeline: view(); animation-range: entry 10% cover 42%;
    }
    @keyframes dibujar { from { stroke-dashoffset: 1; fill-opacity: 0 } 70% { fill-opacity: 0 } }
  }
}