/* Work & Fashion — hoja de estilo única.
   El prototipo traía todo en atributos `style`; aquí vive lo mismo en clases,
   más lo que un atributo no puede expresar: hover, foco, media queries y el
   acordeón. Los valores (colores, tamaños, espaciados) son los del diseño. */

:root {
  --fondo:        #1B1D20;
  --fondo-alt:    #16181A;
  --tarjeta:      #212428;
  --pie:          #111315;
  --borde:        #32363B;
  --borde-claro:  #3B4046;
  --borde-tenue:  #26292C;
  --acento:       #F5B417;
  --acento-vivo:  #FFCB4A;
  --titulo:       #F7F6F4;
  --texto:        #E8E6E3;
  --texto-2:      #C9C6C2;
  --texto-3:      #A7A4A0;
  --texto-4:      #9C9995;
  --texto-5:      #B9B6B2;
  --apagado:      #6E7378;
  --ancho:        1240px;
  --lado:         clamp(18px, 3vw, 32px);
  --alto-seccion: clamp(56px, 7vw, 96px);
  --estrecha:     'Archivo Narrow', 'Archivo', Helvetica, Arial, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-vivo); }
p { text-wrap: pretty; }
img { max-width: 100%; }

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

/* Salta al contenido: visible sólo con teclado. */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--acento); color: var(--fondo);
  padding: 12px 18px; font-weight: 700;
}
.saltar:focus { left: 0; color: var(--fondo); }

/* ── Estructura ─────────────────────────────────────────────────────────── */

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); }
.contenedor-angosto { max-width: 920px; margin: 0 auto; padding: 0 var(--lado); }
.seccion { padding-block: var(--alto-seccion); }
.linea-abajo { border-bottom: 1px solid var(--borde); }
.fondo-alt { background: var(--fondo-alt); }

/* ── Tipografía ─────────────────────────────────────────────────────────── */

.etiqueta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--acento); display: inline-block; text-transform: uppercase;
}
.etiqueta-gris {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--apagado); text-transform: uppercase;
}
.dato { font-family: var(--mono); font-size: 11px; color: var(--apagado); }

h1, h2, h3 { font-family: var(--estrecha); text-transform: uppercase; color: var(--titulo); }

h1 {
  font-weight: 700; font-size: clamp(34px, 4.6vw, 60px);
  line-height: 0.98; letter-spacing: -0.005em; margin: 0 0 22px;
}
h1 .resalte { color: var(--acento); }

h2 {
  font-weight: 700; font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.02; margin: 14px 0 14px;
}
h2.chica { font-size: clamp(26px, 3vw, 36px); line-height: 1.04; }

h3 { font-weight: 600; font-size: 20px; letter-spacing: 0.02em; margin: 0 0 12px; }

.entrada { font-size: 17px; line-height: 1.6; color: var(--texto-3); margin: 0 0 40px; }
.entrada.grande { font-size: 18px; }
.limite-560 { max-width: 560px; }
.limite-600 { max-width: 600px; }
.limite-620 { max-width: 620px; }
.limite-640 { max-width: 640px; }
.limite-700 { max-width: 700px; }
.nota { font-size: 14px; color: var(--apagado); margin: 16px 0 0; }

/* ── Botones ────────────────────────────────────────────────────────────── */

.boton {
  display: inline-block; background: var(--acento); color: var(--fondo);
  border: none; font-family: var(--estrecha); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; cursor: pointer;
  padding: 18px 30px; font-size: 15px;
}
.boton:hover { background: var(--acento-vivo); color: var(--fondo); }

.boton-linea {
  display: inline-block; border: 1px solid #4A4F55; color: var(--texto);
  background: none; font-family: var(--estrecha); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; cursor: pointer;
  padding: 17px 28px; font-size: 15px;
}
.boton-linea:hover { background: var(--tarjeta); color: var(--acento); }

/* ── Encabezado ─────────────────────────────────────────────────────────── */

