/* ============================================================================
   identidad.css — Landing "Identidad" (PRODUCCIÓN, body.idn-page)
   ----------------------------------------------------------------------------
   Portado desde demos_locales/identidad.css (sandbox köppen). Adaptaciones:
   · Scope del body: .idn-body → .idn-page (clase que inyecta index.php).
   · Topbar del demo (.idn-topbar) ELIMINADO: en producción manda el .topbar del
     template; el overlay fijo/transparente está en styles.css §08b.
   · El recipe "media a cover/contain" NO se redefine: vive en styles.css §08c
     (.mut-fill / .mut-media). Aquí solo hay UN bloque puente (§ML) que lo
     aplica a los .idn-* ya maquetados, para no editar cada snippet.
   · El color del body NO se fija aquí: lo gestiona el sistema data-theme del
     template (si no, el nav no podría ponerse blanco sobre el hero oscuro).
   Carga: index.php enlaza este archivo solo si custom_globalvar1=="identidad".
   JS: js/identidad.js. En los snippets SPBuilder: los tracks de carrusel
   (.idn-cards__track, .idn-sets__track) deben llevar data-lenis-prevent-touch
   (Lenis está activo en producción).
   Solo background-color en longhand en lo que transiciona (regla del proyecto).

   SUMARIO
   00. Tokens (paleta köppen, tipografía, espaciado 4px)
   01. Neutralización de wrappers SPBuilder (full-bleed)
   02. Base / reset acotado a .idn-page (sin fijar color de body)
   ML. Media fill — puente a .mut-fill de styles.css §08c
   04. Hooks de sección (.idn-s-*)
   05. Hero · 06. Cards · 07. Editorial · 08. Set detail · 09. Banner
   10. Capas sticky · 11. Vídeo fullbleed · 12. Quotes · 13. Stats
   14. Carrusel de sets · 15. Footer · 16. Reveal · 17. Responsive (768px)
   ============================================================================ */


/* == 00. Tokens ============================================================ */
:root{
  --idn-ink:        #141313;
  --idn-bg:         #fffcf3;
  --idn-neutral:    #f5f5f1;
  --idn-tint:       #f1f1e9;
  --idn-green:      #0c3c1e;
  --idn-green-soft: #dbefd4;
  --idn-white:      #ffffff;
  --idn-mute:       rgba(20,19,19,.55);
  --idn-rule:       rgba(20,19,19,.14);

  --idn-sans:    "Alliance No.1","Helvetica Neue",Helvetica,Arial,sans-serif;
  --idn-display: "ABC Arizona Flare","Times New Roman",Georgia,serif;
  --idn-mono:    ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --idn-u:        4px;
  --idn-gap:      calc(var(--idn-u) * 2);
  --idn-pad:      calc(var(--idn-u) * 2);
  --idn-block:    calc(var(--idn-u) * 28);
  --idn-sticky:   calc(var(--idn-u) * 20);
  --idn-radius:   10px;
  --idn-radius-s: 6px;
}


/* == 01. Neutralización de wrappers SPBuilder (full-bleed) ==================
   Los componentes full-bleed (hero/banner/vídeo) no deben quedar recortados ni
   capturados por wrappers SPBuilder con position/overflow propios. */
.idn-page .sppb-section:has(.idn-hero) .sppb-addon-wrapper,
.idn-page .sppb-section:has(.idn-banner) .sppb-addon-wrapper,
.idn-page .sppb-section:has(.idn-video) .sppb-addon-wrapper{position:static;overflow:visible;}


/* == 02. Base / reset acotado ==============================================
   NB: aquí NO se fija color de body — lo gestiona el sistema data-theme del
   template (si no, el nav no podría ponerse blanco sobre el hero oscuro). */
