/* ══════════════════════════════════════════════════════════════════════════
   HNOS. ARBELO · el mar y el mostrador
   Segunda plancha del sistema: vídeo real de olas entintado a dos tintas,
   filetes de espuma desregistrados, el logotipo original de la casa y las
   piezas que hacen que esto se vea, de un vistazo, como una pescadería.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── El logotipo original ────────────────────────────────────────────────── */
/* Lleva el anillo rotulado en blanco: sobre papel va dentro de un disco de
   tinta; sobre fondo oscuro se usa tal cual. */
.sello{display:inline-block;width:var(--sello,96px);height:var(--sello,96px);
  flex:none;position:relative;line-height:0}
.sello img{width:100%;height:100%;object-fit:contain}
.sello--tinta{background:var(--azul);border-radius:50%;padding:3px;
  box-shadow:0 0 0 1px rgba(20,16,46,.18)}
.sello--tinta::after{content:"";position:absolute;inset:3px;border-radius:50%;
  border:1px solid rgba(251,248,241,.28);pointer-events:none}
.marca:hover .sello--tinta{background:var(--sobreimpreso)}
.sello--tinta,.marca .sello{transition:background-color .4s var(--sal)}

/* ── Fotografía y vídeo a dos tintas ─────────────────────────────────────── */
/* El duotono va horneado en el propio vídeo (ffmpeg), no en el navegador:
   sale más rápido y sin costuras de composición. */
.duo--mar{background:var(--azul-hondo);isolation:auto}
.duo--mar>video{width:100%;height:100%;object-fit:cover;display:block;
  filter:none;mix-blend-mode:normal}
.duo--mar::after{display:none}

/* ── Banda de mar ────────────────────────────────────────────────────────── */
.mar{position:relative;overflow:hidden;color:var(--cal);isolation:isolate;
  min-height:min(78vh,42rem);display:grid;align-items:center}
.mar--alto{min-height:min(92vh,54rem)}
.mar__fondo{position:absolute;inset:-8% 0;z-index:0}
.mar__fondo::before{content:"";position:absolute;inset:0;z-index:5;
  background:linear-gradient(100deg,rgba(12,34,78,.86) 0%,rgba(12,34,78,.55) 46%,rgba(12,34,78,.2) 100%)}
.mar__in{position:relative;z-index:6;width:100%;
  padding-block:clamp(5.5rem,12vw,9.5rem)}