.encabezado {
  position: sticky; top: 0; z-index: 60;
  background: rgba(27, 29, 32, 0.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.encabezado > .contenedor {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 34px);
  flex-wrap: wrap; min-height: 70px;
}
.marca { display: flex; align-items: center; gap: 11px; color: #F2F1EF; }
.marca:hover { color: #F2F1EF; }
.marca-barra { width: 12px; height: 30px; background: var(--acento); display: inline-block; }
.marca-nombre {
  font-family: var(--estrecha); font-weight: 700; font-size: 23px;
  letter-spacing: 0.04em; text-transform: uppercase;
}

.nav {
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px);
  margin-left: auto; font-size: 14px; font-family: var(--estrecha);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.nav a { color: var(--texto-5); }
.nav a:hover { color: var(--acento); }
.nav .boton { color: var(--fondo); padding: 14px 22px; font-size: 14px; letter-spacing: 0.06em; }
.nav .boton:hover { color: var(--fondo); }

.acciones-movil { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.acciones-movil .boton { padding: 12px 16px; font-size: 13px; letter-spacing: 0.06em; }
.boton-panel {
  background: var(--tarjeta); border: 1px solid var(--borde-claro);
  width: 46px; height: 46px; font-size: 18px; color: var(--texto);
  cursor: pointer; line-height: 1;
}
/* `display:grid` gana al `[hidden]{display:none}` del navegador: sin esta
   regla el panel arranca abierto en cada carga en celular. */
.panel[hidden] { display: none; }
.panel {
  width: 100%; border-top: 1px solid var(--borde);
  padding: 8px 0 14px; display: grid; gap: 1px;
}
.panel a {
  padding: 14px 6px; font-size: 15px; color: var(--texto);
  font-family: var(--estrecha); letter-spacing: 0.05em; text-transform: uppercase;
}
.panel a:hover { background: var(--tarjeta); color: var(--acento); }

/* El corte lo decide el CSS, no `window.innerWidth` como en el prototipo. */
.solo-movil { display: none; }
@media (max-width: 1009px) {
  .solo-movil { display: contents; }
  .solo-escritorio { display: none; }
}

/* ── Héroe ──────────────────────────────────────────────────────────────── */

.heroe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: stretch;
}
.heroe-texto {
  padding-block: clamp(44px, 5vw, 72px);
  display: flex; flex-direction: column; justify-content: center;
}
.heroe-arriba {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--acento); text-transform: uppercase;
}
.heroe-arriba::before { content: ''; width: 26px; height: 2px; background: var(--acento); }
.heroe p {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--texto-3);
  margin: 0 0 30px; max-width: 520px;
}
.heroe-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.heroe-foto {
  position: relative; min-height: clamp(320px, 42vw, 540px);
  margin-left: clamp(0px, 2vw, 32px);
}
.heroe-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 60%; display: block;
}

/* ── Franja de datos ────────────────────────────────────────────────────── */

