/* ==========================================================================
   3D LAB · Fabricación aditiva
   Hoja de estilos única. Sin frameworks, sin CDN, sin fuentes externas:
   la web funciona sin conexión.

   ÍNDICE
   01. Tokens               08. Tecnologías
   02. Base                 09. Sostenibilidad
   03. Tipografía           10. Proceso
   04. Capas de ambiente    11. Casos
   05. Botones              12. Cifras
   06. Cabecera             13. Testimonios
   07. Portada (hero)       14. FAQ
   15. Contacto             16. Pie
   17. Animaciones de entrada
   18. Responsive
   19. Movimiento reducido
   20. Selector de idioma (ES / CA)
   21. Guía de materiales
   22. Componentes compartidos de las landings
   23. Blog
   24. Pasos con vídeo
   25. Reseñas reales de Google
   26. Asistente de material (home)
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   Todo el color, el ritmo y la tipografía salen de aquí. Cambiar la marca
   entera es cambiar este bloque.
   ========================================================================== */

:root {
  /* -- Color ------------------------------------------------------------ */
  /* Base: azul marino muy oscuro, casi neutro. Deja que el naranja y el   */
  /* azul de marca sean lo único saturado en pantalla.                    */
  --bg:        #050e17;   /* fondo general, azul marino casi negro         */
  --bg-2:      #08141f;   /* secciones alternas                            */
  --bg-3:      #0d1f2e;   /* tarjetas                                      */
  --bg-4:      #122a3c;   /* tarjetas destacadas / hover                   */

  /* Acentos de marca: el azul es confianza, el naranja es energía.        */
  --menta:     #FF6600;   /* naranja de marca                              */
  --menta-osc: #cc5200;   /* naranja oscuro, para contraste                */
  --cielo:     #3395ff;   /* azul claro, transición del degradado          */
  --azul:      #007BFF;   /* azul de marca                                 */

  --fg:        #eef4fa;   /* texto principal                               */
  --fg-2:      #a9b8c8;   /* texto secundario                              */
  --fg-3:      #6d7f92;   /* texto terciario, etiquetas                    */

  --linea:     rgba(0, 123, 255, .16);
  --linea-2:   rgba(0, 123, 255, .32);
  --vidrio:    rgba(255, 255, 255, .035);

  --grad:      linear-gradient(115deg, var(--azul), var(--cielo) 46%, var(--menta));
  --grad-suave:linear-gradient(115deg, rgba(0,123,255,.16), rgba(255,102,0,.16));

  /* -- Tipografía ------------------------------------------------------- */
  --f-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, ui-serif, serif;
  --f-mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Escala fluida: el tamaño se adapta al ancho sin saltos bruscos.       */
  --t-display: clamp(2.6rem, 5.2vw, 5.8rem);
  --t-h2:      clamp(2.05rem, 3.9vw, 3.7rem);
  --t-h3:      clamp(1.25rem, 1.7vw, 1.6rem);
  --t-lead:    clamp(1.03rem, 1.25vw, 1.28rem);
  --t-mono:    .715rem;

  /* -- Espacio y forma -------------------------------------------------- */
  --wrap:      1320px;
  --wrap-max:  1640px;
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --seccion:   clamp(5.5rem, 11vw, 11rem);
  --r:         14px;
  --r-lg:      26px;

  /* -- Movimiento ------------------------------------------------------- */
  --ease:      cubic-bezier(.22, 1, .36, 1);      /* salida suave           */
  --ease-io:   cubic-bezier(.65, .05, .36, 1);    /* entrada y salida       */
  --dur:       .7s;
}

/* ==========================================================================
   02. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* El desplazamiento por anclas deja hueco para la cabecera fija. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Bloquea el scroll cuando el menú móvil está abierto. */
body.sin-scroll { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--menta); color: #051220; }

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

/* Barra de desplazamiento discreta, a tono con el fondo. */
* { scrollbar-color: var(--linea-2) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--linea-2); border-radius: 99px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  padding: .8rem 1.2rem; border-radius: var(--r);
  background: var(--menta); color: #051220; font-weight: 700;
  transition: top .2s var(--ease);
}
.saltar:focus { top: 1rem; }

/* ==========================================================================
   03. TIPOGRAFÍA
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}

h1 { font-size: var(--t-display); letter-spacing: -.05em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.2; }

p { margin: 0; text-wrap: pretty; }

/* Cursiva en serif: el contrapunto editorial que separa una web de estudio
   de una plantilla. Se usa dentro de los titulares. */
.serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
}

.degradado {
  background: var(--azul);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Etiqueta monoespaciada sobre cada bloque. Azul por defecto; el eyebrow
   de la portada (la primera etiqueta que se ve en cada página) se queda
   en naranja para seguir llamando la atención. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--azul);
}
.eyebrow::before {
  content: ''; width: 26px; height: 1px;
  background: var(--azul); opacity: .6;
}
.hero .eyebrow { color: var(--menta); }
.hero .eyebrow::before { background: var(--menta); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--fg-2);
  max-width: 58ch;
}

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* -- Estructura de sección ------------------------------------------------ */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-ancho { max-width: var(--wrap-max); }
.wrap-estrecho { max-width: 880px; }

.seccion { padding-block: var(--seccion); position: relative; }
.seccion-alt { background: var(--bg-2); }

/* Filo superior con degradado: separa secciones sin una línea dura. */
.seccion-alt::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--linea-2) 30%, var(--linea-2) 70%, transparent);
}

/* Cabecera de sección: una línea fina cruza el ancho, el índice y la
   etiqueta se quedan a la izquierda y el titular ocupa el resto. Es la
   retícula la que da el aire de editorial, no el espacio en blanco suelto. */
.cab {
  display: grid;
  grid-template-columns: minmax(0, .36fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: start;
  padding-top: clamp(1.1rem, 2vw, 1.7rem);
  border-top: 1px solid var(--linea);
  margin-bottom: clamp(2.75rem, 5vw, 5rem);
}
.cab-lado { display: flex; flex-direction: column; gap: .9rem; }
.cab-indice {
  font-family: var(--f-mono);
  font-size: .7rem; letter-spacing: .2em; color: var(--azul);
}
.cab h2 { max-width: 22ch; }
.cab-sub { color: var(--fg-2); max-width: 46ch; margin-top: 1.5rem; }

/* ==========================================================================
   04. CAPAS DE AMBIENTE
   Grano, auroras y cursor. Puro adorno: viven en su propia capa y nunca
   interceptan clics.
   ========================================================================== */

.ambiente {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}

/* Manchas de luz que respiran muy despacio. */
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}
.aurora-1 {
  width: 46vw; height: 46vw; top: -14vw; left: -10vw;
  background: radial-gradient(circle, rgba(255,102,0,.28), transparent 65%);
  animation: flotar 26s var(--ease-io) infinite alternate;
}
.aurora-2 {
  width: 40vw; height: 40vw; top: 34vh; right: -12vw;
  background: radial-gradient(circle, rgba(0,123,255,.26), transparent 65%);
  animation: flotar 32s var(--ease-io) infinite alternate-reverse;
}
.aurora-3 {
  width: 34vw; height: 34vw; bottom: -12vw; left: 28vw;
  background: radial-gradient(circle, rgba(51,149,255,.18), transparent 65%);
  animation: flotar 38s var(--ease-io) infinite alternate;
}
@keyframes flotar {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, -5vh, 0) scale(1.18); }
}

/* Grano: quita el aspecto plano de los degradados. */
.grano {
  position: fixed; inset: -50%;
  z-index: 1; pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  animation: granear 1.1s steps(3) infinite;
}
@keyframes granear {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* Rejilla técnica de fondo: sugiere plano de fabricación. */
.rejilla {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--linea) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linea) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(ellipse 90% 65% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 40%, #000 20%, transparent 78%);
  opacity: .55;
  pointer-events: none;
}

/* Cursor propio: DESACTIVADO. Sustituía el puntero real por un punto y un
   aro que seguían al ratón por JS; si ese JS no llegaba a "engancharse"
   (como dentro de la vista previa de un artifact), el puntero real se
   quedaba oculto y no aparecía nada en su lugar. Los nodos #cursor y
   #cursorHalo siguen en el HTML y site.js sigue calculando su posición,
   pero no se pintan ni se oculta el cursor real: así nunca desaparece. */
.cursor, .cursor-halo { display: none; }

/* Progreso de lectura, pegado bajo la cabecera. */
.progreso {
  position: fixed; top: 0; left: 0; z-index: 120;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad);
  will-change: transform;
}

/* Todo el contenido va por encima de las capas de ambiente. */
.site-header, main, .site-footer { position: relative; z-index: 2; }

/* ==========================================================================
   05. BOTONES
   ========================================================================== */

.btn {
  --btn-fg: #051220;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 1.9rem;
  border: 0; border-radius: 99px;
  font-size: .93rem; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
.btn:active { transform: scale(.97); }

.btn-principal { background: var(--menta); color: var(--btn-fg); }
/* Al pasar el cursor por encima, el naranja cede el paso al azul: el
   ::after empieza transparente encima del fondo naranja y sube su
   opacidad, así el cambio de color es una animación, no un salto. */
.btn-principal::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--azul);
  opacity: 0; transition: opacity .4s var(--ease);
}
.btn-principal:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -12px rgba(0,123,255,.55);
}
.btn-principal:hover::after { opacity: 1; }

.btn-fantasma {
  background: var(--vidrio);
  color: var(--fg);
  border: 1px solid var(--linea-2);
  backdrop-filter: blur(8px);
}
.btn-fantasma:hover {
  transform: translateY(-2px);
  border-color: var(--menta);
  color: var(--menta);
}

.btn-sm { padding: .72rem 1.35rem; font-size: .85rem; }
.btn-bloque { width: 100%; }

/* Flecha que se desplaza al pasar por encima. */
.btn .flecha { transition: transform .35s var(--ease); }
.btn:hover .flecha { transform: translateX(4px); }

/* Enlace de texto con subrayado que se dibuja. */
.enlace {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--menta);
  position: relative; padding-bottom: 3px;
}
.enlace::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--ease);
}
.enlace:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ==========================================================================
   06. CABECERA
   ========================================================================== */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-block: 1.4rem;
  transition: padding .45s var(--ease), background-color .45s var(--ease),
              box-shadow .45s var(--ease), backdrop-filter .45s var(--ease);
}
/* Al bajar, la cabecera se compacta y aparece el fondo esmerilado. */
.site-header.compacta {
  padding-block: .75rem;
  background: rgba(4, 20, 26, .72);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--linea);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}

.logo { display: inline-flex; align-items: center; gap: .85rem; }
.logo-chip {
  display: inline-flex; align-items: center;
  padding: .5rem .85rem;
  border-radius: 12px;
  background: #fff;
  line-height: 0;
}
.logo-img { height: 26px; width: auto; display: block; }
.logo-txt {
  font-family: var(--f-mono);
  font-size: .93rem; letter-spacing: .26em; font-weight: 500;
  text-transform: uppercase;
}
.logo-txt small {
  display: block; font-size: .55rem; letter-spacing: .3em;
  color: var(--fg-3); margin-top: 2px;
}
.logo-txt--sub { display: none; }
@media (min-width: 820px) {
  .logo-txt--sub { display: block; }
}

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav-enlaces { display: flex; align-items: center; gap: 2.1rem; }
.nav a {
  font-size: .9rem; color: var(--fg-2);
  position: relative; padding-block: .3rem;
  transition: color .3s var(--ease);
}
.nav a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--menta);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .4s var(--ease);
}
.nav a:not(.btn):hover { color: var(--fg); }
.nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* Botón hamburguesa: se transforma en aspa al abrir. */
.nav-toggle {
  display: none;
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--linea-2); border-radius: 50%;
  background: var(--vidrio); cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute; left: 50%; width: 17px; height: 1.5px;
  margin-left: -8.5px; background: var(--fg); border-radius: 2px;
  transition: transform .4s var(--ease), opacity .25s;
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 23px; }
.nav-toggle span:nth-child(3) { top: 29px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   07. PORTADA (HERO)
   Composición a dos columnas: texto editorial y una escena 3D en canvas
   con una foto real superpuesta.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
}

