/* =========================================================================
   Ofitodo — páginas interiores (catálogo, ficha de producto, contenido)
   Extiende el sistema de diseño de ofitodo.css. Sin dependencias.
   ========================================================================= */

/* --- Migas de pan -------------------------------------------------------- */
.migas { border-bottom: 1px solid var(--borde); background: var(--blanco); }
.migas ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; margin: 0; padding: .9rem 0; font-size: var(--t-xs);
}
.migas li { display: flex; align-items: center; gap: .5rem; color: var(--tenue); }
.migas li + li::before { content: "/"; color: var(--borde); }
.migas a { color: var(--tenue); text-decoration: none; }
.migas a:hover { color: var(--acento); text-decoration: underline; }
.migas [aria-current] { color: var(--texto); font-weight: 600; }

/* --- Franja de encabezado de sección ------------------------------------- */
.franja {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--azul); color: #fff;
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0;
}
.franja__media { position: absolute; inset: 0; z-index: -2; }
.franja__media img { width: 100%; height: 100%; object-fit: cover; }
.franja--foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10, 26, 51, .93) 0%, rgba(10, 26, 51, .82) 45%, rgba(10, 26, 51, .55) 100%);
}
.franja__inner { max-width: 46rem; }
.franja h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.08;
  letter-spacing: -.02em; margin: .6rem 0 0; color: #fff;
}
.franja p { color: rgba(255, 255, 255, .84); margin: 1rem 0 0; max-width: 42rem; }
.franja__conteo {
  display: inline-block; margin-top: 1.4rem !important; padding: .4rem .9rem;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #fff !important;
}

/* --- Secciones auxiliares ------------------------------------------------ */
.seccion--ajustada { padding-block: clamp(2rem, 1.4rem + 2vw, 3rem); }
.seccion--alt { background: var(--fondo-2); }
.contenedor--texto { max-width: 52rem; }
.titulo-menor {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.65rem); letter-spacing: -.01em;
  margin: 0 0 1.6rem; color: var(--tinta);
}
.vacio {
  padding: 3rem 1.5rem; text-align: center; color: var(--tenue);
  background: var(--fondo-2); border-radius: var(--r); border: 1px dashed var(--borde);
}
.etiqueta--enlace {
  text-decoration: none; transition: color .18s var(--ease);
}
.etiqueta--enlace:hover { color: var(--azul); }

/* --- Fichas de navegación (subcategorías, hermanas) ---------------------- */
.fichas { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.fichas a {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem 1rem; border: 1px solid var(--borde); border-radius: var(--r-full);
  background: var(--blanco); color: var(--texto); text-decoration: none;
  font-size: var(--t-sm); font-weight: 500; line-height: 1;
  transition: border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.fichas a:hover { border-color: var(--acento); color: var(--acento); transform: translateY(-1px); }
.fichas b {
  font-size: var(--t-xs); font-weight: 700; color: var(--tenue);
  background: var(--fondo-2); border-radius: var(--r-full); padding: .15rem .45rem;
}
.fichas a:hover b { background: var(--acento-claro); color: var(--acento); }


/* --- Rejilla y tarjeta de producto --------------------------------------- */
.rejilla--prod { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.prod {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
  text-decoration: none; color: inherit;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.prod:hover { transform: translateY(-3px); box-shadow: var(--suave); border-color: #d3dbe6; }
.prod__img {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--fondo-2); border-bottom: 1px solid var(--borde);
}
.prod__img img {
  width: 100%; height: 100%; object-fit: contain; padding: .75rem;
  transition: transform .35s var(--ease);
}
.prod:hover .prod__img img { transform: scale(1.04); }
.prod__sinimg { display: block; width: 100%; height: 100%; background: var(--fondo-2); }
.prod__cuerpo { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.05rem 1.15rem; flex: 1; }
.prod__nombre {
  font-weight: 600; font-size: var(--t-sm); line-height: 1.35; color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prod__sku { font-size: var(--t-xs); color: var(--tenue); }
.prod__ir {
  margin-top: auto; padding-top: .6rem; display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--t-xs); font-weight: 600; color: var(--acento);
}
.prod__ir svg { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.prod:hover .prod__ir svg { transform: translateX(3px); }

/* --- Ficha de producto --------------------------------------------------- */
.ficha { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.ficha__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start;
}
.galeria { position: sticky; top: calc(var(--alto-cab, 76px) + 1.25rem); min-width: 0; }
.ficha__info { min-width: 0; }
.galeria__marco {
  aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-lg);
}
.galeria__marco img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }
.galeria__tiras {
  display: flex; flex-wrap: wrap;
  gap: .6rem; list-style: none; margin: .75rem 0 0; padding: 0;
}
.galeria__tiras > li { flex: 0 0 4.5rem; }
.galeria__mini {
  display: block; width: 100%; aspect-ratio: 1 / 1; padding: .3rem; cursor: pointer;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-sm);
  transition: border-color .18s var(--ease);
}
.galeria__mini img { width: 100%; height: 100%; object-fit: contain; }
.galeria__mini:hover { border-color: var(--acento); }
.galeria__mini.activa { border-color: var(--azul); box-shadow: 0 0 0 2px var(--acento-claro); }

.ficha__info h1 {
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem); line-height: 1.15;
  letter-spacing: -.02em; margin: .55rem 0 0; color: var(--tinta);
}
.ficha__sku { margin: .6rem 0 0; font-size: var(--t-sm); color: var(--tenue); }
.ficha__sku strong { color: var(--texto); font-weight: 600; letter-spacing: .02em; }
.ficha__resumen { margin: 1.1rem 0 0; color: var(--texto); line-height: 1.65; }
.ficha__precio {
  display: flex; flex-direction: column; gap: .15rem; margin-top: 1.6rem;
  padding: 1.1rem 1.35rem; background: var(--fondo-2);
  border: 1px solid var(--borde); border-radius: var(--r);
}
.ficha__precio strong { font-size: 1.4rem; color: var(--tinta); letter-spacing: -.01em; }
.ficha__precio span { font-size: var(--t-xs); color: var(--tenue); }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.ficha__garantias {
  display: grid; gap: .7rem; list-style: none; margin: 1.8rem 0 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--borde);
}
.ficha__garantias li {
  display: flex; align-items: center; gap: .65rem;
  font-size: var(--t-sm); color: var(--texto);
}
.ficha__garantias svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--wa); }

/* --- Prosa (descripciones de producto y contenido editorial) ------------- */
.prosa { color: var(--texto); line-height: 1.75; }
.prosa > :first-child { margin-top: 0; }
.prosa > :last-child { margin-bottom: 0; }
.prosa p { margin: 0 0 1.05rem; }
.prosa h2, .prosa h3, .prosa h4 {
  color: var(--tinta); line-height: 1.25; letter-spacing: -.01em; margin: 2rem 0 .8rem;
}
.prosa h2 { font-size: 1.4rem; }
.prosa h3 { font-size: 1.15rem; }
.prosa h4 { font-size: 1rem; }
.prosa ul, .prosa ol { margin: 0 0 1.05rem; padding-left: 1.35rem; }
.prosa li { margin-bottom: .45rem; }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul > li { position: relative; padding-left: 1.5rem; }
.prosa ul > li::before {
  content: ""; position: absolute; left: .25rem; top: .62em;
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--acento);
}
.prosa ol { list-style: decimal; }
.prosa a { color: var(--acento); text-underline-offset: .18em; }
.prosa strong { color: var(--tinta); font-weight: 600; }
.prosa img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.prosa table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.05rem;
  font-size: var(--t-sm); display: block; overflow-x: auto;
}
.prosa th, .prosa td { padding: .6rem .8rem; border: 1px solid var(--borde); text-align: left; }
.prosa th { background: var(--fondo-2); font-weight: 600; color: var(--tinta); }
.prosa blockquote {
  margin: 0 0 1.05rem; padding: .9rem 1.25rem;
  border-left: 3px solid var(--acento); background: var(--fondo-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--texto);
}
.prosa iframe, .prosa video { max-width: 100%; border-radius: var(--r-sm); }

