:root {
    /* Paleta botánica: crema verdoso, verde bosque, salvia y rosa de flor */
    --papel: #f1f0e4;
    --tinta: #1f3b2c;
    --tinta-suave: #5b7262;
    --acento: #c95a6b;
    --hoja: #6f9a72;
    --borde: #d6dbc4;
    --sombra: 31, 59, 44;  /* verde bosque en RGB, para sombras */
    --serif: "Fraunces", Georgia, serif;
    --sans: "Work Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--papel) url("../img/fondo-flores.svg") repeat;
    background-size: 440px;
    color: var(--tinta);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Menú superior (fijo al bajar) ---------- */
.menu {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    gap: clamp(1.1rem, 3vw, 2.6rem);
    padding: 1rem;
    overflow-x: auto;              /* si algún día no entran, se deslizan */
    scrollbar-width: none;
    background: rgba(241, 240, 228, .92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid var(--borde);
}
.menu::-webkit-scrollbar { display: none; }
/* Centrado que no corta el primer ítem si hay que deslizar */
.menu > :first-child { margin-left: auto; }
.menu > :last-child { margin-right: auto; }

.menu-item {
    flex: none;
    font: 500 .95rem var(--sans);
    letter-spacing: .02em;
    color: var(--tinta);
    text-decoration: none;
    padding: .15rem 0;
    border-bottom: 1.5px solid transparent;
    transition: color .2s, border-color .2s;
}
a.menu-item:hover { color: var(--acento); }
.menu-item.activo { color: var(--acento); border-bottom-color: currentColor; }
.menu-item.proximamente { color: var(--tinta-suave); opacity: .5; cursor: default; }
a.menu-item:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }

/* ---------- Cabecera ---------- */
.cabecera {
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1rem clamp(2rem, 5vw, 3.5rem);
}

.nombre {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(3.2rem, 13vw, 10rem);
    font-weight: 700;
    font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    letter-spacing: -0.03em;
    line-height: 1;
}

/* Ramita entre el nombre y "Galería" */
.ramita {
    display: block;
    width: clamp(150px, 22vw, 220px);
    height: auto;
    margin: clamp(.6rem, 1.5vw, 1rem) auto 0;
    color: var(--hoja);
}
.ramita .flor { color: var(--acento); }

.bajada {
    margin: .6rem 0 0;
    font-size: 0.8rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* ---------- Filtros ---------- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem 2.5rem;
}

.filtro {
    font: 500 0.9rem var(--sans);
    color: var(--tinta);
    background: transparent;
    border: 1px solid var(--tinta);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.filtro:hover { background: rgba(var(--sombra), .08); }
.filtro.activo { background: var(--tinta); color: var(--papel); }
.filtro:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Galería (mampostería con columnas) ---------- */
/* Grilla: el orden se lee de izquierda a derecha. galeria.js calcula
   cuántas filas de 4px ocupa cada obra (grid-row-end) para encastrarlas. */
.galeria {
    --gap: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-auto-rows: 4px;
    column-gap: var(--gap);
    align-items: start;
    padding: 0 clamp(1rem, 4vw, 3rem) 4rem;
    max-width: 1600px;
    margin: 0 auto;
}

.obra {
    margin: 0;
    padding-bottom: var(--gap);
}
.obra[hidden] { display: none; }

.obra a {
    display: block;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(var(--sombra), .1), 0 8px 22px -12px rgba(var(--sombra), .35);
}
.obra a:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

.obra img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .5s ease;
}
.obra a:hover img { transform: scale(1.03); }

.obra figcaption {
    font-family: var(--serif);
    font-size: 1rem;
    padding: 0.55rem 0.1rem 0;
    color: var(--tinta-suave);
}

.aviso { text-align: center; color: var(--tinta-suave); padding: 2rem 1rem; }

/* ---------- Visor (lightbox) ---------- */
.visor {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(16, 30, 22, .95);
    color: var(--papel);
}
.visor[open] { display: flex; align-items: center; justify-content: center; }
.visor::backdrop { background: transparent; }

.visor figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100vw - 8rem);
}
/* Caja fija: miniatura y completa ocupan exactamente el mismo lugar */
.visor img {
    width: 100%;
    height: calc(100vh - 7rem);
    object-fit: contain;
}
/* La miniatura se estira mientras carga la completa: se suaviza para que no se note */
.visor img { transition: filter .3s; }
.visor.cargando img { filter: blur(2px); }
.visor figcaption { text-align: center; padding-top: 1rem; }
.visor-titulo { display: block; font-family: var(--serif); font-size: 1.3rem; }
.visor-desc { display: block; font-size: .9rem; opacity: .75; margin-top: .25rem; }

.visor button {
    background: none;
    border: 0;
    color: var(--papel);
    cursor: pointer;
    line-height: 1;
}
.visor-cerrar { position: absolute; top: .75rem; right: 1.25rem; font-size: 2.6rem; }
.visor-nav { font-size: 3.5rem; padding: 1rem; opacity: .7; }
.visor-nav:hover, .visor-cerrar:hover { opacity: 1; color: var(--acento); }

@media (max-width: 640px) {
    .menu { padding: .85rem 1rem; gap: .95rem; }
    .menu-item { font-size: .86rem; }
    .menu-item.proximamente { display: none; }   /* en el celular no aportan */
    .menu-cuenta {                                /* siempre visible, aunque el menú se deslice */
        position: sticky; right: 0;
        margin-left: auto;
        padding-left: .9rem;
        background: rgba(241, 240, 228, .97);
    }
    .galeria { --gap: .75rem; grid-template-columns: repeat(2, 1fr); }
    .obra figcaption { font-size: .85rem; }
    .visor figure { width: 100vw; padding: 0 .5rem; }
    .visor img { height: calc(100vh - 10rem); }
    .visor-nav { position: absolute; bottom: .5rem; font-size: 2.8rem; }
    .visor-prev { left: 1rem; }
    .visor-next { right: 1rem; }
}

/* ---------- Títulos de sección (páginas que no son la galería) ---------- */
.nombre-seccion { font-size: clamp(2.8rem, 9vw, 6rem); }

/* ---------- Comisiones ---------- */
.comisiones {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem) 4rem;
}
.intro {
    max-width: 38rem;
    margin: 0 auto 2.5rem;
    text-align: center;
    color: var(--tinta-suave);
    line-height: 1.6;
}

.form-comision {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2rem;
    align-items: start;
}
.form-campos { display: grid; gap: 1.5rem; }

/* Cada bloque, una "tarjeta" de papel sobre el fondo de flores */
.bloque {
    margin: 0;
    padding: 1.5rem clamp(1rem, 3vw, 1.75rem) 1.75rem;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: rgba(255, 255, 250, .82);
    box-shadow: 0 6px 24px -18px rgba(var(--sombra), .5);
    min-width: 0;
}
.bloque legend {
    float: left;               /* evita que el legend corte el borde */
    width: 100%;
    margin-bottom: 1rem;
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 600;
}
.bloque legend + * { clear: both; }

