/*
 * Sistema de diseño del programa: tokens, base y componentes compartidos.
 * Documentación: docs/sistema-de-diseno.md
 *
 * Estilo editorial de moda: blanco y negro, una sola sans, mayúsculas con
 * tracking, esquinas rectas y líneas de 1 px. El fucsia es el único acento
 * y se usa en dosis mínimas (foco, un detalle por sección, nunca en fondos).
 */

/* ---------- Fuentes (Source Sans 3, variable 300–700, subconjunto latin) ---------- */

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/source-sans-3-latin-italic.woff2') format('woff2');
}

/* ---------- Tokens ---------- */

:root {
    color-scheme: light;

    /* Color */
    --papel: #ffffff;
    --papel-2: #f5f4f2;
    --tinta: #000000;
    --tinta-2: #3d3d3d;
    --tinta-3: #767676;
    --linea: #e3e3e3;
    --linea-fuerte: #000000;
    --acento: #d6336c;
    --invertido-papel: #000000;
    --invertido-tinta: #ffffff;
    --foto-fondo: #d9d6d1;

    /* Tipografía */
    --fuente: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    /* Serif solo para títulos de página (la referencia usa Sabon). EB Garamond aún no se aloja: cae a Georgia */
    --fuente-titulo: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
    --t-titulo: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
    --t-xs: 0.75rem;     /* 12 px: etiquetas, barra, navegación */
    --t-s: 0.875rem;     /* 14 px: texto secundario */
    --t-m: 1rem;         /* 16 px: cuerpo */
    --t-l: 1.125rem;     /* 18 px: títulos de sección */
    --t-xl: 1.5rem;      /* 24 px: cifras y subtítulos */
    --t-display: clamp(2rem, 1.2rem + 4vw, 4.25rem);
    --peso-normal: 400;
    --peso-medio: 500;
    --peso-fuerte: 600;
    --track-s: 0.01em;
    --track-m: 0.03em;
    --track-l: 0.12em;   /* logotipo */
    --interlinea: 1.5;
    --interlinea-display: 1.05;

    /* Espacio (base 4 px) */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: 4rem;
    --e-9: 6rem;
    --e-10: 8rem;

    /* Layout */
    --ancho-max: 90rem;
    --ancho-texto: 34rem;
    --margen: var(--e-4);
    --alto-barra: 2rem;
    --alto-encabezado: 3.5rem;

    /* Forma y movimiento */
    --radio: 0;
    --borde: 1px solid var(--linea);
    --borde-fuerte: 1px solid var(--linea-fuerte);
    --transicion: 200ms ease;
}

