/* ==========================================================================
   CRISLEFILMS — ajustes de la portada
   Solo se carga en index.html. No cambia el resto de páginas.
   1. Showreel: el primer vídeo después del banner se abre con el scroll.
   2. Momentos: galería viva de seis planos, con una pieza encendida.
   3. Crisle: el bloque «El otro lado de mi trabajo» con barrido de crema a negro.
   4. Contacto: formulario en dos pasos, con validación y confirmación.
   5. Voces: una sola pareja se cuenta como cita grande.
   6. Superficies blancas: cortes limpios entre bloques de crema.
   7. Menú flotante: cápsula centrada.
   8. Adaptación.
   ========================================================================== */

:root{
  /* Blanco limpio y cálido: separa las secciones de información del crema
     con ruido de las secciones de historia. */
  --blanco-calido:#FFFDF9;
}

/* --------------------------------------------------------------------------
   1. Showreel
   -------------------------------------------------------------------------- */
.film-reel{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:transparent;
}
.film-reel__pin{
  position:relative;
  height:100vh;
  height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.film-reel .film__card{
  width:min(78vw,1400px);
  margin:0;
  border-radius:26px;
  box-shadow:0 30px 90px rgba(11,10,9,.18);
  transform-origin:center center;
  will-change:transform,border-radius;
}
.film-reel .film__frame,
.film-reel .film__img{
  border-radius:inherit;
}
.film-reel__label{
  position:absolute;
  left:50%;
  bottom:clamp(18px,4vh,46px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0;
  font-family:var(--mono);
  font-size:clamp(8.5px,.62vw,10.5px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-ink);
  white-space:nowrap;
  pointer-events:none;
}
.film-reel__label b{
  color:var(--titulo);
  font-weight:500;
}

/* --------------------------------------------------------------------------
   2. Momentos: galería viva de seis planos
   Sin JS o con movimiento reducido se queda como galería estática.
   -------------------------------------------------------------------------- */
.boda-real__momentos{
  margin-top:clamp(44px,7vw,80px);
  padding:0 var(--pad);
}
.boda-real__momentos-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:clamp(10px,2vw,28px);
  margin-bottom:clamp(16px,2.4vw,26px);
  padding-bottom:clamp(12px,1.6vw,18px);
  border-bottom:1px solid var(--line-ink);
}
.boda-real__momentos-head .boda-real__momentos-title{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.1rem,1.6vw,1.5rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--titulo);
}
.boda-real__momentos-head .boda-real__momentos-lead{
  margin:0;
  max-width:none;
  font-family:var(--mono);
  font-size:clamp(8.5px,.62vw,10.5px);
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
.momentos-galeria{
  position:relative;
  margin-top:clamp(18px,2.6vw,30px);
}
.momentos-galeria__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);
}
.momentos-galeria__grid > li{ min-width:0; }
.momento-tile{
  position:relative;
  display:block;
  width:100%;
  margin:0;
  padding:0;
  aspect-ratio:4/3;
  overflow:hidden;
  border:0;
  border-radius:calc(var(--radius) * .5);
  background:var(--paper-deep);
  cursor:pointer;
  isolation:isolate;
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease);
}
.momento-tile video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.82) brightness(.78);
  transform:scale(1.04);
  transition:filter .7s var(--ease), transform 1.2s var(--ease-out);
}
.momento-tile::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top, rgba(11,10,9,.74), rgba(11,10,9,.06) 58%);
  pointer-events:none;
}
.momento-tile::before{
  content:'';
  position:absolute;
  top:clamp(10px,1.2vw,16px);
  right:clamp(10px,1.2vw,16px);
  z-index:3;
  width:.72em;
  height:.72em;
  background:var(--paper);
  -webkit-mask:var(--spark) center/contain no-repeat;
  mask:var(--spark) center/contain no-repeat;
  opacity:0;
  transform:scale(.5) rotate(-45deg);
  transition:opacity .5s var(--ease), transform .7s var(--ease-out);
}
.momento-tile.is-on{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(11,10,9,.18);
  z-index:2;
}
.momento-tile.is-on::before{
  opacity:1;
  transform:scale(1) rotate(0);
}
.momento-tile.is-on video{
  filter:saturate(1) brightness(1);
  transform:scale(1);
}
.momento-tile:hover video{
  filter:saturate(.98) brightness(.94);
  transform:scale(1.02);
}
.momento-tile.is-on:hover video{ transform:scale(1); }
.momento-tile:focus-visible{
  outline:2px solid var(--titulo);
  outline-offset:3px;
}
.momento-tile__num{
  position:absolute;
  top:clamp(10px,1.2vw,16px);
  left:clamp(10px,1.2vw,16px);
  z-index:2;
  font-family:var(--mono);
  font-size:clamp(8.5px,.6vw,10px);
  letter-spacing:.16em;
  color:rgba(241,233,220,.78);
}
.momento-tile__caption{
  position:absolute;
  left:clamp(10px,1.2vw,16px);
  right:clamp(10px,1.2vw,16px);
  bottom:clamp(22px,2.6vw,30px);
  z-index:2;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1rem,1.35vw,1.3rem);
  line-height:1;
  letter-spacing:-.025em;
  color:var(--paper);
  text-shadow:0 1px 12px rgba(11,10,9,.45);
}
.momento-tile__line{
  position:absolute;
  left:clamp(10px,1.2vw,16px);
  right:clamp(10px,1.2vw,16px);
  bottom:clamp(12px,1.5vw,18px);
  z-index:2;
  height:1px;
  background:rgba(241,233,220,.24);
  overflow:hidden;
}
.momento-tile__line i{
  display:block;
  width:100%;
  height:100%;
  background:var(--paper);
  transform:scaleX(0);
  transform-origin:left center;
}
.momento-tile.is-on .momento-tile__line i{
  animation:momentoAuto var(--momento-auto,3200ms) linear forwards;
}
.momentos-galeria.is-paused .momento-tile.is-on .momento-tile__line i{
  animation-play-state:paused;
}
@keyframes momentoAuto{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}
.momentos-galeria:not(.is-gallery) .momento-tile video{
  filter:none;
  transform:none;
}

