@charset "UTF-8";
/* ============================================================================
   Etiquetas Extremadura — hoja de estilos única
   Método ARTEMOVIL · HTML5 + CSS + JS nativo, sin librerías ni dependencias.
   Paleta derivada del logotipo oficial: verde claro #00803D, negro #111214 y
   dorado #C8A24A como acento.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* Marca — verde claro del logotipo + negro + dorado */
  --verde:#00803d;          /* verde claro del isotipo · 5,05:1 sobre blanco */
  --verde-osc:#006b33;      /* hover de fondos verdes */
  --verde-prof:#054d2a;     /* superficies verdes profundas */
  --verde-noche:#032b18;    /* verde casi negro, para degradados */
  --negro:#111214;          /* negro corporativo: barra superior, CTA y pie */
  --negro-2:#1b1d20;        /* negro elevado: tarjetas y modales sobre negro */
  --oro:#c8a24a;
  --oro-claro:#e3c578;
  --oro-osc:#9c7a2a;
  --oro-txt:#7d611f;        /* dorado para texto pequeño sobre fondo claro (AA) */

  /* Tinta y superficies */
  --tinta:#1a1c1e;
  --tinta-2:#2c3134;
  --texto:#343a3e;
  --texto-2:#646d73;
  --texto-inv:#ffffff;
  --texto-inv-2:#c9d6cd;
  --texto-inv-3:#8fa295;
  --blanco:#ffffff;
  --gris:#f5f6f4;
  --gris-2:#eceee9;
  --linea:#e2e5e0;
  --linea-fuerte:#c9cfc7;
  --linea-inv:rgba(255,255,255,.16);

  /* Forma y ritmo */
  --r-sm:6px;
  --r-md:12px;
  --r-pill:999px;
  --tr:.28s cubic-bezier(.25,.6,.3,1);
  --sombra:0 10px 30px rgba(5,77,42,.10);
  --sombra-lg:0 22px 54px rgba(5,77,42,.18);
  --contenedor:1300px;
  --h-top:38px;
  --h-nav:92px;

  /* Tipografía: pila del sistema, sin peticiones externas */
  --font:"Inter","Inter var",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* --------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--texto);background:var(--blanco);
  font-size:1rem;line-height:1.75;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* El panel de navegación móvil vive fuera de pantalla: se recorta el eje X para
   que no genere desplazamiento horizontal. `clip` (y no `hidden`) mantiene
   operativo el `position:sticky` de la cabecera. */
@supports (overflow:clip){
  html,body{overflow-x:clip;overflow-y:visible}
}
img,picture,svg,video{max-width:100%;display:block}
/* Los contenedores con proporción fija llevan <picture> intermedio: sin esta
   regla el height:100% de la imagen no encuentra altura de referencia y deja
   una banda de fondo a la vista. */
.hero__slide picture,
.post__media picture,.sector__media picture,.cat__img picture,.ficha__media picture,
.tarjeta__media picture,.corp__media picture,.galeria__it picture,.catgal__it picture,
.mapa picture{display:block;width:100%;height:100%}
img{height:auto}
a{color:var(--verde);text-decoration:none;transition:color var(--tr)}
a:hover{color:var(--verde-osc)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{
  font-weight:800;line-height:1.16;color:var(--tinta);margin:0 0 .6em;
  letter-spacing:-.018em;
}
h1{font-size:clamp(2rem,1.25rem + 2.9vw,3.35rem)}
h2{font-size:clamp(1.6rem,1.15rem + 1.85vw,2.5rem)}
h3{font-size:clamp(1.12rem,1rem + .55vw,1.4rem)}
h4{font-size:1.02rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin-bottom:.4em}
hr{border:0;border-top:1px solid var(--linea);margin:2.5rem 0}
strong{font-weight:700;color:var(--tinta)}
::selection{background:var(--verde);color:#fff}

:focus-visible{outline:3px solid var(--oro);outline-offset:3px;border-radius:2px}

/* ------------------------------------------------------------ 3. UTILIDADES */
.contenedor{width:min(100% - 2.5rem,var(--contenedor));margin-inline:auto}
.contenedor--estrecho{width:min(100% - 2.5rem,940px);margin-inline:auto}
@media (max-width:520px){
  .contenedor,.contenedor--estrecho{width:min(100% - 1.75rem,var(--contenedor))}
}
.seccion{padding:clamp(3.25rem,2rem + 4.6vw,6rem) 0}
.seccion--gris{background:var(--gris)}
.seccion--compacta{padding:clamp(2.5rem,1.6rem + 3vw,4rem) 0}

.solo-lectores{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.salto-contenido{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--verde);
  color:#fff;padding:.85rem 1.4rem;border-radius:0 0 var(--r-sm) 0;font-weight:700
}
.salto-contenido:focus{left:0;color:#fff}

/* Rótulo de sección: pequeño, dorado, con filete */
.rotulo{
  display:flex;align-items:center;gap:.7rem;margin:0 0 .55rem;
  font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro-txt)
}
.rotulo::after{content:"";flex:0 0 42px;height:1px;background:var(--oro)}
.rotulo--centro{justify-content:center}
.rotulo--centro::before{content:"";flex:0 0 42px;height:1px;background:var(--oro)}
.rotulo--inv{color:var(--oro-claro)}

.cab-seccion{max-width:760px;margin-bottom:clamp(2rem,1.4rem + 1.6vw,3rem)}
.cab-seccion--centro{margin-inline:auto;text-align:center}
.cab-seccion p{color:var(--texto-2);margin-bottom:0;font-size:1.03rem}
.cab-seccion--inv h2{color:#fff}
.cab-seccion--inv p{color:var(--texto-inv-2)}

.entradilla{font-size:1.1rem;color:var(--texto-2);line-height:1.8}

/* Aparición al entrar en pantalla */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.25,.6,.3,1)}
.reveal.rx-l{transform:translateX(-22px)}
.reveal.rx-r{transform:translateX(22px)}
@media (max-width:1080px){.reveal.rx-l,.reveal.rx-r{transform:translateY(18px)}}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* Motivo de marca: esquina despegada (derivada del isotipo) */
.esquina{position:relative;overflow:hidden}
.esquina::after{
  content:"";position:absolute;top:0;right:0;width:36px;height:36px;z-index:2;
  background:linear-gradient(225deg,var(--oro-claro) 0 48%,var(--oro) 48% 100%);
  clip-path:polygon(100% 0,0 0,100% 100%);
  transition:width var(--tr),height var(--tr)
}

/* ---------------------------------------------------------------- 4. BOTONES */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.8rem 1.6rem;border:2px solid transparent;
  border-radius:var(--r-sm);font-weight:700;font-size:.94rem;line-height:1.2;
  cursor:pointer;text-align:center;transition:var(--tr);
}
.btn svg{flex:none;width:18px;height:18px;fill:currentColor}
.btn--principal{background:var(--verde);border-color:var(--verde);color:#fff}
.btn--principal:hover{background:var(--verde-osc);border-color:var(--verde-osc);color:#fff;
  box-shadow:0 8px 22px rgba(0,128,61,.3)}
.btn--linea{background:transparent;border-color:var(--linea-fuerte);color:var(--tinta)}
.btn--linea:hover{border-color:var(--verde);color:var(--verde);background:#fff}
.btn--inv{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn--inv:hover{background:#fff;border-color:#fff;color:var(--verde-prof)}
.btn--blanco{background:#fff;border-color:#fff;color:var(--verde-prof)}
.btn--blanco:hover{background:var(--gris-2);border-color:var(--gris-2);color:var(--verde-prof)}
.btn--oro{background:var(--oro);border-color:var(--oro);color:#231a05}
.btn--oro:hover{background:var(--oro-claro);border-color:var(--oro-claro);color:#231a05}
.btn--bloque{width:100%}
.acciones{display:flex;flex-wrap:wrap;gap:.85rem}
.acciones--centro{justify-content:center}

.enlace-flecha{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.92rem;
  color:var(--verde)
}
.enlace-flecha::after{content:"→";transition:transform var(--tr)}
.enlace-flecha:hover::after{transform:translateX(5px)}

/* ------------------------------------------------------- 5. BARRA SUPERIOR */
.topbar{background:var(--negro);border-bottom:1px solid rgba(200,162,74,.35);color:var(--texto-inv-2);font-size:.82rem}
.topbar__in{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:var(--h-top)
}
.topbar__datos{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.5rem;margin:0}
.topbar a,.topbar__datos > span{display:inline-flex;align-items:center;gap:.45rem}
.topbar a{color:var(--texto-inv-2)}
.topbar a:hover{color:#fff}
.topbar svg{width:14px;height:14px;fill:var(--oro);flex:none}
.topbar__wa{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:600;white-space:nowrap
}
.topbar__wa svg{fill:#5ec27f}
@media (max-width:900px){
  .topbar__datos .topbar__op{display:none}
  .topbar__in{justify-content:center;gap:1.25rem}
}

/* ------------------------------------------------------------- 6. CABECERA */
.cabecera{
  /* Sin backdrop-filter a propósito: crearía un bloque contenedor para los
     elementos position:fixed descendientes y descolocaría el panel móvil. */
  position:sticky;top:0;z-index:90;background:#fff;
  border-bottom:1px solid var(--linea);
  transition:box-shadow var(--tr),background-color var(--tr),border-color var(--tr)
}
.cabecera.is-fija{box-shadow:0 6px 22px rgba(17,18,20,.12)}

/* Cabecera integrada en el hero (solo portada): en la posición inicial no tiene
   fondo propio ni filete, de modo que comparte exactamente el degradado del
   hero y las dos piezas se leen como una única superficie continua. Al hacer
   scroll recupera el fondo sólido y la sombra, que es el comportamiento
   sticky que ya existía. */
.cabecera--sobre-hero{background:transparent;border-bottom-color:transparent}
.cabecera--sobre-hero.is-fija{background:#fff;border-bottom-color:var(--linea)}
.cabecera__in{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:var(--h-nav)
}
.marca{display:flex;align-items:center;flex:none;position:relative;z-index:2}
.marca img{width:auto;height:64px}
@media (max-width:520px){.marca img{height:54px}}
@media (max-width:360px){.marca img{height:46px}}

.nav{display:flex;align-items:center;gap:.15rem}
.nav__enlace{
  position:relative;display:inline-flex;align-items:center;gap:.35rem;
  padding:.7rem .7rem;font-size:.9rem;font-weight:600;color:var(--tinta-2);
  border-radius:var(--r-sm);white-space:nowrap
}
.nav__enlace:hover{color:var(--verde);background:var(--gris)}
.nav__enlace::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.28rem;height:2px;
  background:var(--oro);transform:scaleX(0);transform-origin:left;
  transition:transform var(--tr)
}
.nav__enlace[aria-current="page"]{color:var(--verde)}
.nav__enlace[aria-current="page"]::after,
.nav__item.is-activo > .nav__enlace::after{transform:scaleX(1)}
.nav__flecha{width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform var(--tr)}

.nav__item{position:relative}
.nav__sub{
  position:absolute;top:calc(100% + 6px);left:0;min-width:268px;margin:0;padding:.5rem;
  list-style:none;background:#fff;border:1px solid var(--linea);
  border-radius:var(--r-md);box-shadow:var(--sombra-lg);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--tr),transform var(--tr),visibility var(--tr)
}
.nav__sub::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:var(--r-md) var(--r-md) 0 0;
  background:linear-gradient(90deg,var(--verde),var(--oro))}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sub li{margin:0}
.nav__sub a{
  display:block;padding:.62rem .8rem;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:600;color:var(--tinta-2)
}
.nav__sub a:hover,.nav__sub a[aria-current="page"]{background:var(--gris);color:var(--verde)}

.cabecera__acciones{display:flex;align-items:center;gap:.6rem;flex:none;position:relative;z-index:2}
.cabecera__acciones .btn{min-height:44px;padding:.6rem 1.1rem;font-size:.88rem}

.hamburguesa{
  display:none;width:46px;height:46px;border:1px solid var(--linea);background:#fff;
  border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center
}
.hamburguesa span{position:relative;display:block;width:20px;height:2px;background:var(--tinta);
  transition:var(--tr)}
.hamburguesa span::before,.hamburguesa span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--tinta);
  transition:var(--tr)}
.hamburguesa span::before{top:-6px}
.hamburguesa span::after{top:6px}
.hamburguesa[aria-expanded="true"] span{background:transparent}
.hamburguesa[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.hamburguesa[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1180px){
  .cabecera__acciones .btn--principal{display:none}
  .hamburguesa{display:inline-flex}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(360px,88vw);z-index:1;
    flex-direction:column;align-items:stretch;gap:0;
    /* JS ajusta el padding superior al alto real de la cabecera visible */
    padding:calc(var(--h-top) + var(--h-nav) + 1rem) 1rem 3rem;
    background:#fff;border-left:1px solid var(--linea);overflow-y:auto;
    transform:translateX(105%);transition:transform .32s cubic-bezier(.25,.6,.3,1);
    box-shadow:-14px 0 40px rgba(17,18,20,.2)
  }
  .nav.is-abierto{transform:translateX(0)}
  .nav__enlace{padding:.9rem .6rem;font-size:1rem;justify-content:space-between;width:100%}
  .nav__enlace::after{display:none}
  .nav__item{border-bottom:1px solid var(--linea)}
  .nav__sub{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--oro);border-radius:0;margin:0 0 .7rem .6rem;
    padding:0 0 0 .5rem;display:none
  }
  .nav__sub::before{display:none}
  .nav__item.is-desplegado > .nav__sub{display:block}
  .nav__item.is-desplegado > .nav__enlace .nav__flecha{transform:rotate(-135deg) translateY(-2px)}
  .nav__cta{margin-top:1.1rem}
  .nav__cta .btn{width:100%}
}
@media (min-width:1181px){.nav__cta{display:none}}

.velo{
  position:fixed;inset:0;z-index:80;background:rgba(17,18,20,.55);
  opacity:0;visibility:hidden;transition:var(--tr)
}
.velo.is-visible{opacity:1;visibility:visible}
body.sin-scroll{overflow:hidden}

/* ---------------------------------------------------------------- 7. HERO */
/* Composición partida: el texto vive sobre fondo claro a la izquierda y la
   fotografía ocupa un bloque geométrico a la derecha. El cambio de diapositiva
   se hace con un despliegue diagonal —la «pegatina» que se abre desde la
   esquina superior derecha—, coherente con el motivo de marca. */
.hero{
  --h-cab:var(--h-nav);          /* alto de la cabecera que se superpone */
  /* Toda la geometría se ancla al contenedor, no al viewport, para que las
     proporciones se mantengan igual a 1280 que a 1920.
     --hero-pad : margen exterior hasta el contenedor
     --hero-x   : borde izquierdo de la fotografía, al 38 % del contenedor
                  como en la referencia; de ahí al borde derecho quedan ~62 %.
     La máscara está trazada para que su punto más a la izquierda coincida con
     el borde de la caja, así que --hero-x es directamente el «left». */
  --hero-pad:max(1.25rem,calc((100vw - var(--contenedor)) / 2));
  --hero-caja:calc(100vw - 2 * var(--hero-pad));
  --hero-x:calc(var(--hero-pad) + .38 * var(--hero-caja));
  position:relative;isolation:isolate;overflow:hidden;
  /* La cabecera se apoya encima: el hero sube por debajo de ella para que las
     dos piezas compartan el mismo degradado y no quede franja intermedia. */
  margin-top:calc(var(--h-cab) * -1);
  /* Degradado luminoso: marfil casi blanco tras el texto y transición amplia
     hacia los verdes corporativos muy claros del lado de la fotografía, con el
     dorado únicamente como luz secundaria. Todo derivado de --verde y --oro. */
  background:
    radial-gradient(78% 96% at 8% 42%,#ffffff 0%,rgba(255,255,255,.92) 38%,rgba(255,255,255,0) 76%),
    radial-gradient(64% 78% at 88% 4%,rgba(0,128,61,.24),transparent 66%),
    radial-gradient(56% 64% at 68% 106%,rgba(200,162,74,.18),transparent 72%),
    radial-gradient(48% 58% at 102% 64%,rgba(0,128,61,.18),transparent 70%),
    linear-gradient(100deg,#ffffff 0%,#ffffff 17%,#f6fbf4 36%,#e2f0df 62%,#cbe5c8 85%,#bfdcbb 100%)
}
/* ---- Ambiente: eco desenfocado de la fotografía activa ----
   Cinco miniaturas de 64 px que se funden entre sí. A esta opacidad no se
   reconoce la imagen: solo tiñe el fondo del lado del texto con su luz. */
.hero__amb{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero__amb span{
  position:absolute;inset:-8%;opacity:0;
  background-size:cover;background-position:center;
  filter:blur(34px) saturate(.55) contrast(.9);
  transform:scale(1.06);
  transition:opacity 1.15s ease
}
.hero__amb span.is-on{opacity:.16}
/* Velo direccional: el lado del texto queda prácticamente blanco y el velo se
   abre hacia la derecha para que allí asome el verde del degradado. */
.hero__amb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.88) 30%,rgba(255,255,255,.54) 62%,rgba(255,255,255,.34) 100%)
}
/* Reparto 38 / 62: bloque de texto compacto a la izquierda y fotografía
   dominante a la derecha, que llega hasta el borde del hero. El padding
   izquierdo mantiene la alineación con el contenedor del resto de la página;
   la columna de imagen no lleva padding porque debe sangrar a la derecha. */
/* La fotografía se sitúa en capa aparte (position:absolute) porque su caja
   debe solaparse con la columna de texto: lo que se ve de ella lo decide la
   máscara, no la rejilla. El texto va por encima con z-index. */
.hero__in{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  align-content:center;
  width:100%;min-height:clamp(500px,70vh,680px);
  padding:var(--h-cab) 0 0 var(--hero-pad)
}
.hero__cuerpo{
  position:relative;z-index:2;
  width:min(500px,calc(.37 * var(--hero-caja)));
  padding:clamp(1.2rem,.8rem + 1.4vw,2.2rem) 0 clamp(1.6rem,1.2rem + 1.6vw,2.6rem)
}

/* ---- Columna de texto ---- */
.hero__txts{display:grid}
.hero__txt{grid-area:1/1;max-width:540px;visibility:hidden;pointer-events:none}
.hero__txt.is-on{visibility:visible;pointer-events:auto}
.hero__txt > *{
  opacity:0;transform:translateY(26px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)
}
.hero__txt.is-on > *{opacity:1;transform:none}
.hero__txt.is-on > *:nth-child(1){transition-delay:.08s}
.hero__txt.is-on > *:nth-child(2){transition-delay:.18s}
.hero__txt.is-on > *:nth-child(3){transition-delay:.30s}
.hero__txt.is-on > *:nth-child(4){transition-delay:.42s}
.hero__rotulo{
  display:flex;align-items:center;gap:.7rem;margin:0 0 1rem;
  font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro-txt)
}
.hero__rotulo::before{content:"";width:30px;height:2px;background:var(--oro);flex:none}
.hero h1,.hero__titular{
  color:var(--tinta);font-weight:800;line-height:1.1;letter-spacing:-.025em;
  font-size:clamp(1.7rem,.92rem + 1.62vw,2.32rem);margin:0 0 .5em
}
.hero .acento{color:var(--verde)}
.hero__entrada{color:var(--texto);font-size:1rem;line-height:1.7;
  max-width:44ch;margin:0 0 1.5rem}
.hero .acciones{margin:0}

/* ---- Puntos de avance, bajo el texto ---- */
.hero__dots{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.7rem;margin-top:clamp(1.6rem,1rem + 1.6vw,2.6rem)}
.hero__dot{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;
  min-width:44px;min-height:44px;padding:.5rem .1rem;background:none;border:0;cursor:pointer;
  color:var(--texto-2);font-variant-numeric:tabular-nums;font-weight:800;font-size:.68rem;
  letter-spacing:.1em;transition:color var(--tr)
}
.hero__dot:hover{color:var(--tinta)}
.hero__dot-n{opacity:0;transform:translateY(4px);transition:var(--tr)}
.hero__dot-track{
  display:block;width:clamp(24px,3.4vw,38px);height:3px;border-radius:3px;
  background:var(--linea-fuerte);overflow:hidden;transition:width var(--tr),background var(--tr)
}
.hero__dot-fill{display:block;width:0;height:100%;background:var(--verde)}
.hero__dot[aria-selected="true"]{color:var(--verde-osc)}
.hero__dot[aria-selected="true"] .hero__dot-n{opacity:1;transform:none}
.hero__dot[aria-selected="true"] .hero__dot-track{width:clamp(52px,7vw,86px);background:var(--gris-2)}
.hero__dot[aria-selected="true"] .hero__dot-fill{animation:dotAvance 7000ms linear forwards}
.hero__dots.is-paused .hero__dot[aria-selected="true"] .hero__dot-fill{animation:none;width:100%}
@keyframes dotAvance{from{width:0}to{width:100%}}

/* ---- Bloque de imagen integrado en el fondo mediante un recorte curvo ----
   Dos piezas separadas y con responsabilidades distintas:
   · el CONTENEDOR (.hero__media) define tamaño y forma. La curva es un
     border-radius con radios independientes: 20 % del ancho en horizontal y
     50 % del alto en vertical, arriba y abajo del lado izquierdo. Como los dos
     radios verticales suman 100 %, ese lado dibuja media elipse completa
     —la silueta del recorte de referencia— mientras el borde derecho, el
     superior y el inferior quedan rectos hasta su límite.
   · la IMAGEN (.hero__slide img) rellena ese contenedor con object-fit:cover,
     de modo que se recorta pero NUNCA se deforma. Ninguna transformación no
     uniforme, ninguna máscara escalada: el contenedor recorta, la foto no se
     estira. Al ser border-radius, la curva se recalcula sola con las medidas
     reales de la caja en cualquier resolución. */
.hero__media{
  position:absolute;z-index:1;right:0;bottom:0;overflow:hidden;
  left:var(--hero-x);
  height:min(calc(100% - var(--h-cab) - 1.5rem),545px);min-height:0;max-height:none;
  background:linear-gradient(120deg,var(--verde-noche),var(--negro));
  border-radius:20% 0 0 20% / 50% 0 0 50%;
  /* La sombra sigue la silueta redondeada */
  filter:drop-shadow(0 26px 38px rgba(6,50,28,.26)) drop-shadow(0 6px 12px rgba(6,50,28,.14))
}
/* La diapositiva entrante aparece completa por debajo; la saliente se despega
   de izquierda a derecha y la va descubriendo. El corte va inclinado 4 %, que
   es lo que impide que se lea como un barrido recto. */
.hero__slide{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden}
.hero__slide.is-on{opacity:1;visibility:visible;z-index:1}
.hero__slide.is-saliendo{
  opacity:1;visibility:visible;z-index:3;
  animation:peelOut 1.35s cubic-bezier(.62,.02,.34,1) both
}
@keyframes peelOut{
  from{clip-path:polygon(-5% 0,100% 0,100% 100%,0 100%)}
  to{clip-path:polygon(100% 0,100% 0,100% 100%,105% 100%)}
}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Encuadre por diapositiva: el bloque es mucho más apaisado que el original,
   así que cada fotografía decide qué franja conserva. */
.hero__slide--planta img{object-position:center 58%}
.hero__slide--fachada img{object-position:center 40%}
.hero__slide--maquinaria img{object-position:center 32%}
.hero__slide--acabados img{object-position:center 52%}
.hero__slide--vitolas img{object-position:center 50%}
.hero__slide.is-on img{animation:kenburns 12s ease-out both}
.hero__slide:nth-child(even).is-on img{animation-name:kenburns-alt}
@keyframes kenburns{
  from{transform:scale(1.03) translate3d(0,0,0)}
  to{transform:scale(1.10) translate3d(-1%,-.8%,0)}
}
@keyframes kenburns-alt{
  from{transform:scale(1.10) translate3d(.9%,-.7%,0)}
  to{transform:scale(1.03) translate3d(0,0,0)}
}
/* ---- Canto de la pegatina ----
   Banda que viaja sobre el corte: a la izquierda la luz del papel levantado,
   a la derecha la sombra que ese papel proyecta sobre la imagen descubierta. */
.hero__peel{
  --canto:clamp(38px,4.6vw,78px);
  position:absolute;top:-16%;bottom:-16%;left:-2.5%;
  width:var(--canto);margin-left:calc(var(--canto) / -2);
  z-index:4;pointer-events:none;opacity:0;
  transform:rotate(-4deg);transform-origin:center;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,251,238,.30) 34%,
    rgba(255,255,255,.96) 50%,
    rgba(226,219,199,.75) 56%,
    rgba(120,116,104,.25) 66%,
    rgba(255,255,255,0) 100%)
}
/* Sombra que el canto levantado proyecta sobre la imagen ya descubierta */
.hero__peel i{
  position:absolute;top:0;bottom:0;left:52%;width:260%;display:block;
  background:linear-gradient(90deg,rgba(4,10,7,.5) 0%,rgba(4,10,7,.2) 30%,rgba(4,10,7,0) 100%)
}
.hero__media.is-peel .hero__peel{animation:peelCanto 1.35s cubic-bezier(.62,.02,.34,1) both}
@keyframes peelCanto{
  0%{opacity:0;left:-2.5%}
  9%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;left:102.5%}
}
/* Velo: muy contenido, solo para asentar la fotografía en el borde inferior y
   en el arco de la izquierda, donde se funde con el degradado del hero. */
