/* ===== Página de sector: SUPERVISIÓN DE OBRA (supervision.html) =====
   Se apoya en page-sector.css (hero a sangre, .sector-challenge, mockups de
   laptop/tablet, CTA + formulario) y aquí van solo los bloques propios.
   Orden: hero → lo que no se detecta → implementarlo es sencillo (azul) →
   control (foto + hotspots) → de la obra a la vista (laptop) → la obra en la
   obra (foto) → el plano correcto (tablet) → pilares (azul) → CTA. */

/* ============ 2 · LO QUE NO SE DETECTA A TIEMPO ============ */
.super-detect__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
/* Foto con las esquinas del sitio; los chips flotan encima */
.super-detect__media { position: relative; }
.super-detect__media .sector-ph {
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(20, 42, 71, 0.18);
}
.super-detect__media .sector-ph > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Panel glass dentro de la foto, abajo a la derecha (100% CSS) */
/* Va abajo a la IZQUIERDA: el panel tiene alto fijo y la foto es fluida, así
   que colocado a la derecha acabaría encima de la tablet en cuanto la columna
   se angosta. A la izquierda cae sobre la ropa del supervisor —zona oscura y
   sin detalle— y nunca cruza la tablet, que está en el centro-derecha. */
.super-panel {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 176px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  /* Vidrio oscuro: la foto se transparenta y el texto claro se lee siempre */
  background: rgba(13, 28, 48, 0.52);
  border: 1px solid rgba(250, 248, 243, 0.20);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 18px 40px rgba(6, 16, 32, 0.38);
}
.super-panel__eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-light);
}
.super-panel__list { list-style: none; margin: 0; padding: 0; }
.super-panel__list li {
  position: relative;
  padding-left: 26px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(250, 248, 243, 0.94);
}
.super-panel__list li + li { margin-top: 10px; }
/* Check verde en círculo */
.super-panel__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  color: var(--green);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.super-detect__title { text-align: left; margin-bottom: 22px; max-width: 22ch; }
/* `.sector-challenge__title` no define el énfasis, así que se pinta aquí */
.super-detect__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.super-detect__text p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-soft);
  margin: 0 0 16px;
  max-width: 46ch;
}
.super-detect__closing {
  margin-top: 30px !important;
  padding-top: 26px;
  border-top: 1px solid var(--orange);
  color: var(--navy) !important;
  font-weight: 600;
}

/* ============ 3 · IMPLEMENTARLO ES SENCILLO (azul de marca) ============ */
.super-easy {
  position: relative;
  overflow: hidden;
  padding: 92px 0 76px;
  color: var(--paper);
  /* Mismo fondo azul que "¿Por qué Teckio?" del index */
  background:
    radial-gradient(42% 46% at 12% 18%, rgba(150, 190, 240, 0.28), transparent 70%),
    radial-gradient(40% 44% at 90% 82%, rgba(0, 28, 90, 0.45), transparent 70%),
    radial-gradient(28% 34% at 62% 8%, rgba(217, 119, 6, 0.16), transparent 70%),
    linear-gradient(150deg, var(--azul-teckio) 0%, #003795 55%, #0045AE 100%);
}
/* Cuadrícula tenue, como en las bandas navy */
.super-easy::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250, 248, 243, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 248, 243, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.super-easy__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
}
.super-easy__title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 18px;
}
.super-easy__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange-light);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.super-easy__lead {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--paper);
  margin: 0;
  max-width: 30ch;
}
/* Misma frase, en tono menor y con una línea arriba (como el mockup) */
.super-easy__note {
  margin: 26px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(250, 248, 243, 0.26);
  max-width: 34ch;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(250, 248, 243, 0.64);
}
.super-easy__media { position: relative; display: flex; justify-content: center; }
/* Las capturas ya vienen con su dispositivo y fondo transparente: no llevan
   marco CSS, solo una sombra que sigue la silueta. */
.super-shot {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 26px 46px rgba(6, 16, 32, 0.42));
}
.super-easy__media .super-shot { max-width: 620px; }