@media (min-width: 48rem) {
    :root {
        --margen: var(--e-5);
        --alto-encabezado: 4rem;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --papel: #0b0b0b;
        --papel-2: #161616;
        --tinta: #f4f4f4;
        --tinta-2: #c8c8c8;
        --tinta-3: #8f8f8f;
        --linea: #2a2a2a;
        --linea-fuerte: #f4f4f4;
        --acento: #ec6a98;
        --invertido-papel: #f4f4f4;
        --invertido-tinta: #0b0b0b;
        --foto-fondo: #262422;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --papel: #0b0b0b;
    --papel-2: #161616;
    --tinta: #f4f4f4;
    --tinta-2: #c8c8c8;
    --tinta-3: #8f8f8f;
    --linea: #2a2a2a;
    --linea-fuerte: #f4f4f4;
    --acento: #ec6a98;
    --invertido-papel: #f4f4f4;
    --invertido-tinta: #0b0b0b;
    --foto-fondo: #262422;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: var(--t-m);
    font-weight: var(--peso-normal);
    line-height: var(--interlinea);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--tinta-2); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

.solo-lectores {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Tipografía utilitaria ---------- */

/* Etiqueta: mayúsculas pequeñas con tracking (navegación, sobretítulos) */
.etiqueta {
    font-size: var(--t-xs);
    font-weight: var(--peso-medio);
    letter-spacing: var(--track-m);
    text-transform: uppercase;
}

/* Título de sección: mayúsculas en itálica, como la referencia */
.titulo-seccion {
    font-size: var(--t-l);
    font-weight: var(--peso-medio);
    font-style: italic;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Titular grande: el único texto que crece con la pantalla */
.display {
    font-size: var(--t-display);
    font-weight: var(--peso-normal);
    line-height: var(--interlinea-display);
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* Título de página: serif, sin mayúsculas ("Mi cuenta", "Nuestra historia") */
.titulo-pagina {
    font-family: var(--fuente-titulo);
    font-size: var(--t-titulo);
    font-weight: var(--peso-normal);
    line-height: 1.2;
}

.texto-suave { color: var(--tinta-2); }
.texto-nota { color: var(--tinta-3); font-size: var(--t-xs); }

/* ---------- Componentes ---------- */

/* Contenedor */
.contenedor {
    width: 100%;
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: var(--margen);
}

/* Barra de anuncio */
.barra {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--alto-barra);
    padding: var(--e-1) var(--margen);
    background: var(--invertido-papel);
    color: var(--invertido-tinta);
    text-align: center;
}
.barra a { color: inherit; text-decoration: none; }
.barra a:hover { text-decoration: underline; }

/* Encabezado */
.encabezado {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--papel);
    border-bottom: var(--borde);
}
.encabezado__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    height: var(--alto-encabezado);
}
.encabezado__nav { display: none; gap: var(--e-5); }
.encabezado__nav a { text-decoration: none; }
.encabezado__nav a:hover { text-decoration: underline; color: inherit; }
@media (min-width: 64rem) { .encabezado__nav { display: flex; } }

/* Logotipo tipográfico */
.logotipo {
    font-size: var(--t-l);
    font-weight: var(--peso-fuerte);
    letter-spacing: var(--track-l);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

/* Botones: rectángulos, sin radio, texto en etiqueta */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 2.75rem;
    padding: var(--e-3) var(--e-6);
    border: var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--tinta);
    color: var(--papel);
    font: inherit;
    font-size: var(--t-xs);
    font-weight: var(--peso-medio);
    letter-spacing: var(--track-m);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion);
}
.boton:hover { background: var(--papel); color: var(--tinta); }
.boton--borde { background: transparent; color: var(--tinta); }
.boton--borde:hover { background: var(--tinta); color: var(--papel); }
.boton--bloque { width: 100%; }
.boton--chico { min-height: 2.25rem; padding: var(--e-2) var(--e-5); white-space: nowrap; }
/* Sobre foto: siempre negro, como la referencia */
.boton--sobre-foto { background: #000; color: #fff; border-color: #000; }
.boton--sobre-foto:hover { background: #fff; color: #000; border-color: #fff; }

/* Enlace subrayado fino */
.enlace { font-size: var(--t-s); text-decoration: underline; }

/* Foto: espacio de imagen con proporción fija. Sin imagen muestra su leyenda. */
.foto {
    position: relative;
    overflow: hidden;
    background: var(--foto-fondo);
    aspect-ratio: var(--proporcion, 3 / 4);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto__pendiente {
    position: absolute;
    inset: var(--e-3) var(--e-3) auto auto;
    z-index: 1;
    color: var(--tinta-3);
    font-size: var(--t-xs);
    letter-spacing: var(--track-m);
    text-transform: uppercase;
}
.foto--16x9 { --proporcion: 16 / 9; }
.foto--4x5 { --proporcion: 4 / 5; }
.foto--1x1 { --proporcion: 1 / 1; }
/* Encuadre: qué parte de la foto se conserva al recortar */
.foto--enfoque-izquierda img { object-position: 25% center; }
.foto--enfoque-derecha img { object-position: 70% center; }
.foto--enfoque-arriba img { object-position: center 25%; }

/* Acento: un detalle fucsia por sección, nunca un fondo */
.acento { color: var(--acento); }
.acento-linea { display: block; width: 2rem; height: 2px; background: var(--acento); }

/* Lista con línea divisoria */
.lista-lineas > li { padding-block: var(--e-4); border-top: var(--borde); }
.lista-lineas > li:last-child { border-bottom: var(--borde); }

/* Tabla de cifras: concepto a la izquierda, monto a la derecha */
.cifras { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.cifras th, .cifras td { padding: var(--e-3) 0; border-bottom: var(--borde); text-align: left; font-weight: var(--peso-normal); }
.cifras td:last-child, .cifras th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifras tfoot td, .cifras tfoot th { border-bottom: var(--borde-fuerte); border-top: var(--borde-fuerte); font-weight: var(--peso-fuerte); }

/* Acordeón (details/summary nativo) */
.acordeon { border-top: var(--borde); }
.acordeon:last-of-type { border-bottom: var(--borde); }
.acordeon summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--e-4) 0;
    cursor: pointer;
    list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: '+'; font-size: var(--t-l); font-weight: 300; line-height: 1; }
.acordeon[open] summary::after { content: '−'; }
.acordeon__cuerpo { padding-bottom: var(--e-4); color: var(--tinta-2); font-size: var(--t-s); }

/* Pie */
.pie { padding-block: var(--e-8) var(--e-6); border-top: var(--borde); }
.pie__legal { margin-top: var(--e-7); text-align: center; color: var(--tinta-3); }

/* Migas de pan: Inicio / Vestidos */
.migas { display: flex; flex-wrap: wrap; gap: var(--e-2); font-size: var(--t-s); color: var(--tinta-3); }
.migas a { text-decoration: none; }
.migas li + li::before { content: '/'; margin-right: var(--e-2); }
.migas [aria-current] { color: var(--tinta); }

/* Chips: rectángulos grises con etiqueta. La activa lleva borde */
.chips { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; }
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: var(--e-2) var(--e-4);
    border: 1px solid transparent;
    background: var(--papel-2);
    color: var(--tinta);
    font-size: var(--t-xs);
    font-weight: var(--peso-medio);
    letter-spacing: var(--track-m);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.chip[aria-pressed="true"], .chip[aria-current] { border-color: var(--linea-fuerte); background: transparent; }

/* Campo: etiqueta arriba y solo una línea inferior */
.campo { display: grid; gap: var(--e-1); }
.campo__etiqueta { color: var(--tinta-3); font-size: var(--t-xs); letter-spacing: var(--track-m); text-transform: uppercase; }
.campo input, .campo select {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--e-2) 0;
    border: 0;
    border-bottom: var(--borde-fuerte);
    border-radius: var(--radio);
    background: transparent;
    color: var(--tinta);
    font: inherit;
}
.campo textarea {
    width: 100%;
    min-height: 8rem;
    padding: var(--e-3);
    border: var(--borde-fuerte);
    border-radius: var(--radio);
    background: transparent;
    color: var(--tinta);
    font: inherit;
}
.campo input::placeholder { color: var(--tinta-3); font-size: var(--t-xs); letter-spacing: var(--track-m); text-transform: uppercase; }
.campo__ayuda { color: var(--tinta-3); font-size: var(--t-xs); }

/* Pestañas: texto en etiqueta, la activa subrayada */
.pestanas { display: flex; gap: var(--e-5); border-bottom: var(--borde); }
.pestanas a, .pestanas button {
    padding: var(--e-3) var(--e-1);
    border: 0;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: var(--tinta-3);
    font: inherit;
    font-size: var(--t-xs);
    font-weight: var(--peso-medio);
    letter-spacing: var(--track-m);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.pestanas [aria-selected="true"], .pestanas [aria-current] { border-bottom-color: var(--linea-fuerte); color: var(--tinta); }

/* Rejilla de producto: fotos casi a sangre, nombre en mayúsculas y precio debajo */
.rejilla-productos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-7) var(--e-1); }
@media (min-width: 64rem) { .rejilla-productos { grid-template-columns: repeat(4, 1fr); gap: var(--e-7) var(--e-2); } }
.producto { position: relative; display: grid; align-content: start; gap: var(--e-1); text-decoration: none; }
.producto .foto { margin-bottom: var(--e-2); }
.producto__nombre { font-size: var(--t-xs); font-weight: var(--peso-normal); letter-spacing: var(--track-m); text-transform: uppercase; padding-inline: var(--e-1); }
.producto__precio, .producto__nota { font-size: var(--t-xs); font-variant-numeric: tabular-nums; padding-inline: var(--e-1); }
.producto__nota { color: var(--tinta-3); }
/* Foto editorial que ocupa 2×2 en la rejilla */
@media (min-width: 64rem) {
    .producto--editorial { grid-column: span 2; grid-row: span 2; grid-template-rows: 1fr auto auto; }
    .producto--editorial > a { display: block; }
    .producto--editorial .foto { height: 100%; aspect-ratio: auto; }
}