.hero-copy h1 { margin: 1.4rem 0 0; }
.hero-copy .lead { margin-top: 1.7rem; max-width: 46ch; }

/* Agrupa eyebrow+título+lead+botones para poder darles una altura propia
   en móvil (ver @media más abajo). En escritorio no debe cambiar nada:
   display:contents la saca del árbol de cajas, así sus hijos siguen
   siendo hijos directos de .hero-copy a efectos de layout. */
.hero-pantallazo { display: contents; }

.hero-acciones {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-top: 2.2rem;
}

/* Fichas técnicas bajo el titular: dato y unidad, en monoespaciada.
   Los separadores son bordes, no huecos con fondo: así las auroras del
   fondo siguen viéndose a través y no aparecen cajas opacas. */
.hero-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 3rem 0 0; padding: 0;
  border-block: 1px solid var(--linea);
}
.hero-specs li {
  list-style: none;
  padding: 1.1rem 1rem 1.15rem;
  border-left: 1px solid var(--linea);
}
.hero-specs li:first-child { border-left: 0; padding-left: 0; }
.hero-specs b {
  display: block;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  font-weight: 600; letter-spacing: -.03em;
  color: var(--fg);
}
.hero-specs span {
  display: block; margin-top: .3rem;
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
}

/* -- Escena ---------------------------------------------------------------- */

.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1.06;
  width: 100%;
}

/* Anillos concéntricos: dan profundidad detrás del objeto. */
.hero-anillo {
  position: absolute; top: 50%; left: 50%;
  border: 1px solid var(--linea);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hero-anillo-1 { width: 62%; aspect-ratio: 1; }
.hero-anillo-2 { width: 84%; aspect-ratio: 1; border-style: dashed; opacity: .6; }
.hero-anillo-3 { width: 104%; aspect-ratio: 1; opacity: .35; }

.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* La foto real, en una tarjeta de vidrio ligeramente girada. */
.hero-foto {
  position: absolute; left: -13%; bottom: 0%;
  width: 34%;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--linea-2);
  background: var(--bg-3);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  transform: rotate(-3.5deg);
}
.hero-foto img { width: 100%; }

/* Ficha flotante con datos del pedido. */
.hero-ficha {
  position: absolute; right: -2%; top: 8%;
  min-width: 208px;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r);
  border: 1px solid var(--linea-2);
  background: rgba(10, 40, 49, .62);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .9);
}
.hero-ficha dl { margin: 0; display: grid; gap: .55rem; }
.hero-ficha div { display: flex; justify-content: space-between; gap: 1rem; }
.hero-ficha dt {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
}
.hero-ficha dd { margin: 0; font-size: .8rem; font-weight: 600; }
.hero-ficha .ok { color: var(--menta); }

/* Punto que late: la sensación de "esto está pasando ahora". */
.latido {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--menta);
  margin-right: .45rem; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(255,102,0, .7);
  animation: latir 2.4s infinite;
}
@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(255,102,0,.6); }
  70%  { box-shadow: 0 0 0 12px rgba(255,102,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,102,0,0); }
}

/* Indicador de desplazamiento: círculo con flecha que rebota, más grande
   y visual que la antigua línea fina. */
.hero-scroll {
  position: absolute; left: 50%; bottom: 2rem;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--f-mono); font-size: .8rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--azul);
}
.hero-scroll i {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--linea-2);
  background: var(--vidrio);
  backdrop-filter: blur(6px);
}
.hero-scroll i::after {
  content: '';
  width: 12px; height: 12px;
  border-right: 2px solid var(--azul);
  border-bottom: 2px solid var(--azul);
  transform: translateY(-3px) rotate(45deg);
  animation: rebotar 1.8s var(--ease-io) infinite;
}
@keyframes rebotar {
  0%, 100% { transform: translateY(-4px) rotate(45deg); opacity: .45; }
  50%      { transform: translateY(3px) rotate(45deg); opacity: 1; }
}

/* ==========================================================================
   RESEÑAS DE GOOGLE
   Tarjeta compacta con enlace al perfil de empresa en Google. Enseña solo
   la nota media, sin el total de reseñas. EDITAR ▸ la nota es de ejemplo:
   sustitúyela por la real.
   ========================================================================== */

.resenas-google { padding-block: clamp(2rem, 4vw, 3rem); position: relative; z-index: 2; }
/* En columna: la tarjeta arriba centrada y, debajo, las reseñas reales.
   En fila quedarían una al lado de la otra. */
.resenas-google .wrap { display: flex; flex-direction: column; align-items: center; }
.resenas-google .resenas-reales { width: 100%; }
.resenas-google-tarjeta {
  display: inline-flex; align-items: center; gap: 1.1rem;
  padding: 1rem 1.6rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--linea-2);
  background: var(--vidrio);
  backdrop-filter: blur(10px);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.resenas-google-tarjeta:hover { border-color: var(--azul); transform: translateY(-2px); }
.resenas-google-icono { width: 28px; height: 28px; flex: none; }
.resenas-google-texto { display: flex; flex-direction: column; gap: .35rem; }
.resenas-google-marca {
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2);
}
.resenas-google-estrellas { display: flex; gap: .15rem; }
.resenas-google-estrellas svg { width: 14px; height: 14px; color: #FFC107; }
.resenas-google-cifra {
  display: flex; align-items: center;
  padding-left: 1.2rem; border-left: 1px solid var(--linea-2);
}
.resenas-google-cifra b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--fg); }

/* ==========================================================================
   MARQUESINA
   Cinta infinita de tecnologías. El truco: el contenido está duplicado y se
   desplaza justo la mitad, así el bucle no tiene costura.
   ========================================================================== */

.cinta {
  position: relative;
  padding-block: 1.6rem;
  border-block: 1px solid var(--linea);
  background: var(--bg-2);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cinta-pista {
  display: flex; width: max-content;
  animation: desfilar 42s linear infinite;
}
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-grupo { display: flex; align-items: center; }
.cinta-grupo span {
  display: inline-flex; align-items: center; gap: 2.6rem;
  padding-inline: 1.3rem;
  font-family: var(--f-mono); font-size: .78rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--fg-2); white-space: nowrap;
}
.cinta-grupo span::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--menta); opacity: .55;
}
@keyframes desfilar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   LOGOTIPOS DE CLIENTES
   ========================================================================== */

.logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  margin-top: 3rem;
}
.logos img {
  width: 100%; max-width: 150px; margin-inline: auto;
  opacity: .42;
  filter: grayscale(1);
  transition: opacity .4s var(--ease), filter .4s var(--ease), transform .4s var(--ease);
}
.logos img:hover { opacity: 1; filter: none; transform: translateY(-3px); }

/* ==========================================================================
   08. SERVICIOS · tarjetas con inclinación
   ========================================================================== */

.servicios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.servicio {
  position: relative;
  padding: clamp(1.9rem, 3vw, 2.9rem);
  background: var(--bg);
  min-height: 300px;
  display: flex; flex-direction: column;
  transition: background-color .5s var(--ease);
}
/* Foco luminoso que sigue al puntero (las coordenadas las pone el JS). */
.servicio::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,102,0, .1), transparent 62%);
  opacity: 0; transition: opacity .45s var(--ease);
  pointer-events: none;
}
.servicio:hover { background: var(--bg-3); }
.servicio:hover::before { opacity: 1; }

.servicio-n {
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .2em; color: var(--fg-3);
}
.servicio-icono {
  width: 44px; height: 44px; margin: 1.8rem 0 1.5rem;
  color: var(--menta);
}
.servicio h3 { margin-bottom: .8rem; }
.servicio p { color: var(--fg-2); font-size: .95rem; }
.servicio-pie {
  margin-top: auto; padding-top: 1.6rem;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.tag {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .13em; text-transform: uppercase;
  padding: .34rem .6rem; border-radius: 99px;
  border: 1px solid var(--linea-2); color: var(--fg-3);
}

/* ==========================================================================
   08b. TECNOLOGÍAS · panel con pestañas
   ========================================================================== */

.tec {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.tec-lista { display: flex; flex-direction: column; gap: 1px; background: var(--linea); }
.tec-btn {
  position: relative;
  display: flex; align-items: baseline; gap: 1rem;
  width: 100%; padding: 1.4rem 1.5rem 1.4rem 1.2rem;
  border: 0; background: var(--bg-2); text-align: left; cursor: pointer;
  transition: background-color .4s var(--ease), padding-left .4s var(--ease);
}
/* Barra de acento a la izquierda de la pestaña activa. */
.tec-btn::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--grad);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .45s var(--ease);
}
.tec-btn:hover { background: var(--bg-3); }
.tec-btn[aria-selected="true"] {
  background: var(--bg-3); padding-left: 1.6rem;
}
.tec-btn[aria-selected="true"]::before { transform: scaleY(1); transform-origin: 50% 0; }
.tec-btn i {
  font-family: var(--f-mono); font-style: normal; font-size: .65rem;
  letter-spacing: .16em; color: var(--fg-3); flex: none;
}
.tec-btn b { font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em; }
.tec-btn u {
  display: block; margin-top: .2rem; text-decoration: none;
  font-size: .82rem; color: var(--fg-2); font-weight: 400;
}

.tec-panel {
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  padding: clamp(1.6rem, 3vw, 2.6rem);
}
.tec-panel[hidden] { display: none; }
.tec-panel h3 { margin-bottom: .9rem; }
.tec-panel > p { color: var(--fg-2); max-width: 58ch; }

.tec-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2rem;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
}
.tec-datos div { background: var(--bg-2); padding: 1.1rem 1.25rem; }
.tec-datos dt {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
}
.tec-datos dd {
  margin: .45rem 0 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em;
}

/* ==========================================================================
   09. SOSTENIBILIDAD
   ========================================================================== */