/* Etiquetas naranjas sobre la tablet */
.super-tags { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.super-tags__item {
  position: absolute;
  padding: 10px 18px;
  border-radius: 10px;
  /* Naranja translúcido: se alcanza a ver la programación por detrás */
  background: rgba(217, 119, 6, 0.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(6, 16, 32, 0.30);
}
/* En escalera sobre la tablet, como el mockup */
.super-tags__item--1 { top: 45%; left: 26%; }
.super-tags__item--2 { top: 57%; right: 4%; }
.super-tags__item--3 { top: 68%; left: 30%; }
/* ============ 4 · CONTROL (foto de fondo + hotspots) ============ */
.super-control {
  position: relative;
  overflow: hidden;
  padding: 96px 0 84px;
  color: var(--paper);
  background: var(--navy-deep, #0D1C30);
}
.super-control__bg { position: absolute; inset: 0; z-index: 0; }
.super-control__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Velo para que el texto y las tarjetas se lean sobre la foto */
.super-control__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 28, 48, 0.90) 0%, rgba(13, 28, 48, 0.56) 40%, rgba(13, 28, 48, 0.72) 72%, rgba(13, 28, 48, 0.92) 100%);
}
.super-control__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}
.super-control__title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--paper);
  margin: 0 0 8px;
  max-width: 24ch;
  margin-inline: auto;
}
/* Escenario: los 5 puntos van colocados en porcentajes sobre la foto */
.super-control__stage {
  position: relative;
  height: clamp(360px, 34vw, 460px);
  margin: 34px 0 10px;
}
/* Posiciones calcadas de la referencia (proporciones del mockup) */
.hotspot { position: absolute; }
.hotspot--1 { top: 10%; left: 37%; }     /* Avance de obra   · tarjeta a la izquierda */
.hotspot--2 { top: 44%; left: 39.5%; }   /* Incidencias      · tarjeta a la derecha */
.hotspot--3 { top: 92%; left: 33%; }     /* Planos           · tarjeta arriba, centrada */
.hotspot--4 { top: 30%; left: 67%; }     /* Documentación    · tarjeta arriba, a la derecha */
.hotspot--5 { top: 87%; left: 61.5%; }   /* Control de versiones · tarjeta a la derecha */