/* --- Adaptación a pantallas menores -------------------------------------- */
@media (max-width: 900px) {
  .ficha__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .galeria { position: static; }
  .galeria__marco { max-width: 32rem; margin-inline: auto; }
  .galeria__tiras { max-width: 32rem; margin-inline: auto; }
}
@media (max-width: 560px) {
  .rejilla--prod { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; }
  .prod__cuerpo { padding: .8rem .85rem .95rem; }
  .galeria__marco img { padding: 1rem; }
  .ficha__acciones .btn { width: 100%; justify-content: center; }
  .migas ol { font-size: .72rem; }
}

/* --- Botón secundario sobre fondo claro ---------------------------------- */
.btn--linea {
  background: var(--blanco); color: var(--azul);
  box-shadow: inset 0 0 0 1.5px var(--borde);
}
.btn--linea:hover {
  background: var(--fondo-2); color: var(--azul-900);
  box-shadow: inset 0 0 0 1.5px var(--acento); transform: translateY(-2px);
}

/* --- Formulario de cotización -------------------------------------------- */
.cotiza {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--suave);
}
.cotiza__intro { margin: -1rem 0 1.6rem; color: var(--tenue); font-size: var(--t-sm); }
.cotiza__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cotiza__ancho { grid-column: 1 / -1; }
.cotiza label {
  display: flex; flex-direction: column; gap: .4rem;
  font-size: var(--t-xs); font-weight: 600; color: var(--tinta);
  letter-spacing: .02em; text-transform: uppercase;
}
.cotiza input, .cotiza textarea {
  font: inherit; font-size: var(--t-sm); font-weight: 400;
  text-transform: none; letter-spacing: normal; color: var(--texto);
  padding: .7rem .85rem; background: var(--fondo);
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.cotiza textarea { resize: vertical; min-height: 5.5rem; }
.cotiza input::placeholder, .cotiza textarea::placeholder { color: #9aa6b6; }
.cotiza input:focus, .cotiza textarea:focus {
  outline: none; background: var(--blanco);
  border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro);
}
.cotiza__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.cotiza__aviso { margin: 0; font-size: var(--t-sm); color: var(--tenue); }
.cotiza__aviso--ok { color: #167a3d; font-weight: 600; }
.cotiza__aviso--error { color: #b4232a; font-weight: 600; }
.cotiza button[disabled] { opacity: .6; cursor: progress; }

@media (max-width: 560px) {
  .cotiza__campos { grid-template-columns: 1fr; }
  .cotiza__pie .btn { width: 100%; justify-content: center; }
}

/* --- Rejillas auxiliares de páginas interiores --------------------------- */
.rejilla--dos { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.rejilla--tres { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.rejilla--cuatro { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* Panel limpio: sin franja de color arriba. La jerarquía la da un rótulo
   discreto sobre el título y una sombra suave que responde al puntero. */
.panel {
  position: relative; background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  box-shadow: 0 1px 2px rgb(16 32 58 / .04);
  transition: box-shadow .28s var(--ease), transform .28s var(--ease), border-color .28s var(--ease);
}
.panel:hover { box-shadow: 0 12px 32px -12px rgb(16 32 58 / .18); transform: translateY(-2px); border-color: #d8e0ea; }
.panel h2 {
  margin: 0 0 .9rem; font-size: 1.35rem; color: var(--tinta); letter-spacing: -.015em;
  display: flex; align-items: center; gap: .7rem;
}
.panel h2::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--acento); flex: none;
}
.panel p { margin: 0; color: var(--texto); line-height: 1.75; }

/* --- Página de contacto -------------------------------------------------- */
.contacto__grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start;
}
.contacto__lista { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.1rem; }
.contacto__lista li { display: flex; flex-direction: column; gap: .2rem; }
.contacto__et {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tenue);
}
.contacto__lista a {
  font-size: 1.05rem; font-weight: 600; color: var(--tinta);
  text-decoration: none; width: fit-content;
  transition: color .18s var(--ease);
}
.contacto__lista a:hover { color: var(--acento); text-decoration: underline; }
.contacto__datos .ficha__garantias { margin-top: 0; }
.contacto__datos .btn--wa { margin-top: 1.8rem; }

@media (max-width: 900px) {
  .contacto__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Blog: tarjetas y artículo ------------------------------------------- */
.rejilla--notas { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.nota {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
  text-decoration: none; color: inherit;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.nota:hover { transform: translateY(-3px); box-shadow: var(--suave); border-color: #d3dbe6; }
.nota__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fondo-2); }
.nota__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.nota:hover .nota__img img { transform: scale(1.045); }
.nota__cuerpo { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem 1.3rem 1.4rem; flex: 1; }
.nota__fecha {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tenue);
}
.nota__cuerpo h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; color: var(--tinta); letter-spacing: -.01em; }
.nota__cuerpo p {
  margin: 0; font-size: var(--t-sm); color: var(--texto); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nota__ir {
  margin-top: auto; padding-top: .7rem; display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--t-xs); font-weight: 600; color: var(--acento);
}
.nota__ir svg { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.nota:hover .nota__ir svg { transform: translateX(3px); }

.nota-completa__cab { padding: clamp(2.5rem, 1.8rem + 3vw, 4rem) 0 1.5rem; }
.nota-completa__cab h1 {
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem); line-height: 1.12;
  letter-spacing: -.02em; color: var(--tinta); margin: .6rem 0 .8rem;
}
.nota-completa__portada { margin-bottom: -1rem; }
.nota-completa__portada img {
  width: 100%; max-height: 32rem; object-fit: cover;
  border-radius: var(--r-lg); border: 1px solid var(--borde);
}

/* Galería dentro de un artículo (sustituye a los carruseles de Elementor) */
.galeria-nota {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  gap: .75rem; list-style: none; margin: 1.5rem 0; padding: 0;
}
.galeria-nota li { margin: 0; padding: 0; }
.galeria-nota li::before { display: none; }
.galeria-nota img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--borde);
}

/* --- Visor de imágenes a pantalla completa (lightbox) --------------------
   Propio, sin librerías: usa <dialog>, cierra con Esc o clic fuera y
   permite avanzar con las flechas del teclado.                            */
.visor { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.visor::backdrop { background: rgb(8 18 35 / .92); backdrop-filter: blur(3px); }
.visor__caja { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.visor__img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--r-sm); box-shadow: 0 24px 60px -20px rgb(0 0 0 / .6);
  animation: visor-entra .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes visor-entra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.visor__btn {
  position: absolute; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / .12); color: #fff; border: 1px solid rgb(255 255 255 / .22);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.visor__btn:hover { background: rgb(255 255 255 / .22); transform: scale(1.06); }
.visor__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.visor__btn svg { width: 1.35rem; height: 1.35rem; }
.visor__cerrar { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); }
.visor__ant { left: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.visor__sig { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.visor__ant:hover, .visor__sig:hover { transform: translateY(-50%) scale(1.06); }
.visor__pos {
  position: absolute; bottom: clamp(.75rem, 2vw, 1.5rem); left: 50%; transform: translateX(-50%);
  color: rgb(255 255 255 / .75); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em;
  background: rgb(0 0 0 / .35); padding: .35rem .8rem; border-radius: var(--r-full);
}
.visor[hidden] { display: none; }
/* Señal de que la imagen se puede ampliar */
.galeria__marco { cursor: zoom-in; }
.galeria-nota img { cursor: zoom-in; }
@media (max-width: 560px) { .visor__ant, .visor__sig { display: none; } }

/* --- Artículo con maquetación propia -------------------------------------
   El CSS del autor va acotado a este contenedor (scripts/css-acotar.mjs), así
   que no puede afectar al encabezado, al pie ni al resto del sitio. Aquí solo
   se aísla del entorno y se le da un ancho de página completo.             */
.articulo-propio {
  display: block;
  /* corta cualquier herencia tipográfica del sitio: manda el CSS del autor */
  font-size: 16px; line-height: normal; color: var(--texto);
  contain: layout style;
}
.articulo-propio img, .articulo-propio video, .articulo-propio iframe { max-width: 100%; }
.articulo-propio table { max-width: 100%; }
/* La página del artículo propio no necesita el margen superior de sección */
.pag-nota--propia main > .articulo-propio { margin: 0; }

/* --- Bloques de sector: tarjetas con icono -------------------------------
   Antes eran títulos con un párrafo suelto y se leían como relleno. El icono
   nombra la pieza o el servicio; el chip circular repite el de .paso__n para
   no introducir una forma nueva. */
.pieza__ico, .destacado__ico, .descarga__ico {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; border-radius: 50%;
  background: var(--fondo-2); color: var(--acento);
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.pieza__ico svg, .destacado__ico svg, .descarga__ico svg { width: 22px; height: 22px; }

/* Rejilla de piezas */
.piezas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 24rem));
  justify-content: center; gap: .9rem; list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.pieza {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1.1rem 1.15rem; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--r);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.pieza:hover { transform: translateY(-3px); box-shadow: var(--s-2); border-color: #d3dbe6; }
.pieza:hover .pieza__ico { background: var(--acento); color: #fff; }
.pieza__ico { width: 42px; height: 42px; }
.pieza__txt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pieza__txt strong { font-size: var(--t-sm); font-weight: 600; color: var(--tinta); line-height: 1.35; }
.pieza__txt span { font-size: var(--t-sm); color: var(--suave); line-height: 1.5; }

/* Tarjeta destacada: llave en mano, servicio, catálogo con texto */
.destacado {
  display: flex; align-items: flex-start; gap: 1.35rem;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  box-shadow: 0 1px 2px rgb(16 32 58 / .04);
}
.destacado__ico { width: 52px; height: 52px; }
.destacado__ico svg { width: 25px; height: 25px; }
.destacado__cuerpo { min-width: 0; }
.destacado__cuerpo h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin: .15rem 0 .55rem; }
.destacado__cuerpo p { font-size: var(--t-base); color: var(--texto); line-height: 1.65; margin: 0; max-width: 62ch; }
.destacado__cta { margin-top: 1.25rem !important; }

/* Descarga de catálogo: una fila que se ve accionable */
.descarga {
  display: flex; align-items: center; gap: 1.15rem; text-decoration: none;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 1.15rem 1.35rem;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.descarga:hover { transform: translateY(-3px); box-shadow: var(--s-2); border-color: var(--acento); }
.descarga:hover .descarga__ico { background: var(--acento); color: #fff; }
.descarga__ico { width: 48px; height: 48px; }
.descarga__cuerpo { display: flex; flex-direction: column; gap: .18rem; min-width: 0; flex: 1; }
.descarga__cuerpo strong { font-size: 1.0625rem; font-weight: 700; color: var(--tinta); letter-spacing: -.01em; }
.descarga__cuerpo span { font-size: var(--t-sm); color: var(--suave); }
.descarga__accion {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acento);
}
.descarga__accion svg { width: 15px; height: 15px; transition: transform var(--ease); }
.descarga:hover .descarga__accion svg { transform: translateX(4px); }

@media (max-width: 620px) {
  .destacado { flex-direction: column; gap: 1rem; }
  .descarga { flex-wrap: wrap; }
  .descarga__accion { width: 100%; justify-content: flex-end; }
}


/* --- Carta de acabados de melamina ---------------------------------------
   57 muestras reales del catalogo. Tiles cuadradas para que el veteado se lea;
   el nombre debajo porque el cliente pide por nombre, no por foto. */
.acabados__nota {
  margin: .35rem 0 0; color: var(--tenue); font-size: .95rem; max-width: 60ch;
}
.acabados__grupo { margin-top: 1.6rem; }
.acabados__col {
  margin: 0 0 .8rem; font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tenue); font-weight: 700;
}
.acabados__col b {
  display: inline-block; margin-left: .35rem; padding: .1rem .45rem;
  background: var(--fondo-2); color: var(--acento); border-radius: 999px;
  font-size: .78rem; letter-spacing: 0;
}
.acabados {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: .85rem; list-style: none; margin: 0; padding: 0;
}
.acabado { text-align: center; }
.acabado img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: calc(var(--r) * .6); border: 1px solid var(--borde);
  background: var(--fondo-2);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.acabado:hover img { transform: scale(1.04); box-shadow: var(--s-2); }
.acabado span {
  display: block; margin-top: .4rem; font-size: .8rem;
  color: var(--tenue); line-height: 1.25;
}
@media (max-width: 620px) {
  .acabados { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: .6rem; }
  .acabado span { font-size: .72rem; }
}


/* --- Destacadas en columnas ----------------------------------------------
   Antes cada una ocupaba una seccion entera a todo el ancho y la pagina
   quedaba descuadrada. Ahora comparten rejilla; con 1 o 2 tarjetas la rejilla
   se centra (max-content) en lugar de estirarse. */
.destacados {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.destacados--c1 { grid-template-columns: minmax(0, 34rem); justify-content: center; }
.destacados--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.destacados--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.destacados--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.destacados .destacado { height: 100%; }



/* --- Tarjetas visuales (proyectos y categorias) ---------------------------
   Antes eran pildoras de texto: la pagina llegaba a "Productos relacionados"
   sin haber ensenado nada. Las fotos de proyecto son instalaciones reales
   tomadas de cada pagina de proyecto del propio sitio.
   La rejilla se centra con pocas tarjetas en vez de estirarlas. */
/* Columnas segun el numero de tarjetas (ver columnas() en interiores.ts):
   con 2 fichas ocupan el ancho completo en vez de quedarse chicas y centradas. */
.visual {
  display: grid; gap: 1.1rem; margin-top: 1.4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.visual--c1 { grid-template-columns: minmax(0, 30rem); justify-content: center; }
.visual--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visual--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visual--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r); text-decoration: none; color: inherit; height: 100%;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.vcard:hover { transform: translateY(-4px); box-shadow: var(--s-2); border-color: #d3dbe6; }
.vcard__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--fondo-2); }
.vcard__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.vcard:hover .vcard__img img { transform: scale(1.05); }
.vcard__sinimg { display: block; width: 100%; height: 100%; background: var(--fondo-2); }
.vcard__pie { display: flex; flex-direction: column; gap: .3rem; padding: .95rem 1.05rem 1.1rem; }
.vcard__pie strong { font-size: 1rem; line-height: 1.3; color: var(--tinta); }
.vcard__pie > span {
  font-size: .85rem; color: var(--acento); font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem;
}
/* FLECHA no trae width/height propios: sin esto el SVG se estira dentro del
   flex y sale gigante. Lo mismo aplica a cualquier uso nuevo de FLECHA/CHECK. */
.vcard__pie svg { width: 15px; height: 15px; flex: 0 0 auto; }
.vcard__pie b {
  background: var(--fondo-2); border-radius: 999px;
  padding: .05rem .4rem; font-size: .8rem;
}



/* --- Galeria de producto del sector ---------------------------------------
   Foto real por linea de producto, recortada del catalogo del sector. Fondo
   claro y no blanco para que las piezas blancas (gabinetes, vitrinas,
   lavamanos) no desaparezcan sobre la tarjeta. */
.gsector__nota { margin: .35rem 0 0; color: var(--tenue); font-size: .95rem; max-width: 62ch; }
.gsector {
  display: grid; gap: 1rem; margin: 1.4rem 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gpieza {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.gpieza:hover { transform: translateY(-4px); box-shadow: var(--s-2); border-color: #d3dbe6; }
.gpieza__img { display: block; aspect-ratio: 1; background: var(--fondo-2); overflow: hidden; }
.gpieza__img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  mix-blend-mode: multiply;
  transition: transform .45s var(--ease);
}
.gpieza:hover .gpieza__img img { transform: scale(1.05); }
.gpieza__pie {
  padding: .7rem .85rem .8rem; font-size: .88rem; font-weight: 600;
  color: var(--tinta); text-align: center; line-height: 1.3;
}


/* --- Fotos de obra entregada ----------------------------------------------
   A diferencia de .galeria (fotografia de producto sobre blanco), aqui son
   fotos de instalacion: ocupan el marco entero, sin mix-blend. */
.obra {
  display: grid; gap: 1rem; margin: 1.3rem 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.obra__foto {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.obra__foto:hover { transform: translateY(-3px); box-shadow: var(--s-2); }
.obra__foto img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
}
.obra__foto span {
  padding: .7rem .9rem .85rem; font-size: .88rem; color: var(--tenue); line-height: 1.35;
}


/* Intro de /descargar-catalogo/: centrada bajo el encabezado, que tambien lo va. */
.catalogo__intro {
  max-width: 58ch; margin: 0 auto 1.6rem; text-align: center;
  color: var(--suave); font-size: var(--t-base);
}


/* --- Ficha de caso de proyecto --------------------------------------------
   Los datos duros del proyecto, separados de la prosa. Solo se pintan los
   campos que ventas confirmo; el resto no existe en el HTML. */
.caso { display: grid; gap: 0; margin: 0 0 1.6rem; border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; }
.caso__fila { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0; }
.caso__fila + .caso__fila { border-top: 1px solid var(--linea); }
.caso__fila dt {
  padding: .85rem 1.1rem; background: var(--fondo-2);
  font-size: .85rem; font-weight: 700; color: var(--tinta);
}
.caso__fila dd { margin: 0; padding: .85rem 1.1rem; color: var(--suave); }
.caso__cita {
  margin: 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--acento);
  background: var(--fondo-2); border-radius: 0 var(--r) var(--r) 0;
}
.caso__cita p { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--tinta); }
.caso__cita cite { display: block; margin-top: .6rem; font-size: .88rem; color: var(--tenue); font-style: normal; }
@media (max-width: 620px) { .caso__fila { grid-template-columns: minmax(0, 1fr); } .caso__fila dd { padding-top: 0; } }


/* Fotos de planta en la portada: cuatro en fila, mas anchas que altas para que
   se lea la nave. Van bajo los cuatro talleres, como prueba de lo que afirman. */
.obra--planta { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.6rem; }
.obra--planta .obra__foto img { aspect-ratio: 4 / 3; }


/* --- Filtros del hub de proyectos ------------------------------------------
   Botones, no enlaces: filtran en cliente sin cambiar de URL. La rejilla es la
   misma .visual del resto del sitio. */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .4rem; }
.filtro {
  appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--blanco); color: var(--tinta);
  font-size: .9rem; font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filtro:hover { border-color: var(--acento); color: var(--acento); }
.filtro b { font-size: .78rem; font-weight: 700; background: var(--fondo-2); border-radius: 999px; padding: .05rem .4rem; }
.filtro--on { background: var(--acento); border-color: var(--acento); color: #fff; }
.filtro--on b { background: rgba(255,255,255,.22); color: #fff; }
.filtros__vacio { margin: 1.4rem 0 0; color: var(--tenue); }


/* Lectura relacionada: articulos del blog del sector. Deliberadamente sobrio y
   sin foto, para que no compita visualmente con los proyectos entregados. */
.lecturas { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.lecturas a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--acento); font-weight: 600; text-decoration: none;
}
.lecturas a:hover { text-decoration: underline; }
.lecturas svg { width: 15px; height: 15px; flex: 0 0 auto; }


/* --- Hub de proyectos: banda + tarjetas ------------------------------------
   Estructura tomada de una referencia que gusto al cliente (Linea Italia), con
   la paleta de Ofitodo: azul de marca en vez del verde oliva original. Las
   tarjetas suben sobre el borde inferior de la banda. */
.banda-proy {
  background: var(--azul-900);
  color: var(--blanco);
  padding: clamp(2.4rem, 2rem + 3vw, 4.2rem) 0 clamp(5rem, 4rem + 6vw, 8rem);
}
.etiqueta--clara { color: var(--acento-claro); }
.banda-proy__cab {
  display: grid; gap: clamp(.6rem, 2vw, 2.5rem); align-items: start;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  margin-top: .7rem;
}
.banda-proy__cab h1 {
  color: var(--blanco); margin: 0;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); line-height: 1.1; text-wrap: balance;
}
.banda-proy__cab p {
  margin: .35rem 0 0; color: rgba(255,255,255,.78);
  font-size: var(--t-base); line-height: 1.6; text-align: right;
}
/* La rejilla de tarjetas sube y monta sobre la banda */
.banda-proy + .seccion { margin-top: clamp(-4.4rem, -3.4rem - 4vw, -6.6rem); position: relative; z-index: 1; }

/* El solape anterior da por hecho que debajo viene una sección CLARA: la banda
   deja mucho aire abajo y la siguiente sube a taparlo. Desde que la franja de
   clientes se movió junto al hero (2026-09-03), debajo viene el cierre, que es
   oscuro y con su propio fondo — y al subir 70 px tapaba la mitad inferior del
   botón «Ver todos los proyectos».
   Aquí se cancela el solape y se recorta el aire sobrante, que solo existía
   para dejar sitio a ese solape. La raya fina evita que los dos bloques
   oscuros se lean como uno solo.
   Sin :has() (navegador viejo) el margen sigue en 0 y lo único que queda es un
   hueco oscuro algo mayor: nada se tapa. */
.banda-proy + .seccion.cierre { margin-top: 0; border-top: 1px solid rgb(255 255 255 / .1); }
.banda-proy:has(+ .cierre) { padding-bottom: clamp(2.6rem, 2rem + 2.4vw, 4.2rem); }
.banda-proy__cab h2 {
  color: var(--blanco); margin: 0;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); line-height: 1.1; text-wrap: balance;
}
.banda-proy--home {
  padding-top: clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.banda-proy--home .visual { margin-top: clamp(1.2rem, 2vw, 2rem); }
.banda-proy--home .clientes__cta { margin-top: clamp(1.4rem, 2vw, 2.2rem); }

/* Hub: una sola banda azul que ya contiene filtros y tarjetas. Antes eran dos
   secciones y el margen negativo que las montaba (-70px) lo anulaba el
   padding-top de .seccion (112px): quedaban ~195px de azul vacio. */
.banda-proy--hub { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.banda-proy--hub .filtros { margin-top: clamp(1.1rem, 2vw, 1.8rem); }
.banda-proy--hub #rejilla-proyectos { margin-top: clamp(1rem, 2vw, 1.5rem); }
/* Los filtros nacieron para fondo claro; sobre el azul se invierten. */
.banda-proy--hub .filtro {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); color: var(--blanco);
}
.banda-proy--hub .filtro:hover { background: rgba(255,255,255,.16); border-color: var(--blanco); color: var(--blanco); }
.banda-proy--hub .filtro b { background: rgba(255,255,255,.18); color: var(--blanco); }
.banda-proy--hub .filtro--on { background: var(--blanco); border-color: var(--blanco); color: var(--azul-900); }
.banda-proy--hub .filtro--on b { background: rgba(0,0,0,.10); color: var(--azul-900); }
.banda-proy--hub .filtros__vacio { color: rgba(255,255,255,.75); }


.pcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r-lg); text-decoration: none; color: inherit; height: 100%;
  box-shadow: var(--s-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--s-2); }
.pcard__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fondo-2); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.04); }
/* La insignia lleva el sector, no metros cuadrados: no hay superficie registrada */
.pcard__chip {
  position: absolute; top: .85rem; left: .85rem;
  background: var(--blanco); color: var(--tinta);
  padding: .34rem .8rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; box-shadow: var(--s-1);
}
.pcard__cuerpo { display: flex; flex-direction: column; gap: .4rem; padding: 1.2rem 1.3rem 1.35rem; }
.pcard__cuerpo strong { font-size: 1.25rem; line-height: 1.25; color: var(--tinta); }
.pcard__desc { font-size: var(--t-sm); color: var(--suave); line-height: 1.5; }
.pcard__ir {
  margin-top: .35rem; display: inline-flex; align-items: center; gap: .4rem;
  color: var(--acento); font-weight: 600; font-size: .9rem;
}
.pcard__ir svg { width: 15px; height: 15px; flex: 0 0 auto; }
@media (max-width: 860px) {
  .banda-proy__cab { grid-template-columns: minmax(0, 1fr); }
  .banda-proy__cab p { text-align: left; }
}


