/* ==========================================================================
   GASCA MONTAJES — interior.css
   Páginas interiores (Servicios, Nosotros). Depende de base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero interior compacto (común)
   -------------------------------------------------------------------------- */
/* Sección de contraste: degradado azul y texto blanco. Ya no lleva el
   margen negativo que lo metía bajo la cabecera: ahora es blanca y opaca. */
.hero-int {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 40vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--deg-contraste);
  color: rgba(255, 255, 255, 0.88);
}
@media (min-width: 768px) { .hero-int { min-height: 54vh; } }

/* La rejilla y el haz de luz que había aquí los sustituye ahora la foto de
   fondo (.hero-foto + .hero-velo, en base.css): sobre una foto real esas
   capas decorativas sólo añadían ruido. */

.hero-int__inner {
  position: relative;
  padding-block: var(--e-8) var(--e-8);
  animation: int-entrada 800ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes int-entrada {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Dentro de la caja azul: sin margen inferior, que la caja ya pone el aire.
   Baja de --txt-4xl a --txt-3xl: encajado en la caja, el 4xl daba un bloque
   desproporcionado para lo que es —una etiqueta de sección, no el reclamo de
   la portada. */
.hero-int__titulo {
  font-size: var(--txt-3xl);
  line-height: 1;
  margin-bottom: 0;
  color: var(--blanco);
  /* La caja ya no oscurece el fondo (ver .hero-caja en base.css): quien
     garantiza que el titular se lea sobre cualquier foto es esta sombra más el
     velo del hero. Sin ella, un cielo claro detrás se lo comería. */
  text-shadow: 0 2px 14px rgba(3, 46, 78, 0.7);
}
.hero-int__lead {
  margin-top: var(--e-5);
  font-size: var(--txt-lg);
  line-height: 1.6;
  /* Sube de 0.85 a 0.92: sobre foto, aunque esté velada, el texto fino pierde
     más que sobre el degradado plano que había antes. */
  color: rgba(255, 255, 255, 0.92);
  max-width: 58ch;
  text-shadow: 0 1px 12px rgba(3, 46, 78, 0.6);
}
@media (min-width: 768px) { .hero-int__lead { font-size: var(--txt-xl); } }

/* Migas de pan */
.miga {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.miga a { color: var(--azul-suave); transition: color var(--t-rapida); }
.miga a:hover { color: var(--blanco); }
.miga [aria-current] { color: var(--blanco); }

/* --------------------------------------------------------------------------
   2. Lista con marca de verificación (común)
   -------------------------------------------------------------------------- */
.lista-check { display: flex; flex-direction: column; gap: var(--e-3); }
.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  font-size: var(--txt-sm);
  line-height: 1.6;
  color: var(--texto);
}
.lista-check__marca {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--azul);
  background: rgba(2, 116, 190, 0.12);
  border: 1px solid rgba(2, 116, 190, 0.3);
  border-radius: 50%;
}
.lista-check__marca svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   3. Banda CTA (común, cierre de página)
   -------------------------------------------------------------------------- */
.cta-banda {
  position: relative;
  overflow: hidden;
  background: var(--deg-contraste);
  color: rgba(255, 255, 255, 0.88);
  --acento-linea: var(--azul-suave);
}
.cta-banda h2, .cta-banda h3 { color: var(--blanco); }
.cta-banda .antetitulo { color: var(--azul-suave); }
.cta-banda .lead, .cta-banda p { color: rgba(255, 255, 255, 0.85); }
.cta-banda::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 70% at 12% 50%, rgba(140, 189, 221, 0.22), transparent 68%),
    radial-gradient(ellipse 40% 60% at 88% 50%, rgba(255, 255, 255, 0.1), transparent 68%);
  pointer-events: none;
}
.cta-banda > * { position: relative; }

/* Panel translúcido sobre el degradado azul de la banda. Antes era un gris
   grafito opaco del tema anterior, que sobre el azul se veía como una mancha. */