.sost {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* La foto se queda quieta mientras la lista de la derecha pasa por delante. */
.sost-media { position: sticky; top: 15vh; }
.sost-media > img {
  width: 100%; border-radius: var(--r-lg);
  border: 1px solid var(--linea-2);
}
/* Tarjeta de dato superpuesta sobre la foto. */
.sost-dato {
  position: absolute; right: -6%; bottom: -8%;
  padding: 1.5rem 1.7rem;
  border-radius: var(--r);
  border: 1px solid var(--linea-2);
  background: rgba(6, 28, 36, .82);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
}
.sost-dato b {
  display: block; font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600; letter-spacing: -.045em;
  background: var(--azul); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sost-dato span {
  display: block; margin-top: .2rem; max-width: 17ch;
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}

.sost-puntos { margin: 2.4rem 0 0; padding: 0; list-style: none; }
.sost-puntos li {
  padding: 1.3rem 0 1.4rem;
  border-top: 1px solid var(--linea);
  display: grid; grid-template-columns: 30px 1fr; gap: 1.1rem; align-items: start;
}
.sost-puntos li:last-child { border-bottom: 1px solid var(--linea); }
.sost-puntos svg { width: 22px; height: 22px; color: var(--menta); margin-top: 2px; }
.sost-puntos b { display: block; margin-bottom: .3rem; font-weight: 600; }
.sost-puntos p { color: var(--fg-2); font-size: .93rem; }

.materiales {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; margin-top: 2.4rem;
}
/* Fotos al 88% del ancho de su columna, alineadas a la izquierda de la
   celda: así la primera foto queda al mismo margen que el botón de abajo. */
.materiales figure { margin: 0; width: 88%; }
.materiales img {
  width: 100%; border-radius: var(--r);
  border: 1px solid var(--linea);
  transition: transform .55s var(--ease);
}
.materiales figure:hover img { transform: scale(1.04); }
/* Chip decorativo cuando no hay foto real del material: mismo hueco y
   proporción que .materiales img, sin texto de otro material grabado dentro. */
.material-chip {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; width: 100%; border-radius: var(--r);
  border: 1px solid var(--linea); background: var(--bg-3);
  transition: transform .55s var(--ease), background-color .4s var(--ease);
}
.materiales figure:hover .material-chip { transform: scale(1.04); background: var(--bg-4); }
.material-chip svg { width: 34%; height: 34%; color: var(--menta); }
.materiales figcaption {
  margin-top: .6rem;
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}

/* ==========================================================================
   10. PROCESO · columna pegajosa
   ========================================================================== */

.proceso {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.proceso-fijo {
  position: sticky; top: 22vh;
  align-self: start;
}
/* Número gigante que cambia según el paso visible. */
.proceso-n {
  font-size: clamp(6rem, 13vw, 12rem);
  font-weight: 600; letter-spacing: -.07em; line-height: .8;
  background: var(--azul); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.proceso-n.cambiando { opacity: 0; transform: translateY(-14px); }
.proceso-titulo { margin-top: 1.2rem; min-height: 3em; }

.proceso-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.proceso-paso {
  position: relative;
  padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(2rem, 4vw, 3.2rem) clamp(2rem, 4vw, 3.4rem);
  border-top: 1px solid var(--linea);
  opacity: .34;
  transition: opacity .55s var(--ease);
}
.proceso-paso:last-child { border-bottom: 1px solid var(--linea); }
.proceso-paso.activo { opacity: 1; }
/* Riel vertical que se rellena en el paso activo. */
.proceso-paso::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--linea);
}
.proceso-paso::after {
  content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%;
  background: var(--grad);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .8s var(--ease);
}
.proceso-paso.activo::after { transform: scaleY(1); }
.proceso-paso h3 { margin-bottom: .75rem; }
.proceso-paso p { color: var(--fg-2); max-width: 52ch; }
.proceso-paso .mono { display: block; margin-bottom: .9rem; }

/* ==========================================================================
   11. CASOS
   Rejilla asimétrica: el primer caso ocupa el doble. Nada de tres columnas
   iguales, que es lo que delata una plantilla.
   ========================================================================== */

.casos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.2rem);
}
.caso { position: relative; margin: 0; }
.caso-1 { grid-column: span 7; }
.caso-2 { grid-column: span 5; margin-top: clamp(0rem, 5vw, 5rem); }
.caso-3 { grid-column: span 5; align-self: start; }
.caso-4 { grid-column: span 7; align-self: start; }

.caso a {
  display: block; position: relative;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--bg-3);
}
.caso img {
  width: 100%;
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
.caso a:hover img { transform: scale(1.05); }

/* Velo oscuro para que el texto se lea sobre cualquier foto. */
.caso a::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,20,26,.92) 4%, rgba(4,20,26,.25) 45%, transparent 70%);
}
.caso-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1.3rem, 2.5vw, 2.2rem);
  display: flex; align-items: end; justify-content: space-between; gap: 1.5rem;
}
.caso-info h3 { font-size: clamp(1.15rem, 1.9vw, 1.75rem); }
.caso-info .mono { display: block; margin-bottom: .55rem; color: var(--menta); }
.caso-meta {
  flex: none; text-align: right;
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2);
}
.caso-meta b { display: block; font-size: .95rem; letter-spacing: -.01em; color: var(--fg); text-transform: none; }

/* ==========================================================================
   12. CIFRAS
   ========================================================================== */

.cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cifra {
  background: var(--bg-2);
  padding: clamp(2rem, 3.5vw, 3.2rem) clamp(1.2rem, 2.5vw, 2rem);
  transition: background-color .5s var(--ease);
}
.cifra:hover { background: var(--bg-3); }
.cifra b {
  display: block;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 600; letter-spacing: -.06em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cifra b em { font-style: normal; font-size: .5em; color: var(--menta); }
.cifra span {
  display: block; margin-top: .9rem; max-width: 20ch;
  font-family: var(--f-mono); font-size: .63rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--fg-3);
}

/* ==========================================================================
   13. TESTIMONIOS
   Una cita destacada grande + un carril con el resto.
   ========================================================================== */

.testi-destacado {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2rem, 4.5vw, 4rem);
  border: 1px solid var(--linea-2);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(255,102,0,.09), transparent 55%),
    var(--bg-3);
  overflow: hidden;
}
/* Comilla decorativa enorme, recortada por el borde de la tarjeta. */
.testi-destacado::before {
  content: '\201C';
  position: absolute; right: 3%; top: -.1em;
  font-family: var(--f-serif); font-size: clamp(9rem, 15vw, 16rem); line-height: 1;
  color: var(--menta); opacity: .09; pointer-events: none;
}
.testi-destacado blockquote { margin: 0; }
.testi-destacado q {
  font-family: var(--f-serif);
  font-size: clamp(1.4rem, 2.9vw, 2.5rem);
  line-height: 1.28; letter-spacing: -.02em;
  quotes: none; display: block;
}
.testi-destacado q::before, .testi-destacado q::after { content: ''; }

.estrellas { display: flex; gap: .25rem; margin-bottom: 1.6rem; }
.estrellas svg { width: 16px; height: 16px; color: var(--menta); }

.testi-firma {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2.2rem;
}
.testi-firma img {
  width: 54px; height: 54px; flex: none;
  border-radius: 50%; border: 1px solid var(--linea-2);
}
.testi-firma b { display: block; font-weight: 600; }
.testi-firma span { font-size: .85rem; color: var(--fg-2); }

.testi-cifra {
  border-left: 1px solid var(--linea);
  padding-left: clamp(1.5rem, 3vw, 2.6rem);
}
.testi-cifra b {
  display: block; font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 600; letter-spacing: -.05em; line-height: 1;
  background: var(--azul); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.testi-cifra span {
  display: block; margin-top: .7rem;
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}

/* -- Carril --------------------------------------------------------------- */

.testi-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
}
.testi-nav { display: flex; gap: .6rem; }
.testi-nav button {
  width: 48px; height: 48px;
  border: 1px solid var(--linea-2); border-radius: 50%;
  background: var(--vidrio); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), transform .35s var(--ease);
}
.testi-nav button:hover:not(:disabled) {
  background: var(--menta); border-color: var(--menta); color: #051220;
  transform: translateY(-2px);
}
.testi-nav button:disabled { opacity: .3; cursor: default; }
.testi-nav svg { width: 17px; height: 17px; }

.testi-carril {
  display: grid;
  grid-auto-flow: column;
  /* Ancho fijo a propósito: la última tarjeta queda cortada por el borde y
     eso es lo que le dice al visitante que el carril se desplaza. */
  grid-auto-columns: min(420px, 82vw);
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  /* El carril se sale del contenedor por la derecha: gesto de estudio. */
  margin-right: calc(var(--gutter) * -1);
  padding-right: var(--gutter);
}
.testi-carril::-webkit-scrollbar { height: 3px; }

.testi {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--bg-3);
  transition: border-color .45s var(--ease), transform .45s var(--ease), background-color .45s var(--ease);
}
.testi:hover {
  border-color: var(--linea-2);
  background: var(--bg-4);
  transform: translateY(-4px);
}
.testi p {
  font-size: 1.02rem; line-height: 1.6; color: var(--fg);
  margin-top: 1.2rem;
}
.testi .testi-firma { margin-top: auto; padding-top: 1.8rem; }
.testi .testi-firma img { width: 42px; height: 42px; }

/* Aviso de contenido de ejemplo. Se borra al poner testimonios reales. */
.aviso {
  display: flex; gap: .85rem; align-items: flex-start;
  margin-top: 2rem; padding: 1rem 1.2rem;
  border: 1px dashed var(--linea-2); border-radius: var(--r);
  font-size: .82rem; color: var(--fg-3);
}
.aviso svg { width: 17px; height: 17px; flex: none; color: var(--menta); margin-top: 2px; }

/* ==========================================================================
   14. FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--linea); }
.faq details {
  border-bottom: 1px solid var(--linea);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.7rem 0;
  cursor: pointer; list-style: none;
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  font-weight: 600; letter-spacing: -.02em;
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--menta); }
/* Signo + que gira hasta convertirse en −. */
.faq summary i {
  position: relative; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--linea-2);
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.faq summary i::before, .faq summary i::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px;
  background: currentColor;
  transition: transform .45s var(--ease), opacity .3s;
}
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i { transform: rotate(135deg); border-color: var(--menta); }
.faq details[open] summary i::after { opacity: 0; }
.faq details p {
  color: var(--fg-2); max-width: 66ch;
  padding-bottom: 1.8rem;
}

/* ==========================================================================
   15. CONTACTO
   ========================================================================== */

.contacto {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.contacto-datos { margin: 2.8rem 0 0; padding: 0; }
.contacto-datos > div {
  display: grid; grid-template-columns: 92px 1fr;
  gap: 1rem; align-items: baseline;
  padding: 1.05rem 0;
  border-top: 1px solid var(--linea);
}
.contacto-datos > div:last-child { border-bottom: 1px solid var(--linea); }
.contacto-datos dt {
  font-family: var(--f-mono); font-size: .61rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
}
.contacto-datos dd { margin: 0; }
.contacto-datos a { transition: color .3s var(--ease); }
.contacto-datos a:hover { color: var(--menta); }

/* Fila de la dirección: el texto a la izquierda y el enlace a Maps a la
   derecha, en la misma línea en escritorio (es el hueco que quedaba vacío
   junto al domicilio). En pantallas estrechas, donde no cabrían los dos
   lado a lado, se apilan. */
.contacto-direccion {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: .3rem 1.5rem;
}
.enlace-sm { font-size: .85rem; flex: none; white-space: nowrap; }

.garantias { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.2rem; }
.garantias span {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border-radius: 99px;
  border: 1px solid var(--linea); background: var(--vidrio);
  font-size: .78rem; color: var(--fg-2);
}
.garantias svg { width: 13px; height: 13px; color: var(--menta); }

/* -- Formulario ----------------------------------------------------------- */

.form {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--linea-2);
  border-radius: var(--r-lg);
  background: var(--bg-3);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.form-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.5rem; margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--linea);
}
.form-cab b { font-size: 1.05rem; }

.campos { display: grid; gap: 1.2rem; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.campo { display: flex; flex-direction: column; gap: .5rem; }
.campo > label, .grupo > legend {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
  padding: 0;
}
.campo input, .campo textarea, .campo select {
  width: 100%;
  padding: .95rem 1.1rem;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: rgba(4, 20, 26, .55);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.campo textarea { resize: vertical; min-height: 118px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--fg-3); opacity: .7; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--menta);
  background: rgba(4, 20, 26, .85);
  box-shadow: 0 0 0 3px rgba(255,102,0, .12);
}
.campo.error input, .campo.error textarea { border-color: #ff7a7a; }
.campo .msg { font-size: .76rem; color: #ff9b9b; min-height: 1.1em; }

/* Píldoras de selección: sustituyen a un <select> soso. */
.grupo { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.pildoras { display: flex; flex-wrap: wrap; gap: .5rem; }
.pildora { position: relative; }
.pildora input { position: absolute; opacity: 0; width: 0; height: 0; }
.pildora span {
  display: inline-block;
  padding: .6rem 1.05rem; border-radius: 99px;
  border: 1px solid var(--linea-2);
  font-size: .84rem; color: var(--fg-2);
  cursor: pointer;
  transition: all .3s var(--ease);
}
.pildora span:hover { border-color: var(--menta); color: var(--fg); }
.pildora input:checked + span {
  background: var(--menta); border-color: var(--menta);
  color: #051220; font-weight: 600;
}
.pildora input:focus-visible + span { outline: 2px solid var(--menta); outline-offset: 3px; }

/* Deslizador de unidades. */
.rango { display: flex; flex-direction: column; gap: .65rem; }
.rango-cab { display: flex; justify-content: space-between; align-items: baseline; }
.rango-val {
  font-family: var(--f-mono); font-size: .95rem; font-weight: 600;
  color: var(--menta); letter-spacing: .04em;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; padding: 0;
  background: var(--linea-2); border-radius: 99px; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--menta); border: 3px solid var(--bg-3);
  box-shadow: 0 0 0 1px var(--menta);
  transition: transform .2s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--menta); border: 3px solid var(--bg-3);
  box-shadow: 0 0 0 1px var(--menta);
}

/* Resumen que se rellena solo según lo que el visitante va marcando. */
.resumen {
  margin-top: 1.6rem; padding: 1.1rem 1.25rem;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: rgba(4, 20, 26, .5);
  font-size: .86rem; color: var(--fg-2);
}
.resumen b { color: var(--fg); font-weight: 600; }

.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .84rem; color: var(--fg-2); }
.check input { margin-top: .25rem; accent-color: var(--menta); width: 16px; height: 16px; flex: none; }
.check a { color: var(--menta); text-decoration: underline; text-underline-offset: 3px; }

