/* ============================================================
   components.css — botones, hero, cards, colaboraciones, valores, FAQ,
   CTA final, toast, cursor
   ============================================================ */

/* --- Tipografía utilitaria --- */
.kicker {
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 1.25rem;
}
.kicker--light { color: var(--gold); }

.dot { color: var(--red); margin-inline: 0.15em; }

/* Las palabras en rojo usan el mismo rojo en fondo claro y oscuro (pedido del equipo, oct. 2026).
   Ojo: sobre negro el contraste baja a ~2,5:1; el rojo claro solo queda en los puntos separadores. */
.split--dark em,
.final-cta em,
.footer em,
.coming-banner em,
.page-head--dark em { color: var(--red); }
.split--dark .dot,
.final-cta .dot,
.footer .dot { color: var(--red-bright); }

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 0.7em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.95em 1.7em;
  border-radius: var(--r-md);
  border: 1px solid var(--accent);
  transition: transform var(--t-fast), background var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast);
}

.btn__arrow { transition: transform var(--t-fast); display: inline-block; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--solid { background: var(--accent); color: var(--text-light); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--light {
  background: var(--text-light);
  color: var(--bg-dark);
  border-color: var(--text-light);
}

.btn--lg { padding: 1.1em 2.1em; font-size: 0.78rem; }
.btn--xl { padding: 1.25em 2.6em; font-size: 0.84rem; }

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
  }
  .btn--solid:hover { background: #2a261f; }
  .btn--ghost:hover { background: var(--accent); color: var(--text-light); }
  .btn--light:hover { background: var(--bg); border-color: var(--bg); }
}

/* Override del CTA del nav: el header es rojo, así que el botón va blanco
   y al hover invierte (cream fill + texto rojo). */
.nav .btn--ghost {
  color: var(--text-light);
  border-color: var(--text-light);
}
.nav .btn--ghost:hover {
  background: var(--text-light);
  color: var(--red);
  border-color: var(--text-light);
}

/* --- Link con flecha --- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  /* el área pulsable crece hacia arriba: el subrayado no se despega del texto */
  padding-top: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  transition: gap var(--t-fast), border-color var(--t-fast);
}
.link-arrow:hover { gap: 0.9em; border-color: var(--text); }
/* Variante clara para secciones oscuras */
.link-arrow--light { color: var(--text-light); border-bottom-color: rgba(250, 248, 245, 0.3); }
.link-arrow--light:hover { border-bottom-color: var(--text-light); }

/* --- Page head (encabezado de subpáginas) --- */
.page-head {
  padding-top: calc(72px + clamp(3rem, 9vw, 7rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--border);
}
.page-head--dark {
  background: var(--bg-dark);
  color: var(--text-light);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.page-head__title {
  font-size: clamp(2.6rem, 8.5vw, 6rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin-bottom: 1.5rem;
}
.page-head__lead {
  max-width: 52ch;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--mid);
}
.page-head--dark .page-head__lead { color: rgba(250, 248, 245, 0.66); }
.page-head__back {
  display: inline-block;
  margin-bottom: 1.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
  transition: color var(--t-fast);
}
.page-head__back:hover { color: var(--text); }
.page-head--dark .page-head__back { color: rgba(250, 248, 245, 0.6); }
.page-head--dark .page-head__back:hover { color: var(--text-light); }

/* --- Mini-lista de servicios (teaser en split oscura) --- */
.services-mini {
  list-style: none;
  counter-reset: svc;
  border-top: 1px solid rgba(250, 248, 245, 0.16);
}
.services-mini li {
  counter-increment: svc;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(250, 248, 245, 0.16);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-light);
}
.services-mini li::before {
  content: counter(svc, decimal-leading-zero);
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  transform: translateY(-2px);
}
.services-mini__soon {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-bright);
  border: 1px solid var(--red-bright);
  border-radius: 999px;
  padding: 0.15em 0.6em;
  margin-left: auto;
  align-self: center;
}