.hero__velo{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(17,18,20,.42) 0%,rgba(17,18,20,0) 32%),
    linear-gradient(90deg,rgba(233,243,231,.55) 0%,rgba(233,243,231,0) 16%)
}
/* El triángulo dorado de la esquina superior derecha se retira: no existe en la
   composición de referencia y rompía la integración de la fotografía. */
.hero__esquina{display:none}

/* ---- Barrido del cabezal ----
   Pasada de luz dorada que recorre la fotografía cada 9 s con una línea de
   corte nítida en el centro. Queda recortada por la máscara, así que sigue la
   silueta curva de la imagen. */
.hero__barrido{
  position:absolute;top:-8%;bottom:-8%;left:-18%;z-index:5;pointer-events:none;
  width:clamp(130px,17vw,270px);transform:rotate(5deg);mix-blend-mode:screen;
  background:linear-gradient(90deg,
    rgba(227,197,120,0) 0%,
    rgba(227,197,120,.05) 38%,
    rgba(255,246,222,.20) 49%,
    rgba(227,197,120,.05) 60%,
    rgba(227,197,120,0) 100%);
  animation:geoBarrido 11s cubic-bezier(.55,.05,.4,1) infinite
}
/* Filete central: apenas una insinuación, no una línea marcada */
.hero__barrido i{
  position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;display:block;
  background:linear-gradient(180deg,rgba(255,248,229,0),rgba(255,248,229,.28) 26%,
             rgba(255,248,229,.28) 74%,rgba(255,248,229,0))
}
@keyframes geoBarrido{
  0%{left:-18%;opacity:0}
  7%{opacity:1}
  62%{opacity:1}
  76%,100%{left:108%;opacity:0}
}

/* ---- Tarjeta de dato: vidrio oscuro sobre la fotografía ----
   Placa translúcida en negro verdoso: deja ver la nave que hay detrás y no
   compite con la animación. Canto dorado de 1 px, luz interior superior y un
   destello diagonal que la recorre cada 7 s. Sin backdrop-filter a propósito:
   el contenedor lleva un filter para la sombra y, además, difuminar el fondo
   iría en contra de que se vea la fotografía. */
.hero__dato{
  position:absolute;right:clamp(.9rem,2.6vw,2.6rem);left:auto;
  top:62%;bottom:auto;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.75rem;padding:1.6rem .9rem 1.5rem;
  border-radius:16px;overflow:hidden;isolation:isolate;
  width:clamp(140px,11.5vw,168px);max-width:34%;
  background:linear-gradient(155deg,rgba(7,16,11,.46) 0%,rgba(5,12,8,.66) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 14px 34px rgba(4,20,11,.42)
}
/* Canto dorado degradado, dibujado como marco de 1 px */
.hero__dato::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(227,197,120,.85) 0%,rgba(255,255,255,.28) 38%,
             rgba(200,162,74,.30) 66%,rgba(200,162,74,.75) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude
}
/* Destello: pausa larga integrada en los propios fotogramas */
.hero__dato::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:38%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.30),rgba(255,255,255,0));
  transform:rotate(18deg);animation:datoDestello 7s ease-in-out infinite
}
@keyframes datoDestello{
  0%,68%{left:-40%;opacity:0}
  72%{opacity:.9}
  88%{left:105%;opacity:0}
  100%{left:105%;opacity:0}
}
/* Más específico que «.hero__dato span» para que el círculo del icono centre
   de verdad su SVG. */
.hero__dato .hero__dato-ico{
  flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 25%,rgba(255,255,255,.24),rgba(200,162,74,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)
}
.hero__dato-ico svg{width:16px;height:16px;stroke:var(--oro-claro);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.hero__dato b{display:block;font-size:clamp(1.16rem,.95rem + .5vw,1.48rem);line-height:1.05;
  color:#fff;letter-spacing:-.02em;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hero__dato span{display:block;font-size:.7rem;color:rgba(255,255,255,.9);line-height:1.3;
  margin-top:.24rem;text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* ---- Animación geométrica interior: el lenguaje de la preimpresión ----
   Un troquel que se traza y se deshace, marcas de corte que aparecen por
   esquinas, una cruz de registro girando y una trama de puntos que deriva
   muy despacio. Todo SVG y CSS, sin JavaScript. */
/* La capa geométrica se retira del arco izquierdo: dentro del recorte curvo,
   las marcas de corte y el troquel se dibujan sobre la zona plena de la
   fotografía, nunca sobre el borde donde se funde con el fondo. */
.hero__geo{position:absolute;inset:14% 3% 14% 30%;z-index:4;pointer-events:none;overflow:visible}

.hero__trama{
  position:absolute;inset:-40% -30%;opacity:.8;
  background-image:radial-gradient(rgba(255,255,255,.3) 1.1px,transparent 1.1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(78% 78% at 50% 45%,#000 18%,transparent 100%);
  mask-image:radial-gradient(78% 78% at 50% 45%,#000 18%,transparent 100%);
  animation:geoDeriva 48s linear infinite
}
@keyframes geoDeriva{to{background-position:260px 130px}}

.hero__troquel{position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 0 6px rgba(200,162,74,.55))}
.hero__troquel rect{
  fill:none;stroke:var(--oro-claro);stroke-width:2.4;
  vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:geoTroquel 16s cubic-bezier(.55,0,.45,1) infinite
}
@keyframes geoTroquel{
  0%{stroke-dashoffset:100}
  38%,62%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-100}
}

/* Marcas de corte: dos filetes por esquina, en CSS para que no se deformen */
.hero__corte{position:absolute;width:clamp(26px,3.2vw,46px);aspect-ratio:1}
.hero__corte::before,.hero__corte::after{
  content:"";position:absolute;background:#fff;
  box-shadow:0 0 6px rgba(0,0,0,.55),0 0 10px rgba(255,255,255,.35);
  opacity:0;animation:geoCorte 16s ease-in-out infinite
}
.hero__corte::before{width:100%;height:2px}
.hero__corte::after{width:2px;height:100%}
@keyframes geoCorte{0%,14%{opacity:0}30%,64%{opacity:1}84%,100%{opacity:0}}
.hero__corte--tl{top:5%;left:4%}
.hero__corte--tl::before{top:0;left:0}.hero__corte--tl::after{top:0;left:0}
.hero__corte--tr{top:5%;right:4%}
.hero__corte--tr::before{top:0;right:0}.hero__corte--tr::after{top:0;right:0}
.hero__corte--bl{bottom:5%;left:4%}
.hero__corte--bl::before{bottom:0;left:0}.hero__corte--bl::after{bottom:0;left:0}
.hero__corte--br{bottom:5%;right:4%}
.hero__corte--br::before{bottom:0;right:0}.hero__corte--br::after{bottom:0;right:0}
.hero__corte--tr::before,.hero__corte--tr::after{animation-delay:.5s}
.hero__corte--bl::before,.hero__corte--bl::after{animation-delay:1s}
.hero__corte--br::before,.hero__corte--br::after{animation-delay:1.5s}

/* Cruz de registro */
.hero__registro{
  position:absolute;right:clamp(.6rem,1.8vw,1.8rem);top:clamp(.6rem,1.8vw,1.8rem);
  width:clamp(46px,5.4vw,78px);aspect-ratio:1;
  filter:drop-shadow(0 0 5px rgba(0,0,0,.5));
  animation:hcGiro 20s linear infinite
}
.hero__registro svg{width:100%;height:100%}
.hero__registro circle,.hero__registro line{
  fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.5;
  vector-effect:non-scaling-stroke
}
.hero__registro .hr-pt{fill:var(--oro-claro);stroke:none}

/* Barra de escala: se llena y se vacía, como una regla de control */
.hero__escala{
  position:absolute;left:clamp(.6rem,1.8vw,1.8rem);top:clamp(.6rem,1.8vw,1.8rem);
  display:flex;gap:5px;align-items:flex-end;height:clamp(26px,3.4vw,44px);
  filter:drop-shadow(0 0 4px rgba(0,0,0,.5))
}
.hero__escala i{
  display:block;width:4px;height:100%;border-radius:2px;
  background:rgba(255,255,255,.5);transform-origin:bottom;transform:scaleY(.3);
  animation:geoEscala 3.4s ease-in-out infinite
}
.hero__escala i:nth-child(2){animation-delay:.16s}
.hero__escala i:nth-child(3){animation-delay:.32s}
.hero__escala i:nth-child(4){animation-delay:.48s}
.hero__escala i:nth-child(5){animation-delay:.64s}
@keyframes geoEscala{
  0%,100%{transform:scaleY(.3);background:rgba(255,255,255,.5)}
  50%{transform:scaleY(1);background:var(--oro-claro)}
}

/* ---- Círculos decorativos sobre la fotografía ---- */
.hero__circulos{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hc-w{position:absolute;aspect-ratio:1;display:block}
.hc-w svg{width:100%;height:100%;overflow:visible}
.hc{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.6;
  vector-effect:non-scaling-stroke;stroke-linecap:round;
  transform-box:fill-box;transform-origin:center}
.hc--traza{stroke-dasharray:100;stroke-dashoffset:100;
  animation:hcTraza 13s cubic-bezier(.5,0,.5,1) infinite}
@keyframes hcTraza{0%{stroke-dashoffset:100}42%,58%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
.hc--punt{stroke-dasharray:1.7 3.6;animation:hcGiro 34s linear infinite}
@keyframes hcGiro{to{transform:rotate(360deg)}}
.hc-pt{fill:var(--oro-claro);animation:hcNodo 4.6s ease-in-out infinite}
@keyframes hcNodo{0%,100%{opacity:.25}50%{opacity:1}}
.hc--a{animation-duration:12s}
.hc--b{animation-duration:29s}
.hc--c{animation-duration:17s;animation-delay:-4s}
.hc--d{animation-duration:40s;animation-direction:reverse}
.hero__circulos{z-index:4;filter:drop-shadow(0 0 5px rgba(0,0,0,.45))}
.hc-w--g1{width:clamp(96px,11vw,168px);left:32%;top:12%}
.hc-w--g2{width:clamp(120px,14vw,220px);right:2%;bottom:6%}

/* ---- Sin JavaScript ---- */
.no-js .hero__txt{visibility:visible}
.no-js .hero__txt > *{opacity:1;transform:none}
/* Sin JS los cinco textos comparten celda de rejilla y se superponían.
   Se muestra solo el primero, igual que ocurre con las diapositivas. */
.no-js .hero__txt ~ .hero__txt{display:none}
.no-js .hero__dots{display:none}
.no-js .hero__slide{opacity:1;visibility:visible}
.no-js .hero__slide ~ .hero__slide{display:none}

/* ---- Adaptación ---- */
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr;gap:1.6rem;min-height:0;
    padding:0 0 clamp(2rem,1.4rem + 2vw,3rem)}
  .hero__cuerpo{order:1;width:auto;
    padding:calc(var(--h-cab) + 1.8rem) var(--hero-pad) 0 var(--hero-pad)}
  /* La curva pasa al borde superior —mismo recurso, radios cambiados: los dos
     horizontales suman 100 %, así que arriba se dibuja media elipse— */
  .hero__media{position:relative;order:2;left:auto;right:auto;bottom:auto;
    height:auto;aspect-ratio:2/1;min-height:0;max-height:none;
    border-radius:50% 50% 0 0 / 15% 15% 0 0}
  .hero__geo{inset:20% 5% 8% 5%}
  .hc-w--g2{right:4%;bottom:8%}
  .hero__txt{max-width:660px}
  /* La tarjeta pasa al lado izquierdo para no chocar con la pestaña flotante
     de WhatsApp, que en pantallas estrechas ocupa el borde derecho. */
  .hero__dato{left:clamp(1rem,3vw,2.4rem);right:auto;width:clamp(142px,19vw,172px)}
  .hc-w--g1{left:8%;top:14%}
}
@media (max-width:520px){
  .hero__media{aspect-ratio:4/3}
  .hero__escala{display:none}
  .hero__registro{width:44px}
  .hero__dato{left:.8rem;right:auto;padding:.8rem .75rem;gap:.4rem;width:clamp(112px,30vw,138px)}
  .hero__dato b{font-size:1.1rem}
  .hero__dato span{font-size:.66rem}
  .hero__dots{flex-wrap:wrap;gap:.5rem}
}

/* Hero interior (páginas secundarias) */
.hero-int{position:relative;color:#fff;isolation:isolate;overflow:hidden;
  background:linear-gradient(112deg,var(--verde-prof) 0%,#0a2418 46%,var(--negro) 100%)}
.hero-int::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:
    radial-gradient(70% 120% at 88% 10%,rgba(200,162,74,.26),transparent 60%),
    repeating-linear-gradient(118deg,rgba(255,255,255,.04) 0 2px,transparent 2px 24px)
}
.hero-int__in{padding:clamp(2.5rem,1.8rem + 3.4vw,4.5rem) 0 clamp(2.2rem,1.6rem + 2.6vw,3.5rem);
  max-width:840px}
.hero-int h1{color:#fff;margin-bottom:.45em}
.hero-int p{color:var(--texto-inv-2);font-size:1.06rem;margin-bottom:0;max-width:62ch}

/* Sello de antigüedad de Imprenta A. Verde (1982). Dos variantes: pastilla
   dorada sobre el hero oscuro de la página de imprenta y distintivo pequeño
   sobre tarjetas de fondo claro (portada y catálogo). */
.sello-anio{
  display:inline-flex;align-items:baseline;gap:.55rem;
  padding:.45rem .95rem .5rem;border:1px solid rgba(227,197,120,.5);
  border-radius:var(--r-pill);background:rgba(200,162,74,.14)
}
.sello-anio span{
  font-size:.68rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro-claro)
}
.sello-anio b{
  font-size:1.2rem;font-weight:800;letter-spacing:.03em;line-height:1;
  color:#fff;font-variant-numeric:tabular-nums
}
.hero-int .sello-anio{margin:0 0 1.25rem;padding:.55rem 1.15rem .6rem;gap:.65rem}
.hero-int .sello-anio span{font-size:.72rem}
.hero-int .sello-anio b{font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem)}
.chip-anio{
  display:inline-block;margin-left:.45rem;padding:.14rem .5rem .16rem;
  border:1px solid rgba(200,162,74,.55);border-radius:var(--r-pill);
  background:rgba(200,162,74,.1);color:var(--oro-txt);
  font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;vertical-align:middle;font-variant-numeric:tabular-nums
}

/* Migas de pan */
.migas{font-size:.82rem;margin:0 0 1.1rem;color:var(--texto-inv-3)}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .55rem;margin:0;padding:0}
.migas li{margin:0;display:flex;align-items:center;gap:.55rem}
.migas li+li::before{content:"›";color:var(--oro)}
.migas a{color:var(--texto-inv-2)}
.migas a:hover{color:#fff}
.migas [aria-current]{color:#fff}

/* ---------------------------------------------------- 8. TARJETAS PRODUCTO */
.rejilla{display:grid;gap:clamp(1.1rem,.8rem + 1vw,1.7rem)}
.rejilla--5{grid-template-columns:repeat(5,1fr)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1180px){.rejilla--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){
  .rejilla--4{grid-template-columns:repeat(2,1fr)}
  .rejilla--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){.rejilla--5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){
  .rejilla--5,.rejilla--4,.rejilla--3,.rejilla--2{grid-template-columns:1fr}
}

.tarjeta{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;
  transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr)
}
.tarjeta:hover{border-color:var(--verde);box-shadow:var(--sombra);transform:translateY(-3px)}
.tarjeta__media{position:relative;aspect-ratio:4/3;background:var(--negro);overflow:hidden}
.tarjeta__media img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .6s cubic-bezier(.25,.6,.3,1)}
.tarjeta:hover .tarjeta__media img{transform:scale(1.05)}
/* Mismo gesto de marca que en las categorías de trabajos: la esquina de la
   pieza impresa se despega. Se reserva a las tarjetas que representan
   producto impreso; en sectores y blog se usan otras animaciones para que el
   recurso no pierda fuerza por repetición. */
.tarjeta__media::before,.tarjeta__media::after{
  content:"";position:absolute;top:0;right:0;width:0;height:0;
  transition:width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1)
}
.tarjeta__media::before{
  z-index:2;background:linear-gradient(135deg,var(--verde-prof),var(--negro));
  clip-path:polygon(100% 0,0 0,100% 100%)
}
.tarjeta__media::after{
  z-index:3;background:linear-gradient(135deg,#fdfdfb 0%,#eceee8 36%,#d3d7ce 70%,#b6bbb1 100%);
  clip-path:polygon(0 0,0 100%,100% 100%);
  filter:drop-shadow(-5px 5px 8px rgba(0,0,0,.45))
}
.tarjeta:hover .tarjeta__media::before,.tarjeta:focus-within .tarjeta__media::before,
.tarjeta:hover .tarjeta__media::after,.tarjeta:focus-within .tarjeta__media::after{
  width:62px;height:62px
}
@media (prefers-reduced-motion:reduce){
  .tarjeta__media::before,.tarjeta__media::after{transition:none}
}
.tarjeta__icono{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 120% at 24% 16%,#0b6b39 0%,var(--verde-prof) 52%,var(--negro) 100%)
}
.tarjeta__icono::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(118deg,rgba(255,255,255,.045) 0 2px,transparent 2px 22px)
}
.tarjeta__icono svg{width:56px;height:56px;stroke:var(--oro-claro);fill:none;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;position:relative}
.tarjeta__cuerpo{display:flex;flex-direction:column;flex:1;padding:1.35rem 1.4rem 1.5rem}
.tarjeta__cuerpo h3{margin-bottom:.45rem;font-size:1.08rem}
.tarjeta__cuerpo p{font-size:.92rem;color:var(--texto-2);margin-bottom:1.1rem}
.tarjeta__cuerpo .enlace-flecha{margin-top:auto}
.tarjeta__enlace::after{content:"";position:absolute;inset:0}

/* Tarjeta simple de texto (listas de servicios / sectores) */
.ficha{
  position:relative;padding:1.5rem 1.5rem 1.6rem;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r-md);
  transition:border-color var(--tr),box-shadow var(--tr)
}
.ficha:hover{border-color:var(--verde);box-shadow:var(--sombra)}
.ficha{overflow:hidden}
.ficha__media{margin:-1.5rem -1.5rem 1.3rem;aspect-ratio:16/10;overflow:hidden;
  background:var(--gris-2)}