.form-estado { min-height: 1.4em; font-size: .87rem; }
.form-estado.ok { color: var(--menta); }
.form-estado.ko { color: #ff9b9b; }

/* ==========================================================================
   16. PIE
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--linea);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  background: var(--bg-2);
}

.footer-marca {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, .7fr)) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.footer-marca p { color: var(--fg-2); max-width: 34ch; margin-top: 1.2rem; }

/* Solo separa las columnas APILADAS dentro de .footer-grupo. Sin acotar,
   la regla también pillaba a .footer-col-zona --que es hermana de
   .footer-col-contacto dentro de la rejilla-- y le metía 2,2rem de margen
   arriba: su título gris quedaba 35px más bajo que los demás. */
.footer-grupo .footer-col + .footer-col { margin-top: 2.2rem; }
.footer-col h4, .footer-cta h4 {
  font-family: var(--f-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 1.2rem;
}
.footer-col a { display: block; padding: .38rem 0; color: var(--fg-2); font-size: .92rem; transition: color .3s var(--ease); }
.footer-col a:hover { color: var(--menta); }

/* La dirección al pie, en su recuadro, cerrando la columna de contacto:
   hereda el aire de las tarjetas del sitio (fondo, borde, radio) y se
   ilumina al pasar por encima, como el resto de enlaces del pie. */
/* Va con "a." delante a propósito: dentro de la columna de contacto manda
   ".footer-col a { display: block }", que tiene la misma fuerza que
   ".footer-mapa" a secas y ganaba por ir antes en la hoja. Con el selector
   igualado y este bloque más abajo, el recuadro conserva su flex. */
a.footer-mapa {
  display: flex; align-items: flex-start; gap: .7rem;
  /* Cierra la columna de contacto, así que el aire va arriba y no abajo. */
  margin-top: 1.1rem;
  padding: .9rem 1rem;
  background: var(--bg-3);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  text-decoration: none;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
a.footer-mapa:hover { border-color: var(--linea-2); background: var(--bg-4); }
.footer-mapa-pin { flex: none; color: var(--menta); }
.footer-mapa-pin svg { width: 18px; height: 18px; display: block; }
.footer-mapa-txt { display: flex; flex-direction: column; gap: .2rem; }
.footer-mapa b { color: var(--fg); font-size: .9rem; }
.footer-mapa span { color: var(--fg-2); font-size: .84rem; line-height: 1.45; }
.footer-mapa .footer-mapa-ir {
  margin-top: .25rem;
  color: var(--menta); font-size: .8rem; font-weight: 600;
}

/* Bloque de conversión al pie: mismo peso visual que una columna de
   enlaces, pero con texto y botones en vez de una lista. */
.footer-cta p { color: var(--fg-2); font-size: .92rem; margin-bottom: 1.1rem; }
.footer-cta .btn { width: 100%; margin-bottom: .7rem; }
.footer-cta .footer-col { margin-top: 1.8rem; }
.footer-cta .footer-col p { margin-top: .5rem; margin-bottom: 0; font-size: .87rem; }

/* Logotipo gigante al pie: recurso clásico de estudio. */
.footer-firma {
  border-top: 1px solid var(--linea);
  padding-top: clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}
.footer-firma span {
  display: block;
  /* El cuerpo va en vw para que el logotipo cruce el ancho del contenedor
     casi de borde a borde en cualquier pantalla. */
  font-size: clamp(3.4rem, 20.5vw, 19rem);
  font-weight: 600; letter-spacing: -.06em; line-height: .85;
  color: transparent;
  background: linear-gradient(180deg, rgba(232,243,240,.13), transparent 82%);
  -webkit-background-clip: text; background-clip: text;
  white-space: nowrap;
}

.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 1rem; padding: 2rem 0;
  font-size: .8rem; color: var(--fg-3);
}
.footer-legal a { transition: color .3s var(--ease); }
.footer-legal a:hover { color: var(--menta); }

/* ==========================================================================
   17. ANIMACIONES DE ENTRADA
   Solo se activan si el JS ha arrancado (clase .js en <html>). Sin JS, el
   contenido se ve desde el principio: nada queda invisible por error.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal.visible { opacity: 1; transform: none; }

/* Titulares partidos en palabras: cada una sube desde su propia máscara.
   El padding compensa la máscara para que no recorte las colas de la "g",
   la "j" o la "p"; el margen negativo devuelve el espacio a la línea. */
.js .palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.js .palabra > i {
  display: inline-block; font-style: inherit;
  transform: translateY(105%);
  transition: transform .95s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .titular.visible .palabra > i { transform: none; }

/* Velo de entrada: se retira solo, nunca bloquea el contenido. */
.velo {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .7s var(--ease), visibility .7s;
}
.velo.fuera { opacity: 0; visibility: hidden; }
.velo svg { width: 46px; height: 46px; color: var(--menta); }
.velo .barra {
  position: absolute; bottom: 0; left: 0; height: 2px; width: 100%;
  background: var(--grad); transform-origin: 0 50%;
  animation: cargar 1.1s var(--ease) forwards;
}
@keyframes cargar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .hero-scroll { display: none; }

  /* Reparte el contenido por todo el alto del "pantallazo" (título+lead+
     botones, ver .hero-pantallazo más abajo) en vez de agruparlo en el
     centro: el título sube pegado arriba y los botones bajan pegados
     abajo, con el espacio libre en medio (margin-top:auto en las acciones
     hace que se coma todo el hueco sobrante). Para eso necesita ocupar de
     verdad todo el alto disponible, así que se cambia el centrado por
     defecto (align-items:center) de .hero y .hero-grid por stretch, solo
     en este media query. */
  .hero { align-items: stretch; }
  .hero-grid { align-items: stretch; }
  .hero-copy { position: relative; z-index: 1; max-width: 100%; }

  /* .hero-pantallazo agrupa eyebrow+título+lead+botones: es justo lo que
     debe caber en la primera pantalla, sin las cifras. En escritorio no
     existe como caja (display:contents, definido fuera de cualquier
     media query) así que no cambia nada ahí. Aquí sí es una caja real,
     de exactamente una pantalla de alto menos lo que ya reservan el
     padding-top y el padding-bottom de .hero (mismos valores que usa
     .hero ahora mismo): así el pantallazo llena la pantalla ni más ni
     menos, y .hero-specs, que viene justo después en el DOM, queda fuera
     de la primera pantalla sin necesidad de ocultarla ni de tocar su
     posición en el código. */
  .hero-pantallazo {
    display: flex; flex-direction: column;
    min-height: calc(100svh - clamp(7rem, 14vh, 10rem) - clamp(3rem, 8vh, 6rem));
  }
  .hero-acciones { margin-top: auto; padding-top: 2.2rem; }

  /* La escena 3D deja de ser un bloque aparte debajo del texto (obligaba a
     bajar dos pantallas para ver los botones) y pasa a ser fondo a sangre
     detrás de todo el hero, en baja opacidad. Los anillos se ocultan: están
     pensados para enmarcar un objeto centrado en su caja, no un fondo. */
  .hero-visual {
    position: absolute; inset: 0;
    max-width: none; width: 100%; height: 100%;
    aspect-ratio: auto; margin: 0;
    opacity: .3; pointer-events: none;
  }
  /* .hero-visual también lleva la clase .reveal: en cuanto entra en
     pantalla, .js .reveal.visible la sube a opacidad 1. Aquí la ganamos
     en especificidad para que se quede en .3 como fondo. */
  .js .hero-visual.reveal.visible { opacity: .3; }
  .hero-anillo { display: none; }

  .cab { grid-template-columns: 1fr; align-items: start; }
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tec { grid-template-columns: 1fr; }
  .sost { grid-template-columns: 1fr; }
  .sost-dato { right: 4%; bottom: -6%; }
  .proceso { grid-template-columns: 1fr; }
  .proceso-fijo { position: static; }
  .proceso-n { font-size: clamp(4rem, 16vw, 7rem); }
  .proceso-titulo { min-height: 0; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testi-destacado { grid-template-columns: 1fr; }
  .testi-cifra { border-left: 0; border-top: 1px solid var(--linea); padding: 1.8rem 0 0; }
  .contacto { grid-template-columns: 1fr; }
  .footer-marca { grid-template-columns: 1fr 1fr; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .casos > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
}

@media (max-width: 820px) {
  /* Menú a pantalla completa. */
  .nav {
    position: fixed; inset: 0;
    flex-direction: column; justify-content: center;
    gap: 1.6rem;
    background: rgba(4, 20, 26, .96);
    backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden;
    transition: opacity .45s var(--ease), visibility .45s;
  }
  .nav.abierto { opacity: 1; visibility: visible; }
  .nav-enlaces { flex-direction: column; gap: 1.6rem; }
  .nav a:not(.btn) { font-size: 1.5rem; letter-spacing: -.02em; color: var(--fg); }
  .nav-toggle { display: block; z-index: 2; }

  /* Cabecera más baja en móvil: aquí ya es solo logo + botón de menú, no
     hace falta el mismo aire que con la fila de enlaces de escritorio.
     Libera espacio en vh para que el pantallazo de la hero cunda más. */
  .site-header { padding-block: clamp(.6rem, 2vh, .9rem); }

  /* El pantallazo (título+lead+botones) recalcula su alto con los nuevos
     padding-top/padding-bottom, más ajustados que los de escritorio, para
     seguir llenando la pantalla ni más ni menos. */
  .hero { padding-top: clamp(4.25rem, 11vh, 5.5rem); padding-bottom: clamp(1.75rem, 5vh, 2.75rem); }
  .hero-pantallazo {
    min-height: calc(100svh - clamp(4.25rem, 11vh, 5.5rem) - clamp(1.75rem, 5vh, 2.75rem));
  }

  /* En dos columnas hay que rehacer los separadores: sin borde izquierdo en
     la columna 1 y con borde superior a partir de la segunda fila. */
  .hero-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-specs li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero-specs li:nth-child(even) { border-left: 1px solid var(--linea); }
  .hero-specs li:nth-child(n + 3) { border-top: 1px solid var(--linea); }
  .hero-ficha { right: 0; top: 2%; min-width: 0; padding: .9rem 1rem; }
  /* Sin tanto margen negativo: en móvil la tarjeta se saldría de pantalla. */
  .hero-foto { left: -3%; width: 46%; }
  .servicios { grid-template-columns: 1fr; }
  .dos { grid-template-columns: 1fr; }
  .materiales { grid-template-columns: 1fr 1fr; }

  /* Footer en móvil: todo en parejas de dos columnas para acortar el pie
     —"Impresión 3D" con "Servicio por zona" (12 enlaces, el bloque más
     largo) y "Materiales" con "Contacto"—, con menos separación entre
     filas que antes. Solo la marca y la llamada a la acción final van a
     ancho completo. .footer-grupo (el div que en escritorio agrupa
     "Impresión 3D" y "Materiales") se disuelve con display:contents para
     que sus dos columnas puedan colocarse cada una donde toca. */
  .footer-marca {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 5vw, 2.5rem);
    row-gap: 1.6rem;
  }
  .footer-grupo { display: contents; }
  .footer-marca > div:first-child { grid-column: 1 / -1; order: 1; }
  .footer-grupo > .footer-col:first-child { order: 2; margin-top: 0; }
  .footer-col-zona { order: 3; margin-top: 0; }
  .footer-grupo > .footer-col:last-child { order: 4; margin-top: 0; }
  .footer-col-contacto { order: 5; margin-top: 0; }
  .footer-cta { grid-column: 1 / -1; order: 6; }
}

@media (max-width: 520px) {
  .cifras { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn { width: 100%; }
  .hero-acciones { flex-direction: column; align-items: stretch; }
  .testi-barra { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   19. MOVIMIENTO REDUCIDO
   Si el sistema pide menos animación, se apaga todo lo decorativo. El
   contenido sigue completo y accesible.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .palabra > i { transform: none; }
  .grano, .aurora { display: none; }
  .cursor, .cursor-halo { display: none; }
  .testi-carril { scroll-behavior: auto; }
}

/* Impresión: fondo blanco y sin adornos. */
@media print {
  .ambiente, .grano, .site-header, .cursor, .cursor-halo, .progreso, .velo { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   20. SELECTOR DE IDIOMA (ES / CA)
   Cada texto bilingüe vive dos veces en el HTML, envuelto en [lang="es"] y
   [lang="ca"]. El español es el idioma por defecto (sin atributo en <html>);
   el catalán se activa con <html data-lang="ca">. No hay inyección de texto
   por JS: el JS solo cambia el atributo y recuerda la preferencia.
   ========================================================================== */

html:not([data-lang="ca"]) [lang="ca"] { display: none !important; }
html[data-lang="ca"] [lang="es"]       { display: none !important; }

.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; flex: none;
  border: 1px solid var(--linea-2); border-radius: 999px;
  background: var(--vidrio);
}
.lang-op {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: .4rem .8rem; border-radius: 999px;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em;
  color: var(--fg-3);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.lang-op:hover { color: var(--fg); }
html:not([data-lang="ca"]) .lang-op[data-lang-set="es"],
html[data-lang="ca"] .lang-op[data-lang-set="ca"] {
  background: var(--azul); color: #fff; font-weight: 600;
}

/* ==========================================================================
   21. GUÍA DE MATERIALES
   guia-materiales.html: asistente de 4 secciones en vertical -01 ¿para
   qué es la pieza?, 02 ¿qué nivel buscas?, la ficha del material
   elegido y la lista de los 12 materiales para ir directo a uno-. En
   escritorio, guia.js baja solo de la 01 a la 02 al responder, y de la
   02 a la ficha en cuanto hay material (ver site.js/guia.js); en móvil
   es el mismo asistente de siempre, sin desplazamiento automático entre
   preguntas. Las tarjetas y la ficha las pinta guia.js a partir de
   datos-materiales.js; aquí solo el aspecto.
   ========================================================================== */

/* Primera sección de una página sin hero de tres piezas: solo necesita
   hueco para no quedar tapada bajo la cabecera fija. */
.seccion-portada { padding-top: clamp(9rem, 18vh, 13rem); }

.guia-aviso {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.3rem 1.5rem;
  background: rgba(255, 102, 0, .08); border: 1px solid rgba(255, 102, 0, .3);
  border-radius: var(--r);
  color: var(--fg-2); font-size: .92rem;
  max-width: 66ch;
}
.guia-aviso svg { flex: none; width: 22px; height: 22px; color: var(--menta); margin-top: 2px; }

/* Primera sección de la página: necesita el mismo hueco que .seccion-portada
   para no quedar tapada bajo la cabecera fija. */
.guia-completa {
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
}
.guia-completa-cab {
  display: flex; flex-direction: column; gap: .6rem;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.5rem);
}
.guia-completa-titulo { font-size: var(--t-h2); }

/* Ficha central: título + descripción cuando aún no se ha elegido nada.
   Solo aparece en escritorio (ver más abajo); en móvil no hay hueco que
   llenar, así que se queda oculta. */
.guia-ficha-vacia { display: none; }
.guia-ficha-vacia h2 { font-size: var(--t-h3); margin-bottom: .5rem; }
.guia-ficha-vacia p { color: var(--fg-2); }

/* Lista de los 12 materiales para ir directo a uno sin pasar por las
   preguntas. En móvil va debajo de la ficha, en dos columnas como las
   tarjetas de "01 ¿Para qué es la pieza?"; en escritorio pasa a la
   columna de la derecha (ver la media query de más abajo). */
.guia-lista-materiales {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* Título "03": solo tiene sentido en móvil, donde la lista aparece en el
   flujo normal de la página; en escritorio la posición ya la explica
   (columna de la derecha, junto a la ficha). */
.guia-material-boton {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  padding: .7rem .9rem;
  background: var(--bg-3); border: 1px solid var(--linea); border-radius: var(--r);
  text-align: left; cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.guia-material-boton:hover { background: var(--bg-4); border-color: var(--linea-2); }
.guia-material-boton.activo {
  background: var(--bg-4); border-color: var(--azul);
  box-shadow: 0 0 0 1px var(--azul) inset;
}
.guia-material-boton b { font-size: .95rem; }
.guia-material-boton span { color: var(--fg-3); font-size: .78rem; }

.guia-paso-titulo {
  display: flex; align-items: baseline; gap: .8rem;
  margin-bottom: 1.5rem;
}
.guia-paso-titulo .mono { color: var(--menta); flex: none; }
.guia-paso-titulo h3 { font-size: var(--t-h3); }
/* Solo decora las preguntas a pantalla completa, en escritorio (ver la
   media query de más abajo): sin esto, el SVG sin medidas propias se
   renderizaba a su tamaño por defecto del navegador (enorme) en móvil. */
.guia-paso-icono { display: none; }

.guia-usos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.guia-niveles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.guia-op {
  display: flex; flex-direction: column; align-items: flex-start; gap: .7rem;
  padding: 1.4rem 1.3rem;
  background: var(--bg-3); border: 1px solid var(--linea); border-radius: var(--r);
  text-align: left; cursor: pointer;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              transform .35s var(--ease), opacity .35s var(--ease);
}
.guia-op:hover { background: var(--bg-4); transform: translateY(-2px); }
.guia-op.activo {
  background: var(--bg-4); border-color: var(--azul);
  box-shadow: 0 0 0 1px var(--azul) inset;
}
/* En cuanto se elige una opción, las demás de esa misma pregunta se
   apagan: así se ve de un vistazo cuál quedó marcada, en vez de que
   las 4 o 3 tarjetas sigan pesando igual en la pantalla. En el "¿Qué
   prefieres priorizar?" del asistente de la home (.asis-niveles) no:
   ahí se queda como estaba, todas a la misma opacidad. */
.guia-usos:has(.guia-op.activo) .guia-op:not(.activo),
.guia-niveles:not(.asis-niveles):has(.guia-op.activo) .guia-op:not(.activo) {
  opacity: .45;
}
.guia-usos:has(.guia-op.activo) .guia-op:not(.activo):hover,
.guia-niveles:not(.asis-niveles):has(.guia-op.activo) .guia-op:not(.activo):hover {
  opacity: .75;
}
.guia-op-icono { width: 26px; height: 26px; color: var(--menta); }
.guia-op > span { font-weight: 600; font-size: .95rem; }
.guia-op--nivel small { display: block; color: var(--fg-2); font-size: .82rem; margin-top: -.3rem; }

.guia-resultado {
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--bg-3); border: 1px solid var(--linea-2); border-radius: var(--r-lg);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  scroll-margin-top: 6rem;
}
.guia-resultado[hidden] { display: none; }
.guia-resultado-cab { margin-bottom: 1.8rem; }
.guia-resultado-cab h3 { font-size: var(--t-h2); }
.guia-resultado-cab p { color: var(--fg-2); margin-top: .4rem; }

.guia-resultado-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: 1.8rem;
  border-block: 1px solid var(--linea);
}
.guia-resistencia-fila {
  display: grid; grid-template-columns: 9rem 1fr 2.6rem;
  align-items: center; gap: .9rem;
  font-size: .85rem;
  margin-bottom: .85rem;
}
.guia-resistencia-fila span { color: var(--fg-2); }
.guia-resistencia-fila b { font-family: var(--f-mono); font-size: .78rem; color: var(--fg-3); text-align: right; }
.guia-barra {
  display: block; height: 6px; border-radius: 99px;
  background: var(--vidrio); overflow: hidden;
}
.guia-barra span { display: block; height: 100%; background: var(--grad); border-radius: 99px; }

.guia-datos { display: flex; flex-direction: column; gap: 1rem; }
.guia-datos > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--linea); padding-bottom: .7rem; }
.guia-datos dt { color: var(--fg-3); font-size: .78rem; }
.guia-datos dd { font-weight: 600; text-align: right; }
/* Acabado: el texto es una frase, no un dato suelto como los otros dos.
   Debajo del título en vez de al lado, así usa todo el ancho de la
   columna y envuelve en menos líneas. */
.guia-datos > .guia-dato-ancho { flex-direction: column; gap: .35rem; }
.guia-datos > .guia-dato-ancho dd { text-align: left; }

.guia-ventajas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  padding-top: 1.6rem;
}
.guia-ventajas h4 { font-size: .95rem; margin-bottom: .7rem; }
.guia-ventajas ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.guia-ventajas li { color: var(--fg-2); font-size: .88rem; padding-left: 1.2rem; position: relative; }
.guia-ventajas li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--menta);
}

.guia-resultado > .btn { margin-top: 2rem; }

/* -- Escritorio: 4 secciones en vertical ---------------------------------
   Va DESPUÉS de las reglas base de arriba a propósito: en CSS, a igual
   especificidad gana la que aparece más tarde. Aquí no se toca nada de
   .guia-usos/.guia-niveles/.guia-op/.guia-resultado: en escritorio se
   quedan con el aspecto espacioso de las reglas base (tarjetas de
   icono arriba, ficha completa...), el mismo que ya tenía antes de
   apretarlo todo en una sola pantalla. Lo único nuevo aquí es la
   separación visual entre las 4 secciones y que la ficha vacía y la
   lista de materiales, que en móvil no necesitan tratamiento especial,
   ganan algo más de aire y columnas en la pantalla ancha. */
@media (min-width: 901px) {
  .guia-completa-titulo { max-width: 26ch; }

  .guia-seccion {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--linea);
  }
  .guia-completa-grid > .guia-seccion:first-child {
    padding-top: 0;
    border-top: 0;
  }

  /* Las dos preguntas (01 y 02) llenan cada una toda la pantalla: el
     contenido se centra en el hueco, en vez de quedarse pegado arriba
     con aire de sobra debajo. Título, icono y tarjetas crecen un poco
     para que la pantalla no se vea vacía. */
  .guia-seccion--pantalla {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .guia-seccion--pantalla .guia-paso-titulo {
    justify-content: space-between;
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }
  .guia-seccion--pantalla .guia-paso-titulo h3 { font-size: var(--t-h2); }
  .guia-paso-icono {
    display: block;
    width: clamp(56px, 7vw, 88px); height: clamp(56px, 7vw, 88px);
    color: var(--azul); opacity: .22; flex: none;
  }
  .guia-seccion--pantalla .guia-usos,
  .guia-seccion--pantalla .guia-niveles { gap: 1.2rem; }
  .guia-seccion--pantalla .guia-op {
    padding: clamp(1.7rem, 2.4vw, 2.2rem) clamp(1.5rem, 2vw, 1.9rem);
    gap: 1rem;
  }
  .guia-seccion--pantalla .guia-op-icono { width: 34px; height: 34px; }
  .guia-seccion--pantalla .guia-op > span { font-size: 1.08rem; }
  .guia-seccion--pantalla .guia-op--nivel small { font-size: .9rem; }

  /* En móvil no hay ficha vacía (no hay hueco fijo que llenar); en
     escritorio sí ocupa su propia sección hasta que se elige material. */
  .guia-ficha-vacia:not([hidden]) { display: block; max-width: 60ch; }

  /* Con toda una sección para ella sola, la lista de materiales
     aprovecha el ancho: 4 columnas, como las tarjetas de la 01. */
  .guia-lista-materiales { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }

  /* El scroll-padding-top de la cabecera fija (ver "02. BASE") ya reserva
     el hueco de la cabecera para cualquier destino de scroll del sitio.
     El scroll-margin-top propio de la ficha sumaba un segundo hueco encima
     de ese, y con block:"center" (ver guia.js) ese doble hueco --al ser
     solo por arriba-- descentraba la ficha hacia abajo. En móvil se deja
     tal cual: ahí el destino sigue siendo "nearest", donde ese margen no
     tiene este efecto. */
  .guia-resultado { scroll-margin-top: 0; }
}

@media (max-width: 900px) {
  .guia-usos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guia-niveles { grid-template-columns: 1fr; }
  .guia-resultado-cuerpo { grid-template-columns: 1fr; }
  .guia-ventajas { grid-template-columns: 1fr; }
  .guia-resistencia-fila { grid-template-columns: 6.5rem 1fr 2.2rem; }
}

/* ==========================================================================
   22. COMPONENTES COMPARTIDOS DE LAS LANDINGS
   "Particulars i empreses" (dos públicos), "On estem" (mapa) y "Altres
   serveis" (enlaces cruzados entre landings). Reutilizan el mismo lenguaje
   visual que .servicios (tarjetas con separador de 1 px).
   ========================================================================== */

.publicos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.publico {
  padding: clamp(2rem, 4vw, 3.2rem);
  background: var(--bg);
  transition: background-color .5s var(--ease);
}
.publico:hover { background: var(--bg-3); }
.publico-icono {
  width: 46px; height: 46px; margin-bottom: 1.6rem;
  color: var(--menta);
}
.publico h3 { margin-bottom: .9rem; }
.publico p { color: var(--fg-2); margin-bottom: 1.4rem; }
.publico ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.publico li {
  color: var(--fg-2); font-size: .92rem; padding-left: 1.3rem; position: relative;
}
.publico li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg);
}