/* --- Hero ---
   Grid de 2 filas: contenido centrado (1fr) + scroll-hint (auto). El hint
   queda siempre en su propia fila debajo, sin riesgo de pisarse con .stats. */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 72px;
  padding-bottom: 2.5rem;
  position: relative;
}

.hero__inner {
  max-width: 1000px;
  align-self: center;
  padding-block: 2rem 1rem;
}

.hero__title {
  font-size: clamp(2.6rem, 8.5vw, 6.6rem);
  font-weight: 400;
  margin-bottom: 1.6rem;
}

.hero__lead {
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--mid);
  margin-bottom: 2.4rem;
}

.hero__actions { margin-bottom: clamp(3rem, 7vw, 5rem); }

/* Stats */
.stats {
  display: flex;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
}
@media (min-width: 901px) { .hero .stats { margin-bottom: clamp(2.5rem, 7vh, 5rem); } }
.stat { display: flex; flex-direction: column; gap: 0.35rem; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.stat__label {
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--mid);
}

/* Scroll hint — vive en su propia fila del grid del hero */
.scroll-hint {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--mid);
}
.scroll-hint__label {
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.scroll-hint__line {
  width: 1px;
  height: 48px;
  background: linear-gradient(var(--mid), transparent);
  position: relative;
  overflow: hidden;
}

/* --- Split editorial --- */
.split p {
  color: var(--mid);
  max-width: 52ch;
  margin-bottom: 1.1rem;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
}
.split .section-title { margin-bottom: 1.75rem; }

.split--dark {
  background: var(--bg-dark);
  color: var(--text-light);
}
.split--dark .section-title { color: var(--text-light); }
.split--dark p { color: rgba(250, 248, 245, 0.62); }
.split--dark .kicker { color: var(--gold); }

/* Carrusel editorial (sección Manifiesto) */
.split__aside { display: flex; justify-content: center; }

.carousel {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg-warm);
}

.carousel__track {
  position: absolute;
  inset: 0;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  pointer-events: none;
}
.carousel__slide.is-active { opacity: 1; pointer-events: auto; }

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Botones de navegación: minimalistas, sobre la imagen */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(243, 239, 235, 0.92);
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: 999px;
  color: var(--text);
  font-size: 1rem;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), transform var(--t-fast);
  z-index: 2;
}
.carousel__btn--prev { left: 0.85rem; }
.carousel__btn--next { right: 0.85rem; }
.carousel:hover .carousel__btn,
.carousel:focus-within .carousel__btn { opacity: 1; }
/* en táctil no hay hover: las flechas tienen que estar visibles desde el principio */
@media (hover: none) {
  .carousel__btn { opacity: 1; }
}
.carousel__btn:hover { background: var(--bg); }
.carousel__btn:active { transform: translateY(-50%) scale(0.94); }

/* Contador / pie editorial sobre la imagen */
.carousel__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.85rem;
  display: flex;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.carousel__num {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-light);
  background: rgba(24, 24, 24, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0.4em 0.9em;
  border-radius: 999px;
}

/* --- Cards de colección --- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #f6f3ef;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: block;
  overflow: hidden;
}
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(24,24,24,0.28));
}
.card__media--season  { background: linear-gradient(150deg, #ece6dd, #d8cfc0 70%, #c4b9a6); }
.card__media--archive { background: linear-gradient(150deg, #e4ded2, #c9bda8 70%, #b3a78f); }
.card__media--bian    { background: linear-gradient(150deg, #2c211f, #43302b 55%, #5a3d34); }

/* Foto real dentro del media de la card (el gradiente queda de fallback).
   Zoom lento al hover — el gesto editorial de las casas de moda. */
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }

/* --- Marquee de marca (banda roja con texto en movimiento) --- */
.marquee {
  background: var(--red);
  color: var(--text-light);
  overflow: hidden;
  padding-block: 0.85rem;
  border-block: 1px solid rgba(0, 0, 0, 0.15);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  padding-right: 3.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee__star {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: 0.8em;
  opacity: 0.75;
}
/* Estrellas separadoras: cada SVG conserva su proporción */
.marquee__star svg { display: block; height: 1em; width: auto; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* SC 2.2.2: el movimiento tiene que poder pararse */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Foto de galería editorial (colaboraciones) */
.gallery-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.gallery-photo:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

.card__index {
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking);
  color: var(--text-light);
  mix-blend-mode: difference;
  z-index: 1;
}

.card__body { padding: clamp(1.4rem, 2.5vw, 1.9rem); display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.card__title { font-size: clamp(1.4rem, 2.5vw, 1.85rem); }
.card__desc { color: var(--mid); font-size: 0.95rem; flex: 1; }
.card .link-arrow { align-self: flex-start; margin-top: 0.4rem; }

/* --- Stack 3D (split oscura — Romanticismo moderno) --- */
.split__aside { perspective: 1100px; }

.stack {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
}

/* Cada carta usa --pos (0 = adelante, N-1 = atrás del mazo).
   El JS cicla --pos cada 3s; la transition hace el barajado. */
.stack__card {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 22px 50px -25px rgba(0, 0, 0, 0.7);
  transform-style: preserve-3d;
  transform:
    translate3d(
      calc(var(--pos, 0) * 16px),
      calc(var(--pos, 0) * 12px),
      calc(var(--pos, 0) * -46px)
    )
    scale(calc(1 - var(--pos, 0) * 0.05));
  filter: brightness(calc(1 - var(--pos, 0) * 0.08));
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1),
              filter 1s ease;
  will-change: transform, filter;
}
.stack__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Colaboraciones (page-heads y detalles) --- */
.collab-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.collab__cross { color: var(--gold); font-weight: 400; }

.photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.photo:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.photo--1 { background: linear-gradient(155deg, #312c24, #1d1a15); }
.photo--2 { background: linear-gradient(155deg, #3c352b, #211d18); }
.photo--3 { background: linear-gradient(155deg, #2a2620, #15120e); }
/* Variante cálida para Bian */
.photo--warm-1 { background: linear-gradient(155deg, #4a352c, #2c1f1a); }
.photo--warm-2 { background: linear-gradient(155deg, #5a3d31, #33231d); }
.photo--warm-3 { background: linear-gradient(155deg, #3f2c24, #241813); }

/* Banner "editorial en producción" — estado intencional hasta que lleguen fotos */
.coming-banner {
  position: relative;
  min-height: clamp(300px, 46vh, 520px);
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem);
  overflow: hidden;
  color: var(--text-light);
}
.coming-banner--dark { background: linear-gradient(150deg, #322c24, #18140f); }
.coming-banner--warm { background: linear-gradient(150deg, #4a352c, #20140f); }
.coming-banner__inner { position: relative; z-index: 1; max-width: 32ch; }
.coming-banner__note {
  font-family: var(--font-body);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.coming-banner__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.coming-banner__sub {
  font-size: 0.95rem;
  color: rgba(250, 248, 245, 0.6);
  max-width: 40ch;
  margin-inline: auto;
}

/* Estado "próximamente" — para que el placeholder vacío se lea intencional */
.photo--soon { position: relative; }
.photo--soon::after {
  content: "Próximamente";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.55);
}

/* --- La Práctica (pilares) --- */
.pillar {
  border-top: 1px solid var(--border);
  padding-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pillar__index {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.pillar__text { color: var(--mid); font-size: 1rem; }

/* --- Instagram --- */
.ig {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-med);
}
.ig::after {
  content: "\271A";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-light);
  font-size: 1.1rem;
  opacity: 0;
  background: rgba(24,24,24,0.35);
  transition: opacity var(--t-fast);
}
.ig:hover::after { opacity: 1; }
.ig:hover { transform: scale(1.02); }
.ig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.community .link-arrow { margin-top: 2.5rem; }
/* Inicio corto (27-10-2026): Universo HOA y Comunidad van seguidas y las dos son crema;
   sin esto se suman dos paddings de sección y queda un hueco vacío entre las dos. */
.family--universo + .community { padding-top: 0; }

/* --- Valores --- */
.value {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--glass);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.value__glyph {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.value__title { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.value__desc { color: var(--mid); font-size: 0.92rem; }

/* --- FAQ acordeón --- */
.faq__inner { max-width: 820px; margin-inline: auto; }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: var(--text);
}
/* El "+" va en la fuente de cuerpo: geométrico, y la display TRIAL no lo tiene */
.accordion__icon {
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--red);
  transition: transform var(--t-fast);
}
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); }
/* La cursiva de Iskry es sintética y se inclina sobre lo que sigue («duda?»): un respiro mínimo */
.final-cta__title em, .section-title em, .page-head__title em { margin-right: 0.06em; }
.accordion__panel {
  overflow: hidden;
  /* content-visibility saca el panel cerrado del árbol de accesibilidad,
     que si no se leía en voz alta contradiciendo aria-expanded="false" */
  transition: max-height var(--t-med);
}
/* Plegado solo con JS: sin él (o si falla interactions.js) las respuestas se leen abiertas */
.js .accordion__panel { max-height: 0; content-visibility: hidden; }
.js .accordion__item.is-open .accordion__panel { content-visibility: visible; }
.accordion__panel p {
  color: var(--mid);
  padding-bottom: 1.5rem;
  max-width: 60ch;
}
/* El correo de las respuestas tiene que verse como enlace */
.accordion__panel a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--t-fast);
}
@media (hover: hover) { .accordion__panel a:hover { color: var(--red); } }

/* Página /faq (27-10-2026): el acordeón arranca alineado con el page-head, como el texto
   de las páginas legales, y más cerca del título que una sección normal. */
.faq--pagina { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.faq--pagina .accordion { max-width: 820px; }

/* --- Lista manifiesto (Cada detalle importa) --- */
.manifest {
  border-top: 1px solid var(--border);
  max-width: 880px;
  margin-inline: auto;
}
.manifest__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--border);
}
.manifest__num {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--mid);
  min-width: 2ch;
  padding-top: 0.55em;
}
.manifest__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 0.55rem;
  line-height: 1.05;
}
.manifest__desc {
  color: var(--mid);
  font-size: 1rem;
  max-width: 60ch;
}

/* --- Signature editorial (al final del manifiesto) --- */
.signature {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--red);
  margin-top: 1.5rem;
  /* el guión queda separado del em para que el em (red+italic) cargue todo el peso */
}
.signature em { font-style: italic; }

/* --- Prensa --- */
.press-card {
  border-top: 1px solid var(--border);
  padding-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color var(--t-med);
}
.press-card:hover { border-color: var(--text); }
.press-card__logo {
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--mid);
}
.press-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.22;
  color: var(--text);
  flex: 1;
}
.press-card__link { align-self: flex-start; margin-top: 0.5rem; }

/* Valor "Coming soon" — opacidad sutil + badge */
.value--coming { position: relative; opacity: 0.78; }
.value--coming:hover { opacity: 1; }
.value__badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0.3em 0.7em;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 999px;
}

/* --- Newsletter --- */
.newsletter { text-align: center; }
.newsletter__inner { max-width: 680px; margin-inline: auto; }
.newsletter__inner .kicker { margin-bottom: 1.1rem; }
.newsletter__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.newsletter__sub {
  color: var(--mid);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  max-width: 52ch;
  margin: 0 auto 2.2rem;
}
.newsletter__form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  max-width: 520px;
  margin-inline: auto;
}
.newsletter__input {
  flex: 1;
  min-width: 0;
  /* Padding pareado al .btn para que input + botón coincidan en altura */
  padding: 0.95em 1.2em;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--bg);
  /* Mismo borde fino negro que el .btn--solid, pareando estética */
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  appearance: none;
  -webkit-appearance: none;
  transition: box-shadow var(--t-fast), background var(--t-fast);
}
.newsletter__input::placeholder {
  color: var(--mid);
  letter-spacing: 0.02em;
}
.newsletter__input:focus-visible {
  /* antes: outline:none + un box-shadow al 8% que daba 1.17:1 — invisible.
     El cambio de background era un no-op: --text-light y --bg son el mismo crema. */
  outline: none;
  box-shadow: 0 0 0 2px var(--text);
}
.newsletter__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  -webkit-text-fill-color: var(--text);
}
.newsletter__form .btn { flex-shrink: 0; }
/* Honeypot — invisible para humanos, los bots lo completan y los descartamos */
.newsletter__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- Consentimiento RGPD (newsletter y contacto) --- */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--mid);
  cursor: pointer;
}
.consent__box {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.2rem 0 0;
  accent-color: var(--red);
  cursor: pointer;
}
.consent__box:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.consent a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--t-fast);
}
.consent a:hover { color: var(--red); }
.consent[data-invalid="true"] .consent__text,
.consent__box[aria-invalid="true"] + .consent__text { color: var(--red); }
.newsletter__form { flex-wrap: wrap; }
.newsletter__consent { flex: 1 1 100%; margin-top: 0.4rem; }
.contacto__field--consent { margin-top: -0.25rem; }