.ficha__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.25,.6,.3,1)}
.ficha:hover .ficha__media img{transform:scale(1.04)}
.ficha__ico{
  width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:rgba(0,128,61,.09);margin-bottom:1rem
}
.ficha__ico svg{width:24px;height:24px;stroke:var(--verde);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ficha h3{font-size:1.05rem;margin-bottom:.4rem}
.ficha p{font-size:.93rem;color:var(--texto-2);margin-bottom:0}
.ficha p+p{margin-top:.7rem}
.ficha ul{font-size:.92rem;color:var(--texto-2);margin:.7rem 0 0;padding-left:1.1em}

/* Numeradas: cómo trabajamos */
.pasos{counter-reset:paso;display:grid;gap:1.4rem;grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pasos{grid-template-columns:1fr}}
.paso{position:relative;padding-top:2.6rem;border-top:1px solid var(--linea)}
.paso::before{
  counter-increment:paso;content:counter(paso,decimal-leading-zero);
  position:absolute;top:.9rem;left:0;font-size:.9rem;font-weight:800;color:var(--oro-txt);
  letter-spacing:.08em
}
.paso::after{content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;background:var(--verde)}
.paso h3{font-size:1.03rem;margin-bottom:.35rem}
.paso p{font-size:.92rem;color:var(--texto-2);margin-bottom:0}

/* ------------------------------------------------ 9. BLOQUE CORPORATIVO */
.corp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.75rem,1rem + 3vw,4rem);align-items:center}
@media (max-width:960px){.corp{grid-template-columns:1fr}}
.corp__media{position:relative;border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--sombra-lg)}
.corp__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11}
.corp__media::after{
  content:"";position:absolute;top:0;right:0;width:74px;height:74px;
  background:linear-gradient(225deg,var(--oro-claro) 0 48%,var(--oro) 48% 100%);
  clip-path:polygon(100% 0,0 0,100% 100%)
}
.corp__claves{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
@media (max-width:640px){.corp__claves{grid-template-columns:1fr;gap:.9rem}}
.clave{display:flex;gap:.85rem;align-items:flex-start}
.clave svg{flex:none;width:30px;height:30px;stroke:var(--verde);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.clave strong{display:block;font-size:.92rem;line-height:1.4;color:var(--tinta)}
.clave span{font-size:.84rem;color:var(--texto-2);line-height:1.5;display:block}

/* Datos de confianza */
.confianza{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden}
@media (max-width:840px){.confianza{grid-template-columns:repeat(2,1fr)}}
.confianza__it{background:#fff;padding:1.35rem 1.25rem;text-align:center}
.confianza__it b{display:block;font-size:1.02rem;color:var(--verde);line-height:1.3}
.confianza__it span{display:block;font-size:.84rem;color:var(--texto-2);margin-top:.2rem}

/* -------------------------------------------------------- 10. BLOQUE ORBITAL */
/* Fondo: negro translúcido sobre la fotografía, no un negro macizo. La imagen
   se ve pero queda lejos —poco zoom, desenfoque medio y un recorrido de
   paralaje amplio—, y el negro por encima la mantiene a distancia. */
.orbit{
  color:#fff;position:relative;isolation:isolate;overflow:hidden;
  background:#07100b
}
.orbit__fondo{position:absolute;inset:-22% -8%;z-index:-2;pointer-events:none;overflow:hidden}
.orbit__fondo img{
  display:block;width:100%;height:100%;object-fit:cover;
  opacity:.55;filter:blur(17px) saturate(.5) brightness(.72);
  transform:scale(1.02) translate3d(0,var(--par,0px),0);
  will-change:transform
}
/* Capas de negro transparente + halo verde de marca */
.orbit::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 48% at 50% 42%,rgba(0,128,61,.28),transparent 74%),
    radial-gradient(40% 36% at 88% 4%,rgba(200,162,74,.14),transparent 72%),
    linear-gradient(180deg,rgba(6,11,8,.62),rgba(6,11,8,.46) 42%,rgba(6,11,8,.70) 100%),
    radial-gradient(96% 96% at 50% 44%,rgba(6,12,8,.10) 0%,rgba(6,12,8,.52) 62%,rgba(4,9,6,.88) 100%)
}
.orbit h2{color:#fff}
.orbit__grid{
  --hub:clamp(190px,19vw,290px);
  display:grid;grid-template-columns:minmax(0,1fr) var(--hub) minmax(0,1fr);
  gap:clamp(1.5rem,.6rem + 3.4vw,3.5rem);align-items:center
}
.orbit__col{display:grid;gap:clamp(1.2rem,.8rem + 1.2vw,2.1rem)}
.orbit__col--l{text-align:right}
.orbit__col--l .orbit__item{flex-direction:row-reverse}
.orbit__item{
  position:relative;display:flex;align-items:flex-start;gap:1rem;color:#fff
}
.orbit__item::after{
  content:"";position:absolute;top:clamp(24px,2.2vw,30px);height:1px;width:0;
  background:linear-gradient(90deg,var(--oro),rgba(200,162,74,0));
  transition:width .7s cubic-bezier(.25,.6,.3,1) .15s
}
.orbit__col--r .orbit__item::after{right:100%;transform:scaleX(-1)}
.orbit__col--l .orbit__item::after{left:100%}
.orbit__item.is-in::after{width:clamp(1rem,3vw,3rem)}
.orbit__ico{
  position:relative;flex:none;width:52px;height:52px;display:grid;place-items:center;
  border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  transition:var(--tr)
}
.orbit__ico svg{width:24px;height:24px;stroke:var(--oro-claro);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.orbit__ico::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px dashed rgba(200,162,74,.45);opacity:0;transition:opacity var(--tr);
  animation:orbGiro 9s linear infinite
}
.orbit__item:hover .orbit__ico{background:rgba(200,162,74,.14);border-color:rgba(200,162,74,.5)}
.orbit__item:hover .orbit__ico::before{opacity:1}
.orbit__item h3{color:#fff;font-size:1.02rem;margin-bottom:.2rem}
/* Sobre el fondo aclarado, el gris tenue se quedaba corto de contraste */
.orbit__item p{color:var(--texto-inv-2);font-size:.87rem;margin:0;line-height:1.55}
.orbit__item a::after{content:"";position:absolute;inset:0}
.orbit__item a{color:#fff}
.orbit__item:hover h3{color:var(--oro-claro)}

.orbit__hub{position:relative;aspect-ratio:1;display:grid;place-items:center}
.orbit__halo{
  position:absolute;inset:-6%;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,
    rgba(200,162,74,0) 0deg 165deg,rgba(200,162,74,.2) 240deg,
    rgba(200,162,74,1) 318deg,rgba(0,128,61,.85) 340deg,rgba(0,128,61,0) 358deg);
  filter:drop-shadow(0 0 12px rgba(200,162,74,.4));
  -webkit-mask:radial-gradient(circle,transparent 0 63%,#000 65%,#000 78%,transparent 80%);
  mask:radial-gradient(circle,transparent 0 63%,#000 65%,#000 78%,transparent 80%);
  animation:orbGiro 7.5s linear infinite
}
@keyframes orbGiro{to{transform:rotate(360deg)}}
@keyframes orbGiroInv{to{transform:rotate(-360deg)}}
.orbit__anillos{position:absolute;inset:0;width:100%;height:100%}
.orbit__anillos circle{fill:none;vector-effect:non-scaling-stroke;
  transform-origin:150px 150px}
.orbit__anillos .oa-1{stroke:rgba(255,255,255,.2);stroke-width:1;stroke-dasharray:2 7;
  animation:orbGiro 52s linear infinite}
.orbit__anillos .oa-2{stroke:rgba(255,255,255,.14);stroke-width:1;stroke-dasharray:1 9;
  animation:orbGiroInv 34s linear infinite}
.orbit__anillos .oa-3{stroke:var(--oro);stroke-width:2;stroke-dasharray:62 856;
  stroke-linecap:round;animation:orbGiro 11s cubic-bezier(.55,0,.45,1) infinite}
.orbit__sat{position:absolute;inset:0;border-radius:50%;animation:orbGiro 18s linear infinite}
.orbit__sat i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;
  border-radius:50%;background:var(--oro-claro);
  box-shadow:0 0 0 4px rgba(200,162,74,.18),0 0 12px rgba(200,162,74,.75)}
.orbit__sat--b{animation-duration:27s;animation-direction:reverse;inset:9%}
.orbit__sat--c{animation-duration:40s;inset:17%}
.orbit__nucleo{
  position:relative;width:62%;aspect-ratio:1;border-radius:50%;background:#fff;
  display:grid;place-items:center;padding:16%;
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.9),0 12px 34px rgba(0,0,0,.4),
             0 0 60px rgba(200,162,74,.28)
}
.orbit__nucleo::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22)
}
.orbit__nucleo img{width:100%;height:auto}
@media (max-width:1080px){
  .orbit__grid{grid-template-columns:1fr;justify-items:center}
  .orbit__hub{order:-1;width:min(300px,72vw)}
  .orbit__col{grid-template-columns:1fr 1fr;width:100%}
  .orbit__col--l{text-align:left}
  .orbit__col--l .orbit__item{flex-direction:row}
  .orbit__item::after{display:none}
}
@media (max-width:640px){.orbit__col{grid-template-columns:1fr}}

/* --------------------------------------------------------- 11. GALERÍA */
.galeria{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
@media (max-width:1080px){.galeria{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.galeria{grid-template-columns:repeat(2,1fr)}}
.galeria__it{
  position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;
  background:var(--gris-2);border:1px solid var(--linea)
}
.galeria__it img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .6s cubic-bezier(.25,.6,.3,1)}
.galeria__it:hover img{transform:scale(1.05)}
.galeria__pie{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(17,18,20,.88));color:#fff;
  font-size:.82rem;font-weight:600;line-height:1.35
}
.galeria--instalaciones{grid-template-columns:repeat(4,1fr)}
.galeria--instalaciones .galeria__it img{aspect-ratio:4/3}
@media (max-width:1080px){.galeria--instalaciones{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.galeria--instalaciones{grid-template-columns:1fr}}

.banda-ancha{margin:clamp(1.1rem,.8rem + 1vw,1.7rem) 0 0;position:relative}
figure.corp__media{margin:0}
.banda-ancha picture,.banda-ancha img{width:100%}
.banda-ancha img{border-radius:var(--r-md);border:1px solid var(--linea)}
.banda-ancha figcaption{
  margin-top:.7rem;font-size:.84rem;color:var(--texto-2);
  border-left:2px solid var(--oro);padding-left:.9rem
}

.aviso-recurso{
  margin-top:1.2rem;font-size:.82rem;color:var(--texto-2);
  border-left:2px solid var(--oro);padding-left:.9rem
}

/* Marcador de imagen pendiente (no se publica con contenido inventado) */
.pendiente{
  display:grid;place-items:center;text-align:center;gap:.5rem;padding:2rem 1rem;
  min-height:200px;background:var(--gris);border:1px dashed var(--linea-fuerte);
  border-radius:var(--r-md);color:var(--texto-2);font-size:.85rem
}

/* --------------------------------------------------- 12. FRANJA TERRITORIAL */
.territorio{
  position:relative;background:var(--verde);color:#fff;isolation:isolate;overflow:hidden
}
.territorio::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.9;
  background:
    radial-gradient(90% 130% at 12% 0%,rgba(17,18,20,.75),transparent 62%),
    repeating-linear-gradient(118deg,rgba(255,255,255,.05) 0 2px,transparent 2px 26px)
}
.territorio__in{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;
  padding:clamp(2.2rem,1.6rem + 2.4vw,3.4rem) 0
}
@media (max-width:880px){.territorio__in{grid-template-columns:1fr}}
.territorio h2{color:#fff;font-size:clamp(1.4rem,1.1rem + 1.2vw,1.95rem);margin-bottom:.4rem}
.territorio p{color:var(--texto-inv-2);margin-bottom:0;max-width:66ch;font-size:.98rem}
.territorio__zonas{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;padding:0;list-style:none
}
.territorio__zonas li{
  margin:0;padding:.32rem .85rem;border:1px solid rgba(255,255,255,.32);
  border-radius:var(--r-pill);font-size:.82rem;font-weight:600
}

/* ---------------------------------------------------------- 13. CTA FINAL */
.cta{background:var(--negro);color:#fff;position:relative;isolation:isolate;overflow:hidden;border-top:2px solid var(--oro)}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(80% 140% at 82% 8%,rgba(200,162,74,.22),transparent 58%),
    radial-gradient(60% 120% at 6% 100%,rgba(0,128,61,.3),transparent 62%)
}
.cta__in{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;
  padding:clamp(2.6rem,1.8rem + 3vw,4.2rem) 0
}
@media (max-width:900px){.cta__in{grid-template-columns:1fr}}
.cta h2{color:#fff;margin-bottom:.4rem}
.cta p{color:var(--texto-inv-2);margin-bottom:0;max-width:60ch}

/* ------------------------------------------------------------- 14. PIE */
.pie{background:var(--negro);color:var(--texto-inv-3);font-size:.9rem;
  border-top:1px solid rgba(200,162,74,.3)}
.pie__top{
  display:grid;grid-template-columns:1.35fr 1fr 1fr 1.2fr;gap:2.4rem;
  padding:clamp(2.6rem,2rem + 2.4vw,4rem) 0 2.6rem
}
@media (max-width:1000px){.pie__top{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:620px){.pie__top{grid-template-columns:1fr;gap:1.9rem}}
.pie__marca img{height:78px;width:auto;margin-bottom:1.1rem}
.pie__marca p{color:var(--texto-inv-3);font-size:.88rem;max-width:38ch}
.pie h2,.pie h3{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:1.1rem;position:relative;padding-bottom:.6rem}
.pie h2::after,.pie h3::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;
  background:var(--oro)}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:.55rem}
.pie a{color:var(--texto-inv-3)}
.pie a:hover{color:#fff}
.pie__contacto li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.55}
.pie__contacto svg{flex:none;width:16px;height:16px;fill:var(--oro);margin-top:.28rem}
.pie__imprenta{
  margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--linea-inv)
}
.pie__imprenta img{height:42px;width:auto;margin-bottom:.6rem;
  filter:brightness(0) invert(1);opacity:.85}
.pie__imprenta p{font-size:.82rem;margin-bottom:.5rem}
.pie__legal{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;
  align-items:center;padding:1.15rem 0;border-top:1px solid var(--linea-inv);font-size:.82rem
}
.pie__legal ul{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.pie__legal li{margin:0}
.pie__legal button{background:none;border:0;padding:0;color:var(--texto-inv-3);
  cursor:pointer;font-size:.82rem;text-decoration:underline}
.pie__legal button:hover{color:#fff}

/* ---- Firma del estudio: una pegatina que se despega ---- */
.firma{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem 1rem;border-radius:8px;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#20242a 0%,#15181c 55%,#101215 100%);
  border:1px solid rgba(200,162,74,.32);
  font-size:.78rem;font-weight:600;color:var(--texto-inv-2);letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,
             border-color .45s ease
}
.firma__punto{
  flex:none;width:7px;height:7px;border-radius:50%;background:var(--verde);
  box-shadow:0 0 0 0 rgba(0,128,61,.6);animation:firmaLatido 2.8s ease-out infinite
}
@keyframes firmaLatido{
  0%{box-shadow:0 0 0 0 rgba(0,128,61,.55)}
  70%{box-shadow:0 0 0 7px rgba(0,128,61,0)}
  100%{box-shadow:0 0 0 0 rgba(0,128,61,0)}
}
.firma b{color:#fff;font-weight:700}
.firma .firma__marca{
  color:var(--oro-claro);font-weight:800;letter-spacing:.02em;
  background-image:linear-gradient(90deg,var(--oro) 0%,#f6e6b4 45%,var(--oro) 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:firmaOro 5.5s linear infinite
}
@keyframes firmaOro{to{background-position:-200% 0}}
/* Brillo que barre la superficie, con una larga pausa dentro del propio ciclo */
.firma::before{
  content:"";position:absolute;inset:-40% -120%;z-index:-1;
  background:linear-gradient(74deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
  transform:translateX(-42%);animation:firmaBrillo 6s ease-in-out 1.5s infinite
}
@keyframes firmaBrillo{0%,64%{transform:translateX(-42%)}92%,100%{transform:translateX(42%)}}
/* La esquina se despega al acercarse: mismo gesto que las tarjetas de trabajos */
.firma::after{
  content:"";position:absolute;top:0;right:0;width:0;height:0;z-index:2;
  background:linear-gradient(135deg,#fdfdfb 0%,#e6e8e2 45%,#c2c7bd 100%);
  clip-path:polygon(0 0,0 100%,100% 100%);
  filter:drop-shadow(-4px 4px 6px rgba(0,0,0,.55));
  transition:width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1)
}
.firma:hover,.firma:focus-visible{
  transform:translateY(-3px);border-color:rgba(200,162,74,.75);
  box-shadow:0 12px 28px rgba(0,0,0,.45)
}
.firma:hover::after,.firma:focus-visible::after{width:26px;height:26px}
.firma:hover .firma__flecha{transform:translateX(3px)}
.firma__flecha{transition:transform var(--tr);color:var(--oro)}
@media (prefers-reduced-motion:reduce){
  .firma::before,.firma__punto,.firma .firma__marca{animation:none}
  .firma .firma__marca{-webkit-text-fill-color:var(--oro-claro)}
}
@media (max-width:560px){.firma{width:100%;justify-content:center}}

/* ------------------------------------------------- 15. BOTONES FLOTANTES */
/* WhatsApp: pestaña pegada al lateral derecho. El icono no se mueve del borde;
   al acercarse, el rótulo se despliega hacia la izquierda girando sobre la
   línea de plegado, como una pegatina que se levanta del soporte. */
.wa-flotante{
  position:fixed;right:0;bottom:26px;z-index:70;
  display:flex;flex-direction:row-reverse;align-items:center;
  height:58px;width:58px;padding:0;overflow:hidden;
  border-radius:16px 0 0 16px;
  background:#1faa53;color:#fff;
  box-shadow:-8px 12px 30px rgba(17,18,20,.38);
  transition:width .46s cubic-bezier(.22,1,.36,1),background var(--tr)
}
.wa-flotante::before{
  content:"";position:absolute;right:5px;top:5px;width:48px;height:48px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);animation:waPulso 2.6s ease-out infinite
}
@keyframes waPulso{0%{transform:scale(.85);opacity:.85}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
.wa-flotante__ico{
  position:relative;z-index:2;flex:none;width:58px;height:58px;display:grid;place-items:center;
  background:#1faa53;
  /* línea de plegado entre el icono fijo y el rótulo que se despliega */
  box-shadow:-1px 0 0 rgba(0,0,0,.18),-2px 0 8px rgba(0,0,0,.18)
}
.wa-flotante__ico svg{width:28px;height:28px;fill:#fff}
.wa-flotante__txt{
  position:relative;white-space:nowrap;padding:0 1.15rem 0 1.25rem;line-height:1.25;
  background:#1faa53;opacity:0;
  transform:perspective(680px) rotateY(-84deg);transform-origin:right center;
  transition:transform .46s cubic-bezier(.22,1,.36,1),opacity .2s ease
}
/* Esquina despegada del rótulo, en dorado, igual que el resto del sitio */
.wa-flotante__txt::after{
  content:"";position:absolute;left:0;top:0;width:16px;height:16px;
  background:linear-gradient(135deg,var(--oro-claro) 0 46%,var(--oro) 46% 100%);
  clip-path:polygon(0 0,100% 0,0 100%);opacity:0;transition:opacity .3s ease .2s
}
.wa-flotante__txt b{display:block;font-size:.86rem;color:#fff}
.wa-flotante__txt span{display:block;font-size:.78rem;color:rgba(255,255,255,.85)}
.wa-flotante:hover,.wa-flotante:focus-visible{width:268px;background:#199549;color:#fff}
.wa-flotante:hover .wa-flotante__txt,.wa-flotante:focus-visible .wa-flotante__txt{
  opacity:1;transform:perspective(680px) rotateY(0)
}
.wa-flotante:hover .wa-flotante__txt::after,
.wa-flotante:focus-visible .wa-flotante__txt::after{opacity:1}
@media (max-width:520px){
  .wa-flotante{bottom:20px}
  .wa-flotante:hover,.wa-flotante:focus-visible{width:58px}
  .wa-flotante:hover .wa-flotante__txt,.wa-flotante:focus-visible .wa-flotante__txt{opacity:0}
}

/* Separado de la pestaña de WhatsApp: 30 px de aire entre los dos */
.arriba{
  position:fixed;right:12px;bottom:114px;z-index:69;width:46px;height:46px;
  display:grid;place-items:center;border:1px solid var(--linea);border-radius:var(--r-sm);
  background:#fff;color:var(--verde);cursor:pointer;box-shadow:var(--sombra);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--tr)
}
.arriba.is-visible{opacity:1;visibility:visible;transform:none}
.arriba:hover{background:var(--verde);color:#fff;border-color:var(--verde)}
.arriba svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:520px){.arriba{right:10px;bottom:108px}}

/* ------------------------------------------------------ 16. CONTENIDO RICO */
.prosa{max-width:78ch}
.prosa h2{margin-top:2.4rem}
.prosa h2:first-child{margin-top:0}
.prosa h3{margin-top:1.9rem;font-size:1.15rem}
.prosa ul{padding-left:1.15em}
.prosa li::marker{color:var(--verde)}
.prosa .nota{
  background:var(--gris);border-left:3px solid var(--oro);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:1rem 1.2rem;font-size:.93rem;color:var(--texto-2)
}
.prosa .nota strong{color:var(--tinta)}
.prosa .nota p:last-child{margin-bottom:0}

.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,1rem + 2.4vw,3.5rem);align-items:start}
@media (max-width:900px){.dos-col{grid-template-columns:1fr}}
.dos-col--lateral{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
@media (max-width:900px){.dos-col--lateral{grid-template-columns:1fr}}

.lista-check{list-style:none;padding:0;margin:0}
.lista-check li{position:relative;padding-left:1.75rem;margin-bottom:.55rem;font-size:.95rem}
.lista-check li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:5px;
  border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);
  transform:rotate(-45deg)
}

.panel{
  background:var(--gris);border:1px solid var(--linea);border-radius:var(--r-md);
  padding:clamp(1.3rem,1rem + 1vw,2rem)
}
.panel h3{margin-top:0;font-size:1.05rem}
.panel :last-child{margin-bottom:0}
.panel--oscuro{background:linear-gradient(120deg,var(--verde-prof),var(--negro));
  border-color:rgba(200,162,74,.28);color:var(--texto-inv-2)}
.panel--oscuro h3{color:#fff}
.panel--oscuro a:not(.btn){color:var(--oro-claro)}

/* La columna lateral debe estirarse: si se ajusta al contenido, position:sticky
   no tiene recorrido y el panel se va con el scroll. */
.dos-col--lateral > aside{align-self:stretch}
.lateral{position:sticky;top:calc(var(--h-nav) + 1.2rem)}
@media (max-width:900px){.lateral{position:static}}

/* --------------------------------------------------------------- 17. FAQ */
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  list-style:none;position:relative;padding:1.15rem 2.6rem 1.15rem 0;cursor:pointer;
  font-weight:700;color:var(--tinta);font-size:1rem;line-height:1.45
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--verde)}
.faq summary::after{
  content:"";position:absolute;right:.55rem;top:1.55rem;width:11px;height:11px;
  border-right:2px solid var(--verde);border-bottom:2px solid var(--verde);
  transform:rotate(45deg);transition:transform var(--tr),top var(--tr)
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.75rem}
.faq__a{padding:0 2.6rem 1.35rem 0;color:var(--texto-2);font-size:.95rem}
.faq__a :last-child{margin-bottom:0}
.faq--dos{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.5rem,1rem + 2vw,3rem)}
@media (max-width:860px){.faq--dos{grid-template-columns:1fr}}
.faq__cab{
  display:flex;align-items:center;gap:.8rem;margin:0 0 .3rem;font-size:.76rem;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-txt)
}
.faq__cab::after{content:"";flex:1;height:1px;background:var(--linea)}
.faq__col+.faq__col{margin-top:0}
@media (max-width:860px){.faq__col+.faq__col{margin-top:2rem}}

/* ---------------------------------------------------------- 18. FORMULARIO */
.form{display:grid;gap:1.1rem}
.form__fila{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:640px){.form__fila{grid-template-columns:1fr}}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo label{font-size:.86rem;font-weight:700;color:var(--tinta)}
.campo label .req{color:var(--verde)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.75rem .9rem;border:1px solid var(--linea-fuerte);border-radius:var(--r-sm);
  background:#fff;font-size:.95rem;transition:border-color var(--tr),box-shadow var(--tr)
}
.campo textarea{min-height:140px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(0,128,61,.16)
}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.campo__pista{font-size:.8rem;color:var(--texto-2)}
.campo__error{font-size:.8rem;color:#b3261e;font-weight:600;min-height:1.1em}
.campo--check{flex-direction:row;align-items:flex-start;gap:.7rem}
.campo--check input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--verde)}
.campo--check label{font-weight:400;font-size:.87rem;color:var(--texto-2);line-height:1.55}
.campo--oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__aviso{
  padding:.9rem 1.1rem;border-radius:var(--r-sm);font-size:.9rem;font-weight:600;display:none
}
.form__aviso.is-ok{display:block;background:rgba(0,128,61,.1);color:var(--verde-osc)}
.form__aviso.is-error{display:block;background:rgba(179,38,30,.08);color:#8c1d18}
.form fieldset{border:1px solid var(--linea);border-radius:var(--r-md);padding:1.2rem 1.3rem 1.4rem;
  margin:0;display:grid;gap:1.1rem}
.form legend{padding:0 .5rem;font-size:.78rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--oro-txt)}

/* -------------------------------------------------------------- 19. MAPA */
.mapa{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--r-md);
  overflow:hidden;border:1px solid var(--linea);background:var(--gris)}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){.mapa{aspect-ratio:4/3}}

.contacto-datos{list-style:none;margin:0;padding:0}
.contacto-datos li{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.05rem}
.contacto-datos svg{flex:none;width:20px;height:20px;fill:var(--verde);margin-top:.28rem}
.contacto-datos b{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--texto-2);font-weight:700}
.contacto-datos a,.contacto-datos span{font-size:1.02rem;color:var(--tinta);font-weight:600}
.contacto-datos a:hover{color:var(--verde)}

/* ------------------------------------------------------------- 20. TABLAS */
.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r-md)}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:520px}
th,td{padding:.75rem .95rem;text-align:left;border-bottom:1px solid var(--linea)}
th{background:var(--gris);font-weight:700;color:var(--tinta)}
tr:last-child td{border-bottom:0}

/* -------------------------------------------------------- 21. BLOG / PLAN */
.plan-lista{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.plan-lista li{
  display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 1.1rem;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r-sm);font-size:.94rem;margin:0
}
.plan-lista b{flex:none;color:var(--oro-txt);font-variant-numeric:tabular-nums}

