/* Fuentes alojadas aqui (subconjunto latino): el sitio no depende de Google Fonts. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/barlow-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/barlow-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/barlow-condensed-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fuentes/bodoni-moda.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Dsigna Print & Publicidad — sistema visual
   --------------------------------------------------------------------------
   Deriva del manual de marca: tinta #1D1D1D, naranja #FF8A00, papel #F2F2F2,
   gota y pagina con esquina doblada.

   Nota de contraste (medida, no estimada): el naranja de marca sobre papel da
   2.4:1, insuficiente para texto segun WCAG. Por eso el naranja se usa como
   TINTA sobre fondo oscuro (8.2:1), como fondo de boton con texto tinta encima
   (8.2:1) y como elemento grafico no textual (gota, reglas, puntos). Nunca como
   texto sobre papel.
   ========================================================================== */

/* --- 1. Reinicio -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
:where(h1, h2, h3, h4) { font-weight: var(--peso-display); font-variation-settings: var(--opsz-display); text-wrap: balance; }
p { text-wrap: pretty; }

/* --- 2. Tokens ---------------------------------------------------------- */
:root {
  /* Color: exactamente los del manual de marca */
  --tinta: #1d1d1d;
  --tinta-suave: #2f2f2f;
  --naranja: #ff8a00;
  --naranja-claro: #fdb950;
  --papel: #f2f2f2;
  --blanco: #ffffff;
  --linea: #dedede;
  --linea-oscura: #3a3a3a;

  /* Tipografia
     Barfiola (logo) es "free for personal use": no se puede usar en web comercial.
     Bodoni Moda es el sustituto por contraste y eje vertical.
     Bahnschrift es fuente de sistema de Microsoft; Barlow es la familia DIN
     disponible con licencia web. */
  --display: 'Bodoni Moda', 'Times New Roman', serif;
  /* Titulos en Bodoni: peso 500 y tamano optico fijo en 28. En tamanos grandes
     Bodoni cambia sola a su version de cartel, de trazos finisimos, que en
     pantallas comunes se cortan. Fijar el eje en 28 engrosa esos trazos sin
     cambiar el caracter de la letra. */
  --peso-display: 700;
  --opsz-display: 'opsz' 8;
  --texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tecnica: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  /* Escala tipografica fluida */
  --t-display: clamp(3rem, 7.2vw, 6.4rem);
  --t-titulo: clamp(2.1rem, 4.6vw, 3.9rem);
  --t-seccion: clamp(1.7rem, 3vw, 2.5rem);
  --t-sub: clamp(1.25rem, 1.8vw, 1.55rem);
  --t-cuerpo: 1.125rem;
  --t-chico: 1rem;
  --t-micro: 0.875rem;

  /* Ritmo vertical */
  --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;  --e4: 1rem;
  --e5: 1.5rem;   --e6: 2rem;     --e7: 3rem;     --e8: 4rem;
  --e9: 6rem;     --e10: 8rem;    --e11: 11rem;

  /* Rejilla */
  --ancho: 78rem;
  --ancho-texto: 38rem;
  --margen: clamp(1.25rem, 5vw, 4.5rem);

  /* Movimiento: una sola curva para todo el sitio */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --rapido: 220ms;
  --medio: 420ms;
  --lento: 700ms;
}

/* --- 3. Base ------------------------------------------------------------ */
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
}

::selection { background: var(--naranja); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}
.fondo-tinta :focus-visible { outline-color: var(--naranja); }

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--e3) var(--e5);
  background: var(--tinta);
  color: var(--papel);
}
.salto-contenido:focus { left: 0; }

/* --- 4. Layout ---------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion { padding-block: clamp(4rem, 9vw, var(--e10)); }
.seccion--ajustada { padding-block: clamp(3rem, 6vw, var(--e9)); }
.seccion--sin-arriba { padding-block-start: 0; }

.fondo-tinta {
  background: var(--tinta);
  color: var(--papel);
}
.fondo-blanco { background: var(--blanco); }

.columna-texto { max-width: var(--ancho-texto); }

/* Cabecera de seccion: etiqueta tecnica arriba, titulo display abajo. */
.encabezado-seccion {
  display: grid;
  gap: var(--e4);
  margin-bottom: clamp(2.5rem, 5vw, var(--e8));
}
.encabezado-seccion__titulo {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: var(--t-titulo);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.encabezado-seccion__bajada {
  max-width: 34rem;
  color: var(--tinta-suave);
  font-size: var(--t-sub);
  line-height: 1.5;
}
.fondo-tinta .encabezado-seccion__bajada { color: #dedede; }

@media (min-width: 62rem) {
  .encabezado-seccion--dividido {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: end;
    gap: var(--e7);
  }
  .encabezado-seccion--dividido .encabezado-seccion__etiqueta { grid-column: 1; }
}

/* --- 5. Tipografia auxiliar --------------------------------------------- */
.etiqueta {
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  display: flex;
  align-items: center;
  gap: var(--e3);
}
.fondo-tinta .etiqueta { color: #d2d2d2; }

/* La gota del logo, como silueta reutilizable. */
:root {
  --gota: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M10 0C10 0 20 12 20 17A10 10 0 0 1 0 17C0 12 10 0 10 0Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Divisor con gota: el separador del propio manual de marca. */
.etiqueta::before {
  content: '';
  width: 0.42rem;
  height: 0.55rem;
  flex: none;
  background: var(--naranja);
  -webkit-mask: var(--gota) center / contain no-repeat;
  mask: var(--gota) center / contain no-repeat;
}
.etiqueta--sin-gota::before { display: none; }

.regla {
  height: 1px;
  background: var(--linea);
  border: 0;
}
.fondo-tinta .regla { background: var(--linea-oscura); }

.texto-guia {
  color: var(--tinta-suave);
  font-size: var(--t-chico);
  line-height: 1.55;
}
.fondo-tinta .texto-guia { color: #d2d2d2; }

/* --- 6. Botones --------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  padding: 0.95rem 1.6rem;
  font-family: var(--tecnica);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--papel);
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.boton:hover { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); }
.boton:active { transform: translateY(1px); }

.boton--naranja { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); }
.boton--naranja:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

.boton--linea { background: none; color: var(--tinta); }
.boton--linea:hover { background: var(--tinta); color: var(--papel); }
.fondo-tinta .boton--linea, .llamada .boton--linea { color: var(--papel); border-color: #575757; }
.fondo-tinta .boton--linea:hover, .llamada .boton--linea:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }

.boton__flecha { transition: transform var(--medio) var(--curva); }
.boton:hover .boton__flecha { transform: translateX(4px); }

/* Enlace de texto con subrayado que se dibuja */
.enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--tecnica);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--t-chico);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--naranja), var(--naranja));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: background-size var(--medio) var(--curva);
}
.enlace:hover { background-size: 0 2px; }