.cta-banda__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: var(--e-8);
  padding: var(--e-8);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 860px) {
  .cta-banda__inner { grid-template-columns: 1fr; gap: var(--e-6); padding: var(--e-6); }
}
.cta-banda__acciones { display: flex; flex-direction: column; gap: var(--e-3); }
@media (max-width: 520px) { .cta-banda__acciones .btn { width: 100%; } }

/* ==========================================================================
   SERVICIOS
   ========================================================================== */

/* --- Intro --- */
.intro-servicios__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--e-8);
  align-items: start;
}
@media (max-width: 900px) {
  .intro-servicios__grid { grid-template-columns: 1fr; gap: var(--e-5); }
}
.intro-servicios__texto p + p { margin-top: var(--e-4); }
.intro-servicios__texto p:not(.lead) { color: var(--texto-suave); line-height: 1.75; }
.intro-servicios__texto a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.intro-servicios__texto a:hover { color: var(--azul-claro); }
.intro-servicios__texto strong { color: var(--texto-fuerte); }

/* --- Bloques de servicio alternados --- */
.bloque-serv { position: relative; }

.bloque-serv__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-9);
  align-items: center;
}
@media (max-width: 900px) {
  .bloque-serv__grid { grid-template-columns: 1fr; gap: var(--e-6); }
}
/* Alternancia: en los pares el visual va a la izquierda */
@media (min-width: 901px) {
  .bloque-serv--invertido .bloque-serv__texto { order: 2; }
  .bloque-serv--invertido .bloque-serv__visual { order: 1; }
}

.bloque-serv__icono {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: var(--e-5);
  color: var(--azul);
  background: rgba(2, 116, 190, 0.1);
  border: 1px solid rgba(2, 116, 190, 0.26);
  border-radius: var(--r-md);
}
.bloque-serv__icono svg { width: 32px; height: 32px; }

.bloque-serv__texto h2 { font-size: var(--txt-2xl); }
.bloque-serv__texto p:not(.lead) { color: var(--texto-suave); line-height: 1.75; }

.bloque-serv__visual { position: relative; }
.bloque-serv__visual .placeholder-img {
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3;
}
/* Foto real del bloque. Mismas medidas que el placeholder al que sustituye,
   para que el layout no se mueva al cambiar una cosa por la otra.
   object-fit: cover porque las fotos no vienen todas en 4:3 y sin él se
   deformarían. */
.bloque-serv__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
}
.bloque-serv__num {
  position: absolute;
  right: var(--e-4);
  bottom: var(--e-3);
  font-family: var(--fuente-titulo);
  font-size: clamp(3.5rem, 2rem + 6vw, 6rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(2, 116, 190, 0.22);
  pointer-events: none;
}

/* --- Prefabricación integral --- */
.prefab__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--e-5);
  margin-top: var(--e-8);
}
.prefab__grid > * { grid-column: span 2; }
/* 5 elementos en 3 columnas: los dos últimos centrados */
@media (min-width: 981px) {
  .prefab__grid > :nth-child(4) { grid-column: 2 / span 2; }
  .prefab__grid > :nth-child(5) { grid-column: 4 / span 2; }
}
@media (max-width: 980px) {
  .prefab__grid { grid-template-columns: repeat(2, 1fr); }
  .prefab__grid > * { grid-column: auto; }
}
@media (max-width: 640px) { .prefab__grid { grid-template-columns: 1fr; } }

.prefab__item {
  display: flex;
  gap: var(--e-4);
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  transition: transform var(--t-media), border-color var(--t-media), box-shadow var(--t-media);
}
.prefab__item:hover {
  transform: translateY(-5px);
  border-color: rgba(90, 154, 212, 0.4);
  box-shadow: var(--sombra-md);
}
.prefab__icono {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  color: var(--azul);
  background: rgba(90, 154, 212, 0.12);
  border: 1px solid rgba(90, 154, 212, 0.26);
  border-radius: var(--r-md);
  transition: background var(--t-media), color var(--t-media);
}
.prefab__icono svg { width: 26px; height: 26px; }
.prefab__item:hover .prefab__icono {
  background: var(--deg-azul);
  color: var(--blanco);
  border-color: transparent;
}
.prefab__titulo { font-size: var(--txt-base); margin-bottom: var(--e-2); }
.prefab__texto { font-size: var(--txt-sm); color: var(--texto-suave); line-height: 1.7; }

