/*
    Tienda — vidriera mayorista

    Idea: una hoja de línea de showroom. Cada artículo se lee como en un catálogo mayorista
    (artículo, colores, curva de talles) y los destacados cuelgan de un perchero.

    --marca, --marca-contraste, --acento, --acento-contraste y --titulo llegan desde la
    configuración de la tienda (ver core/vistas/tienda_header.php).

    Tipografías: Gloock para títulos; Archivo para todo lo demás, en ancho angosto
    (font-stretch) para códigos de artículo y talles, como en una etiqueta de prenda.
*/

:root {
    --papel: #ffffff;
    --niebla: #f4f2f5;
    --tinta: #221d26;
    --tinta-suave: #6f6875;
    --linea: #e3dee6;
    --display: 'Gloock', Georgia, 'Times New Roman', serif;
    --texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --margen: 20px;
    --ancho: 1240px;
}

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

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

/* La página nunca se desplaza de costado, pase lo que pase adentro.
   "clip" recorta sin crear una caja con scroll, así no rompe lo que queda fijo al bajar. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
    body { overflow-x: hidden; }
}

body {
    margin: 0;
    font-family: var(--texto);
    font-size: 16px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--papel);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

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

.contenedor { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.saltar { position: absolute; left: -9999px; top: 0; background: var(--tinta); color: #fff; padding: 10px 16px; z-index: 10; }
.saltar:focus { left: 0; }

/* --- Botones --- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--marca);
    color: var(--marca-contraste);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.boton:hover { filter: brightness(1.12); }
.boton-chico { padding: 9px 16px; font-size: 15px; }
.boton-grande { width: 100%; padding: 16px 24px; font-size: 17px; }

/* Franja de alta: solo en celular y tablet, donde el link no entra en la cabecera */
.franja-alta { padding: 9px var(--margen); background: var(--marca); color: var(--marca-contraste); font-size: 14px; font-weight: 500; text-align: center; }
.franja-alta a { text-decoration: underline; }

/* --- Cabecera --- */
.cabecera { border-bottom: 1px solid var(--linea); }
.cabecera-fila { display: flex; align-items: center; gap: 16px; min-height: 68px; }

.marca { margin-right: auto; font-family: var(--display); font-size: 26px; line-height: 1; color: var(--titulo); text-decoration: none; }
.marca img { max-height: 52px; width: auto; }
/* Bajada de la marca ("Boutique"): acompaña al nombre sin competirle */
.marca-lema { font-family: var(--texto); font-stretch: 75%; font-weight: 500; font-size: 0.55em; letter-spacing: 0.06em; color: var(--tinta-suave); }

.buscador { display: none; }

.accesos { display: flex; align-items: center; gap: 18px; font-weight: 500; white-space: nowrap; }
.accesos a { text-decoration: none; }
.accesos a:hover { text-decoration: underline; }
.solo-ancho, .boton.oculto-movil { display: none; }

.desde-tablet { display: none; }

/* --- Menú desplegable (sale de la derecha) --- */
.menu-boton { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 50%; color: var(--tinta); }
.menu-boton:hover { border-color: var(--tinta); }

.menu { position: fixed; inset: 0; z-index: 60; visibility: hidden; transition: visibility 0s 0.45s; }
.menu-fondo { position: absolute; inset: 0; background: rgba(20, 16, 24, 0.45); opacity: 0; transition: opacity 0.35s; }
.menu-panel {
    position: absolute;
    inset: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 26px;
    width: min(88vw, 400px);
    padding: 16px 22px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--papel);
    transform: translateX(100%);
    transition: transform 0.45s var(--suave);
}
/* Abierto: por JavaScript (.abierto) o, sin JavaScript, por el link a #menu (:target) */
.menu.abierto, .menu:target { visibility: visible; transition-delay: 0s; }
.menu.abierto .menu-fondo, .menu:target .menu-fondo { opacity: 1; }
.menu.abierto .menu-panel, .menu:target .menu-panel { transform: none; }
html.menu-abierto { overflow: hidden; }