/* El punto */
.hotspot__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 8px 22px rgba(6, 16, 32, 0.45);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
/* Punto blanco al centro (la "diana" de la referencia) */
.hotspot__dot::after {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  transition: background 0.25s var(--ease);
}
.hotspot__dot:hover { transform: scale(1.12); background: rgba(255, 255, 255, 0.34); }
.hotspot__dot:focus-visible { outline: 3px solid rgba(245, 158, 11, 0.75); outline-offset: 4px; }
/* Halo que late para invitar al clic; se detiene al abrir */
.hotspot__pulse {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: hotspot-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes hotspot-pulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.hotspot.is-open .hotspot__pulse { animation: none; opacity: 0; }
.hotspot.is-open .hotspot__dot { background: rgba(255, 255, 255, 0.42); transform: scale(1.08); }
.hotspot.is-open .hotspot__dot::after { background: var(--orange-light); }

/* La tarjeta que se abre junto al punto */
.hotspot__card {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: 252px;
  padding: 16px 18px 18px;
  border-radius: 16px;
  /* Vidrio azulado: sobre la foto se ve gris claro como en el mockup, pero
     mantiene el contraste del texto blanco (un glass casi blanco no lo daba). */
  background: rgba(20, 42, 71, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 22px 46px rgba(6, 16, 32, 0.42);
  z-index: 3;
}
.hotspot__card h3 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
}
.hotspot__card p {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(250, 248, 243, 0.88);
}
/* Cada tarjeta abre del lado que marca la referencia */
/* 1 · a la izquierda del punto, centrada en vertical */
.hotspot--1 .hotspot__card {
  top: 50%; left: auto; right: calc(100% + 16px);
  transform: translateY(-50%);
}
/* 2 y 5 · a la derecha del punto, centradas en vertical */
.hotspot--2 .hotspot__card,
.hotspot--5 .hotspot__card {
  top: 50%; left: calc(100% + 16px);
  transform: translateY(-50%);
}
/* 3 · arriba del punto, centrada */
.hotspot--3 .hotspot__card {
  top: auto; bottom: calc(100% + 16px);
  left: 50%; transform: translateX(-50%);
}
/* 4 · arriba del punto, alineada a su borde izquierdo */
.hotspot--4 .hotspot__card {
  top: auto; bottom: calc(100% + 16px);
  left: -14px; transform: none;
}

.super-control__closing {
  margin: 26px 0 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--paper);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* ============ 5 · DE LA OBRA, A LA VISTA (laptop) ============ */
.super-view { padding: 92px 0 96px; }
.super-view__head { max-width: 820px; margin: 0 auto 44px; padding: 0 24px; text-align: center; }
.super-view__title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 16px;
}
.super-view__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.super-view__lead {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 auto;
  max-width: 58ch;
}
/* Escenario: la laptop al centro y las tarjetas flotando a los lados */
.super-view__stage {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
.super-view__stage .super-shot {
  max-width: 800px;
  margin: 0 auto;
  filter: drop-shadow(0 30px 54px rgba(20, 42, 71, 0.26));
}

/* --- Tarjetas del dashboard (glass claro, texto navy) --- */
.dcard {
  position: absolute;
  width: 252px;
  padding: 16px 18px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 22px 48px rgba(20, 42, 71, 0.18);
  font-family: var(--sans);
  z-index: 2;
}
.dcard--avance      { top: 12%;    left: 0; }
.dcard--planos      { top: 9%;     right: 0; }
.dcard--docs        { bottom: 16%; left: 12px; }
.dcard--incidencias { bottom: 7%;  right: 24px; }

.dcard__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.dcard__head strong {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.dcard__ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--navy);
}
.dcard__ic svg { width: 17px; height: 17px; }
.dcard__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; }
.dcard__pct {
  margin-left: auto;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--orange);
}
/* Barra de progreso + mini gráfica */
.dcard__bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(20, 42, 71, 0.10);
  overflow: hidden;
  margin-bottom: 12px;
}
.dcard__bar span { display: block; height: 100%; border-radius: 4px; background: var(--orange); }
.dcard__chart { display: flex; align-items: flex-end; gap: 4px; height: 42px; }
.dcard__chart i { flex: 1; border-radius: 2px 2px 0 0; background: var(--orange); opacity: 0.9; }
.dcard__chart i.is-navy { background: var(--navy); opacity: 1; }
.dcard__foot { margin: 11px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--text-soft); }
/* Listas tipo tabla */
.dcard__tablehead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(20, 42, 71, 0.10);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.dcard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.dcard__list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dcard__item { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.dcard__item b { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.dcard__item small { font-size: 10.5px; color: var(--text-soft); }
.dcard__date { font-size: 11px; color: var(--text-soft); white-space: nowrap; }
/* KPIs */
.dcard__kpis { display: flex; gap: 24px; }
.dcard__kpi { display: flex; flex-direction: column; }
.dcard__kpi b {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}
.dcard__kpi small { margin-top: 5px; font-size: 11px; line-height: 1.3; color: var(--text-soft); }
.dcard__kpi--accent b { color: var(--orange); }

/* ============ 6 · LA OBRA EN LA OBRA (foto de fondo) ============
   La foto va EN FLUJO (no como fondo con `cover`): así la sección mide
   exactamente lo que mide la imagen y nunca se recorta —antes, en pantallas
   anchas, el teléfono que sostiene el supervisor quedaba cortado por abajo—.
   El texto y las tarjetas se superponen en posición absoluta. */
.super-field {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  background: linear-gradient(100deg, #0A1F44 0%, #0C2248 55%, #0D1C30 100%);
}
/* La foto ocupa TODO el ancho y la sección mide lo que ella mide, pero con
   tope de alto: a 16:9 y a todo el ancho, en un monitor de 1920 la sección se
   iba a 1080px. Con `max-height` + `cover` el recorte solo aparece arriba de
   ~1530px de ancho y se sesga al 78%, así el teléfono queda intacto y solo se
   ajusta el cielo y la parte alta del casco. */
.super-field__bg { position: relative; z-index: 0; }
.super-field__bg img {
  width: 100%;
  height: auto;
  max-height: min(84vh, 860px);
  object-fit: cover;
  object-position: 50% 78%;
  display: block;
}
/* Velo azulado: firme del lado del texto y casi limpio sobre el supervisor */
/* Velo: opaco en el filo izquierdo (así se funde con la banda azul de la
   sección) y casi limpio sobre el supervisor */
.super-field__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, #0A1F44 0%, rgba(11, 33, 70, 0.92) 16%, rgba(12, 34, 72, 0.74) 34%, rgba(13, 28, 48, 0.42) 60%, rgba(13, 28, 48, 0.14) 100%);
}
.super-field__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
  display: flex;
  align-items: center;
}
.super-field__text { max-width: 34ch; }
.super-field__title {
  font-family: var(--serif);
  font-size: clamp(26px, 2.9vw, 40px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 20px;
  max-width: 18ch;
}
.super-field__text p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(250, 248, 243, 0.88);
  margin: 0;
  max-width: 38ch;
}

/* --- Tarjetas glass sobre la foto, en escalera --- */
.super-fcards { list-style: none; margin: 0; padding: 0; }
.fcard {
  position: absolute;
  min-width: 138px;
  padding: 11px 16px 13px;
  border-radius: 12px;
  /* Vidrio oscuro: la foto se transparenta y el dato claro se lee siempre */
  background: rgba(20, 42, 71, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 20px 44px rgba(6, 16, 32, 0.36);
}
.fcard--1 { top: 15%; left: 46%; }
.fcard--2 { top: 37%; left: 52%; }
.fcard--3 { top: 57%; left: 64%; }
.fcard__label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(250, 248, 243, 0.76);
}
.fcard__value {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.fcard__value--accent { color: var(--orange-light); }
.fcard__check { width: 15px; height: 15px; color: var(--green); flex: 0 0 auto; }

/* ============ 7 · EL PLANO CORRECTO (tablet) ============ */
/* La altura de la sección la marca la tablet: arriba un padding corto y abajo
   ninguno, de modo que la mano llegue al filo de la sección siguiente —así está
   en la referencia—. */
.super-plans { padding-top: 52px !important; padding-bottom: 0 !important; }
.super-plans__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  align-items: stretch;
}
/* El texto se reparte a lo largo de la tablet: título arriba, cuerpo al medio,
   cierre abajo. Así la mano no queda sola en la parte baja. */
.super-plans__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 0 76px;
}
.super-plans__title { text-align: left; margin-bottom: 20px; }
/* `.sector-challenge__title` no define el énfasis: se pinta aquí */
.super-plans__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.super-plans__text p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-soft);
  margin: 0 0 18px;
  /* 34ch: la medida a la que el texto termina antes de la tarjeta */
  max-width: 34ch;
}
.super-plans__closing {
  margin: 32px 0 0 !important;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.35;
  color: var(--navy);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.super-plans__media {
  position: relative;
  display: flex;
  justify-content: flex-end;
  /* Pegada al borde inferior de la sección y sobresaliendo a la derecha */
  align-self: end;
  margin-right: -32px;
}
.super-plans__media .super-shot {
  max-width: 660px;
  filter: drop-shadow(0 28px 50px rgba(20, 42, 71, 0.26));
}
/* Tarjetas sobre la tablet (reusan el diseño .dcard de la sección anterior) */
.super-plans__media .dcard { width: 236px; }
.dcard--pl-planos { top: 9%;  right: 2%; }
/* Apenas asoma fuera de la tablet: con -16% se montaba sobre el párrafo de la
   izquierda y le cortaba el final de las líneas. */
.dcard--pl-docs   { top: 27%; left: -6%; }

/* ============ 8 · PILARES (azul + diagrama CSS) ============ */
.super-pillars {
  position: relative;
  overflow: hidden;
  padding: 92px 0 96px;
  color: var(--paper);
  background:
    radial-gradient(42% 46% at 12% 18%, rgba(150, 190, 240, 0.28), transparent 70%),
    radial-gradient(40% 44% at 90% 82%, rgba(0, 28, 90, 0.45), transparent 70%),
    radial-gradient(28% 34% at 62% 8%, rgba(217, 119, 6, 0.16), transparent 70%),
    linear-gradient(150deg, var(--azul-teckio) 0%, #003795 55%, #0045AE 100%);
}
.super-pillars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250, 248, 243, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 248, 243, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.super-pillars__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}
/* --- Nodo central: disco claro (el de antes) con el isotipo azul --- */
.super-pillars__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(250, 248, 243, 0.94);
  border: 1px solid rgba(217, 119, 6, 0.40);
  /* Sombra de apoyo + halo naranja tenue, que es lo que ata el nodo con los
     punteados del diagrama */
  box-shadow:
    0 0 22px rgba(217, 119, 6, 0.26),
    0 0 52px rgba(217, 119, 6, 0.14),
    0 16px 36px rgba(4, 14, 44, 0.32);
  margin-bottom: 0;
}
.super-pillars__logo img { width: 42px; height: auto; }
.super-pillars__logo-text {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  /* Sobre el disco claro el texto va en navy */
  color: var(--navy);
}

