/* Stratius Nascens · estilos
   Paleta tomada del lenguaje visual de Instagram. La página pasa de noche a amanecer al bajar. */

:root {
  --umbra: #0D1220;
  --noche: #1C2C5E;
  --profundo: #222F48;
  --azul-medio: #3F5D85;
  --azul-cielo: #628FC0;
  --cielo-claro: #7CA9F6;
  --lavanda: #A6A8DE;
  --ambar: #EAA24B;
  --naranja: #D54F30;
  --rojo: #BD2D23;
  --crema: #E0D6CD;
  --crema-calida: #ECE6D2;
  --tinta: #1A2238;
  --luz-nube: #F3E9C9;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --gutter: clamp(20px, 6vw, 64px);
  --nav-h: 64px;

  /* color de texto e inverso de cada sección (para botones) */
  --fg: var(--crema);
  --fg-inv: var(--umbra);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  background: var(--umbra);
  color: var(--crema);
  font-family: 'Noto Serif', Georgia, serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
strong { font-weight: 700; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px dotted currentColor; outline-offset: 4px; }
[hidden], .fase-oculta { display: none !important; }
::selection { background: var(--ambar); color: var(--umbra); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--crema); color: var(--umbra); padding: 10px 16px; }
.skip:focus { left: 8px; }

/* ---------- utilidades ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.estrecho { max-width: 640px; margin-left: auto; margin-right: auto; }
.wrap.estrecho { max-width: calc(640px + 2 * var(--gutter)); }
.sec { position: relative; padding: clamp(96px, 16vw, 180px) 0; color: var(--fg); }
.sec__titulo { font-size: 15px; font-style: italic; opacity: .78; margin-bottom: 28px; }
.sec__sub { font-size: 18px; margin: 14px 0 40px; opacity: .9; }
.parrafo { font-size: 17px; line-height: 1.75; margin-top: 28px; max-width: 34em; text-wrap: pretty; }
.parrafo--suave { opacity: .82; font-style: italic; }
.frase-grande { font-size: clamp(28px, 6.4vw, 48px); line-height: 1.22; margin-top: 40px; text-wrap: balance; }
.lema-grande { font-size: clamp(48px, 13vw, 104px); line-height: 1.02; }
.punteado { border: 0; border-top: 1px dotted currentColor; opacity: .5; margin: 48px 0 0; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px;
  border: 1px solid currentColor; border-radius: 2px;
  font-family: inherit; font-weight: 500; font-size: 15px; color: var(--fg); background: transparent;
  transition: background-color .7s var(--ease), color .7s var(--ease), border-color .7s var(--ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; text-align: center;
}
.btn:hover { background: var(--fg); color: var(--fg-inv); border-color: var(--fg); }
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.btn--grande { width: 100%; min-height: 56px; font-size: 16px; }
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { background: transparent; color: var(--fg); }
.btn[aria-pressed="true"] { background: var(--fg); color: var(--fg-inv); }

/* ---------- movimiento: aparición lenta (opacidad + desenfoque + desplazamiento mínimo) ---------- */
.js .reveal {
  opacity: 0; filter: blur(8px); transform: translate3d(0, 14px, 0);
  transition: opacity 1300ms var(--ease) var(--d, 0ms), filter 1300ms var(--ease) var(--d, 0ms), transform 1300ms var(--ease) var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; filter: none; transform: none; }
/* primera pantalla: aparece al cargar, sin esperar los datos */
.intro { animation: aparece 1300ms var(--ease) var(--d, 0ms) both; }
@keyframes aparece { from { opacity: 0; filter: blur(8px); transform: translate3d(0, 14px, 0); } to { opacity: 1; filter: none; transform: none; } }

/* ============ NAVEGACIÓN ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  height: var(--nav-h); padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  color: var(--crema);
  transition: background-color .8s var(--ease), border-color .8s var(--ease);
  border-bottom: 1px solid transparent;
}
body:not([data-vista="casa"]) .nav, .nav.is-scrolled { background: rgba(13, 18, 32, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: rgba(224, 214, 205, .12); }
.nav__brand { font-size: 17px; white-space: nowrap; margin-right: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav__links a { opacity: .85; transition: opacity .5s var(--ease); }
.nav__links a:hover { opacity: 1; }
.nav__links a[aria-current="page"] { opacity: 1; text-decoration: underline dotted; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.nav .nav__cta[aria-current="page"] { background: var(--crema); color: var(--umbra); }
.velo { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0; }
.siguiente { margin-top: 64px; }
.nav__ig { display: inline-flex; align-items: center; gap: 8px; }
.nav__ig-text { display: none; }
.nav .btn { --fg: var(--crema); --fg-inv: var(--umbra); }
.nav__toggle { display: none; }

@media (max-width: 799px) {
  .nav { gap: 12px; padding-right: max(calc(var(--gutter) - 12px), env(safe-area-inset-right)); }
  .nav__brand { font-size: 16px; }
  .nav__toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 48px; height: 48px; }
  .nav__toggle span { width: 22px; height: 1px; background: currentColor; transition: transform .6s var(--ease), opacity .4s; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav.is-open { background: var(--umbra); }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px var(--gutter) 24px; background: var(--umbra);
    border-bottom: 1px dotted rgba(224, 214, 205, .3);
    font-size: 22px;
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
  }
  .nav.is-open .nav__links { visibility: visible; opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s; }
  .nav__links a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px dotted rgba(224, 214, 205, .25); opacity: 1; }
  .nav__ig-text { display: inline; }
  html.menu-abierto { overflow: hidden; }
}

/* ============ 1 · INICIO (noche) ============ */
.sec--inicio {
  min-height: 100svh; display: flex; align-items: flex-end; justify-content: center; text-align: center;
  padding: calc(var(--nav-h) + 40px) 0 clamp(104px, 14vh, 140px);
  background: radial-gradient(ellipse 70% 45% at 50% 38%, rgba(234, 162, 75, .07), transparent 70%), var(--umbra);
  overflow: hidden;
}
.inicio__cielo { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; pointer-events: none; }
.inicio__nube {
  width: min(150vw, 74vh, 900px); max-width: none; margin-top: -6vh;
  mix-blend-mode: lighten; opacity: .96;
  -webkit-mask-image: radial-gradient(ellipse 44% 26% at 49% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 44% 26% at 49% 50%, #000 60%, transparent 100%);
  animation: deriva 22s ease-in-out infinite alternate;
}
@keyframes deriva { from { transform: translate3d(-1.5%, 0, 0) scale(1); } to { transform: translate3d(1.5%, -1%, 0) scale(1.04); } }
.inicio__texto { position: relative; padding: 0 var(--gutter); }
.wordmark { font-size: clamp(44px, 11.5vw, 124px); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; }
.inicio__lema { font-size: clamp(20px, 3.4vw, 30px); margin-top: 18px; color: var(--luz-nube); }
.inicio__frase { font-size: 16px; margin-top: 18px; opacity: .8; }
.inicio__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }
.inicio__bajar { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: 44px; height: 56px; display: flex; justify-content: center; }
.inicio__bajar i { display: block; width: 1px; height: 100%; background: rgba(224, 214, 205, .25); position: relative; overflow: hidden; }
.inicio__bajar i::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--luz-nube); animation: bajar 2.8s var(--ease) infinite; }
@keyframes bajar { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(260%); } }

