/* ==========================================================================
   GASCA MONTAJES — home.css
   Estilos exclusivos de la página de inicio. Depende de base.css.

   Tema claro corporativo: la página respira sobre #f5f5f5 y el peso visual
   lo ponen el hero y el CTA final, en degradado azul.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — sección de contraste
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Pantalla completa: la cabecera va en overlay (fixed) y no ocupa hueco, así
     que el hero empieza arriba del todo y el padding le deja sitio al menú. */
  min-height: 100svh;
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
  background: var(--deg-contraste);
  color: rgba(255, 255, 255, 0.9);
  --acento-linea: var(--azul-suave);
}

/* La rejilla en perspectiva, los haces de luz y la viñeta que había aquí los
   sustituye la foto de fondo (.hero-foto + .hero-velo, en base.css). Sobre una
   foto real todo aquello era ruido, y la rejilla animada además costaba pintado
   en cada frame. */

/* --------------------------------------------------------------------------
   1 bis. Carrusel del hero
   Fundido cruzado entre fotos apiladas. Todas ocupan la misma caja absoluta,
   así que no hay salto de layout al cambiar: sólo cambia la opacidad.
   -------------------------------------------------------------------------- */
.hero__carrusel {
  position: absolute;
  /* Sobredimensionado arriba y abajo: el parallax (site.js) desplaza el
     carrusel entero, y este colchón del ~9% es lo que evita que asome el borde
     de la foto al moverse. La caja del hero lleva overflow:hidden, así que lo
     que sobra no se ve. */
  top: -12%;
  left: 0;
  right: 0;
  height: 124%;
  z-index: -2;
  overflow: hidden;
  will-change: transform;
}
/* Dentro del wrapper sobredimensionado, cada foto vuelve a llenarlo exacto: el
   colchón lo pone el wrapper (que es quien se mueve), no las fotos. */
.hero__carrusel .hero-foto {
  top: 0;
  height: 100%;
}
.hero__carrusel .hero-foto {
  /* z-index auto: ya están dentro del envoltorio, que es quien se coloca en -2.
     Dejarlas en -2 aquí las mandaría detrás del propio envoltorio. */
  z-index: auto;
  opacity: 0;
  /* Si cambias este tiempo, cambia también FUNDIDO en js/home.js: es quien
     espera a que la foto sea invisible para retirarle el zoom. */
  transition: opacity 1000ms ease-in-out;

  /* Sólo aquí: la foto va sin filtro. En los heros interiores se desatura para
     que no compita con el azul, pero la portada gana con la foto a su color. El
     contraste del titular lo sostienen el velo y el backdrop-filter de la caja,
     no el filtro de la imagen. */
  filter: none;
}
.hero__carrusel .hero-foto.is-activa { opacity: 1; }

/* Zoom lento: el movimiento es lo que separa un hero con foto de un hero con
   fondo.

   Va en una clase APARTE de .is-activa, y no en ella, por un motivo concreto:
   .is-activa controla la opacidad y se quita al empezar el fundido, con la foto
   todavía a la vista. Si el zoom colgara de esa misma clase, al quitarla se
   perdería la animación y el transform saltaría de golpe a scale(1) — un tirón
   visible justo durante el fundido. Con la clase separada, la foto que sale
   sigue moviéndose mientras se desvanece y js/home.js le retira .is-zoom sólo
   cuando ya es invisible.

   linear y no ease-out: con ease-out casi todo el recorrido se gasta en los
   primeros segundos y el resto del ciclo la imagen parece congelada, como si la
   animación hubiera terminado a medias. */
/* 5200ms = ESPERA (4200) + FUNDIDO (1000) de js/home.js: el zoom dura
   exactamente lo que la foto está en pantalla, ni más ni menos. */