.menu-cabeza { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.menu-marca { font-family: var(--display); font-size: 24px; color: var(--titulo); text-decoration: none; }
.menu-marca img { max-height: 42px; width: auto; }
.menu-cerrar { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 50%; color: var(--tinta); }
.menu-cerrar:hover { border-color: var(--tinta); }

.menu-lista > li { border-bottom: 1px solid var(--linea); }
.menu-lista > li > a { display: block; padding: 13px 0; font-family: var(--display); font-size: clamp(27px, 7.4vw, 34px); line-height: 1.1; color: var(--titulo); text-decoration: none; }
.menu-lista > li > a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--acento); }
.menu-rubros { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 0 14px; }
.menu-rubros a { color: var(--tinta-suave); text-decoration: none; }
.menu-rubros a:hover { color: var(--tinta); text-decoration: underline; }

.menu-pie { display: grid; gap: 16px; margin-top: auto; }
.menu-cuenta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 500; }

/* Al abrir, las secciones entran una detrás de otra */
@media (prefers-reduced-motion: no-preference) {
    .menu-lista > li { opacity: 0; transform: translateX(24px); transition: opacity 0.4s, transform 0.5s var(--suave); }
    .menu.abierto .menu-lista > li, .menu:target .menu-lista > li { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i, 0) * 55ms); }
}

.rubros { border-top: 1px solid var(--linea); }
.rubros-fila { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.rubros-fila::-webkit-scrollbar { display: none; }
.rubros a { padding: 12px 0 9px; border-bottom: 3px solid transparent; font-weight: 500; white-space: nowrap; text-decoration: none; }
.rubros a:hover { border-bottom-color: var(--linea); }
.rubros a[aria-current="page"] { border-bottom-color: var(--acento); }

/*
    Movimiento. Todo lo que anima vive bajo html.js, que se pone solo si hay JavaScript y la
    persona no pidió menos movimiento. Sin esa clase la página se ve completa y quieta.
      html.js        estado inicial (antes de animar)
      html.js.lista  la página cargó: entra la portada
      .visible       el elemento entró en pantalla
*/
:root { --suave: cubic-bezier(0.2, 0.8, 0.2, 1); }

/* --- Portada: el título entra palabra por palabra y las fotos se descubren --- */
.portada { overflow: hidden; }
.portada-grilla { display: grid; gap: 30px; padding-block: 34px 44px; }
.portada-titulo {
    margin-bottom: 18px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(54px, 15.5vw, 152px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--titulo);
}
/* Cada palabra va dentro de una ventana; el aire de abajo es para que no se corten las letras con cola */
.palabra { display: inline-block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; vertical-align: bottom; }
.palabra > span { display: inline-block; }
.portada-bajada { max-width: 40ch; font-size: 18px; color: var(--tinta-suave); }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* En celular el alta ya está en la franja de arriba: el segundo botón aparece recién en pantallas grandes */
.portada-alta { display: none; }

/* Mosaico: una ventana grande y dos chicas. Cada una muestra fotos enteras (4:5, sin agrandar
   ni mover) y cambia con un barrido corto; se turnan, así siempre hay algo moviéndose. */
.mosaico { display: grid; grid-template-columns: minmax(0, 2.06fr) minmax(0, 1fr); gap: 8px; }
.mosaico-ventana { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--niebla); }
/* La grande ocupa el alto de las dos chicas */
.mosaico-3 .mosaico-ventana:first-child { grid-row: 1 / span 2; aspect-ratio: auto; height: 100%; }
.mosaico-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaico-1 { grid-template-columns: minmax(0, 1fr); }
.mosaico-foto { position: absolute; inset: 0; display: block; }
.mosaico-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.mosaico-foto:not(.activa) { visibility: hidden; }

.js .mosaico-foto { visibility: visible; clip-path: inset(100% 0 0 0); }
.js .mosaico-foto.previa { z-index: 1; clip-path: inset(0); }
.js .mosaico-foto.activa { z-index: 2; clip-path: inset(0); transition: clip-path 0.7s var(--suave); }

.js .palabra > span { transform: translateY(112%); transition: transform 1s var(--suave); transition-delay: calc(var(--i, 0) * 110ms); }
.js .portada-bajada, .js .portada-acciones { opacity: 0; transform: translateY(14px); transition: opacity 0.7s 0.45s, transform 0.7s var(--suave) 0.45s; }
.js .mosaico-ventana { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--suave); transition-delay: calc(200ms + var(--i, 0) * 140ms); }
.js.lista .palabra > span, .js.lista .portada-bajada, .js.lista .portada-acciones { opacity: 1; transform: none; }
.js.lista .mosaico-ventana { clip-path: inset(0); }