/* --- Formulario de asesoria al cierre --------------------------------------
   Aparece al final de las paginas interiores. Compacto y en una linea en
   escritorio: es un ultimo empujon, no un formulario largo. */
.sr-solo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* --- Cierre: los dos caminos, uno al lado del otro ------------------------
   Izquierda el argumento y el camino inmediato (WhatsApp). Derecha el
   formulario formal, en tarjeta. Antes el formulario era una tira de tres
   campos con placeholders y etiquetas ocultas, centrada: se leia como barra
   de newsletter. Los placeholders desaparecen a proposito — se van al hacer
   foco y dejan al usuario sin saber que campo esta llenando. */
/* El cierre de las páginas interiores se emite como `<section class="cierre">`,
   SIN `.seccion` — solo la portada lleva las dos. O sea que no tenía relleno
   vertical propio: mientras el contenido era texto centrado no se notaba, pero
   con la tarjeta del formulario se veía de borde a borde. Se le da el mismo
   valor que usa `.seccion`, así la portada no cambia. */
.cierre { padding-block: var(--seccion); }

.cierre__marco {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center; text-align: left;
}
/* `.cierre p` pesa (0,1,1) y ganaba a `.cierre__form-titulo`, que pesa (0,1,0):
   el título y la nota del formulario heredaban `margin: 1.15rem auto 2.25rem`
   y `max-width: 58ch`, que era el hueco enorme dentro de la tarjeta. Estas
   reglas pesan lo mismo pero viven en esta hoja, que carga después. */