/* --- 7. Cabecera -------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--medio) var(--curva), background var(--medio) var(--curva);
}
.cabecera[data-desplazada='si'] { border-bottom-color: var(--linea); }

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  min-height: 4.75rem;
}

.cabecera__logo { display: block; flex: none; }
.cabecera__logo img { width: auto; height: 1.95rem; }

.menu { display: none; }
@media (min-width: 62rem) {
  .menu {
    display: flex;
    align-items: center;
    gap: var(--e6);
  }
}
.menu__enlace {
  font-family: var(--tecnica);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding-block: var(--e2);
}
.menu__enlace::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--naranja);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medio) var(--curva);
}
.menu__enlace:hover::after,
.menu__enlace[aria-current='page']::after { transform: scaleX(1); }

.cabecera__acciones { display: flex; align-items: center; gap: var(--e3); }
.cabecera__cta { display: none; }
@media (min-width: 48rem) { .cabecera__cta { display: inline-flex; } }

/* Boton hamburguesa: dos lineas que se cruzan */
.boton-menu {
  display: grid;
  gap: 5px;
  padding: var(--e3);
  margin-right: calc(var(--e3) * -1);
}
@media (min-width: 62rem) { .boton-menu { display: none; } }
/* :not(.solo-lectores) importa: el boton lleva un cuarto span con el texto
   para lectores de pantalla, y sin excluirlo las reglas de abajo lo tratarian
   como si fuera una barra mas. */
.boton-menu span:not(.solo-lectores) {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--tinta);
  transition: transform var(--medio) var(--curva), opacity var(--rapido) var(--curva);
}
.boton-menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.boton-menu[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.boton-menu[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu movil: panel completo, decisiones propias para pantalla chica */
.menu-movil {
  position: fixed;
  inset: 4.75rem 0 0;
  z-index: 49;
  background: var(--papel);
  padding: var(--e6) var(--margen) var(--e8);
  display: grid;
  align-content: start;
  gap: var(--e2);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva), visibility var(--medio);
}
.menu-movil[data-abierto='si'] { opacity: 1; transform: none; visibility: visible; }
@media (min-width: 62rem) { .menu-movil { display: none; } }

.menu-movil__enlace {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1.15;
  text-decoration: none;
  padding-block: var(--e3);
  border-bottom: 1px solid var(--linea);
}
.menu-movil__pie { margin-top: var(--e6); display: grid; gap: var(--e4); }

/* --- 8. Portada --------------------------------------------------------- */
.portada { padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem); }

.portada__rejilla {
  display: grid;
  gap: clamp(2.5rem, 5vw, var(--e8));
  align-items: center;
}
@media (min-width: 62rem) {
  .portada__rejilla {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, var(--e9));
  }
}

.portada__titulo {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: var(--t-display);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin-block: var(--e5) var(--e5);
}

/* La gota del logo, cayendo para poner el punto final de "impresa".
   Se dimensiona en em para que caiga exacta en cualquier viewport. */
.gota-punto {
  display: inline-block;
  position: relative;
  width: 0.19em;
  height: 0.247em;
  margin-left: 0.07em;
  vertical-align: baseline;
  background: var(--naranja);
  -webkit-mask: var(--gota) center / contain no-repeat;
  mask: var(--gota) center / contain no-repeat;
  transform-origin: 50% 100%;
}
.js .gota-punto { animation: caer 1100ms var(--curva) 260ms both; }

@keyframes caer {
  0%   { transform: translateY(-3.2em) scaleY(1.45) scaleX(0.72); opacity: 0; }
  22%  { opacity: 1; }
  68%  { transform: translateY(0) scaleY(1.2) scaleX(0.85); }
  82%  { transform: translateY(0) scaleY(0.78) scaleX(1.2); }
  92%  { transform: translateY(0) scaleY(1.06) scaleX(0.97); }
  100% { transform: none; opacity: 1; }
}

.portada__bajada {
  max-width: 30rem;
  font-size: var(--t-sub);
  line-height: 1.55;
  color: var(--tinta-suave);
}
.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e6);
}
/* En movil los botones van al ancho completo: el pulgar no persigue cajas de
   distinto tamano, y dos botones desalineados se ven descuidados. */
@media (max-width: 30rem) {
  .portada__acciones .boton,
  .llamada__acciones .boton,
  .ficha__acciones .boton { flex: 1 1 100%; justify-content: center; }
}

/* Marco con esquina doblada: la "pagina/etiqueta" del manual de marca. */
.marco-pagina {
  position: relative;
  background: var(--blanco);
  --dobles: clamp(2rem, 4vw, 3.25rem);
  clip-path: polygon(0 0, calc(100% - var(--dobles)) 0, 100% var(--dobles), 100% 100%, 0 100%);
}
.marco-pagina::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--dobles);
  height: var(--dobles);
  background: var(--naranja-claro);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.marco-pagina img { width: 100%; height: 100%; object-fit: cover; }

.portada__pie {
  margin-top: clamp(3rem, 6vw, var(--e8));
  padding-top: var(--e5);
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e6);
}
.portada__dato {
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.portada__dato b { color: var(--tinta); font-weight: 600; }

/* --- 9. Muestrario (indice de categorias) ------------------------------- */
.muestrario { display: grid; gap: clamp(2rem, 4vw, var(--e7)); }
@media (min-width: 62rem) {
  .muestrario {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.muestrario__lista { display: grid; }

.muestrario__fila {
  display: grid;
  /* minmax(0, 1fr) y no 1fr: con 1fr la columna no baja del ancho intrinseco de la
     foto que lleva dentro (700px) y desborda toda la pagina en movil. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--e4);
  padding-block: clamp(1.15rem, 2.4vw, 1.7rem);
  border-top: 1px solid var(--linea);
  text-decoration: none;
  transition: padding-left var(--medio) var(--curva);
}
.muestrario__fila:last-child { border-bottom: 1px solid var(--linea); }
.muestrario__fila:hover { padding-left: var(--e3); }

.muestrario__indice {
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--tinta-suave);
}
.muestrario__nombre {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: clamp(1.6rem, 3.1vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.muestrario__cantidad {
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.muestrario__fila:hover .muestrario__nombre { color: var(--tinta); }

/* Visor: una sola pieza grande que cambia al recorrer la lista. */
.muestrario__visor {
  display: none;
  position: sticky;
  top: 7rem;
  aspect-ratio: 4 / 5;
  background: var(--blanco);
}
@media (min-width: 62rem) { .muestrario__visor { display: block; } }

.muestrario__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva);
}
.muestrario__foto[data-activa='si'] { opacity: 1; transform: none; }

.muestrario__etiqueta-visor {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--e3) var(--e5);
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* En movil la categoria muestra su propia foto, sin visor compartido. */
.muestrario__foto-movil {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  margin-top: var(--e4);
}
@media (min-width: 62rem) { .muestrario__foto-movil { display: none; } }

/* --- 10. Tarjetas de producto ------------------------------------------- */
.rejilla-productos {
  display: grid;
  gap: clamp(1.75rem, 3vw, var(--e6));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
/* Para bloques de tres piezas: sin huecos al final de la fila. */
@media (min-width: 55rem) {
  .rejilla-productos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tarjeta {
  display: grid;
  gap: var(--e4);
  text-decoration: none;
  align-content: start;
}
.tarjeta__marco {
  position: relative;
  overflow: hidden;
  background: var(--blanco);
  aspect-ratio: 4 / 5;
}
.tarjeta__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lento) var(--curva);
}
.tarjeta:hover .tarjeta__foto { transform: scale(1.045); }

.tarjeta__pie { display: grid; gap: var(--e2); }
.tarjeta__nombre {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: 1.32rem;
  line-height: 1.2;
}
.tarjeta__resumen { color: var(--tinta-suave); font-size: var(--t-chico); line-height: 1.5; }


/* --- 11. Catalogo: filtros y buscador ----------------------------------- */
.barra-catalogo {
  display: grid;
  gap: var(--e4);
  padding-block: var(--e5);
  border-block: 1px solid var(--linea);
  margin-bottom: clamp(2rem, 4vw, var(--e7));
}
@media (min-width: 48rem) {
  .barra-catalogo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    align-items: center;
    gap: var(--e6);
  }
}

.filtros { display: flex; flex-wrap: wrap; gap: var(--e2); }
.filtro {
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--linea);
  background: transparent;
  color: var(--tinta-suave);
  transition: all var(--rapido) var(--curva);
}
.filtro:hover { border-color: var(--tinta); color: var(--tinta); }
.filtro[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

.buscador { position: relative; display: flex; align-items: center; }
.buscador__campo {
  width: 100%;
  padding: 0.7rem 2.25rem 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--linea);
  background: transparent;
  font-size: var(--t-chico);
  transition: border-color var(--rapido) var(--curva);
}
.buscador__campo::placeholder { color: var(--tinta-suave); }
.buscador__campo:focus { outline: 0; border-bottom-color: var(--tinta); }
.buscador__icono { position: absolute; right: 0; color: var(--tinta-suave); pointer-events: none; }