body.idn-page{
  margin:0;
  background-color:var(--idn-bg);
  font-family:var(--idn-sans);
  font-size:14px;
  line-height:1.2;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
.idn-page *,
.idn-page *::before,
.idn-page *::after{box-sizing:border-box;}
.idn-page img,
.idn-page video{display:block;max-width:100%;height:auto;}
.idn-page a{color:inherit;text-decoration:none;}
.idn-page h1,.idn-page h2,.idn-page h3,.idn-page h4,.idn-page p{margin:0;}

/* micro-tipos compartidos */
.idn-label{
  font-family:var(--idn-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--idn-mute);
}
.idn-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  border:1px solid var(--idn-ink);
  border-radius:999px;
  background-color:transparent;
  font-family:var(--idn-sans);font-size:13px;
  cursor:pointer;
  transition:background-color .25s ease,color .25s ease;
}
.idn-btn:hover{background-color:var(--idn-ink);color:var(--idn-bg);}
.idn-btn--solid{background-color:var(--idn-ink);color:var(--idn-bg);}
.idn-btn--solid:hover{background-color:var(--idn-green);}
.idn-btn--ghost{border-color:rgba(255,255,255,.7);color:#fff;}
.idn-btn--ghost:hover{background-color:#fff;color:var(--idn-ink);}


/* == ML. Media fill — puente a .mut-fill / .mut-media (styles.css §08c) =====
   El recipe canónico "rellenar el contenedor en cover/contain" vive en
   styles.css §08c. Como los snippets ya maquetados usan clases .idn-*, aquí se
   aplica ESE recipe UNA sola vez a esos selectores (puente), en vez de
   repetirlo por componente. Si añades class="mut-fill" a los <img>/<video> de
   los snippets, borra este bloque. */
.idn-hero__media video,
.idn-banner img,
.idn-video video,
.idn-set__cell img,
.idn-set__cell video,
.idn-layers__frame img,
.idn-card__plate img,
.idn-setcard__plate img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* packshots de producto: sin recorte + respiro interior */
.idn-card__plate img{object-fit:contain;padding:10%;}
.idn-setcard__plate img{object-fit:contain;padding:8%;}
.idn-set__cell--pad img{object-fit:contain;padding:12%;}


/* == 04. Hooks de sección (.idn-s-*) ======================================
   Clase custom escrita en Ajustes de sección → clase CSS en Joomla. Aporta
   padding/fondo de sección y apilado de addons. El layout de columnas lo pone
   SIEMPRE SPBuilder (fracciones de 12); sticky y orden en §17. */
.idn-s-editorial{padding:var(--idn-block) var(--idn-pad) calc(var(--idn-u)*4);}
.idn-s-set{padding:var(--idn-block) var(--idn-pad) calc(var(--idn-u)*4);overflow:clip;}
.idn-s-layers{padding:var(--idn-block) var(--idn-pad);}
.idn-s-quotes{padding:var(--idn-block) var(--idn-pad);}
.idn-s-stats{padding:var(--idn-block) var(--idn-pad);background-color:var(--idn-tint);}

.idn-s-set .sppb-column-addons,
.idn-s-layers .sppb-column-addons{
  display:flex;flex-direction:column;gap:calc(var(--idn-u)*5);
}
.idn-s-editorial .sppb-column-addons,
.idn-s-quotes .sppb-column-addons{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:calc(var(--idn-u)*6);
}
.idn-s-editorial .addon-root-heading,
.idn-s-editorial .addon-root-text-block,
.idn-s-editorial .addon-root-mut-heading{max-width:880px;}
.idn-s-editorial .addon-root-mut-div2{width:100%;margin-top:calc(var(--idn-u)*4);}


/* == 05. Hero ============================================================== */
.idn-hero{
  position:relative;
  height:100svh;max-height:1400px;
  width:100%;overflow:hidden;
  color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.idn-hero__media{position:absolute;inset:0;}
.idn-hero__media::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(to top,rgba(20,19,19,.45),rgba(20,19,19,0) 45%);
}
.idn-hero__content{
  position:relative;z-index:1;
  padding:calc(var(--idn-u)*6) var(--idn-pad) calc(var(--idn-u)*8);
  display:flex;flex-direction:column;gap:calc(var(--idn-u)*5);
}
.idn-hero__title{
  font-family:var(--idn-display);
  font-weight:400;
  font-size:clamp(44px,7.5vw,108px);
  line-height:.98;
  letter-spacing:-.01em;
  max-width:14ch;
}
.idn-hero__sub{font-size:15px;max-width:34ch;opacity:.92;}
.idn-hero__row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}


/* == 06. Carrusel de cards ================================================= */
.idn-cards{padding:calc(var(--idn-u)*10) 0 calc(var(--idn-u)*8);overflow:hidden;}
.idn-cards__head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:0 var(--idn-pad) calc(var(--idn-u)*4);
}
.idn-cards__title{font-family:var(--idn-display);font-weight:400;font-size:clamp(26px,3vw,40px);}
.idn-cards__count{font-family:var(--idn-mono);font-size:12px;color:var(--idn-mute);}
.idn-cards__track{
  display:flex;gap:var(--idn-gap);
  padding:0 var(--idn-pad);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  cursor:grab;
}
.idn-cards__track::-webkit-scrollbar{display:none;}
.idn-cards__track.is-dragging{cursor:grabbing;scroll-snap-type:none;}
.idn-card{
  flex:0 0 calc((100vw - var(--idn-pad)*2 - var(--idn-gap)*3) / 4);
  min-width:240px;
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:10px;
}
.idn-card__plate{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--idn-radius);
  background-color:var(--idn-neutral);
  overflow:hidden;
}
.idn-card__plate img{transition:opacity .35s ease;}
.idn-card__alt{opacity:0;}
.idn-card:hover .idn-card__alt{opacity:1;}
.idn-card:hover .idn-card__front{opacity:0;}
.idn-card__tag{
  position:absolute;top:10px;left:10px;
  padding:5px 10px;border-radius:999px;
  background-color:var(--idn-green-soft);color:var(--idn-green);
  font-size:11px;
}
.idn-card__cta{
  position:absolute;right:10px;bottom:10px;
  padding:8px 14px;border:0;border-radius:999px;
  background-color:var(--idn-white);
  font-size:12px;cursor:pointer;
  opacity:0;transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease;
}
.idn-card:hover .idn-card__cta{opacity:1;transform:translateY(0);}
.idn-card__name{font-size:14px;}
.idn-card__desc{font-size:12px;color:var(--idn-mute);}