.hero__carrusel .hero-foto.is-zoom {
  animation: hero-zoom 5200ms linear both;
}
@keyframes hero-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Velo propio de la portada: mucho más liviano que el de las interiores.

   Quitar el filtro a la foto no servía de nada mientras el velo le echaba
   encima un azul al 55-75% de punta a punta: la foto seguía siendo un fondo
   azul. Aquí sólo quedan dos bandas suaves —arriba, para que se lean los
   enlaces de la cabecera en overlay; abajo, para cerrar la sección— más un
   halo difuso justo detrás de la columna de texto. El resto de la foto se ve
   prácticamente a su color.

   El halo va AQUÍ y no en un ::before de la columna de texto, que es donde lo
   puse primero: un radial-gradient se recorta en la caja de su elemento, y la
   elipse no llegaba a transparente antes de ese borde. Resultado: un corte
   seco: una costura vertical a la izquierda, visible en la foto de la
   refinería. El velo ocupa el hero entero, así que no tiene borde donde
   cortar.

   Un degradado lateral no sirve, por cierto: la columna va centrada
   (max-width 980px), o sea del 16% al 84% del ancho. No hay «mitad izquierda»
   que oscurecer. */
.hero .hero-velo {
  background:
    radial-gradient(ellipse 58% 62% at 40% 46%,
      rgba(3, 46, 78, 0.80) 0%,
      rgba(3, 46, 78, 0.66) 40%,
      rgba(3, 46, 78, 0.30) 70%,
      rgba(3, 46, 78, 0) 92%),
    linear-gradient(to bottom,
      rgba(3, 46, 78, 0.55) 0%,
      rgba(3, 46, 78, 0.10) 24%,
      rgba(3, 46, 78, 0.08) 60%,
      rgba(3, 46, 78, 0.5) 100%);
}

.hero__inner {
  position: relative;
  padding-block: var(--e-9) var(--e-11);
  max-width: 980px;
  margin-inline: auto;
  width: 100%;
}

/* Entradas escalonadas del hero (sin IntersectionObserver: ya está en viewport).
   Quien entra es la caja, no el h1 de dentro: animando el titular, el texto
   se deslizaba por dentro de una caja quieta. */