.mar__in .env{display:grid;gap:var(--e3);justify-items:start}
.mar h2{color:var(--cal);font-size:clamp(2.2rem,5vw,4.4rem);max-width:18ch}
.mar .rot{color:#FF9AA8}
.mar .entradilla{color:rgba(251,248,241,.9);max-width:50ch}
.coord{color:var(--cal);letter-spacing:.16em;margin-top:var(--e3);
  display:inline-flex;align-items:flex-start;gap:.7rem;max-width:34ch}
.coord::before{content:"";width:2.4rem;height:1px;background:#FF9AA8;
  flex:none;margin-top:.62em}

/* ── Filete de espuma a dos tintas ───────────────────────────────────────── */
.ola{position:relative;line-height:0;pointer-events:none}
.ola svg{width:100%;height:clamp(40px,5.2vw,76px);display:block}
.ola__a{fill:var(--papel)}
.ola__r{fill:var(--rojo);opacity:.45;mix-blend-mode:screen}
.mar__ola{position:absolute;left:-2%;right:-2%;z-index:7}

.mar__ola--arriba{top:-1px;transform:scaleY(-1)}
.mar__ola--arriba .ola__a{fill:var(--ola-desde,var(--papel))}
.mar__ola--abajo{bottom:-1px}
.mar__ola--abajo .ola__a{fill:var(--ola-hasta,var(--papel))}
.ola--suelta{background:transparent;margin-bottom:-1px}
.ola--suelta .ola__a{fill:var(--azul-hondo)}
.ola--suelta .ola__r{fill:var(--rojo);opacity:.5;mix-blend-mode:normal}

/* ── El pez que cruza nadando ────────────────────────────────────────────── */
.nado{position:absolute;inset:auto 0 0;height:clamp(90px,12vw,150px);
  pointer-events:none;overflow:hidden;z-index:1}
.nado svg{width:100%;height:100%}
.nado__rumbo{fill:none;stroke:var(--azul);stroke-width:1.4;opacity:.16;
  stroke-dasharray:5 9;stroke-linecap:round}
.nado__cuerpo{fill:var(--azul)}
.nado__cola{fill:var(--azul);opacity:.85}
.nado__ojo{fill:var(--papel)}

/* ── Trazos de mostrador ─────────────────────────────────────────────────── */
.trazo{flex:none}
.trazo path,.trazo circle{fill:none;stroke:var(--azul);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.trazo .pt{fill:var(--rojo);stroke:none}
.banda--azul .trazo path,.pizarra .trazo path,.mar .trazo path,
.banda--azul .trazo circle,.pizarra .trazo circle{stroke:var(--cal)}
.banda--azul .trazo .pt,.pizarra .trazo .pt{fill:#FF9AA8}

/* ── El héroe: la carta de la isla con la ficha del mostrador encima ─────── */
.hero__isla{position:relative;padding-bottom:clamp(2rem,6vw,4.5rem);padding-left:clamp(0rem,4vw,3rem)}
.mostrador-ficha{margin:0;position:absolute;left:-9%;bottom:-3%;width:min(36%,13.5rem);z-index:3}
.mostrador-ficha .duo{aspect-ratio:4/5;box-shadow:10px 10px 0 var(--azul)}
.mostrador-ficha figcaption{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e2);margin-top:.7rem}
.mostrador-ficha .mono{color:var(--tinta-70)}
.mostrador-ficha__cuno{font:600 .62rem/1 var(--f-not);letter-spacing:.1em;
  text-transform:uppercase;color:var(--rojo);border:2px solid var(--rojo);
  padding:.35rem .5rem;transform:rotate(-5deg);white-space:nowrap}
.hero__pruebas li{gap:.6rem}
.hero__pruebas li::before{display:none}
@media (max-width:940px){
  .mostrador-ficha{position:static;width:min(62%,15rem);margin:var(--e4) auto 0}
  .hero__isla{padding-bottom:0}
}

/* ── La pizarra: la casa a un lado, el género corriendo al otro ──────────── */
.pizarra__reja{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:var(--e5) var(--e6);align-items:start}
.pizarra__fijo{position:sticky;top:7rem;display:grid;gap:var(--e3);justify-items:start}
.pizarra__fijo .cuno{margin:var(--e2) 0}
.pizarra .lista-gen{margin-top:0}
@media (max-width:900px){
  .pizarra__reja{grid-template-columns:1fr}
  .pizarra__fijo{position:static}
}

/* ── El proceso: la foto se queda, los pasos pasan ───────────────────────── */
.proceso{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--e6);align-items:start}
.proceso__pila{position:sticky;top:7rem;aspect-ratio:4/5;isolation:isolate}
.proceso__foto{position:absolute;inset:0;margin:0;opacity:0;
  clip-path:inset(0 0 0 0)}
.proceso__foto:first-child{opacity:1}
.pasos-libro{list-style:none;margin:0;padding:0;border-top:3px solid var(--azul)}
.pasos-libro li{display:grid;grid-template-columns:4.5rem 1fr;gap:var(--e3);
  padding:var(--e5) 0;border-bottom:1px solid rgba(20,16,46,.22);
  opacity:.42;transition:opacity .5s var(--sal)}
.pasos-libro li:first-child,
.pasos-libro li[data-activo]{opacity:1}
.js .pasos-libro li:first-child:not([data-activo]){opacity:.42}
.pasos-libro__n{font:600 .72rem/1.1 var(--f-not);letter-spacing:.1em;color:var(--rojo);
  padding-top:.5rem}
.pasos-libro h3{color:var(--azul);margin-bottom:.6rem}
.pasos-libro p{color:var(--tinta-70)}
@media (max-width:900px){
  .proceso{grid-template-columns:1fr;gap:var(--e4)}
  .proceso__pila{position:static;aspect-ratio:16/10}
  .pasos-libro li{opacity:1}
}

/* ── El libro de servicios enseña una miniatura al pasar por encima ──────── */
.miniatura{position:fixed;top:0;left:0;width:15rem;aspect-ratio:4/5;z-index:90;
  pointer-events:none;opacity:0;will-change:transform;
  box-shadow:8px 8px 0 rgba(12,34,78,.35)}
.miniatura .duo{width:100%;height:100%}
@media (hover:none),(max-width:900px){.miniatura{display:none}}
.serv[data-mini]{cursor:default}

/* ── Marquesina que reacciona al scroll ──────────────────────────────────── */
.desfile__p{will-change:transform}
.desfile--js .desfile__p{animation:none}

/* ── Menos movimiento: nada se mueve, todo se ve ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .proceso__foto{opacity:1;position:relative;inset:auto}
  .proceso__pila{aspect-ratio:auto;display:grid;gap:var(--e2)}
  .nado{display:none}
  .mar__fondo video{display:none}
}

/* ── Título que entra palabra a palabra ──────────────────────────────────── */
.pal{display:inline-block;will-change:transform}

/* ── La banda de mar en pantallas pequeñas ───────────────────────────────── */
@media (max-width:760px){
  .mar{min-height:auto}
  .mar__in{padding-block:clamp(4rem,16vw,6rem)}
  .mar__fondo::before{background:linear-gradient(180deg,rgba(12,34,78,.55),rgba(12,34,78,.88))}
}