/* ==========================================================================
   CRISLEFILMS — Páginas públicas: Bodas y Contacto
   Se carga después de style.css y reutiliza todos sus tokens.
   ========================================================================== */

/* --------------------------------------------------- cabecera de página --- */
/* style.css arrastra main{margin-top:-100svh} para que la landing suba sobre el
   vídeo. En estas páginas no aplica: se anula. */
main.pmain{ margin-top:-100vh; margin-top:-100svh; }
/* Contacto tiene cabecera propia, sin solapamiento: el main empieza después. */
main.cpag{ margin-top:0; }

/* Bloque alto: dentro, la cabecera queda clavada mientras el contenido sube */
.phero-hold{
  position:relative;
  height:200vh;
  height:200svh;
  z-index:0;
}
.phero{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
  text-align:center;
}
.phero--short{ min-height:100vh; min-height:100svh; }
.phero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 45%;
  filter:url(#wb) saturate(.92) contrast(.98);
}
/* El vídeo arranca limpio; al bajar, este degradado lo va oscureciendo */
.phero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(74% 68% at 50% 50%, rgba(11,10,9,.55) 0%, rgba(11,10,9,.28) 62%, rgba(11,10,9,.09) 100%),
    linear-gradient(to top, rgba(11,10,9,.82) 0%, rgba(11,10,9,.44) 52%, rgba(11,10,9,.28) 100%);
  opacity:1;
}
/* Sin JS, el banner se ve en su estado final */
html:not(.js) .phero__scrim,
html:not(.js) .phero__title,
html:not(.js) .phero__top,
html:not(.js) .phero__rule{ opacity:1 !important; }
.phero__inner{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(96px,15vh,170px) var(--pad) clamp(64px,10vh,120px);
}
.phero__top{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.phero__eyebrow{
  margin:0 0 clamp(10px,1.4vw,16px);
  font-family:var(--mono);
  font-size:clamp(9.5px,.68vw,11.5px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(241,233,220,.8);
  text-shadow:0 2px 18px rgba(11,10,9,.6);
}
.phero__lead{
  margin:0 auto;
  max-width:46ch;
  font-size:clamp(1rem,1.35vw,1.35rem);
  line-height:1.6;
  color:rgba(241,233,220,.86);
  text-shadow:0 2px 24px rgba(11,10,9,.6);
}
.phero__rule{
  display:block;
  width:clamp(60px,9vw,120px);
  height:1px;
  margin:clamp(22px,3vw,40px) auto clamp(16px,2.4vw,28px);
  background:rgba(241,233,220,.32);
}
.phero__title{
  margin:0;
  font-family:var(--display);
  font-style:normal;
  font-weight:var(--t-peso);
  font-size:clamp(1.7rem,3.6vw,3rem);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--white);
  white-space:nowrap;
  text-shadow:0 6px 60px rgba(11,10,9,.5);
}
.phero__title::before{
  content:'';
  display:inline-block;
  width:.26em; height:.26em;
  margin-right:.32em;
  vertical-align:.10em;
  background:currentColor;
  -webkit-mask:var(--spark) center/contain no-repeat;
  mask:var(--spark) center/contain no-repeat;
}

/* ------------------------------------------------------------- mosaico --- */
.mosaico-sec{
  position:relative;
  background:var(--paper-earth);
  color:var(--texto);
  padding:clamp(60px,10vh,140px) 0 clamp(50px,8vh,110px);
}
.mosaico-sec::after{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url(../img/grain.png);
  background-repeat:repeat;
  opacity:.04;
  mix-blend-mode:multiply;
}
.mosaico-sec > *{ position:relative; z-index:1; }

.mosaico-intro{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(18px,4vw,70px);
  align-items:end;
  padding:0 var(--pad);
  margin-bottom:clamp(30px,5vw,70px);
}
.mosaico-intro h2{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.mosaico-intro p{
  margin:0 0 clamp(6px,1vw,14px);
  max-width:44ch;
  color:var(--muted-ink);
  line-height:1.7;
}

.mosaico{
  /* Mampostería real: tres columnas y alturas distintas. Las fotos son 16:9
     de origen; los ratios alternos las recortan a vertical, cuadrado o 4:3
     para que la sección respire como una página de portfolio y no como una
     galería uniforme. */
  columns:3;
  column-gap:2px;
  padding:0;
}
.mosaico__item{
  position:relative;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  margin:0 0 2px;
  overflow:hidden;
  background:var(--paper-deep);
}
.mosaico__item img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  filter:url(#wb-foto) saturate(1.02);
  transition:transform .8s var(--ease-out), filter .4s var(--ease);
  will-change:transform;
}
.mosaico__item:nth-child(5n+1) img{ aspect-ratio:4/5; }
.mosaico__item:nth-child(5n+2) img{ aspect-ratio:16/9; }
.mosaico__item:nth-child(5n+3) img{ aspect-ratio:1/1; }
.mosaico__item:nth-child(5n+4) img{ aspect-ratio:4/3; }
.mosaico__item:nth-child(5n+5) img{ aspect-ratio:3/4; }
.mosaico__item:hover img{
  transform:scale(1.045);
  filter:url(#wb-foto) saturate(1.06);
}
.mosaico__cap{
  position:absolute;
  left:clamp(14px,1.8vw,26px);
  bottom:clamp(12px,1.6vw,24px);
  z-index:2;
  font-family:var(--mono);
  font-size:clamp(9px,.62vw,10.5px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(241,233,220,.94);
  text-shadow:0 2px 16px rgba(11,10,9,.85);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease-out);
}
.mosaico__item:hover .mosaico__cap{ opacity:1; transform:translateY(0); }
.mosaico__item::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,10,9,.55), rgba(11,10,9,0) 45%);
  opacity:0;
  transition:opacity .6s var(--ease);
  pointer-events:none;
}
.mosaico__item:hover::after{ opacity:1; }