.hero__titulo,
.hero__lead,
.hero__acciones,
.hero__sellos {
  animation: hero-entrada 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.hero__titulo            { animation-delay: 140ms; }
.hero__lead              { animation-delay: 380ms; }
.hero__acciones          { animation-delay: 520ms; }
.hero__sellos            { animation-delay: 640ms; }

@keyframes hero-entrada {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* El titular no entra como los demás: se descubre con una máscara que sube
   mientras el texto asoma desde abajo. Es el momento autorado del hero —el
   resto entra con un fundido tranquilo detrás—. clip-path en vez de opacidad
   sola: la línea de corte da carácter, no es un fundido más.
   El estado final lleva insets negativos para no recortar ni la sombra ni los
   trazos del texto una vez quieto. */
.hero__titulo {
  animation: hero-titulo 1100ms cubic-bezier(0.16, 1, 0.3, 1) 140ms backwards;
}
@keyframes hero-titulo {
  from { opacity: 0; transform: translateY(0.5em); clip-path: inset(105% 0 -45% 0); }
  to   { opacity: 1; transform: none;             clip-path: inset(-45% -12% -45% -12%); }
}

/* El antetítulo («Cartagena · Murcia · +20 años») y la caja azul del titular se
   han quitado de la portada. La caja tapaba justo el trozo de foto que más se
   mira y se leía como un parche pegado encima; el antetítulo repetía lo que ya
   dice el propio titular ahora que nombra Cartagena. */

.hero__titulo {
  font-size: var(--txt-hero);
  line-height: 0.98;
  letter-spacing: 0.01em;
  margin-bottom: var(--e-5);
  color: var(--blanco);
  /* Sin caja detrás, el contraste lo sostienen el halo del velo y esta sombra.
     Es más marcada que la del lead porque el titular es lo primero que se lee
     y cae sobre la parte alta de la foto, donde suele haber cielo. */
  text-shadow: 0 2px 18px rgba(3, 46, 78, 0.65);
}
/* La segunda línea iba en degradado hasta --azul-suave y caía a 2,47:1: por
   debajo del 3:1 que pide el texto grande. En blanco sólido se lee siempre;
   el peso visual lo da el tamaño, no el color. */
.hero__titulo-acento {
  color: var(--blanco);
}

.hero__lead {
  font-size: var(--txt-lg);
  line-height: 1.7;
  /* Sobre foto, no sobre azul plano: el 85% de antes restaba contraste justo
     donde menos sobra. */
  color: rgba(255, 255, 255, 0.94);
  /* 52 y no 62: a tamaño XL, 62ch son líneas de más de 800px —demasiado largas
     para leer de un tirón, y además el renglón se salía del halo y terminaba
     sobre las zonas claras de la foto (medido: 2.3:1). */
  max-width: 52ch;
  margin-bottom: var(--e-7);
  /* Sombra corta y suave: el halo cubre el grueso, pero en las fotos con cielo
     los últimos renglones caen sobre zonas claras. Esto no sale en la medición
     de contraste (que lee el fondo con el texto oculto) pero sí se ve. */
  text-shadow: 0 1px 12px rgba(3, 46, 78, 0.5);
}
.hero__lead strong { color: var(--blanco); font-weight: 700; }
@media (min-width: 768px) {
  .hero__lead { font-size: var(--txt-xl); }
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-bottom: var(--e-8);
}
/* El primario azul no se vería sobre el hero azul: aquí va en blanco */
.hero__acciones .btn--primario {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--azul-oscuro);
}
.hero__acciones .btn--primario:hover {
  background: var(--azul-suave);
  border-color: var(--azul-suave);
  color: var(--azul-oscuro);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
@media (max-width: 480px) {
  .hero__acciones .btn { flex: 1 1 100%; }
}

.hero__sellos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}
.hero__sellos li {
  padding: var(--e-1) var(--e-4);
  font-family: var(--fuente-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-sm);
}
.hero__sellos .hero__sello--destacado {
  color: var(--azul-oscuro);
  background: var(--blanco);
  border-color: var(--blanco);
  font-weight: 700;
}

/* --- Pista de scroll --- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--e-5);
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  padding: var(--e-2);
  animation: hero-entrada 900ms cubic-bezier(0.16, 1, 0.3, 1) 900ms backwards;
}
/* Se aparta en cuanto el hero es muy bajo: en apaisado de móvil estorbaría a
   los botones. */
@media (max-height: 640px) { .hero__scroll { display: none; } }

.hero__scroll-linea {
  position: relative;
  display: block;
  width: 1px;
  height: 52px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
}
/* La luz que recorre la línea hacia abajo: un tramo con degradado que baja en
   bucle. Se detiene solo con prefers-reduced-motion (regla global de base.css),
   y al alejarse el hero deja de pintarse. */
.hero__scroll-linea::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 55%;
  background: linear-gradient(to bottom, transparent, var(--azul-suave));
  animation: hero-scroll-cue 1900ms ease-in-out infinite;
}
@keyframes hero-scroll-cue {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(280%); }
}

/* --------------------------------------------------------------------------
   2. Estadísticas — franja blanca con tarjetas
   -------------------------------------------------------------------------- */
.estadisticas {
  position: relative;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  padding-block: var(--e-8);
}
.estadisticas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--deg-azul);
}

.estadisticas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-5);
}
@media (max-width: 900px) { .estadisticas__grid { grid-template-columns: repeat(2, 1fr); gap: var(--e-6); } }
@media (max-width: 460px) { .estadisticas__grid { grid-template-columns: 1fr; } }

.estadistica {
  position: relative;
  padding-left: var(--e-5);
  border-left: 3px solid var(--borde);
  transition: border-color var(--t-media);
}
.estadistica:hover { border-left-color: var(--azul); }