@media (max-width: 500px) {
  .newsletter__form { flex-direction: column; gap: 0.7rem; }
  .newsletter__form .btn { justify-content: center; }
}

/* --- Familia (misión) --- */
.family { text-align: center; }
.family__inner {
  max-width: 760px;
  margin-inline: auto;
}
.family__inner .kicker { margin-bottom: 1.2rem; }
.family__title {
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
}
.family__lead {
  color: var(--mid);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 56ch;
  margin: 0 auto 1.2rem;
}
.family__lead:last-child { margin-bottom: 0; }

/* --- CTA final --- */
.final-cta {
  position: relative;
  isolation: isolate;
  color: var(--text-light);
  text-align: center;
  background:
    linear-gradient(rgba(24, 24, 24, 0.62), rgba(24, 24, 24, 0.78)),
    image-set(
      url("../assets/bag.webp") type("image/webp"),
      url("../assets/bag.jpg") type("image/jpeg")
    ) center / cover no-repeat,
    var(--bg-dark);
}
.final-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding-block: clamp(4rem, 10vw, 7rem);
}
.final-cta__glyph { font-size: 1.6rem; color: var(--gold); }
.final-cta__title {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.final-cta__sub {
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.5);
}

/* --- Footer detalle --- */
.footer__about { font-style: normal; line-height: 1.6; color: rgba(250,248,245,0.6); font-size: 0.92rem; max-width: 34ch; margin-bottom: 1rem; }
.footer__email {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(250, 248, 245, 0.75);
  border-bottom: 1px solid rgba(250, 248, 245, 0.25);
  padding-bottom: 2px;
  margin-bottom: 1.5rem;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.footer__email:hover { color: var(--text-light); border-color: var(--text-light); }
.socials { display: flex; gap: 1.25rem; }
.socials a, .footer__col ul a {
  display: inline-block;
  padding-block: 0.3rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: rgba(250,248,245,0.6);
  transition: color var(--t-fast);
}
.socials a:hover, .footer__col ul a:hover { color: var(--text-light); }
.footer__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.25rem; }
.footer__signoff { color: rgba(250,248,245,0.5); }