.campo { display: grid; gap: .4rem; margin-top: 1rem; }
.campo:first-of-type { margin-top: 0; }
.campo-label { font-weight: 500; font-size: .95rem; }
.opcional { font-weight: 400; color: var(--tinta-suave); }
.ayuda { margin: .3rem 0 0; font-size: .85rem; color: var(--tinta-suave); }

:is(.comisiones, .auth) input[type="text"],
:is(.comisiones, .auth) input[type="email"],
:is(.comisiones, .auth) input[type="password"],
:is(.comisiones, .auth) input[type="date"],
.comisiones textarea {
    width: 100%;
    font: inherit;
    color: var(--tinta);
    background: #fffffb;
    border: 1px solid #c9cfb6;
    border-radius: 8px;
    padding: .7rem .8rem;
    transition: border-color .2s, box-shadow .2s;
}
.comisiones textarea { resize: vertical; line-height: 1.5; }
:is(.comisiones, .auth) input:focus, .comisiones textarea:focus {
    outline: none;
    border-color: var(--hoja);
    box-shadow: 0 0 0 3px rgba(111, 154, 114, .25);
}
:is(.comisiones, .auth) [aria-invalid="true"] { border-color: var(--acento) !important; }
.campo-error { margin: .4rem 0 0; color: #b23a4e; font-size: .88rem; }

/* Tipos de comisión: tarjetas elegibles */
.tipos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}
.tipo {
    position: relative;
    display: grid;
    gap: .2rem;
    padding: 1rem .9rem;
    border: 1.5px solid #c9cfb6;
    border-radius: 12px;
    background: #fffffb;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s, background .2s, transform .2s;
}
.tipo:hover { border-color: var(--hoja); transform: translateY(-1px); }
.tipo input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-nombre { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.tipo-detalle { font-size: .82rem; color: var(--tinta-suave); }
.tipo-precio { margin-top: .4rem; font-weight: 500; font-size: 1.05rem; color: var(--tinta); }
.tipo:has(input:checked) {
    border-color: var(--tinta);
    background: #e9eedc;
    box-shadow: inset 0 0 0 1px var(--tinta);
}
.tipo:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Personajes extra */
.extras {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--borde);
}
.extras .ayuda { margin: .15rem 0 0; }
.contador { display: flex; align-items: center; border: 1px solid #c9cfb6; border-radius: 999px; background: #fffffb; }
.contador button {
    width: 2.4rem; height: 2.4rem;
    border: 0; background: none; cursor: pointer;
    font-size: 1.2rem; color: var(--tinta); border-radius: 50%;
}
.contador button:hover { background: rgba(var(--sombra), .08); }
.contador input {
    width: 2.2rem; text-align: center; border: 0; background: none;
    font: 500 1.05rem var(--sans); color: var(--tinta);
    -moz-appearance: textfield;
}
.contador input::-webkit-inner-spin-button,
.contador input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Zona de imágenes de referencia */
.zona-archivos {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .35rem;
    padding: 1.6rem 1rem;
    border: 1.5px dashed var(--hoja);
    border-radius: 12px;
    background: rgba(233, 238, 220, .5);
    text-align: center;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.zona-archivos:hover, .zona-archivos.arrastrando { background: #e2ead2; border-color: var(--tinta); }
.zona-archivos input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.zona-archivos:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.zona-texto strong { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--hoja); text-underline-offset: 3px; }

.previas {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .6rem;
    margin: .9rem 0 0;
    padding: 0;
}
.previas:empty { display: none; }
.previas li { position: relative; aspect-ratio: 1; }
.previas img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--borde);
}
.previas .quitar {
    position: absolute; top: -6px; right: -6px;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    border: 0; cursor: pointer; line-height: 1;
    background: var(--tinta); color: var(--papel); font-size: 1rem;
}
.previas .quitar:hover { background: var(--acento); }