/* Firma del reportaje: cierra el portfolio con el nombre y la fecha */
.mosaico__fin{
  display:flex;
  align-items:center;
  gap:.7em;
  margin:clamp(26px,4vw,48px) 0 0;
  padding:0 var(--pad);
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
.mosaico__fin .star{
  width:.85em;
  height:.85em;
  flex:0 0 auto;
  opacity:.65;
}

/* -------------------------------------------------------- vídeo en movimiento */
.vmotion{
  position:relative;
  /* El vídeo se disuelve en blanco mientras la hoja sube por encima */
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,.6) clamp(70px,12vh,150px),
    var(--noche) clamp(150px,25vh,310px),
    var(--noche) 100%);
  color:var(--sobre-noche);
  padding:clamp(56px,9vh,120px) 0 clamp(56px,9vh,120px);
}
.vmotion__head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(16px,4vw,64px);
  align-items:end;
  padding:0 var(--pad);
  margin-bottom:clamp(28px,4.5vw,60px);
}
.vmotion__head h2{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.vmotion__sub{
  margin:0 0 clamp(4px,.8vw,10px);
  max-width:46ch;
  color:var(--sobre-noche);
  line-height:1.7;
}
.vmotion__grid{
  /* Muro de vídeo a sangre: sin márgenes laterales, sin radios y con una
     separación de 2px. La columna derecha baja un poco para que el bloque
     no se lea como una cuadrícula, sino como un portfolio editado. */
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px;
  padding:0;
  align-items:start;
}
.vmotion__item{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--noche-soft);
  margin:0;
}
.vmotion__item:nth-child(even){
  margin-top:clamp(36px,6vw,110px);
}
.vmotion__item video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease-out);
}
.vmotion__item video:hover{ transform:scale(1.035); }
/* Velo y pie: el nombre del momento, no un pie de foto genérico */
.vmotion__item::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(11,10,9,.68) 0%,
    rgba(11,10,9,.16) 34%,
    rgba(11,10,9,0) 62%);
}
.vmotion__cap{
  position:absolute;
  left:clamp(14px,1.8vw,26px);
  bottom:clamp(12px,1.6vw,22px);
  z-index:2;
  display:flex;
  align-items:center;
  gap:.7em;
  margin:0;
  font-family:var(--mono);
  font-size:clamp(9px,.68vw,11px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--white);
  text-shadow:0 2px 16px rgba(11,10,9,.85);
  pointer-events:none;
}
.vmotion__cap::before{
  content:'';
  width:.82em;
  height:.82em;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--spark) center/contain no-repeat;
  mask:var(--spark) center/contain no-repeat;
  opacity:.9;
}

/* ------------------------------------- otros trabajos: nombre del cliente --- */
/* Cada tarjeta lleva debajo el nombre del cliente y el tipo de trabajo, sin
   pastillas: texto pequeño y espaciado, al estilo del resto de la web. */
