/* =========================================================================
   ADEYC — Bloques 03 a 07
   ========================================================================= */

.sec {
  position: relative;
  padding-bottom: clamp(4rem, 8vw, 8rem);
}
.sec__lede {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .sec__lede {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
}
.sec__lede h2 {
  max-width: 15ch;
}
.sec__lede p {
  max-width: 54ch;
  color: var(--fg-2);
}
.sec__lede p + p {
  margin-top: 1.1rem;
}

/* ---------- Curva de riesgo térmico ------------------------------------- */
.curva {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: var(--rule) solid var(--hair);
  position: relative;
  padding: clamp(1.25rem, 2.4vw, 2rem);
}
.curva__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 1rem;
  border-bottom: var(--rule) solid var(--hair);
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}
.curva__legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.curva__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.curva__legend i {
  width: 16px;
  height: 2px;
  flex: none;
}
.curva svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}
.curva svg text {
  font-family: var(--f-text);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  fill: var(--fg-2);
}
.curva__axis {
  stroke: var(--line-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.curva__grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}
.curva__path {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.curva__path--mal {
  stroke: var(--critico);
}
.curva__path--bien {
  stroke: var(--acero-600);
}
.curva__mark {
  stroke: var(--acero-600);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.curva__falla {
  fill: var(--critico);
}

/* ---------- Pilares operativos ------------------------------------------ */
.pilares {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  border-top: var(--rule) solid var(--hair-2);
  border-left: var(--rule) solid var(--hair);
}
@media (min-width: 640px) {
  .pilares {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .pilares {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pilar {
  position: relative;
  padding: clamp(1.35rem, 2.4vw, 2rem);
  border-right: var(--rule) solid var(--hair);
  border-bottom: var(--rule) solid var(--hair);
  display: grid;
  gap: 0.85rem;
  align-content: start;
  isolation: isolate;
  overflow: hidden;
}
.pilar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--acero-50);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.55s var(--e-tec);
}
.pilar:hover::before,
.pilar:focus-within::before {
  transform: scaleY(1);
}
.pilar__no {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.pilar__ico {
  width: 34px;
  height: 34px;
  stroke: var(--accent);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.pilar__ico * {
  vector-effect: non-scaling-stroke;
}
.pilar h3 {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.12rem;
}
.pilar p {
  font-size: 0.9375rem;
  color: var(--fg-2);
  line-height: 1.55;
}

/* ---------- Índice de especialidades ------------------------------------ */
.esp {
  border-top: var(--rule) solid var(--hair-2);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.esp__item {
  border-bottom: var(--rule) solid var(--hair);
  position: relative;
}
.esp__btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 2rem);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  text-align: left;
  color: inherit;
  transition: color 0.4s var(--e-tec);
}
.esp__btn:hover,
.esp__item.is-open .esp__btn {
  color: var(--accent);
}
.esp__no {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  min-width: 2.4ch;
}
.esp__t {
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.8vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.esp__plus {
  position: relative;
  width: 15px;
  height: 15px;
  flex: none;
}
.esp__plus::before,
.esp__plus::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.45s var(--e-tec);
}
.esp__plus::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--rule);
  transform: translateY(-50%);
}
.esp__plus::after {
  left: 50%;
  top: 0;
  height: 100%;
  width: var(--rule);
  transform: translateX(-50%) scaleY(1);
}
.esp__item.is-open .esp__plus::after {
  transform: translateX(-50%) scaleY(0);
}
.esp__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--e-tec);
}
.esp__item.is-open .esp__panel {
  grid-template-rows: 1fr;
}
.esp__inner {
  overflow: hidden;
}
.esp__body {
  display: grid;
  gap: clamp(1rem, 2.4vw, 2rem);
  padding: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 900px) {
  .esp__body {
    grid-template-columns: 2.4ch minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(0.9rem, 2.4vw, 2rem);
  }
  .esp__body > :first-child {
    grid-column: 2;
  }
}
.esp__body p {
  color: var(--fg-2);
  max-width: 56ch;
}
.esp__meta {
  display: grid;
  gap: 0;
  align-content: start;
}
.esp__row {
  display: grid;
  grid-template-columns: 11ch 1fr;
  gap: 1rem;
  padding-block: 0.55rem;
  border-bottom: var(--rule) solid var(--hair);
  font-size: 0.8125rem;
}
.esp__row dt {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding-top: 0.2rem;
}
.esp__row dd {
  font-weight: 500;
}

/* ---------- Galería en movimiento continuo ------------------------------
   Fotografía a color natural, sin duotono: aquí la imagen documenta trabajo
   real y teñirla de azul la volvía decorado. La marca sostiene el encuadre
   —filete de 1 px, cero radios, rótulo en caja llena— no el tinte.
   ------------------------------------------------------------------------ */
.gal {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-block: var(--rule) solid var(--hair);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.gal__viewport {
  /* La sección ya va a sangre: la cinta hereda ese ancho sin recurrir a
     100vw, que en escritorio sumaría el ancho de la barra de desplazamiento */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  );
}
.gal__pista {
  display: flex;
  gap: var(--rule);
  width: max-content;
  animation: galRun var(--dur, 24s) linear infinite;
  will-change: transform;
}
@keyframes galRun {
  to {
    transform: translateX(-50%);
  }
}
.gal__viewport:hover .gal__pista,
.gal__viewport:focus-within .gal__pista {
  animation-play-state: paused;
}

.gal__it {
  position: relative;
  flex: none;
  margin: 0;
  width: clamp(11rem, 19vw, 16.5rem);
  background: var(--acero-100);
  overflow: hidden;
  outline: var(--rule) solid var(--hair);
  outline-offset: calc(var(--rule) * -1);
}
.gal__it img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.9s var(--e-tec);
}
.gal__it:hover img {
  transform: scale(1);
}
.gal__it figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem 0.75rem;
  background: var(--acero-950);
  color: var(--papel);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Se retira al pasar el cursor: la foto manda, el rótulo acompaña */
  transform: translateY(0);
  transition: transform 0.5s var(--e-tec);
}
.gal__it:hover figcaption {
  transform: translateY(100%);
}