[hidden] { display: none !important; }
.sin-resultados {
  padding: var(--e8) 0;
  text-align: center;
  display: grid;
  gap: var(--e4);
  justify-items: center;
}

/* --- 12. Migas ---------------------------------------------------------- */
.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  padding-block: var(--e5);
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.migas a { text-decoration: none; }
.migas a:hover { color: var(--tinta); }
.migas__separador { color: #767676; }

/* --- 13. Ficha de producto --------------------------------------------- */
.ficha { display: grid; gap: clamp(2rem, 5vw, var(--e8)); }
@media (min-width: 62rem) {
  .ficha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .ficha__galeria { position: sticky; top: 7rem; }
}

.ficha__galeria { display: grid; gap: var(--e4); }
.ficha__foto { background: var(--blanco); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ficha__foto--secundaria { aspect-ratio: 16 / 10; }

.ficha__titulo {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: var(--t-titulo);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-block: var(--e3) var(--e5);
}
.ficha__texto { font-size: var(--t-sub); line-height: 1.6; color: var(--tinta-suave); }

.datos { display: grid; gap: 0; margin-top: var(--e7); }
.datos__fila {
  display: grid;
  gap: var(--e1) var(--e5);
  padding-block: var(--e4);
  border-top: 1px solid var(--linea);
}
@media (min-width: 30rem) { .datos__fila { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.datos__fila:last-child { border-bottom: 1px solid var(--linea); }
.datos__clave {
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.datos__valor { font-size: var(--t-chico); }
/* Los valores que no son enlace se leen en tinta suave: asi la lista no promete
   un clic que no existe. */
.datos__valor--plano { color: var(--tinta-suave); }
.datos__valor ul { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.datos__valor li { position: relative; padding-left: var(--e4); }
.datos__valor li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.34rem;
  height: 0.44rem;
  background: var(--naranja);
  -webkit-mask: var(--gota) center / contain no-repeat;
  mask: var(--gota) center / contain no-repeat;
}

.aviso {
  margin-top: var(--e5);
  padding: var(--e4) var(--e5);
  background: var(--blanco);
  border: 1px solid var(--naranja);
  font-size: var(--t-chico);
  line-height: 1.55;
  color: var(--tinta-suave);
}

.ficha__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }

/* --- 14. Proceso -------------------------------------------------------- */
.proceso { display: grid; gap: 0; }
@media (min-width: 48rem) { .proceso { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.proceso__paso {
  padding: var(--e5) var(--e4) var(--e6) 0;
  border-top: 2px solid var(--linea-oscura);
  position: relative;
}
@media (min-width: 48rem) { .proceso__paso { padding-right: var(--e5); } }

.proceso__paso::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--naranja);
  transition: width 900ms var(--curva);
}
.proceso__paso[data-visible='si']::before { width: 100%; }

.proceso__numero {
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--naranja);
}
.proceso__titulo {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: 1.5rem;
  margin-block: var(--e2) var(--e3);
}
.proceso__texto { font-size: var(--t-chico); line-height: 1.55; color: #d2d2d2; }

/* --- 15. Proyectos ------------------------------------------------------ */
/* La nota de entrega es una llamada al paso 05, no un parrafo suelto: se alinea
   con la ultima columna del proceso para que se lea como su pie de pagina. */
.proceso__nota {
  margin-top: var(--e5);
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  color: #c9c9c9;
}
.proceso__texto sup { font-size: 0.7em; padding-left: 0.15em; color: var(--naranja); }

.proyecto {
  display: grid;
  gap: clamp(1.75rem, 4vw, var(--e7));
  padding-block: clamp(3rem, 6vw, var(--e9));
  border-top: 1px solid var(--linea);
}
@media (min-width: 62rem) {
  .proyecto { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); align-items: start; }
  /* Al invertir la fila hay que invertir tambien las columnas: si solo se cambia
     el orden, las fotos caen en la columna angosta y cada proyecto se ve de un
     tamano distinto al anterior. */
  .proyecto--invertido { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
  .proyecto--invertido .proyecto__info { order: 2; }
}

.proyecto__info { display: grid; gap: var(--e4); align-content: start; }
.proyecto__cliente {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.proyecto__titulo { font-size: var(--t-sub); line-height: 1.4; }
.proyecto__texto { color: var(--tinta-suave); font-size: var(--t-chico); line-height: 1.6; }

.proyecto__piezas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }
.pieza {
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--linea);
  color: var(--tinta-suave);
}

.proyecto__fotos { display: grid; gap: var(--e4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proyecto__fotos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; background: var(--blanco); }
/* Una sola foto conserva su proporcion real. Forzarla a 16/9 recortaba las
   fotos verticales justo donde estaba la marca, y estirarlas las volvia
   borrosas: varios originales del cliente miden menos de 700 px de ancho. */
.proyecto__fotos img:only-child {
  grid-column: span 2;
  aspect-ratio: auto;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 30rem;
  justify-self: start;
}
.proyecto__fotos img:first-child:nth-last-child(3) { grid-column: span 2; aspect-ratio: 16 / 9; }

/* --- 16. Cifras / franja de datos --------------------------------------- */
.franja-datos {
  display: grid;
  gap: var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.dato__valor {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.dato__texto {
  margin-top: var(--e3);
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.fondo-tinta .dato__texto { color: #d2d2d2; }

/* --- 17. Formulario ----------------------------------------------------- */
.formulario { display: grid; gap: var(--e5); }
.campos { display: grid; gap: var(--e5); }
@media (min-width: 40rem) { .campos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.campo { display: grid; gap: var(--e2); }
.campo__etiqueta {
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.campo__control {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid var(--linea);
  background: transparent;
  font-size: var(--t-cuerpo);
  transition: border-color var(--rapido) var(--curva);
}
.campo__control:focus { outline: 0; border-bottom-color: var(--naranja); border-bottom-width: 2px; padding-bottom: calc(0.85rem - 1px); }
textarea.campo__control { resize: vertical; min-height: 6.5rem; line-height: 1.55; }
select.campo__control { padding-right: var(--e5); }
.campo__ayuda { font-size: var(--t-micro); color: var(--tinta-suave); }
.campo__control[aria-invalid='true'] { border-bottom-color: #c0392b; }
.campo__error { font-size: var(--t-micro); color: #c0392b; }

.formulario__aviso {
  padding: var(--e4) var(--e5);
  border: 1px solid var(--naranja);
  background: var(--blanco);
  font-size: var(--t-chico);
  display: none;
}
.formulario__aviso[data-estado='visible'] { display: block; }

/* --- 18. Bloque de llamada ---------------------------------------------- */
.llamada {
  display: grid;
  gap: var(--e6);
  align-items: center;
  padding: clamp(2.5rem, 5vw, var(--e8));
  background: var(--tinta);
  color: var(--papel);
  --dobles: clamp(2.5rem, 5vw, 4rem);
  clip-path: polygon(0 0, calc(100% - var(--dobles)) 0, 100% var(--dobles), 100% 100%, 0 100%);
  position: relative;
}
@media (min-width: 55rem) {
  .llamada { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e8); }
}
.llamada__titulo {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: var(--t-seccion);
  line-height: 1.1;
}
.llamada__texto { color: #dedede; margin-top: var(--e3); max-width: 32rem; font-size: var(--t-chico); }
.llamada__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* --- 19. Pie ------------------------------------------------------------ */
.pie { background: var(--tinta); color: var(--papel); padding-block: clamp(3rem, 6vw, var(--e9)) var(--e6); }
.pie__rejilla { display: grid; gap: var(--e7); }
@media (min-width: 55rem) { .pie__rejilla { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }

.pie__logo img { height: 2.1rem; width: auto; }
.pie__lema {
  margin-top: var(--e4);
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: 1.35rem;
  line-height: 1.3;
  max-width: 20rem;
}
.pie__lema b { color: var(--naranja); font-weight: inherit; }

.pie__titulo {
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d2d2d2;
  margin-bottom: var(--e4);
}
.pie__lista { display: grid; gap: var(--e3); }
.pie__lista a { text-decoration: none; font-size: var(--t-chico); }
.pie__lista a:hover { color: var(--naranja); }

/* Redes en el pie: solo el icono. Circulos de 44 px, el minimo comodo para el
   pulgar; el nombre de cada red va en aria-label para lectores de pantalla. */
.pie__redes { display: flex; gap: var(--e3); }
.pie__red {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--linea-oscura);
  border-radius: 50%;
  color: var(--papel);
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.pie__red:hover,
.pie__red:focus-visible { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); }

/* Direccion y horario: son dato, no enlace. Se distinguen del resto de la
   columna para que nadie intente hacerles clic. */
.pie__horario {
  margin-top: var(--e4);
  font-size: var(--t-micro);
  line-height: 1.7;
  color: #c9c9c9;
}

.pie__base {
  margin-top: clamp(2.5rem, 5vw, var(--e8));
  padding-top: var(--e5);
  border-top: 1px solid var(--linea-oscura);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e3);
  font-size: var(--t-micro);
  color: #c9c9c9;
}

/* --- 20. Barra movil de contacto ---------------------------------------- */
.barra-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--tinta);
  transform: translateY(100%);
  transition: transform var(--medio) var(--curva);
}
.barra-movil[data-visible='si'] { transform: none; }
@media (min-width: 48rem) { .barra-movil { display: none; } }
.barra-movil a {
  padding: var(--e4);
  text-align: center;
  text-decoration: none;
  color: var(--papel);
  font-family: var(--tecnica);
  font-size: var(--t-chico);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.barra-movil a + a { background: var(--naranja); color: var(--tinta); }

/* --- 21. Revelado al hacer scroll --------------------------------------- */
.js .revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva);
}
.js .revelar[data-visible='si'] { opacity: 1; transform: none; }

/* --- 22. Utilidades ----------------------------------------------------- */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.apilado { display: grid; gap: var(--e4); }
.apilado--amplio { gap: var(--e6); }

/* --- 22b. Asistente ----------------------------------------------------- */
.asistente {
  position: fixed;
  right: var(--e5);
  bottom: var(--e5);
  z-index: 46;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--e3);
}
@media (max-width: 47.99rem) {
  .asistente { right: var(--e4); bottom: 4.5rem; }
}

.asistente__pestana {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 0.8rem 1.15rem;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--tecnica);
  font-size: var(--t-chico);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgb(29 29 29 / 0.18);
  transition: background var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.asistente__pestana svg { color: var(--naranja); }
.asistente__pestana:hover { transform: translateY(-2px); }
.asistente[data-abierto='si'] .asistente__pestana { background: var(--naranja); color: var(--tinta); }
.asistente[data-abierto='si'] .asistente__pestana svg { color: var(--tinta); }

/* El atributo hidden tiene que ganarle al display:flex de abajo. */
.asistente__panel[hidden] { display: none; }

.asistente__panel {
  width: min(23.5rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 8rem));
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linea);
  box-shadow: 0 24px 60px rgb(29 29 29 / 0.22);
}
@media (max-width: 47.99rem) {
  .asistente__panel { max-height: min(30rem, calc(100vh - 10rem)); }
}

.asistente__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e4) var(--e5);
  background: var(--tinta);
  color: var(--papel);
}
.asistente__titulo {
  font-family: var(--tecnica);
  font-size: var(--t-chico);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.asistente__estado { font-size: var(--t-micro); color: #d2d2d2; margin-top: 2px; line-height: 1.4; }
.asistente__cerrar { color: var(--papel); padding: var(--e1); }
.asistente__cerrar:hover { color: var(--naranja); }

.asistente__conversacion {
  flex: 1;
  overflow-y: auto;
  padding: var(--e5);
  display: grid;
  gap: var(--e3);
  align-content: start;
  scrollbar-width: thin;
}

.mensaje {
  max-width: 88%;
  padding: 0.7rem 0.9rem;
  font-size: var(--t-chico);
  line-height: 1.5;
}
.mensaje--bot {
  background: var(--blanco);
  border-left: 2px solid var(--naranja);
  justify-self: start;
}
.mensaje--persona {
  background: var(--tinta);
  color: var(--papel);
  justify-self: end;
}

.mensaje--pensando { display: flex; gap: 4px; align-items: center; padding: 0.85rem 0.9rem; }
.mensaje--pensando span {
  width: 5px; height: 5px;
  background: var(--tinta-suave);
  border-radius: 50%;
  animation: latir 1.1s infinite ease-in-out;
}
.mensaje--pensando span:nth-child(2) { animation-delay: 0.15s; }
.mensaje--pensando span:nth-child(3) { animation-delay: 0.3s; }
@keyframes latir { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

.sugerencias { display: grid; gap: var(--e2); }
.sugerencia {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--e3);
  align-items: center;
  padding: var(--e2);
  background: var(--blanco);
}
.sugerencia img { width: 3rem; height: 3rem; object-fit: cover; }
.sugerencia__nombre { font-size: var(--t-chico); line-height: 1.25; }
.sugerencia__linea {
  font-family: var(--tecnica);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.sugerencia__acciones { display: grid; gap: 2px; justify-items: end; }
.sugerencia__boton, .sugerencia__enlace {
  font-family: var(--tecnica);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.3rem 0.5rem;
}
.sugerencia__boton { background: var(--naranja); color: var(--tinta); }
.sugerencia__enlace { color: var(--tinta-suave); }
.sugerencia__enlace:hover { color: var(--tinta); }

.asistente__opciones { display: flex; flex-wrap: wrap; gap: var(--e2); padding: 0 var(--e5) var(--e4); }
.asistente__opciones:empty { display: none; }
.opcion {
  font-family: var(--tecnica);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--linea);
  background: var(--blanco);
  color: var(--tinta);
  text-decoration: none;
  transition: all var(--rapido) var(--curva);
}
.opcion:hover { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.opcion--llena { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); text-align: center; }
.opcion--llena:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

.datos-rapidos { display: grid; gap: var(--e2); padding: var(--e3); background: var(--blanco); }

.asistente__entrada {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e5) var(--e4);
  border-top: 1px solid var(--linea);
}
.asistente__campo {
  flex: 1;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linea);
  background: var(--blanco);
  font-size: var(--t-chico);
}
.asistente__campo:focus { outline: 0; border-color: var(--naranja); }
.asistente__enviar {
  flex: none;
  padding: 0.62rem;
  background: var(--tinta);
  color: var(--papel);
  transition: background var(--rapido) var(--curva);
}
.asistente__enviar:hover { background: var(--naranja); color: var(--tinta); }
.asistente__cierre { display: grid; }

/* --- 23. Menos movimiento ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .revelar { opacity: 1; transform: none; }
  .js .gota-punto { animation: none; }
  .proceso__paso::before { width: 100%; }
}

/* --- 24. Impresion ------------------------------------------------------ */
@media print {
  .cabecera, .barra-movil, .asistente, .llamada { display: none; }
  body { background: #fff; }
  .marco-pagina, .llamada { clip-path: none; }
}

/* --- Visualizador de logo ------------------------------------------------ */
.vz { background: var(--papel); }
.vz__rejilla { display: grid; gap: var(--e7); align-items: start; }
@media (min-width: 900px) {
  .vz__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e8); }
}
.vz__panel { display: grid; gap: var(--e5); }
.vz__campo { display: grid; gap: var(--e3); }
.vz__etiqueta { font-family: var(--tecnica); font-size: var(--t-chico); letter-spacing: 0.08em; text-transform: uppercase; }
.vz__select {
  width: 100%; padding: var(--e4); background: var(--blanco); border: 1px solid var(--tinta);
  border-radius: 0; font-size: var(--t-cuerpo); cursor: pointer;
}
.vz__select:focus-visible, .vz__campo:has(#vz-archivo:focus-visible) .vz__subir { outline: 2px solid var(--tinta); outline-offset: 2px; }
.vz__subir { justify-self: start; cursor: pointer; }
.vz__subir[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.vz__rango { width: 100%; accent-color: var(--tinta); }
.vz__quitar { justify-self: start; }
.vz__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }
.vz__colores { border: 0; padding: 0; margin: 0; min-width: 0; }
.vz__fichas { display: flex; gap: var(--e3); flex-wrap: wrap; }
.vz__ficha { position: relative; display: inline-flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border: 1px solid var(--linea); background: var(--blanco); cursor: pointer; min-height: 44px; }
.vz__ficha input { position: absolute; opacity: 0; pointer-events: none; }
.vz__ficha:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.vz__ficha:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.vz__muestra { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--tinta); }
.vz__muestra--blanco { background: #fff; }
.vz__muestra--negro { background: #1d1d1d; }
.vz__muestra--naranja { background: #ff8a00; }
.vz__nota { font-size: var(--t-chico); color: var(--tinta-suave); }
.vz__estado { min-height: 1.5em; font-size: var(--t-chico); }
.vz__escenario {
  position: relative; aspect-ratio: 4 / 5; width: 100%; background: #f2f2f2;
  border: 1px solid var(--linea); overflow: hidden;
}
.vz__zoom { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) { .vz__zoom { transition: none; } }
.vz__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.vz__lienzo--agarrado { cursor: grabbing; }
.vz__lienzo:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; }
.vz__guia { pointer-events: none; }
.vz__vacio {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--e6);
  text-align: center; color: var(--tinta-suave); border: 1px dashed var(--linea); margin: var(--e5);
}
.vz [hidden] { display: none !important; }
/* En celular: menú → foto → resto de controles, para ver el resultado sin buscarlo. */
@media (max-width: 899px) {
  .vz__panel { display: contents; }
  .vz__panel > * { order: 3; }
  .vz__panel > .vz__campo:first-child { order: 1; }
  .vz__escenario { order: 2; width: min(100%, 44vh); justify-self: center; position: sticky; top: 84px; z-index: 2; box-shadow: 0 6px 18px rgba(29, 29, 29, 0.14); }
}

/* --- Paginas legales ---------------------------------------------------- */
.legal__indice { margin-top: var(--e6); padding: var(--e4) var(--e5); background: var(--blanco); border: 1px solid var(--linea); }
.legal__indice ol { margin: 0; padding-left: 1.4rem; list-style: decimal; display: grid; gap: var(--e2); font-size: var(--t-chico); }
@media (min-width: 40rem) { .legal__indice ol { grid-template-columns: 1fr 1fr; column-gap: var(--e6); } }
.legal ul { list-style: disc; }
.legal { margin-top: var(--e7); display: grid; gap: var(--e6); }
.legal section { scroll-margin-top: 6rem; }
.legal h2 { font-family: var(--display); font-weight: var(--peso-display); font-variation-settings: var(--opsz-display); font-size: var(--t-sub); line-height: 1.2; margin-bottom: var(--e3); }
.legal p, .legal li { line-height: 1.65; color: var(--tinta-suave); }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: var(--e3); }
.legal ul { padding-left: 1.2rem; display: grid; gap: var(--e2); }

/* ==========================================================================
   Pliegue (direccion de diseno)
   La pagina doblada del logo como estructura: campos a sangre en papel, tinta y naranja,
   esquina doblada en fotos y bloques, y la trama de puntos del manual como unico adorno.
   ========================================================================== */
:root {
  --pliegue: clamp(2.2rem, 4.4vw, 4.2rem);
  --h-cabecera: 4.75rem;
}

/* Titulares de seccion */
.pa-titulo {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: var(--t-titulo);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pa-titulo--medio { font-size: var(--t-seccion); }

/* --- Cabecera de pagina interior ------------------------------------------ */
.pa-cabeza { position: relative; overflow: clip; background: var(--papel); padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.pa-cabeza__campo {
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(3.25rem, 22%, 20rem);
  background: var(--naranja);
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
}
.pa-cabeza::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(22rem, 38%);
  height: 6rem;
  background-image: radial-gradient(circle, var(--naranja) 1.6px, transparent 2.1px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(to top right, #000 0%, transparent 80%);
  mask-image: linear-gradient(to top right, #000 0%, transparent 80%);
  opacity: 0.55;
  pointer-events: none;
}
.pa-cabeza .contenedor { position: relative; z-index: 1; }
.pa-cabeza__texto { padding-top: clamp(1.5rem, 4vw, 3.5rem); max-width: 52rem; padding-right: clamp(4rem, 14vw, 12rem); }
.pa-cabeza__titulo {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: clamp(2.5rem, 6.2vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pa-cabeza__bajada { margin-top: var(--e5); max-width: 36rem; font-size: var(--t-sub); line-height: 1.5; color: var(--tinta-suave); }
.pa-cabeza__fecha { display: block; margin-top: var(--e3); font-size: var(--t-chico); }
.pa-cabeza__acciones { margin-top: var(--e6); display: flex; flex-wrap: wrap; gap: var(--e3); }

/* Esquina doblada: el bloque pierde la esquina superior derecha y una solapa naranja-claro la recuerda. */
.pa-pliegue {
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--pliegue)) 0, 100% var(--pliegue), 100% 100%, 0 100%);
}
.pa-pliegue::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--pliegue);
  height: var(--pliegue);
  background: var(--naranja-claro);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: width var(--medio) var(--curva), height var(--medio) var(--curva);
  pointer-events: none;
}

/* --- Portada: el visor abre la pagina ------------------------------------- */
.vz--portada { position: relative; overflow: clip; background: var(--papel); padding-block: 0; }
/* Campo naranja: una celda de la rejilla, siempre del tamano de la fila del producto. */
.vz--portada .vz__rejilla::before {
  content: '';
  grid-row: 2;
  grid-column: 1;
  align-self: stretch;
  background: var(--naranja);
  margin: calc(-1 * var(--e5)) calc(-1 * var(--margen));
  clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%);
}
.vz--portada::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(30rem, 40%);
  height: 8rem;
  background-image: radial-gradient(circle, var(--naranja) 1.7px, transparent 2.2px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(to top right, #000 0%, transparent 78%);
  mask-image: linear-gradient(to top right, #000 0%, transparent 78%);
  opacity: 0.55;
  pointer-events: none;
}
.vz--portada .vz__rejilla {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--e5);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--e7) var(--margen) var(--e8);
  align-items: start;
}
.vz--portada .vz__titular { grid-row: 1; grid-column: 1; }
.vz--portada .vz__escenario { grid-row: 2; grid-column: 1; }
.vz--portada .vz__panel { grid-row: 3; grid-column: 1; }
.vz__h1 {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: clamp(2.6rem, 8.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.vz__bajada { margin-top: var(--e4); max-width: 32rem; font-size: var(--t-sub); line-height: 1.5; color: var(--tinta-suave); }
.vz--portada .vz__escenario {
  width: min(100%, 30rem);
  justify-self: center;
  border: 0;
  clip-path: polygon(0 0, calc(100% - var(--pliegue)) 0, 100% var(--pliegue), 100% 100%, 0 100%);
}
.vz--portada .vz__escenario::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--pliegue);
  height: var(--pliegue);
  background: var(--naranja-claro);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 3;
}
@media (min-width: 900px) {
  /* El campo naranja es una celda de la rejilla: la hoja del producto queda dentro, con naranja alrededor. */
  .vz--portada .vz__rejilla::before {
    content: '';
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    background: var(--naranja);
    margin: calc(-1 * var(--e7)) calc(-1 * var(--margen)) calc(-1 * var(--e7)) calc(-1 * clamp(2.5rem, 4vw, 4.5rem));
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
  }
  .vz--portada .vz__rejilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 4vw, 4.5rem);
    row-gap: var(--e5);
    min-height: calc(100svh - var(--h-cabecera));
    padding-block: var(--e7);
    padding-inline: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen))) var(--margen);
    align-items: center;
  }
  .vz--portada .vz__titular { grid-column: 1; grid-row: 1; align-self: end; }
  .vz--portada .vz__panel { grid-column: 1; grid-row: 2; align-self: start; gap: var(--e4); }
  .vz--portada .vz__escenario {
    grid-column: 2; grid-row: 1 / span 2;
    /* la hoja queda fija mientras la columna de controles crece al subir un logo */
    align-self: start; justify-self: center;
    position: sticky; top: calc(var(--h-cabecera) + 1.5rem);
    width: min(100%, calc((100svh - var(--h-cabecera) - 5rem) * 0.8), 40rem);
  }
  .vz__h1 { font-size: clamp(2.8rem, 4.1vw, 4.8rem); }
  .vz--portada .vz__bajada { font-size: var(--t-cuerpo); margin-top: var(--e3); }
}
/* Menos ruido en la primera pantalla; el detalle aparece cuando el visitante sube su logo. */
.vz--portada .vz__panel > .vz__campo:nth-of-type(2) .vz__nota { display: none; }
.vz--portada .vz__panel > .vz__nota { font-size: var(--t-micro); }