@media (max-width:720px){
  .boda-real__momentos-head{
    align-items:flex-start;
    gap:8px;
  }
  .boda-real__momentos-head .boda-real__momentos-title{ font-size:1.05rem; }
  .momentos-galeria__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .momento-tile{
    aspect-ratio:4/3;
    border-radius:14px;
  }
  .momento-tile__caption{ font-size:.98rem; }
}

/* --------------------------------------------------------------------------
   3. Crisle: crema que se abre en negro
   -------------------------------------------------------------------------- */
.crisle{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--paper-earth);
  color:var(--ink);
  padding:clamp(6rem,14vw,12rem) var(--pad);
}
.crisle__wipe{
  position:absolute;
  inset:0;
  z-index:0;
  background:var(--ink);
  clip-path:inset(0 0 0 0);
}
.crisle.is-anim .crisle__wipe{
  clip-path:inset(100% 0 0 0);
}
.crisle__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,3rem);
  align-items:center;
  color:var(--paper);
}
.crisle__text{
  grid-column:1 / span 6;
}
.crisle__eyebrow{
  display:flex;
  align-items:center;
  gap:.55em;
  margin:0 0 1.2rem;
  font-family:var(--mono);
  font-size:clamp(9px,.66vw,11px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(241,233,220,.55);
}
.crisle__star{
  width:.9em;
  height:.9em;
  color:#E4D9C7;
}
.crisle__title{
  margin:0;
  max-width:13ch;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.2rem,5.2vw,5rem);
  line-height:.94;
  letter-spacing:-.045em;
  color:var(--paper);
}
.crisle__p{
  margin:1.3rem 0 0;
  max-width:44ch;
  font-size:1rem;
  line-height:1.55;
  color:rgba(241,233,220,.75);
}
.crisle__link{
  display:inline-block;
  margin-top:1.6rem;
  padding-bottom:.2em;
  border-bottom:1px solid currentColor;
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#E4D9C7;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.crisle__link:hover{
  color:var(--paper);
  border-color:var(--paper);
}
.crisle__media{
  position:relative;
  grid-column:8 / span 5;
  margin:0;
}
.crisle__media img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:url(#wb) saturate(.94);
}
.crisle__media figcaption{
  position:absolute;
  left:.7rem;
  bottom:.7rem;
  font-family:var(--mono);
  font-size:clamp(8.5px,.6vw,10px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper);
  text-shadow:0 1px 8px rgba(11,10,9,.55);
}

