/* =====================================================================
   niccola-identidad.css — El lenguaje visual propio de Niccola
   =====================================================================
   15-oct-2026 (pedido de Ramiro: "siento que el css de niccola debe ser
   un poco más diferente a limonni y debe tener desde el punto de vista
   de diseño un toque diferente").

   TENÍA RAZÓN, Y VALE LA PENA DECIR POR QUÉ. Al clonar el sitio se
   cambiaron los colores (oro → oliva) y las tipografías (Playfair →
   Fraunces, Plus Jakarta → Poppins), pero NO se cambió nada de la
   estructura: los mismos radios de 2 px, las mismas sombras grises, el
   mismo ritmo de espaciado y —sobre todo— el mismo tratamiento de las
   etiquetas pequeñas. Dos marcas con los huesos idénticos se sienten la
   misma marca aunque estén pintadas distinto.

   DE DÓNDE SALE ESTE DISEÑO. De lo que Niccola ya es, no de un gusto
   inventado:

     · El logo es un monograma manuscrito dentro de un círculo oliva, y
       el nombre va en Fraunces ITÁLICA. Es una marca de trazo, curva y
       cercana — no una marca de arista.
     · La prenda es lino: una tela mate, de textura visible, que no
       brilla. El oro de Limonni refleja; el oliva de Niccola absorbe.
     · La promesa es "hecha a tu medida": algo íntimo y hecho a mano.

   LAS TRES DECISIONES, entonces:

   1. SE RETIRA LA ETIQUETA TÉCNICA. Limonni rotula con tipografía
      monoespaciada, VERSALITAS y mucho tracking: el gesto de una
      revista o de un panel de datos. Niccola rotula con su propia
      itálica, en minúscula y sin tracking — el mismo gesto de su
      wordmark. Es el cambio que más personalidad mueve y el que más
      separa las dos marcas, porque esas etiquetas están en todas las
      pantallas del sitio.

   2. SUPERFICIES MATE. Fuera las sombras proyectadas. El lino no tiene
      brillo ni levita: la profundidad se construye con tono y con
      líneas finas en salvia, no con luz. (Se hace redefiniendo las
      variables --shadow-*, así que alcanza a los 27 sitios del CSS que
      las usan sin tener que tocarlos uno por uno.)

   3. UNA FORMA FIRMA: el "radio de hoja", una curva asimétrica
      (grande arriba-izquierda y abajo-derecha, mínima en las otras dos
      esquinas). Recuerda a una hoja y al trazo del monograma. Se usa
      SOLO en las superficies principales — si se pusiera en todo, se
      volvería un tema y dejaría de ser una firma.

   Este archivo se carga DESPUÉS de style.css (ver layout_header.php),
   así que son sobreescrituras: el sitio sigue funcionando igual si se
   quita, solo pierde el acento.
   ===================================================================== */

:root {
  /* ── Forma ──────────────────────────────────────────────────────── */
  /* Limonni usa 2px: arista editorial. Niccola redondea, pero sin
     llegar a la tarjeta inflada de aplicación web. */
  --radius: 7px;

  /* La forma firma. Se aplica a mano, no por defecto. */
  --radius-hoja: 20px 5px 20px 5px;

  /* ── Superficie ─────────────────────────────────────────────────── */
  /* Mismas variables que usa todo el CSS, con otro contenido: en vez de
     sombra gris proyectada, un velo muy tenue en el propio oliva. Lo
     que antes "flotaba" ahora simplemente se apoya. */
  --shadow-sm: 0 1px 2px rgba(51, 54, 43, .045);
  --shadow-md: 0 2px 10px rgba(51, 54, 43, .055);
  --shadow-lg: 0 6px 22px rgba(51, 54, 43, .07);
  --shadow-xl: 0 12px 40px rgba(51, 54, 43, .09);

  /* ── Aire ───────────────────────────────────────────────────────── */
  /* Limonni es denso, de revista. Niccola respira: la marca vende algo
     hecho despacio y a mano, y el ritmo de la página lo acompaña. */
  --salvia: #A9AD94;
}

body {
  line-height: 1.72;
}

/* =====================================================================
   1. La etiqueta pequeña: de monoespaciada en versalitas a itálica
   ===================================================================== */
.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;   /* los textos ya vienen en minúscula desde el PHP */
  color: var(--gold-2);
}

/* El mismo criterio donde el tratamiento está escrito suelto en vez de
   con la clase .eyebrow. */
.home-top-head .eyebrow,
.legal-subtitulo,
.gt-tabla-title {
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

/* =====================================================================
   2. Superficies mate
   ===================================================================== */
/* El borde fino en salvia hace el trabajo que antes hacía la sombra:
   separar la superficie del fondo. */
.home-top-card,
.car-linea,
.pdp-section,
.gt {
  border-color: var(--stone);
}

/* =====================================================================
   3. La forma firma, solo en las superficies principales
   ===================================================================== */
.gt,
.home-hero-envio {
  border-radius: var(--radius-hoja);
}

/* La guía de tallas es, en esta ficha, el sitio donde la clienta se
   detiene a resolver su duda. Que sea la pieza con más carácter de la
   página es deliberado. */
.gt {
  background:
    linear-gradient(170deg, rgba(169, 173, 148, .07) 0%, rgba(169, 173, 148, 0) 42%),
    var(--paper);
}
.gt-title {
  font-style: italic;
}

/* =====================================================================
   4. Botones: misma decisión que las etiquetas (15-oct-2026, rediseño
      de la portada). Los de Limonni van en VERSALITAS con tracking y
      "levitan" con sombra al pasar el mouse. Los de Niccola dicen las
      cosas en minúscula, como se hablan, y no flotan: se oscurecen.
   ===================================================================== */
.btn {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  border-radius: var(--radius);
}
.btn-primary:hover {
  background: var(--gold-2);
  transform: none;
  box-shadow: none;
}
.btn-ghost {
  border-color: var(--salvia);
}

/* =====================================================================
   Detalles
   ===================================================================== */
/* El botón de talla, en reposo, es casi una línea; al elegirlo se llena
   de carbón. El contraste de estado hace de señal, sin necesidad de
   recuadros gruesos todo el tiempo. */
.talla-btn {
  border-radius: var(--radius);
}

/* El foco de teclado en oliva, no en el azul del navegador: la marca
   también se nota en lo que casi nadie mira. */
:focus-visible {
  outline-color: var(--gold-2);
}