/* Dato: etiqueta gris arriba y valor abajo (fichas y "Mi cuenta") */
.datos { display: grid; gap: var(--e-5) var(--e-6); }
@media (min-width: 48rem) { .datos { grid-template-columns: repeat(2, 1fr); } }
.dato dt { color: var(--tinta-3); font-size: var(--t-xs); letter-spacing: var(--track-m); text-transform: uppercase; }
.dato dd { margin: var(--e-1) 0 0; }

/* Estado: etiqueta con borde; la llena marca lo que pide acción */
.estado {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: var(--e-1) var(--e-2);
    border: var(--borde-fuerte);
    font-size: var(--t-xs);
    line-height: 1;
    font-weight: var(--peso-medio);
    letter-spacing: var(--track-m);
    text-transform: uppercase;
    white-space: nowrap;
}
.estado--lleno { background: var(--tinta); color: var(--papel); }
.estado--suave { border-color: var(--linea); color: var(--tinta-3); }
.estado--alerta::before { content: ''; width: 6px; height: 6px; background: var(--acento); }

/* Barra de herramientas de un listado: "Filtrar y ordenar" y "Vista" a la derecha */
.herramientas { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding-block: var(--e-4); }
.herramientas__acciones { display: flex; gap: var(--e-5); font-size: var(--t-s); }

/* Boletín del pie: campo de línea y botón negro a lo ancho */
.boletin { display: grid; gap: var(--e-4); max-width: 18rem; }