/* --- Promesa: una frase sobre tinta --------------------------------------- */
.pa-promesa { padding-block: clamp(3.5rem, 8vw, 7rem); }
.pa-promesa__texto {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: clamp(1.9rem, 4.4vw, 4rem);
  line-height: 1.12;
  max-width: 22ch;
  text-wrap: balance;
}
.pa-asterisco { color: var(--naranja); }
.pa-promesa__resto { display: block; margin-top: var(--e4); color: var(--naranja-claro); }
.pa-promesa__nota { margin-top: var(--e6); font-size: var(--t-chico); color: #d2d2d2; }

/* --- Lineas del catalogo: bandas a sangre --------------------------------- */
.pa-lineas { padding-block: clamp(4rem, 9vw, 8rem) 0; background: var(--blanco); }
.pa-lineas .pa-titulo { margin-bottom: clamp(2rem, 5vw, 4rem); }
.pa-linea {
  display: grid;
  gap: var(--e5);
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem) var(--margen);
  text-decoration: none;
  color: var(--tinta);
  border-top: 1px solid var(--linea);
  background: var(--blanco);
  transition: background var(--medio) var(--curva);
}
.pa-linea__nombre {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pa-linea__bajada { margin-top: var(--e4); max-width: 30rem; font-size: var(--t-sub); color: var(--tinta-suave); line-height: 1.5; }
.pa-linea__enlace {
  display: inline-flex; align-items: center; gap: var(--e2);
  margin-top: var(--e5);
  font-family: var(--tecnica); font-weight: 600; font-size: var(--t-chico);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.pa-linea__foto { aspect-ratio: 4 / 3; background: var(--papel); }
.pa-linea__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lento) var(--curva); }
.pa-linea:hover { background: var(--papel); }
.pa-linea:hover .pa-linea__foto img { transform: scale(1.04); }
.pa-linea:hover .pa-pliegue::after,
.pa-linea:focus-visible .pa-pliegue::after { width: calc(var(--pliegue) * 1.5); height: calc(var(--pliegue) * 1.5); }
.pa-linea:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; }
.pa-lineas__pie { padding-block: var(--e7); }
@media (min-width: 900px) {
  .pa-linea {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 6vw, 6rem);
    padding-inline: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen)));
  }
  .pa-linea:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pa-linea:nth-child(even) .pa-linea__foto { order: -1; }
  .pa-linea__foto { aspect-ratio: 5 / 4; }
}

