/* =========================================================
   CG Estampería · Estilos generales
   Dirección visual "Galería clara": fondo claro, mucho aire,
   movimiento suave tipo iOS. El color lo ponen las fotos.
   ========================================================= */

:root {
  /* Colores (salen del logo) */
  --fondo: #f7f7f7;
  --papel: #ffffff;
  --tinta: #0b0b0b;
  --grafito: #3b3c39;
  --gris: #6b6c68;
  --gris-claro: #a3a49f;
  --linea: #e4e4e1;
  --vidrio: rgba(255, 255, 255, 0.72);
  --vidrio-borde: rgba(255, 255, 255, 0.6);
  --sombra: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --sombra-alta: 0 2px 6px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.12);
  --verde-wa: #25d366;

  /* Letras */
  --titulos: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Medidas */
  --ancho: 1240px;
  --margen: clamp(20px, 5vw, 56px);
  --radio: 22px;
  --radio-chico: 14px;
  --barra: 72px;

  /* Curvas de movimiento tipo iOS */
  --suave: cubic-bezier(.22, 1, .36, 1);
  --rapida: cubic-bezier(.4, 0, .2, 1);
  --resorte: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--tinta); color: var(--papel); }

.envoltura { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--titulos);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.015em; }
p { margin: 0 0 1em; text-wrap: pretty; }
.bajada { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--gris); max-width: 46ch; }
.etiqueta {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris);
}
.etiqueta::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.ancho-tit { font-variation-settings: "wdth" 125; }

/* ---------- Botones ---------- */
.boton {
  --b-fondo: var(--tinta); --b-texto: var(--papel);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 1.6em;
  border: 0; border-radius: 999px;
  background: var(--b-fondo); color: var(--b-texto);
  font-weight: 600; font-size: 1rem; letter-spacing: -0.005em;
  transition: transform .5s var(--resorte), box-shadow .4s var(--suave), background .3s;
  will-change: transform;
}
.boton:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--sombra-alta); }
.boton:active { transform: scale(.97); transition-duration: .1s; }
.boton--claro { --b-fondo: var(--papel); --b-texto: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); }
.boton--wa { --b-fondo: var(--verde-wa); --b-texto: #06331a; }
.boton svg { width: 20px; height: 20px; }
.flecha { transition: transform .4s var(--resorte); }
.boton:hover .flecha, .enlace:hover .flecha { transform: translateX(4px); }
.enlace { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- Barra superior (vidrio) ---------- */
.barra {
  position: fixed; inset: 12px 12px auto; z-index: 50;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 10px 0 18px;
  border-radius: 999px;
  background: var(--vidrio);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  box-shadow: inset 0 0 0 1px var(--vidrio-borde), var(--sombra);
  max-width: 1180px; margin-inline: auto;
  view-transition-name: barra;
  transition: transform .6s var(--suave), opacity .4s;
}
.barra.oculta { transform: translateY(-140%); }
.barra__logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-family: var(--titulos); letter-spacing: -0.01em; }
.barra__logo svg { width: 46px; height: auto; view-transition-name: logo; }
.barra__logo span { font-size: .95rem; }
.barra__menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.barra__menu a {
  display: block; padding: 8px 14px; border-radius: 999px; font-size: .93rem; font-weight: 500; color: var(--grafito);
  transition: background .3s, color .3s;
}
.barra__menu a:hover { background: rgba(0,0,0,.05); color: var(--tinta); }
.barra__menu a[aria-current="page"] { background: var(--tinta); color: var(--papel); }
.barra__cta { min-height: 44px; padding: 0 1.2em; font-size: .93rem; }
.barra__abrir { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; }
.barra__abrir span { display: block; width: 20px; height: 1.5px; margin: 5px auto; background: var(--tinta); transition: transform .4s var(--suave), opacity .3s; }

@media (max-width: 960px) {
  .barra__menu, .barra__cta { display: none; }
  .barra__abrir { display: block; }
}

/* Menú celular: hoja que baja */
.hoja {
  position: fixed; inset: 0; z-index: 60;
  display: grid; align-content: start;
  padding: 90px var(--margen) 40px;
  background: rgba(247,247,247,.86);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--suave), visibility 0s .45s;
}
.hoja.abierta { opacity: 1; visibility: visible; transition: opacity .45s var(--suave); }
.hoja a.hoja__item {
  font-family: var(--titulos); font-variation-settings: "wdth" 115; font-weight: 700;
  font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -0.03em; line-height: 1.2;
  padding: 6px 0; border-bottom: 1px solid var(--linea);
  transform: translateY(24px); opacity: 0;
  transition: transform .7s var(--resorte), opacity .5s var(--suave);
}
.hoja.abierta a.hoja__item { transform: none; opacity: 1; }
.hoja.abierta a.hoja__item:nth-child(2) { transition-delay: .04s; }
.hoja.abierta a.hoja__item:nth-child(3) { transition-delay: .08s; }
.hoja.abierta a.hoja__item:nth-child(4) { transition-delay: .12s; }
.hoja.abierta a.hoja__item:nth-child(5) { transition-delay: .16s; }
.hoja.abierta a.hoja__item:nth-child(6) { transition-delay: .20s; }
.hoja__cerrar { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--papel); box-shadow: var(--sombra); font-size: 1.4rem; }
.hoja .boton { margin-top: 28px; justify-self: start; }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--verde-wa); color: #06331a; font-weight: 600; font-size: .95rem;
  box-shadow: 0 10px 30px rgba(37,211,102,.35), 0 2px 6px rgba(0,0,0,.08);
  transform: translateY(120px); opacity: 0;
  transition: transform .8s var(--resorte), opacity .4s;
}
.wa-flotante.visible { transform: none; opacity: 1; }
.wa-flotante svg { width: 26px; height: 26px; }
.wa-flotante:hover { transform: translateY(-3px) scale(1.03); }
@media (max-width: 600px) { .wa-flotante span { display: none; } .wa-flotante { padding: 0; width: 58px; justify-content: center; } }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(80px, 12vw, 160px); }
.seccion--papel { background: var(--papel); }
.seccion--tinta { background: var(--tinta); color: var(--papel); }
.seccion--tinta .bajada, .seccion--tinta .etiqueta { color: var(--gris-claro); }
.cabeza { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); }
.cabeza--fila { grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 760px) { .cabeza--fila { grid-template-columns: 1fr; } }