/* -- Botón que se anima solo ---------------------------------------------
   Los botones que llevan al cotizador o arrancan el recorrido no esperan
   al ratón: laten y les cruza un brillo cada pocos segundos. Es la única
   animación de la web que corre sola, así que se limita a esta clase y no
   toca al resto de .btn-principal (los de "volver", los del blog...).
   Todo el movimiento se apaga solo con "prefers-reduced-motion" (sección
   19), que ya pone las animaciones a duración cero. */

.btn-brilla {
  /* El halo de reposo: sin él, entre dos latidos el botón se quedaría
     plano. La animación lo hereda y lo ensancha. */
  box-shadow: 0 0 0 0 rgba(255, 102, 0, .45), 0 12px 34px -14px rgba(255, 102, 0, .75);
  animation: cta-latido 3.4s ease-in-out infinite;
}

/* El brillo: una banda inclinada que cruza de izquierda a derecha y luego
   espera fuera de cuadro. La recorta el overflow:hidden de .btn. */
.btn-brilla::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  /* Detrás del texto (el z-index negativo lo deja sobre el fondo naranja
     pero bajo el contenido), para que al pasar no lo borre. */
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  pointer-events: none;
  /* Se mueve con transform y no con "left": así lo resuelve la GPU y no
     obliga al navegador a recalcular la posición en cada fotograma. */
  transform: translateX(0) skewX(-18deg);
  /* Lineal a propósito: la curva --ease de la casa es una salida
     exponencial y se comía el barrido en los dos primeros fotogramas. Un
     brillo tiene que cruzar a velocidad constante para que se vea. */
  animation: cta-brillo 3.4s linear infinite;
}