.cierre__form p { max-width: none; margin: 0; }
.cierre__pitch h2 { margin-inline: 0; max-width: 16ch; }
.cierre__pitch p { margin-inline: 0; max-width: 46ch; }
.cierre__acciones { justify-content: flex-start; }

.cierre__form {
  align-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem; margin: 0; max-width: none; text-align: left;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: rgb(255 255 255 / .07);
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: var(--r-lg);
  backdrop-filter: blur(2px);
}
.cierre__form-titulo {
  grid-column: 1 / -1; margin: 0; color: var(--blanco);
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em;
}
.cierre__form-nota {
  grid-column: 1 / -1; margin: 0 0 .25rem; font-size: var(--t-xs);
  color: rgb(255 255 255 / .72); line-height: 1.45;
}
.cierre__form-nota b { color: var(--blanco); }
.campo { display: grid; gap: .3rem; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: var(--t-xs); font-weight: 600; color: rgb(255 255 255 / .88); letter-spacing: .01em; }
.campo label b { color: #ffc4c4; font-weight: 700; }
.cierre__form input, .cierre__form textarea {
  width: 100%; padding: .72rem .9rem; border-radius: var(--r);
  border: 1px solid rgb(255 255 255 / .28); background: rgb(255 255 255 / .12);
  color: var(--blanco); font: inherit; font-size: var(--t-sm);
}
.cierre__form textarea { resize: vertical; min-height: 4.5rem; }
.cierre__form input:focus-visible, .cierre__form textarea:focus-visible {
  outline: 2px solid var(--blanco); outline-offset: 1px; background: rgb(255 255 255 / .18);
}
.cierre__form button { grid-column: 1 / -1; justify-self: start; white-space: nowrap; margin-top: .2rem; }
.cierre__aviso { grid-column: 1 / -1; margin: 0; min-height: 1.2em; font-size: var(--t-sm); color: rgb(255 255 255 / .82); }
.cierre__aviso--ok { color: #8ef0b8; }
.cierre__aviso--error { color: #ffc4c4; }

@media (max-width: 900px) {
  .cierre__marco { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 520px) {
  .cierre__form { grid-template-columns: 1fr; }
}

/* Responsive de las rejillas. Va al final a proposito: si se queda antes de
   .visual--c* las definiciones lo anulan por orden de cascada. */
@media (max-width: 1000px) {
  .gsector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .obra--planta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visual--c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visual--c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destacados--c3, .destacados--c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .gsector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obra, .obra--planta { grid-template-columns: minmax(0, 1fr); }
  .visual, .visual--c1, .visual--c2, .visual--c3, .visual--c4,
  .destacados, .destacados--c1, .destacados--c2, .destacados--c3, .destacados--c4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Bloque de compra de la ficha --------------------------------------- */
.ficha__compra{display:flex;align-items:stretch;gap:.6rem;flex-wrap:wrap;margin:1.1rem 0 .5rem}
.ficha__qty input{width:5rem;height:100%;min-height:2.9rem;padding:.5rem .6rem;
  border:1px solid var(--linea,#dcdfe4);border-radius:.4rem;font:inherit;
  text-align:center;font-variant-numeric:tabular-nums}
.ficha__compra .btn{flex:1 1 12rem}
.ficha__agregado{margin:.2rem 0 0;font-size:.92rem}

/* ===========================================================================
   PORTADA DE SECTOR — rediseño 2026-09-04
   Referencias del cliente: coastline.at y una web de estudio de arquitectura.
   Lo que comparten y aquí se adopta: composición asimétrica, la fotografía
   limpia (no como textura bajo un velo) y aire alrededor del titular.

   NO se toca `.franja`: la usan 136 páginas. Esto solo lo usa paginaSector,
   así que el alcance son 10 páginas.

   Misma paleta y misma tipografía. El azul de marca pasa del velo al titular;
   el fondo es --fondo, que ya existía. Los textos van en --texto y no en
   --suave: medido, --suave sobre --fondo da 4.32:1, por debajo del mínimo.
   =========================================================================== */
.psector {
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
  padding-block: clamp(2.25rem, 1.6rem + 3.4vw, 4.75rem);
}
.psector__marco {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.psector__txt h1 {
  margin: .55rem 0 0; color: var(--tinta);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.06; letter-spacing: -.03em; text-wrap: balance;
}
.psector__txt p { margin: 1.1rem 0 0; max-width: 46ch; color: var(--texto); font-size: 1.0625rem; }
.psector__cta { margin-top: clamp(1.4rem, 2.5vw, 2rem); }

.psector__media { position: relative; }
.psector__media img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--s-2);
}
/* La ficha flotante es el gesto de la referencia. El dato no se inventa: es la
   suma de productos de las categorías del propio sector, la misma cuenta que
   ya alimenta la rejilla de abajo. */
.psector__dato {
  position: absolute; left: 1rem; bottom: 1rem; max-width: 14rem;
  display: block; padding: .8rem 1rem;
  background: var(--blanco); border-radius: var(--r); box-shadow: var(--s-3);
}
.psector__dato strong {
  display: block; font-size: 1.6rem; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--azul); font-variant-numeric: tabular-nums;
}
.psector__dato span { display: block; margin-top: .3rem; font-size: .8125rem; line-height: 1.35; color: var(--texto); }

@media (min-width: 900px) {
  /* Fuera del borde de la foto, hacia el hueco entre columnas: nunca desborda
     la página porque el hueco mide como mínimo 2rem. */
  .psector__dato { left: clamp(-1.5rem, -2vw, -1rem); }
}
@media (max-width: 860px) {
  .psector__marco { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.25rem); }
  .psector__media { order: -1; }
}

/* Intro del sector: panel de escena a un lado, titular y texto al otro.
   Referencia: el bloque "Diseño de Espacios" de lineaitalia.com.mx. Antes el
   titular iba solo a la izquierda y, al ser corto, dejaba media columna vacía.

   El panel funde imágenes REALES DE ESE SECTOR (obra entregada, o piezas de su
   galería si el sector aún no tiene obra). Nada genérico: cada sector anima lo
   suyo, y el que no tiene material no lleva panel. */
.intro-sector {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.intro-sector__titulo {
  margin: 0; color: var(--tinta);
  font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2.15rem);
  line-height: 1.14; letter-spacing: -.02em; text-wrap: balance;
}
.intro-sector__texto { margin-top: 1.1rem; color: var(--texto); font-size: 1.0625rem; }

.escena {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--r-lg);
  background: var(--fondo-2); box-shadow: var(--s-2);
}
.escena__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Sin animación (movimiento reducido, o navegador antiguo) se ve la primera y
   ya: nunca un panel vacío. */
.escena__img + .escena__img { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .escena__img {
    opacity: 0;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: calc(var(--i) * var(--paso));
  }
  /* Los porcentajes de un @keyframes no admiten variables, así que hay una
     tanda por número de imágenes. Solo hay dos casos posibles: 2 y 3. */
  .escena--3 { --paso: 4.5s; }
  .escena--3 .escena__img { animation-name: escena3; animation-duration: 13.5s; }
  @keyframes escena3 {
    0%    { opacity: 0; transform: scale(1.07); }
    3%    { opacity: 1; }
    30%   { opacity: 1; }
    36%   { opacity: 0; }
    100%  { opacity: 0; transform: scale(1); }
  }
  .escena--2 { --paso: 5s; }
  .escena--2 .escena__img { animation-name: escena2; animation-duration: 10s; }
  @keyframes escena2 {
    0%    { opacity: 0; transform: scale(1.07); }
    4%    { opacity: 1; }
    46%   { opacity: 1; }
    52%   { opacity: 0; }
    100%  { opacity: 0; transform: scale(1); }
  }
  .escena--1 .escena__img { opacity: 1; animation: none; }
}

@media (max-width: 860px) {
  .intro-sector { grid-template-columns: 1fr; gap: 1.25rem; }
  .escena { aspect-ratio: 16 / 10; }
}

/* ===================== TIENDA =============================================
   Portada con imagen, buscador propio, filtro lateral fijo y rejilla de
   tarjetas con doble accion. La estructura viene de la referencia del cliente;
   el color, la tipografia y los botones son los que ya usa el sitio. */

/* Sin overflow:hidden en la seccion: la barra de busqueda sale medio cuerpo
   por debajo del borde a proposito y aqui se le cortaba. El recorte de la foto
   lo hace su propia caja. */
.ttienda { position: relative; padding-block: clamp(3.5rem, 2rem + 6vw, 6rem) 0; }
.ttienda__fondo { position: absolute; inset: 0; display: block; z-index: 0; overflow: hidden; }
.ttienda__fondo img { width: 100%; height: 100%; object-fit: cover; }
/* El velo azul de marca va ENCIMA de la foto y con la misma densidad que en el
   cierre, para que el blanco del titulo tenga siempre el mismo contraste sin
   depender de lo clara que salga la imagen. */
.ttienda__fondo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(15 36 68 / .78), rgb(15 36 68 / .88));
}
.ttienda__txt { position: relative; z-index: 1; color: var(--blanco); }
/* h1,h2,h3,h4 llevan color: var(--tinta) en la hoja base; sobre el velo azul
   hay que devolverlo a blanco explicitamente o el titulo desaparece. */