/* --- Toast --- */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 150%);
  z-index: 80;
  background: var(--bg-dark);
  color: var(--text-light);
  padding: 0.95rem 1.6rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t-med), opacity var(--t-med);
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* --- Cursor personalizado --- */
/* con el cursor personalizado activo, ocultamos el del sistema:
   antes se veían los dos a la vez */
@media (hover: hover) and (min-width: 901px) {
  body:has(.cursor.is-active) { cursor: none; }
  body:has(.cursor.is-active) a,
  body:has(.cursor.is-active) button { cursor: none; }
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-dark);
  z-index: 90;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width var(--t-fast), height var(--t-fast), background var(--t-fast),
              opacity var(--t-fast);
  mix-blend-mode: difference;
  opacity: 0;
}
.cursor.is-active { opacity: 1; }
.cursor.is-hover { width: 42px; height: 42px; background: var(--gold); }

@media (max-width: 900px) {
  .cursor { display: none; }
  body { cursor: auto; }
}

@media (max-width: 500px) {
  .stats { gap: 1.5rem 2.5rem; }
}

/* --- Handle de Instagram dentro de un titular ---
   La display TRIAL no tiene @ ni _; con Archivo (itálica real) el handle
   se lee limpio y el contraste sans/serif queda deliberado. */
.section-title .handle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82em;
  letter-spacing: -0.01em;
  color: var(--red);
}