/* Al pasar el ratón se para el latido: ya tienes la atención del cliente,
   y a partir de ahí manda el azul de :hover de .btn-principal. */
.btn-brilla:hover,
.btn-brilla:hover::before { animation-play-state: paused; }

@keyframes cta-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 102, 0, .45), 0 12px 34px -14px rgba(255, 102, 0, .75); }
  50%      { box-shadow: 0 0 0 14px rgba(255, 102, 0, 0), 0 16px 42px -12px rgba(255, 102, 0, .95); }
}

/* 422% es el ancho de la propia banda (45% del botón) que hay que recorrer
   para cruzarlo entero: de -60% a 130% del botón. */
@keyframes cta-brillo {
  0%        { transform: translateX(0) skewX(-18deg); }
  38%, 100% { transform: translateX(422%) skewX(-18deg); }
}

/* -- Botón de cada perfil ------------------------------------------------
   Dentro de las tarjetas "particular / empresa" el botón además se estira
   a todo el ancho: es el único paso que se pide en esa sección. */

.btn-perfil {
  width: 100%;
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  padding: 1.25rem 2rem;
  font-size: 1.02rem;
}

/* Las dos tarjetas van desfasadas: latiendo a la vez parecerían un aviso
   de error en vez de una invitación. */
.publico:nth-of-type(2) .btn-brilla,
.publico:nth-of-type(2) .btn-brilla::before { animation-delay: -1.7s; }

.otros-servicios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* Variante con 5 tarjetas en una sola hilera. Solo en escritorio: por
   debajo de 900px manda la cuadrícula base de .otros-servicios. */
@media (min-width: 901px) {
  .otros-servicios-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.otro-servicio {
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--bg);
  display: flex; flex-direction: column; gap: 1rem;
  transition: background-color .4s var(--ease);
}
.otro-servicio:hover { background: var(--bg-3); }
.otro-servicio svg { width: 32px; height: 32px; color: var(--menta); }
.otro-servicio h4 { font-size: 1.02rem; }
.otro-servicio span { color: var(--fg-3); font-size: .8rem; }
.otro-servicio .enlace { margin-top: auto; font-size: .85rem; }

.mapa-caja {
  border: 1px solid var(--linea-2); border-radius: var(--r-lg);
  overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-3);
}
.mapa-caja iframe {
  width: 100%; height: 100%; border: 0;
  filter: grayscale(.5) invert(.92) contrast(.88);
}

/* Pasos numerados simples, sin la cabecera fija de .proceso: para un
   resumen corto de 3-4 pasos junto a un CTA externo (cotizador, formulario). */
.pasos-simple {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.pasos-simple .mono { color: var(--menta); }
.pasos-simple h3 { margin: .9rem 0 .6rem; }
.pasos-simple p { color: var(--fg-2); }

/* -- "Imprime tu pieza en 3 pasos": el bloque más importante de la
   landing, así que ocupa más sitio que una fila de pasos cualquiera, y
   cada tarjeta y cada flecha se ilumina al aparecer, en secuencia
   (el retraso de cada una lo pone --d, igual que el resto de .reveal). */
.pasos4-fila {
  display: flex;
  align-items: stretch;
  gap: clamp(1.1rem, 2.4vw, 2rem);
  margin-top: clamp(3rem, 5.5vw, 4.5rem);
}
.pasos4-paso {
  flex: 1 1 0;
  min-width: 0;
  padding: clamp(2.4rem, 4vw, 3.6rem) clamp(1.8rem, 2.8vw, 2.6rem);
  background: var(--bg-3);
  border: 1px solid var(--linea-2);
  border-radius: var(--r-lg);
  text-align: left;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pasos4-paso:hover { background: var(--bg-4); transform: translateY(-3px); }
.pasos4-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.pasos4-n {
  display: flex; align-items: center; justify-content: center;
  flex: none; width: 60px; height: 60px;
  border: 1.5px solid var(--menta);
  border-radius: 50%;
  font-family: var(--f-mono); font-size: 1rem; font-weight: 700;
  letter-spacing: .03em; color: var(--menta);
}
.pasos4-icono {
  display: flex; align-items: center; justify-content: center;
  flex: none; width: 54px; height: 54px;
  border: 1.5px solid var(--azul);
  border-radius: 14px;
  color: var(--azul);
}
.pasos4-icono svg { width: 25px; height: 25px; }
.pasos4-paso h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); margin-bottom: .9rem; }
.pasos4-paso p { color: var(--fg-2); font-size: .96rem; line-height: 1.6; }
.pasos4-flecha {
  flex: none; align-self: center;
  width: 28px; height: 28px; color: var(--menta);
}

/* Presentación en secuencia: paso 1 se enciende, luego la flecha, luego
   el paso 2... El brillo es un animation aparte del fade del .reveal
   base, para que ambos corran a la vez con el mismo --d. */