.estadistica__cifra {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--fuente-titulo);
  font-size: clamp(2.75rem, 1.8rem + 3.6vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--texto-fuerte);
  font-variant-numeric: tabular-nums;
}
.estadistica__num--cero {
  background: var(--deg-azul);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.estadistica__sufijo { color: var(--azul); font-size: 0.6em; }

.estadistica__etiqueta {
  margin-top: var(--e-3);
  font-family: var(--fuente-titulo);
  font-size: var(--txt-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fuerte);
}
.estadistica__detalle {
  margin-top: var(--e-1);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   3. Destacamos en
   -------------------------------------------------------------------------- */
/* 5 tarjetas en 3 columnas visuales: rejilla de 6 columnas donde cada tarjeta
   ocupa 2. Las dos últimas se colocan desplazadas una columna y quedan
   centradas en la segunda fila. Se hace con `grid-column`, no con transform,
   porque .reveal y :hover ya usan la propiedad transform en este mismo nodo. */
.destacamos__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--e-5);
}
.destacamos__grid > * { grid-column: span 2; }
/* Antes había cinco servicios y las tarjetas 4 y 5 se centraban a mano para no
   dejar un hueco suelto en la segunda fila. Con seis eso estorbaba: empujaba la
   sexta a una tercera fila ella sola (3 + 2 + 1). Seis tarjetas llenan 3 + 3
   sin ayuda, así que el apaño se ha quitado.
   Si algún día vuelve a haber un número impar de servicios, habrá que centrar
   la última fila otra vez. */
@media (max-width: 980px) {
  .destacamos__grid { grid-template-columns: repeat(2, 1fr); }
  .destacamos__grid > * { grid-column: auto; }
}
@media (max-width: 620px) {
  .destacamos__grid { grid-template-columns: 1fr; }
}

.servicio {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
  transition: transform var(--t-media), border-color var(--t-media), box-shadow var(--t-media);
}
/* Barra superior que se despliega en hover */
.servicio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--deg-azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-media);
  z-index: 1;
}
.servicio:hover {
  transform: translateY(-6px);
  border-color: var(--azul-suave);
  box-shadow: var(--sombra-lg);
}
.servicio:hover::before { transform: scaleX(1); }
.servicio:focus-within { border-color: var(--azul); }

.servicio__enlace {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

/* --- Foto + sello ---
   La foto manda la altura con aspect-ratio; el icono se apoya sobre su borde
   inferior, montado a caballo entre foto y texto. */
.servicio__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--deg-contraste);   /* respaldo mientras carga o si falta */
}
.servicio__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-lenta);
}
.servicio:hover .servicio__img { transform: scale(1.05); }

/* Velo: el sello es azul y necesita separarse de una foto clara */
.servicio__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 46, 78, 0.55) 0%, transparent 55%);
}

.servicio__icono {
  position: absolute;
  z-index: 1;
  left: var(--e-4);
  /* Dentro de la foto, no a caballo entre foto y texto: .servicio__media lleva
     overflow:hidden (lo necesita el zoom de la imagen) y todo lo que asome por
     su borde se recorta. Se veían los sellos cortados por la mitad. */
  bottom: var(--e-4);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--blanco);
  background: var(--deg-azul);
  border: 2px solid var(--blanco);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-md);
  transition: transform var(--t-media);
}
/* El tamaño del icono de dentro NO se fija aquí: vive junto al resto del
   sistema de iconos, al final de base.css. Tenerlo en dos hojas es garantía de
   que un día se cambie una y no la otra. */
.servicio:hover .servicio__icono { transform: translateY(-3px) scale(1.06); }

.servicio__cuerpo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--e-5);
}

.servicio__titulo {
  font-size: var(--txt-lg);
  margin-bottom: var(--e-3);
  transition: color var(--t-rapida);
}
.servicio:hover .servicio__titulo { color: var(--azul); }