/* --- Conectores: punteados naranja con punta de flecha, como la referencia ---
   Geometría: el tronco baja del nodo hasta el riel, el riel une los centros de
   las columnas de los extremos y de cada centro baja una flecha a su tarjeta.
   El tronco y la bajada del centro comparten el 50%, así que se leen como una
   sola línea continua del nodo a la tarjeta de en medio. */
.super-pillars__grid {
  position: relative;
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.super-pillars__grid::before {
  content: "";
  position: absolute;
  top: -58px;
  left: 50%;
  margin-left: -1px;
  width: 0;
  height: 30px;
  border-left: 2px dashed var(--orange);
}
/* Riel horizontal. `16.666% - 8px` es exactamente el centro de la columna
   exterior: con 3 columnas y gap de 24, centro = ancho/6 - gap/3. */
.super-pillars__grid::after {
  content: "";
  position: absolute;
  top: -28px;
  left: calc(16.6667% - 8px);
  right: calc(16.6667% - 8px);
  height: 0;
  border-top: 2px dashed var(--orange);
}
.pillar {
  position: relative;
  padding: 26px 22px 28px;
  border-radius: 14px;
  text-align: left;
  /* Vidrio más claro que antes: en la referencia las tarjetas se despegan del
     azul, no se hunden en él */
  background: rgba(255, 255, 255, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 18px 40px rgba(4, 14, 44, 0.22);
}
/* Bajada de cada columna hasta el riel */
.pillar::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  margin-left: -1px;
  width: 0;
  height: 28px;
  border-left: 2px dashed var(--orange);
}
/* Punta de flecha: apex abajo, justo en el filo de la tarjeta */
.pillar::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5.5px solid transparent;
  border-right: 5.5px solid transparent;
  border-top: 8px solid var(--orange);
}
.pillar__title {
  position: relative;
  margin: 0 0 14px;
  padding-top: 19px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
}
/* Guion naranja sobre el título */
.pillar__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
}
.pillar__list { list-style: none; margin: 0; padding: 0; }
.pillar__list li {
  position: relative;
  padding-left: 15px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(250, 248, 243, 0.92);
}
/* Viñeta: punto naranja pequeño */
.pillar__list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--orange);
}
.pillar__list li + li { margin-top: 8px; }
.super-pillars__closing {
  margin: 52px 0 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.super-pillars__closing em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--orange-light);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* Utilidad para los textos solo de lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================ RESPONSIVE ============================ */