/* ---------- Sin movimiento ----------------------------------------------- */
.gal--fija .gal__viewport {
  -webkit-mask-image: none;
  mask-image: none;
  overflow-x: auto;
}
.gal--fija .gal__pista {
  animation: none;
}
.gal--fija .gal__dup {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .gal__pista {
    animation: none;
  }
  .gal__viewport {
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: auto;
  }
  .gal__dup {
    display: none;
  }
}

/* ---------- Escenarios tipo --------------------------------------------- */
.casos {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  gap: var(--rule);
  background: var(--hair);
  border: var(--rule) solid var(--hair);
}
@media (min-width: 820px) {
  .casos {
    grid-template-columns: repeat(3, 1fr);
  }
}
.caso {
  background: var(--papel);
  padding: clamp(1.35rem, 2.4vw, 2rem);
  display: grid;
  gap: 0.8rem;
  align-content: start;
}
.caso h3 {
  font-size: 1.18rem;
  line-height: 1.15;
}
.caso p {
  font-size: 0.9375rem;
  color: var(--fg-2);
}
.caso__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.35rem;
}

/* ---------- Compromisos ------------------------------------------------- */
.compromisos {
  display: grid;
  border-top: var(--rule) solid var(--hair-2);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.compromiso {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.2rem, 2.2vw, 1.75rem) 0;
  border-bottom: var(--rule) solid var(--hair);
}
@media (min-width: 760px) {
  .compromiso {
    grid-template-columns: 3.5ch minmax(0, 22ch) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 3rem);
    align-items: baseline;
  }
}
.compromiso__no {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.compromiso h3 {
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.compromiso p {
  color: var(--fg-2);
  font-size: 0.9375rem;
  max-width: 60ch;
}

/* ---------- Tabla de plan ----------------------------------------------- */
.plan {
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow-x: auto;
  border: var(--rule) solid var(--hair);
}
.plan table {
  min-width: 660px;
  font-size: 0.875rem;
}
.plan thead th {
  text-align: left;
  font-family: var(--f-text);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 0.95rem clamp(0.9rem, 1.8vw, 1.4rem);
  border-bottom: var(--rule) solid var(--hair-2);
  white-space: nowrap;
}
.plan tbody td {
  padding: clamp(0.85rem, 1.6vw, 1.15rem) clamp(0.9rem, 1.8vw, 1.4rem);
  border-bottom: var(--rule) solid var(--hair);
  vertical-align: top;
}
.plan tbody tr:last-child td {
  border-bottom: 0;
}
.plan tbody tr {
  transition: background-color 0.35s var(--e-tec);
}
.plan tbody tr:hover {
  background: var(--acero-50);
}
.plan td:first-child {
  font-weight: 500;
}
.plan td:last-child {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plan__nota {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--fg-2);
  max-width: 62ch;
}

/* ---------- Conversión --------------------------------------------------- */
.cta-final {
  position: relative;
  overflow: hidden;
}
.cta-final__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(2.5rem, 4vw, 3.5rem);
}
@media (min-width: 1000px) {
  .cta-final__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(3rem, 7vw, 7rem);
  }
}
.cta-final h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 0.98;
  margin-bottom: 1.25rem;
}
.cta-final h2 em {
  font-style: normal;
  color: var(--acero-400);
}
.cta-final__sub {
  color: rgba(242, 242, 243, 0.62);
  max-width: 44ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.datos {
  display: grid;
  border-top: var(--rule) solid var(--line-inv-2);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.dato {
  display: grid;
  grid-template-columns: 12ch 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: var(--rule) solid var(--line-inv);
}
.dato dt {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(242, 242, 243, 0.45);
}
.dato dd {
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: 0.01em;
}
.dato dd a {
  position: relative;
  display: inline-block;
}
.dato dd a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: var(--rule);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--e-tec);
}
.dato dd a:hover::after,
.dato dd a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* ---------- Formulario ---------------------------------------------------
   El panel se despega del campo oscuro por elevación, no por adorno: una
   superficie más clara que la sección, filete completo y una pletina de acero
   arriba que lo declara como la zona de acción. Los campos son pozos hundidos
   —más oscuros que el panel— para que el ojo distinga de un vistazo qué se
   lee y qué se rellena.
   ------------------------------------------------------------------------ */