.work__cap{
  position:absolute;
  left:clamp(14px,1.4vw,20px);
  right:clamp(14px,1.4vw,20px);
  bottom:clamp(12px,1.3vw,18px);
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:3px;
  pointer-events:none;
}
.work__cliente{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(.95rem,1.3vw,1.15rem);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--white);
}
.work__cat{
  font-family:var(--mono);
  font-size:clamp(8.5px,.6vw,10px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(241,233,220,.72);
}
/* Velo para que el texto se lea sobre cualquier vídeo o foto */
.work::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:52%;
  background:linear-gradient(to top, rgba(11,10,9,.78) 0%, rgba(11,10,9,.28) 55%, rgba(11,10,9,0) 100%);
  pointer-events:none;
  z-index:1;
}
/* Tarjeta sin vídeo: carátula + enlace a la publicación */
.work__link{
  display:block;
  width:100%;
  height:100%;
}
.work__link img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.work__badge{
  position:absolute;
  left:clamp(14px,1.4vw,20px);
  top:clamp(12px,1.2vw,18px);
  z-index:2;
  font-family:var(--mono);
  font-size:clamp(8.5px,.6vw,10px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--white);
  border-bottom:1px solid rgba(241,233,220,.72);
  padding-bottom:3px;
  text-shadow:0 1px 12px rgba(11,10,9,.85);
}
.work__link:hover{ opacity:.92; }