.franja {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.franja > div { padding: 26px 24px; box-shadow: 1px 0 0 var(--borde); }
.franja > div:first-child { padding-left: 0; }
.franja > div:last-child { padding-right: 0; box-shadow: none; }
.franja .valor { font-size: 15px; color: var(--texto); }
.franja .valor.alerta { color: var(--acento); }
.franja .etiqueta-gris { display: block; margin-bottom: 8px; }

/* ── Rejillas de celdas con hilo de 1px ─────────────────────────────────── */

.rejilla {
  display: grid; gap: 1px; background: var(--tarjeta); border: 1px solid var(--borde);
}
.rejilla > * { box-shadow: 0 0 0 1px var(--borde); }
.rejilla-oscura { background: var(--fondo); }
.rejilla-oscura > * { background: var(--fondo); }
.col-250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.col-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.col-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.col-180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.col-170 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.col-150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.col-130 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

/* Lista de capacidades: una celda por renglón de texto. */
.capacidad { background: var(--tarjeta); padding: 16px 18px; color: var(--texto-2); font-size: 15px; }
.rejilla-oscura .capacidad { background: var(--fondo); }

/* Tarjetas de giro */
.giro { background: var(--tarjeta); }
.giro:hover { background: #262A2E; }
.giro img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.giro-cuerpo { padding: 24px 28px 28px; }
.giro-num { font-family: var(--mono); font-size: 11px; color: var(--acento); margin-bottom: 14px; }
.giro p { font-size: 15px; line-height: 1.6; color: var(--texto-4); margin: 0; }

/* ── Ciclo comercial (bloque amarillo) ──────────────────────────────────── */

.ciclo { background: var(--acento); color: var(--fondo); }
.ciclo h2 { color: var(--fondo); font-size: clamp(28px, 3.6vw, 44px); }
.ciclo .etiqueta { color: #6A5209; }
.ciclo .entrada { color: #4A3D0C; font-size: 18px; margin-bottom: 44px; }
.ciclo-pasos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; background: var(--acento);
}
.ciclo-pasos > div {
  background: var(--acento); box-shadow: 0 0 0 1px rgba(27, 29, 32, 0.18); padding: 26px 22px;
}
.ciclo-num {
  font-family: var(--estrecha); font-weight: 700; font-size: 44px; line-height: 1;
  color: rgba(27, 29, 32, 0.28); margin-bottom: 16px;
}
.ciclo h3 {
  font-weight: 700; font-size: 19px; letter-spacing: 0.03em;
  margin: 0 0 10px; color: var(--fondo);
}
.ciclo p { font-size: 15px; line-height: 1.55; color: #4A3D0C; margin: 0; }

/* ── Dos columnas con foto ──────────────────────────────────────────────── */

.dos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 4vw, 56px);
}
.dos.centrado { align-items: center; }
.dos.arriba { align-items: start; }
.foto-lado { width: 100%; height: clamp(300px, 34vw, 440px); object-fit: cover; display: block; }
.foto-ancha {
  width: 100%; height: clamp(240px, 26vw, 360px); object-fit: cover;
  display: block; margin-bottom: clamp(28px, 4vw, 44px);
}
.foto-demo {
  width: 100%; height: clamp(200px, 22vw, 280px); object-fit: cover;
  display: block; margin-bottom: 26px;
}
/* La foto de Clientes va primero en la lectura y a la izquierda en pantalla. */
.orden-texto { order: 2; }
.orden-foto  { order: 1; }

/* ── Matriz de tallas ───────────────────────────────────────────────────── */

.matriz-caja { background: var(--tarjeta); border: 1px solid var(--borde); padding: clamp(20px, 3vw, 28px); }
.matriz-encabezado {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  margin-bottom: 22px; border-bottom: 1px solid var(--borde); padding-bottom: 18px;
}
.matriz-titulo {
  font-family: var(--estrecha); font-weight: 600; text-transform: uppercase;
  font-size: 19px; letter-spacing: 0.03em; color: var(--titulo);
}
.matriz-codigo { font-family: var(--mono); font-size: 10px; color: var(--apagado); margin-top: 5px; text-transform: uppercase; }
.matriz-barras {
  height: 26px; width: 88px;
  background-image: repeating-linear-gradient(90deg, var(--texto) 0 2px, transparent 2px 5px);
}
.matriz {
  display: grid; grid-template-columns: minmax(56px, 88px) repeat(6, 1fr);
  gap: 5px; font-size: 13px; align-items: center;
}
.matriz .talla { text-align: center; color: var(--apagado); font-family: var(--mono); }
.matriz .color { display: flex; align-items: center; gap: 8px; color: var(--texto-2); }
.matriz .muestra { width: 12px; height: 12px; flex: none; }
.matriz .celda { text-align: center; background: #2A2E33; padding: 10px 0; color: var(--texto); }
.matriz .celda.baja { background: #3D3005; color: var(--acento); font-weight: 700; }
.aviso-amarillo {
  background: #2A2308; border-left: 3px solid var(--acento);
  padding: 12px 14px; font-size: 13px; color: var(--acento);
}
.matriz-caja .aviso-amarillo { margin-top: 22px; }

@media (max-width: 480px) {
  .matriz { grid-template-columns: minmax(42px, 72px) repeat(6, 1fr); gap: 3px; font-size: 12px; }
  .matriz .celda { padding: 9px 0; }
  .matriz .color { gap: 5px; }
  .matriz-encabezado { flex-wrap: wrap; }
}

/* ── Inventario ─────────────────────────────────────────────────────────── */

.almacen { background: var(--tarjeta); padding: 22px 18px; }
.almacen-nombre {
  font-family: var(--estrecha); font-weight: 600; text-transform: uppercase;
  font-size: 17px; color: var(--titulo);
}
.almacen .dato { font-size: 11px; margin-top: 6px; }
.traspaso {
  background: #2A2308; border-left: 3px solid var(--acento); padding: 18px 20px;
  margin-top: 14px; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; flex-wrap: wrap;
}
.traspaso .etiqueta-gris { color: #B98F14; }
.traspaso .destino { font-size: 15px; color: var(--titulo); margin-top: 6px; }
.traspaso .estado { font-family: var(--mono); font-size: 11px; color: var(--acento); text-transform: uppercase; }
.dos-inventario {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 48px); align-items: start;
}

/* ── Bloques con fichas ─────────────────────────────────────────────────── */

.bloque { background: var(--tarjeta); padding: 32px; }
.bloque h3 { font-weight: 700; font-size: 23px; margin: 14px 0 12px; }
.bloque p { font-size: 16px; line-height: 1.6; color: var(--texto-4); margin: 0 0 20px; }
.fichas { display: flex; flex-wrap: wrap; gap: 7px; }
.ficha { border: 1px solid var(--borde-claro); padding: 7px 12px; font-size: 13px; color: var(--texto-2); }

/* ── Funciones ──────────────────────────────────────────────────────────── */

.funcion { background: var(--fondo); padding: 26px; }
.funcion h3 {
  font-weight: 600; font-size: 18px; letter-spacing: 0.03em;
  margin: 0 0 14px; color: var(--acento);
}
.funcion ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 15px; color: var(--texto-4); }

/* ── Reportes ───────────────────────────────────────────────────────────── */

.reporte { background: var(--fondo); padding: 20px; }
.reporte .etiqueta-gris { display: block; margin-bottom: 8px; }
.reporte p { font-size: 15px; line-height: 1.55; color: var(--texto-2); margin: 0; }

/* ── Implementación ─────────────────────────────────────────────────────── */

.plan { background: var(--tarjeta); padding: 22px; }
.plan.destacado { background: var(--acento); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 15px; color: var(--texto-2); }
.plan .etiqueta-gris { display: block; margin-bottom: 12px; }
.plan.destacado .etiqueta-gris { color: #6A5209; }
.plan.destacado ul { color: var(--fondo); }

/* ── Preguntas (acordeón nativo) ────────────────────────────────────────── */

.pregunta { background: var(--fondo); padding: 22px 24px; }
.pregunta summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  cursor: pointer; font-size: 17px; color: var(--titulo);
  font-family: var(--estrecha); font-weight: 600; letter-spacing: 0.02em;
  list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: '+'; color: var(--acento); font-family: 'Archivo', sans-serif; flex: none;
}
.pregunta[open] summary::after { content: '−'; }
.pregunta p { font-size: 16px; line-height: 1.6; color: var(--texto-4); margin: 14px 0 0; }

/* ── Formulario ─────────────────────────────────────────────────────────── */

.formulario { background: var(--tarjeta); border: 1px solid var(--borde); padding: clamp(22px, 3vw, 34px); }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.campo {
  display: grid; gap: 7px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--apagado); text-transform: uppercase;
}
.campo input, .campo select, .campo textarea {
  border: 1px solid var(--borde-claro); background: var(--fondo);
  padding: 14px 15px; font-size: 16px; font-family: 'Archivo', sans-serif;
  color: var(--texto); border-radius: 0; width: 100%;
}
.campo textarea { resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--apagado); }
.campo-error { border-color: #D8541F !important; }
.ancho-total { margin-top: 22px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  border: 1px solid var(--borde-claro); padding: 9px 14px;
  font-size: 14px; color: var(--texto-2); cursor: pointer; user-select: none;
}
.chip:hover span { border-color: var(--acento); color: var(--acento); }
.chip input:checked + span { border-color: var(--acento); color: var(--fondo); background: var(--acento); }
.chip input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 3px; }

.formulario .boton { margin-top: 24px; width: 100%; padding: 18px 30px; font-size: 16px; }
.pie-formulario { font-size: 13px; color: var(--apagado); margin: 14px 0 0; text-align: center; }
.trampa { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.aviso-ok, .aviso-error { font-size: 14px; line-height: 1.5; margin: 14px 0 0; padding: 12px 14px; }
.aviso-ok { background: #2A2308; border-left: 3px solid var(--acento); color: var(--acento); }
.aviso-error { background: #3A1D10; border-left: 3px solid #D8541F; color: #F0A683; }

/* ── Demostración ───────────────────────────────────────────────────────── */

.promesas { display: grid; gap: 12px; font-size: 15px; color: var(--texto-4); }
.promesas > div { border-top: 1px solid var(--borde); padding-top: 12px; }

/* ── Pie ────────────────────────────────────────────────────────────────── */

.pie { background: var(--pie); border-top: 1px solid var(--borde); }
.pie > .contenedor {
  padding-block: 52px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px;
}
.pie-marca { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.pie-marca .marca-barra { width: 10px; height: 26px; }
.pie-marca .marca-nombre { font-size: 20px; color: #F2F1EF; }
.pie p { font-size: 15px; line-height: 1.6; margin: 0; color: #8A8783; max-width: 320px; }
.pie-enlaces {
  display: grid; gap: 10px; font-size: 14px; align-content: start;
  font-family: var(--estrecha); letter-spacing: 0.04em; text-transform: uppercase;
}
.pie-enlaces a { color: var(--texto-5); }
.pie-enlaces a:hover { color: var(--acento); }
.pie-legal { border-top: 1px solid var(--borde-tenue); }
.pie-legal > .contenedor {
  padding-block: 18px; font-family: var(--mono); font-size: 11px; color: #5C6165;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Encabezado en teléfono ─────────────────────────────────────────────────
   El prototipo deja que el encabezado se parta en dos renglones (el logotipo
   arriba, el botón y el ☰ abajo). En un teléfono eso deja una barra fija de
   93px con medio renglón vacío: aquí se achican logotipo y botón lo justo
   para que quepan en uno solo. */
@media (max-width: 480px) {
  .encabezado > .contenedor { gap: 10px; min-height: 62px; }
  .marca { gap: 9px; }
  .marca-barra { width: 10px; height: 24px; }
  .marca-nombre { font-size: 18px; }
  .acciones-movil { gap: 8px; }
  .acciones-movil .boton { padding: 11px 12px; font-size: 12px; letter-spacing: 0.04em; }
  .boton-panel { width: 42px; height: 42px; font-size: 16px; }
}
@media (max-width: 379px) {
  .marca-nombre { font-size: 16px; }
  .acciones-movil .boton { padding: 11px 10px; font-size: 11px; }
}

/* ── Franja de datos apilada ────────────────────────────────────────────────
   En un solo renglón la primera celda va pegada al margen y la línea de 1px
   separa columnas. Al apilarse, esa misma regla deja la primera celda
   desalineada de las otras tres y la línea vertical suelta a la derecha: al
   quebrarse, la separación pasa a ser horizontal. */
@media (max-width: 899px) {
  .franja { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
  .franja > div { padding: 20px 0; box-shadow: 0 1px 0 var(--borde); }
  .franja > div:first-child { padding-left: 0; }
  .franja > div:last-child { padding-right: 0; }
  .franja > div:nth-child(3), .franja > div:nth-child(4) { box-shadow: none; }
}
@media (max-width: 520px) {
  .franja { grid-template-columns: 1fr; }
  .franja > div:nth-child(3) { box-shadow: 0 1px 0 var(--borde); }
}