/* Cabecera de páginas internas */
.portada { padding: calc(var(--barra) + clamp(60px, 10vw, 120px)) 0 clamp(50px, 7vw, 90px); }
.portada h1 { max-width: 15ch; margin-top: 18px; }
.portada .bajada { margin-top: 22px; }

/* ---------- Aparición al hacer scroll ---------- */
.aparece { opacity: 0; transform: translateY(36px) scale(.985); transition: opacity 1s var(--suave), transform 1.2s var(--suave); }
.aparece.visto { opacity: 1; transform: none; }
.aparece[data-retraso="1"] { transition-delay: .08s; }
.aparece[data-retraso="2"] { transition-delay: .16s; }
.aparece[data-retraso="3"] { transition-delay: .24s; }
.aparece[data-retraso="4"] { transition-delay: .32s; }

/* Palabras que suben de a una */
.palabras .p { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.palabras .p > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--suave); }
.palabras.visto .p > span { transform: none; }

/* Imagen que se revela con cortina */
.revela { clip-path: inset(12% 6% 12% 6% round var(--radio)); transition: clip-path 1.4s var(--suave); }
.revela.visto { clip-path: inset(0 0 0 0 round var(--radio)); }
.revela img, .revela video { transform: scale(1.14); transition: transform 1.8s var(--suave); }
.revela.visto img, .revela.visto video { transform: scale(1); }

/* ---------- Tarjetas ---------- */
.tarjeta {
  position: relative; overflow: hidden;
  border-radius: var(--radio); background: var(--papel);
  box-shadow: var(--sombra);
  transition: transform .7s var(--resorte), box-shadow .5s var(--suave);
}
.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
.tarjeta img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave); }
.tarjeta:hover img { transform: scale(1.05); }

.chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--linea); background: var(--papel);
  font-size: .85rem; font-weight: 500; color: var(--grafito);
}