/* --- Proceso: campo naranja saturado -------------------------------------- */
.pa-proceso { background: var(--naranja); color: var(--tinta); padding-block: clamp(4rem, 9vw, 8rem); position: relative; overflow: clip; }
.pa-proceso::after {
  content: '';
  position: absolute;
  right: -6rem;
  bottom: -6rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: var(--tinta);
  opacity: 0.1;
  pointer-events: none;
}
.pa-pasos { list-style: none; margin: clamp(2.5rem, 6vw, 5rem) 0 0; padding: 0; display: grid; gap: var(--e6); }
.pa-paso { border-top: 2px solid var(--tinta); padding-top: var(--e4); }
.pa-paso__numero {
  display: block;
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-variation-settings: var(--opsz-display);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
}
.pa-paso__titulo { margin-top: var(--e3); font-family: var(--tecnica); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pa-paso__texto { margin-top: var(--e2); font-size: var(--t-cuerpo); line-height: 1.5; max-width: 22rem; }
.pa-proceso__nota { margin-top: var(--e6); font-size: var(--t-chico); }
@media (min-width: 48rem) { .pa-pasos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e5); } }

/* --- Trabajos: tinta con fotos de clientes -------------------------------- */
.pa-trabajos { padding-block: clamp(4rem, 9vw, 8rem); }
.pa-trabajos__rejilla { margin-top: clamp(2rem, 5vw, 4rem); display: grid; gap: var(--e6); }
.pa-trabajo { display: block; color: var(--papel); text-decoration: none; }
.pa-trabajo__foto { aspect-ratio: 4 / 3; background: #2a2a2a; }
.pa-trabajo--chico .pa-trabajo__foto { aspect-ratio: 1 / 1; }
.pa-trabajo__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lento) var(--curva); }
.pa-trabajo:hover .pa-trabajo__foto img { transform: scale(1.04); }
.pa-trabajo:hover .pa-pliegue::after { width: calc(var(--pliegue) * 1.5); height: calc(var(--pliegue) * 1.5); }
.pa-trabajo__cliente { margin-top: var(--e4); font-family: var(--display); font-weight: var(--peso-display); font-variation-settings: var(--opsz-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; }
.pa-trabajo__sector { margin-top: var(--e1); color: #d2d2d2; font-size: var(--t-chico); }
.pa-trabajos__pie { margin-top: var(--e7); }
@media (min-width: 48rem) {
  .pa-trabajos__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-trabajo--grande { grid-column: 1 / -1; }
  .pa-trabajo--grande .pa-trabajo__foto { aspect-ratio: 21 / 9; }
  .pa-trabajo--chico .pa-trabajo__foto { aspect-ratio: 4 / 3; }
}

/* --- Cierre ---------------------------------------------------------------- */
.pa-cierre { background: var(--papel); padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; overflow: clip; }
.pa-cierre::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(8rem, 24vw, 22rem);
  aspect-ratio: 1;
  background: var(--naranja);
  border-top-left-radius: 100%;
  pointer-events: none;
}
.pa-cierre .contenedor { position: relative; z-index: 1; }
.pa-cierre__titulo { font-family: var(--display); font-weight: var(--peso-display); font-variation-settings: var(--opsz-display); font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: 1.04; letter-spacing: -0.015em; max-width: 16ch; text-wrap: balance; }
.pa-cierre__texto { margin-top: var(--e5); max-width: 30rem; font-size: var(--t-sub); color: var(--tinta-suave); line-height: 1.5; }
.pa-cierre__acciones { margin-top: var(--e6); display: flex; flex-wrap: wrap; gap: var(--e3); }

/* --- Servicios: filas editoriales ----------------------------------------- */
.pa-servicios { background: var(--blanco); padding-block: clamp(2rem, 5vw, 4rem); }
.pa-servicio { display: grid; gap: var(--e4); padding-block: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--linea); }
.pa-servicio:first-child { border-top: 0; }
.pa-servicio__nombre { font-family: var(--display); font-weight: var(--peso-display); font-variation-settings: var(--opsz-display); font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.05; letter-spacing: -0.01em; }
.pa-servicio__resumen { font-size: var(--t-sub); line-height: 1.45; font-weight: 600; max-width: 34rem; }
.pa-servicio__texto { margin-top: var(--e3); color: var(--tinta-suave); line-height: 1.6; max-width: 34rem; }
@media (min-width: 55rem) { .pa-servicio { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e8); align-items: start; } }