/* ------------------------------------------------ detrás de la cámara --- */
/* Tira de fotos del trabajo: rodaje, eventos, bodas y pintura. */
.detras{
  background:var(--noche);
  color:var(--sobre-noche);
  padding:clamp(60px,9vh,130px) 0;
}
.detras__head{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(18px,4vw,70px);
  align-items:end;
  padding:0 var(--pad);
}
.detras__title{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.detras__intro{
  margin:0 0 clamp(6px,1vw,16px);
  max-width:44ch;
  color:var(--muted-paper);
  font-size:clamp(.95rem,1.1vw,1.12rem);
  line-height:1.7;
}
.detras__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
  padding:clamp(30px,5vw,64px) var(--pad) 0;
}
.detras__item{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:calc(var(--radius) * .55);
  background:var(--noche-soft);
  aspect-ratio:4/5;
}
.detras__item img,
.detras__item video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.detras__item::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:48%;
  background:linear-gradient(to top, rgba(11,10,9,.62) 0%, rgba(11,10,9,.16) 60%, rgba(11,10,9,0) 100%);
  pointer-events:none;
}
.detras__tag{
  position:absolute;
  left:clamp(12px,1.3vw,18px);
  bottom:clamp(12px,1.3vw,18px);
  z-index:2;
  font-family:var(--mono);
  font-size:clamp(9px,.62vw,10.5px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#FBF8F3;              /* sobre foto: claro siempre, no sigue el tema */
  text-shadow:0 1px 12px rgba(11,10,9,.85);
}
@media (max-width:900px){
  .detras__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .detras__head{ grid-template-columns:1fr; align-items:start; }
}

/* ------------------------------------- por qué hago estos trabajos --- */
/* Explicación breve, con la misma retícula que la cabecera de la sección. */
.motivo{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(18px,4vw,70px);
  align-items:end;
  margin-top:clamp(48px,7vw,96px);
  padding:0 var(--pad);
}
.motivo__titulo{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t2);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.motivo__texto{
  display:flex;
  flex-direction:column;
  gap:clamp(14px,1.8vw,22px);
}
.motivo__texto p{
  margin:0;
  max-width:54ch;
  font-size:clamp(.98rem,1.12vw,1.14rem);
  line-height:1.75;
  color:rgba(var(--sobre-noche-rgb),.8);
}
.motivo__texto b{ color:var(--sobre-noche-alto); font-weight:600; }
@media (max-width:820px){
  .motivo{ grid-template-columns:1fr; gap:clamp(14px,3vw,24px); }
}

/* ------------------------------------- marcas: banda con logos (arrastrable) --- */
/* Se mueve sola y, además, el visitante puede arrastrarla con el ratón o el
   dedo. El movimiento lo lleva paginas.js (función «marquesina»). */
.marcas{
  margin-top:clamp(44px,7vw,90px);
  padding:clamp(24px,3.4vw,44px) 0;
  border-top:1px solid var(--line-paper);
  border-bottom:1px solid var(--line-paper);
  overflow:hidden;
}
.marcas__label{
  margin:0 0 clamp(18px,2.6vw,32px);
  padding:0 var(--pad);
  text-align:center;
  font-family:var(--mono);
  font-size:clamp(9px,.62vw,10.5px);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(var(--sobre-noche-rgb),.58);
}
.marcas__pista{ color:rgba(var(--sobre-noche-rgb),.32); }
.marcas__viewport{
  overflow:hidden;
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marcas__viewport:active{ cursor:grabbing; }
.marcas__track{
  display:flex;
  width:max-content;
  will-change:transform;
  touch-action:pan-y;              /* el arrastre horizontal es nuestro */
  user-select:none;
  -webkit-user-select:none;
}
.marcas__track.esta-arrastrando{ cursor:grabbing; }
.marcas__grupo{
  display:flex;
  align-items:center;
  gap:clamp(44px,7vw,120px);
  margin:0;
  padding:0 clamp(22px,3.5vw,60px) 0 0;
  list-style:none;
}
/* Las entradas sin logo (por ejemplo «Los Ídolos») se muestran como texto */
.marcas__item{
  display:flex;
  align-items:center;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.35rem,2.7vw,2.7rem);
  line-height:1;
  letter-spacing:-.015em;
  color:rgba(var(--sobre-noche-rgb),.88);
  white-space:nowrap;
}
/* «--escala» agranda el logo cuando su dibujo es pequeño de por sí */
.marcas__item img{
  display:block;
  height:calc(clamp(26px,3.2vw,42px) * var(--escala,1));
  width:auto;
  object-fit:contain;
  opacity:.9;
  -webkit-user-drag:none;
  pointer-events:none;
}

@media (max-width:760px){
  .work__cap{ left:12px; right:12px; bottom:11px; }
}

/* ------------------------------------------------------------------- CTA --- */
.pcta{
  position:relative;
  background:var(--paper-earth);
  color:var(--texto);
  padding:clamp(70px,12vh,170px) 0 clamp(80px,13vh,180px);
  text-align:center;
}
.pcta::after{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url(../img/grain.png);
  background-repeat:repeat;
  opacity:.04;
  mix-blend-mode:multiply;
}
.pcta > *{ position:relative; z-index:1; }
.pcta h2{
  margin:0 auto;
  max-width:22ch;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.pcta p{
  margin:clamp(16px,2.4vw,30px) auto 0;
  max-width:46ch;
  color:var(--muted-ink);
  line-height:1.7;
}
.pcta__acciones{
  display:flex;
  gap:clamp(12px,1.8vw,22px);
  justify-content:center;
  flex-wrap:wrap;
  margin-top:clamp(28px,4vw,52px);
  padding:0 var(--pad);
}
.pcta__boton{
  /* Botón suave: el tono del texto, translúcido */
  font-family:var(--mono);
  font-size:clamp(10px,.68vw,11.5px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--texto);
  background:rgba(var(--texto-rgb),.16);
  border:1px solid rgba(var(--texto-rgb),.32);
  padding:16px 36px;
  border-radius:999px;
  transition:background .4s var(--ease);
}
.pcta__boton:hover{ background:rgba(var(--texto-rgb),.26); }
.pcta__boton--ghost{
  background:transparent;
  color:var(--texto);
  border:1px solid var(--line-ink);
}
.pcta__boton--ghost:hover{ background:rgba(var(--texto-rgb),.10); }

/* ===================================================== página de contacto === */
/* Cabecera corta: el vídeo se ve entero y el contenido empieza después.
   Sin solapamiento ni franja oscura. */
.chero{
  position:relative;
  min-height:72vh;
  min-height:72svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
}
.chero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
  filter:url(#wb) saturate(.92) contrast(.98);
}
.chero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(11,10,9,.86) 0%, rgba(11,10,9,.38) 46%, rgba(11,10,9,.16) 100%),
    radial-gradient(72% 72% at 50% 38%, rgba(11,10,9,.05) 0%, rgba(11,10,9,.42) 100%);
}
.chero__inner{
  position:relative;
  z-index:1;
  width:100%;
  padding:clamp(96px,15vh,170px) var(--pad) clamp(56px,8vh,96px);
}
.chero__eyebrow{
  margin:0 0 clamp(10px,1.4vw,16px);
  font-family:var(--mono);
  font-size:clamp(9.5px,.68vw,11.5px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(241,233,220,.8);
  text-shadow:0 2px 18px rgba(11,10,9,.6);
}
.chero__title{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:clamp(3.2rem,9vw,8rem);
  line-height:.92;
  letter-spacing:-.045em;
  color:var(--white);
  text-shadow:0 6px 60px rgba(11,10,9,.45);
}
.chero__lead{
  margin:clamp(18px,2.4vw,28px) 0 0;
  max-width:46ch;
  font-size:clamp(1rem,1.35vw,1.35rem);
  line-height:1.6;
  color:rgba(241,233,220,.86);
  text-shadow:0 2px 24px rgba(11,10,9,.6);
}
.chero__scroll{
  position:absolute;
  right:var(--pad);
  bottom:clamp(24px,4vh,48px);
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--mono);
  font-size:clamp(9px,.62vw,10.5px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(241,233,220,.8);
}
.chero__scroll-line{
  width:clamp(40px,6vw,80px);
  height:1px;
  background:currentColor;
  opacity:.6;
}

.cpag{
  position:relative;
  background:var(--paper-earth);
  color:var(--texto);
  padding:clamp(56px,8vh,110px) 0 clamp(64px,10vh,130px);
}
.cpag::after{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url(../img/grain.png);
  background-repeat:repeat;
  opacity:.04;
  mix-blend-mode:multiply;
}
.cpag > *{ position:relative; z-index:1; }
.cpag__wrap{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(40px,6vw,110px);
  align-items:start;
  padding:0 var(--pad);
}
.cpag__head{ margin-bottom:clamp(28px,4vw,48px); }
.cpag__eyebrow{
  margin:0 0 clamp(10px,1.4vw,16px);
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
.cpag__titulo{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.cpag__lead{
  margin:clamp(14px,2vw,22px) 0 0;
  max-width:44ch;
  color:var(--muted-ink);
  line-height:1.7;
}

/* Formulario: líneas finas sobre el crema, sin cajas blancas */
.cpag .contacto{ display:flex; flex-direction:column; gap:clamp(20px,2.6vw,30px); }
.cpag .contacto__row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6vw,30px);
}
.cpag .contacto__campo{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
}
.cpag .contacto__label{
  font-family:var(--mono);
  font-size:clamp(9px,.62vw,10.5px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-ink);
  transition:color .3s var(--ease);
}
.cpag .contacto__campo:focus-within .contacto__label{ color:var(--titulo); }
.cpag .contacto__input{
  width:100%;
  padding:12px 0 10px;
  border:0;
  border-bottom:1px solid var(--line-ink);
  border-radius:0;
  background:transparent;
  font:inherit;
  font-size:clamp(1rem,1.1vw,1.12rem);
  color:var(--texto);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cpag .contacto__input::placeholder{ color:rgba(117,104,79,.48); }
.cpag .contacto__input:focus{
  outline:none;
  border-bottom-color:var(--titulo);
  box-shadow:0 1px 0 var(--titulo);
}
.cpag .contacto__area{ min-height:130px; resize:vertical; }
.cpag .contacto__pie{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin:4px 0 0;
}
.cpag .contacto__boton{
  display:inline-flex;
  align-items:center;
  gap:.8em;
  padding:16px 30px;
  border:0;
  border-radius:999px;
  background:var(--texto);
  color:var(--paper);
  font-family:var(--mono);
  font-size:clamp(10px,.68vw,11.5px);
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.cpag .contacto__boton:hover{ background:var(--titulo); transform:translateY(-1px); }
.cpag .contacto__boton[disabled]{ opacity:.55; cursor:wait; }
.cpag .contacto__arrow{ transition:transform .35s var(--ease); }
.cpag .contacto__boton:hover .contacto__arrow{ transform:translate(3px,-3px); }
.cpag .contacto__msg{
  margin:0;
  font-family:var(--mono);
  font-size:clamp(10px,.66vw,11px);
  letter-spacing:.04em;
  color:var(--ember);
}
.cpag .contacto__msg.is-ok{ color:var(--titulo); }

/* Columna derecha: qué pasa después + datos directos */
.cpag__lado{ display:flex; flex-direction:column; gap:clamp(30px,4vw,48px); }
.cpag__pasos .cpag__label{ margin-bottom:clamp(14px,2vw,20px); }
.cpasos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cpaso{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2vw,24px);
  padding:clamp(16px,2.2vw,24px) 0;
  border-top:1px solid var(--line-ink);
}
.cpaso:last-child{ border-bottom:1px solid var(--line-ink); }
.cpaso__num{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(1.6rem,2.6vw,2.4rem);
  line-height:.8;
  letter-spacing:-.04em;
  color:var(--titulo);
  opacity:.4;
}
.cpaso__txt h3{
  margin:0 0 6px;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  letter-spacing:-.01em;
  color:var(--titulo);
}
.cpaso__txt p{
  margin:0;
  font-size:clamp(.92rem,1vw,1rem);
  line-height:1.6;
  color:var(--muted-ink);
}
.cpag__dato{
  padding:clamp(16px,2vw,24px) 0;
  border-top:1px solid var(--line-ink);
}
.cpag__dato:last-child{ border-bottom:1px solid var(--line-ink); }
.cpag__label{
  display:block;
  margin-bottom:10px;
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
.cpag__valor{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.15rem,1.9vw,1.8rem);
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--texto);
}
a.cpag__valor{ position:relative; }
a.cpag__valor::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right center;
  transition:transform .5s var(--ease-out);
}
a.cpag__valor:hover::after{ transform:scaleX(1); transform-origin:left center; }
.cpag__nota{
  margin:clamp(20px,3vw,34px) 0 0;
  color:var(--muted-ink);
  line-height:1.75;
  font-size:.95rem;
}
.cpag__acciones{ display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:900px){
  .chero{ min-height:64vh; min-height:64svh; }
  .cpag__wrap{ grid-template-columns:1fr; gap:clamp(36px,7vw,60px); }
  .cpag .contacto__row{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .chero__title{ font-size:clamp(2.8rem,16vw,4.5rem); }
  .chero__lead{ font-size:clamp(.98rem,3.2vw,1.1rem); }
  .chero__scroll{ display:none; }
}

/* ============================================ bloques de texto + imagen === */
.split{
  position:relative;
  background:var(--paper-earth);
  color:var(--texto);
  padding:clamp(56px,9vh,130px) 0;
}
.split__wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,6vw,110px);
  align-items:center;
  padding:0 var(--pad);
}
.split__texto h2{
  margin:0 0 clamp(16px,2.4vw,28px);
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t2);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.split__texto p{
  margin:0 0 clamp(14px,1.8vw,22px);
  line-height:1.75;
  color:var(--muted-ink);
  max-width:46ch;
}
.split__texto p:last-child{ margin-bottom:0; }
.split__media{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--radius) * .6);
  aspect-ratio:4/5;
  background:var(--paper-deep);
}
.split__media img{
  width:100%; height:100%;
  object-fit:cover;
  filter:url(#wb) saturate(.94);
}
.split--invertida .split__media{ order:-1; }

/* ================================================ pasos / cómo se trabaja === */
.pasos{
  position:relative;
  background:var(--paper-earth);
  color:var(--texto);
  padding:clamp(50px,8vh,120px) 0 clamp(60px,10vh,140px);
}
.pasos__head{
  padding:0 var(--pad);
  margin-bottom:clamp(28px,5vw,60px);
}
.pasos__head h2{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t2);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.pasos__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3.4vw,54px);
  padding:0 var(--pad);
}
.paso{ border-top:1px solid var(--line-ink); padding-top:clamp(16px,2vw,26px); }
.paso__num{
  display:block;
  margin-bottom:clamp(10px,1.4vw,16px);
  font-family:var(--mono);
  font-size:clamp(9px,.62vw,10.5px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
.paso h3{
  margin:0 0 clamp(8px,1vw,14px);
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t3);
  line-height:1.2;
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.paso p{ margin:0; color:var(--muted-ink); line-height:1.7; font-size:.95rem; }

/* Mismo crema y mismo ruido que el resto de secciones claras */
.split::after,
.pasos::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url(../img/grain.png);
  background-repeat:repeat;
  opacity:.04;
  mix-blend-mode:multiply;
}
.split > *,
.pasos > *{ position:relative; z-index:1; }

@media (max-width:980px){
  .split__wrap{ grid-template-columns:1fr; }
  .split--invertida .split__media{ order:0; }
  .pasos__grid{ grid-template-columns:1fr; gap:clamp(18px,4vw,30px); }
}

@media (max-width:980px){
  .mosaico-intro{ grid-template-columns:1fr; align-items:start; }
  .cpag__wrap{ grid-template-columns:1fr; }
  .mosaico > .mosaico__item{ grid-column:span 6; }
  .vmotion__head{ grid-template-columns:1fr; align-items:start; gap:clamp(10px,2vw,18px); }
}
@media (max-width:700px){
  .vmotion__grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .mosaico > .mosaico__item{ grid-column:span 12; }
  /* En táctil no hay hover: los pies de foto se ven siempre */
  .mosaico__cap{ opacity:1; transform:none; }
}
@media (hover:none){
  .mosaico__cap{ opacity:1; transform:none; }
}