/* =====================================================================
   IKreaa Retail · la hoja de ruta sellada
   Fondo de noche, porque el montaje de una tienda se hace con la persiana
   bajada. Papel rosa como acento, sellos de fecha y una ruta que recorre
   Espana. Velocidad y control, no elegancia contemplativa.
   ===================================================================== */

:root {
  --cab-fondo: rgba(23, 20, 28, .93);
  --cab-filete: rgba(237, 210, 203, .22);
  --cab-tinta: rgba(243, 240, 232, .72);
  --cab-solido: var(--noche);
  --cab-tinta-fuerte: var(--papel-rosa);
  --mercado-papel: var(--noche-2);
  --mercado-papel-hover: #2A2532;
  --texto: rgba(243, 240, 232, .82);
}

body { background: var(--noche); color: var(--papel-blanco); }
body::after { mix-blend-mode: overlay; opacity: .3; }

.cabecera { backdrop-filter: blur(12px); }
.cabecera .marca { --marca-color: var(--papel-blanco); --marca-tam: 1.0625rem; --marca-division-color: var(--papel-rosa); }

.titulo { color: var(--papel-blanco); }
.entradilla { color: var(--texto); }

/* En oscuro el filete y la tinta cambian de lado. */
.retail .rotulo { color: rgba(237, 210, 203, .7); }
.retail .filete { border-top-color: rgba(243, 240, 232, .18); }
.retail .boton { --b-fondo: var(--papel-rosa); --b-tinta: var(--noche); }
.retail .boton--hueco {
  --b-fondo: transparent; --b-tinta: var(--papel-blanco);
  box-shadow: inset 0 0 0 1.5px rgba(243, 240, 232, .32), 0 1px 0 0 var(--laton);
}
.retail .boton--hueco:hover { --b-fondo: rgba(243, 240, 232, .08); box-shadow: inset 0 0 0 1.5px var(--papel-rosa), 0 3px 0 0 var(--laton); }

/* ---------------------------------------------------------------
   Hero: la tienda de noche
   --------------------------------------------------------------- */

.turno {
  position: relative;
  min-height: min(88vh, 780px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(243, 240, 232, .18);
}

.turno__foto {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%;
  filter: contrast(1.1) saturate(.9) brightness(.9);
}
.turno::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--noche) 4%, rgba(23, 20, 28, .55) 44%, rgba(23, 20, 28, .3) 100%),
    linear-gradient(to right, rgba(23, 20, 28, .82), transparent 62%);
}

.turno__contenido {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(3rem, 8vw, 6rem);
  display: grid;
  gap: calc(var(--paso) * 3.5);
}

.turno h1 {
  font-size: clamp(2.4rem, 6.6vw, 5.4rem);
  font-weight: 600;
  font-stretch: 108%;
  line-height: .95;
  letter-spacing: -.045em;
  max-width: 15ch;
  color: var(--papel-blanco);
}
.turno h1 em { font-style: normal; color: var(--papel-rosa); }

.turno__entrada {
  max-width: 48ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  color: var(--texto);
}

.turno__acciones { display: flex; flex-wrap: wrap; gap: calc(var(--paso) * 2); align-items: center; }

/* Sello de la hoja de ruta, arriba a la derecha del hero. */
.turno__sello {
  position: absolute; z-index: 2;
  top: clamp(1.5rem, 5vw, 3.5rem); right: var(--margen);
  color: var(--papel-rosa);
  background: rgba(23, 20, 28, .62);
  backdrop-filter: blur(3px);
  animation: estampar .8s var(--ease-sello) .35s both;
}
@media (max-width: 780px) { .turno__sello { display: none; } }

/* ---------------------------------------------------------------
   El rail: la hoja de ruta es el eje vertical de la pagina
   Zonas, hitos y carga son paradas del MISMO documento, no tres
   secciones distintas con tres rejillas iguales.
   --------------------------------------------------------------- */

.rail {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-left: clamp(2.5rem, 6vw, 5rem);
}

/* La linea del rail, continua de arriba abajo. */
.rail::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(.7rem, 1.8vw, 1.55rem);
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0, rgba(243, 240, 232, .3) 3rem,
    rgba(243, 240, 232, .3) calc(100% - 4rem), transparent 100%);
}

/* Cabecera de tramo: la ruta cambia de asunto sin cortarse. */
.rail__tramo {
  position: relative;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}
.rail__tramo:first-child { padding-top: 0; }
.rail__tramo::before {
  content: '';
  position: absolute;
  top: clamp(3.4rem, 7.4vw, 5.4rem);
  left: calc(clamp(2.5rem, 6vw, 5rem) * -1 + clamp(.7rem, 1.8vw, 1.55rem) - 5px);
  width: 11px; height: 11px;
  background: var(--laton);
  transform: rotate(45deg);
}
.rail__tramo:first-child::before { top: .45rem; }

.rail__titulo {
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.04;
  color: var(--papel-rosa);
}
.rail__intro {
  margin-top: calc(var(--paso) * 1.75);
  max-width: 58ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--texto);
}