/* --- Proyectos ------------------------------------------------------------- */
.pa-proyectos { background: var(--blanco); padding-bottom: clamp(2rem, 5vw, 4rem); }
.proyecto__sector { font-family: var(--tecnica); font-weight: 600; font-size: var(--t-chico); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); }
.proyecto__fotos { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.proyecto__fotos .pa-pliegue { background: var(--papel); align-self: start; }
.proyecto__fotos img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; display: block; }
.proyecto__texto { font-size: var(--t-cuerpo); }

/* --- Nosotros -------------------------------------------------------------- */
.pa-historia { background: var(--blanco); padding-block: clamp(3rem, 7vw, 6rem); }
.pa-historia__rejilla { display: grid; gap: var(--e6); align-items: center; }
.pa-historia__texto p { font-family: var(--display); font-weight: var(--peso-display); font-variation-settings: var(--opsz-display); font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.25; max-width: 24ch; }
.pa-historia__texto p + p { margin-top: var(--e5); color: var(--tinta-suave); }
.pa-historia__foto { background: var(--papel); }
.pa-historia__foto img { width: 100%; height: auto; display: block; }
@media (min-width: 55rem) { .pa-historia__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e8); } }
.pa-principios { padding-block: clamp(4rem, 9vw, 8rem); }
.pa-principios__lista { margin-top: clamp(2rem, 5vw, 4rem); display: grid; gap: var(--e6); }
.pa-principio { border-top: 2px solid var(--naranja); padding-top: var(--e5); }
.pa-principio__titulo { font-family: var(--display); font-weight: var(--peso-display); font-variation-settings: var(--opsz-display); font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.08; text-wrap: balance; }
.pa-principio__texto { margin-top: var(--e3); color: #dedede; line-height: 1.6; max-width: 26rem; }
@media (min-width: 55rem) { .pa-principios__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e7); } }
.pa-clientes { background: var(--blanco); padding-block: clamp(4rem, 9vw, 7rem); }
.pa-clientes__bajada { margin-top: var(--e4); font-size: var(--t-sub); color: var(--tinta-suave); }
.pa-clientes__lista { list-style: none; margin: clamp(2rem, 5vw, 3.5rem) 0; padding: 0; display: grid; gap: 0; }
.pa-clientes__lista li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e2) var(--e5); padding-block: var(--e4); border-top: 1px solid var(--linea); }
.pa-clientes__lista li:last-child { border-bottom: 1px solid var(--linea); }
.pa-cliente__nombre { font-family: var(--display); font-weight: var(--peso-display); font-variation-settings: var(--opsz-display); font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
.pa-cliente__sector { color: var(--tinta-suave); }

/* --- Catalogo, fichas, contacto y legales --------------------------------- */
.pa-catalogo, .pa-formulario, .pa-legal { background: var(--blanco); }
.pa-catalogo { padding-top: clamp(2rem, 4vw, 3rem); }
.pa-otras { background: var(--papel); padding-block: clamp(3rem, 7vw, 5.5rem); }
.pa-otras .pa-titulo { margin-bottom: var(--e6); }
.pa-relacionados { background: var(--papel); }
.pa-relacionados .pa-titulo { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.pa-migas { background: var(--papel); }
.pa-ficha { background: var(--papel); }
.ficha__marco { position: relative; background: var(--blanco); }
.ficha__marco .ficha__foto { display: block; }
.tarjeta__marco {
  clip-path: polygon(0 0, calc(100% - var(--pliegue)) 0, 100% var(--pliegue), 100% 100%, 0 100%);
  --pliegue: clamp(1.6rem, 2.6vw, 2.4rem);
}
.tarjeta__marco::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  width: var(--pliegue);
  height: var(--pliegue);
  background: var(--naranja-claro);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transform: none;
  transition: width var(--medio) var(--curva), height var(--medio) var(--curva);
}
.tarjeta:hover .tarjeta__marco::after { transform: none; width: calc(var(--pliegue) * 1.5); height: calc(var(--pliegue) * 1.5); }
.tarjeta__nombre { font-size: 1.45rem; }
.pa-legal .columna-texto { max-width: 46rem; }
.pa-legal .legal { margin-top: clamp(2rem, 4vw, 3rem); }

/* Movimiento: el unico momento propio es la solapa que se abre. Con "reducir movimiento" no hay transiciones. */
@media (prefers-reduced-motion: reduce) {
  .pa-pliegue::after, .tarjeta__marco::after, .pa-linea, .pa-linea__foto img, .pa-trabajo__foto img { transition: none; }
  .pa-linea:hover .pa-linea__foto img, .pa-trabajo:hover .pa-trabajo__foto img { transform: none; }
}
.tarjeta__linea { font-family: var(--tecnica); font-weight: 600; font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); }