/* --------------------------------------------------------------------------
   4. Contacto: formulario propio de la portada
   -------------------------------------------------------------------------- */
.contact__body{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(40px,6vw,100px);
  align-items:start;
  padding:0 var(--pad);
}
.contact__intro{
  min-width:0;
  position:sticky;
  top:clamp(90px,12vh,130px);
}
.contact__eyebrow{
  margin:0 0 clamp(10px,1.4vw,16px);
  font-family:var(--mono);
  font-size:clamp(9px,.66vw,11px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
.contact__lead{
  margin:clamp(18px,2.4vw,28px) 0 0;
  max-width:38ch;
  color:var(--muted-ink);
  line-height:1.7;
}
.contact__form-wrap{ min-width:0; }
.contacto--landing{
  margin-top:0;
  max-width:none;
}

/* Cabecera de los dos pasos */
.contacto--landing .contacto__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding-top:clamp(2px,.6vw,8px);
}
.contacto__kicker{
  margin:0;
  font-family:var(--mono);
  font-size:clamp(9px,.66vw,11px);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--titulo);
}
.contacto__steps{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.2vw,16px);
  font-family:var(--mono);
  font-size:clamp(8.5px,.6vw,10px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
.contacto__step{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  opacity:.45;
  transition:opacity .4s var(--ease), color .4s var(--ease);
}
.contacto__step b{
  font-weight:600;
  color:var(--titulo);
}
.contacto__step.is-on,
.contacto__step.is-done{ opacity:1; }
.contacto__step.is-done{ color:var(--muted-ink); }
.contacto__step + .contacto__step::before{
  content:'';
  display:inline-block;
  width:clamp(18px,3vw,42px);
  height:1px;
  margin-right:.2em;
  background:var(--line-ink);
}
.contacto__progress{
  height:1px;
  margin:clamp(14px,2vw,20px) 0 clamp(22px,3vw,34px);
  background:var(--line-ink);
  overflow:hidden;
}
.contacto__progress i{
  display:block;
  width:100%;
  height:100%;
  background:var(--titulo);
  transform:scaleX(.5);
  transform-origin:left center;
  transition:transform .7s var(--ease-out);
}

/* Paneles: sin JS se ve el formulario completo */
.contacto__step-panel{ display:none; }
.contacto__step-panel.is-on{
  display:block;
  animation:contactoStep .55s var(--ease-out) both;
}
html:not(.js) .contacto__step-panel{ display:block; }
html:not(.js) .contacto__step-panel + .contacto__step-panel{
  margin-top:clamp(26px,3vw,38px);
  padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--line-ink);
}
html:not(.js) [data-step-next],
html:not(.js) [data-step-back]{ display:none; }
@keyframes contactoStep{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

.contacto__back{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin:0 0 clamp(18px,2.4vw,26px);
  padding:0;
  border:0;
  background:none;
  font-family:var(--mono);
  font-size:clamp(8.5px,.6vw,10px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-ink);
  cursor:pointer;
  transition:color .3s var(--ease);
}
.contacto__back span{ transition:transform .4s var(--ease-out); }
.contacto__back:hover{ color:var(--titulo); }
.contacto__back:hover span{ transform:translateX(-3px); }

.contacto__hint{
  margin:0;
  font-family:var(--mono);
  font-size:clamp(8.5px,.6vw,10px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-ink);
}

.contacto--landing .contacto__row{ gap:clamp(20px,3vw,42px); }
.contacto--landing .contacto__campo{
  position:relative;
  margin-bottom:clamp(18px,2.6vw,30px);
  padding-bottom:2px;
}
.contacto--landing .contacto__campo::before,
.contacto--landing .contacto__campo::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  pointer-events:none;
}
.contacto--landing .contacto__campo::before{ background:var(--line-ink); }
.contacto--landing .contacto__campo::after{
  background:var(--titulo);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s var(--ease-out);
}
.contacto--landing .contacto__campo:focus-within::after{ transform:scaleX(1); }
.contacto--landing .contacto__label{
  margin-bottom:4px;
  font-size:clamp(9px,.62vw,10.5px);
  letter-spacing:.24em;
  color:var(--muted-ink);
}
.contacto--landing .contacto__input{
  padding:9px 0 13px;
  font-family:var(--display);
  font-size:clamp(1.05rem,1.35vw,1.3rem);
  line-height:1.35;
  color:var(--texto);
  background:transparent;
  border:0;
  border-radius:0;
  transition:color .3s var(--ease);
}
.contacto--landing .contacto__input:focus{
  background:transparent;
  border:0;
  box-shadow:none;
  color:var(--titulo);
}
.contacto--landing .contacto__input::placeholder{
  color:rgba(var(--texto-rgb),.38);
}
.contacto--landing .contacto__area{
  min-height:140px;
  resize:vertical;
}
.contacto--landing .contacto__input[type="date"]{ min-height:0; }
.contacto--landing .contacto__campo.is-error::before{ background:rgba(141,47,40,.35); }
.contacto--landing .contacto__campo.is-error::after{
  background:#8d2f28;
  transform:scaleX(1);
}
.contacto--landing .contacto__error{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  font-family:var(--mono);
  font-size:clamp(8.5px,.6vw,10px);
  line-height:1.35;
  letter-spacing:.06em;
  color:#8d2f28;
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.contacto--landing .contacto__campo.is-error .contacto__error{
  opacity:1;
  transform:none;
}
.contacto--landing .contacto__pie{
  margin-top:clamp(10px,1.6vw,18px);
  gap:clamp(18px,2.4vw,30px);
}
.contacto--landing .contacto__boton{
  display:inline-flex;
  align-items:center;
  gap:.85em;
  padding:15px 26px 15px 32px;
  background:var(--ink);
  border:1px solid var(--ink);
  color:var(--paper);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.24em;
  transition:background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease-out);
}
.contacto--landing .contacto__boton-ico{
  font-size:1.15em;
  line-height:1;
  transition:transform .5s var(--ease-out);
}
.contacto--landing .contacto__boton:hover{
  background:#15130F;
  color:var(--paper);
  transform:translateY(-2px);
}
.contacto--landing .contacto__boton:hover .contacto__boton-ico{ transform:translate(2px,-2px); }
.contacto--landing [data-step-next]:hover .contacto__boton-ico{ transform:translateX(3px); }
.contacto--landing .contacto__boton[disabled]{
  opacity:.55;
  transform:none;
}
.contacto--landing .contacto__msg{
  max-width:30ch;
  font-size:.9rem;
  line-height:1.5;
}
.contacto--landing .contacto__nota{
  margin:clamp(18px,2.4vw,26px) 0 0;
  font-family:var(--mono);
  font-size:clamp(8.5px,.6vw,10px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-ink);
}

