/* =====================================================================
   home-niccola.css — La portada de Niccola
   =====================================================================
   15-oct-2026 (pedido de Ramiro: "rediseñar el index de Niccola, crear
   áreas nuevas, reubicar existentes, darle su identidad original vs lo
   que ya existe en Limonni").

   LA IDEA. La portada de Limonni está armada como una revista: titular
   con collage de polaroids inclinadas, banner oscuro de cápsula, franja
   de cuatro "valores" y un bloque negro para la asesora. Niccola vende
   lo mismo que la hace distinta en cada prenda: se corta a tu cuerpo.
   Así que esta portada se organiza alrededor de esa promesa:

     1. Una sola foto grande, en la forma de hoja de la marca, en vez del
        collage. El titular se dice de corrido, sin la palabra suelta en
        cursiva de color.
     2. La pieza con más carácter de la página no es un banner: es una
        herramienta. "¿Cuál es tu talla?" — escribes tus medidas una vez
        y cada ficha de producto te marca tu talla (comparte la memoria
        con la guía de tallas de la ficha).
     3. Los cuatro "valores" pasan a ser lo que de verdad son: un proceso
        con orden. Qué haces tú, qué hacemos nosotros, cuándo te llega.
     4. Andrea en claro y con el monograma de Niccola (antes: bloque
        negro con la "S" de Sofía, que quedó así al clonar el sitio).

   Paleta, tipografías y la forma de hoja salen de las variables de
   style.css y de niccola-identidad.css; aquí no se inventa ningún color.
   ===================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────── */
.nc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
  /* Sin ancho máximo centrado: así el hero arranca en el mismo margen que
     todas las secciones de abajo (antes quedaba 43px más adentro). */
  padding: clamp(28px, 5vw, 76px) clamp(20px, 5vw, 64px) clamp(24px, 4vw, 56px);
}
.nc-hero--sin-foto { grid-template-columns: minmax(0, 1fr); }

.nc-hero-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
}
.nc-hero-label { margin: 0; }

.nc-hero-titulo {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 70px);
  line-height: 1.03;
  letter-spacing: -.018em;
  color: var(--black);
  text-wrap: balance;
}
.nc-hero-sub {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.6;
  color: var(--muted);
}
.nc-hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

/* La foto: forma de hoja grande. Es la firma de la marca aplicada a la
   pieza más grande de la primera pantalla. */
.nc-hero-foto {
  justify-self: end;
  width: 100%;
  max-width: 470px;
  margin: 0;
}
.nc-hero-foto a {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stone);
  border-radius: 180px 14px 180px 14px;
}
.nc-hero-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;   /* las fotos son verticales: se cuida la cara y el escote, no los pies */
  transition: transform .9s var(--ease);
}
.nc-hero-foto a:hover img { transform: scale(1.025); }
.nc-hero-foto figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  padding: 0 8px;
}
.nc-hero-foto-nombre {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--black);
}
.nc-hero-foto-n { font-size: 13px; color: var(--muted); }

/* Aviso de envío (se conserva: le dice a quien llega de otro país si le
   llega y cuánto tarda, que es su primera duda). */
.home-hero-envio {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 6px 0 0;
  padding: 11px 17px 11px 13px;
  background: var(--paper);
  border: 1px solid var(--stone);
  border-left: 3px solid var(--acento, var(--gold));
}
.home-hero-envio .bandera { font-size: 22px; line-height: 1; flex-shrink: 0; }
.home-hero-envio b { display: block; font-size: 13px; font-weight: 600; color: var(--black); }
.home-hero-envio small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.hero-envio-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 2px; padding: 0;
  font-size: 12px; line-height: 1; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--gold-2); color: var(--gold-2); background: transparent;
  vertical-align: -2px;
}
.hero-envio-info-txt { display: block; margin-top: 4px; }