/* Catalogo en movil: dos columnas para no recorrer 28 piezas en una sola fila interminable. */
@media (max-width: 39.99rem) {
  .pa-catalogo .rejilla-productos, .pa-relacionados .rejilla-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5) var(--e3); }
  .pa-catalogo .tarjeta__nombre, .pa-relacionados .tarjeta__nombre { font-size: 1.15rem; }
  .pa-catalogo .tarjeta__resumen, .pa-relacionados .tarjeta__resumen { font-size: var(--t-micro); }
}
/* Las fotos de proyecto van dentro de su marco doblado: todas del mismo formato. */
.proyecto__fotos .pa-pliegue > img:only-child { grid-column: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* Movimiento: la solapa que se abre es el unico momento animado con intencion propia.
   Las secciones no entran con una aparicion repetida: el contenido esta siempre visible. */
.js .revelar { opacity: 1; transform: none; transition: none; }

/* Detalles del navegador pintados con la paleta. */
html { scrollbar-color: var(--naranja) var(--papel); }
input, textarea, select { caret-color: var(--naranja); }

/* ==========================================================================
   Ajustes tras la prueba en celular
   ========================================================================== */

/* Las fotos de producto son #f2f2f2, igual que el papel: sin marco ni recuadro se funden con la pagina. */
.pa-lineas, .pa-catalogo, .pa-relacionados, .pa-otras, .pa-ficha, .pa-migas, .pa-historia { background: var(--papel); }
.pa-linea, .pa-linea:hover { background: var(--papel); }
.pa-linea__foto.pa-pliegue, .ficha__marco.pa-pliegue, .pa-historia__foto.pa-pliegue, .tarjeta__marco { clip-path: none; background: transparent; }
.pa-linea__foto.pa-pliegue::after, .ficha__marco.pa-pliegue::after, .pa-historia__foto.pa-pliegue::after, .tarjeta__marco::after { display: none; }
.pa-linea__foto { background: transparent; }
.ficha__foto { background: transparent; }
.tarjeta__marco { background: transparent; }

/* En el visor, el dedo desplaza la pagina; solo se arrastra el logo cuando ya subiste el tuyo. */
.vz__lienzo { touch-action: pan-y; }
.vz__lienzo--editable { touch-action: none; }

/* Movil: la hoja del producto se queda fija bajo la cabecera mientras bajas por los controles. */
@media (max-width: 899.98px) {
  .vz--portada { --ancho-hoja: min(calc(100vw - 2 * var(--margen)), 34svh); --alto-hoja: calc(var(--ancho-hoja) * 1.25); }
  .vz--portada .vz__escenario {
    position: sticky;
    top: calc(var(--h-cabecera) + var(--e3));
    z-index: 4;
    grid-row: 2;
    align-self: start;
    justify-self: center;
    width: var(--ancho-hoja);
  }
  .vz--portada .vz__panel { grid-row: 2; margin-top: calc(var(--alto-hoja) + var(--e6)); }
  /* El campo naranja acompana a la hoja: tambien queda fijo y tapa lo que pasa por los lados. */
  .vz--portada .vz__rejilla::before {
    position: sticky;
    top: var(--h-cabecera);
    z-index: 3;
    align-self: start;
    height: calc(var(--alto-hoja) + 2 * var(--e3));
    margin-top: calc(-1 * var(--e3));
  }
}