/* ============================ 24. FRANJA DE PROCESO (4 ideas encadenadas) ===
   No son cuatro datos sueltos: son las cuatro fases del encargo. Un haz
   dorado recorre la línea que las une y va iluminando la fase activa, de
   modo que la animación explica el orden en que ocurren las cosas. */
.proceso{position:relative}
.proceso__linea{
  position:absolute;left:0;right:0;top:34px;height:3px;background:var(--linea);
  overflow:hidden;border-radius:3px
}
/* La línea se llena conforme avanzan las fases: el recorrido queda a la vista,
   no solo la fase encendida. */
.proceso__relleno{
  position:absolute;inset:0 auto 0 0;width:12.5%;border-radius:3px;
  background:linear-gradient(90deg,var(--oro) 0%,var(--verde) 62%,var(--verde) 100%);
  box-shadow:0 0 10px rgba(0,128,61,.45);
  transition:width 1.05s cubic-bezier(.55,0,.45,1)
}
.proceso__haz{
  position:absolute;top:0;left:0;height:100%;width:25%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0));
  transform:translateX(-100%);
  transition:transform 1.05s cubic-bezier(.55,0,.45,1)
}
.proceso__pasos{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.6rem,1.4vw,1.6rem)
}
.proceso__paso{
  position:relative;text-align:center;padding:0 .6rem;background:none;border:0;
  cursor:default;font:inherit;color:inherit
}
/* Selector con dos clases a propósito: `.proceso__paso span` (§ más abajo)
   tiene mayor especificidad que `.proceso__nodo` y le imponía display:block,
   lo que anulaba el centrado del icono dentro del círculo. */
.proceso__paso .proceso__nodo{
  position:relative;width:68px;height:68px;margin:0 auto .9rem;border-radius:50%;
  display:grid;place-items:center;line-height:0;font-size:0;
  background:#fff;border:2px solid var(--linea);
  transition:border-color .5s ease,box-shadow .5s ease,transform .5s cubic-bezier(.34,1.4,.64,1)
}
.proceso__nodo svg{width:26px;height:26px;stroke:var(--texto-2);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s ease}
.proceso__nodo::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px dashed rgba(200,162,74,.55);opacity:0;
  animation:orbGiro 11s linear infinite;transition:opacity .5s ease
}
/* Dos anillos concéntricos que salen del nodo al activarse */
.proceso__nodo::before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none
}
.proceso__paso.is-activo .proceso__nodo::before{animation:nodoOnda 2.6s cubic-bezier(.25,.6,.3,1) infinite}
/* Los anillos no pasan de 22 px para no invadir el texto de la fase */
@keyframes nodoOnda{
  0%{box-shadow:0 0 0 0 rgba(0,128,61,.40),0 0 0 0 rgba(0,128,61,.20)}
  62%{box-shadow:0 0 0 14px rgba(0,128,61,0),0 0 0 7px rgba(0,128,61,.08)}
  100%{box-shadow:0 0 0 14px rgba(0,128,61,0),0 0 0 22px rgba(0,128,61,0)}
}
.proceso__paso b{
  display:block;font-size:1rem;color:var(--tinta);line-height:1.3;
  transition:color .4s ease
}
.proceso__paso span{
  display:block;font-size:.85rem;color:var(--texto-2);line-height:1.5;margin-top:.2rem
}
/* Fase encendida: el nodo se llena de verde, crece con rebote y el rótulo
   y el titular entran de nuevo desde abajo. */
.proceso__paso.is-activo .proceso__nodo{
  border-color:var(--verde);transform:translateY(-6px) scale(1.1);
  background:linear-gradient(150deg,var(--verde) 0%,var(--verde-prof) 100%);
  box-shadow:0 16px 34px rgba(0,128,61,.30),0 0 0 6px rgba(0,128,61,.08)
}
.proceso__paso.is-activo .proceso__nodo svg{stroke:#fff}
.proceso__paso.is-activo .proceso__nodo::after{opacity:1;border-color:rgba(200,162,74,.85)}
.proceso__paso.is-activo b{color:var(--verde-osc)}
.proceso__paso.is-activo .proceso__orden{color:var(--verde-osc)}
.proceso__paso.is-activo b,
.proceso__paso.is-activo .proceso__orden{animation:pasoEntra .55s cubic-bezier(.22,1,.36,1) both}
.proceso__paso.is-activo b{animation-delay:.06s}
@keyframes pasoEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Fase ya recorrida: no vuelve al gris, se queda marcada en dorado */
.proceso__paso.is-pasado .proceso__nodo{border-color:var(--oro);background:#fffdf7}
.proceso__paso.is-pasado .proceso__nodo svg{stroke:var(--oro-osc)}
.proceso__orden{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.18em;
  color:var(--oro-txt);margin-bottom:.35rem;transition:color .4s ease
}
@media (max-width:860px){
  .proceso__pasos{grid-template-columns:repeat(2,1fr);gap:1.8rem 1rem}
  .proceso__linea{display:none}
}
@media (max-width:370px){.proceso__pasos{grid-template-columns:1fr}}

/* ==================== 25. TARJETAS DE CATEGORÍA CON ETIQUETA DESPEGADA =====
   Efecto propio del proyecto: al acercarse, la esquina superior derecha se
   levanta como una etiqueta adhesiva que se despega del liner. El triángulo
   girado enseña el dorso del papel y proyecta su sombra sobre la imagen. */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,.8rem + .9vw,1.6rem)}
@media (max-width:1080px){.cats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cats{grid-template-columns:1fr}}

.cat{
  position:relative;display:block;width:100%;padding:0;border:0;background:var(--negro);
  border-radius:var(--r-md);overflow:hidden;cursor:pointer;text-align:left;
  isolation:isolate;transition:transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s cubic-bezier(.22,1,.36,1)
}
.cat__img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.cat__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1),filter .5s ease
}
.cat__liner{
  /* el «papel soporte» que queda a la vista bajo la esquina despegada */
  position:absolute;top:0;right:0;width:0;height:0;z-index:2;
  background:linear-gradient(135deg,var(--verde-prof),var(--negro));
  clip-path:polygon(100% 0,0 0,100% 100%);
  transition:width .55s cubic-bezier(.22,1,.36,1),height .55s cubic-bezier(.22,1,.36,1)
}
.cat__peel{
  /* El trozo levantado es el mismo triángulo reflejado sobre la diagonal:
     por eso ocupa el lado contrario y su degradado va al revés. */
  position:absolute;top:0;right:0;width:0;height:0;z-index:3;
  background:linear-gradient(135deg,#fdfdfb 0%,#eceee8 34%,#d5d9d0 66%,#b7bcb2 100%);
  clip-path:polygon(0 0,0 100%,100% 100%);
  filter:drop-shadow(-7px 7px 11px rgba(0,0,0,.5));
  transition:width .55s cubic-bezier(.22,1,.36,1),height .55s cubic-bezier(.22,1,.36,1)
}
.cat__peel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(200,162,74,.4),transparent 58%);
  clip-path:polygon(0 0,0 100%,100% 100%)
}
.cat:hover,.cat:focus-visible{transform:translateY(-4px);box-shadow:var(--sombra-lg)}
.cat:hover .cat__liner,.cat:focus-visible .cat__liner,
.cat:hover .cat__peel,.cat:focus-visible .cat__peel{width:96px;height:96px}
.cat:hover .cat__img img,.cat:focus-visible .cat__img img{transform:scale(1.06)}
.cat__cuerpo{
  position:absolute;left:0;right:0;bottom:0;z-index:4;padding:1.6rem 1rem .9rem;
  background:linear-gradient(transparent,rgba(17,18,20,.9));color:#fff
}
.cat__cuerpo b{display:block;font-size:.95rem;font-weight:700;line-height:1.3}
.cat__cuerpo small{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.2rem;
  font-size:.78rem;color:var(--oro-claro);opacity:0;transform:translateY(6px);
  transition:opacity var(--tr),transform var(--tr)
}
.cat__cuerpo small::after{content:"→"}
.cat:hover .cat__cuerpo small,.cat:focus-visible .cat__cuerpo small{opacity:1;transform:none}

/* El detalle de cada categoría vive en el HTML (indexable). Con JavaScript se
   clona dentro del panel; sin JavaScript se muestra en línea bajo las tarjetas. */
.catdetalle{display:none}
.catpanel .catdetalle{display:block}
.no-js .catdetalle{
  display:block;margin-top:2.5rem;border:1px solid var(--linea);border-radius:var(--r-md)
}
.no-js .catdetalles{display:grid;gap:1.5rem}

/* ------------------------- Panel de categoría (se abre al pulsar) --------- */
.catpanel{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:clamp(.75rem,2vw,2rem);background:rgba(17,18,20,.8);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease
}
.catpanel.is-abierto{opacity:1;visibility:visible}
.catpanel__caja{
  position:relative;width:min(1100px,100%);max-height:92vh;overflow-y:auto;
  background:#fff;border-radius:var(--r-md);box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:translateY(26px) scale(.98);
  transition:transform .45s cubic-bezier(.22,1,.36,1)
}
.catpanel.is-abierto .catpanel__caja{transform:none}
.catpanel__caja::before{
  content:"";display:block;height:4px;
  background:linear-gradient(90deg,var(--verde),var(--oro))
}
.catpanel__cab{padding:clamp(1.4rem,1rem + 1.4vw,2.2rem) clamp(1.2rem,1rem + 1.6vw,2.4rem) 0}
.catpanel__cab h2{margin:0 0 .5rem;font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem)}
.catpanel__cab p{color:var(--texto-2);margin:0;max-width:74ch}
.catpanel__cuerpo{padding:1.6rem clamp(1.2rem,1rem + 1.6vw,2.4rem) clamp(1.4rem,1rem + 1.6vw,2.4rem)}
.catpanel__cerrar{
  position:absolute;top:14px;right:14px;z-index:5;width:44px;height:44px;
  display:grid;place-items:center;border:1px solid var(--linea);border-radius:var(--r-sm);
  background:#fff;cursor:pointer;color:var(--tinta);transition:var(--tr)
}
.catpanel__cerrar:hover{background:var(--negro);color:#fff;border-color:var(--negro)}
.catpanel__cerrar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round}
body.sin-scroll .catpanel{overscroll-behavior:contain}

/* ============================================ 26. VISOR DE IMÁGENES (LIGHTBOX) */
.lbox{
  position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;
  background:rgba(10,11,12,.94);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease
}
.lbox.is-abierto{opacity:1;visibility:visible}
.lbox__fig{
  margin:0;max-width:min(1280px,94vw);max-height:88vh;display:flex;flex-direction:column;
  gap:.9rem;transform:scale(.96);transition:transform .35s cubic-bezier(.22,1,.36,1)
}
.lbox.is-abierto .lbox__fig{transform:none}
.lbox__fig img{
  max-width:100%;max-height:76vh;width:auto;height:auto;margin:0 auto;
  border-radius:var(--r-sm);box-shadow:0 24px 60px rgba(0,0,0,.6)
}
.lbox__pie{
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:space-between;align-items:center;
  color:#e9eeea;font-size:.88rem
}
.lbox__pie span{color:var(--oro-claro);font-variant-numeric:tabular-nums;font-size:.8rem;
  letter-spacing:.08em}
.lbox__btn{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:50%;
  background:rgba(255,255,255,.06);color:#fff;cursor:pointer;transition:var(--tr)
}
.lbox__btn:hover{background:#fff;color:var(--negro)}
.lbox__btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lbox__prev{left:clamp(.5rem,2vw,2rem)}
.lbox__next{right:clamp(.5rem,2vw,2rem)}
.lbox__cerrar{
  position:absolute;top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem);
  transform:none;width:48px;height:48px
}
@media (max-width:620px){
  .lbox__btn{width:44px;height:44px}
  .lbox__fig img{max-height:66vh}
}
/* Señal de que una imagen es ampliable */
[data-lightbox] .galeria__it,[data-lightbox] .catgal__it,
.corp__media,.banda-ancha{cursor:zoom-in}
[data-lightbox] .galeria__it::after,[data-lightbox] .catgal__it::after,
.corp__media::before,.banda-ancha::before{
  content:"";position:absolute;right:.6rem;top:.6rem;width:32px;height:32px;z-index:3;
  border-radius:50%;background:rgba(17,18,20,.55) center/16px 16px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.8);transition:var(--tr)
}
[data-lightbox] .galeria__it:hover::after,[data-lightbox] .catgal__it:hover::after,
.corp__media:hover::before,.banda-ancha:hover::before{opacity:1;transform:none}
/* La esquina dorada del bloque corporativo va en ::after, así que la lupa
   ocupa ::before y se coloca a la izquierda para no taparla. */
.corp__media::before,.banda-ancha::before{left:.7rem;right:auto;top:.7rem}

/* Galería dentro del panel de categoría */
.catgal{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:820px){.catgal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.catgal{grid-template-columns:1fr}}
.catgal__it{
  position:relative;margin:0;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--linea);background:var(--gris-2)
}
.catgal__it img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.catgal__it:hover img{transform:scale(1.05)}
.catgal__it figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem .8rem .7rem;
  background:linear-gradient(transparent,rgba(17,18,20,.88));color:#fff;
  font-size:.8rem;font-weight:600;line-height:1.35
}

/* ================================== 27. TARJETAS DE SECTOR CON IMAGEN ===== */
.sector{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;
  transition:box-shadow .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)
}
.sector::before,.sector::after{
  /* filete dorado que se dibuja alrededor al pasar el ratón */
  content:"";position:absolute;z-index:4;background:var(--oro);
  transition:transform .45s cubic-bezier(.22,1,.36,1);pointer-events:none
}
.sector::before{top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left}
.sector::after{top:0;left:0;width:2px;height:100%;transform:scaleY(0);transform-origin:top;
  transition-delay:.12s}
.sector:hover,.sector:focus-within{transform:translateY(-5px);box-shadow:var(--sombra-lg)}
.sector:hover::before,.sector:focus-within::before{transform:scaleX(1)}
.sector:hover::after,.sector:focus-within::after{transform:scaleY(1)}
.sector__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--negro)}
.sector__media img{
  width:100%;height:100%;object-fit:cover;
  /* revelado por máscara al entrar en pantalla */
  clip-path:inset(0 0 100% 0);transform:scale(1.08);
  transition:clip-path 1s cubic-bezier(.22,1,.36,1),transform 1.4s cubic-bezier(.22,1,.36,1)
}
.reveal.is-in .sector__media img,.no-js .sector__media img{clip-path:inset(0 0 0 0);transform:scale(1)}
.sector:hover .sector__media img{transform:scale(1.06)}
.sector__num{
  position:absolute;left:0;bottom:0;z-index:3;padding:.35rem .8rem;
  background:var(--negro);color:var(--oro-claro);font-size:.7rem;font-weight:800;
  letter-spacing:.16em;border-radius:0 var(--r-sm) 0 0
}
.sector__cuerpo{display:flex;flex-direction:column;flex:1;padding:1.5rem 1.5rem 1.6rem}
.sector__cuerpo h3{font-size:1.08rem;margin-bottom:.5rem}
.sector__cuerpo p{font-size:.93rem;color:var(--texto-2);margin-bottom:.75rem}
.sector__cuerpo p:last-of-type{margin-bottom:0}
.sector__cuerpo .enlace-flecha{margin-top:1rem}
.sector--cta{
  background:linear-gradient(135deg,var(--verde-prof),var(--negro));border-color:transparent;
  color:var(--texto-inv-2);justify-content:center;padding:2rem 1.6rem;text-align:left
}
.sector--cta h3{color:#fff}
.sector--cta p{color:var(--texto-inv-2);font-size:.94rem}
.sector--cta .btn{margin-top:1.1rem;align-self:flex-start}

/* ======================================= 28. ACORDEÓN DE PREGUNTAS ======== */
.acc{display:grid;gap:.8rem}
.acc__it{
  position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--r-md);
  overflow:hidden;transition:border-color .4s ease,box-shadow .4s ease
}
.acc__it::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--oro);
  transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.22,1,.36,1)
}
.acc__it.is-abierto{border-color:var(--verde);box-shadow:var(--sombra)}
.acc__it.is-abierto::before{transform:scaleY(1)}
.acc__btn{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:1rem;
  width:100%;padding:1.15rem 1.3rem;background:none;border:0;cursor:pointer;
  text-align:left;font:inherit;color:var(--tinta)
}
.acc__n{
  font-size:.78rem;font-weight:800;color:var(--oro-txt);font-variant-numeric:tabular-nums;
  padding-top:.2rem;transition:color .4s ease
}
.acc__q{font-size:1rem;font-weight:700;line-height:1.45;transition:color .4s ease}
.acc__it.is-abierto .acc__q{color:var(--verde)}
.acc__it.is-abierto .acc__n{color:var(--verde)}
.acc__mas{
  position:relative;flex:none;width:30px;height:30px;border-radius:var(--r-sm);
  border:1px solid var(--linea);display:grid;place-items:center;
  transition:background .4s ease,border-color .4s ease,transform .5s cubic-bezier(.34,1.4,.64,1)
}
.acc__mas::before,.acc__mas::after{
  content:"";position:absolute;background:var(--verde);border-radius:2px;
  transition:transform .45s cubic-bezier(.34,1.4,.64,1),background .3s ease
}
.acc__mas::before{width:12px;height:2px}
.acc__mas::after{width:2px;height:12px}
.acc__it.is-abierto .acc__mas{background:var(--verde);border-color:var(--verde);transform:rotate(180deg)}
.acc__it.is-abierto .acc__mas::before{background:#fff}
.acc__it.is-abierto .acc__mas::after{transform:scaleY(0);background:#fff}
/* La apertura anima por filas de rejilla: no hace falta conocer la altura */
.acc__p{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1),opacity .35s ease
}
.acc__p > div{overflow:hidden}
.acc__it.is-abierto .acc__p{grid-template-rows:1fr;opacity:1}
.acc__p p{
  margin:0 1.3rem 1.3rem 3.1rem;color:var(--texto-2);font-size:.95rem
}
.acc__p p + p{margin-top:.8rem}
@media (max-width:520px){.acc__p p{margin-left:1.3rem}}
/* Sin JavaScript el acordeón queda abierto y legible */
.no-js .acc__p{grid-template-rows:1fr;opacity:1}
.no-js .acc__mas{display:none}
/* Dos columnas independientes: al abrir una pregunta solo empuja a las de su
   propia columna, y no deja un hueco muerto enfrente. */
.acc--dos{display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(1.2rem,1rem + 1.6vw,2.4rem);align-items:start}
.acc__col{display:grid;gap:.8rem;align-content:start}
@media (max-width:900px){
  .acc--dos{grid-template-columns:1fr;gap:1.6rem}
}
.acc__cab{
  display:flex;align-items:center;gap:.8rem;margin:0 0 .2rem;
  font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro-txt)
}
.acc__cab:first-child{margin-top:0}
.acc__cab::after{content:"";flex:1;height:1px;background:var(--linea)}

/* ================================================= 29. BLOG ============== */
.post{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;
  transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr)
}
.post:hover{border-color:var(--verde);box-shadow:var(--sombra);transform:translateY(-3px)}
.post__media{aspect-ratio:16/10;overflow:hidden;background:var(--negro)}
.post__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.post:hover .post__media img{transform:scale(1.05)}
.post__cuerpo{display:flex;flex-direction:column;flex:1;padding:1.3rem 1.4rem 1.5rem}
.post__cat{
  display:inline-block;align-self:flex-start;margin-bottom:.6rem;padding:.2rem .65rem;
  border:1px solid var(--linea-fuerte);border-radius:var(--r-pill);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--oro-txt)
}
.post__cuerpo h3{font-size:1.05rem;margin-bottom:.45rem;line-height:1.35}
.post__cuerpo h3 a::after{content:"";position:absolute;inset:0}
.post__cuerpo p{font-size:.92rem;color:var(--texto-2);margin-bottom:1rem}
.post__cuerpo .enlace-flecha{margin-top:auto}
.post__meta{font-size:.8rem;color:var(--texto-2);margin-bottom:.5rem}

.articulo{max-width:74ch}
.articulo h2{margin-top:2.6rem}
.articulo h3{margin-top:1.8rem;font-size:1.12rem}
.articulo > p:first-of-type{font-size:1.08rem;color:var(--texto-2);line-height:1.85}
.art-meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;font-size:.85rem;
  color:var(--texto-inv-3);margin:0
}
.art-meta b{color:var(--oro-claro);font-weight:700}
.art-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){.art-rel{grid-template-columns:1fr}}

/* ============ 30. LÍNEA TEMPORAL DEL MÉTODO, RECORRIDA POR EL SCROLL ======
   La secuencia se reproduce sola: en cuanto la sección entra en pantalla,
   main.js anima el avance normalizado (--lt-p, de 0 a 1) parándose en cada
   nodo. Esa única variable escala la línea de progreso, coloca el punto
   luminoso y decide qué fases están activas. No depende del scroll.
   La disposición vertical es la base —vale para móvil, para prefers-reduced-
   motion y para navegación sin JavaScript— y la horizontal se activa solo en
   escritorio, más abajo. */
.lt{--lt-p:0;position:relative;height:auto}
.lt__lienzo{position:relative}

.lt__fases{
  position:relative;list-style:none;margin:0;padding:0 0 0 58px;
  display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,1rem + 1.2vw,2.2rem)
}
.lt__fase{position:relative;margin:0}

/* ---- Pista: base atenuada, progreso luminoso y punto ---- */
/* En vertical el raíl va del primer nodo al último: main.js publica esa
   distancia en --lt-largo para que el punto termine justo sobre el nodo final. */
.lt__pista{position:absolute;left:21px;top:22px;bottom:auto;width:2px;
  height:var(--lt-largo,calc(100% - 44px))}
.lt__base{position:absolute;inset:0;border-radius:2px;background:var(--linea)}
.lt__progreso{
  position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(180deg,var(--oro) 0%,var(--verde) 42%,var(--verde) 100%);
  box-shadow:0 0 12px rgba(0,128,61,.45);
  transform:scaleY(var(--lt-p));transform-origin:top center
}
.lt__punto{
  position:absolute;left:50%;top:calc(var(--lt-p) * 100%);
  width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:var(--verde);
  box-shadow:0 0 0 4px rgba(0,128,61,.14),0 0 16px 3px rgba(0,128,61,.55)
}
.lt__punto::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(0,128,61,.5);animation:ltPulso 2.4s cubic-bezier(.25,.6,.3,1) infinite
}
@keyframes ltPulso{
  0%{box-shadow:0 0 0 0 rgba(0,128,61,.45)}
  70%{box-shadow:0 0 0 13px rgba(0,128,61,0)}
  100%{box-shadow:0 0 0 13px rgba(0,128,61,0)}
}

/* ---- Nodo ---- */
.lt__nodo{
  position:absolute;top:0;left:-58px;z-index:2;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid var(--linea);color:var(--texto-2);
  transition:border-color .5s ease,background .5s ease,color .5s ease,
             box-shadow .5s ease,transform .55s cubic-bezier(.34,1.4,.64,1)
}
.lt__nodo svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* El icono se dibuja: cada trazo lleva pathLength="100" en el marcado */
.lt__nodo svg > *{
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .85s cubic-bezier(.55,0,.45,1)
}
/* Onda al activarse y anillo punteado de marca */
.lt__nodo::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.lt__nodo::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
  border:1px dashed rgba(200,162,74,.7);opacity:0;
  animation:orbGiro 12s linear infinite;transition:opacity .5s ease
}

/* ---- Conector nodo → tarjeta ---- */
.lt__conector{
  position:absolute;top:20px;left:-14px;width:14px;height:2px;
  background:var(--linea);transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,1,.36,1) .08s,background .5s ease
}