.ttienda__txt h1 { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.03em; margin: 0; color: var(--blanco); }
.ttienda__txt p { margin: 1rem 0 0; max-width: 52ch; color: rgb(255 255 255 / .82); font-size: 1.0625rem; }
.ttienda .contenedor:last-child { position: relative; z-index: 1; }

/* La barra de busqueda monta a caballo sobre el borde de la portada, como en la
   referencia: mitad dentro de la imagen, mitad fuera. */
.ttienda__buscar {
  margin-top: clamp(2rem, 1rem + 4vw, 3.5rem); transform: translateY(50%);
  background: var(--blanco); border-radius: var(--r); box-shadow: var(--s-2);
  padding: 1rem 1.15rem; display: grid; gap: .85rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center;
}
.ttienda__promesa strong { display: block; color: var(--tinta); font-size: 1.0625rem; }
.ttienda__promesa span { display: block; margin-top: .15rem; color: var(--suave); font-size: var(--t-xs); }
.ttienda__campo input {
  width: 100%; border: 1px solid var(--borde); border-radius: var(--r-full);
  padding: .7rem 1.05rem; font: inherit; font-size: var(--t-sm); color: var(--tinta);
  background: var(--fondo); transition: border-color var(--ease), background var(--ease);
}
.ttienda__campo input:focus { outline: none; border-color: var(--acento); background: var(--blanco); }
/* El hueco que deja el buscador al salirse de su seccion. */
.ttienda + .seccion { padding-top: calc(var(--seccion) + 2.5rem); }