/* == 07. Bloque editorial ================================================= */
.idn-editorial__text{
  font-family:var(--idn-display);font-weight:400;
  font-size:clamp(22px,2.6vw,34px);line-height:1.25;
}
.idn-editorial__img{
  width:100%;margin:0;border-radius:var(--idn-radius);overflow:hidden;
  background-color:var(--idn-neutral);
}
.idn-editorial__img img{width:100%;height:auto;}


/* == 08. Set detail (idn-set__*) ==========================================
   colA (mut-heading + mut-div2 info) | colB (mut-div2 mosaico). Sticky en §17. */
.idn-set__head{display:flex;flex-direction:column;gap:6px;}
.idn-set__title{font-family:var(--idn-display);font-weight:400;font-size:clamp(28px,3vw,42px);}
.idn-set__sub{font-size:13px;color:var(--idn-mute);}
.idn-set__info{display:flex;flex-direction:column;gap:calc(var(--idn-u)*5);}
.idn-set__thumbs{display:flex;gap:6px;}
.idn-set__thumbs img{
  width:56px;aspect-ratio:4/5;object-fit:contain;
  border-radius:var(--idn-radius-s);
  background-color:var(--idn-neutral);padding:6px;
}
.idn-set__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.idn-set__list li{
  display:flex;gap:12px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--idn-rule);
  font-size:14px;
}
.idn-set__list li:last-child{border-bottom:1px solid var(--idn-rule);}
.idn-set__list .idn-label{flex:0 0 18px;}
/* galería de imágenes INTERNA del addon mut-div2 (no toca elementos sppb-*) */
.idn-set__mosaic{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--idn-gap);
}
.idn-set__cell{
  position:relative;margin:0;
  border-radius:var(--idn-radius);
  background-color:var(--idn-neutral);
  overflow:hidden;
  aspect-ratio:4/5;
}
.idn-set__cell--wide{grid-column:span 2;aspect-ratio:16/9;}
.idn-set__cellmark{
  position:absolute;top:10px;left:10px;z-index:1;
  font-family:var(--idn-mono);font-size:11px;color:var(--idn-mute);
}


/* == 09. Banner fullbleed ================================================= */
.idn-banner{
  position:relative;height:92svh;max-height:1400px;overflow:hidden;
  color:#fff;display:flex;align-items:flex-end;
}
.idn-banner::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(to top,rgba(20,19,19,.4),rgba(20,19,19,0) 40%);
}
.idn-banner__content{
  position:relative;z-index:1;
  padding:calc(var(--idn-u)*8) var(--idn-pad);
  display:flex;align-items:flex-end;justify-content:space-between;
  width:100%;gap:24px;flex-wrap:wrap;
}
.idn-banner__title{font-family:var(--idn-display);font-weight:400;font-size:clamp(30px,4vw,56px);line-height:1.05;}
.idn-banner__sub{font-size:14px;opacity:.9;margin-top:8px;}