/* --- Reparación: grid de chips --- */
.reparacion__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-7);
}
/* Chips de equipos reparados: fondo --azul-suave y texto negro. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-5);
  font-family: var(--fuente-titulo);
  font-size: var(--txt-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--negro);
  background: var(--azul-suave);
  border: 1px solid var(--azul-suave);
  border-radius: var(--r-full);
  cursor: default;
  transition: transform var(--t-rapida), border-color var(--t-media),
              color var(--t-media), background var(--t-media);
}
.chip__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azul-oscuro);
  transition: background var(--t-media), box-shadow var(--t-media);
}
.chip:hover {
  transform: translateY(-3px);
  background: var(--azul);
  border-color: var(--azul);
  color: var(--blanco);
}
.chip:hover .chip__punto { background: var(--blanco); }

.reparacion__pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
}

/* --- Capacidad productiva --- */
.capacidad__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--e-8);
  align-items: center;
}
@media (max-width: 900px) { .capacidad__inner { grid-template-columns: 1fr; gap: var(--e-6); } }

.capacidad__cifras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); }
@media (max-width: 560px) { .capacidad__cifras { grid-template-columns: 1fr; } }

.capacidad__cifra {
  position: relative;
  padding: var(--e-6) var(--e-5);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-media), border-color var(--t-media);
}
.capacidad__cifra::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--deg-azul);
}
.capacidad__cifra:hover { transform: translateY(-5px); border-color: rgba(2, 116, 190, 0.4); }

.capacidad__valor {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
}
.capacidad__valor span {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.capacidad__valor em {
  font-style: normal;
  font-size: var(--txt-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.capacidad__titulo { font-size: var(--txt-base); margin-bottom: var(--e-2); }
.capacidad__detalle { font-size: var(--txt-sm); color: var(--texto-suave); line-height: 1.6; }

/* ==========================================================================
   NOSOTROS
   ========================================================================== */

/* --- Misión / Visión --- */
.mision-vision__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); }
@media (max-width: 860px) { .mision-vision__grid { grid-template-columns: 1fr; } }

.mv-card {
  position: relative;
  padding: var(--e-7) var(--e-6);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-media), border-color var(--t-media), box-shadow var(--t-media);
}
.mv-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-media);
  pointer-events: none;
}
.mv-card--mision::after {
  background: radial-gradient(circle at 90% 10%, rgba(2, 116, 190, 0.16), transparent 60%);
}
.mv-card--vision::after {
  background: radial-gradient(circle at 90% 10%, rgba(90, 154, 212, 0.16), transparent 60%);
}
.mv-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); }
.mv-card:hover::after { opacity: 1; }
.mv-card--mision:hover { border-color: rgba(2, 116, 190, 0.4); }
.mv-card--vision:hover { border-color: rgba(90, 154, 212, 0.4); }

.mv-card > * { position: relative; z-index: 1; }
.mv-card__marca {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--e-5);
  border-radius: var(--r-md);
  border: 1px solid var(--borde-fuerte);
}
.mv-card__marca svg { width: 30px; height: 30px; }
.mv-card--mision .mv-card__marca { color: var(--azul); background: rgba(2, 116, 190, 0.1); }
.mv-card--vision .mv-card__marca { color: var(--azul); background: rgba(90, 154, 212, 0.1); }
.mv-card h2 { font-size: var(--txt-2xl); }
.mv-card .lead { font-size: var(--txt-base); line-height: 1.75; }