.pasos4-paso.reveal.visible {
  animation: pasos4-luz-tarjeta 1.3s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
.pasos4-flecha.reveal {
  opacity: 0;
  transition: opacity .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.pasos4-flecha.reveal.visible {
  opacity: 1;
  animation: pasos4-luz-flecha 1.3s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes pasos4-luz-tarjeta {
  0%   { box-shadow: 0 0 0 0 rgba(255,102,0,0); border-color: var(--linea-2); }
  45%  { box-shadow: 0 0 46px 8px rgba(255,102,0,.3); border-color: var(--menta); }
  100% { box-shadow: 0 0 0 0 rgba(255,102,0,0); border-color: var(--linea-2); }
}
@keyframes pasos4-luz-flecha {
  0%   { filter: drop-shadow(0 0 0 rgba(255,102,0,0)); }
  45%  { filter: drop-shadow(0 0 10px rgba(255,102,0,.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(255,102,0,0)); }
}

/* En pantalla de escritorio, este bloque es el más importante de la
   landing: se le da bastante más presencia que al resto de tarjetas
   del sitio. */
@media (min-width: 1100px) {
  .pasos4-fila { gap: 2.4rem; margin-top: 5.5rem; }
  .pasos4-paso { padding: 4rem 3.1rem; }
  .pasos4-cab { margin-bottom: 2.4rem; }
  .pasos4-n { width: 72px; height: 72px; font-size: 1.15rem; border-width: 2px; }
  .pasos4-icono { width: 64px; height: 64px; border-radius: 16px; border-width: 2px; }
  .pasos4-icono svg { width: 30px; height: 30px; }
  .pasos4-paso h3 { font-size: 1.6rem; margin-bottom: 1.2rem; }
  .pasos4-paso p { font-size: 1.06rem; line-height: 1.65; }
  .pasos4-flecha { width: 34px; height: 34px; }
}

@media (max-width: 900px) {
  .publicos { grid-template-columns: 1fr; }
  .otros-servicios { grid-template-columns: 1fr 1fr; }
  .pasos-simple { grid-template-columns: 1fr; }
  .pasos4-fila { flex-direction: column; }
  .pasos4-flecha { transform: rotate(90deg); align-self: center; }
}
@media (max-width: 520px) {
  .otros-servicios { grid-template-columns: 1fr; }

  /* Con la tarjeta a todo el ancho, el icono arriba y el texto debajo
     desaprovecha el ancho: el icono pasa a la izquierda y el título+
     subtítulo a su derecha. "Ver más" queda debajo, ocupando las dos
     columnas. */
  .otro-servicio {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 1rem; row-gap: .5rem;
  }
  .otro-servicio svg { grid-column: 1; grid-row: 1; margin-top: .1rem; }
  .otro-servicio > div { grid-column: 2; grid-row: 1; }
  .otro-servicio .enlace { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
}


/* ==========================================================================
   23. BLOG
   Índice de artículos y páginas de artículo. Los "covers" de cada tarjeta
   son degradados con un icono, no fotos: así no hay que inventar imágenes
   de relleno y el conjunto se ve intencionado.
   ========================================================================== */

/* -- Filtros por categoría ------------------------------------------------ */

.blog-filtros {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.blog-filtro {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.05rem;
  border-radius: 99px;
  border: 1px solid var(--linea-2);
  background: transparent;
  color: var(--fg-2);
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.blog-filtro:hover { color: var(--fg); border-color: var(--azul); }
.blog-filtro[aria-pressed="true"] {
  background: var(--azul); border-color: var(--azul); color: #051220; font-weight: 600;
}
.blog-filtro i {
  font-style: normal; opacity: .6;
}
.blog-filtro[aria-pressed="true"] i { opacity: .75; }

/* -- Artículo destacado --------------------------------------------------- */

.blog-destacado {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--linea-2);
  border-radius: var(--r-lg);
  background: var(--bg-3);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.blog-destacado:hover { border-color: var(--azul); transform: translateY(-3px); }
.blog-destacado .blog-cover { aspect-ratio: 16 / 10; }
.blog-destacado h2 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); margin: .9rem 0 .8rem; }
.blog-destacado p { color: var(--fg-2); max-width: 54ch; }

/* -- Rejilla de artículos ------------------------------------------------- */

.blog-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}
.blog-tarjeta {
  display: flex; flex-direction: column;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--bg-3);
  overflow: hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease), background-color .4s var(--ease);
}
.blog-tarjeta:hover { border-color: var(--azul); transform: translateY(-3px); background: var(--bg-4); }
.blog-tarjeta-cuerpo { padding: clamp(1.3rem, 2.2vw, 1.8rem); display: flex; flex-direction: column; flex: 1; }
.blog-tarjeta h3 { margin: .85rem 0 .7rem; font-size: 1.12rem; line-height: 1.3; }
.blog-tarjeta p { color: var(--fg-2); font-size: .92rem; flex: 1; }
.blog-tarjeta[hidden] { display: none; }

/* -- Portada de degradado (sustituye a la foto) --------------------------- */

.blog-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-4);
}
.blog-cover::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--linea) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linea) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .8;
}
.blog-cover svg { position: relative; width: 34%; max-width: 78px; height: auto; color: var(--azul); opacity: .95; }
/* Un tinte distinto por categoría para que la rejilla no sea monótona. */
.blog-cover[data-tono="local"]   { background: linear-gradient(135deg, rgba(0,123,255,.22), var(--bg-4) 62%); }
.blog-cover[data-tono="material"]{ background: linear-gradient(135deg, rgba(255,102,0,.2), var(--bg-4) 62%); }
.blog-cover[data-tono="material"] svg { color: var(--menta); }
.blog-cover[data-tono="guia"]    { background: linear-gradient(135deg, rgba(51,149,255,.2), var(--bg-4) 62%); }
.blog-cover[data-tono="empresa"] { background: linear-gradient(135deg, rgba(0,123,255,.16), rgba(255,102,0,.12) 70%, var(--bg-4)); }
.blog-cover[data-tono="clasicos"]{ background: linear-gradient(135deg, rgba(255,102,0,.24), var(--bg-4) 62%); }
.blog-cover[data-tono="clasicos"] svg { color: var(--menta); }
.blog-cover[data-tono="precios"] { background: linear-gradient(135deg, rgba(0,123,255,.2), var(--bg-4) 62%); }
.blog-cover[data-tono="espana"]  { background: linear-gradient(135deg, rgba(51,149,255,.16), rgba(255,102,0,.14) 72%, var(--bg-4)); }

/* -- Etiqueta y metadatos ------------------------------------------------- */

.blog-etiqueta {
  display: inline-block;
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--azul);
}
.blog-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--linea);
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
}
.blog-destacado .blog-meta { border-top: 0; padding-top: 0; }

/* -- Página de artículo --------------------------------------------------- */

.articulo { max-width: 74ch; margin-inline: auto; }
.articulo > * + * { margin-top: 1.4rem; }
.articulo h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  margin-top: clamp(2.8rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
}
.articulo h3 { font-size: clamp(1.1rem, 1.7vw, 1.35rem); margin-top: 2.2rem; }
.articulo p { color: var(--fg-2); font-size: 1.04rem; line-height: 1.75; }
.articulo strong { color: var(--fg); font-weight: 600; }
.articulo ul, .articulo ol { color: var(--fg-2); padding-left: 1.3rem; font-size: 1.04rem; line-height: 1.75; }
.articulo li + li { margin-top: .6rem; }
.articulo li::marker { color: var(--azul); }
.articulo a:not(.btn) { color: var(--menta); text-decoration: underline; text-underline-offset: 3px; }

/* Tabla de datos dentro del artículo. */
.articulo-tabla { overflow-x: auto; margin-top: 1.8rem; }
.articulo-tabla table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 460px; }
.articulo-tabla th, .articulo-tabla td {
  text-align: left; padding: .85rem 1rem;
  border-bottom: 1px solid var(--linea);
}
.articulo-tabla th {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
  font-weight: 500;
}
.articulo-tabla td { color: var(--fg-2); }
.articulo-tabla tbody tr:hover td { background: var(--vidrio); color: var(--fg); }

/* Aviso o idea clave dentro del texto. */
.articulo-nota {
  padding: 1.4rem 1.6rem;
  border-left: 2px solid var(--azul);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--vidrio);
}
.articulo-nota p { margin: 0; color: var(--fg-2); }
.articulo-nota strong { color: var(--fg); }

/* Llamada a la acción al final del artículo. */
.articulo-cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--linea-2);
  border-radius: var(--r-lg);
  background: var(--bg-3);
  text-align: center;
}
.articulo-cta h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.articulo-cta p { margin: .9rem auto 1.6rem; max-width: 52ch; }
.articulo-cta .btn + .btn { margin-left: .7rem; }

/* Artículos relacionados al pie de la pieza. */
.blog-relacionados { margin-top: clamp(3.5rem, 7vw, 5.5rem); }

@media (max-width: 1100px) {
  .blog-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-destacado { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .blog-rejilla { grid-template-columns: 1fr; }
  .articulo-cta .btn { width: 100%; }
  .articulo-cta .btn + .btn { margin-left: 0; margin-top: .7rem; }
}


/* ==========================================================================
   24. PASOS CON VÍDEO
   Los tres pasos a la izquierda, en columna y pulsables; a la derecha el
   vídeo del paso elegido. Es un patrón de pestañas ARIA: la lista es un
   tablist y cada vídeo, su panel.
   ========================================================================== */

.pasos-video {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  /* "stretch" (el valor por defecto) es lo que hace que la columna del
     vídeo se estire hasta la altura de la de los pasos. */
  align-items: stretch;
}

/* -- Columna de pasos ----------------------------------------------------- */

.pasos-lista { display: flex; flex-direction: column; gap: .9rem; }

.paso-tab {
  position: relative;
  display: block; width: 100%;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--bg-3);
  text-align: left;
  cursor: pointer;
  transition: border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease);
}
.paso-tab:hover { border-color: var(--linea-2); background: var(--bg-4); }
.paso-tab[aria-selected="true"] {
  border-color: var(--menta);
  background: var(--bg-4);
  box-shadow: 0 0 34px -14px rgba(255, 102, 0, .55);
}

/* Filo de acento a la izquierda del paso activo. */
.paso-tab::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 2px;
  border-radius: 2px; background: var(--menta);
  transform: scaleY(0); transform-origin: 50% 50%;
  transition: transform .45s var(--ease);
}
.paso-tab[aria-selected="true"]::before { transform: scaleY(1); }

.paso-tab-cab {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.1rem;
}
.paso-tab-n {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--menta);
  font-family: var(--f-mono); font-size: .78rem; color: var(--menta);
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.paso-tab[aria-selected="true"] .paso-tab-n { background: var(--menta); color: #051220; }

.paso-tab-icono {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  margin-left: auto;
  border-radius: 12px;
  border: 1.5px solid var(--linea-2);
  color: var(--azul);
  transition: border-color .4s var(--ease);
}
.paso-tab-icono svg { width: 21px; height: 21px; }
.paso-tab[aria-selected="true"] .paso-tab-icono { border-color: var(--azul); }

.paso-tab h3 { margin-bottom: .65rem; font-size: 1.12rem; }
.paso-tab p { color: var(--fg-2); font-size: .93rem; line-height: 1.6; }

/* -- Columna del vídeo ---------------------------------------------------- */

/* El vídeo ocupa toda la altura de la columna de pasos. La cadena tiene
   que ser continua: la columna se estira con el grid, el panel visible
   la llena y el vídeo llena el panel. Por eso aquí no hay aspect-ratio;
   en móvil, donde no hay columna que igualar, se le devuelve el 16:9. */
.pasos-media { display: flex; }
.paso-panel { flex: 1; display: flex; }
.paso-panel[hidden] { display: none; }

.paso-video {
  position: relative;
  flex: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--linea-2);
  background: var(--bg-3);
}
.paso-video video,
.paso-video iframe {
  width: 100%; height: 100%;
  /* "contain" y no "cover": en escritorio esta caja se estira a la
     altura de la columna de pasos, que no es 16:9 como el vídeo, y con
     "cover" recortaba los laterales. Con "contain" se ve el vídeo
     entero, con el fondo oscuro rellenando el hueco sobrante. */
  object-fit: contain; border: 0; display: block;
}

/* Aviso de "sin sonido": solo aparece si el navegador ha rechazado el
   audio del recorrido guiado. Se coloca arriba, lejos de la barra de
   controles nativa, y no intercepta clics para no estorbar al vídeo. */
.paso-sin-sonido {
  position: absolute; top: .8rem; left: .8rem;
  z-index: 2;
  padding: .45rem .8rem;
  border-radius: 99px;
  background: rgba(4, 20, 26, .82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--linea-2);
  color: var(--fg);
  font-size: .74rem; line-height: 1;
  pointer-events: none;
}

/* Hueco a la espera del archivo de vídeo. Al poner el <video> real, este
   bloque se borra y ya está. */
.paso-video-hueco {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  text-align: center; padding: 1.5rem;
}
.paso-video-hueco::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--linea) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linea) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .7;
}
.paso-video-play {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  border: 1.5px solid var(--linea-2);
  background: var(--vidrio);
  backdrop-filter: blur(6px);
  color: var(--azul);
}
.paso-video-play svg { width: 24px; height: 24px; margin-left: 3px; }
.paso-video-hueco span {
  position: relative;
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
}

/* Cierre del recorrido: el paso final, ya con el enlace al cotizador.
   .destacado lo lleva el JS un par de segundos al terminar los vídeos. */
.pasos-cierre {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem clamp(1.2rem, 3vw, 2rem);
  padding: clamp(1.2rem, 2.5vw, 1.6rem) clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  transition: border-color .5s var(--ease), background-color .5s var(--ease);
}
.pasos-cierre p { margin: 0; flex: 1 1 18ch; color: var(--fg-2); font-size: .95rem; }
.pasos-cierre .btn { flex: none; }
.pasos-cierre.destacado {
  border-color: var(--menta);   /* --menta es el naranja de marca */
  background: var(--bg-3);
}

@media (max-width: 520px) {
  /* En móvil el texto encima y el botón a todo el ancho debajo. El párrafo
     deja de crecer: en columna, flex-grow lo estiraba y abría un hueco. */
  .pasos-cierre { flex-direction: column; align-items: stretch; text-align: left; }
  .pasos-cierre p { flex: 0 0 auto; }
}