/* --- Perchero: los destacados cuelgan de la barra y se recorren de costado --- */
.perchero { position: relative; margin-bottom: 64px; }
.perchero-cabeza { width: 100%; margin-bottom: 16px; }
.perchero-barra { position: relative; height: 4px; background: var(--marca); }
/* Cuánto del perchero ya se recorrió */
.perchero-avance { position: absolute; inset: 0 auto 0 0; width: calc(var(--avance, 0) * 100%); background: var(--acento); }

.perchero-riel {
    /* La primera prenda arranca alineada con el contenedor, aunque el riel ocupe todo el ancho */
    --sangria: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen)));
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 0 var(--margen) 14px var(--sangria);
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--sangria);
    scrollbar-width: thin;
}

.prenda { position: relative; flex: 0 0 min(66vw, 290px); padding-top: 28px; scroll-snap-align: start; transform-origin: 50% 0; }
.prenda::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 28px; margin-left: -1px; background: var(--marca); }

/* Con tienda.js: la sección queda fija y el scroll vertical mueve el riel (clase .con-pin) */
.perchero.con-pin .perchero-pin { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; height: 100svh; overflow: hidden; }
.perchero.con-pin .perchero-riel { width: max-content; overflow: visible; padding-right: var(--sangria); scroll-snap-type: none; will-change: transform; }
/* Las prendas crecen, pero nunca más de lo que entra en el alto de la pantalla */
.perchero.con-pin .prenda { flex-basis: min(clamp(250px, 25vw, 370px), calc((100svh - 250px) * 0.8)); }
/* Balanceo: cada prenda gira desde la barra según la velocidad del scroll, unas más que otras */
.js .prenda { transform: rotate(calc(var(--balanceo, 0deg) * var(--f, 1))); }
.prenda:nth-child(3n + 2) { --f: 0.65; }
.prenda:nth-child(3n) { --f: 1.3; }

/* --- Categorías: nombre grande y una tira de fotos que se desplaza de costado al bajar --- */
.rubros-tiras { margin-bottom: 64px; }
.rubro { display: block; padding-top: 18px; border-top: 1px solid var(--linea); text-decoration: none; }
.rubro-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.tira { display: block; overflow: hidden; margin-bottom: 30px; }
.tira-riel { display: flex; gap: 8px; width: max-content; margin-left: -140px; transform: translate3d(calc(var(--deriva, 0) * 1px), 0, 0); will-change: transform; }
.tira-riel img { width: auto; height: clamp(130px, 21vw, 250px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; background: var(--niebla); }
.rubro:hover .indice-nombre { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--acento); }

/* --- Cierre: el logo corre de derecha a izquierda, sin corte --- */
.cierre { overflow: hidden; margin-top: 30px; padding-block: 12px; }
.cierre-cinta { display: flex; width: max-content; }
.cierre-tanda { --aire: clamp(44px, 9vw, 130px); display: flex; align-items: center; gap: var(--aire); padding-right: var(--aire); }
.cierre img { width: auto; max-width: none; height: clamp(84px, 17vw, 220px); }
.cierre span { font-family: var(--display); font-size: clamp(84px, 19vw, 250px); line-height: 1; white-space: nowrap; color: var(--titulo); }
@media (prefers-reduced-motion: no-preference) {
    /* La cinta lleva dos tandas iguales: al correrse media cinta vuelve a empezar sin que se note */
    .cierre-cinta { animation: correr 38s linear infinite; }
}
@keyframes correr { to { transform: translate3d(-50%, 0, 0); } }