/* Confirmación: la consulta ya está enviada */
.contacto__success{
  padding:clamp(4px,1vw,12px) 0 0;
  outline:none;
}
.contacto__success:focus{ outline:none; }
.contacto__success-star{
  display:block;
  width:clamp(24px,3.2vw,36px);
  height:clamp(24px,3.2vw,36px);
  margin-bottom:clamp(16px,2.4vw,26px);
  color:var(--titulo);
  animation:contactoStar .9s var(--ease-out) both;
}
.contacto__success-title{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.2rem,5vw,4.2rem);
  line-height:.95;
  letter-spacing:-.045em;
  color:var(--titulo);
}
.contacto__success-text{
  margin:clamp(14px,2vw,20px) 0 0;
  max-width:38ch;
  color:var(--muted-ink);
  line-height:1.7;
}
.contacto__success-text b{
  font-weight:600;
  color:var(--titulo);
}
.contacto__success-link{
  display:inline-block;
  margin-top:clamp(18px,2.6vw,26px);
  padding-bottom:.2em;
  border-bottom:1px solid currentColor;
  font-family:var(--mono);
  font-size:clamp(8.5px,.6vw,10px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--titulo);
}
.contacto__reset{
  display:block;
  margin-top:clamp(24px,3vw,34px);
  padding:0;
  border:0;
  background:none;
  font-family:var(--mono);
  font-size:clamp(8.5px,.6vw,10px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-ink);
  cursor:pointer;
  transition:color .3s var(--ease);
}
.contacto__reset:hover{ color:var(--titulo); }
.contacto__success.is-on .contacto__success-title,
.contacto__success.is-on .contacto__success-text,
.contacto__success.is-on .contacto__success-link,
.contacto__success.is-on .contacto__reset{
  animation:contactoIn .7s var(--ease-out) both;
}
.contacto__success.is-on .contacto__success-text{ animation-delay:.1s; }
.contacto__success.is-on .contacto__success-link{ animation-delay:.18s; }
.contacto__success.is-on .contacto__reset{ animation-delay:.26s; }
@keyframes contactoIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}
@keyframes contactoStar{
  from{ opacity:0; transform:scale(.4) rotate(-45deg); }
  to{ opacity:1; transform:none; }
}