.servicio__texto {
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  line-height: 1.7;
  margin-bottom: var(--e-5);
  flex-grow: 1;
}

.servicio__cta { margin-top: auto; font-size: var(--txt-sm); }
.servicio:hover .servicio__cta { gap: var(--e-3); }
.servicio:hover .servicio__cta::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. MEPOC
   -------------------------------------------------------------------------- */
.mepoc { position: relative; overflow: hidden; }

.mepoc__linea {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--e-4);
  margin-top: var(--e-8);
}

.mepoc__fase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--e-6);
}

/* Línea de proceso horizontal (desktop): conecta marca con marca */
@media (min-width: 861px) {
  .mepoc__fase::before {
    content: '';
    position: absolute;
    top: calc(var(--e-6) + 32px);
    left: 50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--azul) 0%, var(--azul-suave) 100%);
    z-index: 0;
  }
  .mepoc__fase:last-child::before { display: none; }
}

.mepoc__marca {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--e-4);
  background: var(--blanco);
  border: 2px solid var(--azul);
  border-radius: 50%;
  transition: transform var(--t-media), box-shadow var(--t-media), background var(--t-media);
}
.mepoc__fase:hover .mepoc__marca {
  transform: scale(1.1);
  background: var(--deg-azul);
  box-shadow: var(--sombra-azul);
}

.mepoc__letra {
  font-family: var(--fuente-titulo);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--azul);
  line-height: 1;
  transition: color var(--t-media);
}
.mepoc__fase:hover .mepoc__letra { color: var(--blanco); }

.mepoc__indice {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--blanco);
  background: var(--azul-oscuro);
  border-radius: 50%;
}

.mepoc__titulo {
  font-size: var(--txt-base);
  letter-spacing: 0.08em;
  margin-bottom: var(--e-2);
}
.mepoc__texto {
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  line-height: 1.6;
  max-width: 24ch;
}

.mepoc__cierre {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: 1px solid var(--borde);
  font-size: var(--txt-lg);
  color: var(--texto-suave);
  text-align: center;
}

/* --- MEPOC vertical en móvil/tablet --- */
@media (max-width: 860px) {
  .mepoc__linea {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 560px;
    margin-inline: auto;
  }
  .mepoc__fase {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--e-5);
    padding-top: 0;
    padding-bottom: var(--e-6);
  }
  /* Línea vertical que baja de una marca a la siguiente.
     left: 31px = centro de la marca (64px / 2) menos media línea (1px). */
  .mepoc__fase::before {
    content: '';
    position: absolute;
    top: 64px;
    left: 31px;
    width: 2px;
    height: calc(100% - 64px);
    background: linear-gradient(to bottom, var(--azul) 0%, var(--azul-suave) 100%);
  }
  .mepoc__fase:last-child::before { display: none; }
  .mepoc__fase:last-child { padding-bottom: 0; }

  .mepoc__marca { flex-shrink: 0; margin-bottom: 0; }
  .mepoc__cuerpo { padding-top: var(--e-2); }
  .mepoc__texto { max-width: none; }
}

/* --------------------------------------------------------------------------
   5. Proyectos destacados
   La tarjeta (.proyecto-card) y los tintes de placeholder son compartidos:
   viven en dinamicas.css y base.css. Aquí sólo la rejilla de la home.
   -------------------------------------------------------------------------- */
.proyectos-home__grid {
  display: grid;
  /* auto-FIT y no auto-fill: el número de destacados lo elige Fran desde el
     panel y puede ser 2, 3 o 4. Con auto-fill el navegador crea siempre las
     4 columnas que caben y deja los huecos vacíos: con 3 destacados quedaba
     un boquete a la derecha. auto-fit pliega las columnas sobrantes y las
     tarjetas reparten el ancho entre las que hay. */
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--e-5);
  align-items: stretch;
}
/* Sin esto las tarjetas de una misma fila no miden lo mismo: el <li> sí estira
   (align-items: stretch), pero la .proyecto-card de dentro se quedaba con su
   alto natural y las de título corto salían más bajas. Es lo mismo que ya hacía
   .listado__grid en dinamicas.css; aquí faltaba. */
