:root {
  color-scheme: dark;
  --tinta: #0B1020;
  --tinta-2: #131A2E;
  --linea: #25304A;
  --celeste: #38BDF8;
  --celeste-claro: #7DD3FC;
  --amarillo: #FFC933;
  --plano: #EEF2F8;
  --suave: #A7B4CC;
  --ancho: 1680px;
  --titulo: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  --texto: "Plus Jakarta Sans", system-ui, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--tinta); }
body { margin: 0; background: var(--tinta); color: var(--plano); font-family: var(--texto); font-size: 1.0625rem; line-height: 1.6; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - clamp(2rem, 5vw, 6rem), var(--ancho)); margin-inline: auto; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--celeste); color: var(--tinta); padding: .6rem 1rem; z-index: 20; }
.saltar:focus { left: 1rem; top: 1rem; }

/* ---- Barra ---- */
.barra { border-bottom: 1px solid var(--linea); }
.barra__fila { display: flex; align-items: center; gap: 2rem; min-height: 76px; }
.marca { display: inline-flex; }
.barra__nav { display: flex; gap: 1.75rem; margin-left: auto; }
.barra__nav a { text-decoration: none; font-weight: 600; color: var(--suave); }
.barra__nav a:hover { color: var(--plano); text-decoration: underline; text-underline-offset: 6px; }

/* ---- Botones ---- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .7rem 1.6rem;
  border-radius: 12px; border: 2px solid transparent; font-family: var(--texto); font-weight: 700; font-size: 1.0625rem;
  text-decoration: none; line-height: 1.2; white-space: nowrap; transition: transform .12s ease, background-color .12s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton--blanco { background: var(--plano); color: var(--tinta); }
.boton--blanco:hover { background: #fff; }
.boton--borde { border-color: var(--suave); color: var(--plano); }
.boton--borde:hover { background: rgba(255, 255, 255, .08); }
.boton--oscuro { background: var(--tinta); color: var(--plano); }
.boton--oscuro:hover { background: #17203A; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1rem; }

h1, h2 { font-family: var(--titulo); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7.4vw, 7rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.6rem); }
h3 { font-family: var(--titulo); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(2rem, 3.6vw, 3.2rem); }

/* ---- Portada: la escalera de módulos ---- */
.portada { padding-block: clamp(2.5rem, 6vw, 5rem); min-height: calc(100svh - 76px); display: grid; align-items: center; }
.portada__rejilla { display: grid; gap: 3rem; align-items: center; }
.portada__texto { display: grid; gap: 1.75rem; }
.portada__bajada { font-size: clamp(1.15rem, 1.8vw, 1.55rem); line-height: 1.5; color: var(--suave); max-width: 34em; }
.portada__bajada strong { color: var(--plano); }