/* --- Razones: acordeón --- */
.razones__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--e-8);
  align-items: start;
}
@media (max-width: 900px) { .razones__grid { grid-template-columns: 1fr; gap: var(--e-6); } }

.razones__ayuda {
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
@media (max-width: 900px) { .razones__ayuda { display: none; } }

.acordeon {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.acordeon__item {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-media), background var(--t-media);
}
.acordeon__item:hover { border-color: var(--borde-fuerte); }
.acordeon__item.is-abierto { border-color: rgba(2, 116, 190, 0.45); background: var(--superficie-alta); }

.acordeon__cabecera { margin: 0; font-family: inherit; }
.acordeon__boton {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  width: 100%;
  padding: var(--e-4) var(--e-5);
  text-align: left;
  min-height: 68px;
}
.acordeon__indice {
  flex-shrink: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--txt-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  transition: color var(--t-media);
}
.acordeon__item.is-abierto .acordeon__indice { color: var(--azul); }

.acordeon__titulo {
  flex-grow: 1;
  font-family: var(--fuente-titulo);
  font-size: var(--txt-lg);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-fuerte);
  line-height: 1.25;
}

.acordeon__mas {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--azul);
  border: 1px solid rgba(2, 116, 190, 0.35);
  border-radius: 50%;
  transition: transform var(--t-media), background var(--t-media), color var(--t-media);
}
.acordeon__mas svg { width: 14px; height: 14px; }
.acordeon__item.is-abierto .acordeon__mas {
  transform: rotate(135deg);
  background: var(--deg-azul);
  border-color: transparent;
  color: var(--blanco);
}

/* Panel: sólo se colapsa si hay JS para volver a abrirlo (la clase `js` la
   pone un script en el <head>). La altura exacta la fija nosotros.js para
   poder animar la transición. */
.acordeon__panel { overflow: hidden; }
.js .acordeon__panel {
  height: 0;
  transition: height var(--t-media);
}
.acordeon__contenido {
  padding: 0 var(--e-5) var(--e-5) calc(var(--e-5) + var(--e-4) + 18px);
  color: var(--texto-suave);
  line-height: 1.75;
  font-size: var(--txt-sm);
}
@media (max-width: 560px) {
  .acordeon__contenido { padding-left: var(--e-5); }
}

/* --- Sectores --- */
/* Dos columnas: a la izquierda el texto y los sectores; a la derecha, una foto
   que da cara humana a la experiencia. En pantallas estrechas se apilan y la
   foto va debajo. */
.sectores__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--e-8);
  align-items: start;
}
.sectores__media {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}
.sectores__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-md);
  display: block;
}
@media (max-width: 860px) {
  .sectores__grid { grid-template-columns: 1fr; gap: var(--e-6); }
  /* En móvil las fotos van una al lado de otra para no alargar la página */
  .sectores__media { flex-direction: row; }
  .sectores__media img { flex: 1 1 0; min-width: 0; max-height: 300px; object-fit: cover; }
}
@media (max-width: 520px) {
  .sectores__media { flex-direction: column; }
  .sectores__media img { max-height: 360px; }
}

.sectores__texto { max-width: var(--ancho-texto); margin-bottom: var(--e-8); }
.sectores__texto p + p { margin-top: var(--e-4); }
.sectores__texto p:not(.lead) { color: var(--texto-suave); line-height: 1.75; }

.sectores__subtitulo {
  font-size: var(--txt-sm);
  letter-spacing: 0.16em;
  color: var(--texto-suave);
  margin-bottom: var(--e-5);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--borde);
}
.sectores__badges { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* Badges de sectores.

   Antes iban en azul sólido: trece bloques de color macizo seguidos pesaban
   más que el texto que los explica y parecían botones, invitando a un clic que
   no existe (son informativos, de ahí el cursor por defecto).

   Ahora van calados, con el fondo de la página y un borde fino. El color queda
   sólo en el punto, que es lo que los cose visualmente. */
.badge-sector {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  font-family: var(--fuente-titulo);
  font-size: var(--txt-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  cursor: default;
  transition: border-color var(--t-media), color var(--t-media),
              box-shadow var(--t-media);
}
.badge-sector__punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--azul);
  transition: transform var(--t-media);
}
/* Sin desplazamiento vertical: trece elementos saltando al pasar por encima
   marean, y además no llevan a ningún sitio. Basta con que se enciendan. */