/* ---- Tarjeta ---- */
.lt__tarjeta{
  position:relative;overflow:hidden;
  padding:1.05rem 1.2rem 1.15rem;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r-md);
  box-shadow:0 6px 18px rgba(5,77,42,.05);
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1),
             border-color .5s ease,box-shadow .5s ease
}
.lt__tarjeta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--verde),var(--oro));
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,1,.36,1) .12s
}
.lt__tarjeta .lt__num{
  font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro-txt);margin:0 0 .35rem
}
.lt__tarjeta h3{font-size:1.02rem;line-height:1.3;margin:0 0 .35rem}
.lt__tarjeta p{font-size:.9rem;color:var(--texto-2);line-height:1.6;margin:0}

/* ---- Fase activa ---- */
.lt__fase.is-activo .lt__nodo{
  border-color:transparent;color:#fff;transform:scale(1.08);
  background:linear-gradient(150deg,var(--verde) 0%,var(--verde-prof) 100%);
  box-shadow:0 14px 30px rgba(0,128,61,.26),0 0 0 6px rgba(0,128,61,.09)
}
.lt__fase.is-activo .lt__nodo::before{animation:nodoOnda 2.6s cubic-bezier(.25,.6,.3,1) infinite}
.lt__fase.is-activo .lt__nodo::after{opacity:1}
.lt__fase.is-activo .lt__nodo svg > *{stroke-dashoffset:0}
.lt__fase.is-activo .lt__nodo svg > *:nth-child(2){transition-delay:.16s}
.lt__fase.is-activo .lt__nodo svg > *:nth-child(3){transition-delay:.3s}
.lt__fase.is-activo .lt__nodo svg > *:nth-child(4){transition-delay:.42s}
.lt__fase.is-activo .lt__nodo svg > *:nth-child(5){transition-delay:.54s}
.lt__fase.is-activo .lt__conector{transform:scaleX(1);background:var(--verde)}
.lt__fase.is-activo .lt__tarjeta{
  opacity:1;transform:none;border-color:rgba(0,128,61,.32);
  box-shadow:0 16px 36px rgba(5,77,42,.12)
}
.lt__fase.is-activo .lt__tarjeta::before{transform:scaleX(1)}

/* ================= Escritorio: secuencia horizontal fijada ================ */
@media (min-width:1081px) and (prefers-reduced-motion:no-preference){
  html:not(.no-js) .lt__lienzo{
    position:relative;height:clamp(440px,52vh,545px)
  }
  html:not(.no-js) .lt__fases{
    position:absolute;inset:0;padding:0;
    grid-template-columns:repeat(4,minmax(0,1fr));gap:0
  }
  html:not(.no-js) .lt__pista{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px}
  html:not(.no-js) .lt__conector{background:linear-gradient(180deg,var(--oro),var(--verde))}
  html:not(.no-js) .lt__progreso{
    background:linear-gradient(90deg,var(--oro) 0%,var(--verde) 42%,var(--verde) 100%);
    transform:scaleX(var(--lt-p));transform-origin:left center
  }
  html:not(.no-js) .lt__punto{left:calc(var(--lt-p) * 100%);top:50%}

  html:not(.no-js) .lt__nodo{
    top:50%;left:50%;width:66px;height:66px;margin:-33px 0 0 -33px
  }
  html:not(.no-js) .lt__nodo svg{width:27px;height:27px}
  html:not(.no-js) .lt__fase.is-activo .lt__nodo{transform:scale(1.1)}

  html:not(.no-js) .lt__conector{
    left:50%;width:2px;height:38px;margin-left:-1px;top:auto;
    background:linear-gradient(180deg,var(--oro),var(--verde));
    opacity:.35;transform:scaleY(0)
  }
  html:not(.no-js) .lt__fase--arriba .lt__conector{bottom:calc(50% + 36px);transform-origin:bottom center}
  html:not(.no-js) .lt__fase--abajo .lt__conector{top:calc(50% + 36px);transform-origin:top center}
  html:not(.no-js) .lt__fase.is-activo .lt__conector{transform:scaleY(1);opacity:1}

  html:not(.no-js) .lt__tarjeta{
    position:absolute;left:50%;width:min(290px,calc(100% - 1.6rem));
    transform:translateX(-50%) translateY(var(--lt-off))
  }
  html:not(.no-js) .lt__fase--arriba .lt__tarjeta{--lt-off:16px;bottom:calc(50% + 76px)}
  html:not(.no-js) .lt__fase--abajo .lt__tarjeta{--lt-off:-16px;top:calc(50% + 76px)}
  html:not(.no-js) .lt__fase.is-activo .lt__tarjeta{transform:translateX(-50%)}
}
/* Sin JavaScript: línea vertical, contenido íntegro y sin estados ocultos */
.no-js .lt__tarjeta{opacity:1;transform:none}
.no-js .lt__tarjeta::before,.no-js .lt__conector{transform:none}
.no-js .lt__progreso{transform:none}
.no-js .lt__nodo svg > *{stroke-dashoffset:0}
.no-js .lt__punto{display:none}

@media (max-width:520px){
  .lt__fases{padding-left:52px}
  .lt__nodo{left:-52px;width:40px;height:40px}
  .lt__nodo svg{width:19px;height:19px}
  .lt__pista{left:19px;top:20px}
  .lt__conector{top:18px;left:-12px;width:12px}
}

/* ============ 31. APLICACIONES: FRANJA COMPACTA DE SECTORES ==============
   Cierra la sección «Qué hacemos». Antes eran siete tarjetas con fotografía
   que competían con las cinco líneas de servicio y repetían imágenes de la
   galería; aquí son accesos, que es su función real. El contenido de cada
   sector sigue íntegro en sectores.html. */
.aplic{
  margin-top:clamp(2rem,1.4rem + 2vw,3.2rem);
  padding-top:clamp(1.5rem,1.1rem + 1.3vw,2.3rem);
  border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem
}
.aplic__tit{
  margin:0;flex:none;display:flex;align-items:center;gap:.7rem;
  font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro-txt)
}
.aplic__tit::after{content:"";width:26px;height:1px;background:var(--oro)}
.aplic__lista{
  display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0;flex:1
}
.aplic__lista li{margin:0}
.aplic__lista a{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem .95rem;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r-pill);
  font-size:.88rem;font-weight:600;color:var(--tinta-2);white-space:nowrap;
  transition:border-color var(--tr),color var(--tr),transform var(--tr),box-shadow var(--tr)
}
.aplic__lista a:hover,.aplic__lista a:focus-visible{
  border-color:var(--verde);color:var(--verde);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(5,77,42,.10)
}
.aplic__lista svg{
  width:17px;height:17px;flex:none;fill:none;stroke:var(--oro-osc);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--tr)
}
.aplic__lista a:hover svg,.aplic__lista a:focus-visible svg{stroke:var(--verde)}
.aplic__otro a{background:none;border-style:dashed;border-color:var(--linea-fuerte);
  color:var(--texto-2)}
.aplic__otro a:hover{border-style:solid}
@media (max-width:520px){
  .aplic__lista a{font-size:.84rem;padding:.5rem .8rem;white-space:normal}
}

/* ============ 32. MOSAICO DE TRABAJOS ====================================
   La tira de cinco miniaturas se sustituye por un mosaico con una pieza
   destacada. Reutiliza .galeria y su visor: solo cambia la rejilla. */
.cab-seccion--fila{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  justify-content:space-between;align-items:flex-end;max-width:none
}
.cab-seccion--fila > div{max-width:640px}
.cab-seccion--fila h2{margin-bottom:.5rem}
.cab-seccion--fila h2:last-child{margin-bottom:0}

.galeria--mosaico{
  grid-template-columns:repeat(5,1fr);
  grid-auto-rows:minmax(0,1fr);
  gap:clamp(.6rem,.4rem + .5vw,1rem)
}
.galeria--mosaico .galeria__it--dest{grid-column:span 2;grid-row:span 2}
.galeria--mosaico .galeria__it--dest img{aspect-ratio:auto;height:100%}
.galeria--mosaico .galeria__it--dest .galeria__pie{
  padding:2.2rem 1.2rem 1.1rem;font-size:1rem
}
@media (max-width:1080px){
  .galeria--mosaico{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .galeria--mosaico{grid-template-columns:repeat(2,1fr)}
  .galeria--mosaico .galeria__it--dest{grid-row:span 1}
  .galeria--mosaico .galeria__it--dest img{aspect-ratio:4/3}
  .galeria--mosaico .galeria__it--dest .galeria__pie{padding:1.6rem .9rem .8rem;font-size:.86rem}
}

/* Enlace al sector dentro del visor de imágenes */
.lbox__ir{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--oro-claro);font-weight:700;font-size:.86rem;white-space:nowrap
}
.lbox__ir::after{
  content:"";width:16px;height:1px;background:currentColor;
  transition:width var(--tr)
}
.lbox__ir:hover{color:#fff}
.lbox__ir:hover::after{width:26px}
.lbox__ir[hidden]{display:none}

/* ------------------------------------------------ 22. MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important
  }
  .reveal{opacity:1!important;transform:none!important}
  .hc--traza{stroke-dashoffset:0}
  .hc-pt{opacity:.8}
  .hero__slide.is-on img{transform:scale(1.03)}
  .hero__num[aria-selected="true"] .hero__num-fill{height:100%;width:100%}
  .wa-flotante::before{display:none}
  .wa-flotante__txt{transform:none!important}
  .orbit__halo{opacity:.75}
  .hero__txt > *{opacity:1!important;transform:none!important}
  .hero__slide.is-on{animation:none;clip-path:none}
  .hero__slide.is-saliendo{animation:none;clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}
  .hero__peel,.hero__barrido{display:none}
  .hero__dato::after{display:none}
  /* Línea temporal: sin secuencia, todas las fases visibles y activas */
  .lt__progreso{transform:none}
  .lt__punto::after{animation:none}
  .lt__nodo::after{animation:none}
  .lt__tarjeta,.lt__tarjeta::before,.lt__conector,.lt__nodo svg > *{
    opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .hero__trama,.hero__registro,.hero__escala i{animation:none}
  .hero__troquel rect{animation:none;stroke-dashoffset:0}
  .hero__corte::before,.hero__corte::after{animation:none;opacity:.8}
  .hero__dot[aria-selected="true"] .hero__dot-fill{width:100%}
  .sector__media img{clip-path:inset(0 0 0 0)!important;transform:none!important}
  .proceso__haz{display:none}
  .proceso__nodo::before{animation:none!important;box-shadow:none}
  .orbit__fondo img{transform:scale(1.2)!important}
  .cat__liner,.cat__peel{transition:none}
}

/* ------------------------------------------------------------ 23. IMPRESIÓN */
@media print{
  .topbar,.cabecera,.wa-flotante,.arriba,.hero__nums,.hero__circulos,.cta,.pie__top{display:none}
  body{color:#000;background:#fff}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
  .faq details{break-inside:avoid}
}

/* ============ 33. FONDO DE MARCA DEL BLOQUE «CÓMO TRABAJAMOS» ============
   Composición de packaging etiquetado con la marca, en marca de agua. La
   fotografía ya viene muy desaturada de origen; aquí solo se coloca a sangre
   y se aclara la banda superior con un velo blanco para que el rótulo, el
   titular y la entradilla mantengan su contraste sobre cualquier zona de la
   imagen. Va en pseudoelementos para no tocar el fondo de las tarjetas. */
.seccion--proceso{position:relative;isolation:isolate;overflow:hidden;background:#fff}
.seccion--proceso::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:image-set(url("../assets/img/fondo-proceso-1448.webp") type("image/webp"),
                             url("../assets/img/fondo-proceso-1448.jpg") type("image/jpeg"));
  background-image:-webkit-image-set(url("../assets/img/fondo-proceso-1448.webp") type("image/webp"),
                                     url("../assets/img/fondo-proceso-1448.jpg") type("image/jpeg"));
  background-position:center;background-size:cover;background-repeat:no-repeat
}
/* Velo: denso arriba —donde va el texto— y casi nulo abajo, para que el
   packaging siga leyéndose detrás de la línea temporal. */
.seccion--proceso::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.62) 30%,
                    rgba(255,255,255,.34) 58%,rgba(255,255,255,.30) 100%),
    radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)
}
@media (max-width:900px){
  .seccion--proceso::before{
    background-image:image-set(url("../assets/img/fondo-proceso-900.webp") type("image/webp"),
                               url("../assets/img/fondo-proceso-900.jpg") type("image/jpeg"));
    background-image:-webkit-image-set(url("../assets/img/fondo-proceso-900.webp") type("image/webp"),
                                       url("../assets/img/fondo-proceso-900.jpg") type("image/jpeg"))
  }
  /* En vertical la marca de agua compite con las tarjetas apiladas */
  .seccion--proceso::after{background:rgba(255,255,255,.62)}
}

/* ============ 34. EJES DE AJUSTE (tarjeta «¿Tu sector no está?») =========
   Tres medidores que se recolocan solos sobre el verde profundo de la
   tarjeta: material, medida y sistema, los tres ejes que el propio texto
   dice que se estudian en cada encargo. Es CSS puro, sin JavaScript. */
.ejes{display:grid;gap:1.05rem;margin-bottom:2rem}
.ejes__fila{display:grid;gap:.5rem}
.ejes__rot{
  font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(227,197,120,.85)
}
.ejes__riel{
  position:relative;display:block;height:2px;border-radius:2px;
  background:rgba(255,255,255,.16)
}
.ejes__relleno{
  position:absolute;inset:0 auto 0 0;border-radius:2px;
  background:linear-gradient(90deg,var(--oro) 0%,var(--oro-claro) 55%,#fff 100%);
  box-shadow:0 0 10px rgba(227,197,120,.5)
}
/* Puntos de escala, repartidos sobre el riel */
.ejes__pts{position:absolute;inset:-2px 0;display:flex;justify-content:space-between}
.ejes__pts i{
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22);
  transform:translateY(-1px)
}
/* Marcador: el rombo que se desplaza hasta la posición elegida */
.ejes__marca{
  position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  background:#fff;border-radius:2px;transform:rotate(45deg);
  box-shadow:0 0 0 3px rgba(0,128,61,.35),0 2px 8px rgba(0,0,0,.45)
}
/* Cada eje se ajusta a un ritmo distinto: se lee como tres decisiones
   independientes, no como una barra de progreso. */
.ejes__fila:nth-child(1) .ejes__relleno{animation:ejeAncho 9s cubic-bezier(.5,0,.3,1) infinite}
.ejes__fila:nth-child(1) .ejes__marca  {animation:ejeMarca 9s cubic-bezier(.5,0,.3,1) infinite}
.ejes__fila:nth-child(2) .ejes__relleno{animation:ejeAncho2 9s cubic-bezier(.5,0,.3,1) infinite .5s}
.ejes__fila:nth-child(2) .ejes__marca  {animation:ejeMarca2 9s cubic-bezier(.5,0,.3,1) infinite .5s}
.ejes__fila:nth-child(3) .ejes__relleno{animation:ejeAncho3 9s cubic-bezier(.5,0,.3,1) infinite 1s}
.ejes__fila:nth-child(3) .ejes__marca  {animation:ejeMarca3 9s cubic-bezier(.5,0,.3,1) infinite 1s}
@keyframes ejeAncho {0%,8%{width:28%}30%,46%{width:64%}68%,84%{width:44%}100%{width:28%}}
@keyframes ejeMarca {0%,8%{left:28%}30%,46%{left:64%}68%,84%{left:44%}100%{left:28%}}
@keyframes ejeAncho2{0%,8%{width:72%}28%,44%{width:38%}66%,82%{width:86%}100%{width:72%}}
@keyframes ejeMarca2{0%,8%{left:72%}28%,44%{left:38%}66%,82%{left:86%}100%{left:72%}}
@keyframes ejeAncho3{0%,8%{width:50%}26%,42%{width:80%}64%,80%{width:34%}100%{width:50%}}
@keyframes ejeMarca3{0%,8%{left:50%}26%,42%{left:80%}64%,80%{left:34%}100%{left:50%}}
@media (prefers-reduced-motion:reduce){
  .ejes__relleno,.ejes__marca{animation:none!important}
  .ejes__fila:nth-child(1) .ejes__relleno{width:44%} .ejes__fila:nth-child(1) .ejes__marca{left:44%}
  .ejes__fila:nth-child(2) .ejes__relleno{width:72%} .ejes__fila:nth-child(2) .ejes__marca{left:72%}
  .ejes__fila:nth-child(3) .ejes__relleno{width:58%} .ejes__fila:nth-child(3) .ejes__marca{left:58%}
}

/* ============ 35. AJUSTES DE REVISIÓN ==================================== */

/* --- 35.1 Número de fase como pegatina troquelada -----------------------
   El rótulo pasa a ser una pegatina con el número en grande: mismo gesto de
   marca que el resto del sitio —esquina despegada y filete de troquel—. */
.lt__tarjeta .lt__num{
  position:relative;display:inline-flex;align-items:baseline;gap:.42rem;
  margin:0 0 .7rem;padding:.42rem .85rem .48rem .7rem;overflow:hidden;
  background:linear-gradient(155deg,#fff 0%,#eff5ed 100%);
  border:1px solid var(--linea);border-radius:var(--r-sm);
  box-shadow:0 3px 8px rgba(5,77,42,.14),inset 0 1px 0 rgba(255,255,255,.95);
  letter-spacing:normal;text-transform:none;color:inherit;font-size:inherit
}
.lt__num .lt__num-r{
  font-size:.58rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro-txt)
}
.lt__num b{
  font-size:1.55rem;font-weight:800;line-height:.95;letter-spacing:-.04em;
  color:var(--verde-prof);font-variant-numeric:tabular-nums
}
.lt__num::after{
  content:"";position:absolute;top:0;right:0;width:13px;height:13px;
  background:linear-gradient(225deg,var(--oro-claro) 0 48%,var(--oro) 48% 100%);
  clip-path:polygon(100% 0,0 0,100% 100%)
}
.lt__fase.is-activo .lt__num{border-color:rgba(0,128,61,.3)}

/* --- 35.2 Fichas de valores como pegatinas ------------------------------ */
.ficha--pegatina{
  border:0;border-radius:14px;
  background:linear-gradient(158deg,#fff 0%,#f6faf5 62%,#eef4ec 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(5,77,42,.07),
             0 12px 28px rgba(5,77,42,.10);
  transition:transform var(--tr),box-shadow var(--tr)
}
/* Filete de troquel, por dentro del canto de la pegatina */
.ficha--pegatina::before{
  content:"";position:absolute;inset:7px;border-radius:9px;pointer-events:none;
  border:1px dashed rgba(0,128,61,.22)
}
/* Esquina que se despega al pasar el ratón */
.ficha--pegatina::after{
  content:"";position:absolute;top:0;right:0;width:0;height:0;pointer-events:none;
  background:linear-gradient(225deg,var(--oro-claro) 0 48%,var(--oro) 48% 100%);
  clip-path:polygon(100% 0,0 0,100% 100%);
  transition:width var(--tr),height var(--tr)
}
.ficha--pegatina:hover,.ficha--pegatina:focus-within{
  border:0;transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 8px rgba(5,77,42,.09),
             0 20px 40px rgba(5,77,42,.16)
}
.ficha--pegatina:hover::after,.ficha--pegatina:focus-within::after{width:38px;height:38px}
@media (prefers-reduced-motion:reduce){
  .ficha--pegatina,.ficha--pegatina::after{transition:none}
}

/* --- 35.3 (corregido en la regla original del bloque 21: el enlace dorado
       del panel oscuro dejaba el texto del botón en dorado sobre dorado) --- */

/* --- 35.4 Bloque de contacto ------------------------------------------- */
/* Las dos columnas a la misma altura */
.dos-col--igual{align-items:stretch}
.dos-col--igual > *{display:flex;flex-direction:column}
.contacto-panel{
  flex:1;padding:clamp(1.4rem,1rem + 1.4vw,2.2rem);
  background:linear-gradient(165deg,#f8fbf7 0%,#f1f6ef 100%);
  border:1px solid var(--linea);border-radius:var(--r-md)
}
.contacto-mapa{flex:1;display:flex;flex-direction:column}
.contacto-mapa .mapa{flex:1;aspect-ratio:auto;min-height:340px}
.contacto-mapa .nota-mapa{margin-top:.8rem}
@media (max-width:900px){
  .contacto-mapa .mapa{aspect-ratio:16/10;min-height:0}
}
/* Cada dato, en su propia tarjeta */
.contacto-datos{display:grid;gap:.65rem;margin:1.5rem 0 0}
.contacto-datos li{
  margin:0;padding:.85rem 1rem;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r-sm);
  transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr)
}
.contacto-datos li:hover{
  border-color:var(--verde);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(5,77,42,.09)
}

/* --- 35.5 Columna destacada del pie ------------------------------------ */
.pie__destacada{
  padding:1.3rem 1.4rem 1.4rem;border-radius:var(--r-md);
  background:linear-gradient(155deg,rgba(200,162,74,.13),rgba(0,128,61,.14));
  border:1px solid rgba(200,162,74,.3)
}
.pie__destacada h2::after{width:100%;background:linear-gradient(90deg,var(--oro),transparent)}
.pie__destacada li{margin-bottom:.15rem}
.pie__destacada a{
  display:block;padding:.4rem 0;color:var(--texto-inv-2);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:color var(--tr),padding-left var(--tr)
}
.pie__destacada li:last-child a{border-bottom:0}
.pie__destacada a:hover{color:var(--oro-claro);padding-left:.4rem}
@media (max-width:620px){.pie__destacada{padding:1.1rem 1.2rem 1.2rem}}

/* --- 35.6 Volver al blog, al pie de cada artículo ----------------------- */
.volver-blog{margin:2.4rem 0 0}
.volver-blog a{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.7rem 1.1rem;border:1px solid var(--linea);border-radius:var(--r-pill);
  font-size:.9rem;font-weight:700;color:var(--tinta-2);background:#fff;
  transition:border-color var(--tr),color var(--tr),transform var(--tr)
}
.volver-blog a:hover{border-color:var(--verde);color:var(--verde);transform:translateX(-3px)}
.volver-blog svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* --- 35.7 «Imprenta» del desplegable, con el logotipo de A. Verde -------
   El nombre corto y el logotipo hacen el trabajo que antes hacía la palabra
   «tradicional»: se ve de qué imprenta se habla sin tener que explicarlo. */
.nav__sub a.nav__sub-marca{
  display:flex;align-items:center;justify-content:space-between;gap:.9rem
}
.nav__sub-marca picture{display:block;flex:none;line-height:0}
.nav__sub-marca img{
  width:auto;opacity:.9;
  transition:opacity var(--tr),transform var(--tr)
}
.nav__sub-marca:hover img,.nav__sub-marca:focus-visible img{opacity:1;transform:scale(1.04)}
@media (max-width:1180px){
  /* En el panel móvil el desplegable es una lista sencilla: el logotipo se
     alinea a la derecha igual, pero un poco más pequeño. */
  .nav__sub-marca img{height:20px}
}
@media (prefers-reduced-motion:reduce){.nav__sub-marca img{transition:none}}

/* --- 35.8 Encuadre de la ficha de bodegas -------------------------------
   «etiquetas-gourmet-bobina» es un montaje vertical (ratio 0,80) dentro de
   una caja 16/10: con el encuadre centrado se perdía la mitad de la foto y no
   se entendía qué se estaba viendo. Subiendo el punto de anclaje entran a la
   vez el rollo de etiquetas y el estuche con la botella y el tarro. La
   fotografía no se deforma: solo cambia por dónde se recorta. */