@media (max-width: 980px) {
  .pasos-video { grid-template-columns: 1fr; }
  /* En columna única el vídeo va primero: se ve el paso elegido sin
     tener que desplazarse hasta el final de la lista. Aquí ya no hay
     columna de pasos al lado que igualar, así que recupera su 16:9. */
  .pasos-media { order: -1; display: block; }
  .paso-panel { display: block; }
  .paso-video { aspect-ratio: 16 / 9; }
}


/* ==========================================================================
   25. RESEÑAS REALES DE GOOGLE
   Tarjetas con reseñas copiadas literalmente del perfil de Google de la
   empresa. Son texto estático en el HTML: aquí no se inventa ni se retoca
   ninguna reseña, si hay que añadir más se copian igual desde Google.
   ========================================================================== */

.resenas-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}

.resena {
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--bg-3);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.resena:hover { border-color: var(--linea-2); transform: translateY(-3px); }

.resena-cab { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.resena-avatar {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%; object-fit: cover;
  background: var(--bg-4);
}
/* Cuando no hay foto, la inicial del nombre sobre un círculo. */
.resena-inicial {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: var(--bg-4); border: 1px solid var(--linea-2);
  font-weight: 600; color: var(--fg-2);
}
.resena-quien { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.resena-nombre {
  font-size: .93rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resena-fecha {
  font-family: var(--f-mono); font-size: .56rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
}

.resena-estrellas { display: flex; gap: .12rem; margin-bottom: .8rem; }
.resena-estrellas svg { width: 14px; height: 14px; color: #FFC107; }
.resena-estrellas svg.vacia { color: var(--linea-2); }

.resena p {
  color: var(--fg-2); font-size: .93rem; line-height: 1.62;
  /* Las reseñas largas se recortan para que la rejilla no se descuadre. */
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}

.resenas-pie {
  display: flex; justify-content: center;
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
}

/* ==========================================================================
   26. ASISTENTE DE MATERIAL (home)
   El mismo recomendador de la guía, pero dentro del recorrido de la home:
   entre el último vídeo y el botón del cotizador. Reutiliza .guia-usos,
   .guia-niveles y .guia-op; aquí solo va lo que cambia.
   ========================================================================== */

/* La segunda pregunta espera a que haya respuesta en la primera: así el
   visitante solo ve una decisión cada vez. */
.asis-espera { opacity: .4; pointer-events: none; transition: opacity .4s var(--ease); }

.asis-pregunta {
  display: flex; align-items: baseline; gap: .8rem;
  margin-bottom: 1.2rem;
}
.asis-pregunta .mono { color: var(--menta); flex: none; }
.asis-pregunta h3 { font-size: var(--t-h3); }

/* Las tarjetas de uso también llevan subtítulo, no solo las de nivel. */
.asis-op small {
  display: block; color: var(--fg-2); font-size: .82rem;
  margin-top: -.3rem; line-height: 1.4;
}

.asis-usos, .asis-niveles { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Al terminar los vídeos, el recorrido guiado baja hasta aquí y enciende
   un momento las tarjetas de la primera pregunta: "te toca a ti". */
.asis.destacado .asis-usos .guia-op { border-color: rgba(255, 102, 0, .5); }

/* -- Resultado: ficha corta, no la ficha técnica entera ----------------- */
.asis-resultado {
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  background: var(--bg-3); border: 1px solid var(--linea-2); border-radius: var(--r-lg);
  scroll-margin-top: 6rem;
}
.asis-resultado[hidden] { display: none; }

.asis-res-cab {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .6rem 1rem; margin-bottom: .8rem;
}
.asis-res-eyebrow {
  flex-basis: 100%;
  color: var(--menta); letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: .3rem;
}
.asis-res-cab h3 { font-size: var(--t-h2); line-height: 1; }
.asis-res-temp {
  font-family: var(--f-mono); font-size: .78rem; color: var(--fg-2);
  padding: .35rem .7rem; border: 1px solid var(--linea-2); border-radius: 99px;
  white-space: nowrap;
}
.asis-res-lead { color: var(--fg-2); max-width: 60ch; }

.asis-res-cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
}
.asis-res-para h4 {
  font-size: .8rem; color: var(--fg-3); font-weight: 600;
  margin-bottom: .7rem; letter-spacing: .04em; text-transform: uppercase;
}
.asis-res-para p { color: var(--fg-2); font-size: .92rem; }

.asis-acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
  margin-top: 1.8rem;
}
.asis-acciones .btn-texto {
  color: var(--fg-2); font-size: .9rem; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: var(--linea-2);
  transition: color .3s var(--ease);
}
.asis-acciones .btn-texto:hover { color: var(--menta); }

/* -- Salida de emergencia: el caso raro se resuelve por WhatsApp -------- */
/* Los 12 materiales bajo el resultado: el atajo para quien ya sabe lo que
   busca. Reutiliza .guia-lista-materiales y .guia-material-boton de la
   guía, que aquí son enlaces en vez de botones; por eso hace falta quitar
   el subrayado y fijar el color, que en un <a> no vienen dados. */
.asis-fichas { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.asis-fichas-cab {
  margin-bottom: 1rem;
  color: var(--fg-2); font-size: .92rem;
}
.asis-fichas .guia-lista-materiales { margin-bottom: 0; }
.asis-fichas .guia-material-boton {
  color: var(--fg);
  text-decoration: none;
}

.asis-ayuda {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: 1.1rem 1.3rem;
  border: 1px dashed var(--linea-2); border-radius: var(--r);
}
.asis-ayuda p { flex: 1 1 24ch; color: var(--fg-2); font-size: .92rem; }
.asis-ayuda svg { flex: none; width: 20px; height: 20px; color: var(--menta); }

@media (max-width: 900px) {
  .asis-usos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asis-niveles { grid-template-columns: 1fr; }
  .asis-res-cuerpo { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* En el móvil, una columna: icono a la izquierda y texto a la derecha,
     el mismo patrón que "Más allá de imprimir". Ocho tarjetas apiladas con
     el icono encima alargaban la página medio pantallazo de más. */
  .asis-usos { grid-template-columns: 1fr; }
  .asis-op {
    display: grid; grid-template-columns: 26px minmax(0, 1fr);
    column-gap: .9rem; row-gap: .15rem; align-items: center;
    padding: 1rem 1.1rem;
  }
  .asis-op .guia-op-icono { grid-row: 1 / span 2; }
  .asis-op > span { grid-column: 2; }
  .asis-op small { grid-column: 2; margin-top: 0; }
  .asis-acciones .btn { width: 100%; justify-content: center; }
  .asis-ayuda .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   27. EQUIPO
   Las dos caras del taller, encima del mapa. Misma idea que las tarjetas de
   reseña o de público (foto o inicial arriba, texto debajo), pero con más
   peso: aquí la foto manda, porque lo que se vende es que detrás hay dos
   personas concretas y no un call-center.
   ========================================================================== */

/* -- Cabecera centrada ---------------------------------------------------
   Esta sección rompe a propósito con la cabecera en dos columnas del resto
   de la página: aquí no hay etiqueta lateral, el titular va centrado y en
   serif. Es la única sección sobre personas, y centrarla la separa del
   catálogo de producto que tiene encima y debajo. */

.equipo-cab {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

/* La rayita de encima del titular: el mismo recurso que el filete superior
   de .cab, pero corto y centrado. */
.equipo-regla {
  display: block;
  width: 3.5rem; height: 1px;
  margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
  background: var(--linea-2);
}

.equipo-titulo {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  letter-spacing: -.02em;
  line-height: 1.08;
  /* Sin "balance": así la primera línea se llena y el nombre del taller cae
     entero a la segunda, en vez de partirse por la mitad. */
  text-wrap: pretty;
  max-width: 20ch;
  margin-inline: auto;
}
.equipo-titulo em { font-style: normal; color: var(--menta); }

.equipo-intro {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--fg-2);
  font-size: .95rem; line-height: 1.7;
}
.equipo-intro strong { color: var(--fg); font-weight: 600; }

/* -- Rejilla -------------------------------------------------------------
   Más estrecha que el ancho de página: dos fichas grandes centradas pesan
   más que dos fichas estiradas de borde a borde. */

.equipo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  max-width: 58rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

.equipo-ficha {
  display: flex; flex-direction: column;
  background: var(--bg-3);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.equipo-ficha:hover { border-color: var(--linea-2); transform: translateY(-3px); }

/* -- Retrato ------------------------------------------------------------- */

.equipo-foto {
  position: relative;
  aspect-ratio: 4 / 3.7;
  background: var(--bg-4);
  overflow: hidden;
}
.equipo-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Las caras suelen quedar en la mitad de arriba del encuadre: recortando
     por el centro se cortaban por la barbilla. */
  object-position: 50% 22%;
  /* En blanco y negro, como el resto de la gráfica del taller: quita el
     ruido de color de las fotos y las iguala aunque estén hechas en sitios
     y días distintos. Al pasar el ratón recupera algo de color. */
  filter: grayscale(1) contrast(1.05);
  transition: filter .5s var(--ease), transform .6s var(--ease);
}
.equipo-ficha:hover .equipo-foto img {
  filter: grayscale(.35) contrast(1.05);
  transform: scale(1.03);
}

/* Sin foto todavía: en vez de un hueco roto, la inicial en grande sobre el
   mismo fondo, igual que hacen las tarjetas de reseña. */
.equipo-inicial {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif);
  font-size: clamp(4rem, 12vw, 7rem);
  color: var(--fg-3); opacity: .45;
  user-select: none;
}

.equipo-etiqueta {
  position: absolute; top: 1rem; left: 1rem;
  padding: .35rem .7rem;
  border-radius: 4px;
  background: var(--menta); color: #051220;
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
}
.equipo-n {
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--f-mono); font-size: .7rem;
  color: var(--fg-2);
}

/* -- Texto --------------------------------------------------------------- */

.equipo-datos {
  display: flex; flex-direction: column;
  flex: 1;
  padding: clamp(1.4rem, 2.5vw, 2rem);
}
.equipo-datos h3 {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  letter-spacing: -.01em;
}
.equipo-rol {
  margin-top: .5rem;
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--menta);
}

/* La cita, con la barra naranja a la izquierda: es la frase con la que cada
   uno resume cómo trabaja, lo que más se recuerda de la ficha. */
.equipo-cita {
  margin: 1.4rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--menta);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.02rem; line-height: 1.5;
  color: var(--fg);
}

.equipo-bio {
  margin-top: 1.3rem;
  color: var(--fg-2);
  font-size: .92rem; line-height: 1.65;
}
.equipo-bio strong { color: var(--fg); font-weight: 600; }

/* Pie de la ficha: se pega abajo y lleva su propio filete, para que las dos
   fichas lo tengan a la misma altura aunque una biografía sea más larga que
   la otra. La flecha se va a la derecha y avanza al pasar el ratón. */
.equipo-linkedin {
  display: flex; align-items: center; gap: .55rem;
  margin-top: auto;
  padding-top: 1.3rem;
  border-top: 1px solid var(--linea);
  color: var(--menta);
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
}
.equipo-in {
  width: 14px; height: 14px;
  flex: none;
  fill: currentColor;
}
.equipo-flecha {
  margin-left: auto;
  font-size: .9rem;
  transition: transform .35s var(--ease);
}
.equipo-linkedin:hover .equipo-flecha { transform: translateX(4px); }

@media (max-width: 820px) {
  .equipo { grid-template-columns: 1fr; }
  .equipo-foto { aspect-ratio: 16 / 10; }
  .equipo-titulo { max-width: none; }
}

/* La foto del taller, encima del mapa en "Dónde estamos". */
.mapa-foto {
  margin: 0 0 1.2rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--bg-3);
}
.mapa-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}