.badge-sector:hover {
  border-color: var(--azul);
  color: var(--azul-oscuro);
  box-shadow: var(--sombra-sm);
}
.badge-sector:hover .badge-sector__punto { transform: scale(1.5); }

/* --- Certificaciones --- */
.certis__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-5);
  margin-top: var(--e-8);
}
@media (max-width: 940px) { .certis__grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; } }

.certi-card {
  padding: var(--e-6);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  transition: transform var(--t-media), border-color var(--t-media), box-shadow var(--t-media);
}
.certi-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); }

.certi-card__cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--borde);
}

.certi-card__sello { position: relative; display: grid; place-items: center; width: 76px; height: 76px; flex-shrink: 0; }
.certi-card__sello svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.certi-card__pista { fill: none; stroke: var(--gris-100); stroke-width: 4; }
.certi-card__trazo {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* .is-visible lo añade el IntersectionObserver de main.js */
.certi-card.is-visible .certi-card__trazo { stroke-dashoffset: 40; }

/* Sello real del certificador. Sustituye al círculo dibujado: la marca ya trae
   su propio marco y su proporción vertical (2:3), así que aquí sólo se le da
   altura y el ancho lo calcula el navegador. La animación del trazo y
   .certi-card__num no se usan en estas tarjetas. */
/* La medida se le da a la IMAGEN, en píxeles, no con un height:100% contra el
   padre. El padre es un grid de 76x76 y la marca mide 220x330 de natural: el
   porcentaje no la sujetaba y se salía de la tarjeta tapando el texto. */
.certi-card__sello--real { width: auto; height: auto; }
.certi-card__sello--real img { display: block; width: 76px; height: auto; }

.certi-card__num { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.certi-card__num em {
  font-style: normal;
  font-family: var(--fuente-titulo);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--texto-suave);
}
.certi-card__num strong {
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--texto-fuerte);
  margin-top: 2px;
}

.certi-card__nombre { font-size: var(--txt-lg); margin-bottom: var(--e-1); }
.certi-card__norma {
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.certi-card__texto { font-size: var(--txt-sm); color: var(--texto-suave); line-height: 1.75; }

/* Un color por norma */
/* Una ISO por tono de la paleta. Antes eran naranja / verde / azul, del tema
   anterior: el verde era el último color ajeno que quedaba en las hojas.
   Sólo cambia el trazo del anillo; el hover es igual en las tres. */
.certi-card--acento .certi-card__trazo { stroke: var(--azul); }
.certi-card--claro .certi-card__trazo { stroke: var(--azul-claro); }
.certi-card--suave .certi-card__trazo { stroke: var(--azul-suave); }

.certi-card:hover { border-color: var(--azul-suave); }
.certi-card:hover .certi-card__nombre { color: var(--azul); }

/* --- Autorizaciones --- */
.autorizaciones__inner {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--e-8);
  align-items: start;
}
@media (max-width: 900px) { .autorizaciones__inner { grid-template-columns: 1fr; gap: var(--e-6); } }

.autorizaciones__texto strong { color: var(--azul); }

.autorizaciones__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
@media (max-width: 620px) { .autorizaciones__grid { grid-template-columns: 1fr; } }
/* 5 elementos: el último ocupa toda la fila */
@media (min-width: 621px) { .autorizaciones__grid > :last-child { grid-column: 1 / -1; } }