.sector__media img[src*="etiquetas-gourmet-bobina"]{object-position:center 40%}

/* --- 35.9 Logotipo de A. Verde, a mayor tamaño en el desplegable -------- */
@media (min-width:1181px){.nav__sub{min-width:326px}}
/* Solo la firma: la palabra «Imprenta» ya está en el propio elemento del menú,
   así que el archivo del logotipo se recorta y se deja a mayor tamaño. */
.nav__sub-marca img{height:46px}
@media (max-width:1180px){
  /* En el panel móvil el ancho es el que manda: se limita por ahí y se deja
     que object-fit ajuste, para que la firma nunca se salga ni se deforme. */
  .nav__sub-marca{gap:.6rem}
  .nav__sub-marca picture{min-width:0}
  .nav__sub-marca img{height:38px;max-width:96px;object-fit:contain;object-position:right center}
}

/* ============ 36. MEGA-MENÚ «PRODUCTOS Y SERVICIOS» =========================
   El desplegable dejaba en cinco líneas planas —producto, sector, servicio y
   marca mezclados— un catálogo que en realidad tiene quince familias. Ahora
   son tres grupos rotulados (Etiquetas y vitolas · Envases y embalaje ·
   Servicios) más una tarjeta destacada del sector cárnico, que es
   especialización y no una familia de producto.

   En escritorio el panel se ancla al CONTENEDOR de la cabecera, no al
   elemento del menú: así ocupa exactamente el ancho de la retícula y no puede
   salirse por la derecha sea cual sea la posición del enlace padre. Para eso
   el elemento pasa a position:static y .cabecera__in a position:relative.
   En tableta y móvil no se toca nada del mecanismo: hereda el acordeón
   .is-desplegado que ya existía, solo cambia la disposición interna.       */

.nav__gr{min-width:0}
.nav__mega .nav__gr__tit{
  display:block;margin:0 0 .5rem;padding:0 .8rem .5rem;
  font-size:.73rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--oro-txt);background:transparent;
  border-bottom:1px solid var(--linea);border-radius:0
}
.nav__mega a.nav__gr__tit:hover,
.nav__mega a.nav__gr__tit:focus-visible{color:var(--verde);background:transparent}
.nav__gr ul{margin:0;padding:0;list-style:none}
.nav__mega .nav__gr ul a{padding:.5rem .8rem;font-weight:600;line-height:1.35}

.nav__mega__pie{display:grid;gap:.6rem}
.nav__mega .nav__dest{
  display:flex;align-items:flex-start;gap:.85rem;padding:.85rem 1rem;
  background:var(--gris);border:1px solid var(--linea);border-radius:var(--r-sm);
  color:var(--tinta-2);transition:var(--tr)
}
.nav__mega .nav__dest:hover,.nav__mega .nav__dest:focus-visible{
  border-color:var(--verde);background:#fff;box-shadow:var(--sombra);color:var(--tinta-2)
}
.nav__dest__ico{
  flex:none;width:38px;height:38px;display:grid;place-items:center;
  border-radius:var(--r-sm);background:rgba(0,128,61,.10)
}
.nav__dest__ico svg{
  width:20px;height:20px;stroke:var(--verde);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round
}
.nav__dest b{display:block;font-size:.9rem;color:var(--tinta);line-height:1.35}
.nav__dest small{
  display:block;margin-top:.15rem;font-size:.81rem;line-height:1.5;
  font-weight:400;color:var(--texto-2)
}
.nav__mega .nav__dest[aria-current="page"]{border-color:var(--verde);background:#fff}
.nav__mega .nav__dest[aria-current="page"] b{color:var(--verde)}

.nav__mega .nav__dest--min{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.62rem 1rem;background:transparent;border-style:dashed;
  font-size:.86rem;font-weight:700;color:var(--verde)
}
.nav__mega .nav__dest--min:hover{background:var(--gris);box-shadow:none;color:var(--verde-osc)}
.nav__mega .nav__dest--min::after{content:"→";transition:transform var(--tr)}
.nav__mega .nav__dest--min:hover::after{transform:translateX(4px)}

@media (min-width:1181px){
  .cabecera__in{position:relative}
  .nav__item--mega{position:static}
  .nav__sub.nav__mega{
    top:100%;left:0;right:0;width:auto;min-width:0;z-index:3;
    padding:1.5rem 1.7rem 1.35rem
  }
  .nav__mega__in{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2.2rem;
    padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:1px solid var(--linea)
  }
  .nav__mega__pie{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem}
  .nav__mega .nav__dest--min{white-space:nowrap}
}

@media (max-width:1180px){
  /* Acordeón: los tres grupos se apilan y la tarjeta destacada cierra el
     bloque. Sin el índice de catálogo esta información sería inabarcable en
     una pantalla pequeña; por eso el enlace padre lleva a esa página. */
  .nav__sub.nav__mega{padding:.35rem 0 .7rem .5rem}
  .nav__mega__in{display:block}
  .nav__gr+.nav__gr{margin-top:1rem}
  .nav__mega .nav__gr__tit{padding:.3rem .6rem .4rem;font-size:.69rem}
  .nav__mega .nav__gr ul a{padding:.55rem .6rem}
  .nav__mega__pie{margin-top:1.1rem;gap:.5rem}
  .nav__mega .nav__dest{padding:.7rem .8rem}
}

@media (prefers-reduced-motion:reduce){
  .nav__mega .nav__dest,.nav__mega .nav__dest--min::after{transition:none}
}

/* --- 36.1 Anclajes bajo cabecera fija -----------------------------------
   El mega-menú enlaza directamente a secciones concretas (#adhesivas,
   #cintas…). Con la cabecera sticky, el navegador dejaba el título justo
   debajo del borde inferior de la barra y parecía que el enlace no había
   funcionado. scroll-margin-top reserva ese alto más un respiro.           */
:where(main [id]){scroll-margin-top:calc(var(--h-nav) + 1.25rem)}
@media (max-width:1180px){
  :where(main [id]){scroll-margin-top:calc(var(--h-nav) + .75rem)}
}

/* --- 36.2 Galerías de categoría con pocas fotografías --------------------
   Cinco de las doce familias del portfolio tienen una o dos fotografías, que
   son las que existen. En la rejilla de tres columnas dejaban un hueco a la
   derecha que se leía como una imagen que no ha cargado. Con menos piezas,
   cada una ocupa más ancho y la ficha queda compuesta.                     */
.catgal--1{grid-template-columns:minmax(0,1fr)}
.catgal--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:821px){
  .catgal--1 .catgal__it img{aspect-ratio:16/9}
}
@media (max-width:520px){
  .catgal--2{grid-template-columns:1fr}
}

/* --- 36.3 Fecha y fuente en los artículos del blog -----------------------
   El blog pasa de diez a diecisiete entradas y mezcla artículos técnicos con
   casos de cliente. Con ese volumen la fecha deja de ser un adorno: es lo que
   permite saber si lo que se está leyendo sigue vigente. Se muestra en la
   ficha y en la tarjeta del índice.

   La línea de fuente cierra los casos de cliente: los datos corporativos y
   las fotografías proceden de la web de cada marca y eso debe poder leerse.  */
.art__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  margin:0 0 1.4rem;font-size:.85rem;color:var(--texto-2)
}
.art__meta .post__cat{margin-bottom:0}
.art__fuente{
  margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--linea);
  font-size:.82rem;color:var(--texto-2);line-height:1.6
}
.post__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-size:.78rem;color:var(--texto-2);margin:0 0 .5rem
}
.post__meta .post__cat{margin-bottom:0}

/* --- 36.4 Encuadre de las tres diapositivas nuevas del hero ---------------
   Las tres fotografías nuevas son panorámicas (16:9) y el contenedor del hero
   es casi vertical, así que object-fit:cover recorta mucho por los lados. Se
   fija el punto de anclaje para que el recorte sea deliberado y no dependa del
   ancho de la ventana:

   · nave: se ancla ligeramente a la izquierda para que el rótulo de Etiquetas
     Extremadura entre entero y siga viéndose la nave al fondo.
   · etiquetas y alimentación: son bodegones repartidos por todo el encuadre;
     el centro es el punto que conserva más piezas reconocibles.            */
.hero__slide--nave img{object-position:44% center}
.hero__slide--etiquetas img{object-position:center 48%}
.hero__slide--alimentacion img{object-position:center 46%}

/* .hero__slide--planta ya no existe en la portada: la vista de planta es la
   mitad derecha de la fotografía nueva de la nave. Su regla se mantiene por si
   la diapositiva se recupera. */

/* ==================== 37. OPINIONES DE GOOGLE ==============================
   Cada reseña se compone como una etiqueta adhesiva pegada sobre el liner:
   fondo de papel soporte con su trama, la pieza blanca ligeramente girada y la
   esquina superior derecha que se levanta al acercarse, con el mismo lenguaje
   que las tarjetas de categoría (§ 25).

   Sin marcado Review/AggregateRating: Google excluye explícitamente de los
   resultados enriquecidos las reseñas autoservidas sobre la propia entidad, de
   modo que el marcado no generaría estrellas y sí expondría a una acción
   manual. La prueba social se sostiene aquí con el enlace al perfil real. */
.opiniones{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--gris);
  padding:clamp(2.8rem,2rem + 3vw,4.6rem) 0 clamp(3.2rem,2.4rem + 3vw,5rem);
  border-top:1px solid var(--linea)
}
.opiniones::before{
  /* trama del papel soporte: siliconado con su cuadrícula tenue */
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 90% at 88% 0%,rgba(0,128,61,.09),transparent 60%),
    radial-gradient(60% 80% at 0% 100%,rgba(200,162,74,.12),transparent 62%),
    repeating-linear-gradient(90deg,rgba(17,18,20,.032) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(0deg,rgba(17,18,20,.032) 0 1px,transparent 1px 34px)
}
.opiniones__cab{max-width:62ch;margin-bottom:clamp(1.8rem,1.4rem + 1.2vw,2.6rem)}
.opiniones__marca{
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.7rem;
  padding:.36rem .9rem .36rem .55rem;background:#fff;border:1px solid var(--linea);
  border-radius:var(--r-pill);box-shadow:0 2px 10px rgba(17,18,20,.06);
  font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-2)
}
.opiniones__marca svg{width:19px;height:19px;flex:none}
.opiniones__cab h2{margin-bottom:.5rem}
.opiniones__dato{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .75rem;
  margin-bottom:0;color:var(--texto-2);font-size:.95rem
}
.opiniones__nota{
  font-size:1.42rem;letter-spacing:.1em;color:var(--oro-txt);line-height:1
}
.opiniones__cifra{font-weight:800;color:var(--tinta);font-size:1.05rem}

/* La rejilla: la reseña más completa ocupa dos columnas para que la primera
   fila no quede coja y las cinco piezas cierren dos filas exactas. */
.opiniones__lista{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,.7rem + 1vw,1.6rem)
}
.opiniones__lista .opinion:first-child{grid-column:span 2}
@media (max-width:1000px){
  .opiniones__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .opiniones__lista{grid-template-columns:minmax(0,1fr)}
  .opiniones__lista .opinion:first-child{grid-column:auto}
}

.opinion{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  gap:.85rem;padding:1.5rem 1.5rem 1.35rem;background:#fff;
  border-radius:var(--r-md);box-shadow:0 12px 30px rgba(17,18,20,.09);
  transition:transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s cubic-bezier(.22,1,.36,1)
}
/* Giro alterno: pegadas a mano, no maquetadas. La animación de entrada va en
   .opiniones__lista y no en cada tarjeta, porque .reveal.is-in impone
   transform:none y anularía el giro. */
.opinion:nth-child(4n+1){transform:rotate(-.7deg)}
.opinion:nth-child(4n+2){transform:rotate(.55deg)}
.opinion:nth-child(4n+3){transform:rotate(.8deg)}
.opinion:nth-child(4n+4){transform:rotate(-.45deg)}
.opinion:hover,.opinion:focus-within{
  transform:rotate(0) translateY(-5px);box-shadow:var(--sombra-lg);z-index:2
}
/* Línea de troquel: el corte por el que la etiqueta se separa del liner. */
.opinion::after{
  content:"";position:absolute;inset:9px;z-index:0;pointer-events:none;
  border:1px dashed rgba(17,18,20,.13);border-radius:calc(var(--r-md) - 5px)
}
/* Reseñas breves: cuerpo mayor para que la pieza no quede medio vacía. */
.opinion--corta .opinion__cuerpo p{font-size:1.16rem;line-height:1.5;color:var(--tinta-2)}
.opinion__liner,.opinion__peel{
  position:absolute;top:0;right:0;width:24px;height:24px;
  transition:width .55s cubic-bezier(.22,1,.36,1),height .55s cubic-bezier(.22,1,.36,1)
}
.opinion__liner{
  z-index:1;border-top-right-radius:var(--r-md);
  background:linear-gradient(135deg,var(--verde-prof),var(--negro));
  clip-path:polygon(100% 0,0 0,100% 100%)
}
.opinion__peel{
  z-index:2;
  background:linear-gradient(135deg,#fdfdfb 0%,#eceee8 34%,#d5d9d0 66%,#b7bcb2 100%);
  clip-path:polygon(0 0,0 100%,100% 100%);
  filter:drop-shadow(-6px 6px 9px rgba(0,0,0,.28))
}
.opinion:hover .opinion__liner,.opinion:focus-within .opinion__liner,
.opinion:hover .opinion__peel,.opinion:focus-within .opinion__peel{width:62px;height:62px}

.opinion__estrellas{
  position:relative;z-index:1;margin:0;font-size:1.05rem;letter-spacing:.14em;
  color:var(--oro-txt);line-height:1
}
.opinion__cuerpo{position:relative;z-index:1;margin:0;padding:0;border:0}
.opinion__tit{
  display:block;margin-bottom:.3rem;font-size:1.02rem;font-weight:700;
  color:var(--tinta);line-height:1.35
}
.opinion__cuerpo p{margin:0;color:var(--texto);font-size:.97rem;line-height:1.68}
.opinion__cuerpo p::before{content:"«"}
.opinion__cuerpo p::after{content:"»"}
.opinion__pie{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:.9rem;
  border-top:1px dashed var(--linea-fuerte)
}
.opinion__inicial{
  flex:none;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:linear-gradient(140deg,var(--verde),var(--verde-prof));
  color:#fff;font-weight:800;font-size:1rem;letter-spacing:.02em
}
.opinion__quien b{display:block;font-size:.93rem;color:var(--tinta);line-height:1.3}
.opinion__quien small{display:block;font-size:.78rem;color:var(--texto-2)}

.opiniones__pie{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:1rem 1.6rem;margin-top:clamp(1.6rem,1.2rem + 1vw,2.4rem)
}
.opiniones__aviso{margin:0;font-size:.84rem;color:var(--texto-2);max-width:62ch}

@media (prefers-reduced-motion:reduce){
  .opinion,.opinion__liner,.opinion__peel{transition:none}
  .opinion{transform:none!important}
}

/* --- 37.1 Cabecera: la franja de portátil ---------------------------------
   Entre 1181 y 1400 px el menú completo, el logotipo y el botón no caben a su
   tamaño natural dentro del contenedor de 1300 px. Antes de esta regla el
   conjunto desbordaba —el body lo recortaba con overflow-x:clip y el botón se
   iba por el borde derecho—; ahora se compacta el interlineado horizontal del
   menú en esa franja en lugar de perder ninguna de las tres piezas. */
@media (min-width:1181px) and (max-width:1400px){
  .cabecera__in{gap:.7rem}
  .marca img{height:60px}
  .nav__enlace{padding:.7rem .46rem;font-size:.845rem}
  .nav__enlace::after{left:.46rem;right:.46rem}
  .cabecera__acciones .btn{padding:.6rem .8rem;font-size:.84rem}
}
@media (min-width:1181px) and (max-width:1259px){
  .marca img{height:54px}
  .nav__enlace{padding:.7rem .38rem;font-size:.82rem}
  .nav__enlace::after{left:.38rem;right:.38rem}
}

/* --- 37.2 Encuadre de la diapositiva de planta -----------------------------
   La séptima diapositiva es una composición de cuatro vistas separadas por
   cortes ondulados: recortarla por un lado partiría uno de los paneles. Se
   ancla al centro para que el corte reparta por igual a izquierda y derecha y
   la vista central —la nave de impresión— quede siempre completa. */
.hero__slide--planta-interior img{object-position:center center}
/* Fotografía en 3:2 dentro de un marco 16/9: el recorte se lleva algo de la
   franja superior e inferior, así que se sube ligeramente el encuadre para no
   comerse las etiquetas de la fila de arriba. */
.hero__slide--etiquetas-ibericos img{object-position:center 42%}

/* Con 8 puntos de avance, la fila no cabe en la columna de texto entre 1081 y
   1280 px: se estrecha el punto inactivo y el hueco para mantenerla en una sola
   línea sin bajar del mínimo de 24 px de área táctil (WCAG 2.5.8). */
@media (min-width:1081px) and (max-width:1280px){
  .hero__dots{gap:.4rem}
  .hero__dot{min-width:32px}
  .hero__dot-track{width:clamp(20px,2.6vw,32px)}
}

/* ============ 38. REORGANIZACIÓN EDITORIAL (15 de agosto de 2026) ==========
   La portada explicaba la actividad tres veces con clasificaciones distintas
   —«Qué hacemos» (5 líneas), el bloque orbital (6 accesos) y la franja de
   imprenta—. Aquí quedan los componentes de la estructura única:

     Productos y soluciones : etiquetas y vitolas · envases y embalaje ·
                              impresoras, rollos y consumibles
     Servicios complementarios : diseño y preparación de archivos ·
                                 Imprenta A. Verde
     Especialización sectorial : sector cárnico + acceso al resto

   No se ha tocado ningún token de color, ninguna tipografía ni ninguna de
   las animaciones existentes: los bloques nuevos reutilizan el lenguaje ya
   definido (peel de esquina, filete dorado, chips, franja oscura).        */

/* --- 38.1 Franja de confianza: de cuatro fases a tres argumentos ---------
   El componente y su animación son los mismos (§ 24); solo cambia el número
   de columnas. El relleno inicial se declara aquí para que la línea no
   aparezca a 1/8 antes de que main.js calcule 1/6.                        */
.proceso--3 .proceso__pasos{grid-template-columns:repeat(3,1fr)}
.proceso--3 .proceso__relleno{width:16.666%}
@media (max-width:860px){
  .proceso--3 .proceso__pasos{grid-template-columns:repeat(3,1fr);gap:1rem .7rem}
  .proceso--3 .proceso__linea{display:none}
  .proceso--3 .proceso__nodo{width:56px;height:56px;margin-bottom:.7rem}
  .proceso--3 .proceso__nodo svg{width:22px;height:22px}
  .proceso--3 .proceso__paso{padding:0 .2rem}
  .proceso--3 .proceso__paso b{font-size:.92rem}
  .proceso--3 .proceso__paso span{font-size:.8rem}
}
@media (max-width:560px){
  .proceso--3 .proceso__pasos{grid-template-columns:1fr;gap:1.5rem}
}

/* --- 38.2 Servicios complementarios --------------------------------------
   Menor peso visual que las tres actividades principales: sin fotografía,
   sobre gris, en dos columnas y con el cuerpo de texto un punto por debajo.
   El logotipo de A. Verde hace de icono en su ficha, para que la marca se
   reconozca sin abrir la página.                                          */
.compl{
  display:grid;gap:clamp(1rem,.8rem + .6vw,1.4rem);
  padding:clamp(1.3rem,1rem + 1.2vw,2.1rem);
  background:var(--gris);border:1px solid var(--linea);border-radius:var(--r-md)
}
.compl__rot{
  margin:0;display:flex;align-items:center;gap:.75rem;
  font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro-txt)
}
.compl__rot::after{content:"";height:1px;flex:1;background:var(--linea)}
.compl__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.7rem,.5rem + .5vw,1rem)}
.compl__it{
  display:flex;align-items:flex-start;gap:1rem;
  padding:clamp(1rem,.85rem + .5vw,1.25rem);
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-sm);
  color:var(--tinta-2);
  transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr)
}
.compl__it:hover,.compl__it:focus-visible{
  border-color:var(--verde);box-shadow:var(--sombra);transform:translateY(-2px);color:var(--tinta-2)
}
.compl__ico{
  flex:none;width:44px;height:44px;display:grid;place-items:center;
  border-radius:var(--r-sm);background:rgba(0,128,61,.10)
}
.compl__ico svg{
  width:22px;height:22px;stroke:var(--verde);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round
}
.compl__ico--marca{
  width:auto;min-width:44px;height:44px;padding:.3rem .55rem;
  background:#fff;border:1px solid var(--linea)
}
.compl__ico--marca img{width:auto;height:24px;display:block}
.compl__txt{display:block;min-width:0}
.compl__txt b{display:block;font-size:1rem;color:var(--tinta);line-height:1.35}
.compl__txt small{display:block;margin-top:.3rem;font-size:.88rem;line-height:1.6;color:var(--texto-2)}
.compl__ir{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.65rem;
  font-size:.85rem;font-weight:700;color:var(--verde)
}
.compl__ir::after{content:"→";transition:transform var(--tr)}
.compl__it:hover .compl__ir::after,.compl__it:focus-visible .compl__ir::after{transform:translateX(4px)}
@media (max-width:820px){.compl__grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .compl__it,.compl__ir::after{transition:none}
}

/* --- 38.3 Accesos a sectores fuera de la sección de productos ------------ */
.aplic--suelto{margin-top:0;padding-top:0;border-top:0}

/* --- 38.4 Ámbito geográfico dentro del bloque de empresa ------------------
   Mismos chips que la franja oscura (§ 12), en versión sobre fondo claro:
   la fabricación propia y la cobertura dejan de estar en dos sitios.      */
.zonas{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 0;padding:0;list-style:none}
.zonas li{
  margin:0;padding:.32rem .85rem;background:#fff;
  border:1px solid var(--linea-fuerte);border-radius:var(--r-pill);
  font-size:.82rem;font-weight:600;color:var(--texto-2)
}

/* --- 38.5 Mega-menú: dos grupos rotulados + especialización --------------- */
.nav__mega__rot{
  margin:0 0 .9rem;display:flex;align-items:center;gap:.75rem;
  font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro-txt)
}
.nav__mega__rot::after{content:"";height:1px;flex:1;background:var(--linea)}
.nav__compl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:1.25rem}
.nav__sub .nav__compl a{
  display:flex;align-items:center;gap:.9rem;padding:.62rem .85rem;
  background:var(--gris);border:1px solid var(--linea);border-radius:var(--r-sm);
  font-size:.88rem;font-weight:600;color:var(--tinta-2)
}
.nav__sub .nav__compl a:hover,
.nav__sub .nav__compl a:focus-visible,
.nav__sub .nav__compl a[aria-current="page"]{
  border-color:var(--verde);background:#fff;color:var(--verde)
}
/* La firma de A. Verde iba pegada al borde derecho de una ficha que ocupa
   media columna del panel: entre el rótulo y el logotipo quedaba un vacío de
   más de 200 px que rompía la lectura. Ahora el logotipo va justo detrás. */
.nav__sub .nav__compl a.nav__sub-marca{justify-content:flex-start;gap:.5rem}
.nav__compl .nav__sub-marca img{height:26px}
@media (max-width:1180px){.nav__compl .nav__sub-marca img{height:22px}}
@media (max-width:1180px){
  .nav__mega__rot{margin:.7rem .6rem .5rem;font-size:.64rem}
  .nav__compl{grid-template-columns:1fr;gap:.35rem;margin-bottom:.9rem}
}