/* ============ secciones: la atmósfera avanza de noche a amanecer ============ */
.sec--origen { background: linear-gradient(180deg, var(--umbra) 0%, #131C3A 100%); }
.sec--filosofia { background: linear-gradient(180deg, #131C3A 0%, var(--noche) 100%); }
.sec--adelanto { background: linear-gradient(180deg, var(--noche) 0%, var(--profundo) 100%); }
.sec--origo { background: linear-gradient(180deg, var(--noche) 0%, var(--profundo) 55%, #2B4166 100%); }
.sec--nimbus {
  --fg: var(--tinta); --fg-inv: var(--luz-nube);
  background: linear-gradient(180deg, #2B4166 0px, var(--azul-cielo) 150px, var(--cielo-claro) 70%, var(--lavanda) 100%);
  overflow: hidden;
}
.sec--initium { --fg: var(--tinta); --fg-inv: var(--luz-nube); background: linear-gradient(180deg, var(--lavanda) 0%, #CDB5C2 60%, #E2B9A0 100%); }
.sec--preventa { --fg: var(--tinta); --fg-inv: var(--luz-nube); background: linear-gradient(180deg, #E2B9A0 0%, #E8AE73 45%, var(--ambar) 100%); }
.sec--avisame { --fg: var(--tinta); --fg-inv: var(--luz-nube); background: linear-gradient(180deg, var(--ambar) 0%, #E39A4E 100%); }
.sec--beneficas {
  --fg: var(--luz-nube); --fg-inv: var(--rojo);
  /* empieza en el ámbar de la preventa y se oscurece con un velo antes de que aparezca el texto */
  background:
    linear-gradient(180deg, rgba(13, 18, 32, 0) 0px, rgba(13, 18, 32, .3) 84px, rgba(13, 18, 32, .3) 100%),
    linear-gradient(180deg, var(--ambar) 0px, #D86A3A 84px, var(--naranja) 45%, var(--rojo) 100%);
}
.sec--instagram { background: linear-gradient(180deg, #882522 0%, #4E2133 35%, var(--profundo) 75%, var(--umbra) 100%); text-align: center; }
.sec--instagram .frase-grande { margin-top: 0; }
.sec--instagram .btn { margin-top: 40px; }
/* Cuando una fase oculta secciones, cada sección se funde con el color final de la anterior visible */
.sec[data-desde]::before, .pie[data-desde]::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; background: linear-gradient(180deg, var(--desde), transparent); pointer-events: none; }
.pie { position: relative; }
.pie > * { position: relative; }
.sec > .wrap { position: relative; }
.sec--avisame .btn { margin-top: 36px; }

/* ---------- entradas de diccionario ---------- */
.entradas { display: grid; gap: 40px; }
.entradas--dos { gap: 32px; }
@media (min-width: 720px) { .entradas--dos { grid-template-columns: 1fr 1fr; gap: 0; } .entradas--dos .entrada + .entrada { border-left: 1px dotted currentColor; padding-left: 32px; } .entradas--dos .entrada { padding-right: 24px; } }
.entrada dt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.entrada__palabra { font-size: clamp(36px, 8.6vw, 60px); line-height: 1.05; }
.entrada__lat { font-size: 12px; font-style: italic; opacity: .78; vertical-align: super; line-height: 1; position: relative; top: -1.6em; }
.entrada dd { font-size: 17px; line-height: 1.65; margin-top: 12px; max-width: 30em; }
.entrada--grande .entrada__palabra { font-size: clamp(48px, 12vw, 88px); }

/* ============ ORIGO ============ */
.origo__grid, .initium__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 880px) { .origo__grid, .initium__grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.claves { list-style: none; margin-top: 32px; border-top: 1px dotted rgba(224, 214, 205, .45); }
.claves li { padding: 16px 0; border-bottom: 1px dotted rgba(224, 214, 205, .45); font-size: 16px; line-height: 1.6; }
.variante { margin-top: 28px; font-size: 15px; opacity: .85; }

/* prenda flotando con barrido de luz diagonal */
.prenda { position: relative; margin: 0; }
.prenda::before {
  content: ''; position: absolute; inset: 12% 10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 233, 201, .16), transparent 68%); filter: blur(12px);
}
.sec--initium .prenda::before { background: radial-gradient(circle, rgba(255, 250, 240, .5), transparent 68%); }
.prenda__luz { position: relative; animation: flotar 9s ease-in-out infinite alternate; }
.prenda__luz img { position: relative; width: 100%; filter: drop-shadow(0 34px 34px rgba(5, 8, 16, .45)); }
/* texto del pecho escrito como texto real (nítido en cualquier pantalla), en su lugar sobre la foto */
.prenda__luz { container-type: inline-size; }
.prenda__marca {
  position: absolute; left: 53.1%; top: 31.6%; z-index: 1;
  font-size: 1.8cqw; line-height: 1; white-space: nowrap; letter-spacing: .005em;
  color: #E4E6E4; pointer-events: none;
}
.prenda__luz::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 244, 222, .22) 50%, transparent 62%);
  background-size: 260% 100%; background-repeat: no-repeat;
  -webkit-mask-image: var(--img); mask-image: var(--img);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  animation: barrido 8s var(--ease) infinite;
}
@keyframes flotar { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -10px, 0); } }
@keyframes barrido { 0% { background-position: 120% 0; } 55%, 100% { background-position: -20% 0; } }

/* ---------- guía de tallas ---------- */
.tallas { margin-top: clamp(96px, 14vw, 160px); }
.tallas__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 880px) { .tallas__grid { grid-template-columns: 1fr 1.2fr; gap: 72px; } }
.diagrama { margin: 0; color: var(--crema); max-width: 420px; justify-self: center; width: 100%; }
.diagrama svg { width: 100%; height: auto; display: block; }
.tabla-tallas table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla-tallas caption { caption-side: bottom; text-align: left; font-size: 14px; font-style: italic; opacity: .78; padding-top: 14px; }
.tabla-tallas th, .tabla-tallas td { padding: 13px 6px; text-align: center; border-bottom: 1px dotted rgba(224, 214, 205, .4); font-size: 16px; font-weight: 400; }
.tabla-tallas th:first-child, .tabla-tallas td:first-child { text-align: left; padding-left: 0; }
.tabla-tallas thead th { font-weight: 500; color: var(--ambar); border-bottom-style: solid; border-bottom-color: rgba(224, 214, 205, .5); }
.tabla-tallas abbr { text-decoration: none; }
.tallas__leyenda { font-size: 14px; margin-top: 8px; opacity: .78; }

/* ============ NIMBUS ============ */
.hilos { position: absolute; inset: 0; pointer-events: none; opacity: .32; }
.hilos svg { position: absolute; left: 0; top: 50%; width: max(200%, 2400px); height: 420px; transform: translateY(-50%); animation: hilos 70s linear infinite; }
@keyframes hilos { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(-50%, -50%, 0); } }
.sec--nimbus .wrap { position: relative; }
.atributos { list-style: none; display: grid; gap: 0; margin-top: 56px; border-top: 1px dotted currentColor; }
@media (min-width: 720px) { .atributos { grid-template-columns: 1fr 1fr; } .atributo:nth-child(odd) { padding-right: 32px; border-right: 1px dotted currentColor; } .atributo:nth-child(even) { padding-left: 32px; } }
.atributo { padding: 32px 0; border-bottom: 1px dotted currentColor; }
.atributo__dato { display: block; font-size: clamp(34px, 7vw, 52px); line-height: 1; }
.atributo h3 { font-size: 19px; font-weight: 500; margin-top: 16px; }
.atributo p { font-size: 16px; line-height: 1.65; margin-top: 8px; max-width: 28em; }

/* ============ INITIUM ============ */
.prenda--vista { display: grid; }
.prenda--vista > .prenda__luz { grid-area: 1 / 1; transition: opacity 1400ms var(--ease); }
.prenda--vista > .es-oculta { opacity: 0; }
.vista__botones { display: flex; gap: 10px; margin-top: 32px; }
.estilo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(72px, 10vw, 120px); }
.estilo figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; }
.estilo img { width: 100%; height: 100%; object-fit: cover; }

/* ============ PREVENTA ============ */
.contador { margin-top: 48px; }
.contador__num { font-size: clamp(64px, 18vw, 120px); line-height: 1; font-variant-numeric: tabular-nums; }
.contador__sep { opacity: .45; }
.contador__barra { position: relative; height: 2px; margin-top: 22px; background: rgba(26, 34, 56, .18); }
.contador__barra i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--tinta); transition: width 1600ms var(--ease); }
.contador__nota { font-size: 15px; font-style: italic; margin-top: 14px; }
.compra { margin-top: 40px; }
.compra__precio { font-size: clamp(34px, 8vw, 48px); line-height: 1; }
.compra__envio { font-size: 16px; margin-top: 10px; }
.selector { border: 0; margin-top: 32px; min-width: 0; }
.selector legend { font-size: 15px; margin-bottom: 14px; }
.selector legend a { border-bottom: 1px dotted currentColor; }
.selector__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.talla { position: relative; }
.talla input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.talla span { display: flex; align-items: center; justify-content: center; height: 48px; border: 1px solid currentColor; border-radius: 2px; font-size: 15px; transition: background-color .6s var(--ease), color .6s var(--ease); }
.talla input:checked + span { background: var(--tinta); color: var(--luz-nube); }
.talla input:focus-visible + span { outline: 1px dotted currentColor; outline-offset: 3px; }
.compra .btn--grande { margin-top: 24px; }
/* guía de tallas dentro de la reserva */
.guia { margin-top: 28px; padding: 18px 0 4px; border-top: 1px dotted currentColor; border-bottom: 1px dotted currentColor; scroll-margin-top: calc(var(--nav-h) + 8px); }
.guia__titulo { font-size: 15px; font-style: italic; }
.guia table { width: 100%; border-collapse: collapse; margin-top: 10px; font-variant-numeric: tabular-nums; }
.guia caption { caption-side: bottom; text-align: left; font-size: 13px; font-style: italic; padding-top: 10px; }
.guia th, .guia td { padding: 9px 4px; text-align: center; font-size: 15px; font-weight: 400; border-bottom: 1px dotted rgba(26, 34, 56, .35); }
.guia th:first-child, .guia td:first-child { text-align: left; padding-left: 0; }
.guia thead th { font-weight: 500; border-bottom: 1px solid rgba(26, 34, 56, .5); }
.guia abbr { text-decoration: none; }
.guia__mas { font-size: 14px; margin: 10px 0 12px; }
.guia__mas a { border-bottom: 1px dotted currentColor; }
.compra__ayuda { font-size: 14px; font-style: italic; margin-top: 12px; }
.compra__dato { font-size: 15px; margin-top: 10px; }
.compra__dato a { border-bottom: 1px dotted currentColor; }
.reembolso { margin-top: 64px; padding-top: 32px; border-top: 1px dotted currentColor; }
.reembolso .parrafo { margin-top: 0; }

/* ============ PIE ============ */
.pie { background: var(--umbra); color: var(--crema); padding: 64px 0 40px; }
.pie__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.pie__marca { display: flex; flex-direction: column; gap: 14px; }
.pie__nombre { font-size: clamp(26px, 6vw, 34px); line-height: 1.1; }
.pie__ig { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -12px; opacity: .85; }
.pie__ig:hover { opacity: 1; color: var(--ambar); }
.pie__links { list-style: none; display: flex; flex-direction: column; font-size: 15px; }
.pie__links a { display: inline-flex; align-items: center; min-height: 40px; opacity: .85; }
.pie__links a:hover { opacity: 1; }
.pie__legal { font-size: 13px; opacity: .6; margin-top: 40px; padding-top: 24px; border-top: 1px dotted rgba(224, 214, 205, .25); }

/* ============ LEGAL (pestañas) ============ */
.view--legal { background: var(--crema-calida); color: var(--tinta); --fg: var(--tinta); --fg-inv: var(--luz-nube); min-height: 100vh; padding: calc(var(--nav-h) + 64px) 0 96px; }
.legal-doc__etiqueta { font-size: 15px; font-style: italic; opacity: .75; }
.legal-doc h1 { font-size: clamp(34px, 8vw, 52px); font-weight: 400; line-height: 1.12; margin-top: 12px; }
.legal-doc__fecha { font-size: 14px; font-style: italic; opacity: .75; margin-top: 10px; }
.legal-doc__resumen { margin-top: 28px; padding: 18px 20px; border: 1px dotted rgba(26, 34, 56, .45); border-radius: 2px; font-size: 16px; line-height: 1.7; }
.legal-doc__resumen ul { padding-left: 20px; margin-top: 6px; }
.legal-doc h2 { font-size: 20px; font-weight: 500; margin-top: 40px; }
.legal-doc p, .legal-doc li { font-size: 16px; line-height: 1.8; }
.legal-doc p { margin-top: 12px; }
.legal-doc ul, .legal-doc ol { padding-left: 22px; margin-top: 10px; }
.legal-doc a { border-bottom: 1px dotted currentColor; }
.legal-indice { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px dotted rgba(26, 34, 56, .4); font-size: 15px; }
.legal-indice a { display: inline-flex; align-items: center; min-height: 44px; border: 0; }
.legal-indice a[aria-current="page"] { font-style: italic; text-decoration: underline dotted; text-underline-offset: 6px; }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .reveal { opacity: 1; filter: none; transform: none; }
}

/* =====================================================================
   PESTAÑAS AMPLIADAS · Origo, Nimbus y la prenda en preventa
   ===================================================================== */
:root { --g-fondo: #141316; --g-fondo2: #1E1C21; --g-texto: #ECE6D8; --g-suave: #B8B0A2; --g-acento: #E9D9B4; }
.centro { text-align: center; }
.centro .parrafo { margin-left: auto; margin-right: auto; }
.titulo-xl { font-size: clamp(68px, 19vw, 168px); font-weight: 400; line-height: 1; letter-spacing: -.01em; margin-top: 4px; }
.entradas--centro { margin-top: 36px; }
.entradas--centro .entrada dt { justify-content: center; }
.entradas--centro .entrada dd { margin-left: auto; margin-right: auto; }

/* trazos que se dibujan al aparecer */
.trazo { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2600ms var(--ease) var(--td, 0ms); }
[data-dibujo].is-in .trazo { stroke-dashoffset: 0; }
.trazo--2 { --td: 700ms; }
.punteada { opacity: 0; transition: opacity 1400ms var(--ease) 1200ms; }
[data-dibujo].is-in .punteada { opacity: .55; }
/* la prenda sube despacio al entrar */
.js [data-sube] { opacity: 0; transform: translate3d(0, 90px, 0); filter: blur(6px); transition: opacity 1800ms var(--ease), transform 1800ms var(--ease), filter 1800ms var(--ease); }
.js [data-sube].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- ORIGO ---------- */
.sec--o-intro {
  padding-top: calc(var(--nav-h) + clamp(40px, 8vw, 96px));
  background: radial-gradient(ellipse 60% 38% at 50% 18%, rgba(234, 162, 75, .07), transparent 70%), linear-gradient(180deg, var(--umbra) 0%, #16214A 100%);
}
.o-intro { display: grid; gap: 8px; align-items: center; text-align: center; }
@media (min-width: 880px) { .o-intro { grid-template-columns: 1fr 1fr; gap: 56px; text-align: left; } .o-intro .o-nube { margin-left: -24px; } }
.o-intro__sub { font-size: clamp(17px, 2vw, 20px); line-height: 1.6; max-width: 24em; margin: 16px auto 0; opacity: .9; }
@media (min-width: 880px) { .o-intro__sub { margin-left: 0; } }
.o-intro__prenda { max-width: 520px; width: 100%; justify-self: center; }
.sec--o-intro { padding-bottom: clamp(56px, 8vw, 110px); }
.o-nube {
  width: min(170px, 42vw); margin: 0 auto -6px; mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 44% 26% at 49% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 44% 26% at 49% 50%, #000 60%, transparent 100%);
  animation: deriva 22s ease-in-out infinite alternate;
}
.sec--o-silueta { background: linear-gradient(180deg, #16214A 0%, #1F2B50 100%); }
.origo__texto .frase-grande { margin-top: 0; }
.sec--o-anatomia { background: linear-gradient(180deg, #1F2B50 0%, #24334F 100%); }
.anatomia { display: grid; gap: 40px; align-items: center; }
@media (min-width: 880px) { .anatomia { grid-template-columns: 1.1fr .9fr; gap: 72px; } }
.anatomia__svg { width: 100%; max-width: 520px; justify-self: center; color: var(--crema); overflow: visible; }
.marca { opacity: 0; transition: opacity 1200ms var(--ease); }
.marca line { stroke: var(--ambar); stroke-width: 1; }
.marca circle { fill: var(--ambar); }
.marca text { fill: var(--ambar); font-family: 'Noto Serif', serif; font-size: 13px; font-style: italic; }
[data-dibujo].is-in .marca--1 { opacity: 1; transition-delay: 1700ms; }
[data-dibujo].is-in .marca--2 { opacity: 1; transition-delay: 2100ms; }
[data-dibujo].is-in .marca--3 { opacity: 1; transition-delay: 2500ms; }
.anatomia__notas { list-style: none; display: grid; gap: 0; border-top: 1px dotted rgba(224, 214, 205, .45); }
.anatomia__notas li { display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; padding: 18px 0; border-bottom: 1px dotted rgba(224, 214, 205, .45); font-size: 16px; line-height: 1.6; }
.anatomia__notas strong { display: block; }
.num { grid-row: span 2; width: 28px; height: 28px; border: 1px solid var(--ambar); color: var(--ambar); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-style: italic; }
.detalle { display: grid; gap: 32px; align-items: center; margin-top: clamp(80px, 12vw, 140px); }
@media (min-width: 880px) { .detalle { grid-template-columns: 1fr 1fr; gap: 72px; } }
.detalle__zoom { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: #121a30; position: relative; }
.detalle__zoom span { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 300%; background-position: 36% 10%; animation: acercar 18s ease-in-out infinite alternate; }
@keyframes acercar { from { background-size: 300%; background-position: 36% 10%; } to { background-size: 340%; background-position: 37% 13%; } }
.detalle .frase-grande { margin-top: 0; }
.sec--o-medidas { background: linear-gradient(180deg, #24334F 0%, #2B4166 100%); }
.cota__l { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1600ms var(--ease) 1200ms; }
.diagrama.is-in .cota__l { stroke-dashoffset: 0; }
.cota__txt { opacity: 0; transition: opacity 1200ms var(--ease) 2200ms; }
.diagrama.is-in .cota__txt { opacity: 1; }
.cota__txt tspan[data-cota] { transition: opacity .4s; }
.diagrama figcaption { text-align: center; font-size: 14px; font-style: italic; opacity: .8; margin-top: 8px; }
.medidas__tallas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 24px; }
.medidas__tallas button { height: 44px; border: 1px solid rgba(224, 214, 205, .55); border-radius: 2px; font-size: 15px; transition: background-color .6s var(--ease), color .6s var(--ease); }
.medidas__tallas button[aria-pressed="true"] { background: var(--crema); color: var(--umbra); border-color: var(--crema); }
.tabla-medidas { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla-medidas caption { caption-side: bottom; text-align: left; font-size: 14px; font-style: italic; opacity: .78; padding-top: 12px; }
.tabla-medidas th, .tabla-medidas td { padding: 12px 6px; text-align: center; font-size: 16px; font-weight: 400; border-bottom: 1px dotted rgba(224, 214, 205, .4); transition: background-color .6s var(--ease); }
.tabla-medidas th:first-child, .tabla-medidas td:first-child { text-align: left; padding-left: 8px; }
.tabla-medidas thead th { font-weight: 500; color: var(--ambar); border-bottom: 1px solid rgba(224, 214, 205, .5); }
.tabla-medidas abbr { text-decoration: none; }
.tabla-medidas tr.es-actual th, .tabla-medidas tr.es-actual td { background: rgba(234, 162, 75, .12); }

/* ---------- NIMBUS ---------- */
.sec--n-intro {
  position: relative; overflow: hidden; min-height: 100svh;
  padding-top: calc(var(--nav-h) + 48vh);
  background: radial-gradient(ellipse 90% 55% at 50% 30%, #1C2C5E 0%, #121A35 55%, var(--umbra) 100%);
}
.fibras { position: absolute; left: 0; top: calc(var(--nav-h) + 4vh); width: 100%; height: 40vh;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.n-intro__texto { position: relative; }
.n-intro__texto .titulo-xl { font-size: clamp(60px, 16vw, 140px); }
.sec--n-proceso { background: linear-gradient(180deg, #16214A 0%, #1F2B50 100%); }
.pasos { list-style: none; display: grid; gap: 0; border-top: 1px dotted rgba(224, 214, 205, .45); }
@media (min-width: 720px) { .pasos { grid-template-columns: 1fr 1fr; } .paso:nth-child(odd) { padding-right: 28px; border-right: 1px dotted rgba(224, 214, 205, .45); } .paso:nth-child(even) { padding-left: 28px; } }
@media (min-width: 1080px) { .pasos { grid-template-columns: repeat(4, 1fr); } .paso { padding: 32px 22px !important; border-right: 1px dotted rgba(224, 214, 205, .45); } .paso:last-child { border-right: 0; } .paso:first-child { padding-left: 0 !important; } }
.paso { padding: 32px 0; border-bottom: 1px dotted rgba(224, 214, 205, .45); }
.paso svg { width: 100%; max-width: 220px; height: 80px; display: block; overflow: visible; fill: none; stroke: var(--luz-nube); stroke-width: 1.2; stroke-linecap: round; margin-bottom: 18px; }
.paso__num { font-size: 14px; font-style: italic; color: var(--ambar); }
.paso h3 { font-size: 20px; font-weight: 500; margin-top: 6px; }
.paso p { font-size: 15px; line-height: 1.65; margin-top: 8px; opacity: .9; }
.peine line { transform-box: fill-box; transform-origin: center; transform: rotate(var(--r)) translateY(4px); opacity: .7; transition: transform 1800ms var(--ease) 300ms, opacity 1800ms var(--ease) 300ms; }
[data-dibujo].is-in .peine line { transform: none; opacity: 1; }
.paso svg.torsion { overflow: hidden; }
.torsion .onda { animation: torcer 2.8s linear infinite; }
.torsion .onda--2 { opacity: .55; }
@keyframes torcer { from { transform: translateX(0); } to { transform: translateX(-60px); } }
.sec--n-tejido { position: relative; overflow: hidden; min-height: 78vh; display: flex; align-items: center; background: linear-gradient(180deg, #1F2B50 0%, #2B4166 100%); }
.tejido { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.tejido__malla { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .42; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, #000 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, #000 75%); }
.tejido__brillo { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(243, 233, 201, .08) 50%, transparent 60%); background-size: 260% 100%; animation: barrido 10s var(--ease) infinite; }
.aire i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--luz-nube); opacity: 0; animation: aire 9s linear infinite; }
.aire i:nth-child(1) { left: 12%; animation-delay: 0s; } .aire i:nth-child(2) { left: 24%; animation-delay: 3.2s; } .aire i:nth-child(3) { left: 37%; animation-delay: 6.1s; } .aire i:nth-child(4) { left: 49%; animation-delay: 1.7s; }
.aire i:nth-child(5) { left: 61%; animation-delay: 4.6s; } .aire i:nth-child(6) { left: 72%; animation-delay: 7.3s; } .aire i:nth-child(7) { left: 84%; animation-delay: 2.4s; } .aire i:nth-child(8) { left: 93%; animation-delay: 5.5s; }
@keyframes aire { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .35; } 100% { transform: translate3d(14px, -78vh, 0); opacity: 0; } }
.sec--n-tejido .frase-grande { margin-top: 0; }
.sec--n-peso { background: linear-gradient(180deg, #2B4166 0%, #33496F 100%); }
.peso { display: grid; gap: 48px; align-items: center; }
@media (min-width: 880px) { .peso { grid-template-columns: .9fr 1.1fr; gap: 80px; } }
.peso__cifra { position: relative; max-width: 360px; width: 100%; justify-self: center; color: var(--crema); }
.peso__metro { width: 100%; height: auto; display: block; }
.peso__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(56px, 14vw, 96px); line-height: 1; font-variant-numeric: tabular-nums; }
.peso__num small { font-size: .3em; margin-left: 6px; }
.peso .frase-grande { margin-top: 0; }
.claves--n { border-top-color: rgba(224, 214, 205, .45); }

/* ---------- LA PRENDA EN PREVENTA (colores de la prenda) ---------- */
.view--prenda { --fg: var(--g-texto); --fg-inv: var(--g-fondo); background: var(--g-fondo); color: var(--g-texto); }
/* presentación de la prenda */
.sec--g-intro { padding-top: calc(var(--nav-h) + clamp(16px, 5vw, 64px)); padding-bottom: clamp(72px, 10vw, 130px); background: radial-gradient(ellipse 80% 55% at 50% 28%, rgba(233, 217, 180, .08), transparent 70%), var(--g-fondo); overflow: hidden; }
.g-hero { display: grid; gap: 4px; align-items: center; text-align: center; }
@media (min-width: 880px) { .g-hero { grid-template-columns: 1.1fr .9fr; gap: 56px; text-align: left; } }
.g-hero__prenda { position: relative; width: 100%; max-width: 580px; justify-self: center; }
.g-hero__prenda .prenda__luz { width: 100%; }
.g-hero__halo { position: absolute; inset: 10% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 217, 180, .17), transparent); filter: blur(24px); animation: respira 7s ease-in-out infinite alternate; pointer-events: none; }
@keyframes respira { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
.g-hero__linea { font-size: 15px; font-style: italic; color: var(--g-suave); }
.g-hero__nombre { font-size: clamp(44px, 11vw, 84px); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; margin-top: 14px; text-wrap: balance; }
.g-hero__trad { font-size: clamp(20px, 3vw, 26px); font-style: italic; color: var(--g-acento); margin-top: 12px; }
.g-hero__desc { font-size: 17px; line-height: 1.7; color: var(--g-suave); max-width: 26em; margin: 20px auto 0; text-wrap: pretty; }
.g-hero__precio { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; justify-content: center; font-size: 24px; margin-top: 26px; }
.g-hero__envio { font-size: 14px; color: var(--g-suave); }
.g-hero__acciones { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: center; margin-top: 24px; }
.g-hero__acciones .btn { min-height: 56px; padding: 14px 36px; font-size: 16px; }
@media (min-width: 880px) { .g-hero__desc { margin-left: 0; } .g-hero__precio, .g-hero__acciones { justify-content: flex-start; } }
.sec--producto { padding-top: clamp(24px, 4vw, 48px); background: var(--g-fondo); }
.producto { display: grid; gap: 36px; }
@media (min-width: 900px) { .producto { grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: start; } .panel { position: sticky; top: calc(var(--nav-h) + 28px); } }
.galeria__pista { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 2px; }
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__foto { margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 5; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(233, 217, 180, .08), transparent 70%), var(--g-fondo2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.galeria__foto > img { width: 100%; height: 100%; object-fit: cover; }
.galeria__foto--prenda .prenda__luz { width: 92%; animation: none; }
.galeria__miniaturas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.galeria__miniaturas button { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 0; font-size: 12px; color: var(--g-suave); }
.galeria__miniaturas img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--g-fondo2); border: 1px solid transparent; border-radius: 2px; transition: border-color .6s var(--ease); }
.galeria__miniaturas button[aria-pressed="true"] { color: var(--g-texto); }
.galeria__miniaturas button[aria-pressed="true"] img { border-color: var(--g-acento); }
/* miniatura del frente: el nombre del pecho en su lugar, igual que en la foto grande */
.miniatura__prenda { position: relative; display: block; width: 100%; container-type: inline-size; }
.miniatura__prenda .prenda__marca { font-size: max(1.8cqw, 1.5px); }
.panel__coleccion { font-size: 15px; font-style: italic; color: var(--g-suave); }
.panel__nombre { font-size: clamp(36px, 8vw, 52px); font-weight: 400; line-height: 1.08; margin-top: 8px; }
.panel__desc { font-size: 16px; line-height: 1.7; color: var(--g-suave); margin-top: 14px; max-width: 32em; }
.panel__precio { font-size: 30px; margin-top: 24px; }
.panel__nota { font-size: 14px; color: var(--g-suave); margin-top: 6px; }
.avance { margin-top: 22px; }
.avance__barra { position: relative; height: 2px; background: rgba(236, 230, 216, .16); }
.avance__barra i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--g-acento); transition: width 1600ms var(--ease); }
.avance__texto { font-size: 14px; margin-top: 10px; }
.avance__nota { color: var(--g-suave); }
.view--prenda .selector { margin-top: 26px; }
.view--prenda .selector legend { display: flex; justify-content: space-between; align-items: baseline; width: 100%; font-size: 15px; margin-bottom: 12px; }
.enlace { border-bottom: 1px dotted currentColor; padding: 6px 0; font-size: 14px; color: var(--g-texto); }
.view--prenda .talla span { height: 52px; border-color: rgba(236, 230, 216, .35); }
.view--prenda .talla input:checked + span { background: var(--g-texto); color: var(--g-fondo); border-color: var(--g-texto); }
.btn--lleno { background: var(--fg); color: var(--fg-inv); border-color: var(--fg); }
.btn--lleno:hover { background: transparent; color: var(--fg); }
.view--prenda .btn--grande { margin-top: 18px; min-height: 58px; font-size: 16px; }
.panel__seguro { font-size: 13px; color: var(--g-suave); margin-top: 12px; line-height: 1.6; }
.panel__dato { font-size: 14px; margin-top: 6px; color: var(--g-suave); }
.acordeon { margin-top: 32px; border-top: 1px dotted rgba(236, 230, 216, .35); }
.acordeon details { border-bottom: 1px dotted rgba(236, 230, 216, .35); }
.acordeon summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; cursor: pointer; list-style: none; font-size: 16px; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: '+'; font-size: 20px; color: var(--g-suave); transition: transform .5s var(--ease); }
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon p, .acordeon li { font-size: 15px; line-height: 1.7; color: var(--g-suave); }
.acordeon ul { padding-left: 18px; padding-bottom: 16px; }
.acordeon p { padding-bottom: 10px; }
.acordeon a { color: var(--g-texto); border-bottom: 1px dotted currentColor; }

/* barra de compra fija (celular) */
.barra-compra { display: none; }
@media (max-width: 899px) {
  .barra-compra {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(20, 19, 22, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(236, 230, 216, .14); color: var(--g-texto);
    transform: translateY(110%); transition: transform .7s var(--ease);
  }
  .barra-compra.es-visible { transform: none; }
  .barra-compra__nombre { font-size: 15px; font-style: italic; }
  .barra-compra__precio { font-size: 14px; color: var(--g-suave); }
  .barra-compra .btn { min-height: 46px; padding: 10px 28px; }
}

/* guía de tallas en panel deslizable */
.cajon { position: fixed; inset: 0; z-index: 120; }
.cajon__fondo { position: absolute; inset: 0; background: rgba(5, 6, 10, .55); opacity: 0; transition: opacity .6s var(--ease); }
.cajon__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); overflow-y: auto;
  background: var(--g-fondo2); color: var(--g-texto); padding: 24px var(--gutter) 40px;
  transform: translateX(100%); transition: transform .7s var(--ease); outline: none;
}
.cajon.is-open .cajon__fondo { opacity: 1; }
.cajon.is-open .cajon__panel { transform: none; }
@media (max-width: 599px) {
  .cajon__panel { top: auto; left: 0; width: 100%; max-height: 88vh; border-radius: 6px 6px 0 0; transform: translateY(100%); padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}
.cajon__cab { display: flex; justify-content: space-between; align-items: center; font-size: 20px; }
.cajon__cerrar { width: 44px; height: 44px; font-size: 28px; line-height: 1; margin-right: -10px; }
.cajon__diagrama { width: 100%; max-width: 300px; display: block; margin: 16px auto 8px; color: var(--g-texto); }
.cajon .tabla-medidas th, .cajon .tabla-medidas td { border-bottom-color: rgba(236, 230, 216, .25); }
.cajon .tabla-medidas thead th { color: var(--g-acento); }
.cajon__nota { font-size: 14px; color: var(--g-suave); margin-top: 16px; line-height: 1.6; }
html.cajon-abierto { overflow: hidden; }

/* ---------- DOMUS · la paleta ---------- */
.sec--paleta { background: var(--noche); }
.sec--paleta .frase-grande { margin-top: 0; }
.paleta { display: grid; gap: 10px; margin-top: 48px; }
.paleta ul { list-style: none; display: flex; gap: 4px; }
.tono { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 16px 14px; background: var(--c); color: var(--t); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(224, 214, 205, .22); transition: flex-grow 1s var(--ease); }
.tono__nombre { font-size: 15px; font-style: italic; }
.paleta__cielo .tono { height: clamp(280px, 34vw, 420px); }
.paleta__luz .tono { height: 88px; box-shadow: inset 0 0 0 1px rgba(26, 34, 56, .12); }
@media (hover: hover) and (min-width: 768px) { .paleta__cielo .tono:hover { flex-grow: 2.4; } }
@media (max-width: 767px) {
  .paleta ul { flex-direction: column; gap: 3px; }
  .tono { flex: none; flex-direction: row; justify-content: space-between; align-items: center; height: 54px !important; padding: 0 16px; }
}

/* ---------- la prenda: frase, de cerca, en uso, cómo nace y cierre ---------- */
.sec--g-frase { padding: clamp(96px, 14vw, 170px) 0 clamp(64px, 9vw, 110px); }
.sec--g-frase .entrada--grande .entrada__palabra { font-size: clamp(38px, 9vw, 72px); line-height: 1.08; }
.sec--g-frase .entrada--grande .entrada__lat { top: 0; vertical-align: baseline; flex-basis: 100%; margin-top: 10px; }
.sec--g-frase strong, .sec--g-cerca .frase-grande { color: var(--g-acento); }
.sec--g-cerca { padding: clamp(64px, 9vw, 110px) 0; }
.sec--g-cerca .frase-grande { margin-top: 0; }
.cerca { list-style: none; padding: 0; margin-top: 44px; display: grid; gap: 40px; }
@media (min-width: 640px) { .cerca { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; } }
@media (min-width: 1040px) { .cerca { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cerca__vista { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 2px; color: #E6E0D4;
  background: radial-gradient(ellipse 65% 60% at 50% 50%, rgba(233, 217, 180, .07), transparent 72%), #0F0F10; box-shadow: inset 0 0 0 1px rgba(236, 230, 216, .08); }
.cerca__vista img { width: 92%; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); transform: scale(1.12); transition: transform 2600ms var(--ease); }
.cerca__item.is-in .cerca__vista img { transform: none; }
.cerca__frase { font-size: clamp(32px, 8vw, 42px); line-height: 1.06; text-align: center; }
.cerca__firma { font-size: 20px; letter-spacing: .02em; }
.cerca__pecho { font-size: 15px; letter-spacing: .02em; }
.cerca__nombre { font-size: 18px; margin-top: 16px; }
.cerca__texto { font-size: 15px; line-height: 1.65; color: var(--g-suave); margin-top: 6px; max-width: 26em; }

.sec--g-uso { padding: clamp(64px, 9vw, 110px) 0; }
.uso { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "texto texto" "a b"; gap: 12px; align-items: start; }
.uso__texto { grid-area: texto; text-align: center; margin-bottom: 28px; }
.uso__texto .frase-grande { margin-top: 0; color: var(--g-acento); }
.uso__sub { font-size: 17px; line-height: 1.7; color: var(--g-suave); margin: 16px auto 0; max-width: 24em; }
.uso__foto { margin: 0; overflow: hidden; border-radius: 2px; }
.uso__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.uso__foto--a { grid-area: a; }
.uso__foto--b { grid-area: b; margin-top: 56px; }
@media (min-width: 900px) {
  .uso { grid-template-columns: 1fr .85fr 1fr; grid-template-areas: "a texto b"; gap: 40px; align-items: center; }
  .uso__texto { margin-bottom: 0; }
  .uso__foto--b { margin-top: 140px; }
}

.sec--g-nace { padding: clamp(64px, 9vw, 110px) 0; }
.nace { list-style: none; padding: 0; position: relative; display: grid; }
.nace::before { content: ''; position: absolute; left: 20px; top: 20px; bottom: 40px; width: 1px; background: var(--g-acento); opacity: .5; transform: scaleY(0); transform-origin: top; transition: transform 2400ms var(--ease) 300ms; }
.nace.is-in::before, html:not(.js) .nace::before { transform: none; }
.nace li { position: relative; padding: 0 0 34px 64px; }
.nace__num { position: absolute; left: 0; top: 0; width: 41px; height: 41px; border-radius: 50%; border: 1px solid var(--g-acento); background: var(--g-fondo); color: var(--g-acento); display: flex; align-items: center; justify-content: center; font-size: 17px; font-style: italic; }
.nace__nombre { font-size: 20px; padding-top: 7px; }
.nace__texto { font-size: 15px; line-height: 1.65; color: var(--g-suave); margin-top: 6px; max-width: 24em; }
@media (min-width: 880px) {
  .nace { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .nace::before { left: 20px; right: 12%; top: 20px; bottom: auto; width: auto; height: 1px; transform: scaleX(0); transform-origin: left; }
  .nace li { padding: 64px 0 0; }
  .nace__nombre { padding-top: 0; }
}

.sec--g-cierre { text-align: center; overflow: hidden; padding: clamp(110px, 16vw, 200px) 0; }
.g-cierre { position: relative; }
.g-cierre__nube { position: absolute; left: 50%; top: 50%; width: min(680px, 140%); max-width: none; translate: -50% -55%; opacity: .2; mix-blend-mode: lighten; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent); mask-image: radial-gradient(closest-side, #000 35%, transparent); animation: deriva 24s ease-in-out infinite alternate; }
.g-cierre > :not(img) { position: relative; }
.g-cierre .frase-grande { margin-top: 0; color: var(--g-acento); }
.g-cierre__sub { font-size: 17px; color: var(--g-suave); margin: 18px 0 32px; }
.g-cierre .btn--grande { max-width: 380px; }

/* ---------- Origo y Nimbus: secciones de apoyo ---------- */
.sec--plano { background: var(--plano); }
.sec--o-cifras { padding: clamp(40px, 6vw, 72px) 0; }
.cifras { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px dotted rgba(224, 214, 205, .45); }
.cifras li { padding: 24px 12px 24px 0; border-bottom: 1px dotted rgba(224, 214, 205, .45); display: flex; flex-direction: column; gap: 6px; }
.cifras li:nth-child(odd) { border-right: 1px dotted rgba(224, 214, 205, .45); }
.cifras li:nth-child(even) { padding-left: 16px; }
.cifras__dato { font-size: clamp(24px, 6vw, 34px); line-height: 1.1; color: var(--luz-nube); }
.cifras__txt { font-size: 14px; line-height: 1.5; opacity: .82; }
@media (min-width: 880px) {
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cifras li { padding: 28px 24px; border-right: 1px dotted rgba(224, 214, 205, .45); }
  .cifras li:first-child { padding-left: 0; } .cifras li:last-child { border-right: 0; }
}

.sec--o-lienzo { padding: clamp(80px, 11vw, 140px) 0 clamp(48px, 7vw, 90px); }
.sec--o-lienzo .frase-grande { margin-top: 0; max-width: 18em; }
.lienzo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(36px, 8vw, 110px) minmax(0, 1fr); gap: clamp(8px, 2vw, 24px); align-items: center; margin: 44px 0 40px; }
.lienzo__pieza { margin: 0; }
.lienzo__img { aspect-ratio: 1; border-radius: 2px; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 65% 60% at 50% 48%, rgba(243, 233, 201, .1), transparent 72%), rgba(13, 18, 32, .35); }
.lienzo__img img { width: 90%; filter: drop-shadow(0 22px 22px rgba(5, 8, 16, .45)); }
.lienzo figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; text-align: center; }
.lienzo__nombre { font-size: clamp(15px, 2.4vw, 20px); white-space: nowrap; }
.lienzo__txt { font-size: 13px; font-style: italic; opacity: .8; }
.lienzo__flecha { width: 100%; height: auto; fill: none; stroke: var(--ambar); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; margin-bottom: 40px; }

.sec--o-cuerpo { padding: clamp(48px, 7vw, 90px) 0 clamp(80px, 11vw, 140px); }
.cuerpo { display: grid; gap: 40px; align-items: center; }
@media (min-width: 880px) { .cuerpo { grid-template-columns: .9fr 1.1fr; gap: 80px; } }
.cuerpo__foto { margin: 0; max-width: 460px; width: 100%; justify-self: center; overflow: hidden; border-radius: 2px; }
.cuerpo__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.cuerpo .frase-grande { margin-top: 0; }

.consejos { margin-top: clamp(64px, 9vw, 110px); }
.consejos__lista { list-style: none; display: grid; border-top: 1px dotted rgba(224, 214, 205, .45); }
@media (min-width: 880px) { .consejos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; } }
.consejos__lista li { display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; padding: 18px 0; border-bottom: 1px dotted rgba(224, 214, 205, .45); font-size: 16px; line-height: 1.6; }
.consejos__lista strong { display: block; }

.sec--n-tacto, .sec--n-cuidado { padding: clamp(80px, 11vw, 140px) 0; }
.sec--n-tacto .frase-grande, .sec--n-cuidado .frase-grande { margin-top: 0; max-width: 18em; }
.cualidades { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; margin-top: 48px; }
@media (min-width: 880px) { .cualidades { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.cualidades svg { width: 56px; height: 56px; display: block; fill: none; stroke: var(--luz-nube); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; }
.cualidades h3 { font-size: 19px; font-weight: 500; }
.cualidades p { font-size: 15px; line-height: 1.65; margin-top: 6px; opacity: .88; }
.cualidad--aire { animation: flotar 4s ease-in-out infinite alternate; }
.sec--n-cuidado .siguiente { margin-top: 72px; }

/* aviso de cierre de la preventa */
.aviso-cierre { margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(233, 217, 180, .3); border-left: 2px solid var(--g-acento); border-radius: 2px; background: rgba(233, 217, 180, .04); }
.aviso-cierre p { font-size: 14px; line-height: 1.6; color: var(--g-suave); }
.aviso-cierre p + p { margin-top: 8px; }
.aviso-cierre .aviso-cierre__titulo { font-size: 15px; color: var(--g-texto); }
.g-hero__periodo { font-size: 15px; font-style: italic; color: var(--g-acento); margin-top: 8px; }