/* ============ IMPRESIÓN ============
   Sin nav fijo, sin barra de progreso, sin cursor y con las fotos en su sitio:
   una página que se imprime como un documento, no como una captura. */
@media print {
  .nav, .scroll-progress, .cursor, .toast, .marquee, .scroll-hint { display: none !important; }
  .backdrop, .vignette { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
  .split--dark, .final-cta, .footer, .page-head--dark {
    background: #fff !important;
    color: #000 !important;
  }
  .split--dark p, .footer__about, .page-head--dark .page-head__lead { color: #333 !important; }
  a { text-decoration: underline; }
  /* la URL de los enlaces externos, que en papel no se pueden pulsar */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; word-break: break-all; }
  section { break-inside: avoid; page-break-inside: avoid; }
  .accordion__panel { max-height: none !important; content-visibility: visible !important; }
}

/* --- Iconos de redes bajo "Seguinos en" --- */
.socials--icons {
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.4rem;
}
.socials--icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.socials--icons svg { width: 20px; height: 20px; display: block; }
@media (hover: hover) {
  .socials--icons a:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
}

/* --- Teaser de servicios del inicio: cada línea enlaza a su página --- */
.services-mini li a {
  display: inline-block;
  transition: color var(--t-fast), transform var(--t-fast);
}
@media (hover: hover) {
  .services-mini li a:hover { color: var(--red-bright); transform: translateX(4px); }
}

/* --- Título de servicio enlazado (página Servicios) --- */
.value__link { transition: color var(--t-fast); }
@media (hover: hover) { .value__link:hover { color: var(--red); } }
.value .link-arrow { margin-top: 1rem; }

/* --- Universo HOA en el inicio: título grande --- */
.family__title--grande { font-size: clamp(2.4rem, 6.2vw, 4.4rem); line-height: 1.05; max-width: 18ch; margin-inline: auto; text-wrap: balance; }

/* --- HOUSE BCN: dirección dentro del bloque «El espacio» --- */
.espacio__direccion { font-style: normal; font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 0.4rem 0 1.4rem; }

/* --- Nuestro equipo (Manifiesto) — base para completar --- */
.equipo { background: rgba(243, 239, 235, 0.82); }
.equipo__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
}
.equipo__persona { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 900px) { .equipo__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .equipo__lista { grid-template-columns: minmax(0, 1fr); } }
.equipo__foto {
  aspect-ratio: 4 / 5; width: 100%; max-width: 100%; margin-bottom: 1.1rem;
  display: grid; place-items: center; border: 1px dashed var(--border);
  background: repeating-linear-gradient(135deg, rgba(24, 24, 24, 0.035) 0 12px, transparent 12px 24px), var(--bg-warm);
}
.equipo__foto span { font-size: var(--kicker-size); letter-spacing: var(--tracking); text-transform: uppercase; color: var(--mid); }
.equipo__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.equipo__nombre { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.1; margin: 0 0 0.35rem; }
.equipo__rol { font-size: var(--kicker-size); letter-spacing: var(--tracking); text-transform: uppercase; color: var(--red); margin: 0 0 0.6rem; }
.equipo__bio { color: var(--mid); font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* --- Newsletter: ventana casi a pantalla completa al entrar en el inicio (js/aviso-news.js) ---
   Sin JS se queda al final de la página como bloque normal (sin foto ni botón de cerrar).
   Con JS es una capa fija que tapa toda la web: mitad foto de campaña, mitad texto + formulario.
   z-index 70: por encima del nav (50) y de la barra de progreso (60); por debajo del toast (80),
   que tiene que verse con el aviso abierto, y del cursor personalizado (90). */
.aviso-news {
  position: relative; max-width: 32rem; margin: 0 auto; padding: 2rem var(--gutter) 2.5rem;
  background: var(--bg); color: var(--text); text-align: left;
}
.aviso-news__media, .aviso-news__cerrar { display: none; }
.aviso-news .kicker { margin-bottom: 0.7rem; }
.aviso-news__titulo { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 0.6rem; text-wrap: balance; }
.aviso-news__titulo:focus { outline: none; } /* recibe el foco por script al abrir; no es un control */
.aviso-news__sub { color: var(--mid); font-size: 0.95rem; margin: 0 0 1.1rem; }
.aviso-news .newsletter__form { flex-direction: column; gap: 0.6rem; max-width: none; margin: 0; }
.aviso-news .newsletter__form .btn { justify-content: center; }
.aviso-news .newsletter__consent { margin-top: 0.2rem; }

/* La capa: oscurece y difumina la web de debajo */
.js .aviso-news {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  max-width: none; margin: 0; padding: 0;
  background: rgba(24, 24, 24, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}
.js .aviso-news.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.45s var(--ease), visibility 0s; }
html.aviso-news-abierto, html.aviso-news-abierto body { overflow: hidden; }
body:has(.nav__menu[aria-hidden="false"]) .aviso-news { visibility: hidden !important; }

/* El panel: ≈ 92vw × 88vh, foto a la izquierda y texto a la derecha */
.js .aviso-news__panel {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  width: min(92vw, 1600px);
  height: min(88vh, 960px); height: min(88dvh, 960px);
  background: var(--bg); color: var(--text);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.7);
  transform: translateY(28px) scale(0.985);
  transition: transform 0.7s var(--ease);
}
.js .aviso-news.is-open .aviso-news__panel { transform: none; }