/* --- 38.6 Pie: la misma clasificación que el menú ------------------------ */
.pie__rot{
  margin:1.15rem 0 .35rem;font-size:.67rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro)
}
.pie__destacada .pie__rot:first-of-type{margin-top:0}

/* --- 38.7 Opiniones de la portada: rollo horizontal paginado -------------
   Las reseñas se leen como una tira de etiquetas que se desenrolla sobre el
   liner: el carril lleva la trama del papel soporte y el troquelado punteado
   arriba y abajo, y cada reseña conserva el giro y la esquina despegada de
   § 37. Cuatro por página en escritorio, tres en tableta, dos en móvil grande
   y una en móvil.

   El desplazamiento nativo (scroll + scroll-snap) es lo que hace el trabajo.
   Las flechas laterales y las barras de página son un añadido del módulo 15
   de main.js: sin JavaScript no aparecen y la tira sigue siendo desplazable
   con el dedo, la rueda y el teclado.                                      */
.opiniones--rollo .opiniones__cab{margin-bottom:0}
.rollo{
  --rollo-gap:clamp(.7rem,.5rem + .5vw,1.1rem);
  --rollo-n:4;
  margin:clamp(1.2rem,.9rem + 1vw,1.8rem) 0 clamp(1.1rem,.9rem + .8vw,1.6rem)
}
@media (max-width:1180px){.rollo{--rollo-n:3}}
@media (max-width:820px){.rollo{--rollo-n:2}}
@media (max-width:560px){.rollo{--rollo-n:1}}

.rollo__marco{position:relative}
/* Difuminado en los bordes: las flechas se apoyan sobre él y la tira se
   corta con intención en lugar de quedar cercenada. */
.rollo__marco::before,.rollo__marco::after{
  content:"";position:absolute;top:1px;bottom:1px;width:clamp(30px,6vw,76px);
  z-index:2;pointer-events:none;opacity:0;transition:opacity var(--tr)
}
.rollo__marco::before{left:0;background:linear-gradient(90deg,#f4f5f1 12%,rgba(244,245,241,0))}
.rollo__marco::after{right:0;background:linear-gradient(270deg,#f4f5f1 12%,rgba(244,245,241,0))}
.rollo.tiene-ant .rollo__marco::before,
.rollo.tiene-sig .rollo__marco::after{opacity:1}

.rollo__btn{
  display:none;position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:46px;height:46px;place-items:center;
  background:#fff;border:1px solid var(--linea-fuerte);border-radius:50%;
  cursor:pointer;color:var(--tinta-2);box-shadow:0 6px 20px rgba(17,18,20,.14);
  transition:border-color var(--tr),color var(--tr),box-shadow var(--tr),opacity var(--tr)
}
.rollo.is-listo .rollo__btn{display:grid}
.rollo__btn--ant{left:clamp(.4rem,1.2vw,1rem)}
.rollo__btn--sig{right:clamp(.4rem,1.2vw,1rem)}
.rollo__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.rollo__btn:hover:not(:disabled){
  border-color:var(--verde);color:var(--verde);box-shadow:0 10px 26px rgba(5,77,42,.22)
}
.rollo__btn:disabled{opacity:0;pointer-events:none}

.rollo__vista{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* El ajuste tiene que contar con el sangrado de la tira: si no, al cargar
     el navegador desplaza 33 px para pegar la primera reseña al borde y la
     flecha «anterior» se queda activa sin haber nada detrás. */
  scroll-padding-inline-start:max(1.25rem,calc((100vw - var(--contenedor)) / 2));
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-block:1.4rem 1rem;cursor:grab;
  border-top:1px dashed rgba(17,18,20,.20);
  border-bottom:1px dashed rgba(17,18,20,.20);
  background:
    linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 26%),
    repeating-linear-gradient(90deg,rgba(17,18,20,.045) 0 1px,transparent 1px 26px),
    linear-gradient(180deg,#f8f9f6,#e9ebe5)
}
.rollo__vista::-webkit-scrollbar{width:0;height:0;display:none}
.rollo__vista:focus-visible{outline:3px solid var(--oro);outline-offset:-3px}
.rollo__vista.is-arrastrando{
  cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none
}
/* Altura natural, no estirada: las reseñas quedan pegadas al liner a
   distintas alturas, como las etiquetas del resto del bloque, y las
   breves no arrastran el hueco en blanco de la más larga. */
.rollo__tira{
  display:flex;align-items:flex-start;gap:var(--rollo-gap);width:max-content;
  padding-inline-start:max(1.25rem,calc((100vw - var(--contenedor)) / 2));
  padding-inline-end:1.5rem
}
/* El ancho se calcula para que entren exactamente --rollo-n reseñas dentro
   del contenedor, sin recurrir a porcentajes del viewport. */
.rollo__tira .opinion{
  flex:none;scroll-snap-align:start;margin:0;
  width:calc((min(100vw - 2.5rem,var(--contenedor)) - (var(--rollo-n) - 1) * var(--rollo-gap)) / var(--rollo-n))
}
/* Reseñas más pequeñas: cuatro por página piden menos aire y menos cuerpo. */
.rollo .opinion{gap:.6rem;padding:1.1rem 1.15rem 1rem;box-shadow:0 8px 22px rgba(17,18,20,.08)}
.rollo .opinion::after{inset:7px}
.rollo .opinion__estrellas{font-size:.92rem;letter-spacing:.12em}
.rollo .opinion__tit{font-size:.94rem;margin-bottom:.25rem}
.rollo .opinion__cuerpo p{font-size:.87rem;line-height:1.6}
.rollo .opinion__pie{gap:.55rem;padding-top:.7rem}
.rollo .opinion__inicial{width:32px;height:32px;font-size:.88rem}
.rollo .opinion__quien b{font-size:.86rem}
.rollo .opinion__quien small{font-size:.73rem}
.rollo .opinion__liner,.rollo .opinion__peel{width:20px;height:20px}
.rollo .opinion:hover .opinion__liner,.rollo .opinion:focus-within .opinion__liner,
.rollo .opinion:hover .opinion__peel,.rollo .opinion:focus-within .opinion__peel{width:50px;height:50px}

/* --- Paginador: barras con los tres colores del logotipo -----------------
   Verde del isotipo → negro de la barra superior → dorado del acento. La
   barra activa se alarga y el degradado entra barriéndola de izquierda a
   derecha, como la tinta que cubre el soporte. Al pulsar, una onda sale del
   punto exacto del clic y el filete dorado destella. */
/* --- Indicador: un segmento por reseña y una ventana que se desliza -------
   No es un paginador con páginas fijas: la ventana cubre exactamente las
   reseñas visibles y se mueve con el scroll. Con cinco reseñas ocupa cuatro
   quintos de la pista; con cincuenta, una décima parte. Los segmentos se
   reparten el ancho disponible (flex:1), así que el componente aguanta que
   el perfil de Google siga creciendo sin rediseñarlo.

   El relleno lleva los tres colores del logotipo: verde del isotipo, negro
   de la barra superior y dorado del acento.                               */
.rollo__pag{
  display:flex;justify-content:center;
  margin-top:clamp(.5rem,.3rem + .5vw,.9rem)
}
.rollo__pista{
  position:relative;display:flex;align-items:center;gap:5px;
  width:min(100%,clamp(200px,42vw,460px))
}
/* El botón es solo área de pulsación —44 px de alto, como el resto de
   controles del sitio—; la barra visible es el <span> de dentro. */
.rollo__pista button{
  --x:50%;
  flex:1 1 0;min-width:0;position:relative;display:grid;place-items:center;
  height:44px;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--r-pill)
}
.rollo__pista button > span{
  position:relative;display:block;width:100%;height:8px;
  border-radius:var(--r-pill);background:var(--linea-fuerte);
  overflow:hidden;isolation:isolate;
  transition:background-color .35s ease,box-shadow .4s ease
}
.rollo__pista button:hover > span{background:#b2b9af}
/* Onda que sale del punto exacto donde se ha pulsado */
.rollo__pista button > span::after{
  content:"";position:absolute;top:50%;left:var(--x);
  width:10px;height:10px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) scale(0);opacity:0;
  background:radial-gradient(circle,
    rgba(255,255,255,.95) 0%,rgba(227,197,120,.8) 42%,rgba(227,197,120,0) 72%)
}
.rollo__pista button.is-pulsado > span{box-shadow:0 0 0 4px rgba(200,162,74,.32)}
.rollo__pista button.is-pulsado > span::after{animation:pagOnda .62s cubic-bezier(.22,1,.36,1)}
@keyframes pagOnda{
  0%{transform:translate(-50%,-50%) scale(0);opacity:1}
  100%{transform:translate(-50%,-50%) scale(14);opacity:0}
}
.rollo__pista button:focus-visible{outline:2px solid var(--oro);outline-offset:2px}

/* Raíl continuo cuando hay tantas reseñas que cada segmento bajaría del
   área táctil mínima: se pierde la pulsación, no la orientación. */
.rollo__pista.is-fino{gap:0}
.rollo__pista.is-fino button{pointer-events:none;cursor:default}
.rollo__pista.is-fino button > span{border-radius:0;background:var(--linea)}
.rollo__pista.is-fino button:first-of-type > span{border-radius:var(--r-pill) 0 0 var(--r-pill)}
.rollo__pista.is-fino button:last-of-type > span{border-radius:0 var(--r-pill) var(--r-pill) 0}

.rollo__ventana{
  position:absolute;top:50%;left:0;z-index:2;height:8px;width:0;
  border-radius:var(--r-pill);pointer-events:none;
  transform:translate(0,-50%);
  background:linear-gradient(90deg,
    var(--verde) 0%,var(--verde-osc) 18%,var(--verde-prof) 32%,
    var(--negro) 54%,var(--negro-2) 63%,
    var(--oro-osc) 84%,var(--oro) 100%);
  box-shadow:0 2px 10px rgba(5,77,42,.30);
  transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1)
}
.rollo__vista.is-arrastrando ~ .rollo__pag .rollo__ventana{transition:none}

@media (max-width:560px){
  .rollo__tira{padding-inline-start:.875rem;padding-inline-end:.875rem}
  .rollo__vista{scroll-padding-inline-start:.875rem}
  .rollo__btn{width:40px;height:40px}
  .rollo__btn svg{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){
  .rollo__vista{scroll-behavior:auto}
  .rollo__btn,.rollo__pista button > span,.rollo__ventana,
  .rollo__marco::before,.rollo__marco::after{transition:none}
  .rollo__pista button.is-pulsado > span::after{animation:none}
}

/* --- 38.8 Opiniones en páginas interiores: franja compacta ---------------
   Las cinco reseñas completas repetidas en 31 páginas alargaban todas las
   interiores sin aportar nada nuevo. Queda la prueba social —valoración,
   número de reseñas y acceso al perfil— y las reseñas se leen donde están
   publicadas.                                                             */
.op-franja{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:.9rem 1.6rem;
  padding:clamp(1rem,.85rem + .6vw,1.45rem) clamp(1.1rem,.9rem + .8vw,1.7rem);
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-md);
  box-shadow:0 8px 24px rgba(17,18,20,.05)
}
.op-franja__dato{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .8rem;margin:0}
.op-franja__dato svg{width:22px;height:22px;flex:none}
.op-franja__nota{font-size:1.3rem;letter-spacing:.1em;color:var(--oro-txt);line-height:1}
.op-franja__cifra{font-weight:800;color:var(--tinta);font-size:1.02rem}
.op-franja__n{color:var(--texto-2);font-size:.92rem}
@media (max-width:620px){
  .op-franja{flex-direction:column;align-items:flex-start}
  .op-franja .btn{width:100%;justify-content:center}
}
.op-franja__cab{font-weight:700;color:var(--tinta-2);font-size:.92rem}

/* --- 38.9 Fichas de catálogo: qué es · para qué · qué dato hace falta -----
   Cada tarjeta del catálogo cierra con el dato que el cliente tiene que
   aportar. Es la información que convierte una consulta en un presupuesto y
   la que evita el ida y vuelta de correos.                                */
.tarjeta__dato{
  margin:0 0 1.1rem;padding-top:.6rem;border-top:1px dashed var(--linea);
  font-size:.85rem;line-height:1.55;color:var(--texto-2)
}
.tarjeta__dato b{color:var(--tinta-2);font-weight:700}
.panel__rot{
  margin:1.1rem 0 .4rem;font-size:.68rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro-txt)
}
.panel__rot:first-of-type{margin-top:.2rem}

/* --- 38.10 Acceso al resto de sectores dentro de la franja cárnica -------
   El sector cárnico y el acceso a los demás sectores son un solo bloque:
   así se lee como especialización + resto, y no como dos secciones que
   vuelven a clasificar la actividad.                                      */
.territorio__rot{
  margin:1.6rem 0 .5rem;font-size:.68rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro-claro)
}
.territorio__pie{
  grid-column:1 / -1;margin-top:.4rem;padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.18)
}
.territorio__rot{margin-top:0}
.territorio__zonas--enlaces{margin-top:0}
.territorio__zonas--enlaces li{padding:0}
.territorio__zonas--enlaces a{
  display:inline-flex;align-items:center;gap:.45rem;padding:.32rem .85rem;
  color:var(--texto-inv-2);border-radius:var(--r-pill);
  transition:background var(--tr),color var(--tr),border-color var(--tr)
}
.territorio__zonas--enlaces a:hover,.territorio__zonas--enlaces a:focus-visible{
  background:rgba(255,255,255,.12);color:#fff
}
.territorio__zonas--enlaces svg{
  width:16px;height:16px;flex:none;fill:none;stroke:var(--oro-claro);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round
}
@media (prefers-reduced-motion:reduce){.territorio__zonas--enlaces a{transition:none}}

/* --- 38.11 Rollo de opiniones: altura contenida --------------------------
   La portada tenía que quedar sensiblemente más corta; este bloque pasa de
   cinco reseñas apiladas a tres en una sola fila desplazable.             */
.opiniones--rollo{
  padding:clamp(2.4rem,1.8rem + 2vw,3.6rem) 0 clamp(2.2rem,1.7rem + 1.8vw,3.2rem)
}
.opiniones--rollo .opiniones__pie{margin-top:clamp(1rem,.8rem + .6vw,1.5rem)}

/* Si todas las reseñas caben, no hay nada que paginar. */
.rollo.is-completo .rollo__btn,
.rollo.is-completo .rollo__pag{display:none}

/* --- 38.12 Botón de reseñas de Google ------------------------------------
   Era un botón de línea gris indistinguible de un enlace secundario, en un
   bloque cuyo único objetivo es que se pulse. Ahora lleva el logotipo de
   Google delante y peso de botón: blanco con canto marcado en las páginas
   interiores, verde de marca en la llamada de la portada.

   No se indica el número de reseñas en ninguno de los dos: el perfil está
   creciendo y una cifra escrita a mano queda desfasada a los pocos días. */
.btn--google{
  display:inline-flex;align-items:center;gap:.6rem;
  background:#fff;color:var(--tinta);border:1px solid var(--linea-fuerte);
  box-shadow:0 2px 10px rgba(17,18,20,.08)
}
.btn--google svg{width:18px;height:18px;flex:none}
.btn--google:hover,.btn--google:focus-visible{
  border-color:var(--verde);color:var(--verde-osc);
  box-shadow:0 10px 24px rgba(5,77,42,.16);transform:translateY(-1px)
}
.btn--google-fuerte{
  background:var(--verde);color:#fff;border-color:var(--verde);
  box-shadow:0 10px 26px rgba(5,77,42,.24)
}
.btn--google-fuerte:hover,.btn--google-fuerte:focus-visible{
  background:var(--verde-osc);border-color:var(--verde-osc);color:#fff
}
.btn--google-fuerte svg{
  width:22px;height:22px;padding:2px;background:#fff;border-radius:50%
}
@media (prefers-reduced-motion:reduce){.btn--google:hover{transform:none}}

/* ============ 39. AJUSTES DEL 15 DE AGOSTO (segunda tanda) ================ */

/* --- 39.1 El pliegue del isotipo en el botón principal --------------------
   El logotipo es una «E» con la esquina superior derecha despegada. El botón
   de acción principal repite ese gesto: un triángulo dorado plegado sobre la
   esquina, con el dorso del papel y su sombra, que se levanta al acercarse.
   Es el mismo lenguaje de las tarjetas (§ 25) y del hero, aplicado al
   elemento que más se pulsa.                                              */
.btn--principal{position:relative;overflow:hidden;isolation:isolate}
.btn--principal::before,.btn--principal::after{
  content:"";position:absolute;top:0;right:0;width:14px;height:14px;
  pointer-events:none;
  transition:width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1)
}
/* hueco que deja la esquina levantada */
.btn--principal::before{
  z-index:1;background:linear-gradient(135deg,var(--verde-prof),var(--negro));
  clip-path:polygon(100% 0,0 0,100% 100%)
}
/* dorso del papel doblado, en dorado */
.btn--principal::after{
  z-index:2;
  background:linear-gradient(135deg,var(--oro-claro) 0%,var(--oro) 42%,var(--oro-osc) 100%);
  clip-path:polygon(0 0,0 100%,100% 100%);
  filter:drop-shadow(-3px 3px 5px rgba(0,0,0,.42))
}
.btn--principal:hover::before,.btn--principal:focus-visible::before,
.btn--principal:hover::after,.btn--principal:focus-visible::after{width:22px;height:22px}
/* El pliegue es un triángulo que se ensancha hacia abajo: justo a la altura
   del texto es donde más invade. Se reserva ese aire a la derecha para que
   nunca llegue a pisar la última letra, en todas las variantes del botón. */
.btn.btn--principal{padding-inline-end:1.95rem}
.cabecera__acciones .btn.btn--principal{padding-inline-end:1.7rem}
/* El botón de WhatsApp comparte el gesto en su variante de línea */
.btn--inv{position:relative;overflow:hidden;isolation:isolate}
.btn--inv::after{
  content:"";position:absolute;top:0;right:0;width:12px;height:12px;z-index:2;
  pointer-events:none;
  background:linear-gradient(135deg,var(--oro-claro) 0%,var(--oro) 46%,var(--oro-osc) 100%);
  clip-path:polygon(0 0,0 100%,100% 100%);
  filter:drop-shadow(-2px 2px 4px rgba(0,0,0,.35));
  transition:width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1)
}
.btn--inv:hover::after,.btn--inv:focus-visible::after{width:20px;height:20px}
.btn.btn--inv{padding-inline-end:1.8rem}
@media (prefers-reduced-motion:reduce){
  .btn--principal::before,.btn--principal::after,.btn--inv::after{transition:none}
}

/* --- 39.2 Desplegable oscuro con los colores del logotipo -----------------
   El panel era blanco sobre una cabecera blanca: se leía como una extensión
   de la página y no como una capa. Ahora es la superficie profunda de la
   marca —el mismo negro verdoso del bloque orbital y del pie—, con el filete
   dorado arriba y el verde marcando lo activo.                            */