@media (max-width:980px){
  .contact__body{ grid-template-columns:1fr; gap:clamp(32px,5vw,50px); }
  .contact__lead{ max-width:52ch; }
  .contact__form-wrap{ max-width:720px; }
  .contact__intro{ position:static; top:auto; }
}
@media (max-width:720px){
  .contacto--landing{ min-height:560px; }
  .contacto--landing.is-sent{ min-height:0; }
  .contacto--landing .contacto__top{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .contacto__steps{ font-size:8.5px; }
  .contacto__step + .contacto__step::before{ width:18px; }
  .contacto--landing .contacto__row{ grid-template-columns:1fr; }
  .contacto--landing .contacto__campo{ margin-bottom:20px; }
  .contacto--landing .contacto__area{ min-height:220px; }
  .contacto--landing .contacto__pie--step{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .contacto--landing .contacto__boton{ width:100%; justify-content:space-between; }
  .contacto__success-title{ font-size:clamp(2rem,10vw,3.2rem); }
}

/* --------------------------------------------------------------------------
   5. Voces: una sola pareja se cuenta como cita grande
   -------------------------------------------------------------------------- */
.voces__grid.is-single{
  display:block;
  max-width:min(1100px,100%);
}
.voces__grid.is-single .voz{
  position:relative;
  padding:clamp(24px,4vw,44px) 0 0;
}
.voces__grid.is-single .voz::before{
  content:'';
  display:block;
  width:clamp(22px,3vw,34px);
  height:clamp(22px,3vw,34px);
  margin-bottom:clamp(18px,2.6vw,30px);
  background:var(--titulo);
  -webkit-mask:var(--spark) center/contain no-repeat;
  mask:var(--spark) center/contain no-repeat;
}
.voces__grid.is-single .voz blockquote{
  max-width:22ch;
  font-size:clamp(2.2rem,5vw,4.6rem);
  font-weight:400;
  line-height:1.06;
}
.voces__grid.is-single .voz figcaption{
  margin-top:clamp(18px,2.6vw,28px);
}

/* --------------------------------------------------------------------------
   6. Superficies blancas: cortes limpios entre los bloques de crema
   -------------------------------------------------------------------------- */
.surface-white{
  background:var(--blanco-calido);
  border-top:1px solid rgba(117,104,79,.16);
}
.surface-white::after{
  display:none;
}

/* --------------------------------------------------------------------------
   7. Menú flotante: cápsula centrada sobre el contenido
   -------------------------------------------------------------------------- */
.hud--flotante{
  top:clamp(10px,2vh,20px);
  left:50%;
  right:auto;
  width:max-content;
  max-width:calc(100vw - 24px);
  padding:10px clamp(14px,1.6vw,20px) 10px clamp(16px,1.8vw,22px);
  justify-content:center;
  gap:clamp(18px,2.6vw,34px);
  border:1px solid rgba(241,233,220,.18);
  border-radius:999px;
  background:rgba(11,10,9,.58);
  color:var(--paper);
  box-shadow:0 12px 40px rgba(11,10,9,.22);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
  transform:translateX(-50%);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), opacity .5s var(--ease), transform .6s var(--ease-out);
}
.hud--flotante[data-theme="light"],
.hud--flotante[data-theme="noche"]{
  background:rgba(241,233,220,.84);
  color:var(--texto);
  border-color:rgba(117,104,79,.16);
  box-shadow:0 12px 34px rgba(11,10,9,.08);
}
.hud--flotante .hud__mark{
  display:flex;
  align-items:center;
  gap:.5em;
  font-size:clamp(1.05rem,1.5vw,1.35rem);
}
.hud--flotante .hud__nav{
  gap:clamp(12px,1.7vw,24px);
  font-size:clamp(8.5px,.58vw,10px);
  letter-spacing:.2em;
  opacity:.82;
}
.hud--flotante .hud__nav::before{
  content:'';
  width:1px;
  height:16px;
  margin-right:clamp(0px,.6vw,6px);
  background:currentColor;
  opacity:.18;
}
.hud--flotante .hud__nav a{ padding:5px 0; }
.hud--flotante .hud__nav .hud__clientes{ padding:5px 11px; }
.hud--flotante .hud__line{
  top:auto;
  bottom:0;
  left:clamp(18px,2vw,24px);
  right:clamp(18px,2vw,24px);
  width:auto;
  height:1px;
  border-radius:999px;
  opacity:.18;
}
.hud--flotante.is-hidden{
  transform:translate(-50%,-2px) scale(.97);
  opacity:.92;
  pointer-events:auto;
}

@media (max-width:720px){
  .hud--flotante{
    top:10px;
    max-width:calc(100vw - 16px);
    padding:9px 13px 9px 15px;
    gap:12px;
  }
  .hud--flotante .hud__mark{ font-size:1rem; }
  .hud--flotante .hud__nav{
    gap:9px;
    font-size:8.5px;
    letter-spacing:.12em;
  }
  .hud--flotante .hud__nav::before{ display:none; }
  .hud--flotante .hud__nav a{ padding:5px 0; }
  .hud--flotante .hud__nav .hud__clientes{ padding:5px 9px; }
  .hud--flotante .hud__line{
    left:14px;
    right:14px;
  }
  .hud--flotante.is-hidden{
    transform:translate(-50%,-140%);
    opacity:0;
    pointer-events:none;
  }
}
@media (max-width:520px){
  .hud--flotante{ gap:10px; }
  .hud--flotante .hud__mark span:last-child{ display:none; }
}

/* --------------------------------------------------------------------------
   8. Adaptación
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .crisle__inner{ grid-template-columns:1fr; }
  .crisle__text,
  .crisle__media{ grid-column:1; }
  .crisle__media{ max-width:460px; margin-top:2rem; }
  .crisle__title{ max-width:100%; }
}

@media (max-width:720px){
  .film-reel .film__card{
    width:92vw;
    border-radius:16px;
  }
  .film-reel__label{
    width:90%;
    flex-wrap:wrap;
    justify-content:center;
    gap:.35rem;
    font-size:8px;
    letter-spacing:.12em;
    white-space:normal;
    text-align:center;
  }
  .crisle{ padding:5rem var(--pad); }
  .crisle__title{ font-size:clamp(2rem,10vw,3.4rem); }
  .crisle__media{ max-width:100%; }
}

/* Sin movimiento: el bloque se queda en negro, sin barrido ni apertura. */
@media (prefers-reduced-motion: reduce){
  .crisle{ background:var(--ink); }
  .crisle__wipe,
  .crisle.is-anim .crisle__wipe{ display:none; }
  .contacto__step-panel.is-on,
  .contacto__success-star,
  .contacto__success.is-on .contacto__success-title,
  .contacto__success.is-on .contacto__success-text,
  .contacto__success.is-on .contacto__success-link,
  .contacto__success.is-on .contacto__reset{ animation:none; }
  .hud--flotante{ transition:none; }
}