/* --- Filtro lateral + rejilla --- */
.tsplit { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); align-items: start; }
.tfiltro { display: grid; gap: 1rem; position: sticky; top: calc(var(--alto-cab, 72px) + 1rem); }
.tfiltro__caja { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); padding: 1.1rem 1.15rem; }
.tfiltro__tit { margin: 0 0 .7rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.tfiltro__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.tfiltro__lista a {
  display: flex; align-items: center; gap: .6rem; justify-content: space-between;
  padding: .5rem .65rem; border-radius: var(--r-sm);
  color: var(--texto); font-size: var(--t-sm); text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.tfiltro__lista a:hover { background: var(--fondo); color: var(--azul); }
.tfiltro__lista a b { font-weight: 600; font-size: var(--t-xs); color: var(--tenue); font-variant-numeric: tabular-nums; }
.tfiltro__lista .es-activo { background: var(--azul); color: var(--blanco); font-weight: 600; }
.tfiltro__lista .es-activo:hover { background: var(--azul-900); color: var(--blanco); }
.tfiltro__lista .es-activo b { color: rgb(255 255 255 / .7); }
.tfiltro__nota p { margin: 0 0 .9rem; font-size: var(--t-sm); line-height: 1.55; color: var(--suave); }

.tlista__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.tlista__cab h2 { margin: 0; }
.tlista__cab span { color: var(--tenue); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.trejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: clamp(1rem, .7rem + 1vw, 1.5rem); }

/* --- Tarjeta de tienda --- */
.tprod {
  display: flex; flex-direction: column; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.tprod:hover { transform: translateY(-3px); box-shadow: var(--s-2); border-color: #d3dbe6; }
/* display:flex gana a [hidden], que solo pone display:none. Sin esto el
   buscador cuenta bien pero no esconde nada. */
.tprod[hidden] { display: none; }
.tprod__enlace { position: relative; display: block; text-decoration: none; }
.tprod__img { display: block; aspect-ratio: 1 / 1; background: var(--fondo-2); overflow: hidden; }
.tprod__img img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--ease); }
.tprod:hover .tprod__img img { transform: scale(1.04); }
.tprod__sinimg { display: block; width: 100%; height: 100%; background: var(--fondo-2); }
/* La pastilla de categoria de la referencia. Aqui dice la categoria MAS
   especifica del producto, que es la unica que aporta informacion. */
.tprod__cat {
  position: absolute; top: .7rem; right: .7rem;
  background: rgb(255 255 255 / .92); backdrop-filter: blur(4px);
  color: var(--azul); font-size: .6875rem; font-weight: 700;
  letter-spacing: .04em; padding: .28rem .6rem; border-radius: var(--r-full);
  box-shadow: var(--s-1);
}
.tprod__cuerpo { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1rem 1rem; flex: 1; }
.tprod__nombre {
  color: var(--tinta); font-weight: 600; font-size: var(--t-sm); line-height: 1.35;
  text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tprod__nombre:hover { color: var(--azul); }
.tprod__linea { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
/* En lugar de las estrellas de la referencia: lo unico verificable de estos 37
   productos es que estan disponibles ya. */
.tprod__sello { display: inline-flex; align-items: center; gap: .28rem; font-size: .6875rem; font-weight: 600; color: #1a8a4f; }
.tprod__sello svg { width: 13px; height: 13px; }
.tprod__precio { font-size: 1.0625rem; font-weight: 800; color: var(--tinta); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tprod__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.btn--mini { padding: .5rem .7rem; font-size: .75rem; border-radius: var(--r-full); }
.tprod__acciones .btn { justify-content: center; min-width: 0; }
.btn.es-agregado { background: #1a8a4f; color: #fff; box-shadow: none; }

/* --- Puente al catalogo completo --- */
.tpuente { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
.tpuente h2 { font-size: var(--t-h2); margin: 0; letter-spacing: -.02em; }
.tpuente p { margin: 1rem 0 0; color: var(--suave); font-size: 1.0625rem; max-width: 46ch; }
.tpuente__btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.tpuente__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.tpuente__lista li { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--s-1); }
.tpuente__lista img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tpuente__lista span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .8rem .6rem;
  color: #fff; font-size: var(--t-xs); font-weight: 600;
  background: linear-gradient(180deg, transparent, rgb(15 36 68 / .8));
}

@media (max-width: 980px) {
  .tsplit { grid-template-columns: 1fr; }
  .tfiltro { position: static; grid-template-columns: 1fr 1fr; }
  .ttienda__buscar { grid-template-columns: 1fr; transform: translateY(35%); }
  .tpuente { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .tfiltro { grid-template-columns: 1fr; }
  /* Dos por fila tambien en movil: a 375 px una sola columna obliga a un
     scroll larguisimo para 37 productos. */
  .trejilla { grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); gap: .7rem; }
  .tprod__cuerpo { padding: .75rem .8rem .85rem; }
  .tprod__acciones { grid-template-columns: 1fr; }
  .tprod__linea { flex-wrap: wrap; gap: .2rem; }
}
.tvacio { margin: 1.5rem 0 0; padding: 1.4rem; text-align: center; background: var(--fondo); border-radius: var(--r); color: var(--suave); font-size: var(--t-sm); }
.tvacio b { color: var(--tinta); }

/* ===================== NOSOTROS ===========================================
   La portada reutiliza el bloque de la Tienda (.ttienda) para que las dos
   cabeceras con foto sean la misma pieza y no dos parecidas. Aqui solo cambia
   lo que sobra: sin barra de busqueda, asi que el relleno inferior vuelve a la
   normalidad. */
.nportada { padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
.nportada + .seccion { padding-top: var(--seccion); }

/* Las cuatro cifras confirmadas. */
.ncifras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.6vw, 2rem); }
.ncifras li { border-left: 3px solid var(--acento); padding-left: 1.1rem; }
.ncifras strong { display: block; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; letter-spacing: -.03em; color: var(--tinta); line-height: 1; }
.ncifras strong span { font-size: .42em; font-weight: 700; color: var(--acento); margin-left: .15em; letter-spacing: 0; }
.ncifras__pie { display: block; margin-top: .55rem; font-size: var(--t-sm); line-height: 1.5; color: var(--suave); max-width: 24ch; }

/* Texto + foto, la pieza de "quienes somos". */
.ndos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
.ndos h2 { font-size: var(--t-h2); margin: 0 0 1.1rem; letter-spacing: -.02em; }
.ndos .prosa p { margin: 0 0 1rem; color: var(--texto); }
.ndos .prosa p:last-child { margin-bottom: 0; }
.ndos__media img { display: block; width: 100%; border-radius: var(--r-lg); box-shadow: var(--s-2); aspect-ratio: 4 / 3; object-fit: cover; }

/* La banda de clientes vive normalmente pegada al hero de la portada; suelta en
   una pagina interior necesita su propio aire arriba y abajo. */
.confianza--sola { padding-block: var(--seccion); }

@media (max-width: 900px) {
  .ncifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ndos { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .ncifras { grid-template-columns: 1fr; } }

/* ===================== CATEGORÍA DE PRODUCTO ==============================
   Portada asimétrica, índice numerado y rejilla con la misma tarjeta que la
   Tienda. La referencia del cliente aporta la estructura; el color, la
   tipografía y los botones son los que ya usa el sitio. */
.pcat { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0; background: var(--fondo); }
.pcat__marco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
.pcat__txt h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); letter-spacing: -.03em; margin: 0; }
.pcat__txt > p { margin: 1.05rem 0 0; max-width: 46ch; color: var(--texto); font-size: 1.0625rem; }
.pcat__conteo { margin: 1.1rem 0 0; color: var(--suave); font-size: var(--t-sm); }
.pcat__conteo strong { color: var(--tinta); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pcat__cta { margin-top: clamp(1.3rem, 2.2vw, 1.9rem); }
.pcat__media img { display: block; width: 100%; border-radius: var(--r-lg); box-shadow: var(--s-2); aspect-ratio: 4 / 3; object-fit: cover; }

/* Índice de la página. Con 141 productos en una sola parrilla hacía falta algo
   que dijera qué más hay debajo. */
.indice { border-block: 1px solid var(--linea); background: var(--blanco); position: sticky; top: 0; z-index: 40; }
.indice__fila { display: flex; gap: clamp(.5rem, 3vw, 3rem); overflow-x: auto; scrollbar-width: none; }
.indice__fila::-webkit-scrollbar { display: none; }
.indice__fila a { display: flex; align-items: baseline; gap: .5rem; padding: 1rem .2rem; color: var(--suave); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--ease), border-color var(--ease); }
.indice__fila a:hover { color: var(--azul); border-bottom-color: var(--acento); }
.indice__fila b { font-size: 1.05rem; font-weight: 700; color: var(--tenue); font-variant-numeric: tabular-nums; }
.indice__fila span { font-size: var(--t-sm); font-weight: 600; }
.indice__fila a:hover b { color: var(--acento); }

/* Tipos (subcategorías): imagen y rótulo debajo, como la referencia. */
.tsec__cab { max-width: 52ch; margin-bottom: clamp(1.4rem, 2.5vw, 2.2rem); }
.tsec__cab h2 { font-size: var(--t-h2); margin: 0; letter-spacing: -.02em; }
.tsec__cab p { margin: .8rem 0 0; color: var(--suave); }
.tsec__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: clamp(1rem, .7rem + 1vw, 1.6rem); }
.tsec__lista a { display: block; text-decoration: none; color: inherit; }
.tsec__img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--fondo-2); }
.tsec__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease); }
.tsec__lista a:hover .tsec__img img { transform: scale(1.04); }
.tsec__lista strong { display: block; margin-top: .7rem; font-size: var(--t-sm); color: var(--tinta); }
.tsec__n { display: inline-flex; align-items: center; gap: .3rem; margin-top: .15rem; font-size: var(--t-xs); color: var(--suave); }
.tsec__n svg { width: 1em; height: 1em; transition: transform var(--ease); }
.tsec__lista a:hover .tsec__n svg { transform: translateX(3px); }
.tsec__sinimg { display: block; width: 100%; height: 100%; background: var(--fondo-2); }

