/* =========================================================================
   DIRECCIÓN DE ARTE · <marca provisional "WATERLINE"> · 2026-09-15
   1. CORRIENTE · Cinemático editorial: la foto ES el producto.
   2. TOKENS    · Tinta cálida #15130F + hueso #EDE8DE. Acento único: el beige
                  de la cinta de enmascarar de sus propias fotos (#C8A36B).
                  Bodoni Moda (display, 400, tracking negativo) + Archivo (cuerpo).
                  Display = 8x el cuerpo. Sin azul marino, sin timones, sin stock.
   3. EL GESTO  · LA LÍNEA DE FLOTACIÓN. Una línea de acento cruza la web entera:
                  encima queda la obra muerta (hueso, brillo), debajo la obra viva
                  (tinta, antifouling). Sus dos servicios SON la estructura.
   ========================================================================= */

@import url("fuentes.css");

:root{
  /* paleta: 60 fondo / 30 superficie / 10 acento */
  --tinta:      #15130F;
  --tinta-alta: #211E18;
  --hueso:      #EDE8DE;
  --hueso-hondo:#DCD3C3;
  --cinta:      #C8A36B;        /* acento único: cinta de enmascarar */
  --fondo: var(--tinta);
  --texto: var(--hueso);
  --tenue: color-mix(in oklab, var(--hueso) 62%, transparent);

  --display-f: "Bodoni Moda", "Times New Roman", serif;
  --cuerpo-f:  "Archivo", system-ui, sans-serif;

  --step--1: clamp(.8rem, .77rem + .15vw, .88rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.16rem + .45vw, 1.5rem);
  --step-2:  clamp(1.56rem, 1.4rem + .8vw, 2rem);
  --step-3:  clamp(1.95rem, 1.68rem + 1.35vw, 2.66rem);
  --display: clamp(3.6rem, .6rem + 10.5vw, 9.5rem);   /* ~8x el cuerpo */

  --pad-y: clamp(4.5rem, 9vw, 8.5rem);
  --margen: clamp(1.25rem, 5vw, 5.5rem);
  --ancho: 78rem;
  --borde: color-mix(in oklab, var(--hueso) 18%, transparent);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font:400 var(--step-0)/1.6 var(--cuerpo-f);
  font-synthesis:none; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--cinta); outline-offset:3px; border-radius:2px;
}

.saltar{
  position:absolute; left:var(--margen); top:0; transform:translateY(-140%);
  background:var(--hueso); color:var(--tinta); padding:.7rem 1.1rem;
  font:600 var(--step--1)/1 var(--cuerpo-f); text-decoration:none; z-index:99;
  transition:transform .2s;
}
.saltar:focus{transform:translateY(.75rem)}

.envoltorio{width:min(100% - var(--margen)*2, var(--ancho)); margin-inline:auto}

.etiqueta{
  font:500 .6875rem/1 var(--cuerpo-f); letter-spacing:.26em;
  text-transform:uppercase; color:var(--cinta); margin:0;
}

/* ---------- cabecera ---------- */
.cabecera{
  position:absolute; inset:0 0 auto; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:clamp(1.1rem,2.4vw,2rem) var(--margen);
}
.marca{
  font:400 var(--step-0)/1 var(--display-f); letter-spacing:.34em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
}
.marca span{color:var(--cinta)}

.enlace-cta{
  font:500 var(--step--1)/1 var(--cuerpo-f); letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  padding:.85rem 1.35rem; border:1px solid color-mix(in oklab, var(--hueso) 34%, transparent);
  background:color-mix(in oklab, var(--tinta) 42%, transparent);
  transition:background-color .35s, color .35s, border-color .35s;
}
@media (max-width: 30rem){
  .enlace-cta{padding:.7rem .9rem; letter-spacing:.1em; font-size:.6875rem}
  .marca{font-size:.9rem; letter-spacing:.24em}
}
@media (hover:hover) and (pointer:fine){
  .enlace-cta:hover{background:var(--hueso); color:var(--tinta); border-color:var(--hueso)}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; isolation:isolate}
.hero__foto{position:absolute; inset:0; z-index:-2}
.hero__foto img{width:100%; height:100%; object-fit:cover; object-position:50% 58%}
.hero__velo{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, var(--tinta) 2%, color-mix(in oklab, var(--tinta) 74%, transparent) 36%,
                    color-mix(in oklab, var(--tinta) 22%, transparent) 72%,
                    color-mix(in oklab, var(--tinta) 52%, transparent) 100%),
    linear-gradient(to right, color-mix(in oklab, var(--tinta) 58%, transparent), transparent 64%);
}
.hero__txt{width:100%; padding:0 var(--margen) clamp(2.5rem,6vw,4.5rem)}
.hero__t{
  font-family:var(--display-f); font-size:var(--display); font-weight:400;
  line-height:.88; letter-spacing:-.03em; margin:clamp(1rem,2vw,1.6rem) 0 0;
  display:grid; justify-items:start;
}
.hero__t em{font-style:italic}

/* EL GESTO · la línea de flotación */
.flot{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  height:1px; background:var(--cinta);
  margin-block:clamp(.55rem,1.4vw,1rem);
  transform-origin:left center;
}
.flot::after{
  content:attr(data-rotulo);
  position:absolute; right:var(--margen); top:calc(100% + .5rem);
  font:500 .625rem/1 var(--cuerpo-f); letter-spacing:.3em;
  text-transform:uppercase; color:var(--cinta);
}
.hero__t .flot{width:100vw; margin-left:calc(var(--margen) * -1)}
/* en móvil el rótulo caería encima del titular: la línea sola ya cuenta el gesto */
@media (max-width: 48rem){ .flot::after{display:none} }

.hero__bajada{
  max-width:38ch; margin-top:clamp(1.6rem,3vw,2.4rem);
  color:var(--tenue); font-size:var(--step-1); line-height:1.45;
}
.hero__acciones{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:clamp(1.8rem,3vw,2.6rem)}
.boton{
  display:inline-block; text-decoration:none;
  font:500 var(--step--1)/1 var(--cuerpo-f); letter-spacing:.16em;
  text-transform:uppercase; padding:1.1rem 1.9rem;
  background:var(--hueso); color:var(--tinta); border:1px solid var(--hueso);
  transition:transform .35s, background-color .35s, color .35s;
}
.boton--fantasma{background:transparent; color:var(--texto); border-color:var(--borde)}
@media (hover:hover) and (pointer:fine){
  .boton:hover{transform:translateY(-2px)}
  .boton--fantasma:hover{background:var(--hueso); color:var(--tinta); border-color:var(--hueso)}
}

/* ---------- entrada (solo con JS y sin reduced-motion) ---------- */
.js .anim{opacity:0}
.js .anim--sube{transform:translateY(1.4rem)}
.js .anim--baja{transform:translateY(-1.4rem)}
.js .flot--anim{transform:scaleX(0)}
.js .visto{opacity:1; transform:none; transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1)}
.js .flot--anim.visto{transition:transform 1.1s cubic-bezier(.16,1,.3,1) .1s; opacity:1}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .js .anim,.js .flot--anim{opacity:1; transform:none}
}