.proyectos-home__grid > li { display: flex; }
.proyectos-home__grid > li > * { width: 100%; }

/* La categoría se saca un poco hacia la izquierda del texto de la tarjeta, para
   que el badge tenga algo de aire y no arranque justo en la misma línea que el
   título. Sólo en la home (donde lo pidió Fran). */
.proyectos-home__grid .proyecto-card__cuerpo .etiqueta { margin-left: -0.4rem; }

/* --------------------------------------------------------------------------
   6. Certificaciones
   -------------------------------------------------------------------------- */
.certificaciones { position: relative; overflow: hidden; }

.certificaciones__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: var(--e-9);
}
.certificaciones__inner > * { min-width: 0; }
@media (max-width: 900px) {
  .certificaciones__inner { grid-template-columns: 1fr; gap: var(--e-8); }
}

.certificaciones__badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-5);
}
@media (max-width: 520px) {
  .certificaciones__badges { grid-template-columns: 1fr; max-width: 260px; margin-inline: auto; }
}

.badge-iso {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--e-6) var(--e-3) var(--e-5);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  transition: transform var(--t-media), border-color var(--t-media), box-shadow var(--t-media);
}
.badge-iso:hover {
  transform: translateY(-6px);
  border-color: var(--azul-suave);
  box-shadow: var(--sombra-lg);
}

/* Sello real del certificador. La medida se le da a la IMAGEN en píxeles: con
   un porcentaje contra el contenedor la marca (220x330 de natural) no queda
   sujeta y se sale de la tarjeta. */
.badge-iso__sello { display: block; margin-bottom: var(--e-4); }
.badge-iso__sello img { display: block; width: 92px; height: auto; }

/* Lo de abajo (anillo animado y número en texto) es el sello dibujado a mano
   que había antes. Se conserva por si alguna página lo usa todavía. */
.badge-iso__anillo {
  position: absolute;
  top: var(--e-4);
  width: 108px;
  height: 108px;
  pointer-events: none;
}
.badge-iso__anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.badge-iso__pista {
  fill: none;
  stroke: var(--gris-100);
  stroke-width: 3;
}
.badge-iso__trazo {
  fill: none;
  stroke: var(--azul-suave);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 276;
  stroke-dashoffset: 276;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1), stroke var(--t-media);
}
/* .is-visible lo pone el IntersectionObserver de site.js */
.badge-iso.is-visible .badge-iso__trazo { stroke-dashoffset: 62; }
.badge-iso:hover .badge-iso__trazo { stroke: var(--azul); }

.badge-iso__contenido {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin-bottom: var(--e-4);
}
.badge-iso__iso {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--texto-suave);
}
.badge-iso__num {
  font-family: var(--fuente-titulo);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--texto-fuerte);
  transition: color var(--t-media);
}
.badge-iso:hover .badge-iso__num { color: var(--azul); }

.badge-iso__pie { display: flex; flex-direction: column; gap: var(--e-1); }
.badge-iso__pie strong {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fuerte);
}
.badge-iso__pie em {
  font-style: normal;
  font-size: var(--txt-xs);
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   9. Accesibilidad: sin movimiento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__carrusel .hero-foto.is-zoom {
    animation: none;
  }
  /* El carrusel deja de girar del todo (lo apaga home.js) y el fundido que
     quedara a medias se corta: nada de movimiento en el fondo. */
  .hero__carrusel .hero-foto { transition: none; }
  .hero__titulo,
  .hero__lead,
  .hero__acciones,
  .hero__sellos {
    animation: none;
  }
  .badge-iso__trazo { transition: none; stroke-dashoffset: 62; }
}