.aut-card {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  transition: transform var(--t-media), border-left-color var(--t-media), box-shadow var(--t-media);
}
.aut-card:hover {
  transform: translateX(4px);
  border-left-color: var(--azul);
  box-shadow: var(--sombra-md);
}
.aut-card__icono {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--azul);
  background: rgba(2, 116, 190, 0.1);
  border: 1px solid rgba(2, 116, 190, 0.24);
  border-radius: var(--r-md);
  transition: background var(--t-media), color var(--t-media);
}
.aut-card__icono svg { width: 24px; height: 24px; }
.aut-card:hover .aut-card__icono {
  background: var(--deg-azul);
  color: var(--blanco);
  border-color: transparent;
}
.aut-card__titulo { font-size: var(--txt-base); margin-bottom: var(--e-1); }
.aut-card__texto { font-size: var(--txt-sm); color: var(--texto-suave); line-height: 1.6; }

/* --- Filosofía --- */
.filosofia__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-5);
  margin-top: var(--e-8);
}
@media (max-width: 1000px) { .filosofia__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .filosofia__grid { grid-template-columns: 1fr; } }

.filo-card {
  position: relative;
  padding: var(--e-6) var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-media), border-color var(--t-media), box-shadow var(--t-media);
}
.filo-card::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);
}
.filo-card:hover {
  transform: translateY(-6px);
  border-color: rgba(2, 116, 190, 0.4);
  box-shadow: var(--sombra-lg);
}
.filo-card:hover::before { transform: scaleX(1); }

/* Inicial gigante de fondo */
.filo-card__letra {
  position: absolute;
  top: -18px;
  right: 4px;
  font-family: var(--fuente-titulo);
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(2, 116, 190, 0.16);
  pointer-events: none;
  transition: -webkit-text-stroke-color var(--t-media);
}
.filo-card:hover .filo-card__letra { -webkit-text-stroke-color: rgba(2, 116, 190, 0.28); }

.filo-card__titulo {
  position: relative;
  font-size: var(--txt-lg);
  margin-bottom: var(--e-3);
  transition: color var(--t-rapida);
}
.filo-card:hover .filo-card__titulo { color: var(--azul); }
.filo-card__texto {
  position: relative;
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  line-height: 1.7;
}

.filosofia__lema {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  max-width: var(--ancho-texto);
  margin: var(--e-8) auto 0;
  padding: var(--e-5);
  font-size: var(--txt-base);
  color: var(--texto);
  line-height: 1.7;
  background: rgba(2, 116, 190, 0.06);
  border: 1px solid rgba(2, 116, 190, 0.25);
  border-radius: var(--r-md);
}
.filosofia__lema strong { color: var(--azul); }
.filosofia__lema-icono { color: var(--azul); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Otros servicios — pie de cada página de servicio
   Rejilla de accesos con foto. Cada tarjeta es sólo foto + nombre: aquí no toca
   contar nada, sólo dejar saltar al siguiente servicio.
   -------------------------------------------------------------------------- */
.otros-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e-4);
}

.otro-servicio {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-height: 150px;
  padding: var(--e-4);
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--deg-contraste);   /* respaldo si falta la foto */
  transition: transform var(--t-media), box-shadow var(--t-media);
}
.otro-servicio:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
}

.otro-servicio__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-lenta);
}
.otro-servicio:hover .otro-servicio__img { transform: scale(1.06); }

/* El velo va DESPUÉS de la foto en el orden de pintado, así que la tapa; el
   nombre necesita position:relative para quedar por encima de los dos. */
.otro-servicio::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 46, 78, 0.85) 0%, rgba(3, 46, 78, 0.25) 100%);
}

.otro-servicio__nombre {
  position: relative;
  z-index: 1;
  font-family: var(--fuente-titulo);
  font-size: var(--txt-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blanco);
}

/* Variante centrada del icono de servicio: la usa prefabricacion.html, cuya
   cabecera va centrada y no tiene bloque-serv donde colgarlo. */
.bloque-serv__icono--centrado { margin-inline: auto; }