/* Jimplify — sitio informativo (Fase 1), versión 2
   Paleta y tipografía según el Manual de Marca v1.2.
   Acabado según jimplify-graficos: luz descentrada, bloom selectivo, profundidad, degradado en el trazo, grain. */

@font-face { font-family: Outfit; font-weight: 300; font-display: swap; src: url(fonts/outfit-300.woff2) format("woff2"); }
@font-face { font-family: Outfit; font-weight: 600; font-display: swap; src: url(fonts/outfit-600.woff2) format("woff2"); }
@font-face { font-family: Outfit; font-weight: 700; font-display: swap; src: url(fonts/outfit-700.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(fonts/inter-500.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(fonts/inter-600.woff2) format("woff2"); }

:root {
  --navy: #0A1F2E;
  --teal: #039B96;
  --deep: #006865;
  --bright: #02BCB6;
  --off: #FAFAF7;
  --mist: #E5E7E6;

  --texto-suave: rgb(250 250 247 / .74);
  --linea: rgb(2 188 182 / .16);

  --display: Outfit, "Segoe UI", system-ui, sans-serif;
  --cuerpo: Inter, "Segoe UI", system-ui, sans-serif;

  --margen: clamp(20px, 5vw, 64px);
  --ancho: 1200px;
  --seccion: clamp(88px, 12vw, 168px);
  --radio: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--off);
  font: 400 1rem/1.5 var(--cuerpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Grain: quita el plástico digital a toda la página */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3, .servicio__promesa, .contexto__frase { text-wrap: balance; }
p { text-wrap: pretty; }

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

.contenedor { position: relative; width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }

.saltar {
  position: absolute; left: 16px; top: -100px; z-index: 60;
  background: var(--bright); color: var(--navy); padding: 10px 16px; border-radius: var(--radio);
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 16px; }

/* ---------- Botones y enlaces ----------
   Los botones hablan el mismo idioma que el arte: luz que respira, un destello que los cruza
   al ritmo de las ondas de la portada (7 s) y una luz interior que sigue al cursor. */

@property --brillo { syntax: '<percentage>'; inherits: false; initial-value: -60%; }

.boton {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 28px;
  background: linear-gradient(180deg, var(--bright), var(--teal));
  color: var(--navy);
  border-radius: var(--radio);
  font: 600 1rem/1.2 var(--cuerpo); text-decoration: none;
  box-shadow: 0 0 0 1px rgb(2 188 182 / .45), 0 10px 40px -8px rgb(2 188 182 / .55);
  transition: box-shadow .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
  animation: respira 3.5s ease-in-out infinite;
  --mx: 50%; --my: 50%;
}
/* Destello: la misma luz que recorre las ondas */
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent calc(var(--brillo) - 14%), rgb(250 250 247 / .5) var(--brillo), transparent calc(var(--brillo) + 14%));
  animation: destello 7s cubic-bezier(.6, 0, .4, 1) infinite;
}
/* Luz interior que sigue al cursor */
.boton::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120px circle at var(--mx) var(--my), rgb(250 250 247 / .45), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.boton:hover::after { opacity: 1; }
.boton:hover { box-shadow: 0 0 0 1px rgb(2 188 182 / .7), 0 16px 56px -6px rgb(2 188 182 / .8); }
.boton:active { transform: scale(.97); }

.boton--chico { min-height: 40px; padding: 8px 18px; font-size: .9375rem; box-shadow: 0 0 0 1px rgb(2 188 182 / .4), 0 6px 24px -8px rgb(2 188 182 / .6); }
.boton--claro { background: linear-gradient(180deg, var(--off), #E9F7F6); color: var(--navy); box-shadow: 0 12px 40px -10px rgb(10 31 46 / .6); animation-name: respira-claro; }
.boton--claro::before { background: linear-gradient(105deg, transparent calc(var(--brillo) - 14%), rgb(2 188 182 / .4) var(--brillo), transparent calc(var(--brillo) + 14%)); }
.boton--claro::after { background: radial-gradient(120px circle at var(--mx) var(--my), rgb(2 188 182 / .22), transparent 70%); }
.boton--claro:hover { box-shadow: 0 18px 52px -8px rgb(10 31 46 / .75); }

@keyframes destello { 0%, 55% { --brillo: -60%; } 85%, 100% { --brillo: 160%; } }
@keyframes respira {
  0%, 100% { box-shadow: 0 0 0 1px rgb(2 188 182 / .45), 0 10px 40px -8px rgb(2 188 182 / .5); }
  50% { box-shadow: 0 0 0 1px rgb(2 188 182 / .6), 0 12px 52px -6px rgb(2 188 182 / .72); }
}
@keyframes respira-claro {
  0%, 100% { box-shadow: 0 12px 40px -10px rgb(10 31 46 / .55); }
  50% { box-shadow: 0 14px 48px -8px rgb(10 31 46 / .7), 0 0 32px -4px rgb(250 250 247 / .35); }
}
.boton:hover { animation-play-state: paused; }

/* Enlaces: un mini recorrido. La gota nace a la izquierda, la línea se dibuja y la gota llega al final */
.enlace, .cierre__correo {
  position: relative;
  display: inline-block; padding: 4px 0 10px;
  font-weight: 600; text-decoration: none;
  background:
    linear-gradient(90deg, var(--teal), var(--bright)) left bottom 3px / 0% 2px no-repeat,
    linear-gradient(90deg, rgb(2 188 182 / .35), rgb(2 188 182 / .05)) left bottom 3.5px / 100% 1px no-repeat;
  transition: background-size .6s cubic-bezier(.65, 0, .35, 1), color .2s ease;
}
.enlace { color: var(--bright); }
.enlace::after, .cierre__correo::after {
  content: ""; position: absolute; left: 0; bottom: 1px;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 10px 1px currentColor;
  transition: left .6s cubic-bezier(.65, 0, .35, 1), background-color .3s ease .45s;
}
.enlace:hover, .cierre__correo:hover { background-size: 100% 2px, 100% 1px; }
.enlace:hover::after, .cierre__correo:hover::after { left: calc(100% - 6px); background-color: var(--off); }

/* ---------- Cabecera ---------- */

.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 40;
  transition: background-color .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.cabecera.con-fondo { background: rgb(10 31 46 / .82); backdrop-filter: blur(14px); border-bottom-color: var(--linea); }
.cabecera__fila { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.cabecera__logo { margin-right: auto; }
.cabecera__logo img { width: 140px; height: auto; }
.cabecera__nav { display: flex; gap: 28px; }
.cabecera__nav a { color: var(--texto-suave); text-decoration: none; font-weight: 500; font-size: .9375rem; }
.cabecera__nav a:hover { color: var(--off); }

/* ---------- Inicio ---------- */

.inicio {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(680px, 100svh);
  display: flex; align-items: flex-end;
  padding-block: 140px clamp(64px, 9vw, 120px);
}
.inicio__ondas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
/* Luz descentrada + viñeta + degradado inferior que reserva la zona del titular */
.inicio__luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 70% 28%, rgb(2 188 182 / .22), transparent 70%),
    radial-gradient(90% 90% at 70% 28%, transparent 45%, rgb(10 31 46 / .92) 100%),
    linear-gradient(to top, var(--navy) 8%, rgb(10 31 46 / .85) 34%, transparent 62%);
}
.inicio__antesala {
  font: 300 clamp(1.375rem, 2.8vw, 2.25rem)/1.2 var(--display);
  letter-spacing: -0.01em; color: var(--texto-suave);
}
.inicio__titular {
  margin-top: 10px;
  font: 600 clamp(3.25rem, 9.5vw, 8rem)/.98 var(--display);
  letter-spacing: -0.03em;
  max-width: 11ch;
  background: linear-gradient(100deg, var(--off) 30%, #BFEDEA 70%, var(--bright) 110%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.inicio__bajada { margin-top: 28px; max-width: 34rem; font-size: 1.1875rem; line-height: 1.55; color: var(--texto-suave); }
.inicio__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }

/* ---------- Contexto ---------- */

.contexto { position: relative; padding-block: var(--seccion); }
.contexto__grilla { display: grid; grid-template-columns: 5fr 6fr; gap: 48px 72px; align-items: center; }
.contexto__texto { display: grid; gap: 20px; font-size: 1.0625rem; line-height: 1.65; color: var(--texto-suave); max-width: 34rem; }
.contexto__titulo { font: 600 clamp(1.875rem, 3.4vw, 2.625rem)/1.12 var(--display); letter-spacing: -0.015em; color: var(--off); margin-bottom: 8px; }
.contexto__orden {
  position: relative; aspect-ratio: 6 / 5; border-radius: 20px; overflow: hidden;
  background: radial-gradient(70% 70% at 70% 30%, rgb(3 155 150 / .20), transparent 70%), rgb(2 188 182 / .03);
  border: 1px solid var(--linea);
}
.contexto__orden canvas { width: 100%; height: 100%; }
.contexto__cierre {
  position: relative; isolation: isolate;
  margin-top: clamp(96px, 13vw, 176px);
  text-align: center;
}
/* halo de luz detrás de la frase */
.contexto__cierre::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: min(1000px, 100%); height: 420px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(2 188 182 / .16), transparent);
  pointer-events: none;
}
.contexto__antes {
  font: 300 clamp(1.25rem, 2.2vw, 1.625rem)/1.3 var(--display);
  color: var(--texto-suave);
}
/* La frase nace blanca, se vuelve verde y se asienta en su degradado */
@property --f1 { syntax: '<color>'; inherits: false; initial-value: #FAFAF7; }
@property --f2 { syntax: '<color>'; inherits: false; initial-value: #BFEDEA; }
@property --f3 { syntax: '<color>'; inherits: false; initial-value: #02BCB6; }
.contexto__frase {
  margin: 18px auto 0;
  font: 700 clamp(2.75rem, 8vw, 7rem)/.98 var(--display);
  letter-spacing: -0.035em;
  max-width: 13ch;
  background: linear-gradient(95deg, var(--f1) 20%, var(--f2) 55%, var(--f3) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.js .contexto__frase { --f1: #FAFAF7; --f2: #FAFAF7; --f3: #FAFAF7; }
.js .contexto__frase.visto { animation: frase-color 4.2s cubic-bezier(.45, 0, .25, 1) .3s forwards; }
@keyframes frase-color {
  0%   { --f1: #FAFAF7; --f2: #FAFAF7; --f3: #FAFAF7; }
  45%  { --f1: #02BCB6; --f2: #039B96; --f3: #02BCB6; }
  100% { --f1: #FAFAF7; --f2: #BFEDEA; --f3: #02BCB6; }
}
.contexto__cierre::before { opacity: .5; transition: opacity 3s ease .8s; }
.contexto__cierre:has(.visto)::before { opacity: 1; }

/* Arena extra alrededor de la frase: se desvanece en los bordes para no notarse como un bloque */
.polvo-local {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 100vw; height: calc(100% + 360px); transform: translate(-50%, -50%);
  filter: blur(.8px);
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 35%, transparent 100%);
}

/* Polvo estelar de fondo */
.polvo { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; filter: blur(.8px); }
main, .pie { position: relative; z-index: 1; }
.contexto__puente {
  margin: 28px auto 0; max-width: 34rem;
  font-size: 1.125rem; line-height: 1.6; color: var(--texto-suave);
}

/* ---------- Servicios ---------- */

.servicios { position: relative; isolation: isolate; padding-block: var(--seccion); }
/* Charcos de luz que se desvanecen antes de tocar los bordes: sin cortes entre secciones */
.servicios::before {
  content: ""; position: absolute; inset: -160px 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 520px at 88% 22%, rgb(3 155 150 / .16), transparent 70%),
    radial-gradient(640px 480px at 4% 82%, rgb(0 104 101 / .24), transparent 70%);
}
.servicios__titulo { font: 600 clamp(1.875rem, 3.4vw, 2.625rem)/1.12 var(--display); letter-spacing: -0.015em; margin-bottom: clamp(40px, 6vw, 64px); }
.servicios__grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.servicio {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(3 155 150 / .10), rgb(10 31 46 / .0) 60%), rgb(250 250 247 / .025);
  border: 1px solid var(--linea);
  transition: border-color .25s ease, transform .25s ease;
}
.servicio:hover, .servicio.animando { border-color: rgb(2 188 182 / .45); transform: translateY(-3px); box-shadow: 0 24px 60px -30px rgb(2 188 182 / .45); }
.servicio { cursor: default; transition: border-color .25s ease, transform .25s ease, box-shadow .3s ease; }
.servicio__arte { position: relative; height: 200px; }
.servicio__arte svg { width: 100%; height: 100%; overflow: visible; }
.servicio__arte { overflow: hidden; }
.servicio__arte::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, rgb(12 34 50), transparent); }
.servicio__texto { position: relative; display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 28px 28px 28px; }
.servicio .enlace { margin-top: auto; padding-top: 16px; }
.servicio__texto p { color: var(--texto-suave); line-height: 1.6; font-size: .9375rem; }
.servicio__nombre { font: 700 1.125rem/1.3 var(--display); color: var(--bright); }
.servicio__promesa { font: 300 1.5rem/1.2 var(--display) !important; letter-spacing: -0.01em; color: var(--off) !important; margin: 8px 0 14px; }
.servicio__logros { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 20px; }
.servicio__logros li {
  font-size: .8125rem; font-weight: 500; line-height: 1.3;
  padding: 6px 12px; border-radius: 100px;
  background: rgb(2 188 182 / .10); border: 1px solid rgb(2 188 182 / .22); color: #CFF1EF;
}

.servicio--principal { grid-column: 1 / -1; display: grid; grid-template-columns: 7fr 5fr; min-height: 420px; }
.servicio--principal .servicio__arte { height: auto; order: 2; }
.servicio--principal .servicio__arte::after { inset: 0 auto 0 0; width: 45%; height: auto; background: linear-gradient(to right, rgb(11 33 48), transparent); }
.servicio--principal .servicio__texto { padding: clamp(28px, 4vw, 56px); justify-content: center; }
.servicio--principal .servicio__nombre { font-size: 1.375rem; }
.servicio--principal .servicio__promesa { font-size: clamp(2rem, 3.6vw, 3rem) !important; line-height: 1.05; }
.servicio--principal .servicio__texto p { font-size: 1.0625rem; max-width: 36rem; }
.servicio--principal .enlace { margin-top: 0; }

/* ---------- Método: el recorrido ---------- */

.metodo { position: relative; padding-block: var(--seccion); }
.metodo__intro { display: grid; grid-template-columns: 5fr 6fr; gap: 24px 72px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.metodo__titulo { font: 600 clamp(2.5rem, 6vw, 5rem)/1.02 var(--display); letter-spacing: -0.03em; }
.metodo__intro p { font: 300 clamp(1.375rem, 2.2vw, 1.875rem)/1.3 var(--display); letter-spacing: -0.01em; color: var(--off); max-width: 24ch; padding-bottom: .35em; }

.recorrido { position: relative; }
.recorrido__arte { position: absolute; left: 0; top: 0; width: 100%; height: 150px; overflow: visible; }
.recorrido__pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 150px; }

/* Cada paso es una tarjeta que se ve presionable: borde, brillo, flecha y estado activo */
.paso {
  appearance: none; -webkit-appearance: none; font: inherit; color: var(--off); text-align: left; cursor: pointer;
  position: relative;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: 12px;
  padding: 22px 22px 20px;
  border-radius: 18px;
  border: 1px solid var(--linea);
  background: linear-gradient(180deg, rgb(3 155 150 / .10), rgb(10 31 46 / 0) 70%), rgb(250 250 247 / .025);
  transition: border-color .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, background-color .3s ease;
}
.paso:hover { border-color: rgb(2 188 182 / .45); transform: translateY(-3px); box-shadow: 0 20px 50px -30px rgb(2 188 182 / .5); }
.paso:focus-visible { outline: 2px solid var(--bright); outline-offset: 4px; }
.paso__num {
  grid-column: 1; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font: 600 .875rem/1 var(--cuerpo); color: var(--bright);
  border: 1px solid rgb(2 188 182 / .4); background: rgb(2 188 182 / .08);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.paso__nombre { grid-column: 1 / -1; margin-top: 18px; font: 600 1.5rem/1.2 var(--display); }
.paso__resumen { grid-column: 1; margin-top: 8px; color: var(--texto-suave); line-height: 1.5; font-size: .9375rem; }
.paso__flecha {
  grid-column: 2; grid-row: 3; align-self: end;
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: var(--bright); border: 1px solid rgb(2 188 182 / .3);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .3s ease, color .3s ease;
}
.paso:hover .paso__flecha { transform: translateY(3px); }
.paso[aria-selected="true"] {
  border-color: rgb(2 188 182 / .7);
  background: radial-gradient(120% 90% at 20% 0%, rgb(2 188 182 / .22), transparent 70%), rgb(3 155 150 / .08);
  box-shadow: 0 0 0 1px rgb(2 188 182 / .25), 0 24px 60px -28px rgb(2 188 182 / .6);
}
.paso[aria-selected="true"] .paso__num { background: var(--bright); color: var(--navy); box-shadow: 0 0 22px rgb(2 188 182 / .6); }
.paso[aria-selected="true"] .paso__flecha { background: var(--bright); color: var(--navy); border-color: var(--bright); }
/* Una pestaña que apunta al panel */
.paso[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px;
  transform: translateX(-50%) rotate(45deg);
  background: #0E2A38; border-right: 1px solid rgb(2 188 182 / .7); border-bottom: 1px solid rgb(2 188 182 / .7);
}

/* El panel del paso abierto */
.metodo__paneles { margin-top: 22px; }
.panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 5fr 6fr; min-height: 360px;
  border-radius: 24px; border: 1px solid rgb(2 188 182 / .35);
  background: radial-gradient(60% 90% at 15% 30%, rgb(2 188 182 / .14), transparent 70%), #0E2A38;
  box-shadow: 0 40px 100px -50px rgb(2 188 182 / .5);
  animation: panel-entra .6s cubic-bezier(.2, .8, .2, 1);
}
.panel[hidden] { display: none; }
@keyframes panel-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.panel__arte { position: relative; min-height: 280px; }
.panel__arte svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.panel__arte::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 16%; background: linear-gradient(to right, transparent, #0E2A38); }
.panel__texto { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0; }
.panel__titulo { display: flex; align-items: center; gap: 14px; font: 600 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--display); letter-spacing: -0.02em; }
.panel__num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bright); color: var(--navy); font: 600 1rem/1 var(--cuerpo); box-shadow: 0 0 24px rgb(2 188 182 / .55); }
.panel__lead { margin-top: 16px; font: 300 clamp(1.25rem, 2vw, 1.625rem)/1.3 var(--display); color: var(--off); max-width: 30ch; }
.panel__parrafo { margin-top: 14px; color: var(--texto-suave); line-height: 1.65; max-width: 44ch; }
.panel__logros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.panel__logros li {
  font-size: .8125rem; font-weight: 500; line-height: 1.3;
  padding: 7px 13px; border-radius: 100px;
  background: rgb(2 188 182 / .12); border: 1px solid rgb(2 188 182 / .3); color: #CFF1EF;
}

/* ---------- Cierre ---------- */

.cierre { padding-block: 0 var(--seccion); }
.cierre__panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 24px;
  padding: clamp(40px, 7vw, 96px);
  background:
    radial-gradient(55% 80% at 85% 20%, rgb(2 188 182 / .75), transparent 70%),
    linear-gradient(135deg, var(--deep), var(--teal) 55%, #04ABA5);
  box-shadow: 0 40px 120px -40px rgb(2 188 182 / .45);
}
.cierre__arte { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; }
.cierre__contenido { max-width: 38rem; }
.cierre__titulo { font: 600 clamp(2.25rem, 5.4vw, 4.25rem)/1.02 var(--display); letter-spacing: -0.025em; color: var(--off); }
.cierre__contenido > p { margin-top: 20px; font-size: 1.125rem; line-height: 1.5; color: rgb(250 250 247 / .9); }
.cierre__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.cierre__correo { color: var(--off); background: linear-gradient(90deg, var(--off), var(--off)) left bottom 3px / 0% 2px no-repeat, linear-gradient(90deg, rgb(250 250 247 / .45), rgb(250 250 247 / .1)) left bottom 3.5px / 100% 1px no-repeat; }
.cierre :focus-visible { outline-color: var(--off); }

/* ---------- Pie ---------- */

.pie { padding-block: 40px 48px; border-top: 1px solid var(--linea); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.pie__fila img { width: 124px; height: auto; }
.pie__lema { font: 300 1.125rem/1.3 var(--display); margin-right: auto; }
.pie__datos { color: var(--texto-suave); font-size: .875rem; }
.pie__datos a { color: var(--off); text-decoration: none; font-weight: 500; }
.pie__datos a:hover { color: var(--bright); }


/* ---------- Página 404 ---------- */

.error404 { min-height: 100svh; display: grid; align-items: center; padding-block: 64px; background: radial-gradient(60% 50% at 70% 30%, rgb(2 188 182 / .16), transparent 70%); }
.error404 img { width: 140px; height: auto; margin-bottom: 56px; }
.error404 h1 { font: 600 clamp(2.5rem, 7vw, 5rem)/1 var(--display); letter-spacing: -0.03em; }
.error404 p { margin: 20px 0 32px; font-size: 1.125rem; color: var(--texto-suave); max-width: 32rem; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .cabecera__nav { display: none; }
  .contexto__grilla, .metodo__intro { grid-template-columns: 1fr; }
  .servicios__grilla { grid-template-columns: 1fr; }
  .servicio--principal { grid-template-columns: 1fr; }
  .servicio--principal .servicio__arte { order: 0; height: 240px; }
  .servicio--principal .servicio__arte::after { inset: auto 0 0; width: auto; height: 50%; background: linear-gradient(to top, rgb(11 33 48), transparent); }

  .recorrido__arte { width: 60px; height: 100%; }
  .recorrido__pasos { grid-template-columns: 1fr; gap: 12px; padding-top: 0; padding-left: 52px; }
  .paso[aria-selected="true"]::after { display: none; }
  .panel { grid-template-columns: 1fr; min-height: 0; }
  .panel__arte { min-height: 200px; }
  .panel__arte::after { inset: auto 0 0; width: auto; height: 50%; background: linear-gradient(to bottom, transparent, #0E2A38); }
  .panel__texto { padding: 4px 24px 28px; }
  /* En el teléfono no hay pestañas: los cuatro pasos se muestran abiertos */
  .paso { display: none; }
  .recorrido__pasos { gap: 16px; }
  .recorrido__pasos .panel { margin: 0; animation: none; }
  .metodo__paneles { display: none; }
}

@media (max-width: 480px) {
  .cabecera__logo img { width: 124px; }
  .inicio__acciones .boton { width: 100%; }
  .servicio__texto { padding: 24px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .contexto__frase { --f1: #FAFAF7; --f2: #BFEDEA; --f3: #02BCB6; }
  .boton, .boton::before { animation: none !important; }
}