/* ---------- Inicio: héroe con píldora ---------- */
.heroe {
  position: relative; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto; align-items: center;
  padding: calc(var(--barra) + 24px) 0 28px;
  overflow: hidden;
  --fs: min(22vh, 15vw);
}
.heroe__fondo { position: absolute; inset: 0; z-index: -1; opacity: 0; background:
  radial-gradient(60% 50% at 50% 42%, #ffffff 0%, rgba(255,255,255,0) 70%), var(--fondo); }
.heroe__fondo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.heroe__centro { display: grid; justify-items: center; gap: clamp(22px, 4vh, 40px); text-align: center; }
.monograma { display: flex; align-items: center; justify-content: center; gap: calc(var(--fs) * .06); height: calc(var(--fs) * 1.15); }
.monograma__letra { height: var(--fs); width: auto; flex: none; }
.pildora {
  position: relative; flex: none;
  height: calc(var(--fs) * 1.04); width: calc(var(--fs) * .012);
  border-radius: 999px; overflow: hidden; background: #d9d6d2;
  clip-path: inset(50% 0 50% 0 round 999px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.35);
}
.pildora video, .pildora img.pildora__poster {
  position: absolute; top: 0; left: 50%; height: 100%;
  width: calc(var(--fs) * 2.3); max-width: none; transform: translateX(-50%);
  object-fit: cover; object-position: center 60%;
}
.pildora__linea { position: absolute; inset: 0; background: #b9b9b9; }
.pildora__icono { position: absolute; top: 50%; width: calc(var(--fs) * .13); height: calc(var(--fs) * .13); transform: translateY(-50%); color: #fff; opacity: 0; }
.pildora__icono--izq { left: calc(var(--fs) * .1); }
.pildora__icono--der { right: calc(var(--fs) * .1); }
.heroe h1 { font-size: clamp(2rem, 4.4vw, 3.9rem); max-width: 18ch; }
.heroe .bajada { margin: 0 auto; text-align: center; }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.heroe__pie { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.heroe__pie .regla { height: 1px; background: var(--linea); transform-origin: center; }
.heroe__dato { font-size: .85rem; color: var(--gris); display: flex; gap: 8px; align-items: center; }
.heroe__dato b { color: var(--tinta); font-weight: 600; }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: latido 2s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }
.heroe [data-entra] { opacity: 0; }
@media (max-width: 720px) {
  .heroe { --fs: min(30vw, 16vh); }
  .monograma { flex-direction: column; height: auto; gap: 8px; }
  .monograma__letra { height: calc(var(--fs) * .8); }
  .pildora { width: calc(100vw - 40px); height: calc(var(--fs) * .012); clip-path: inset(0 50% 0 50% round 999px); }
  .pildora video, .pildora img.pildora__poster { width: 100%; left: 0; transform: none; height: calc((100vw - 40px) / 1.85); top: 50%; translate: 0 -50%; }
  .heroe__pie { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 10px; }
  .heroe__pie .regla { display: none; }
}

/* ---------- Cinta de marcas ---------- */
.marcas { padding: 34px 0; border-block: 1px solid var(--linea); overflow: hidden; background: var(--papel); }
.marcas__titulo { text-align: center; font-size: .8rem; color: var(--gris); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.marcas__cinta { display: flex; width: max-content; animation: cinta 38s linear infinite; }
.marcas:hover .marcas__cinta { animation-play-state: paused; }
.marcas__cinta span {
  padding: 0 clamp(28px, 5vw, 64px);
  font-family: var(--titulos); font-variation-settings: "wdth" 125; font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; color: var(--grafito); white-space: nowrap;
}
.marcas__cinta span:nth-child(odd) { font-variation-settings: "wdth" 75; font-weight: 600; font-style: italic; color: var(--gris); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Números ---------- */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea); border-radius: var(--radio); overflow: hidden; }
.numero { background: var(--papel); padding: clamp(24px, 3vw, 40px); display: grid; gap: 8px; align-content: start; }
.numero b {
  font-family: var(--titulos); font-variation-settings: "wdth" 125; font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.numero span { color: var(--gris); font-size: .95rem; }
@media (max-width: 860px) { .numeros { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Estilos (carrusel horizontal) ---------- */
.carrusel {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 30vw, 380px); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--margen) 30px;
  margin-inline: calc(-1 * var(--margen));
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; }
.estilo-tarjeta { aspect-ratio: 3 / 4; color: var(--papel); }
.estilo-tarjeta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 55%); }
.estilo-tarjeta__texto { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; }
.estilo-tarjeta__texto h3 { font-size: 1.55rem; }
.estilo-tarjeta__texto p { margin: 6px 0 0; font-size: .9rem; opacity: .85; }
.estilo-tarjeta__num { position: absolute; top: 18px; left: 22px; z-index: 1; font-size: .8rem; font-weight: 600; letter-spacing: .1em; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.carrusel__control { display: flex; gap: 10px; }
.redondo { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--linea); background: var(--papel); display: grid; place-items: center; transition: transform .5s var(--resorte), background .3s; }
.redondo:hover { transform: scale(1.08); }
.redondo:active { transform: scale(.94); }

/* ---------- Proceso con video fijo ---------- */
.proceso { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.proceso__video { position: sticky; top: calc(var(--barra) + 30px); aspect-ratio: 9 / 14; border-radius: 28px; overflow: hidden; background: #ddd; box-shadow: var(--sombra-alta); }
.proceso__video video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--suave); }
.proceso__video video.activo { opacity: 1; }
.proceso__video .vidrio-etiqueta { position: absolute; left: 16px; bottom: 16px; z-index: 2; }
.paso { min-height: 48vh; display: grid; align-content: center; gap: 14px; opacity: .28; transition: opacity .6s var(--suave); }
.paso.activo { opacity: 1; }
.paso__num { font-family: var(--titulos); font-variation-settings: "wdth" 125; font-weight: 800; font-size: 1rem; color: var(--gris); }
.paso h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.paso p { color: var(--gris); max-width: 42ch; margin: 0; }
@media (max-width: 860px) {
  .proceso { grid-template-columns: 1fr; }
  .proceso__video { position: relative; top: 0; aspect-ratio: 4 / 5; }
  .paso { min-height: auto; opacity: 1; padding: 22px 0; border-bottom: 1px solid var(--linea); }
}
.vidrio-etiqueta {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  font-size: .82rem; font-weight: 600; color: var(--tinta); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

/* ---------- Mosaico de trabajos (inicio) ---------- */
.mosaico { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(90px, 10vw, 130px); gap: 14px; }
.mosaico > a { grid-column: span 3; grid-row: span 3; }
.mosaico > a:nth-child(1) { grid-column: span 6; grid-row: span 5; }
.mosaico > a:nth-child(2) { grid-column: span 3; grid-row: span 3; }
.mosaico > a:nth-child(3) { grid-column: span 3; grid-row: span 3; }
.mosaico > a:nth-child(4) { grid-column: span 3; grid-row: span 2; }
.mosaico > a:nth-child(5) { grid-column: span 3; grid-row: span 2; }
.mosaico .vidrio-etiqueta { position: absolute; left: 12px; bottom: 12px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .6s var(--resorte); }
.mosaico a:hover .vidrio-etiqueta { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; }
  .mosaico > a, .mosaico > a:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .mosaico > a:nth-child(1) { grid-column: span 2; }
  .mosaico .vidrio-etiqueta { opacity: 1; transform: none; }
}

/* ---------- Pilares ---------- */
.pilares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pilar { padding: 28px; border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra); display: grid; gap: 10px; align-content: start; }
.pilar__icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--fondo); }
.pilar__icono svg { width: 22px; height: 22px; }
.pilar p { color: var(--gris); margin: 0; font-size: .95rem; }
@media (max-width: 960px) { .pilares { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pilares { grid-template-columns: 1fr; } }

/* ---------- Llamado final ---------- */
.llamado { position: relative; overflow: hidden; border-radius: 34px; background: var(--tinta); color: var(--papel); padding: clamp(40px, 8vw, 110px) clamp(24px, 6vw, 90px); display: grid; gap: 22px; justify-items: start; isolation: isolate; }
.llamado h2 { max-width: 16ch; }
.llamado p { color: var(--gris-claro); max-width: 46ch; margin: 0; }
.llamado__fotos { position: absolute; right: -40px; top: 50%; z-index: -1; display: flex; gap: 14px; transform: translateY(-50%) rotate(-8deg); opacity: .55; }
.llamado__fotos img { width: 180px; height: 240px; object-fit: cover; border-radius: 18px; }
.llamado__fotos img:nth-child(2) { transform: translateY(40px); }
@media (max-width: 860px) { .llamado__fotos { opacity: .22; right: -120px; } }

/* ---------- Pie ---------- */
.pie { padding: 70px 0 110px; border-top: 1px solid var(--linea); background: var(--papel); }
.pie__grilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.pie h4 { font-family: var(--texto); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: 14px; font-weight: 600; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie a:hover { color: var(--grafito); text-decoration: underline; text-underline-offset: 3px; }
.pie__marca svg { width: 84px; margin-bottom: 16px; }
.pie__marca p { color: var(--gris); max-width: 34ch; font-size: .95rem; }
.pie__base { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .85rem; color: var(--gris); }
@media (max-width: 860px) { .pie__grilla { grid-template-columns: 1fr 1fr; } .pie__marca { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pie__grilla { grid-template-columns: 1fr; gap: 28px; } .pie ul { font-size: .95rem; } .pie a { overflow-wrap: anywhere; } }

/* ---------- Técnicas ---------- */
.indice-estilos { display: flex; flex-wrap: wrap; gap: 8px; }
.indice-estilos a { transition: background .3s, color .3s; }
.indice-estilos a:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.estilo { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; padding-block: clamp(60px, 9vw, 120px); border-top: 1px solid var(--linea); scroll-margin-top: 90px; }
.estilo:nth-of-type(even) .estilo__fotos { order: 2; }
.estilo__fotos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: end; }
.estilo__fotos figure { margin: 0; border-radius: var(--radio); overflow: hidden; background: #e9e9e6; }
.estilo__fotos figure:first-child { aspect-ratio: 3 / 4; }
.estilo__fotos figure:last-child { aspect-ratio: 4 / 5; margin-bottom: 40px; }
.estilo__fotos img { width: 100%; height: 100%; object-fit: cover; }
.estilo__texto { display: grid; gap: 18px; justify-items: start; }
.estilo__texto p { color: var(--gris); margin: 0; max-width: 46ch; }
.estilo__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.estilo__ideal { font-size: .95rem; padding: 16px 18px; border-radius: var(--radio-chico); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); max-width: 46ch; }
.estilo__ideal b { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 4px; }
@media (max-width: 860px) { .estilo { grid-template-columns: 1fr; } .estilo:nth-of-type(even) .estilo__fotos { order: 0; } }

.terminaciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.12); border-radius: var(--radio); overflow: hidden; }
.terminacion { background: var(--tinta); padding: 30px; display: grid; gap: 8px; align-content: start; transition: background .4s; }
.terminacion:hover { background: #161616; }
.terminacion h3 { font-size: 1.3rem; }
.terminacion p { color: var(--gris-claro); margin: 0; font-size: .95rem; }
.terminacion__n { font-size: .78rem; color: var(--gris); font-weight: 600; letter-spacing: .1em; }
@media (max-width: 860px) { .terminaciones { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .terminaciones { grid-template-columns: 1fr; } }

/* ---------- Trabajos: perchero ---------- */
.perchero { position: relative; height: clamp(520px, 74vh, 760px); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; perspective: 1400px; }
.perchero.arrastrando { cursor: grabbing; }
.perchero__barra { position: absolute; top: 64px; left: -5%; right: -5%; height: 8px; border-radius: 8px; background: linear-gradient(#cfcfcb, #9d9e99); box-shadow: 0 6px 12px rgba(0,0,0,.12); z-index: 3; }
.perchero__pista { position: absolute; top: 0; left: 50%; height: 100%; transform-style: preserve-3d; }
.prenda { position: absolute; top: 40px; width: var(--pw, 300px); margin-left: calc(var(--pw, 300px) / -2); transform-origin: 50% 30px; will-change: transform; }
.prenda__percha { width: 46%; margin: 0 auto -6px; position: relative; z-index: 4; }
.prenda__cuerpo { position: relative; aspect-ratio: 300 / 340; filter: drop-shadow(0 26px 30px rgba(0,0,0,.18)); }
.prenda__tela {
  position: absolute; inset: 0; background-size: cover; background-position: center 40%; background-color: var(--tono, #e8e6e2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 340'%3E%3Cpath fill='%23000' d='M112 6 C120 22 134 30 150 30 C166 30 180 22 188 6 L236 22 C254 28 266 38 276 54 L298 100 L250 124 L236 98 L236 334 C236 338 233 340 229 340 L71 340 C67 340 64 338 64 334 L64 98 L50 124 L2 100 L24 54 C34 38 46 28 64 22 Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 340'%3E%3Cpath fill='%23000' d='M112 6 C120 22 134 30 150 30 C166 30 180 22 188 6 L236 22 C254 28 266 38 276 54 L298 100 L250 124 L236 98 L236 334 C236 338 233 340 229 340 L71 340 C67 340 64 338 64 334 L64 98 L50 124 L2 100 L24 54 C34 38 46 28 64 22 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prenda__sombra {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 340'%3E%3Cpath fill='%23000' d='M112 6 C120 22 134 30 150 30 C166 30 180 22 188 6 L236 22 C254 28 266 38 276 54 L298 100 L250 124 L236 98 L236 334 C236 338 233 340 229 340 L71 340 C67 340 64 338 64 334 L64 98 L50 124 L2 100 L24 54 C34 38 46 28 64 22 Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 340'%3E%3Cpath fill='%23000' d='M112 6 C120 22 134 30 150 30 C166 30 180 22 188 6 L236 22 C254 28 266 38 276 54 L298 100 L250 124 L236 98 L236 334 C236 338 233 340 229 340 L71 340 C67 340 64 338 64 334 L64 98 L50 124 L2 100 L24 54 C34 38 46 28 64 22 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 18%, rgba(255,255,255,.08) 50%, rgba(0,0,0,0) 82%, rgba(0,0,0,.18)),
              linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,0) 30%, rgba(0,0,0,.12));
}
.prenda__etiqueta {
  position: absolute; left: 50%; top: calc(100% + 18px); transform: translateX(-50%) translateY(10px);
  white-space: nowrap; opacity: 0; transition: opacity .4s, transform .6s var(--resorte); text-align: center;
}
.prenda.centro .prenda__etiqueta { opacity: 1; transform: translateX(-50%); }
.prenda__etiqueta small { display: block; color: var(--gris); font-size: .78rem; margin-top: 4px; font-weight: 500; }
.perchero__flechas { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 12px; z-index: 5; }
.perchero__ayuda { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); font-size: .8rem; color: var(--gris); z-index: 5; }

/* ---------- Galería con filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtros button { border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; min-height: 40px; padding: 0 16px; font-size: .9rem; font-weight: 500; transition: background .3s, color .3s, transform .4s var(--resorte); }
.filtros button:hover { transform: translateY(-1px); }
.filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.filtros__titulo { width: 100%; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); font-weight: 600; margin-top: 8px; }
.galeria { columns: 4 240px; column-gap: 14px; margin-top: 30px; }
.galeria__item { break-inside: avoid; margin: 0 0 14px; display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.galeria__item .tarjeta img { aspect-ratio: auto; }
.galeria__item figcaption { padding: 10px 4px 2px; font-size: .88rem; }
.galeria__item figcaption small { display: block; color: var(--gris); font-size: .8rem; }
.galeria__item.oculto { display: none; }

/* Visor (lightbox) */
.visor { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 70px 20px 30px; background: rgba(247,247,247,.9); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.visor[hidden] { display: none; }
.visor figure { margin: 0; display: grid; gap: 14px; justify-items: center; max-height: 100%; }
.visor__marco { overflow: hidden; border-radius: var(--radio); box-shadow: var(--sombra-alta); max-height: calc(100svh - 170px); cursor: zoom-in; background: #ddd; }
.visor__marco img { max-height: calc(100svh - 170px); width: auto; transition: transform .5s var(--suave); transform-origin: var(--zx, 50%) var(--zy, 50%); }
.visor__marco.zoom { cursor: zoom-out; }
.visor__marco.zoom img { transform: scale(2.2); }
.visor figcaption { text-align: center; }
.visor figcaption small { display: block; color: var(--gris); }
.visor__cerrar { position: absolute; top: 18px; right: 18px; }
.visor__prev, .visor__sig { position: absolute; top: 50%; transform: translateY(-50%); }
.visor__prev { left: 18px; } .visor__sig { right: 18px; }
@media (max-width: 600px) { .visor__prev, .visor__sig { top: auto; bottom: 18px; transform: none; } }

/* ---------- Cómo trabajamos ---------- */
.linea-tiempo { display: grid; gap: 0; counter-reset: paso; }
.etapa { display: grid; grid-template-columns: 90px 1fr 340px; gap: clamp(20px, 4vw, 50px); padding: 44px 0; border-top: 1px solid var(--linea); align-items: start; }
.etapa__n { font-family: var(--titulos); font-variation-settings: "wdth" 125; font-weight: 800; font-size: 3rem; line-height: 1; color: var(--linea); transition: color .6s; }
.etapa.visto .etapa__n { color: var(--tinta); }
.etapa h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 12px; }
.etapa p { color: var(--gris); max-width: 52ch; }
.etapa__media { border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 5; background: #ddd; }
.etapa__media video, .etapa__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .etapa { grid-template-columns: 1fr; } .etapa__media { aspect-ratio: 16 / 11; } }

.lista-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dato { padding: 22px; border-radius: var(--radio-chico); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); }
.dato b { display: block; margin-bottom: 4px; }
.dato span { color: var(--gris); font-size: .93rem; }
@media (max-width: 860px) { .lista-datos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lista-datos { grid-template-columns: 1fr; } }

.preguntas { display: grid; gap: 10px; max-width: 860px; }
.preguntas details { border-radius: var(--radio-chico); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; }
.preguntas summary { list-style: none; cursor: pointer; padding: 22px 24px; font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-size: 1.5rem; font-weight: 300; transition: transform .5s var(--resorte); flex: none; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas .respuesta { padding: 0 24px 22px; color: var(--gris); }
.preguntas .respuesta p:last-child { margin: 0; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .preguntas details::details-content { height: 0; overflow: clip; transition: height .5s var(--suave), content-visibility .5s allow-discrete; }
  .preguntas details[open]::details-content { height: auto; }
}

/* ---------- Nosotros ---------- */
.historia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.historia__video { border-radius: 28px; overflow: hidden; aspect-ratio: 9 / 13; background: #ddd; box-shadow: var(--sombra-alta); }
.historia__video video { width: 100%; height: 100%; object-fit: cover; }
.historia__texto { display: grid; gap: 18px; }
.historia__texto p { color: var(--gris); margin: 0; }
.cita { font-family: var(--titulos); font-variation-settings: "wdth" 100; font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 24ch; }
@media (max-width: 860px) { .historia { grid-template-columns: 1fr; } .historia__video { aspect-ratio: 4 / 5; } }
.hitos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hito { border-top: 2px solid var(--tinta); padding-top: 18px; }
.hito b { font-family: var(--titulos); font-variation-settings: "wdth" 125; font-size: 1.5rem; display: block; margin-bottom: 6px; }
.hito p { color: var(--gris); font-size: .95rem; margin: 0; }
@media (max-width: 860px) { .hitos { grid-template-columns: 1fr 1fr; } }
.equipo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.persona { padding: 26px; border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra); }
.persona__inicial { width: 56px; height: 56px; border-radius: 50%; background: var(--fondo); display: grid; place-items: center; font-family: var(--titulos); font-weight: 800; font-size: 1.3rem; margin-bottom: 16px; }
.persona p { color: var(--gris); margin: 6px 0 0; font-size: .95rem; }
@media (max-width: 760px) { .equipo { grid-template-columns: 1fr; } }

/* ---------- Presupuesto ---------- */
.cotizador { display: grid; grid-template-columns: 1fr 360px; gap: clamp(24px, 4vw, 50px); align-items: start; }
@media (max-width: 960px) { .cotizador { grid-template-columns: 1fr; } }
.cotizador__panel { background: var(--papel); border-radius: 28px; box-shadow: var(--sombra-alta); padding: clamp(22px, 4vw, 44px); min-height: 560px; display: grid; grid-template-rows: auto 1fr auto; gap: 26px; }
.progreso { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.progreso span { height: 4px; border-radius: 4px; background: var(--linea); overflow: hidden; position: relative; }
.progreso span::after { content: ""; position: absolute; inset: 0; background: var(--tinta); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--suave); }
.progreso span.hecho::after { transform: scaleX(1); }
.progreso__texto { display: flex; justify-content: space-between; font-size: .85rem; color: var(--gris); margin-top: 10px; }
.pasos { position: relative; overflow: hidden; }
.paso-c { display: grid; gap: 22px; align-content: start; }
.paso-c[hidden] { display: none; }
.paso-c.entra { animation: entra .6s var(--suave) both; }
.paso-c.entra-atras { animation: entra-atras .6s var(--suave) both; }
@keyframes entra { from { opacity: 0; transform: translateX(40px); } }
@keyframes entra-atras { from { opacity: 0; transform: translateX(-40px); } }
.paso-c h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.paso-c .ayuda { color: var(--gris); margin: -10px 0 0; font-size: .95rem; }
.opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion label {
  display: grid; gap: 6px; justify-items: start; min-height: 64px; padding: 14px 16px;
  border-radius: var(--radio-chico); border: 1.5px solid var(--linea); background: var(--fondo);
  font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: border-color .25s, background .25s, transform .5s var(--resorte);
}
.opcion label small { font-weight: 400; color: var(--gris); font-size: .8rem; }
.opcion label:hover { transform: translateY(-2px); }
.opcion input:checked + label { border-color: var(--tinta); background: var(--papel); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.opcion input:focus-visible + label { outline: 2px solid var(--tinta); outline-offset: 2px; }
.campo { display: grid; gap: 8px; }
.campo label, .campo .rotulo { font-weight: 600; font-size: .92rem; }
.campo input[type="text"], .campo input[type="number"], .campo input[type="date"], .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--radio-chico);
  border: 1.5px solid var(--linea); background: var(--fondo); font: inherit; color: var(--tinta);
  transition: border-color .25s, background .25s;
}
.campo textarea { min-height: 100px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); background: var(--papel); }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .campos-2 { grid-template-columns: 1fr; } }
.cantidad { display: grid; gap: 14px; }
.cantidad__valor { font-family: var(--titulos); font-variation-settings: "wdth" 125; font-weight: 800; font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.cantidad__valor small { font-family: var(--texto); font-size: 1rem; font-weight: 500; color: var(--gris); letter-spacing: 0; margin-left: 8px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--tinta) var(--lleno, 10%), var(--linea) var(--lleno, 10%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--papel); box-shadow: 0 2px 10px rgba(0,0,0,.2), 0 0 0 1px var(--linea); cursor: grab; }
input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--papel); border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.2); cursor: grab; }
.aviso { padding: 14px 16px; border-radius: var(--radio-chico); background: #fff7e6; color: #6b4b00; font-size: .92rem; }
.aviso[hidden] { display: none; }
.cotizador__botones { display: flex; justify-content: space-between; gap: 12px; }
.cotizador__botones .boton[disabled] { opacity: .35; pointer-events: none; }
.resumen { position: sticky; top: calc(var(--barra) + 30px); padding: 26px; border-radius: var(--radio); background: var(--vidrio); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--linea); display: grid; gap: 14px; }
.resumen h3 { font-size: 1.15rem; }
.resumen dl { margin: 0; display: grid; gap: 10px; }
.resumen dl div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: .92rem; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.resumen dt { color: var(--gris); }
.resumen dd { margin: 0; font-weight: 500; }
.resumen dd.vacio { color: var(--gris-claro); font-weight: 400; }
.resumen__nota { font-size: .85rem; color: var(--gris); margin: 0; }
@media (max-width: 960px) { .resumen { position: relative; top: 0; } }
.listo { text-align: center; display: grid; gap: 18px; justify-items: center; padding: 20px 0; }
.listo__check { width: 84px; height: 84px; border-radius: 50%; background: var(--verde-wa); display: grid; place-items: center; animation: pop .8s var(--resorte) both; }
.listo__check svg { width: 40px; height: 40px; color: #06331a; }
@keyframes pop { from { transform: scale(0); } }

/* ---------- Transiciones entre páginas (navegadores nuevos) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .35s var(--rapida) both salir; }
::view-transition-new(root) { animation: .6s var(--suave) both entrar; }
@keyframes salir { to { opacity: 0; transform: translateY(-12px) scale(.99); } }
@keyframes entrar { from { opacity: 0; transform: translateY(18px); } }
::view-transition-group(barra), ::view-transition-group(logo) { animation-duration: .5s; animation-timing-function: var(--suave); }

/* ---------- Movimiento atado al scroll (navegadores nuevos) ---------- */
@supports (animation-timeline: view()) {
  .paralaje { animation: paralaje linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes paralaje { from { transform: translateY(-6%) scale(1.12); } to { transform: translateY(6%) scale(1.12); } }
  .crece { animation: crece linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes crece { from { transform: scale(.88); border-radius: 60px; } to { transform: scale(1); } }
}

/* ---------- Sin animaciones si la persona lo pidió ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .aparece, .palabras .p > span, .revela, .revela img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .marcas__cinta { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* Ajustes del perchero */
.prenda { border: 0; background: none; padding: 0; color: inherit; font: inherit; }
.prenda:focus-visible { outline: none; }
.prenda:focus-visible .prenda__cuerpo { outline: 2px solid var(--tinta); outline-offset: 6px; border-radius: 20px; }
.portada--corta { padding-bottom: 10px; }
.portada--corta h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); max-width: 20ch; }
@media (max-width: 700px) { .perchero { height: 500px; } }
.cabeza--fila > .chip { justify-self: start; }
.flecha { width: 18px; height: 18px; flex: none; }