.js .aviso-news__media { display: block; position: relative; overflow: hidden; min-height: 0; background: var(--bg-dark); }
.aviso-news__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
  transform: scale(1.06); transition: transform 1.6s var(--ease);
}
.js .aviso-news.is-open .aviso-news__media img { transform: none; }
.aviso-news__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); pointer-events: none;
}
.aviso-news__marca {
  position: absolute; z-index: 1; left: clamp(1rem, 2.4vw, 2rem); bottom: clamp(0.9rem, 2.2vw, 1.6rem);
  font-size: var(--kicker-size); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-light); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.aviso-news__marca .dot { color: var(--red-bright); }

/* Columna de texto: centrada en vertical y con scroll propio si no cabe (márgenes auto: no recorta por arriba) */
.js .aviso-news__cuerpo {
  display: flex; flex-direction: column; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(4.25rem, 10vh, 6rem) clamp(1.75rem, 4.6vw, 5rem) clamp(2rem, 6vh, 4rem);
}
.js .aviso-news__cuerpo > * { flex-shrink: 0; } /* si no cabe, scroll; nunca encoger el formulario */
.js .aviso-news__cuerpo > :first-child { margin-top: auto; }
.js .aviso-news__cuerpo > :last-child { margin-bottom: auto; }
.js .aviso-news .kicker { margin-bottom: clamp(0.9rem, 2.2vh, 1.4rem); }
.js .aviso-news__titulo {
  font-size: clamp(2.3rem, min(4.6vw, 7.4vh), 4.6rem); line-height: 1.02; letter-spacing: -0.022em;
  margin: 0 0 clamp(0.9rem, 2.2vh, 1.5rem);
}
.js .aviso-news__sub { font-size: clamp(0.98rem, 1.2vw, 1.12rem); line-height: 1.55; max-width: 36ch; margin: 0 0 clamp(1.4rem, 4vh, 2.6rem); }
.js .aviso-news .newsletter__form { flex-direction: row; flex-wrap: wrap; gap: 0.6rem; max-width: 34rem; }
.js .aviso-news .newsletter__input { flex: 1 1 13rem; font-size: 0.9rem; padding: 1.05em 1.2em; }
.js .aviso-news .newsletter__form .btn { flex: 0 0 auto; padding-inline: 1.9em; }
.js .aviso-news .newsletter__consent { flex: 1 1 100%; margin-top: 0.55rem; font-size: 0.76rem; }