/* El corte principal es 1100px: el mismo ancho en el que el nav pasa a
   hamburguesa, así toda la página cambia de registro de golpe. Antes estaba en
   1040 y entre 1041–1100 quedaba un hueco donde los hotspots seguían absolutos
   y sus tarjetas se encimaban con el título (una salía del viewport). */
@media (max-width: 1100px) {

  /* ---------- 1 · HERO ---------- */
  /* page-sector.css hace este cambio a 900px; aquí se adelanta a 1100 porque en
     tablet el texto quedaba a media pantalla y el título rompía mal. */
  .sector-hero--photo { min-height: 0; padding: 264px 0 80px; }
  .sector-hero--photo .sector-hero__inner { padding: 0 24px; }
  .sector-hero--photo .sector-hero__copy { max-width: 620px; }
  .sector-hero--photo .sector-hero__subtitle { max-width: 46ch; }
  /* El supervisor está a la derecha de la foto: al recortar en vertical se
     encuadra ese lado. Velo oscuro arriba (texto) y limpio abajo (personaje). */
  .sector-hero__bg img { object-position: 74% center; }
  .sector-hero__bg::after {
    background: linear-gradient(180deg, rgba(12, 26, 46, 0.92) 0%, rgba(12, 26, 46, 0.86) 50%, rgba(12, 26, 46, 0.56) 100%);
  }

  .super-detect__inner,
  .super-easy__inner,
  .super-plans__inner {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 0 24px;
  }
  .super-detect__title,
  .super-plans__title { max-width: none; }

  /* ---------- 2 · LO QUE NO SE DETECTA A TIEMPO ----------
     El panel de checks se queda DENTRO de la foto, igual que en escritorio. La
     foto lleva tope de ancho para que el panel conserve la misma proporción
     (~42% del ancho) y siga cayendo sobre la ropa del supervisor, nunca sobre
     la tablet, que está al centro-derecha. */
  /* Ojo: `width` explícito, no `max-width`. Con márgenes automáticos en un grid
     el ancho pasa a ser fit-content y la foto (que saca su alto de
     `aspect-ratio`) se colapsaría a cero. */
  .super-detect__media { width: min(100%, 460px); margin: 0 auto; }
  .super-detect__media .sector-ph { width: 100%; }
  .super-panel {
    width: 42%;
    min-width: 148px;
    padding: 13px 14px 15px;
    background: rgba(13, 28, 48, 0.62);
  }
  .super-panel__eyebrow { margin-bottom: 11px; font-size: 10.5px; }
  .super-panel__list li { padding-left: 22px; font-size: 12px; }
  .super-panel__list li + li { margin-top: 8px; }
  .super-panel__list li::before { width: 15px; height: 15px; font-size: 8px; }

  /* ---------- 3 · IMPLEMENTARLO ES SENCILLO ----------
     La tablet arriba y el texto debajo en una sola medida centrada: con los
     topes de 30ch/34ch el texto quedaba varado a la izquierda de la columna. */
  .super-easy__media { order: -1; }
  .super-easy__media .super-shot { max-width: 520px; }
  .super-easy__text { width: min(100%, 560px); margin: 0 auto; }
  .super-easy__lead,
  .super-easy__note { max-width: none; }

  /* ---------- 4 · CONTROL ----------
     Los círculos se siguen usando en móvil: lo único que cambia es DÓNDE sale
     la tarjeta. Junto al punto no cabe (252px en una pantalla de 360 se sale
     del viewport), así que se ancla al pie del escenario y a todo el ancho: el
     punto marca el lugar en la foto y la ficha se lee abajo, sin que nada se
     mueva de sitio al abrirla.
     El truco: `.hotspot` pasa a `static` y el punto toma su lugar en absoluto,
     así el bloque contenedor de la tarjeta es el escenario y no el punto. */
  .super-control__inner { padding: 0 24px; }
  .super-control__stage { height: clamp(400px, 82vw, 520px); margin: 28px 0 12px; }
  .hotspot { position: static; }
  /* Los puntos se reparten por la mitad superior: la tarjeta ocupa el pie */
  .hotspot__dot { position: absolute; width: 40px; height: 40px; }
  .hotspot__dot::after { width: 17px; height: 17px; }
  .hotspot--1 .hotspot__dot { top: 6%;  left: 14%; }
  .hotspot--2 .hotspot__dot { top: 20%; left: 64%; }
  .hotspot--3 .hotspot__dot { top: 36%; left: 26%; }
  .hotspot--4 .hotspot__dot { top: 30%; left: 80%; }
  .hotspot--5 .hotspot__dot { top: 50%; left: 52%; }
  /* Todas las tarjetas al pie, pisando las reglas por punto de escritorio */
  .hotspot__card,
  .hotspot--1 .hotspot__card,
  .hotspot--2 .hotspot__card,
  .hotspot--3 .hotspot__card,
  .hotspot--4 .hotspot__card,
  .hotspot--5 .hotspot__card {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    transform: none;
  }

  /* ---------- 5 · DE LA OBRA A LA VISTA ----------
     Las tarjetas dejan de flotar: la laptop arriba y ellas en dos columnas. */
  .super-view { padding: 76px 0 80px; }
  .super-view__stage {
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .super-view__stage .super-shot { max-width: 620px; grid-column: 1 / -1; }
  .dcard { position: static; width: auto; }

  /* ---------- 6 · LA OBRA EN LA OBRA ----------
     La foto pasa a fondo y el encuadre se corre a la derecha del original
     (`object-position: 88%`), que es donde está el supervisor: al recortar en
     vertical desde el centro solo se veía la cimbra del fondo.
     En tablet el texto va **al centro**. El velo son dos capas: una lateral que
     protege el texto por la izquierda y otra vertical suave, así el personaje
     —que queda a la derecha— se mantiene limpio. Los tres datos (Avance,
     Documentación, Incidencias) se ocultan: en móvil no aportan y le robaban
     sitio al personaje, que es lo que cuenta esta sección. */
  .super-field { display: flex; align-items: center; min-height: 620px; }
  .super-field__bg { position: absolute; inset: 0; max-width: none; margin-left: 0; }
  .super-field__bg img { height: 100%; object-fit: cover; object-position: 88% center; }
  .super-field__bg::after {
    background:
      linear-gradient(100deg, rgba(10, 31, 68, 0.74) 0%, rgba(10, 31, 68, 0.34) 44%, rgba(10, 31, 68, 0.06) 74%),
      linear-gradient(180deg, rgba(12, 26, 46, 0.22) 0%, rgba(12, 26, 46, 0.34) 34%, rgba(11, 33, 70, 0.62) 70%, rgba(10, 31, 68, 0.86) 100%);
  }
  .super-field__inner {
    position: relative;
    inset: auto;
    display: block;
    padding: 56px 24px;
  }
  .super-field__text { max-width: none; }
  .super-field__title {
    max-width: 20ch;
    margin-bottom: 14px;
    text-shadow: 0 2px 18px rgba(6, 16, 32, 0.55);
  }
  .super-field__text p {
    max-width: 44ch;
    text-shadow: 0 1px 14px rgba(6, 16, 32, 0.5);
  }
  .super-fcards { display: none; }

  /* ---------- 7 · EL PLANO CORRECTO ----------
     Mismo orden de lectura que en escritorio (texto → datos → tablet): primero
     el texto, luego las dos tarjetas y la tablet al final, pegada al filo de la
     sección para que la mano llegue a la siguiente, como arriba. `order` la
     manda al final sin tocar el HTML. */
  .super-plans { padding-top: 64px !important; padding-bottom: 0 !important; }
  .super-plans__inner { gap: 28px; align-items: start; }
  .super-plans__text { padding: 0; }
  .super-plans__media {
    align-self: auto;
    margin-right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    justify-items: center;
    align-items: start;
  }
  .super-plans__media .dcard { position: static; width: 100%; max-width: 340px; }
  .super-plans__media .super-shot {
    order: 2;
    grid-column: 1 / -1;
    max-width: 520px;
    margin-top: 8px;
  }

  .super-pillars__inner { padding: 0 24px; }
}
@media (max-width: 640px) {
  /* En teléfono el texto del hero baja un poco más: la foto es más alta */
  .sector-hero--photo { padding: 300px 0 84px; }
  /* Los puntos se juntan un poco: el escenario es más angosto */
  .hotspot--1 .hotspot__dot { left: 10%; }
  .hotspot--2 .hotspot__dot { left: 62%; }
  .hotspot--3 .hotspot__dot { left: 22%; }
  .hotspot--4 .hotspot__dot { left: 76%; }
  .hotspot--5 .hotspot__dot { left: 48%; }
  .super-view__stage { grid-template-columns: 1fr; }
  /* §6 en teléfono: el texto arriba y la foto MENOS recortada, para que se vea
     la mayor parte del obrero. La clave es el alto: `cover` escala por el lado
     que falta, así que con la sección menos alta el zoom baja y entra más ancho
     de la foto original (a 620px se veía un 34% del ancho; a 540px, un 40%).
     El encuadre se corre a 92% para quedarse con el obrero completo, y el velo
     se oscurece arriba —donde ahora va el texto— y se limpia abajo. */
  .super-field { align-items: flex-start; min-height: 540px; }
  .super-field__bg img { object-position: 92% center; }
  .super-field__bg::after {
    background: linear-gradient(180deg, rgba(10, 31, 68, 0.90) 0%, rgba(11, 33, 70, 0.66) 34%, rgba(12, 26, 46, 0.30) 64%, rgba(12, 26, 46, 0.26) 100%);
  }
  .super-field__inner { padding: 44px 24px 0; }
  .super-field__title { max-width: 18ch; }
  .super-plans__media { grid-template-columns: 1fr; }
  .super-pillars__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .super-pillars__grid::before { top: -40px; height: 24px; }
  .super-pillars__grid::after { display: none; }
  /* En una sola columna el riel, las bajadas y las flechas no aportan */
  .pillar::before,
  .pillar::after { display: none; }
  /* El panel se ajusta a la foto chica: gana ancho y pierde tipografía */
  .super-panel { width: 46%; padding: 11px 12px 13px; }
  .super-panel__eyebrow { font-size: 10px; margin-bottom: 9px; }
  .super-panel__list li { padding-left: 20px; font-size: 11.5px; }
  .super-tags__item { font-size: 11.5px; padding: 7px 12px; }
  .super-tags__item--1 { top: 44%; left: 14%; }
  .super-tags__item--2 { top: 57%; right: 0; }
  .super-tags__item--3 { top: 69%; left: 18%; }
}