/* Parada: la unidad del rail. */
.rail__parada,
.rail__carga {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.6vw, 2.25rem);
  align-items: baseline;
  padding-block: calc(var(--paso) * 2.75);
  border-bottom: 1px solid rgba(243, 240, 232, .14);
  transition: background-color var(--t-corto) var(--ease);
}
.rail__parada:hover,
.rail__carga:hover { background: rgba(237, 210, 203, .06); }

/* El punto donde la parada toca el rail. */
.rail__parada::before,
.rail__carga::before {
  content: '';
  position: absolute;
  top: calc(var(--paso) * 3.6);
  left: calc(clamp(2.5rem, 6vw, 5rem) * -1 + clamp(.7rem, 1.8vw, 1.55rem) - 3px);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--noche);
  box-shadow: 0 0 0 1.5px var(--laton);
}

.rail__marca {
  font-family: var(--dato);
  font-size: .6875rem;
  letter-spacing: -.02em;
  color: var(--laton);
  min-width: 3.2rem;
}
/* El dia es un dato con caja, como una casilla de fecha sellada. */
.rail__marca--dia {
  padding: .4em .6em;
  border: 1.5px solid var(--laton);
  color: var(--laton-claro);
  min-width: 0;
  white-space: nowrap;
}

.rail__cuerpo h4 {
  font-size: clamp(1.0625rem, 1.8vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--papel-blanco);
}
.rail__cuerpo p {
  margin-top: calc(var(--paso) * 1);
  max-width: 62ch;
  font-size: .875rem;
  line-height: 1.58;
  color: var(--texto);
}

.rail__sello {
  justify-self: end;
  font-family: var(--dato);
  font-size: .625rem;
  letter-spacing: -.02em;
  color: var(--papel-rosa);
  padding: .45em .7em;
  border: 1px solid rgba(237, 210, 203, .4);
  border-radius: 2px;
  white-space: nowrap;
}
.rail__sello--consulta {
  color: var(--laton-claro);
  border-color: rgba(211, 174, 115, .5);
}

/* La ultima parada del calendario se sella: la ruta termina firmada. */
.rail__estampa { justify-self: end; align-self: center; }

@media (max-width: 820px) {
  .rail { padding-left: clamp(1.75rem, 8vw, 2.75rem); }
  .rail__parada,
  .rail__carga {
    grid-template-columns: auto minmax(0, 1fr);
    gap: calc(var(--paso) * 1.25) calc(var(--paso) * 2);
    align-items: start;
  }
  .rail__sello,
  .rail__estampa { grid-column: 2; justify-self: start; }
  .rail__cuerpo { grid-column: 2; }
  .rail__marca { grid-row: 1; }
}

/* ---------------------------------------------------------------
   Tira de sectores: a sangre y desplazable, no rejilla de tarjetas
   --------------------------------------------------------------- */

.tira {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  background: rgba(243, 240, 232, .16);
  border-block: 1px solid rgba(243, 240, 232, .16);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tira::-webkit-scrollbar { display: none; }

.tira__pieza {
  position: relative;
  isolation: isolate;
  min-height: clamp(340px, 42vw, 520px);
  display: grid;
  align-items: end;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--noche);
}
.tira__pieza img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.8) contrast(1.06) saturate(.85);
  transition: transform 1.1s var(--ease), filter var(--t-medio) var(--ease);
}
.tira__pieza::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(23, 20, 28, .95) 8%, rgba(23, 20, 28, .15) 64%);
}
.tira__pieza:hover img { transform: scale(1.05); filter: brightness(.9) contrast(1.08) saturate(.95); }

.tira__pieza figcaption {
  position: relative; z-index: 2;
  display: grid; gap: calc(var(--paso) * 1);
  padding: clamp(1.1rem, 2vw, 1.75rem);
}
.tira__pieza b {
  font-size: 1.125rem; font-weight: 600; letter-spacing: -.025em;
  color: var(--papel-blanco);
}
.tira__pieza span {
  font-size: .8125rem; line-height: 1.5; color: var(--texto);
}

/* ---------------------------------------------------------------
   Captacion sobre papel rosa: el unico bloque claro de la pagina
   --------------------------------------------------------------- */

.orden {
  background: var(--papel-rosa);
  color: var(--tinta);
  border-top: 2px solid var(--laton);
}
.orden__reticula {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.orden__texto { display: grid; gap: calc(var(--paso) * 3); position: sticky; top: 6.5rem; }
.orden__texto h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; color: var(--tinta); }
.orden__texto p { color: #6B4A44; max-width: 40ch; line-height: 1.6; }
.orden .rotulo { color: #6B4A44; }

.orden__cifras { display: grid; gap: calc(var(--paso) * 2); margin-top: var(--paso); }
.orden__cifras li {
  display: grid; gap: calc(var(--paso) * .75);
  padding-bottom: calc(var(--paso) * 2);
  border-bottom: 1px solid rgba(38, 32, 47, .2);
}
.orden__cifras b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.orden__cifras span { font-size: .875rem; color: #6B4A44; line-height: 1.5; }

.orden .hoja { --hoja-papel: var(--papel-blanco); }
.orden .boton { --b-fondo: var(--tinta); --b-tinta: var(--papel-rosa); }

@media (max-width: 940px) {
  .orden__reticula { grid-template-columns: 1fr; }
  .orden__texto { position: static; }
}