@media (min-width:1181px){
  .nav__sub.nav__mega{
    background:linear-gradient(168deg,#0c1712 0%,var(--negro) 46%,#07100b 100%);
    border-color:rgba(255,255,255,.10);
    box-shadow:0 30px 70px rgba(3,43,24,.42)
  }
  .nav__sub.nav__mega::before{
    background:linear-gradient(90deg,var(--verde),var(--oro) 62%,var(--oro-claro))
  }
  .nav__mega .nav__mega__rot{color:var(--oro-claro)}
  .nav__mega .nav__mega__rot::after{background:rgba(255,255,255,.16)}
  .nav__mega .nav__gr__tit{color:var(--oro-claro);border-bottom-color:rgba(255,255,255,.14)}
  .nav__mega a.nav__gr__tit:hover,.nav__mega a.nav__gr__tit:focus-visible{color:#fff}
  .nav__mega .nav__gr ul a{color:var(--texto-inv-2)}
  .nav__mega .nav__gr ul a:hover,
  .nav__mega .nav__gr ul a:focus-visible,
  .nav__mega .nav__gr ul a[aria-current="page"]{background:rgba(255,255,255,.08);color:#fff}
  .nav__mega .nav__mega__in{border-bottom-color:rgba(255,255,255,.12)}
  .nav__sub .nav__compl a{
    background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--texto-inv-2)
  }
  .nav__sub .nav__compl a:hover,
  .nav__sub .nav__compl a:focus-visible,
  .nav__sub .nav__compl a[aria-current="page"]{
    background:rgba(0,128,61,.26);border-color:var(--verde);color:#fff
  }
  .nav__compl .nav__sub-marca img{filter:brightness(0) invert(1);opacity:.92}
  .nav__mega .nav__dest{
    background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--texto-inv-2)
  }
  .nav__mega .nav__dest:hover,.nav__mega .nav__dest:focus-visible{
    background:rgba(0,128,61,.24);border-color:var(--verde);box-shadow:none;color:#fff
  }
  .nav__mega .nav__dest b{color:#fff}
  .nav__mega .nav__dest small{color:var(--texto-inv-3)}
  .nav__mega .nav__dest__ico{background:rgba(200,162,74,.16)}
  .nav__mega .nav__dest__ico svg{stroke:var(--oro-claro)}
  .nav__mega .nav__dest--min{color:var(--oro-claro);border-color:rgba(200,162,74,.5)}
  .nav__mega .nav__dest--min:hover{background:rgba(200,162,74,.12);color:#fff}
  .nav__mega .nav__dest[aria-current="page"]{background:rgba(0,128,61,.24);border-color:var(--verde)}
  .nav__mega .nav__dest[aria-current="page"] b{color:#fff}
}

/* --- 39.3 Pie: logotipos con presencia ------------------------------------ */
.pie__marca img{height:108px}
.pie__imprenta img{height:56px;width:auto}
@media (max-width:620px){
  .pie__marca img{height:92px}
  .pie__imprenta img{height:48px}
}

/* --- 39.4 Botón de A. Verde en el pie -------------------------------------
   El acceso a la otra marca de la casa era un enlace-flecha idéntico a
   cualquier otro. Ahora es un botón con su propia esquina despegada, para
   que se lea como una puerta a otra línea de negocio y no como un enlace más
   del pie.                                                                 */
.btn-averde{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  margin-top:.9rem;padding:.62rem 1.05rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(200,162,74,.42);
  border-radius:var(--r-sm);overflow:hidden;isolation:isolate;
  font-size:.88rem;font-weight:700;color:#fff;line-height:1.3;
  transition:background var(--tr),border-color var(--tr),transform var(--tr)
}
.btn-averde span:last-child{position:relative;z-index:1}
.btn-averde::after{
  content:"→";position:relative;z-index:1;transition:transform var(--tr);color:var(--oro-claro)
}
.btn-averde__peel{
  position:absolute;top:0;right:0;z-index:2;width:14px;height:14px;
  background:linear-gradient(135deg,var(--oro-claro) 0%,var(--oro) 44%,var(--oro-osc) 100%);
  clip-path:polygon(0 0,0 100%,100% 100%);
  filter:drop-shadow(-3px 3px 5px rgba(0,0,0,.5));
  transition:width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1)
}
.btn-averde:hover,.btn-averde:focus-visible{
  background:rgba(200,162,74,.16);border-color:var(--oro);color:#fff;transform:translateY(-2px)
}
.btn-averde:hover::after,.btn-averde:focus-visible::after{transform:translateX(4px)}
.btn-averde:hover .btn-averde__peel,.btn-averde:focus-visible .btn-averde__peel{width:30px;height:30px}
@media (prefers-reduced-motion:reduce){
  .btn-averde,.btn-averde::after,.btn-averde__peel{transition:none}
}

/* --- 39.5 Lista de datos del presupuesto ---------------------------------- */
.lista-check--dato li{margin-bottom:.7rem;font-size:.9rem;line-height:1.6}
.lista-check--dato b{color:var(--tinta);font-weight:700}

/* --- 39.6 Contraste del dorado en texto pequeño ---------------------------
   --oro-osc (#9C7A2A) da 4,01:1 sobre blanco, por debajo del 4,5:1 que exige
   WCAG AA para texto pequeño, y se usaba como color de los rótulos de sección
   de todas las páginas. Los usos de TEXTO pasan a --oro-txt (#7D611F, 5,83:1).
   El token --oro-osc se mantiene intacto donde no es texto —degradados del
   indicador de reseñas, filetes y pliegues—, que no tienen requisito de
   contraste de texto.                                                       */

/* ============ 34. TRAYECTORIA: BANNER, CRONOLOGÍA Y ARCHIVO GRÁFICO =======
   Bloque histórico de Imprenta A. Verde dentro de Etiquetas Extremadura.
   No introduce lenguaje visual nuevo: reutiliza la paleta (verde profundo,
   negro y dorado), el filete diagonal del hero interior, la esquina despegada
   del isotipo, los radios, las sombras y el sistema de tarjetas. El material
   histórico aporta el contraste; la maquetación sigue siendo contemporánea.
   ========================================================================= */

/* ---------------------------------------------------- 34.1 BANNER 140 AÑOS */
.b140{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:linear-gradient(118deg,var(--verde-noche) 0%,var(--verde-prof) 46%,var(--negro) 100%);
  padding:clamp(2.6rem,1.8rem + 3.4vw,4.6rem) 0
}
.b140::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background:
    radial-gradient(72% 120% at 86% 8%,rgba(200,162,74,.28),transparent 62%),
    repeating-linear-gradient(118deg,rgba(255,255,255,.045) 0 2px,transparent 2px 24px)
}
/* Marca de registro: motivo propio de artes gráficas, no iconografía tópica */
.b140__reg{
  position:absolute;right:clamp(-18px,-1vw,-6px);bottom:-26px;z-index:-1;
  width:clamp(160px,20vw,280px);height:auto;opacity:.16;pointer-events:none
}
.b140__reg circle,.b140__reg path{fill:none;stroke:var(--oro-claro);stroke-width:1.2}

.b140__in{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.4rem,1rem + 2.4vw,3.4rem);align-items:center
}
@media (max-width:820px){.b140__in{grid-template-columns:1fr;gap:1.5rem}}

.b140__cifra{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding-right:clamp(1.4rem,1rem + 2vw,3rem);
  border-right:1px solid rgba(227,197,120,.34)
}
@media (max-width:820px){
  .b140__cifra{padding:0 0 1.2rem;border-right:0;border-bottom:1px solid rgba(227,197,120,.34)}
}
.b140__mas{
  font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro-claro);margin-bottom:.15rem
}
.b140__num{
  font-size:clamp(4.4rem,2.4rem + 9vw,9.5rem);font-weight:800;line-height:.82;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg,#fff 0%,var(--oro-claro) 52%,var(--oro) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.b140__anios{
  font-size:clamp(.92rem,.85rem + .3vw,1.12rem);font-weight:800;letter-spacing:.3em;
  text-transform:uppercase;color:#fff;margin-top:.5rem
}
.b140__txt h2{color:#fff;margin-bottom:.5rem;max-width:20ch}
.b140__txt h2 em{font-style:normal;color:var(--oro-claro)}
.b140__txt p{color:var(--texto-inv-2);font-size:1.05rem;margin:0;max-width:56ch}
.b140__txt p strong{color:#fff}
.b140__pie{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;
  margin-top:clamp(1.2rem,.9rem + 1vw,1.8rem)
}
.b140__sello{
  display:inline-flex;align-items:baseline;gap:.5rem;padding:.4rem .9rem .45rem;
  border:1px solid rgba(227,197,120,.5);border-radius:var(--r-pill);
  background:rgba(200,162,74,.14);font-size:.72rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--oro-claro)
}
.b140__sello b{color:#fff;font-size:.95rem;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.b140__pie .enlace-flecha{color:var(--oro-claro)}
.b140__pie .enlace-flecha:hover{color:#fff}

/* --- Versión reducida de portada: misma jerarquía, sobre fondo claro ------ */
.b140--min{background:none;color:inherit;padding:0;overflow:visible;
  margin-top:clamp(2rem,1.4rem + 2vw,3.2rem)}
.b140--min::before{content:none}
.b140--min .b140__caja{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(1rem,.7rem + 1.6vw,2.4rem);
  padding:clamp(1.3rem,1rem + 1.2vw,2rem) clamp(1.3rem,1rem + 1.4vw,2.2rem);
  background:linear-gradient(120deg,#fff 0%,var(--gris) 100%);
  border:1px solid var(--linea);border-left:3px solid var(--verde);
  border-radius:var(--r-md);box-shadow:var(--sombra)
}
.b140--min .b140__caja::after{
  content:"";position:absolute;top:0;right:0;width:42px;height:42px;
  background:linear-gradient(225deg,var(--oro-claro) 0 48%,var(--oro) 48% 100%);
  clip-path:polygon(100% 0,0 0,100% 100%)
}
.b140--min .b140__cifra{
  flex-direction:row;align-items:baseline;gap:.55rem;
  padding:0 clamp(1rem,.7rem + 1.4vw,2rem) 0 0;
  border-right:1px solid var(--linea);border-bottom:0
}
.b140--min .b140__mas{margin:0;color:var(--oro-txt)}
.b140--min .b140__num{
  font-size:clamp(2.6rem,1.6rem + 3.6vw,4.4rem);line-height:.85;
  background:linear-gradient(160deg,var(--verde) 0%,var(--verde-prof) 60%,var(--oro-osc) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.b140--min .b140__anios{margin:0;color:var(--tinta);letter-spacing:.2em;font-size:.8rem}
.b140--min h2{
  font-size:clamp(1.12rem,1rem + .55vw,1.4rem);color:var(--tinta);
  margin:0 0 .25rem;max-width:34ch
}
.b140--min p{font-size:.95rem;color:var(--texto-2);margin:0;max-width:60ch}
.b140--min .b140__ir{flex:none;white-space:nowrap}
@media (max-width:960px){
  .b140--min .b140__caja{grid-template-columns:auto minmax(0,1fr)}
  .b140--min .b140__ir{grid-column:1 / -1;justify-self:start}
}
@media (max-width:560px){
  .b140--min .b140__caja{grid-template-columns:1fr;gap:.9rem}
  .b140--min .b140__cifra{
    padding:0 0 .9rem;border-right:0;border-bottom:1px solid var(--linea)
  }
}

/* ------------------------------------------------- 34.2 CRONOLOGÍA HISTÓRICA
   Cronología de Imprenta A. Verde. Comparte con la línea del método la idea de
   recorrido horizontal, pero NO su diseño: va sobre fondo verde noche, la
   línea es dorada, los nodos son rombos sin icono y el año manda dentro de la
   tarjeta. Además no se reproduce sola: avanza con el scroll.

   main.js publica --cr-p (avance normalizado 0→1) y, en vertical, --cr-y0 y
   --cr-h (origen y largo del raíl). El CSS hace el resto. La disposición
   vertical es la base —móvil, sin JavaScript y movimiento reducido— y la
   horizontal se activa solo en escritorio.                                  */
.crono{--cr-p:0;position:relative}

/* ---- Raíl ---- */
.crono__pista{
  position:absolute;left:19px;top:var(--cr-y0,16px);width:2px;
  height:var(--cr-h,calc(100% - 32px));border-radius:2px;
  background:rgba(255,255,255,.15)
}
.crono__avance{
  position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(180deg,var(--oro-osc) 0%,var(--oro) 45%,var(--oro-claro) 100%);
  box-shadow:0 0 14px rgba(200,162,74,.5);
  transform:scaleY(var(--cr-p));transform-origin:top center
}

.crono__hitos{
  position:relative;list-style:none;margin:0;padding:0 0 0 58px;
  display:grid;gap:clamp(1.5rem,1.1rem + 1.3vw,2.4rem)
}
.crono__hito{position:relative;margin:0}

/* ---- Nodo: rombo, sin icono ---- */
.crono__marca{
  position:absolute;left:-58px;top:6px;z-index:2;
  width:40px;height:40px;display:grid;place-items:center
}
.crono__marca i{
  width:16px;height:16px;border-radius:3px;transform:rotate(45deg);
  border:1.5px solid rgba(227,197,120,.55);background:rgba(200,162,74,.12);
  transition:background .5s ease,border-color .5s ease,box-shadow .5s ease,
             transform .6s cubic-bezier(.34,1.4,.64,1)
}
.crono__marca::after{
  content:"";position:absolute;inset:2px;border-radius:50%;pointer-events:none;
  border:1px dashed rgba(227,197,120,.45);opacity:0;
  animation:orbGiro 16s linear infinite;transition:opacity .5s ease
}

/* ---- Tarjeta ---- */
.crono__caja{
  position:relative;padding:1.1rem 1.2rem 1.2rem;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(227,197,120,.2);border-radius:var(--r-md);
  opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1),
             border-color .5s ease,background .5s ease,box-shadow .5s ease
}
.crono__caja h4{margin:0 0 .55rem;font-size:1rem;line-height:1.2}
.crono__anio{
  display:block;font-weight:800;line-height:1.1;letter-spacing:-.012em;
  font-variant-numeric:tabular-nums;color:var(--oro-claro);
  font-size:clamp(1.2rem,1rem + .7vw,1.6rem)
}
/* Hitos sin fecha («Generaciones posteriores»): mismo papel, menor cuerpo,
   porque una línea larga a tamaño de año rompe la columna. */
.crono__anio--txt{
  font-size:clamp(.98rem,.9rem + .35vw,1.16rem);letter-spacing:0;line-height:1.25
}
/* Título del hito. Antes era una micro-etiqueta en versales; con seis hitos y
   titulares largos, versales apretadas resultaban ilegibles en columna. */
.crono__rot{
  display:block;margin-top:.4rem;
  font-size:.94rem;font-weight:700;letter-spacing:0;line-height:1.35;
  color:#fff
}
.crono__caja p{font-size:.9rem;color:var(--texto-inv-2);line-height:1.6;margin:0}
.crono__caja p + p{margin-top:.55rem}

/* Entrada escalonada dentro de la tarjeta: primero la tarjeta, después el
   año, el título y por último el texto. Duraciones largas a propósito: la
   cronología debe leerse como un recorrido, no como un parpadeo. */
.crono__anio,.crono__rot,.crono__caja p{
  opacity:0;transform:translateY(7px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)
}
.crono__hito.is-visto .crono__anio{opacity:1;transform:none;transition-delay:.14s}
.crono__hito.is-visto .crono__rot {opacity:1;transform:none;transition-delay:.26s}
.crono__hito.is-visto .crono__caja p{opacity:1;transform:none;transition-delay:.38s}
.crono__hito.is-visto .crono__caja p + p{transition-delay:.46s}

/* ---- Hito alcanzado ---- */
.crono__hito.is-visto .crono__marca i{
  background:var(--oro);border-color:var(--oro-claro);transform:rotate(45deg) scale(1.12);
  box-shadow:0 0 0 5px rgba(200,162,74,.14),0 0 18px 3px rgba(200,162,74,.5)
}
.crono__hito.is-visto .crono__marca::after{opacity:1}
.crono__hito.is-visto .crono__caja{
  opacity:1;transform:none;
  background:rgba(255,255,255,.085);border-color:rgba(227,197,120,.45);
  box-shadow:0 18px 40px rgba(0,0,0,.28)
}

/* ============== Escritorio: recorrido horizontal =========================
   Los seis hitos en fila, todas las tarjetas colgando del mismo lado del eje.
   El bloque va en flujo normal: la secuencia se reproduce sola al entrar en
   pantalla (main.js), así que ya no hace falta fijarlo ni reservar carril de
   scroll, y tampoco que quepa entero en la ventana.                        */
@media (min-width:1200px) and (prefers-reduced-motion:no-preference){
  html:not(.no-js) .crono__hitos{
    position:relative;padding:92px 0 0;gap:0;
    grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch
  }
  html:not(.no-js) .crono__hito{padding:0 .45rem}
  html:not(.no-js) .crono__pista{
    left:0;right:0;top:46px;width:auto;height:2px;margin:0
  }
  html:not(.no-js) .crono__avance{
    background:linear-gradient(90deg,var(--oro-osc) 0%,var(--oro) 45%,var(--oro-claro) 100%);
    transform:scaleX(var(--cr-p));transform-origin:left center
  }
  html:not(.no-js) .crono__marca{
    top:-46px;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px
  }
  html:not(.no-js) .crono__marca i{width:18px;height:18px}

  /* Filete de unión entre el rombo y la tarjeta */
  html:not(.no-js) .crono__hito::before{
    content:"";position:absolute;top:-24px;left:50%;width:1px;height:24px;margin-left:-.5px;
    background:linear-gradient(180deg,rgba(227,197,120,.9),rgba(227,197,120,.15));
    transform:scaleY(0);transform-origin:top center;
    transition:transform .6s cubic-bezier(.22,1,.36,1) .06s
  }
  html:not(.no-js) .crono__hito.is-visto::before{transform:scaleY(1)}

  html:not(.no-js) .crono__caja{padding:.95rem 1.05rem 1.05rem;transform:translateY(14px);height:100%}
  html:not(.no-js) .crono__hito.is-visto .crono__caja{transform:none}
  html:not(.no-js) .crono__anio{font-size:1.26rem}
  html:not(.no-js) .crono__anio--txt{font-size:.95rem}
  html:not(.no-js) .crono__rot{font-size:.85rem;margin-top:.3rem;line-height:1.32}
  html:not(.no-js) .crono__caja p{font-size:.83rem;line-height:1.5}
  html:not(.no-js) .crono__caja p + p{margin-top:.45rem}
}

/* Sin JavaScript y con movimiento reducido: cronología íntegra y estática.
   El contenido se lee completo aunque no se ejecute una sola animación. */
.no-js .crono__caja,.no-js .crono__avance,
.no-js .crono__anio,.no-js .crono__rot,.no-js .crono__caja p{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .crono__caja,.crono__anio,.crono__rot,.crono__caja p{
    opacity:1;transform:none;transition-delay:0s
  }
  .crono__marca::after{animation:none}
  .crono__marca i{transition:none}
}
@media (max-width:520px){
  .crono__hitos{padding-left:50px}
  .crono__marca{left:-50px;width:36px;height:36px}
  .crono__marca i{width:14px;height:14px}
  .crono__pista{left:17px}
}

/* ------------------------------------------------ 34.3 ARCHIVO FOTOGRÁFICO
   Composición editorial, no cuadrícula: una pieza de apertura a ancho completo
   y un mosaico en columnas que respeta la proporción original de cada
   fotografía. Sin filtros, sin virados ni colorizaciones: el documento se
   publica tal cual, con un paspartú muy discreto como único marco.          */
.arch{margin-top:clamp(1.8rem,1.3rem + 1.6vw,2.8rem)}
.arch__pieza{
  position:relative;margin:0 0 var(--arch-h,1rem);
  padding:8px 8px 0;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r-sm);
  box-shadow:0 4px 14px rgba(5,77,42,.06);
  transition:box-shadow var(--tr),border-color var(--tr),transform var(--tr)
}
.arch__pieza:hover,.arch__pieza:focus-visible{
  border-color:var(--linea-fuerte);box-shadow:0 14px 32px rgba(5,77,42,.13);
  transform:translateY(-2px)
}
.arch__pieza img{width:100%;height:auto;border-radius:2px;background:var(--gris-2)}
.arch__pieza figcaption{
  padding:.7rem .25rem .8rem;font-size:.8rem;line-height:1.5;color:var(--texto-2);
  border-top:1px solid var(--linea);margin-top:8px
}
.arch__pieza figcaption b{
  display:block;font-size:.66rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro-txt);margin-bottom:.2rem
}
.arch{--arch-h:clamp(.8rem,.6rem + .6vw,1.2rem)}
.arch__masa{columns:3;column-gap:var(--arch-h)}
@media (max-width:1080px){.arch__masa{columns:2}}
/* En móvil se mantienen dos columnas: con una sola, doce fotografías en
   vertical sumaban casi 7 000 px de recorrido. La lectura de archivo se
   conserva y la ampliación sigue disponible en el visor. */
@media (max-width:560px){
  .arch{--arch-h:.6rem}
  .arch__masa .arch__pieza{padding:5px 5px 0}
  .arch__masa figcaption{
    padding:.5rem .15rem .55rem;margin-top:5px;font-size:.72rem;line-height:1.4
  }
  .arch__masa figcaption b{font-size:.6rem;letter-spacing:.12em}
  .arch__pieza::after{right:.6rem;top:.6rem;width:28px;height:28px}
}
.arch__masa .arch__pieza{break-inside:avoid;-webkit-column-break-inside:avoid}
.arch__lead{margin-bottom:var(--arch-h)}
.arch__lead figcaption{font-size:.84rem}
/* Lupa: misma señal de «ampliable» que en el resto de galerías del sitio */
.arch__pieza{cursor:zoom-in}
.arch__pieza::after{
  content:"";position:absolute;right:1rem;top:1rem;width:32px;height:32px;z-index:3;
  border-radius:50%;background:rgba(17,18,20,.55) center/16px 16px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.8);transition:var(--tr)
}
.arch__pieza:hover::after,.arch__pieza:focus-visible::after{opacity:1;transform:none}

/* Nota de archivo bajo la galería */
.arch__nota{
  margin-top:1.2rem;font-size:.82rem;color:var(--texto-2);
  border-left:2px solid var(--oro);padding-left:.9rem
}

/* ------------------------------- 34.4 SELECCIÓN DE ARCHIVO EN A. VERDE ---- */
.arch--sel .arch__masa{columns:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--arch-h)}
@media (max-width:1000px){.arch--sel .arch__masa{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.arch--sel .arch__masa{grid-template-columns:1fr}}
.arch--sel .arch__pieza{display:flex;flex-direction:column;margin-bottom:0}
.arch--sel .arch__pieza img{aspect-ratio:3/4;object-fit:cover}
.arch--sel figcaption{flex:1}

/* Bloque «desde 1882» de la página de imprenta */
.av-hist{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.5rem,1rem + 2.4vw,3.2rem);align-items:center;
  padding:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);
  background:linear-gradient(120deg,#fff 0%,var(--gris) 100%);
  border:1px solid var(--linea);border-radius:var(--r-md)
}
@media (max-width:900px){.av-hist{grid-template-columns:1fr}}
.av-hist h2{margin-bottom:.55rem}
.av-hist p{margin-bottom:1rem}
.av-hist p:last-of-type{margin-bottom:1.4rem}
.av-hist__cifra{
  text-align:center;padding:clamp(1.2rem,.9rem + 1.2vw,2rem) 1rem;
  border:1px solid var(--linea);border-radius:var(--r-md);background:#fff;
  box-shadow:var(--sombra)
}
.av-hist__cifra .b140__num{
  font-size:clamp(3.4rem,2.2rem + 5vw,6rem);
  background:linear-gradient(160deg,var(--verde) 0%,var(--verde-prof) 60%,var(--oro-osc) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;display:block
}
.av-hist__cifra .b140__mas{display:block;color:var(--oro-txt)}
.av-hist__cifra .b140__anios{display:block;color:var(--tinta);font-size:.8rem;letter-spacing:.2em}
.av-hist__cifra{margin:0}
.av-hist__cifra > span:last-child{
  display:block;margin:.9rem 0 0;padding-top:.9rem;border-top:1px solid var(--linea);
  font-size:.88rem;color:var(--texto-2);line-height:1.55
}
.arch__cab{margin-top:clamp(2.8rem,2rem + 2.6vw,4.4rem)}

/* Aviso de archivo: deja claro que el material tipográfico es histórico y no
   el equipamiento con el que se produce hoy. Va delante de cada galería. */
.arch__aviso{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:.7rem 1rem;
  margin:0 0 clamp(1.4rem,1rem + 1.2vw,2.2rem);
  padding:1rem 1.2rem 1.05rem;
  background:linear-gradient(120deg,#fff 0%,var(--gris) 100%);
  border:1px solid var(--linea);border-left:3px solid var(--oro);
  border-radius:var(--r-md);font-size:.9rem;color:var(--texto-2);line-height:1.6
}
.arch__aviso > span:last-child{flex:1 1 22rem;min-width:0}
.arch__aviso strong{color:var(--tinta)}
.arch__sello{
  flex:none;display:inline-flex;align-items:center;gap:.45rem;
  padding:.3rem .75rem .34rem;border-radius:var(--r-pill);
  border:1px solid rgba(200,162,74,.55);background:rgba(200,162,74,.12);
  color:var(--oro-txt);font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap
}
.arch__sello::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--oro);flex:none
}

/* Marco del bloque de cronología: fondo verde noche, distinto del resto de la
   página y de la franja del método. Mismo motivo de filete diagonal que el
   banner de los 140 años, para que se lean como una familia. */
.crono-bloque{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(2.2rem,1.6rem + 2vw,3.4rem);
  padding:clamp(1.8rem,1.3rem + 2vw,3.2rem) clamp(1.2rem,.8rem + 1.6vw,2.6rem)
          clamp(2rem,1.5rem + 2vw,3.4rem);
  background:linear-gradient(122deg,var(--verde-noche) 0%,var(--verde-prof) 54%,var(--negro) 100%);
  border:1px solid rgba(227,197,120,.3);border-radius:var(--r-md);
  box-shadow:var(--sombra-lg)
}
.crono-bloque::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background:
    radial-gradient(64% 110% at 88% 6%,rgba(200,162,74,.26),transparent 62%),
    repeating-linear-gradient(118deg,rgba(255,255,255,.04) 0 2px,transparent 2px 24px)
}
.crono-bloque__cab{max-width:700px;margin-inline:auto;text-align:center}
.crono-bloque__cab h3{
  color:#fff;font-size:clamp(1.35rem,1.1rem + 1vw,1.95rem);margin:0 0 .5rem
}
.crono-bloque__cab h3 em{font-style:normal;color:var(--oro-claro)}
.crono-bloque__cab p{margin:0;color:var(--texto-inv-2);font-size:1.02rem}
.crono-bloque .crono{margin-top:clamp(1.8rem,1.3rem + 1.6vw,2.8rem)}
@media (max-width:520px){
  .crono-bloque{padding-inline:1rem}
  .crono-bloque .crono__hitos{padding-left:46px}
  .crono-bloque .crono__marca{left:-46px}
  .crono-bloque .crono__pista{left:17px}
}

/* Sello sobre cada pieza de archivo. Es la señal que viaja con la imagen:
   aunque el visitante llegue directamente a la fotografía, queda claro que es
   material histórico y no el equipamiento de producción actual. */
.arch__marca{
  position:absolute;top:1rem;left:1rem;z-index:3;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.26rem .6rem .3rem;border-radius:var(--r-pill);
  background:rgba(17,18,20,.62);border:1px solid rgba(227,197,120,.45);
  color:var(--oro-claro);font-size:.6rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;pointer-events:none;
  backdrop-filter:saturate(140%) blur(2px)
}
.arch__marca::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--oro)}
.arch__marca--der{left:auto;right:1rem}
@media (max-width:560px){
  .arch__masa .arch__marca{top:.55rem;left:.55rem;font-size:.54rem;padding:.2rem .45rem .24rem;gap:.3rem}
}