/* --- Tarjetas que se descubren al entrar en pantalla --- */
.js .grilla .articulo .articulo-foto { clip-path: inset(0 0 100% 0); transition: clip-path 0.95s var(--suave); transition-delay: calc(var(--orden, 0) * 80ms); }
.js .grilla .articulo .articulo-foto img { transform: scale(1.14); transition: transform 1.3s var(--suave), opacity 0.35s; transition-delay: calc(var(--orden, 0) * 80ms), 0s; }
.js .grilla .articulo > :not(.articulo-foto) { opacity: 0; transition: opacity 0.6s; transition-delay: calc(250ms + var(--orden, 0) * 80ms); }
.js .grilla .articulo.visible .articulo-foto { clip-path: inset(0); }
.js .grilla .articulo.visible .articulo-foto img { transform: none; }
.js .grilla .articulo.visible > :not(.articulo-foto) { opacity: 1; }

/* Segunda foto del producto al pasar el mouse (solo donde hay mouse) */
.articulo-foto .foto-alt { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s; }
.articulo-foto .foto-alt:not([src]) { display: none; }
@media (hover: hover) {
    .articulo:hover .foto-alt[src] { opacity: 1; }
}

/* --- Secciones --- */
.seccion { margin-bottom: 64px; }
.seccion-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.seccion-titulo { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 5vw, 40px); line-height: 1.1; color: var(--titulo); }

/* Nombre y cantidad de cada categoría (portada) */
.indice-nombre { font-family: var(--display); font-size: clamp(30px, 7vw, 60px); line-height: 1.05; color: var(--titulo); }
.indice-cant { font-stretch: 75%; font-weight: 500; color: var(--tinta-suave); white-space: nowrap; }

/* --- Tarjeta de artículo --- */
.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }

.articulo { display: block; text-decoration: none; }
.articulo-foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--niebla); }
.articulo-foto img { width: 100%; height: 100%; object-fit: cover; }
.articulo-sinfoto { display: grid; place-items: center; height: 100%; font-size: 14px; color: var(--tinta-suave); }

.etiqueta { position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: 999px; background: var(--acento); color: var(--acento-contraste); font-stretch: 75%; font-weight: 600; font-size: 13px; }

.articulo-codigo { margin-top: 10px; font-stretch: 75%; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; color: var(--tinta-suave); }
.articulo-nombre { margin: 10px 0 7px; font-size: 16px; font-weight: 500; line-height: 1.3; }
.articulo-codigo + .articulo-nombre { margin-top: 1px; }
.articulo:hover .articulo-nombre { text-decoration: underline; }

.articulo-variantes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.muestras { display: inline-flex; gap: 4px; }
.muestra { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.22); flex-shrink: 0; }
.curva { font-stretch: 75%; font-weight: 500; font-size: 14px; word-spacing: 3px; color: var(--tinta-suave); }

/* --- Listado --- */
.listado { padding-top: 36px; margin-bottom: 64px; }
.pagina-titulo { margin-bottom: 20px; font-family: var(--display); font-weight: 400; font-size: clamp(36px, 8vw, 64px); line-height: 1.02; color: var(--titulo); text-wrap: balance; }

.filtro { display: flex; gap: 8px; max-width: 520px; margin-bottom: 14px; }
.filtro input, .buscador input {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--papel);
    color: var(--tinta);
    font: inherit;
}
.filtro input:focus, .buscador input:focus { border-color: var(--tinta); outline: none; }
.listado-cuenta { margin-bottom: 24px; font-stretch: 75%; font-weight: 500; color: var(--tinta-suave); }

.vacio { padding-block: 56px; text-align: center; }
.vacio p { max-width: 40ch; margin: 0 auto 14px; font-size: 18px; color: var(--tinta-suave); }
.vacio .pagina-titulo { margin-bottom: 14px; }
.vacio .boton { margin-top: 8px; }

/* --- Ficha de producto --- */
.ficha { display: grid; gap: 22px; margin-bottom: 64px; }
/* Sin esto, un contenido ancho estira la columna y empuja toda la página de costado */
.ficha > * { min-width: 0; }

.ficha-fotos { position: relative; margin-inline: calc(var(--margen) * -1); }
.galeria { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--niebla); scroll-snap-align: center; }
.galeria-contador { position: absolute; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); font-stretch: 75%; font-weight: 600; font-size: 14px; }

.migas { display: flex; gap: 8px; margin-bottom: 10px; font-size: 14px; color: var(--tinta-suave); }