.escalera { --lado: clamp(76px, 12vw, 190px); display: grid; grid-template-columns: repeat(3, var(--lado)); grid-template-rows: repeat(3, var(--lado)); gap: calc(var(--lado) * .12); justify-self: center; }
.mod { border-radius: 22%; background: linear-gradient(160deg, #26324F, #172036); box-shadow: inset 0 0 0 2px #31405F, 0 18px 30px -16px rgba(0, 0, 0, .8); animation: encaja .9s cubic-bezier(.3, 1.35, .5, 1) both; }
.mod--a { grid-area: 3 / 1; animation-delay: .1s; }
.mod--b { grid-area: 3 / 2; animation-delay: .35s; }
.mod--c { grid-area: 2 / 2; animation-delay: .6s; }
.mod--d { grid-area: 3 / 3; animation-delay: .85s; }
.mod--e { grid-area: 2 / 3; animation-delay: 1.1s; }
.mod--f { grid-area: 1 / 3; animation: encaja .9s cubic-bezier(.3, 1.35, .5, 1) 1.4s both, brilla 3.2s ease-in-out 2.6s infinite; background: linear-gradient(160deg, #7DD3FC, var(--celeste)); box-shadow: 0 0 0 2px #BAE6FD, 0 0 60px 6px rgba(56, 189, 248, .55); }
@keyframes encaja { from { transform: translateY(-140%) rotate(-10deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes brilla { 50% { box-shadow: 0 0 0 2px #BAE6FD, 0 0 90px 14px rgba(56, 189, 248, .75); } }

/* ---- Módulos ---- */
.modulos { padding-block: clamp(3rem, 7vw, 6rem); }
.seccion__cabeza { display: grid; gap: .6rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.seccion__cabeza p { color: var(--suave); font-size: 1.2rem; }
.modulos__rejilla { display: grid; gap: 1.1rem; }
.modulo { border-radius: 32px; padding: clamp(1.6rem, 3vw, 2.8rem); display: grid; gap: 1rem; align-content: space-between; min-height: 340px; }
.modulo__para { font-weight: 700; font-size: .98rem; }
.modulo__texto { font-size: 1.12rem; line-height: 1.5; max-width: 30em; }
.modulo .boton, .laboratorio { margin-top: 1.5rem; padding: 1.1rem 1.4rem; border-radius: 18px; background: var(--tinta-2); color: var(--suave); font-size: 1.05rem; }
.laboratorio strong { color: var(--plano); }
.modulo__pronto { justify-self: start; }
.modulo--produccion { background: var(--celeste); color: var(--tinta); }
.modulo--furgon { background: var(--amarillo); color: #1F2A44; }
.modulo--furgon .boton--oscuro { background: #1F2A44; color: #fff; }
.modulo--tuyo { background: transparent; border: 2px dashed #3A4A6C; color: var(--plano); }
.modulo--tuyo .modulo__para { color: var(--celeste-claro); }
.modulo__pronto { font-weight: 800; border: 2px solid currentColor; border-radius: 999px; padding: .35rem 1.1rem; }

/* ---- De dónde venimos: la pregunta que se repite ---- */
.preguntas { padding-block: clamp(3.5rem, 8vw, 7rem); border-top: 1px solid var(--linea); }
.preguntas__cabeza { display: grid; gap: 1rem; max-width: 58rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.preguntas__cabeza p { color: var(--suave); font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.55; }
.preguntas__lista li { display: grid; gap: .3rem; align-items: baseline; padding-block: clamp(1rem, 2vw, 1.75rem); border-top: 1px solid var(--linea); }
.preguntas__lista li:last-child { border-bottom: 1px solid var(--linea); }
.oficio { color: var(--celeste-claro); font-weight: 700; font-size: 1rem; }
.pregunta { font-family: var(--titulo); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(2.1rem, 6.2vw, 6rem); transition: color .25s ease; }
.preguntas__lista li:hover .pregunta { color: var(--celeste); }
.cursor { display: inline-block; width: .09em; height: .85em; margin: 0 .08em; vertical-align: -.08em; background: var(--celeste); animation: parpadea 1.1s steps(1) infinite; }
@keyframes parpadea { 50% { opacity: 0; } }
.preguntas__cierre { margin-top: clamp(1.5rem, 3vw, 2.5rem); font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.4; color: var(--suave); max-width: 40rem; }
.preguntas__cierre strong { color: var(--plano); }

/* ---- Cómo nace un módulo ---- */
.metodo { padding-block: clamp(3.5rem, 8vw, 7rem); background: var(--tinta-2); }
.metodo__pasos { display: grid; gap: 2.5rem; counter-reset: paso; }
.metodo__pasos li { display: grid; gap: .8rem; align-content: start; }
.metodo__pasos h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.metodo__pasos p { color: var(--suave); line-height: 1.55; max-width: 26rem; }
.mini { --l: 30px; display: grid; grid-template-columns: repeat(3, var(--l)); grid-template-rows: repeat(3, var(--l)); gap: 6px; width: max-content; margin-bottom: .6rem; }
.mini i { border-radius: 22%; background: #26324F; box-shadow: inset 0 0 0 1.5px #31405F; opacity: .16; }
.mini i:nth-child(1) { grid-area: 3 / 1; } .mini i:nth-child(2) { grid-area: 3 / 2; } .mini i:nth-child(3) { grid-area: 2 / 2; }
.mini i:nth-child(4) { grid-area: 3 / 3; } .mini i:nth-child(5) { grid-area: 2 / 3; } .mini i:nth-child(6) { grid-area: 1 / 3; }
.mini--1 i:nth-child(-n+1), .mini--2 i:nth-child(-n+3), .mini--3 i:nth-child(-n+5), .mini--4 i:nth-child(-n+6) { opacity: 1; }
.mini--4 i:nth-child(6) { background: var(--celeste); box-shadow: 0 0 0 2px #BAE6FD, 0 0 22px 2px rgba(56, 189, 248, .6); }

/* ---- Lo que no cambia ---- */
.principios { padding-block: clamp(3.5rem, 8vw, 7rem); }
.principios h2 { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); max-width: 22ch; }
.principios__lista { display: grid; gap: 1.6rem 2.5rem; }
.principios__lista li { display: grid; gap: .35rem; align-content: start; border-top: 1px solid var(--linea); padding-top: 1.1rem; color: var(--suave); font-size: 1.1rem; line-height: 1.5; }
.principios__lista strong { font-family: var(--titulo); font-size: 1.55rem; letter-spacing: -.02em; line-height: 1.1; color: var(--plano); }
.sq { width: 22px; height: 22px; border-radius: 22%; margin-bottom: .4rem; }
.sq--celeste { background: var(--celeste); }
.sq--blanco { background: var(--plano); }
.sq--amarillo { background: var(--amarillo); }

/* ---- Contacto ---- */
.contacto { padding-block: clamp(3rem, 7vw, 6rem); background: var(--plano); color: var(--tinta); }
.contacto__fila { display: grid; gap: 1.75rem; align-items: center; }
.contacto__fila > div:first-child { display: grid; gap: .8rem; }
.contacto p { font-size: 1.2rem; max-width: 36em; }
.contacto__correo { font-weight: 700; }
.pie { padding-block: 1.75rem; }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.pie p { color: var(--suave); font-size: .95rem; }

@media (min-width: 960px) {
  .portada__rejilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; }
  .modulos__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preguntas__lista li { grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); gap: 2rem; }
  .metodo__pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .principios__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contacto__fila { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; }
  .contacto .acciones { justify-content: flex-end; }
}
@media (max-width: 760px) {
  .barra__nav { display: none; }
  .barra__fila { min-height: 66px; }
  .marca img { width: 150px; height: auto; }
  .barra__fila > .boton { margin-left: auto; min-height: 44px; padding-inline: 1rem; font-size: .95rem; }
  .acciones .boton { flex: 1 1 100%; }
  .portada { min-height: 0; }
}

/* ---- Página de precios ---- */
.barra__nav a[aria-current="page"] { color: var(--plano); text-decoration: underline; text-underline-offset: 6px; }
.pie a { color: var(--plano); margin-left: .6rem; }
.precio-portada { padding-block: clamp(3rem, 8vw, 7rem); }
.precio-portada__texto { display: grid; gap: 1.5rem; }
.valores { padding-bottom: clamp(3rem, 7vw, 6rem); }
.valores__rejilla { display: grid; gap: 1.1rem; }
.valores .modulo { min-height: 300px; }
.valor { font-family: var(--titulo); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(2.4rem, 5vw, 4.2rem); }
.valor--vacio { font-family: var(--texto); font-weight: 600; letter-spacing: 0; font-size: 1.2rem; line-height: 1.4; }
.preguntas-frecuentes { padding-block: clamp(3rem, 7vw, 6rem); background: var(--tinta-2); }
.faq { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.faq__lista details { border-top: 1px solid var(--linea); padding-block: 1.1rem; }
.faq__lista details:last-child { border-bottom: 1px solid var(--linea); }
.faq__lista summary { cursor: pointer; font-family: var(--titulo); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -.02em; line-height: 1.25; }
.faq__lista summary:hover { color: var(--celeste); }
.faq__lista p { margin-top: .7rem; color: var(--suave); max-width: 46rem; }
@media (min-width: 960px) {
  .valores__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 3rem; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mod, .mod--f { animation: none; }
  .boton { transition: none; }
  .boton:hover { transform: none; }
}