/* == 10. Capas (idn-layers__*) — sección retenida (pinned) ================ */
.idn-layers__head{padding-bottom:calc(var(--idn-u)*2);}
.idn-layers__list{display:flex;flex-direction:column;}
.idn-layers__item{
  padding:calc(var(--idn-u)*7) 0;
  border-top:1px solid var(--idn-rule);
  display:flex;flex-direction:column;gap:10px;
  scroll-margin-top:30vh;
}
.idn-layers__name{
  font-family:var(--idn-display);font-weight:400;
  font-size:clamp(32px,4.5vw,64px);line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--idn-mute);
  transition:color .35s ease;
}
.idn-layers__item.is-on .idn-layers__name{
  color:var(--idn-ink);
  -webkit-text-stroke:0;
}
.idn-layers__desc{
  font-size:13px;color:var(--idn-mute);max-width:42ch;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .4s ease,opacity .4s ease;
}
.idn-layers__item.is-on .idn-layers__desc{max-height:120px;opacity:1;}
.idn-layers__stage{width:100%;}
.idn-layers__frame{
  position:relative;aspect-ratio:92/117;width:100%;
  border-radius:var(--idn-radius);overflow:hidden;
  background-color:var(--idn-neutral);
}
/* fill desde §ML; aquí solo el crossfade entre capas */
.idn-layers__frame img{opacity:0;transition:opacity .45s ease;}
.idn-layers__frame img.is-on{opacity:1;}


/* == 11. Sección vídeo fullbleed ========================================== */
.idn-video{position:relative;height:100svh;max-height:1400px;overflow:hidden;}


/* == 12. Citas / press (idn-quotes) ======================================= */
.idn-quotes{
  display:flex;flex-direction:column;align-items:center;
  gap:calc(var(--idn-u)*10);
  width:100%;text-align:center;
}
.idn-quotes__viewport{position:relative;max-width:820px;min-height:220px;width:100%;}
.idn-quote{
  position:absolute;inset:0;margin:0;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  opacity:0;transition:opacity .45s ease;
  pointer-events:none;
}
.idn-quote.is-on{opacity:1;pointer-events:auto;}
.idn-quote blockquote{
  margin:0;
  font-family:var(--idn-display);font-weight:400;
  font-size:clamp(20px,2.4vw,30px);line-height:1.3;
}
.idn-quote figcaption{font-size:13px;color:var(--idn-mute);}
.idn-quote figcaption strong{display:block;color:var(--idn-ink);font-weight:500;}
.idn-quotes__nav{display:flex;align-items:center;gap:18px;}
.idn-quotes__count{font-family:var(--idn-mono);font-size:12px;color:var(--idn-mute);}
.idn-quotes__next{
  border:1px solid var(--idn-rule);background-color:transparent;
  border-radius:999px;padding:8px 16px;font-size:12px;cursor:pointer;
  transition:background-color .25s ease,color .25s ease;
}
.idn-quotes__next:hover{background-color:var(--idn-ink);color:var(--idn-bg);}


/* == 13. Stats (idn-stats__*) ============================================= */
.idn-stats__img{margin:0;}
.idn-stats__img img{width:100%;border-radius:var(--idn-radius);}
.idn-stats__body{display:flex;flex-direction:column;gap:calc(var(--idn-u)*8);}
.idn-stats__rows{display:flex;flex-direction:column;}
.idn-stat{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 0;border-top:1px solid var(--idn-rule);
}
.idn-stat__num{font-family:var(--idn-display);font-weight:400;font-size:clamp(36px,5vw,72px);line-height:1;}
.idn-stat__label{font-size:13px;color:var(--idn-mute);}
.idn-stats__text{font-size:15px;line-height:1.45;max-width:52ch;}