.ficha-nombre { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 7vw, 48px); line-height: 1.05; color: var(--titulo); text-wrap: balance; }
.ficha-codigo { margin-top: 8px; font-stretch: 75%; font-weight: 600; letter-spacing: 0.04em; color: var(--tinta-suave); }
.ficha-desc { max-width: 60ch; margin-top: 16px; }

.ficha-bloque { margin-top: 24px; }
.ficha-bloque h2 { margin-bottom: 10px; font-size: 16px; font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 10px; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel); color: inherit; font: inherit; font-size: 15px; cursor: pointer; }
.chip:hover { border-color: var(--tinta-suave); }
.chip[aria-pressed="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.chip .muestra { width: 18px; height: 18px; }

.talles { display: flex; flex-wrap: wrap; gap: 8px; }
.talle { min-width: 48px; padding: 9px 10px; border: 1px solid var(--linea); border-radius: 4px; font-stretch: 75%; font-weight: 600; text-align: center; }
.talle.sin-color, .talle.agotado { border-style: dashed; color: #b9b3bd; text-decoration: line-through; }
.chip.agotado { color: #a39ca8; text-decoration: line-through; }
.chip.agotado .muestra { opacity: 0.45; }
.etiqueta-agotado { background: rgba(255, 255, 255, 0.92); color: var(--tinta); }
.ficha-agotado { margin-top: 20px; padding: 12px 14px; border-radius: 4px; background: var(--niebla); font-weight: 500; }

.ficha-ayuda { margin-top: 10px; font-size: 14px; color: var(--tinta-suave); }
.ficha-venta { margin-top: 24px; font-weight: 500; }

/* En celular el botón de consulta queda siempre a mano */
.ficha-cta { position: sticky; bottom: 12px; margin-top: 18px; }

/* --- Precios (solo con cuenta) --- */
.articulo-precio { margin: -2px 0 7px; font-weight: 600; }
.ficha-precios { margin-top: 12px; }
.ficha-precios li { margin-bottom: 2px; }
.ficha-precios strong { font-size: 22px; font-weight: 600; }
.ficha-acceso { margin-top: 12px; padding: 12px 14px; border-radius: 4px; background: var(--niebla); }

/* --- Formularios: alta, ingreso y cuenta --- */
.pagina-form { max-width: 620px; padding-top: 36px; margin-bottom: 64px; }
.pagina-form .pagina-titulo { margin-bottom: 12px; }
.pagina-bajada { margin-bottom: 26px; font-size: 18px; color: var(--tinta-suave); }
.form-titulo { margin: 40px 0 16px; padding-top: 24px; border-top: 1px solid var(--linea); font-size: 20px; font-weight: 600; }

.formulario { display: grid; gap: 16px; }
.campo label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 15px; }
.campo input, .campo textarea, .campo select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cfc8d3;
    border-radius: 4px;
    background: var(--papel);
    color: var(--tinta);
    font: inherit;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.07); }
.campos-2 { display: grid; gap: 16px; }
.opcional { font-weight: 400; color: var(--tinta-suave); }
.campo-ayuda { font-size: 14px; color: var(--tinta-suave); }
.campo-trampa { position: absolute; left: -9999px; }
.formulario .boton { justify-self: start; }
.formulario .boton-grande { justify-self: stretch; }