@media (max-width: 760px) {
  .nc-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .nc-hero-titulo { max-width: 14ch; }
  .nc-hero-acciones { width: 100%; flex-wrap: nowrap; }
  .nc-hero-acciones .btn { flex: 1; padding: 13px 10px; white-space: nowrap; }
  .home-hero-envio { display: flex; width: 100%; }
  .nc-hero-foto { justify-self: stretch; max-width: none; }
  /* Cuadrada en móvil: con la vertical completa, la primera prenda del
     catálogo quedaba a dos pantallas de distancia. */
  .nc-hero-foto a { aspect-ratio: 1 / 1; border-radius: 120px 12px 120px 12px; }
}

/* ── Secciones de prendas ─────────────────────────────────────────── */
.home-section { padding: clamp(36px, 4.4vw, 64px) clamp(20px, 5vw, 64px) clamp(12px, 2vw, 24px); }
.home-section.home-capsula { padding-top: clamp(28px, 3.6vw, 52px); }
.home-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 26px;
}
.home-section-head .eyebrow { margin: 0; }
.home-section-head h2 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.05;
  color: var(--black);
}
.home-section-head a {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;   /* style.css lo pone en versalitas (estilo Limonni) */
  color: var(--gold-2);
  text-decoration: none;
  border-bottom: 1px solid var(--salvia, var(--stone-2));
  padding-bottom: 2px;
}
.home-section-head a:hover { color: var(--black); border-color: var(--black); }

.ver-mas-wrap { margin: 20px 0 6px; text-align: center; }
.ver-mas { padding: 14px 30px; }

/* ── ¿Cuál es tu talla? ───────────────────────────────────────────── */
.nc-talla {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .95fr);
  align-items: start;
  gap: clamp(22px, 3.4vw, 52px);
  margin: clamp(30px, 4vw, 56px) clamp(20px, 5vw, 64px) 0;
  padding: clamp(26px, 3.6vw, 48px) clamp(22px, 4vw, 56px);
  background: var(--gold-2);
  color: var(--linen);
  border-radius: 36px 8px 36px 8px;
  scroll-margin-top: 96px;   /* que el encabezado fijo no la tape al llegar desde el hero */
}
.nc-talla-intro h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.05;
  color: var(--linen);
}
.nc-talla-intro > p {
  margin: 0;
  max-width: 40ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(244, 241, 232, .82);
}
.nc-talla-medir { margin-top: 16px; }
.nc-talla-medir summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--linen);
  border-bottom: 1px solid rgba(244, 241, 232, .4);
}
.nc-talla-medir summary::-webkit-details-marker { display: none; }
.nc-talla-medir summary::after { content: ' +'; }
.nc-talla-medir[open] summary::after { content: ' −'; }
.nc-talla-medir summary:focus-visible { outline: 2px solid var(--linen); outline-offset: 3px; }
.nc-talla-medir ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(244, 241, 232, .82);
}
.nc-talla-medir li + li { margin-top: 5px; }

.nc-talla-campos { display: grid; gap: 12px; }
.nc-campo { position: relative; display: flex; flex-direction: column; gap: 6px; }
.nc-campo > span { font-size: 13px; color: rgba(244, 241, 232, .86); }
.nc-campo input {
  width: 100%;
  padding: 13px 40px 13px 14px;
  font-family: inherit;
  font-size: 17px;
  color: var(--black);
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: 10px;
  -moz-appearance: textfield;
}
/* Los números de ejemplo, claramente más tenues que un dato escrito: con
   el gris por defecto "88 / 70 / 96" se leía como si ya hubiera medidas. */