/* Filtro dentro de la categoría (solo si hay más de 12 productos). */
.pcat__buscar { margin: 0 0 1.2rem; }
.pcat__campo input { width: min(100%, 26rem); border: 1px solid var(--borde); border-radius: var(--r-full); padding: .65rem 1.05rem; font: inherit; font-size: var(--t-sm); background: var(--blanco); transition: border-color var(--ease); }
.pcat__campo input:focus { outline: none; border-color: var(--acento); }

/* La mayoría del catálogo es de cotización: no hay precio que enseñar. */
.tprod__cotizar { font-size: var(--t-xs); font-weight: 600; color: var(--suave); }
.tprod__acciones--una { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  .pcat__marco { grid-template-columns: 1fr; }
  .indice { position: static; }
}

/* --- Ficha: miniaturas en columna (referencia del cliente) --- */
.galeria--tiras { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .8rem; align-items: start; }
.galeria--tiras .galeria__tiras { flex-direction: column; margin: 0; }
.galeria--tiras .galeria__tiras > li { flex: none; }
.galeria--tiras .galeria__mini { width: 5rem; height: 5rem; }

/* --- Ficha: pestañas de información --- */
.pesta { margin-top: 1.6rem; border-top: 1px solid var(--linea); }
.pesta__botones { display: flex; gap: .2rem; flex-wrap: wrap; }
.pesta__botones button {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  padding: .85rem .9rem; font-size: var(--t-sm); font-weight: 600; color: var(--suave);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--ease), border-color var(--ease);
}
.pesta__botones button:hover { color: var(--azul); }
.pesta__botones button[aria-selected="true"] { color: var(--azul); border-bottom-color: var(--acento); }
.pesta__panel { padding: .9rem .2rem 0; }
.pesta__panel p { margin: 0 0 .7rem; color: var(--texto); font-size: var(--t-sm); line-height: 1.65; }
.pesta__panel p:last-child { margin-bottom: 0; }
.pesta__pie a { display: inline-flex; align-items: center; gap: .35rem; color: var(--acento); font-weight: 600; }
.pesta__pie svg { width: 1em; height: 1em; transition: transform var(--ease); }
.pesta__pie a:hover svg { transform: translateX(3px); }