/* Checkbox de fecha límite */
.check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; line-height: 1.4; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: .1rem; accent-color: var(--tinta); }
.campo-deadline { margin-top: 1rem; max-width: 16rem; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dos-columnas .campo { margin-top: 0; }

/* Campo trampa para bots: fuera de la vista de las personas */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Resumen con el total, fijo al costado al bajar */
.resumen {
    position: sticky;
    top: 5rem;
    padding: 1.5rem;
    border-radius: 14px;
    background: var(--tinta);
    color: var(--papel);
    box-shadow: 0 12px 30px -16px rgba(var(--sombra), .7);
}
.resumen h2 { margin: 0 0 1rem; font-family: var(--serif); font-weight: 600; font-size: 1.35rem; }
.resumen dl { margin: 0 0 1.25rem; display: grid; gap: .55rem; }
.resumen .linea { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.resumen .linea[hidden] { display: none; }
.resumen dt { opacity: .85; }
.resumen dd { margin: 0; white-space: nowrap; }
.resumen .total {
    margin-top: .4rem; padding-top: .8rem;
    border-top: 1px solid rgba(241, 240, 228, .25);
    font-size: 1.15rem; font-weight: 500;
}
.resumen .total dt { opacity: 1; }
.resumen .nota { color: rgba(241, 240, 228, .7); }

.boton {
    display: inline-block;
    width: 100%;
    padding: .85rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--acento);
    color: #fff;
    font: 500 1rem var(--sans);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter .2s, transform .2s;
}
.boton:hover { filter: brightness(1.08); transform: translateY(-1px); }
.boton:focus-visible { outline: 2px solid var(--papel); outline-offset: 3px; }
.nota { margin: .8rem 0 0; font-size: .8rem; text-align: center; color: var(--tinta-suave); }

.alerta {
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    padding: .9rem 1.2rem;
    border-radius: 10px;
    border: 1px solid #e4b3bb;
    background: #fbecee;
    color: #8c2b3c;
}
.alerta p { margin: .2rem 0; }

/* Confirmación después de enviar */
.confirmacion {
    max-width: 34rem;
    margin: 0 auto;
    padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
    text-align: center;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: rgba(255, 255, 250, .9);
    line-height: 1.6;
}
.confirmacion h2 { margin: 0 0 .5rem; font-family: var(--serif); font-size: 1.8rem; }
.confirmacion-datos {
    display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem;
    margin: 1.25rem 0; text-align: left;
}
.confirmacion-datos dt { color: var(--tinta-suave); }
.confirmacion-datos dd { margin: 0; font-weight: 500; }
.confirmacion .boton { width: auto; padding-inline: 1.8rem; margin-top: 1rem; }

@media (max-width: 860px) {
    .form-comision { grid-template-columns: 1fr; }
    .resumen { position: static; }
}
@media (max-width: 560px) {
    .tipos { grid-template-columns: 1fr; }
    .tipo { grid-template-columns: 1fr auto; text-align: left; align-items: center; }
    .tipo-nombre { grid-column: 1; }
    .tipo-detalle { grid-column: 1; }
    .tipo-precio { grid-column: 2; grid-row: 1 / 3; margin: 0; }
    .dos-columnas { grid-template-columns: 1fr; }
}

/* ---------- Menú: acceso a la cuenta ---------- */
.menu-cuenta {
    padding-left: clamp(1.1rem, 3vw, 2.6rem);
    border-left: 1px solid var(--borde);
    border-bottom: 0;
}
.menu-cuenta.activo { border-bottom: 0; text-decoration: underline; text-underline-offset: 6px; }

/* ---------- Avisos de una sola vez (flash) ---------- */
.avisos { max-width: 40rem; margin: -1rem auto 2rem; padding: 0 1rem; display: grid; gap: .6rem; }
.aviso-flash {
    padding: .85rem 1.1rem;
    border-radius: 10px;
    border: 1px solid var(--borde);
    background: #fffffb;
    line-height: 1.5;
}
.aviso-flash p { margin: 0; }
.aviso-flash a { display: inline-block; margin-top: .35rem; color: var(--tinta); font-weight: 500; }
.aviso-ok    { border-color: #b9cfae; background: #eef5e6; }
.aviso-info  { border-color: #c9d3c0; background: #f4f6ee; }
.aviso-error { border-color: #e4b3bb; background: #fbecee; color: #8c2b3c; }

/* ---------- Botones extra ---------- */
.boton-secundario {
    background: transparent;
    color: var(--tinta);
    box-shadow: inset 0 0 0 1.5px var(--tinta);
}
.boton-secundario:hover { background: rgba(var(--sombra), .07); filter: none; }
.boton-chico { width: auto; padding: .6rem 1.4rem; margin-top: .75rem; }

/* ---------- Ingresar / Crear cuenta / Recuperar ---------- */
.auth { padding: 0 1rem 4rem; display: grid; justify-items: center; gap: 1rem; }
.tarjeta-auth {
    width: 100%;
    max-width: 26rem;
    padding: 1.75rem clamp(1.1rem, 4vw, 2rem);
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: rgba(255, 255, 250, .9);
    box-shadow: 0 6px 24px -18px rgba(var(--sombra), .5);
}
.tarjeta-auth .campo:first-of-type { margin-top: 0; }
.tarjeta-auth .alerta { margin-bottom: 1.25rem; }
.tarjeta-auth .boton { margin-top: 1.5rem; }
.tarjeta-auth.reenviar { padding: 1rem; }
.tarjeta-auth.reenviar .boton { margin-top: 0; }
.ayuda-arriba { margin: 0 0 1.25rem; color: var(--tinta-suave); line-height: 1.5; }
.auth-pie { margin: 1.25rem 0 0; text-align: center; font-size: .92rem; color: var(--tinta-suave); }
:is(.auth, .cuenta, .comisiones, .texto-legal) a:not(.boton) { color: var(--tinta); text-underline-offset: 3px; }

/* ---------- Mi cuenta ---------- */
.cuenta { max-width: 52rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) 4rem; display: grid; gap: 1.5rem; }
.cuenta-datos { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cuenta-datos .boton { width: auto; padding: .6rem 1.3rem; }
.cuenta-hola { margin: 0; font-size: 1.15rem; }
.bloque-titulo { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }

.pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pedido {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .9rem 1rem; border: 1px solid var(--borde); border-radius: 10px; background: #fffffb;
}
.pedido p { margin: 0; }
.pedido-titulo { font-weight: 500; }
.pedido-lado { display: grid; justify-items: end; gap: .3rem; flex: none; }
.pedido-precio { font-size: .9rem; color: var(--tinta-suave); }
.estado {
    font-size: .8rem; font-weight: 500; padding: .2rem .65rem; border-radius: 999px;
    background: #e9eedc; color: var(--tinta);
}
.estado-pendiente  { background: #f6ecd2; color: #7a5a14; }
.estado-rechazada,
.estado-cancelada  { background: #f3e0e3; color: #8c2b3c; }
.estado-completada { background: #dcebd5; color: #2c5a2e; }

/* ---------- Comisiones sin sesión: precios + invitación ---------- */
.precios {
    max-width: 48rem; margin: 0 auto 2rem;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
}
.tipo-fijo { cursor: default; background: rgba(255, 255, 250, .9); }
.tipo-fijo:hover { transform: none; border-color: #c9cfb6; }
.precios-extra { grid-column: 1 / -1; margin: .25rem 0 0; text-align: center; font-size: .88rem; color: var(--tinta-suave); }
.invitacion { max-width: 34rem; margin: 0 auto; text-align: center; }
.invitacion-botones { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }
.invitacion-botones .boton { width: auto; padding-inline: 1.6rem; }
.pide-como { margin-top: 1rem; }

/* ---------- Términos de uso ---------- */
.texto-legal { max-width: 42rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem) 4rem; line-height: 1.7; }
.texto-legal h2 { font-family: var(--serif); font-size: 1.3rem; margin: 2rem 0 .5rem; }
.aviso-borrador {
    padding: .7rem 1rem; border-radius: 10px; text-align: center;
    background: #f6ecd2; color: #7a5a14; border: 1px dashed #d8bf7a; font-weight: 500;
}
.pie a { color: inherit; }

@media (max-width: 560px) {
    .precios { grid-template-columns: 1fr; }
    .pedido { flex-direction: column; align-items: flex-start; }
    .pedido-lado { justify-items: start; grid-auto-flow: column; align-items: center; }
}

/* ---------- Actividad ---------- */
.actividad { max-width: 52rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) 4rem; display: grid; gap: 1.5rem; }
.actividad .intro { margin-bottom: 0; }

.resumen-cola { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: .75rem; }
.dato {
    display: grid; align-content: center; justify-items: center; gap: .3rem;
    padding: 1.1rem .75rem; text-align: center;
    border: 1px solid var(--borde); border-radius: 14px; background: rgba(255, 255, 250, .9);
}
.dato-num { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1; }
.dato-txt { font-size: .85rem; color: var(--tinta-suave); line-height: 1.3; }
.dato-abiertas { background: #eef5e6; border-color: #b9cfae; }
.dato-abiertas .dato-num { color: #2c5a2e; font-size: 1.6rem; }
.dato-cerradas { background: #fbecee; border-color: #e4b3bb; }
.dato-cerradas .dato-num { color: #8c2b3c; font-size: 1.6rem; }
.cupos { display: flex; gap: .3rem; margin: .2rem 0 .1rem; }
.cupo { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--hoja); background: #fffffb; }
.cupo.ocupado { background: var(--hoja); }
.dato-cerradas .cupo { border-color: #c98a95; }
.dato-cerradas .cupo.ocupado { background: #c98a95; }

/* Trabajando ahora */
.actual-tipo { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.etiqueta-tuya {
    font: 500 .75rem var(--sans); padding: .15rem .6rem; border-radius: 999px;
    background: var(--acento); color: #fff;
}
.fases { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; }
.fases li {
    flex: 1; position: relative; padding-top: 1.6rem; text-align: center;
    font-size: .85rem; color: var(--tinta-suave);
}
.fases li::before {                       /* puntito de la fase */
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 1.05rem; height: 1.05rem; border-radius: 50%; z-index: 1;
    border: 2px solid #c9cfb6; background: #fffffb; box-sizing: border-box;
}
.fases li::after {                        /* línea que une las fases */
    content: ""; position: absolute; top: .45rem; left: -50%; width: 100%; height: 2px; background: #c9cfb6;
}
.fases li:first-child::after { display: none; }
.fases .fase-hecha::before { background: var(--hoja); border-color: var(--hoja); }
.fases .fase-hecha::after, .fases .fase-actual::after { background: var(--hoja); }
.fases .fase-actual { color: var(--tinta); font-weight: 600; }
.fases .fase-actual::before { background: var(--acento); border-color: var(--acento); box-shadow: 0 0 0 4px rgba(201, 90, 107, .2); }

/* Cola y tus pedidos */
.cola { margin: 0; padding: 0; list-style: none; counter-reset: cola; display: grid; gap: .5rem; }
.cola li {
    counter-increment: cola;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .75rem 1rem; border: 1px solid var(--borde); border-radius: 10px; background: #fffffb;
}
.cola-tipo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cola-tipo::before {
    content: counter(cola); display: grid; place-items: center; flex: none;
    width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #e9eedc; font-size: .8rem; font-weight: 600;
}
.cola li.es-mia { border-color: var(--acento); box-shadow: inset 3px 0 0 var(--acento); }
.estado-en-proceso { background: #dcebd5; color: #2c5a2e; }
.estado-en-espera  { background: #eceee4; color: var(--tinta-suave); }
.nota-privacidad { margin-top: .9rem; font-size: .8rem; }

.mis-lugares { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mis-lugares li {
    display: grid; gap: .15rem; padding: .75rem 1rem; border-radius: 10px;
    background: #fbf1f3; border: 1px solid #ecc9d0;
}
.mis-lugares span { font-size: .9rem; color: var(--tinta-suave); }

/* Ritmo */
.ritmo { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.ritmo div { padding: .9rem 1rem; border-radius: 10px; background: #f4f6ee; }
.ritmo dt { font-size: .82rem; color: var(--tinta-suave); margin-bottom: .3rem; }
.ritmo dd { margin: 0; font-weight: 500; }
.actividad-cta { text-align: center; margin: 0; }

@media (max-width: 720px) {
    .resumen-cola { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .resumen-cola .dato:first-child { grid-column: 1 / -1; }
    .resumen-cola .dato { padding: .9rem .4rem; }
    .resumen-cola .dato-num { font-size: 1.6rem; }
    .resumen-cola .dato-txt { font-size: .75rem; }
    .ritmo { grid-template-columns: 1fr; }
    .fases li { font-size: .72rem; }
}

/* ---------- Sobre mí ---------- */
.sobre-mi {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem) 4rem;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
/* Foto con forma de ventana en arco, sobre una "hoja" verde desplazada */
.retrato { margin: 0; position: sticky; top: 5.5rem; }
.retrato::before {
    content: ""; position: absolute; inset: 0;
    transform: translate(14px, 14px);
    border-radius: 999px 999px 18px 18px;
    background: #dfe8d2; border: 1px solid #c4d3b6;
}
.retrato img {
    position: relative;
    display: block; width: 100%; height: auto;
    border-radius: 999px 999px 18px 18px;
    box-shadow: 0 14px 34px -18px rgba(var(--sombra), .6);
}

.bio { line-height: 1.75; font-size: 1.05rem; }
.bio p { margin: 0 0 1.1rem; }
.bio-nombre { margin: 0 0 .6rem; font-family: var(--serif); font-size: 2.4rem; font-weight: 600; line-height: 1.1; }
.bio-datos, .materiales { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.bio-datos li {
    font-size: .85rem; padding: .25rem .8rem; border-radius: 999px;
    background: rgba(255, 255, 250, .9); border: 1px solid var(--borde); color: var(--tinta-suave);
}
.materiales { margin: -.2rem 0 1.4rem; }
.materiales li {
    font-size: .85rem; padding: .25rem .8rem; border-radius: 999px;
    background: #fbf1f3; border: 1px solid #ecc9d0; color: #8c3d4c;
}
.bio-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; }
.bio-acciones .boton { width: auto; padding-inline: 1.5rem; }
.bio-instagram { color: var(--tinta); text-decoration: none; font-weight: 500; margin-left: .25rem; }
.bio-instagram:hover { color: var(--acento); }

@media (max-width: 760px) {
    .sobre-mi { grid-template-columns: 1fr; }
    .retrato { position: relative; top: 0; width: calc(100% - 12px); max-width: 20rem; margin: 0 auto; }
    .retrato::before { transform: translate(10px, 10px); }
    .bio-nombre { text-align: center; }
    .bio-datos { justify-content: center; }
}

/* ---------- Redes (botones flotantes) ---------- */
.redes {
    position: fixed;
    right: calc(1rem + env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 50;
    display: flex;
    flex-direction: column;   /* si se suman redes, se apilan hacia arriba */
    gap: .5rem;
}
.redes a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tinta);
    color: var(--papel);
    font-size: 1.15rem;
    text-decoration: none;
    opacity: .85;
    box-shadow: 0 2px 8px rgba(var(--sombra), .3);
    transition: opacity .2s, transform .2s, background .2s;
}
.redes a:hover { opacity: 1; transform: translateY(-2px); background: var(--acento); }
.redes a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* ---------- Pie ---------- */
.pie {
    text-align: center;
    font-size: .8rem;
    color: var(--tinta-suave);
    padding: 2rem 1rem 3rem;
    border-top: 1px solid var(--borde);
    margin: 0 clamp(1rem, 4vw, 3rem);
}

/* ---------- Contacto ---------- */
.contacto { max-width: 52rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) 4rem; display: grid; gap: 1.75rem; }
.contacto .intro { margin-bottom: 0; }
.canales { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.canal {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icono texto" "acciones acciones";
    gap: 1rem 1rem; align-items: center;
    padding: 1.25rem; border: 1px solid var(--borde); border-radius: 14px;
    background: rgba(255, 255, 250, .9); box-shadow: 0 6px 24px -18px rgba(var(--sombra), .5);
}
.canal-icono {
    grid-area: icono; display: grid; place-items: center;
    width: 3.2rem; height: 3.2rem; border-radius: 50%;
    background: var(--tinta); color: var(--papel); font-size: 1.45rem;
}
.canal-texto { grid-area: texto; min-width: 0; }
.canal-texto h2 { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.canal-texto p { margin: .1rem 0 0; color: var(--tinta-suave); overflow-wrap: anywhere; }
.canal-acciones { grid-area: acciones; display: flex; gap: .5rem; }
.canal-acciones .boton { margin-top: 0; flex: 1; text-align: center; }
.contacto-comisiones { text-align: center; }

@media (max-width: 640px) {
    .canales { grid-template-columns: 1fr; }
}

/* Redes en el celular: un solo botón que despliega el resto hacia arriba */
.redes-toggle { display: none; }
@media (max-width: 640px) {
    .redes { gap: .45rem; right: calc(.75rem + env(safe-area-inset-right)); bottom: calc(.75rem + env(safe-area-inset-bottom)); }
    .redes { flex-direction: column-reverse; }              /* el botón queda abajo, las redes suben */
    .redes a {
        display: none; width: 38px; height: 38px; font-size: 1rem; opacity: 1;
        margin-inline: auto;
    }
    .redes.abierta a { display: grid; animation: brotar .18s ease-out both; }
    .redes-toggle {
        display: grid; place-items: center;
        width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
        background: var(--tinta); color: var(--papel); font-size: 1.05rem;
        box-shadow: 0 2px 8px rgba(var(--sombra), .3);
        transition: background .2s, transform .2s;
    }
    .redes.abierta .redes-toggle { background: var(--acento); transform: rotate(-90deg); }
    .redes-toggle:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
}
@keyframes brotar { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }


/* ---------- Panel de la artista (Mi cuenta) ---------- */
.panel-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.panel-ayuda { margin: -.4rem 0 .9rem; }
.pedidos > li { list-style: none; }
.pedido-link { color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.pedido-link:hover { border-color: var(--hoja); box-shadow: 0 6px 18px -12px rgba(var(--sombra), .5); transform: translateY(-1px); }
.pedido-link:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.pedido-num-chico { font-weight: 400; font-size: .8rem; color: var(--tinta-suave); }
.plazo { font-size: .78rem; font-weight: 500; color: var(--tinta-suave); }
.plazo-cerca { color: #9a6a12; }
.plazo-vencido { color: #b23a4e; }
.anteriores summary { cursor: pointer; margin: 0; }
.anteriores[open] summary { margin-bottom: 1rem; }

/* ---------- Detalle de un pedido ---------- */
.pedido-detalle { max-width: 64rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) 4rem; display: grid; gap: 1.25rem; }
.volver { margin: -1rem 0 0; font-size: .92rem; }
.volver a { color: var(--tinta); text-underline-offset: 3px; }
.pedido-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.pedido-cabecera p { margin: 0; }
.pedido-num { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.pedido-nombre { margin: .2rem 0 .35rem; font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.15; }
.pedido-cabecera-lado { display: grid; justify-items: end; gap: .4rem; }
.pedido-total { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; }

.pedido-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
.pedido-principal, .pedido-lateral { display: grid; gap: 1.25rem; }
.pedido-lateral { position: sticky; top: 5rem; }
.pedido-descripcion { margin: 0; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; }

.refs { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.refs a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--borde); background: #fff; }
.refs img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.refs a:hover img { transform: scale(1.04); }
.links-ref { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.links-ref a { color: var(--tinta); overflow-wrap: anywhere; }

.datos-pedido { margin: 0; display: grid; gap: .25rem; }
.datos-pedido dt { font-size: .8rem; color: var(--tinta-suave); margin-top: .65rem; }
.datos-pedido dt:first-child { margin-top: 0; }
.datos-pedido dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.datos-pedido a { color: var(--tinta); }
.proximo-paso { background: #f6ecd2; border-color: #e3cf96; }
.proximo-paso p { margin: 0; color: #6e5313; }

@media (max-width: 860px) {
    .pedido-columnas { grid-template-columns: 1fr; }
    .pedido-lateral { position: static; }
}
@media (max-width: 560px) {
    .panel-resumen { gap: .5rem; }
    .panel-resumen .dato { padding: .8rem .3rem; }
    .panel-resumen .dato-num { font-size: 1.35rem; }
    .panel-resumen .dato-txt { font-size: .72rem; }
    .pedido-cabecera-lado { justify-items: start; }
}

/* ---------- Decisión sobre un pedido ---------- */
.estado-precio-propuesto { background: #fbe3e7; color: #a23a50; }
.estado-aceptada { background: #dcebd5; color: #2c5a2e; }
.boton-peligro { background: #b23a4e; }
.boton:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }

.decision .opcion {
    border: 1px solid var(--borde); border-radius: 10px; background: #fffffb;
    margin-top: .6rem; overflow: hidden;
}
.decision .opcion summary {
    cursor: pointer; padding: .8rem 1rem; font-weight: 500; list-style: none;
    display: flex; justify-content: space-between; align-items: center;
}
.decision .opcion summary::-webkit-details-marker { display: none; }
.decision .opcion summary::after { content: "+"; font-size: 1.2rem; color: var(--tinta-suave); }
.decision .opcion[open] summary::after { content: "−"; }
.decision .opcion[open] summary { border-bottom: 1px dashed var(--borde); }
.decision .opcion form { padding: .25rem 1rem 1rem; }
.decision .opcion .boton { margin-top: .9rem; }
.decision .opcion-aceptar summary { color: #2c5a2e; }
.decision .opcion-rechazar summary { color: #a23a50; }
.decision :is(input, textarea) {
    width: 100%; font: inherit; color: var(--tinta); background: #fffffb;
    border: 1px solid #c9cfb6; border-radius: 8px; padding: .6rem .7rem;
}
.decision :is(input, textarea):focus { outline: none; border-color: var(--hoja); box-shadow: 0 0 0 3px rgba(111, 154, 114, .25); }
.aviso-cupos { margin: 0 0 .4rem; padding: .7rem .9rem; border-radius: 8px; background: #fbecee; color: #8c2b3c; font-size: .88rem; }

/* Propuesta de precio (vista del cliente) */
.propuesta { border-color: #e9b9c3; background: #fdf4f6; }
.propuesta-precio { margin: 0 0 .8rem; font-size: 1.15rem; }
.propuesta-precio s { color: var(--tinta-suave); }
.propuesta-precio strong { font-family: var(--serif); font-size: 1.8rem; color: var(--tinta); }
.propuesta-mensaje {
    margin: 0 0 1rem; padding: .8rem 1rem; border-left: 3px solid var(--acento);
    background: #fffffb; border-radius: 0 8px 8px 0; line-height: 1.6;
}
.propuesta-botones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; margin-top: 1rem; }
.propuesta-botones .boton { width: auto; padding-inline: 1.6rem; }
.confirmar summary { list-style: none; display: inline-block; }
.confirmar summary::-webkit-details-marker { display: none; }
.confirmar[open] summary { opacity: .6; }
.confirmar form { margin-top: .6rem; max-width: 22rem; }
.precio-viejo { font-size: 1rem; color: var(--tinta-suave); font-weight: 400; }

/* Motivo de rechazo / cancelación */
.motivo { border-color: #e4b3bb; background: #fbf0f2; }
.motivo p { margin: 0; line-height: 1.6; }
.motivo .ayuda { margin-top: .6rem; }

/* Historial */
.historial { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid #d6dbc4; display: grid; gap: 1rem; }
.historial li { position: relative; }
.historial li::before {
    content: ""; position: absolute; left: calc(-1rem - 6px); top: .35rem;
    width: 10px; height: 10px; border-radius: 50%; background: var(--hoja);
}
.historial p { margin: .25rem 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.historial-fecha { font-size: .8rem; color: var(--tinta-suave); margin-right: .5rem; }
.historial-autor { font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: #e9eedc; }
.autor-artista { background: #fbe3e7; color: #a23a50; }

/* ---------- Mensajes sin leer ---------- */
.sin-leer {
    display: inline-block; margin-left: .3rem; padding: .1rem .55rem; border-radius: 999px;
    background: var(--acento); color: #fff; font-size: .72rem; font-weight: 600; vertical-align: middle;
}
.menu-globo {
    display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
    margin-left: .35rem; border-radius: 999px; background: var(--acento); color: #fff;
    font-size: .7rem; font-weight: 600; vertical-align: 1px;
}

/* ---------- Chat del pedido ---------- */
.chat-mensajes {
    list-style: none; margin: 0 0 .75rem; padding: .25rem .25rem .25rem 0;
    max-height: 26rem; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem;
    scroll-behavior: smooth;
}
.msj {
    max-width: 82%; align-self: flex-start;
    padding: .55rem .85rem; border-radius: 14px 14px 14px 4px;
    background: #eef1e6; border: 1px solid #dde3cf;
}
.msj p { margin: .15rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.msj-quien { font-size: .72rem; color: var(--tinta-suave); }
.msj-artista { background: #fbeef1; border-color: #f0d3da; }
.msj-mio { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.msj-mio .msj-quien { color: rgba(241, 240, 228, .7); }
.chat-form { display: flex; gap: .6rem; align-items: flex-end; }
.chat-form textarea {
    flex: 1; font: inherit; color: var(--tinta); background: #fffffb; resize: vertical; min-height: 2.8rem;
    border: 1px solid #c9cfb6; border-radius: 10px; padding: .6rem .75rem;
}
.chat-form textarea:focus { outline: none; border-color: var(--hoja); box-shadow: 0 0 0 3px rgba(111, 154, 114, .25); }
.chat-form .boton { width: auto; padding-inline: 1.3rem; }
.chat-vacio { margin: 0 0 .75rem; }

/* ---------- Boceto ---------- */
.boceto { border-color: #cfdcc1; }
.boceto-cabecera { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.boceto-cabecera .bloque-titulo { margin: 0; }
.version { font-size: .8rem; color: var(--tinta-suave); padding: .15rem .6rem; border-radius: 999px; background: #eef1e6; }
.boceto-imagenes { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.boceto-imagenes a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--borde); background: #fff; }
.boceto-imagenes img { display: block; width: 100%; height: auto; max-height: 34rem; object-fit: contain; }
.boceto-revision { margin-top: 1rem; padding: 1rem; border-radius: 10px; background: #fdf4f6; border: 1px solid #e9b9c3; }
.boceto-revision p { margin: 0; line-height: 1.5; }
.confirmar.cambios form { max-width: 28rem; }
.confirmar.cambios textarea {
    width: 100%; font: inherit; border: 1px solid #c9cfb6; border-radius: 8px; padding: .6rem .7rem; background: #fffffb;
}
.nota-paso { margin: 1rem 0 0; padding: .7rem .9rem; border-radius: 8px; background: #f4f6ee; color: var(--tinta-suave); font-size: .9rem; }
.subir-boceto { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px dashed var(--borde); }
.subir-boceto .campo-label { display: block; margin: 0 0 .4rem; }
.subir-boceto input[type="file"] { width: 100%; font: inherit; font-size: .9rem; }
.subir-boceto textarea { width: 100%; font: inherit; border: 1px solid #c9cfb6; border-radius: 8px; padding: .6rem .7rem; background: #fffffb; }
.subir-boceto .boton { margin-top: .9rem; width: auto; padding-inline: 1.6rem; }
.versiones-anteriores { margin-top: 1.2rem; }
.versiones-anteriores summary { cursor: pointer; color: var(--tinta-suave); font-size: .9rem; }
.decision > form .boton { margin-top: .8rem; }

/* ---------- Pagos ---------- */
.pagos { border-color: #d9cfa8; }
.pago-progreso p { margin: .5rem 0 0; }
.pago-barra { position: relative; height: .7rem; border-radius: 999px; background: #e6e9da; overflow: visible; }
.pago-barra span { display: block; height: 100%; border-radius: 999px; background: var(--hoja); transition: width .4s; }
.pago-marca { position: absolute; top: -.25rem; width: 2px; height: 1.2rem; background: var(--tinta); opacity: .5; }
.comprobantes { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.comprobante {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
    padding: .8rem 1rem; border: 1px solid var(--borde); border-radius: 10px; background: #fffffb;
}
.comprobante p { margin: 0; }
.comprobante-datos { display: grid; gap: .2rem; min-width: 0; }
.comprobante-nota { font-size: .9rem; color: var(--tinta-suave); overflow-wrap: anywhere; }
.comprobante-motivo { font-size: .88rem; color: #8c2b3c; }
.comprobante-acciones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
.comprobante-acciones .boton { margin: 0; }
.comprobante-pending { border-color: #e3cf96; background: #fffbef; }
.comprobante-failed { opacity: .8; }
.estado-pago-pending { background: #f6ecd2; color: #7a5a14; }
.estado-pago-paid { background: #dcebd5; color: #2c5a2e; }
.estado-pago-failed { background: #f3e0e3; color: #8c2b3c; }
.rechazar-pago form { display: grid; gap: .4rem; margin-top: .4rem; min-width: 15rem; }
.rechazar-pago textarea { font: inherit; border: 1px solid #c9cfb6; border-radius: 8px; padding: .5rem .6rem; background: #fffffb; }
.instrucciones-pago { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 10px; background: #f4f6ee; border: 1px solid #d6dbc4; }
.instrucciones-pago h4 { margin: 0 0 .5rem; font-family: var(--serif); font-size: 1.1rem; }
.instrucciones-pago p { margin: 0 0 .4rem; line-height: 1.55; white-space: pre-wrap; }
.subir-comprobante { margin-top: 1rem; }
.subir-comprobante :is(input[type="text"], textarea) {
    width: 100%; font: inherit; color: var(--tinta); background: #fffffb;
    border: 1px solid #c9cfb6; border-radius: 8px; padding: .6rem .7rem;
}
.subir-comprobante input[type="file"] { font: inherit; font-size: .9rem; width: 100%; }
.subir-comprobante .boton { width: auto; padding-inline: 1.6rem; margin-top: 1rem; }
.pago-pendiente {
    display: inline-block; margin-left: .3rem; padding: .1rem .55rem; border-radius: 999px;
    background: #f6ecd2; color: #7a5a14; font-size: .72rem; font-weight: 600; vertical-align: middle;
}
.dato-pagos { background: #fffbef; border-color: #e3cf96; }
.panel-resumen:has(.dato-pagos) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .panel-resumen:has(.dato-pagos) { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Obra final ---------- */
.obra-final { border-color: #c9b9e0; }
.obra-final .boceto-imagenes li { display: grid; gap: .5rem; }
.descargar-final { width: 100%; margin: 0; text-align: center; }

/* Aviso de la subida de la obra final */
.aviso-subida { font-weight: 500; color: var(--tinta); }
.aviso-subida.error { color: var(--acento); }

/* ======================================================================
   Tienda
   ====================================================================== */
.panel-resumen, .panel-resumen:has(.dato-pagos) { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
@media (max-width: 560px) { .panel-resumen, .panel-resumen:has(.dato-pagos) { grid-template-columns: repeat(2, 1fr); } }
.dato-compras { background: #eef3f8; border-color: #b9c9d9; color: inherit; text-decoration: none; }
.dato-compras .dato-num { color: #2d4f6e; }
.cuenta-separador {
    margin: 1rem 0 -.5rem; font-family: var(--serif); font-size: 1.6rem; font-weight: 600;
    display: flex; align-items: center; gap: .6rem;
}
.cuenta-separador i { color: var(--hoja); font-size: 1.2rem; }
.bloque-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.bloque-cabecera .boton { margin: 0 0 1rem; }

.tienda { max-width: 68rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) 4rem; display: grid; gap: 1.5rem; }
.tienda-barra { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; }
.tienda-barra .ayuda { margin: 0; }
.tienda-barra-botones { display: flex; gap: .5rem; flex-wrap: wrap; }
.tienda-barra-botones .boton { margin: 0; }
.carrito-num {
    display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; margin-left: .25rem;
    border-radius: 999px; background: #fff; color: var(--acento); font-size: .78rem; font-weight: 600;
}
.tienda-vacia { text-align: center; }
.tienda-vacia p { margin: 0 0 .5rem; }

.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1.25rem; }
.producto-tarjeta {
    display: grid; grid-template-rows: auto 1fr; overflow: hidden;
    border: 1px solid var(--borde); border-radius: 14px; background: rgba(255, 255, 250, .9);
    box-shadow: 0 6px 24px -18px rgba(var(--sombra), .5); transition: transform .2s, box-shadow .2s;
}
.producto-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(var(--sombra), .6); }
.producto-foto { position: relative; display: block; aspect-ratio: 1; background: #f7f6ec; }
.producto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sin-foto { display: grid; place-items: center; width: 100%; height: 100%; color: #c9cfb6; font-size: 2.5rem; }
.producto-etiqueta {
    position: absolute; top: .6rem; left: .6rem; padding: .2rem .6rem; border-radius: 999px;
    background: rgba(31, 59, 44, .85); color: #fff; font-size: .75rem; font-weight: 500;
}
.producto-inactivo .producto-foto img { opacity: .5; filter: grayscale(.6); }
.producto-info { padding: .9rem 1rem 1.1rem; display: grid; align-content: start; gap: .25rem; }
.producto-nombre { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.producto-nombre a { color: inherit; text-decoration: none; }
.producto-nombre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.producto-precio { margin: 0; font-weight: 500; color: var(--acento); }
.producto-vendidos { margin: .3rem 0 0; font-size: .88rem; color: #2d4f6e; }
.producto-info .boton, .producto-info form { margin-top: .5rem; }
.producto-info form .boton { margin: 0; width: 100%; }

/* Detalle del producto */
.producto-columnas { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.producto-fotos { display: grid; gap: .6rem; }
.producto-foto-grande {
    width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 14px;
    border: 1px solid var(--borde); background: #fffffb;
}
.producto-miniaturas { display: flex; gap: .5rem; flex-wrap: wrap; }
.miniatura { padding: 0; width: 4.5rem; height: 4.5rem; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: none; cursor: pointer; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura.activa { border-color: var(--acento); }
.producto-ficha { position: sticky; top: 5rem; }
.producto-titulo { margin: 0; font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.15; }
.producto-precio-grande { margin: .4rem 0 1rem; font-family: var(--serif); font-size: 1.6rem; color: var(--acento); }
.producto-descripcion { line-height: 1.7; margin-bottom: 1.25rem; overflow-wrap: anywhere; }
.producto-etiqueta-linea { margin: 0 0 .6rem; font-size: .85rem; color: #8c2b3c; font-weight: 500; }
.agregar-grande { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; }
.agregar-grande .campo { margin: 0; }
.agregar-grande .boton { flex: 1; min-width: 12rem; }
.campo-cantidad select { min-width: 5rem; }

/* Campos de los formularios de la tienda */
.form-tienda :is(input[type="text"], textarea, select) {
    width: 100%; font: inherit; color: var(--tinta); background: #fffffb;
    border: 1px solid #c9cfb6; border-radius: 8px; padding: .7rem .8rem;
    transition: border-color .2s, box-shadow .2s;
}
.form-tienda textarea { resize: vertical; line-height: 1.5; }
.form-tienda :is(input, textarea, select):focus { outline: none; border-color: var(--hoja); box-shadow: 0 0 0 3px rgba(111, 154, 114, .25); }
.form-tienda [aria-invalid="true"] { border-color: var(--acento) !important; }
.form-tienda .boton[type="submit"]:last-of-type { margin-top: 1.25rem; }
.form-tienda .agregar .boton, .agregar-grande .boton { margin-top: 0; }
.campo-check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; align-self: end; }
.campo-check input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--acento); }
.tres-columnas { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.tres-columnas .campo { margin-top: 0; }
.campo-cp { max-width: 14rem; }
.subtitulo-form { margin: 1.6rem 0 .2rem; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fotos en el formulario del producto */
.fotos-producto { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
.fotos-producto legend { margin-bottom: .5rem; }
.fotos-actuales { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .6rem; }
.fotos-actuales li { display: grid; gap: .25rem; font-size: .85rem; }
.fotos-actuales img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--borde); }
.fotos-actuales label { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.fotos-producto input[type="file"] { font: inherit; font-size: .9rem; width: 100%; }
.producto-editar { max-width: 46rem; }
.producto-peligro .propuesta-botones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-start; }
.producto-peligro .boton { margin: 0; }

/* Carrito */
.carrito { max-width: 46rem; }
.carrito-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.carrito-item {
    display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto auto; gap: .9rem; align-items: center;
    padding: .6rem; border: 1px solid var(--borde); border-radius: 10px; background: #fffffb;
}
.carrito-foto { width: 4rem; height: 4rem; border-radius: 8px; overflow: hidden; background: #f7f6ec; display: block; }
.carrito-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carrito-datos { display: grid; gap: .1rem; min-width: 0; }
.carrito-nombre { font-weight: 500; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
a.carrito-nombre:hover { text-decoration: underline; }
.carrito-cantidad select { width: auto; padding: .4rem .5rem; }
.carrito-importe { font-weight: 500; white-space: nowrap; }
.carrito-subtotal { margin: 1rem 0 0; text-align: right; }

.envio-metodos { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.envio-metodos legend { margin-bottom: .6rem; }
.envio-metodo {
    display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; cursor: pointer;
    border: 1px solid var(--borde); border-radius: 10px; background: #fffffb; transition: border-color .2s;
}
.envio-metodo:has(input:checked) { border-color: var(--hoja); background: #f3f8ef; }
.envio-metodo input { margin-top: .25rem; accent-color: var(--acento); }
.envio-metodo .ayuda { margin: 0; }
.resumen-compra { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--borde); }
.resumen-compra dt { color: var(--tinta-suave); }
.resumen-compra dd { margin: 0; text-align: right; }
.resumen-compra .total { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--tinta); }

/* Compra */
.compra-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; counter-reset: paso; }
.compra-pasos li {
    counter-increment: paso; position: relative; padding: .55rem .4rem; text-align: center; font-size: .85rem;
    border-radius: 999px; background: rgba(255, 255, 250, .8); border: 1px solid var(--borde); color: var(--tinta-suave);
}
.compra-pasos li::before { content: counter(paso) ". "; }
.compra-pasos .hecho { background: #e3eedb; border-color: #b9cfae; color: #2c5a2e; }
.compra-pasos .hecho::before { content: "✓ "; }
.compra-pasos .actual { background: var(--tinta); border-color: var(--tinta); color: var(--papel); font-weight: 500; }
.envio-hecho { border-color: #b9cfae; background: #f3f8ef; }
.envio-hecho p { margin: 0 0 .5rem; }
.envio-hecho .boton { margin: .25rem .5rem 0 0; }
.envio-hecho form { display: inline; }
.codigo { font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.pedido-lateral .form-tienda, .pedido-lateral input[type="text"] {
    width: 100%; font: inherit; border: 1px solid #c9cfb6; border-radius: 8px; padding: .6rem .7rem; background: #fffffb;
}
.estado-compra-pendiente-de-pago { background: #f6ecd2; color: #7a5a14; }
.estado-compra-pago-en-revision { background: #fbe3e7; color: #a23a50; }
.estado-compra-aceptada { background: #e3ecf5; color: #2d4f6e; }
.estado-compra-enviada { background: #dcebd5; color: #2c5a2e; }
.estado-compra-entregada { background: #dcebd5; color: #2c5a2e; }
.estado-compra-rechazada, .estado-compra-cancelada { background: #f3e0e3; color: #8c2b3c; }

@media (max-width: 760px) {
    .producto-columnas { grid-template-columns: 1fr; }
    .producto-ficha { position: static; }
    .compra-pasos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .tres-columnas { grid-template-columns: 1fr 1fr; }
    .tres-columnas .campo:first-child { grid-column: 1 / -1; }
    .carrito-item { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
    .carrito-foto { width: 3.5rem; height: 3.5rem; }
    .carrito-importe { grid-column: 2 / -1; text-align: right; }
    .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .producto-info { padding: .7rem .75rem .9rem; }
    .producto-nombre { font-size: 1rem; }
    .compra-pasos li { font-size: .78rem; padding: .45rem .3rem; }
}

/* ---------- Galería: herramientas de la artista ---------- */
.galeria-admin {
    max-width: 60rem; margin: 0 auto 2rem; padding: 1rem 1.25rem;
    display: flex; gap: .75rem 1.25rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    border: 1px dashed #b9cfae; border-radius: 14px; background: rgba(255, 255, 250, .82);
    width: calc(100% - 2 * clamp(1rem, 4vw, 3rem));
}
.galeria-subir { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: end; flex: 1; min-width: min(100%, 22rem); }
.galeria-subir .ayuda { grid-column: 1 / -1; margin: 0; }
.galeria-archivos { display: grid; gap: .35rem; }
.galeria-archivos input { font: inherit; font-size: .9rem; max-width: 100%; }
.galeria-subir .boton, .galeria-admin > .boton { margin: 0; }
.galeria-editando { padding-top: 0; margin-top: -1rem; }
.obra-editando a { outline: 2px dashed rgba(178, 58, 78, .35); outline-offset: 3px; }
.obra-quitar { margin-top: .4rem; }
.obra-quitar summary { padding: .35rem .9rem; font-size: .85rem; }
.obra-quitar form { margin-top: .4rem; }
.obra-quitar form .boton { padding: .45rem .9rem; font-size: .85rem; width: 100%; }

/* ---------- Precios (artista) ---------- */
.precios-tabla { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 9rem; gap: .6rem 1rem; align-items: center; margin: 1.25rem 0 0; }
.precios-cab { font-size: .8rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em; }
.precios-concepto { font-weight: 500; }
.precios-input { position: relative; display: block; }
.precios-input::before {
    content: attr(data-unidad); position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    font-size: .8rem; color: var(--tinta-suave); pointer-events: none;
}
.precios-input input { padding-left: 2.6rem !important; text-align: right; }
.precios-input[data-unidad="%"] input { padding-left: 1.8rem !important; }
.precios-error { grid-column: 1 / -1; margin-top: -.3rem; }
.form-precios .boton { margin-top: 1.5rem; }
.precios-historial { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.precios-historial .ayuda { margin-right: .5rem; }
@media (max-width: 560px) {
    .precios-tabla { grid-template-columns: 1fr 1fr; }
    .precios-cab:first-child { display: none; }
    .precios-concepto { grid-column: 1 / -1; margin-top: .5rem; }
}
.atajos { display: flex; flex-wrap: wrap; gap: .5rem; }
.atajos .boton { margin: 0; }
.aviso-artista { text-align: center; margin: -1rem 0 1.5rem; font-size: .9rem; color: var(--tinta-suave); }
.aviso-artista a { color: var(--acento); font-weight: 500; }

/* ---------- Galería: categorías ---------- */
.cat-opciones { grid-column: 1 / -1; border: 0; padding: 0; margin: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; min-width: 0; }
.cat-opciones legend { font-size: .85rem; color: var(--tinta-suave); margin-bottom: .35rem; padding: 0; }
.cat-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; cursor: pointer; }
.cat-check input { accent-color: var(--acento); }
.categorias-admin { display: grid; gap: .9rem; justify-content: stretch; }
.categorias-cabecera h2 { margin: 0; font-size: 1rem; }
.categorias-cabecera .ayuda { margin-top: .2rem; }
.categorias-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.categoria-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; padding: .5rem .7rem; border: 1px solid var(--borde); border-radius: 10px; background: #fffffb; }
.categoria-nombre { flex: 1; min-width: 8rem; align-self: center; font-weight: 500; }
.categoria-item .boton { margin: 0; padding: .35rem .9rem; font-size: .85rem; }
.categoria-item details form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; }
.categoria-item details input[type="text"] { width: 12rem; padding: .45rem .6rem; }
.categoria-nueva { display: flex; gap: .5rem; flex-wrap: wrap; }
.categoria-nueva input { flex: 1; min-width: 12rem; }
.categoria-nueva .boton { margin: 0 !important; }
.obra-cats { margin: .3rem 0 0; font-size: .85rem; color: #2d4f6e; }
.obra-cats .ayuda { margin: 0; }
.obra-categorias form { display: grid; gap: .3rem; padding: .5rem .6rem; border: 1px solid var(--borde); border-radius: 8px; background: #fffffb; }
.obra-categorias form .boton { margin-top: .3rem; }
.obra-editando details + details { margin-top: .3rem; }

/* ---------- Logo de la tienda (en lugar del título "Tienda") ---------- */
.nombre-logo { line-height: 0; }
.nombre-logo img {
    display: block; margin: 0 auto;
    width: clamp(170px, 26vw, 280px); height: auto;
    filter: drop-shadow(0 10px 18px rgba(var(--sombra), .18));
    animation: logo-entra .6s ease both;
}
@keyframes logo-entra { from { opacity: 0; transform: scale(.94) rotate(-4deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nombre-logo img { animation: none; } }

/* ---------- Decoración nueva (config.php -> 'decoracion' => 'nueva') ---------- */
body.deco-nueva { background-image: url("../img/fondo-flores-nuevo.png"); background-size: 440px; }
.ramita.arco { width: clamp(200px, 30vw, 320px); margin-top: clamp(.4rem, 1.2vw, .8rem); }