.nc-campo input::placeholder { color: #BDBFB2; opacity: 1; }
.nc-campo input::-webkit-outer-spin-button,
.nc-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nc-campo input:focus-visible { outline: 2px solid var(--linen); outline-offset: 2px; }
.nc-campo > i {
  position: absolute;
  right: 14px;
  bottom: 15px;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}

.nc-talla-resultado { display: flex; flex-direction: column; gap: 14px; }
.nc-talla-piezas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nc-talla-pieza {
  display: flex;
  flex-direction: column;
  padding: 16px 14px 14px;
  border: 1px solid rgba(244, 241, 232, .26);
  border-radius: 18px 4px 18px 4px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.nc-talla-pieza.is-lista {
  background: rgba(244, 241, 232, .09);
  border-color: rgba(244, 241, 232, .55);
}
.nc-talla-etq {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: rgba(244, 241, 232, .88);
}
.nc-talla-letra {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 58px);
  line-height: 1;
  color: var(--linen);
}
.nc-talla-pieza small { font-size: 12px; line-height: 1.4; color: rgba(244, 241, 232, .74); }
.nc-talla-estado { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(244, 241, 232, .86); }
.nc-talla-borrar {
  align-self: flex-start;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  color: rgba(244, 241, 232, .78);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.nc-talla-borrar[hidden] { display: none; }
.nc-talla-borrar:focus-visible { outline: 2px solid var(--linen); outline-offset: 3px; }

@media (max-width: 980px) {
  .nc-talla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nc-talla-intro { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .nc-talla { grid-template-columns: minmax(0, 1fr); border-radius: 28px 6px 28px 6px; }
  /* Las tres medidas en una fila: en el teléfono, apiladas empujaban el
     resultado fuera de la pantalla justo cuando aparece. */
  .nc-talla-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .nc-campo input { padding: 12px 26px 12px 10px; font-size: 16px; }
  .nc-campo > i { right: 9px; bottom: 14px; font-size: 11px; }
}

/* ── Sets (la categoría que más buscan) ───────────────────────────── */
.bn-set {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  margin: clamp(26px, 3.4vw, 44px) clamp(20px, 5vw, 64px) 0;
  padding: clamp(20px, 3vw, 38px) clamp(22px, 4vw, 56px);
  color: var(--black);
  text-decoration: none;
  overflow: hidden;
  background: var(--stone);
  border: 1px solid var(--stone-2);
  border-radius: 36px 8px 36px 8px;
}
.bn-set-fotos { position: relative; flex: 0 0 auto; width: clamp(190px, 26vw, 360px); height: clamp(190px, 22vw, 300px); }
.bn-set-fotos img { position: absolute; object-fit: cover; background: var(--linen); border-radius: 14px; transition: transform .35s var(--ease); }
.bn-set-f1 { left: 0; top: 0; width: 55%; height: 100%; z-index: 1; }
.bn-set-f2 { right: 0; top: 0; width: 42%; height: 58%; }
.bn-set-f3 { right: 6%; bottom: 0; width: 36%; height: 40%; z-index: 2; border: 3px solid var(--stone); }
.bn-set:hover .bn-set-f1 { transform: scale(1.03); }
.bn-set-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.bn-set-eyebrow { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--gold-2); }
.bn-set-titulo { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; color: var(--black); }
.bn-set-sub { max-width: 42ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.bn-set-cta { margin-top: 4px; pointer-events: none; }
@media (max-width: 640px) {
  .bn-set { flex-direction: column; align-items: flex-start; }
  .bn-set-fotos { align-self: center; }
}

/* ── Lo más pedido y filas personales (mismo componente) ──────────── */
.home-top { padding: 30px 0 8px; }
.home-top-head { margin-bottom: 14px; padding: 0 clamp(20px, 5vw, 64px); }
.home-top-head .eyebrow { margin: 0; }
.home-top-head h2 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 34px);
  color: var(--black);
}
.home-top-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 clamp(20px, 5vw, 64px) 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.home-top-card { flex: 0 0 150px; scroll-snap-align: start; color: inherit; text-decoration: none; }
.home-top-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;          /* la foto completa: recortarla escondía la prenda */
  background: var(--stone);
  border-radius: 12px 3px 12px 3px;
}
.home-top-card b {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.home-top-card span { font-size: 13px; color: var(--muted); }
@media (min-width: 900px) { .home-top-card { flex-basis: 190px; } }

/* ── Así se hace tu prenda ────────────────────────────────────────── */
.nc-proceso { padding: clamp(48px, 6vw, 92px) clamp(20px, 5vw, 64px) clamp(30px, 4vw, 56px); }
.nc-proceso h2 {
  margin: 0 0 clamp(26px, 3.2vw, 42px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.05;
  color: var(--black);
}
.nc-pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nc-paso { padding-top: 18px; border-top: 1px solid var(--salvia, var(--stone-2)); }
.nc-paso-n {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(36px, 3.4vw, 48px);
  line-height: 1;
  color: var(--gold);
}
.nc-paso h3 {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--black);
}
.nc-paso p { margin: 0; max-width: 32ch; font-size: 14px; line-height: 1.65; color: var(--muted); }
@media (max-width: 900px) { .nc-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .nc-pasos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* En una sola columna el número va al lado: apilado, cada paso medía
     el doble de alto sin decir más. */
  .nc-paso { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 16px 0; }
  .nc-paso-n { grid-row: span 2; margin: 0; font-size: 34px; }
}

/* ── Andrea ───────────────────────────────────────────────────────── */
.nc-andrea { padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 64px) clamp(48px, 6vw, 88px); }
.nc-andrea-caja {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--paper);
  border: 1px solid var(--stone);
  border-radius: 36px 8px 36px 8px;
}
.nc-andrea-emblema {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--gold);
  color: var(--linen);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
}
.nc-andrea-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nc-andrea-texto h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  color: var(--black);
}
.nc-andrea-texto p { margin: 0; max-width: 58ch; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.nc-andrea-btn { white-space: nowrap; }
@media (max-width: 760px) {
  .nc-andrea-caja { grid-template-columns: auto minmax(0, 1fr); }
  .nc-andrea-emblema { width: 56px; height: 56px; }
  .nc-andrea-btn { grid-column: 1 / -1; width: 100%; }
}

/* ── Modo anuncio: portada corta para tráfico pagado ──────────────── */
/* Quien llega de un anuncio de Meta ve el título, el aviso de envío y,
   justo debajo, las prendas más pedidas — sin foto grande ni botones que
   las empujen fuera de la primera pantalla. */
.modo-anuncio .nc-hero { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 16px; padding-bottom: 8px; }
.modo-anuncio .nc-hero-foto,
.modo-anuncio .nc-hero-acciones,
.modo-anuncio .nc-hero-label,
.modo-anuncio .nc-hero-sub { display: none; }
.modo-anuncio .nc-hero-titulo { font-size: clamp(26px, 6.4vw, 38px); }
.modo-anuncio .home-top { padding-top: 8px; }

/* ── Experimento n_home_grid (18-oct-2026): cuadrícula para anuncios ──
   Solo se pinta en la variante 'nuevo' y en modo anuncio (ver index.php).
   Mismo tratamiento de foto que .home-top-card (foto completa, esquinas en
   hoja) para que la única diferencia medida sea la disposición: 2 columnas
   a la vista en vez de una fila con scroll horizontal. */
.nc-grid-anuncio { padding: 14px clamp(16px, 5vw, 64px) 6px; }
.nc-grid-anuncio h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 5.6vw, 32px);
  color: var(--black);
}
.nc-grid-anuncio-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}
@media (min-width: 700px) { .nc-grid-anuncio-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nc-grid-anuncio-lista { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.nc-grid-anuncio-card { color: inherit; text-decoration: none; min-width: 0; }
.nc-grid-anuncio-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--stone);
  border-radius: 12px 3px 12px 3px;
}
.nc-grid-anuncio-card b {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nc-grid-anuncio-card span { font-size: 13px; color: var(--muted); }
.nc-grid-anuncio-mas {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .nc-hero-foto img, .nc-talla-pieza, .bn-set-fotos img { transition: none; }
  .nc-hero-foto a:hover img, .bn-set:hover .bn-set-f1 { transform: none; }
}