.aviso { margin-bottom: 20px; padding: 12px 14px; border-radius: 4px; font-weight: 500; }
.aviso-error { background: #fdecec; color: #8f1d1d; }
.aviso-ok { background: #e8f5ec; color: #17603a; }

.form-salir { margin-top: 40px; }
.enlace { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* --- Armar el pedido (ficha de producto) --- */
.boton-secundario { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.boton-secundario:hover { filter: none; background: var(--niebla); }
.globo { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--acento); color: var(--acento-contraste); font-size: 13px; font-weight: 600; text-align: center; }

.ficha-aviso { margin: 18px 0 0; }
.ficha-consulta { margin-top: 14px; }
.pedir-scroll { overflow-x: auto; }
/* Un bloque por color; los talles van en fila y bajan de renglón si no entran */
.pedir-color { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.pedir-color legend { padding: 0; margin-bottom: 8px; font-weight: 500; }
.pedir-color .muestra, .pedir-packs .muestra { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; }
.pedir-talles { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.pedir-talle { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pedir-talle > span:first-child { font-stretch: 75%; font-weight: 600; font-size: 14px; color: var(--tinta-suave); }
.pedir-talle input, .pedir-packs input, .pedido-linea input { width: 58px; padding: 9px 4px; border: 1px solid #cfc8d3; border-radius: 4px; font: inherit; text-align: center; }
.pedir-talle input:focus, .pedir-packs input:focus, .pedido-linea input:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.07); }
.pedir-no { display: grid; place-items: center; width: 58px; min-height: 42px; font-size: 12px; line-height: 1.1; text-align: center; color: #b3adb8; }
.tabla-pedido small { color: var(--tinta-suave); }
.pedir-pack-detalle { margin: 0 0 10px; }
.pedir-packs li { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 280px; padding: 5px 0; }
.pedir-boton { margin-top: 22px; }

/* --- Mi pedido y pedidos enviados --- */
.pagina-pedido { max-width: 860px; padding-top: 36px; margin-bottom: 64px; }
.pedido-lista { border-top: 1px solid var(--linea); }
.pedido-grupo { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.pedido-foto img { width: 84px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: var(--niebla); }
.pedido-detalle h2 { font-size: 17px; font-weight: 600; }
.pedido-detalle h2 a { text-decoration: none; }
.pedido-color { margin-bottom: 8px; color: var(--tinta-suave); }
.pedido-linea { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 5px 0; }
.pedido-talle { flex: 1 1 130px; }
.pedido-cant { font-stretch: 75%; color: var(--tinta-suave); }
.pedido-importe { min-width: 96px; font-weight: 600; text-align: right; }
.pedido-pie { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 18px 0 30px; }
.pedido-total { font-size: 18px; text-align: right; }
.pedido-total .campo-ayuda { display: block; }
.pedido-enviar { max-width: 620px; }
.pedido-envio, .pedido-nota { margin: 18px 0; }
/* Envío: cómo quiere recibir el pedido la clienta (core/vistas/envio_campos.php) */
.envio { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.envio legend { float: left; width: 100%; margin-bottom: 4px; padding: 24px 0 0; }
.envio legend + * { clear: both; }
.envio .opcion { margin-bottom: 8px; }
.envio [hidden] { display: none; }
.pedido-envio { display: grid; gap: 8px; max-width: 620px; }
.pedido-envio div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.pedido-envio dt { color: var(--tinta-suave); }
.pedido-envio dd { margin: 0; overflow-wrap: anywhere; }
.pedido-consulta { margin-top: 28px; }

/* Recorrido del pedido: los pasos son una secuencia real */
.pasos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 22px; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; padding: 7px 14px; border: 1px solid var(--linea); border-radius: 999px; font-size: 15px; color: var(--tinta-suave); }
.pasos li::before { content: counter(paso) ". "; }
.pasos li.hecho { border-color: var(--tinta-suave); color: var(--tinta); }
.pasos li.actual { border-color: var(--marca); background: var(--marca); color: var(--marca-contraste); font-weight: 600; }

.tabla-pedido { width: 100%; border-collapse: collapse; }
.tabla-pedido th, .tabla-pedido td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linea); text-align: left; }
.tabla-pedido thead th { font-stretch: 75%; font-weight: 600; font-size: 14px; color: var(--tinta-suave); }
.tabla-pedido .num { text-align: right; white-space: nowrap; }
.tabla-pedido tfoot td { border-bottom: 0; font-weight: 600; }
.tabla-pedido tfoot .fila-suave td { padding-block: 6px 0; font-weight: 400; color: var(--tinta-suave); }
.en-pack { padding: 1px 8px; border-radius: 999px; background: var(--niebla); font-stretch: 75%; font-size: 13px; }

.mis-pedidos { border-top: 1px solid var(--linea); }
.mis-pedidos a { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.mis-pedidos-num { font-weight: 600; }
.mis-pedidos-dato { flex: 1; color: var(--tinta-suave); }
.mis-pedidos a:hover .mis-pedidos-num { text-decoration: underline; }
.estado { padding: 3px 12px; border-radius: 999px; background: var(--niebla); font-size: 14px; font-weight: 500; white-space: nowrap; }
.estado-nuevo { background: #fff3d6; }
.estado-conforme { background: #e8f5ec; color: #17603a; }
.estado-cancelado { background: #fdecec; color: #8f1d1d; }

/* --- Páginas de información (quiénes somos, talles, cambios, contacto) --- */
.pagina-info { max-width: 760px; padding-top: 36px; margin-bottom: 64px; }
.texto { font-size: 18px; line-height: 1.6; }
.texto > * + * { margin-top: 1em; }
.texto h2 { margin-top: 1.7em; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 5vw, 30px); line-height: 1.15; color: var(--titulo); }
.texto ul { list-style: disc; padding-left: 1.2em; }
.texto li + li { margin-top: 0.35em; }
.tabla-scroll { overflow-x: auto; }
.texto table { width: 100%; border-collapse: collapse; font-size: 16px; }
.texto th, .texto td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.texto th { font-stretch: 75%; font-weight: 600; font-size: 14px; color: var(--tinta-suave); }
.pagina-info > p .boton { margin-top: 26px; }

.contacto-datos { margin-top: 26px; border-top: 1px solid var(--linea); }
.contacto-datos li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--linea); font-size: 18px; overflow-wrap: anywhere; }
.contacto-datos span { font-stretch: 75%; font-weight: 600; font-size: 14px; color: var(--tinta-suave); padding-top: 4px; }

/* --- Pie --- */
.pie { margin-top: 80px; padding-block: 44px 26px; background: var(--niebla); }
.pie-grilla { display: grid; gap: 28px; }
.pie-marca { margin-bottom: 6px; font-family: var(--display); font-size: 30px; line-height: 1.1; color: var(--titulo); }
.pie-marca img { max-height: 64px; width: auto; margin-bottom: 10px; }
.pie-texto { max-width: 32ch; color: var(--tinta-suave); }
.pie-cuenta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-weight: 500; }
.pie h2 { margin-bottom: 10px; font-size: 16px; font-weight: 600; }
.pie li { margin-bottom: 6px; }
.pie-legal { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--tinta-suave); }

/* --- Celulares angostos: la cabecera con sesión iniciada lleva logo, "Mi pedido" y "Mi cuenta" --- */
@media (max-width: 480px) {
    .cabecera-fila { gap: 12px; }
    .marca img { max-height: 42px; }
    .accesos { gap: 12px; font-size: 15px; }
}
/* En los celulares más angostos el WhatsApp de la cabecera pasa al menú */
@media (max-width: 379px) {
    .cabecera-wa { display: none; }
}

/* --- Pantallas medianas y grandes --- */
@media (min-width: 700px) {
    :root { --margen: 32px; }
    .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
    .pie-grilla { grid-template-columns: 1.5fr 1fr 1fr; }
    .campos-2 { grid-template-columns: 1fr 1fr; }
    .boton.oculto-movil { display: inline-flex; }
    .desde-tablet { display: inline; }

    .buscador { display: flex; width: min(340px, 34vw); }
    .buscador input { border-radius: 999px 0 0 999px; border-right: 0; }
    .buscador button { display: grid; place-items: center; padding: 0 14px 0 10px; border: 1px solid var(--linea); border-left: 0; border-radius: 0 999px 999px 0; background: var(--papel); color: var(--tinta-suave); cursor: pointer; }
    .buscador:focus-within input, .buscador:focus-within button { border-color: var(--tinta); }
}

/* Pantallas de 1000 px o más: su diseño vive aparte, en tienda_escritorio.css (se carga solo ahí).
   Lo que existe únicamente en escritorio lleva esta clase y acá no se muestra. */
.solo-escritorio { display: none; }

/* --- Opciones para elegir una (motivo del formulario de contacto) --- */
.opciones { min-width: 0; margin: 0; padding: 0; border: 0; }
.opciones legend { padding: 0; margin-bottom: 10px; font-weight: 500; font-size: 15px; }
.opcion { display: inline-block; margin: 0 6px 8px 0; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion span { display: inline-block; padding: 10px 16px; border: 1px solid #cfc8d3; border-radius: 999px; font-size: 15px; }
.opcion:hover span { border-color: var(--tinta); }
.opcion input:checked + span { border-color: var(--marca); background: var(--marca); color: var(--marca-contraste); }
.opcion input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }

/* --- Instagram: invitación a seguir, armada como el encabezado de un perfil con su muro --- */
.insta { padding-block: 48px 8px; }
.insta-grilla { display: grid; gap: 26px; }
.insta-titulo { margin-bottom: 20px; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 9vw, 44px); line-height: 1.02; color: var(--titulo); }
.insta-bio { display: flex; align-items: flex-start; gap: 16px; }
/* El aro de colores de las historias */
.insta-avatar { flex-shrink: 0; width: 84px; height: 84px; padding: 3px; border-radius: 50%; background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.insta-avatar img, .insta-avatar span { display: grid; place-items: center; width: 100%; height: 100%; border: 3px solid var(--papel); border-radius: 50%; background: var(--papel); object-fit: cover; font-family: var(--display); font-size: 34px; }
.insta-datos { min-width: 0; }
.insta-usuario { font-weight: 600; font-size: 18px; overflow-wrap: anywhere; }
.insta-nombre { font-weight: 500; color: var(--tinta-suave); }
.insta-texto { max-width: 34ch; margin-top: 6px; }
.insta-seguir { width: 100%; margin-top: 20px; }
.insta-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.insta-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 18%; background: var(--niebla); }

/* --- Confirmación del pedido por la clienta --- */
.aviso-pendiente { background: #fff3d6; color: #6b4a00; }
.pedido-confirmar { max-width: 620px; margin: 22px 0 8px; }
.pedido-confirmar .campo-ayuda { margin-top: 8px; }

/* --- Asistente de ayuda: burbuja abajo a la derecha con las preguntas frecuentes.
       Se muestra en escritorio (tienda_escritorio.css); en celular solo si se habilita en el panel (.en-celular) --- */
.ayuda { display: none; position: fixed; right: 14px; bottom: 14px; z-index: 55; flex-direction: column; align-items: flex-end; gap: 10px; }
.ayuda.en-celular { display: flex; }
.ayuda-boton { display: inline-flex; align-items: center; gap: 8px; padding: 13px; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel); color: var(--tinta); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); font: inherit; font-weight: 600; cursor: pointer; }
.ayuda-boton span { display: none; }
.ayuda.abierta .ayuda-boton { display: none; }

.ayuda-panel { display: flex; flex-direction: column; width: min(360px, calc(100vw - 28px)); max-height: min(540px, calc(100vh - 100px)); border: 1px solid var(--linea); border-radius: 16px; background: var(--papel); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18); overflow: hidden; }
.ayuda-panel[hidden] { display: none; }
.ayuda-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--linea); }
.ayuda-cerrar { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--tinta); cursor: pointer; }
.ayuda-cerrar:hover { background: var(--niebla); }
.ayuda-chat { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }

.ayuda-msj { max-width: 90%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.ayuda-msj.bot { align-self: flex-start; background: var(--niebla); border-bottom-left-radius: 4px; }
.ayuda-msj.yo { align-self: flex-end; background: var(--marca); color: var(--marca-contraste); border-bottom-right-radius: 4px; }
.ayuda-msj > * + * { margin-top: 8px; }
.ayuda-msj ul { list-style: disc; padding-left: 1.15em; }
.ayuda-msj li + li { margin-top: 3px; }
.ayuda-ir { display: inline-block; font-weight: 600; }

.ayuda-opciones { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ayuda-opcion { padding: 8px 14px; border: 1px solid #cfc8d3; border-radius: 16px; background: none; color: var(--tinta); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
.ayuda-opcion:hover { border-color: var(--tinta); }
.ayuda-persona { font-weight: 600; }

/* El acceso del que habla la respuesta late unos segundos */
.ayuda-destello { outline: 3px solid var(--acento); outline-offset: 4px; border-radius: 999px; animation: destello 1.3s ease-in-out 3; }
@keyframes destello { 50% { outline-offset: 10px; outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
    .ayuda-destello { animation: none; }
}
/* En la ficha, en celular, el botón de consulta queda fijo abajo: la burbuja va por encima */
@media (max-width: 999px) {
    body:has(.ficha-cta) .ayuda { bottom: 88px; }
}