.form {
  position: relative;
  border: var(--rule) solid var(--line-inv-2);
  border-top: 3px solid var(--acero);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.15rem;
  background: rgba(242, 242, 243, 0.055);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.form__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: calc(clamp(1.5rem, 3vw, 2.5rem) * -1);
  margin-bottom: 0.35rem;
  padding: 0.85rem clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(18, 28, 38, 0.55);
  border-bottom: var(--rule) solid var(--line-inv-2);
}
.form__head .rotulo {
  color: rgba(242, 242, 243, 0.72);
}
.f-row {
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 560px) {
  .f-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  display: grid;
  gap: 0.4rem;
}
.field label {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(242, 242, 243, 0.66);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: rgba(11, 18, 25, 0.55);
  border: var(--rule) solid var(--line-inv-2);
  color: var(--papel);
  font-size: 0.9375rem;
  transition:
    border-color 0.3s var(--e-tec),
    background-color 0.3s var(--e-tec);
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(242, 242, 243, 0.42);
}
.field textarea {
  resize: vertical;
  min-height: 5rem;
}
.field select option {
  background: #121c26;
  color: #f2f2f3;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(242, 242, 243, 0.34);
}
/* El foco cambia filete y fondo a la vez: el manual no admite sombras, así que
   la señal tiene que venir del contraste, no de un halo. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--acero);
  background: rgba(11, 18, 25, 0.9);
}
.form__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.35rem;
  padding-top: 1.15rem;
  border-top: var(--rule) solid var(--line-inv);
}
.form__nota {
  font-size: 0.75rem;
  color: rgba(242, 242, 243, 0.52);
  max-width: 32ch;
}
.form__estado {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  min-height: 1.2em;
  color: rgba(242, 242, 243, 0.62);
}
/* El semáforo técnico está calibrado para papel. Sobre campo oscuro hay que
   subirle luminancia o el mensaje de error se pierde justo cuando importa. */
.form__estado.is-err {
  color: #e8705a;
}
.form__estado.is-ok {
  color: #63c187;
}
.form__estado.is-ok {
  color: var(--conforme);
}
.form__estado.is-err {
  color: var(--critico);
}

/* ---------- Pie ---------------------------------------------------------- */
.pie {
  border-top: var(--rule) solid var(--line-inv-2);
}
.pie__in {
  padding-block: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 2rem;
}
@media (min-width: 760px) {
  .pie__in {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}
.pie__brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.pie__brand svg {
  width: 26px;
  height: 32.5px;
  flex: none;
}
.pie__brand svg path {
  fill: none;
  stroke: var(--acero-400);
  stroke-width: 4;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.pie__claim {
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.pie__legal {
  display: grid;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: rgba(242, 242, 243, 0.42);
}
@media (min-width: 760px) {
  .pie__legal {
    text-align: right;
  }
}
.pie__firma {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(242, 242, 243, 0.34);
}
.pie__firma i {
  font-style: normal;
  color: #c4553f;
}
.pie__firma a {
  color: rgba(242, 242, 243, 0.6);
  border-bottom: var(--rule) solid transparent;
  transition:
    color 0.3s var(--e-tec),
    border-color 0.3s var(--e-tec);
}
.pie__firma a:hover,
.pie__firma a:focus-visible {
  color: var(--papel);
  border-bottom-color: var(--acero-400);
}