/* == 14. Carrusel final de sets (idn-sets) ================================ */
.idn-sets{padding:var(--idn-block) 0 calc(var(--idn-u)*6);overflow:hidden;}
.idn-sets__head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:0 var(--idn-pad) calc(var(--idn-u)*4);
}
.idn-sets__track{
  display:flex;gap:var(--idn-gap);
  padding:0 var(--idn-pad);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;cursor:grab;
}
.idn-sets__track::-webkit-scrollbar{display:none;}
.idn-sets__track.is-dragging{cursor:grabbing;scroll-snap-type:none;}
.idn-setcard{
  flex:0 0 min(78vw,560px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:12px;
}
.idn-setcard__plate{
  position:relative;aspect-ratio:5/4;
  border-radius:var(--idn-radius);overflow:hidden;
  background-color:var(--idn-neutral);
}
.idn-setcard__bar{
  position:absolute;left:10px;right:10px;bottom:10px;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-radius:999px;
  background-color:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:13px;
}
.idn-setcard__meta{display:flex;flex-direction:column;gap:4px;padding:0 4px;}
.idn-setcard__meta h4{font-size:15px;font-weight:500;}
.idn-setcard__meta p{font-size:12px;color:var(--idn-mute);}


/* == 15. Footer =========================================================== */
.idn-footer{
  background-color:var(--idn-green);
  color:var(--idn-bg);
  padding:calc(var(--idn-u)*16) var(--idn-pad) var(--idn-pad);
  display:flex;flex-direction:column;gap:calc(var(--idn-u)*16);
  border-radius:var(--idn-radius) var(--idn-radius) 0 0;
}
.idn-footer__cols{display:flex;flex-wrap:wrap;gap:calc(var(--idn-gap)*3);}
.idn-footer__col{flex:1 1 40%;display:flex;flex-direction:column;gap:12px;font-size:13px;}
.idn-footer__col .idn-label{color:rgba(255,252,243,.55);}
.idn-footer__col a{opacity:.85;}
.idn-footer__col a:hover{opacity:1;}
.idn-footer__news{flex:1 1 100%;display:flex;flex-direction:column;gap:12px;}
.idn-footer__field{
  display:flex;border:1px solid rgba(255,252,243,.35);border-radius:999px;overflow:hidden;
}
.idn-footer__field input{
  flex:1;border:0;background-color:transparent;color:inherit;
  padding:12px 18px;font-size:13px;outline:none;
}
.idn-footer__field input::placeholder{color:rgba(255,252,243,.5);}
.idn-footer__field button{
  border:0;background-color:var(--idn-bg);color:var(--idn-green);
  padding:0 22px;border-radius:999px;cursor:pointer;font-size:13px;
}
.idn-footer__mark{
  font-family:var(--idn-display);
  font-size:clamp(56px,14vw,220px);
  line-height:.9;letter-spacing:-.02em;
  text-align:center;
}
.idn-footer__legal{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11px;color:rgba(255,252,243,.55);
}


/* == 16. Reveal + estados ================================================= */
.idn-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.idn-reveal.is-in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .idn-reveal{opacity:1;transform:none;transition:none;}
}


/* == 17. Responsive (escritorio ≥768px) ===================================
   El flex del row y los anchos de columna los pone SPBuilder. Aquí solo:
   sticky (align-self:flex-start), orden visual y alineaciones. */
@media (min-width: 768px){

  /* set detail: la columna info se queda fija mientras el mosaico scrollea */
  .idn-s-set:not(.idn-s-set--flip) .sppb-row-column:first-child{
    position:sticky;top:var(--idn-sticky);align-self:flex-start;
  }
  .idn-s-set--flip .sppb-row-column:last-child{
    position:sticky;top:var(--idn-sticky);align-self:flex-start;
  }

  /* capas: sección retenida — N pantallas de alto (valor puesto por JS) */
  .idn-s-layers{
    height:var(--idn-layers-h,auto);
    padding-top:0;padding-bottom:0;
  }
  .idn-s-layers .sppb-container-inner{
    position:sticky;top:0;height:100svh;
    display:flex;align-items:center;
  }
  .idn-s-layers .sppb-row{width:100%;}
  .idn-s-layers .idn-layers__item{padding:calc(var(--idn-u)*3) 0;}
  .idn-s-layers .idn-layers__name{font-size:clamp(22px,3vw,40px);}

  /* stats: columnas alineadas abajo */
  .idn-s-stats .sppb-row{align-items:flex-end;}

  /* footer */
  .idn-footer__col{flex:0 1 16%;}
  .idn-footer__news{flex:0 1 32%;margin-left:auto;}
}

/* móvil */
@media (max-width: 767px){
  .idn-card{flex-basis:78vw;}
  .idn-hero__title{font-size:clamp(38px,11vw,60px);}
  /* capas: el stage se oculta (la lista funciona sola) */
  .idn-s-layers .sppb-row-column:last-child{display:none;}
  /* separación entre columnas apiladas */
  .idn-s-set .sppb-row-column + .sppb-row-column,
  .idn-s-stats .sppb-row-column + .sppb-row-column{margin-top:calc(var(--idn-u)*8);}
  /* en las volteadas, al apilar sube la info/título arriba */
  .idn-s-set--flip .sppb-row{flex-wrap:wrap-reverse;}
}