/* «Cerrar ×»: grande, con texto y sobre crema para que se vea también encima de la foto */
.js .aviso-news__cerrar {
  display: inline-flex; align-items: center; gap: 0.55rem;
  position: absolute; z-index: 2; top: clamp(0.75rem, 1.6vw, 1.25rem); right: clamp(0.75rem, 1.6vw, 1.25rem);
  height: 3rem; padding: 0 0.85rem 0 1.15rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--text); border-radius: 999px;
  font-size: 0.72rem; letter-spacing: var(--tracking); text-transform: uppercase; line-height: 1;
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.aviso-news__cerrar svg { display: block; flex: none; }
@media (hover: hover) { .js .aviso-news__cerrar:hover { background: var(--text); color: var(--text-light); } }
.aviso-news__cerrar:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Ventanas bajas (portátil pequeño, móvil en horizontal): el panel ocupa toda la ventana */
@media (max-height: 640px) and (min-width: 761px) {
  .js .aviso-news__panel { width: 100%; height: 100%; border-radius: 0; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .js .aviso-news__cuerpo { padding-top: 4.25rem; padding-bottom: 1.75rem; }
}
/* Móvil: a pantalla completa. El texto se queda con su alto natural abajo y la foto llena lo que sobra
   arriba (mínimo 120 px); si ni así cabe, la foto se queda en 120 px y el texto hace scroll dentro. */
@media (max-width: 760px) {
  .js .aviso-news { place-items: stretch; }
  .js .aviso-news__panel {
    width: 100%; height: 100%; border-radius: 0;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(120px, 1fr) minmax(0, auto);
  }
  .aviso-news__media img { object-position: 50% 30%; }
  .js .aviso-news__cuerpo { padding: 1.4rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .js .aviso-news__cuerpo > :first-child { margin-top: 0; }
  .js .aviso-news .kicker { margin-bottom: 0.65rem; }
  .js .aviso-news__titulo { font-size: clamp(2rem, 8.8vw, 2.7rem); margin-bottom: 0.7rem; }
  .js .aviso-news__sub { font-size: 0.98rem; margin-bottom: 1.15rem; }
  .js .aviso-news .newsletter__form { flex-direction: column; flex-wrap: nowrap; }
  .js .aviso-news .newsletter__input { flex: none; }
  .js .aviso-news .newsletter__consent { margin-top: 0.35rem; }
  .js .aviso-news__cerrar { top: calc(0.75rem + env(safe-area-inset-top, 0px)); right: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .aviso-news { transition: opacity 0.2s linear, visibility 0s linear 0.2s; }
  .js .aviso-news.is-open { transition: opacity 0.2s linear, visibility 0s; }
  .js .aviso-news__panel, .js .aviso-news .aviso-news__media img { transform: none; transition: none; }
}
@media print {
  .js .aviso-news { display: none !important; }
  html.aviso-news-abierto, html.aviso-news-abierto body { overflow: visible; }
}

/* El abanico de fotos de «Identidad estética» asomaba ~9 px por la derecha en móvil y dejaba mover la página de lado */
.split:has(.stack) { overflow-x: clip; }

/* Rojo de fondo claro sobre la foto del cierre: una sombra suave lo separa de la bolsa roja */
.final-cta em { text-shadow: 0 2px 28px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.5); }