@media (max-width: 720px) {
  .galeria--tiras { grid-template-columns: 1fr; }
  .galeria--tiras .galeria__tiras { flex-direction: row; overflow-x: auto; order: 2; margin-top: .7rem; }
  .galeria--tiras .galeria__marco { order: 1; }
}

/* ===================== BLOG Y PROYECTOS ===================================
   Portada editorial (línea fina + título grande a la izquierda, entradilla a la
   derecha) y rejilla de obra a lo ancho, sobre la referencia del cliente. */
.edit { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.edit__marco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end; }
.edit__linea { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.edit__linea::before { content: ''; width: 2rem; height: 1px; background: var(--tenue); }
.edit__txt h1 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.25rem); line-height: 1.02; letter-spacing: -.035em; margin: .8rem 0 0; }
.edit__lead { margin: 0; color: var(--suave); font-size: 1.0625rem; line-height: 1.7; max-width: 46ch; }
.edit__lead a { color: var(--acento); font-weight: 600; }

/* Entrada destacada del blog */
.dest { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.25rem, 1rem + 2vw, 2.5rem); align-items: center; text-decoration: none; color: inherit; }
.dest__img { display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--fondo-2); box-shadow: var(--s-1); }
.dest__img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--ease); }
.dest:hover .dest__img img { transform: scale(1.03); }
.dest__txt { display: grid; gap: .55rem; }
.dest__txt strong { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.05rem); line-height: 1.15; letter-spacing: -.02em; color: var(--tinta); font-weight: 800; }
.dest:hover .dest__txt strong { color: var(--azul); }
.dest__res { color: var(--suave); font-size: var(--t-sm); line-height: 1.65; }
.dest__ir { display: inline-flex; align-items: center; gap: .4rem; color: var(--acento); font-weight: 600; font-size: var(--t-sm); }
.dest__ir svg { width: 1em; height: 1em; transition: transform var(--ease); }
.dest:hover .dest__ir svg { transform: translateX(4px); }

/* Rejilla de obra: cuatro por fila y más peso visual que las tarjetas de antes. */
.obras { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: clamp(.8rem, .6rem + .8vw, 1.4rem); }
.obras .proy-item[hidden] { display: none; }

@media (max-width: 900px) {
  .edit__marco { grid-template-columns: 1fr; align-items: start; gap: 1.2rem; }
  .dest { grid-template-columns: 1fr; }
}

/* El contenido heredado del WordPress trae su propia hoja con z-index de hasta
   9999 (Elementor). Como vivían en el mismo contexto de apilamiento que la
   cabecera (z-index 100), la imagen del artículo se pintaba ENCIMA del menú al
   hacer scroll. `isolation` encierra toda la página heredada en su propio
   contexto: sus 9999 siguen valiendo entre ellos, pero ninguno puede ya
   competir con la cabecera. Se arregla en un sitio y no hay que perseguir cada
   regla de la hoja heredada. */
.pagina-heredada { position: relative; z-index: 0; isolation: isolate; }
.prosa, .entrada__cuerpo { position: relative; z-index: 0; isolation: isolate; }

/* Obra en móvil: dos por fila. Con una sola columna, doce proyectos son un
   scroll larguísimo y las fotos pierden el efecto de conjunto. */
@media (max-width: 620px) {
  .obras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .obras .pcard__cuerpo { padding: .6rem .7rem .75rem; }
  .obras .pcard__cuerpo strong { font-size: .8125rem; line-height: 1.3; }
  .obras .pcard__desc { display: none; }
  .obras .pcard__chip { font-size: .625rem; padding: .2rem .45rem; }
}

/* Las entradas con maquetación propia traen hojas con z-index de hasta 9999 y
   se pintaban ENCIMA del menú al hacer scroll. Su diseño se respeta tal cual;
   lo único que se les impone es vivir en su propio contexto de apilamiento. */
.articulo-propio { position: relative; z-index: 0; isolation: isolate; }

/* ===================== ENTRADA (blog y proyecto) ==========================
   Plantilla única, adaptada del diseño que traía bancas-personalizadas-wwl:
   portada con foto, rótulo fino, titular condensado y galería al final.
   El original respiraba 100-110 px por sección; aquí se aprieta a la escala del
   sitio, que era justo la molestia del cliente. */
.nota__portada { position: relative; padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); background: var(--fondo); }
.nota__portada--foto { background: var(--azul-900); }
.nota__fondo { position: absolute; inset: 0; overflow: hidden; }
.nota__fondo img { width: 100%; height: 100%; object-fit: cover; }
.nota__fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(15 36 68 / .93) 30%, rgb(15 36 68 / .70)); }
.nota__cab { position: relative; }
.nota__linea { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acento-claro); }
.nota__linea::before { content: ''; width: 1.8rem; height: 1px; background: currentColor; opacity: .6; }
.nota__portada:not(.nota__portada--foto) .nota__linea { color: var(--acento); }
.nota__cab h1 {
  margin: .7rem 0 0; max-width: 20ch;
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4rem); line-height: .98;
  letter-spacing: -.035em; text-transform: uppercase; color: var(--blanco);
}
.nota__portada:not(.nota__portada--foto) .nota__cab h1 { color: var(--tinta); }
.nota__lead { margin: 1rem 0 0; max-width: 52ch; font-size: 1.0625rem; line-height: 1.6; color: rgb(255 255 255 / .82); }
.nota__portada:not(.nota__portada--foto) .nota__lead { color: var(--texto); }
.nota__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

/* Secciones de la entrada: la mitad de aire que una sección normal del sitio. */
.seccion--nota { padding-block: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); }
.nota__rotulo { margin: 0 0 .2rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.prosa .nota__rotulo + h2 { margin-top: .2rem; }

.nota__galcab { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.1rem; }
.nota__galcab h2 { margin: 0; }
.nota__galn { margin-left: auto; font-size: 1.6rem; font-weight: 800; color: var(--linea); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.nota__galeria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: clamp(.6rem, .4rem + .7vw, 1rem); }
.nota__galeria li { border-radius: var(--r); overflow: hidden; background: var(--fondo-2); }
.nota__galeria img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--ease); }
.nota__galeria li:hover img { transform: scale(1.03); }

@media (max-width: 620px) {
  .nota__galeria { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .nota__galn { display: none; }
}

/* Las páginas heredadas conservan su diseño, pero se les alinea a las
   dimensiones del sitio: mismo ancho de contenedor y mismo aire lateral que el
   resto. Su volcado venía sin límite de ancho y arrancaba pegado al borde. */
/* Exactamente la misma caja que .contenedor, para que el contenido caiga en la
   misma columna que el del resto del sitio y no 69 px mas adentro. */
/* Con la clase del body para ganar en especificidad: la hoja heredada se carga
   DESPUES de esta y con un selector de igual peso anulaba el centrado. */
body.pag-heredada .pagina-heredada { width: min(100% - var(--gutter) * 2, var(--ancho)); margin-inline: auto; padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.pagina-heredada .site, .pagina-heredada .hfeed { max-width: none; }
/* Dos titulares del tema quedaban ilegibles: blanco sobre #f6f6f6 (contraste
   1.08) y #114a84 sobre #0d2b52 (1.57). Se corrigen sin tocar su tipografía. */
.pagina-heredada .hero h2 span, .pagina-heredada .hero--entra h2 span { color: var(--acento-claro); }
.pagina-heredada h2.entry-title.mkd-post-title, .pagina-heredada h2.entry-title.mkd-post-title a { color: var(--tinta); }

/* Las fechas iban en --tenue (#98a2b3) sobre blanco: 2.58:1, por debajo del
   mínimo legible. --suave sube a ~4.7:1 sin cambiar el tono de la pieza. */
.nota__fecha, .nota__meta { color: var(--suave); }