/* ============================
   RESET BÁSICO / VARIABLES
   ============================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color-fondo: #ffffff;
    --color-primario: #1a2b4c;
    --color-secundario: #e07a5f;
    --color-acento: #3d5a80;
    --color-texto: #222222;
    --color-texto-suave: #555555;
    --color-borde-suave: #e5e5e5;
    --color-fondo-suave: #f7f7f7;

    --fuente-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --radio-borde: 6px;
    --shadow-suave: 0 12px 25px rgba(15, 23, 42, 0.12);
}

/* ============================
   BASE
   ============================ */
body {
    font-family: var(--fuente-base);
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.contenedor {
    width: min(1200px, 100% - 3rem);
    margin: 0 auto;
}

/* ============================
   HEADER / NAV
   ============================ */
   
   .header__logo-img {
    display: block;
    height: 45px;        /* ajusta a tu gusto: 32–56px suele ir bien */
    width: auto;
}

/* Opcional: si quieres mantener el espacio del logo centrado */
.header__logo {
    display: inline-flex;
    align-items: center;
}
   
   .header__logo-texto {
    display: none;
}
   
   
   
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--color-borde-suave);
    backdrop-filter: blur(12px);
}

.header__contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
}

.header__logo-texto {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primario);
    font-size: 1.1rem;
}

.header__logo-texto span {
    color: var(--color-secundario);
}

.nav__lista {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    font-size: 0.95rem;
}

.nav__enlace {
    position: relative;
    padding-bottom: 0.2rem;
}

.nav__enlace::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-secundario), var(--color-acento));
    transition: width 0.2s ease-out;
}

.nav__enlace:hover::after {
    width: 100%;
}

/* ============================
   BOTONES
   ============================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s ease-out;
    white-space: nowrap;
}

.btn--primario {
    background: linear-gradient(135deg, var(--color-secundario), var(--color-acento));
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.15);
}

.btn--primario:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.18);
}

.btn--secundario {
    border-color: var(--color-acento);
    color: var(--color-acento);
    background-color: transparent;
}

.btn--secundario:hover {
    background-color: rgba(61, 90, 128, 0.08);
}

.btn--texto {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--color-acento);
    font-weight: 500;
}

.btn--texto:hover {
    text-decoration: underline;
}

/* ============================
   HERO
   ============================ */
.hero {
    padding: 4rem 0 3rem;
    background: radial-gradient(circle at top left, #f9e9e3 0, #ffffff 50%);
}

.hero__contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr);
    gap: 2rem;
}

.hero__texto h1 {
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    margin-bottom: 1rem;
    color: var(--color-primario);
}

.hero__descripcion {
    max-width: 36rem;
    color: var(--color-texto-suave);
    margin-bottom: 1.5rem;
}

/* ============================
   CATÁLOGO / FILTROS
   ============================ */
.catalogo {
    padding: 2.5rem 0 3rem;
}



/* CABECERA DEL CATÁLOGO / FILTROS */
.catalogo__header {
    position: sticky;
    top: 56px; /* ajusta según la altura real de tu header */
    z-index: 40;
    background-color: #ffffff;
    padding: 0.5rem 0.4rem 0.6rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-borde-suave);

    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    row-gap: 0.4rem;
    align-items: flex-end;
}

.catalogo__titulo-bloque {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.catalogo__toggle {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: center;

    display: none; /* visible solo cuando esté sticky */

    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--color-borde-suave);
    background: #f9fafb;
    color: var(--color-texto);
    cursor: pointer;
}

#formFiltros.filtros {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    margin-top: 0.2rem;
}

/* Cuando el header se pega arriba */
.catalogo__header.is-sticky {
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
}

/* Mostrar el botón toggle solo en sticky */
.catalogo__header.is-sticky .catalogo__toggle {
    display: inline-flex;
}

/* En sticky ocultamos el subtítulo para ahorrar espacio */
.catalogo__header.is-sticky .catalogo__subtitulo {
    display: none;
}

/* En sticky + colapsado ocultamos los filtros */
.catalogo__header.is-sticky.is-collapsed #formFiltros {
    display: none;
}

/* FILTROS en una sola línea y con scroll horizontal si no caben */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
    align-items: flex-end;
}

.catalogo__header.is-sticky #formFiltros .filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.filtros__grupo {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    flex: 0 0 auto;
}

.filtros__grupo label {
    margin-bottom: 0.15rem;
}

.filtros select {
    padding: 0.4rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-borde-suave);
    font-size: 0.9rem;
    background-color: #ffffff;
    min-width: 160px;
}

/* En sticky hacemos los selects más compactos */
.catalogo__header.is-sticky .filtros select {
    min-width: auto;
    width: 130px;
    font-size: 0.8rem;
}

/* Responsive: si tu header principal es más alto en móvil, sube el top */
@media (max-width: 640px) {
    .catalogo__header {
        top: 64px; /* ajusta si se solapa con el header superior */
    }
}

.catalogo__header h2 {
    font-size: 1.5rem;
    color: var(--color-primario);
    margin-bottom: 0.3rem;
}

.catalogo__subtitulo {
    color: var(--color-texto-suave);
    font-size: 0.95rem;
}

.catalogo-marco-widget__link {
    display: block;
    text-decoration: none;
    color: inherit;
}


.catalogo-marco-widget .obra-detalle__fondo {
    padding: 1.6rem;
    border-radius: 20px;
}


/* Botón de selección en la tarjeta */
.marco-widget__btn-select {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icono del check */
.marco-widget__check-icon {
    font-size: 18px;
    line-height: 1;
}

/* Estado seleccionado: check azul */
.marco-widget__btn-select--active .marco-widget__check-icon {
    color: #2563eb; /* azul */
}

/* Barra inferior azul con número de seleccionadas */
.seleccion-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2563eb;
    color: #ffffff;
    padding: 0.4rem 1rem;
    z-index: 130;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.4);

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.seleccion-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: none;
    color: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Botón "Vaciar selección" */
.seleccion-bar__clear {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.12);
    color: #e0edff;
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
}

/* Versión móvil: convertir barra en botón flotante más compacto */
@media (max-width: 640px) {
    .seleccion-bar {
        width: auto;
        left: auto;
        right: 1rem;
        bottom: 1rem;
        padding: 0.3rem 0.6rem;
        border-radius: 999px;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.4);
        gap: 0.4rem;
    }

    .seleccion-bar__btn {
        font-size: 0.8rem;
    }

    .seleccion-bar__clear {
        font-size: 0.7rem;
        padding: 0.15rem 0.45rem;
    }


}

/* Panel que muestra las pinturas seleccionadas */
.seleccion-panel {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 140;
}

.seleccion-panel__contenido {
    width: min(900px, 100%);
    max-height: 70vh;
    background-color: #ffffff;
    border-radius: 16px 16px 0 0;
    padding: 1rem 1.2rem 1.2rem;
    overflow-y: auto;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.4);
    position: relative;
}

/* Header pegado arriba dentro del panel (sticky) */
.seleccion-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;

    position: sticky;
    top: 0;
    background-color: #ffffff;
    z-index: 1;
    padding-bottom: 0.4rem;
}

.seleccion-panel__cerrar {
    border: none;
    background: none;
    font-size: 0.9rem;
    cursor: pointer;
    color: #6b7280;
}

.seleccion-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.9rem;
}

/* Tarjeta en el panel de seleccionados */
.seleccion-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
}

.seleccion-item__imagen {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.seleccion-item__contenido {
    padding: 0.6rem 0.7rem 0.7rem;
    font-size: 0.85rem;
    text-align: center;
}

.seleccion-item__titulo {
    font-weight: 500;
    color: var(--color-primario);
}

.seleccion-item__artista {
    font-size: 0.8rem;
    color: var(--color-texto-suave);
}





.marco-widget__controles {
    margin-top: 0.4rem;
}




.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
}

.filtros__grupo {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}

.filtros__grupo label {
    margin-bottom: 0.15rem;
}

.filtros select {
    min-width: 170px;
    padding: 0.4rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-borde-suave);
    font-size: 0.9rem;
    background-color: #ffffff;
}

/* Filtro activo: destacar cuando tiene un valor distinto al por defecto */
.filtros__grupo--activo select {
    background-color: #e0f2fe; /* tono cálido suave */
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 1px rgba(224, 122, 95, 0.35);
}

.filtros__grupo--activo label {
    color: var(--color-secundario);
    font-weight: 600;
}

/* El grupo de "Ordenar por" va a un renglón aparte */
.filtros__grupo--orden {
    flex-basis: 100%;      /* obliga a bajar a la siguiente línea */
    margin-top: 0.3rem;
}

/* El contenido visible del grupo de orden se ajusta a su propio ancho */
.filtros__grupo-contenido {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: flex-end;
}

/* Para este select, quitar el min-width y dejar ancho según contenido */
.filtros__grupo--orden select {
    min-width: auto;
    width: auto;
}


/* ============================
   GRID OBRAS
   ============================ */
.grid-obras {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.7rem;
}

.obra-card {
    background-color: #ffffff;
    border-radius: var(--radio-borde);
    overflow: hidden;
    border: 1px solid #f0f0f0;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

.obra-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-suave);
}

/* Contenedor de la imagen / widget de marco en la tarjeta */
.obra-card__imagen-wrapper {
    display: block;
    overflow: visible;   /* antes hidden */
    max-height: none;    /* sin límite de altura */
}

/* Esta parte ya no se usa si no hay <img class="obra-card__imagen">,
   pero puedes dejarla o eliminarla según prefieras */
/*
.obra-card__imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.25s ease-out;
}

.obra-card:hover .obra-card__imagen {
    transform: scale(1.06);
}
*/


.obra-card__contenido {
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;   /* antes 0.25rem o similar */
    text-align: center;
}

.obra-card__titulo {
    font-size: 1rem;
    color: var(--color-primario);
    margin-bottom: 0rem;
}

.obra-card__artista {
    font-size: 0.9rem;
    color: var(--color-texto-suave);
    margin:0;
}

.obra-card__categoria {
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}

.obra-card__tecnica {
    opacity: 0.9;
}

.obra-card__precio {
    font-weight: 600;
    color: var(--color-secundario);
    font-size: 1rem;
    margin-top: 0.2rem; /* antes 0.4rem aprox. */
    margin-bottom: 0;
}

.obra-card__acciones {
    align-items: center;
    margin-top: 0.3rem;  /* antes 0.6rem aprox. */
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.btn--comprar {
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
}

/* ============================
   ARTISTAS
   ============================ */
.artistas {
    padding: 2.5rem 0;
    background-color: var(--color-fondo-suave);
}

.artistas h2 {
    font-size: 1.3rem;
    color: var(--color-primario);
    margin-bottom: 0.5rem;
}

.artistas p {
    max-width: 42rem;
    color: var(--color-texto-suave);
    font-size: 0.95rem;
}

/* ============================
   CONTACTO
   ============================ */
.contacto {
    padding: 3rem 0;
}

.contacto__contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 2.5rem;
}

.contacto h2 {
    font-size: 1.3rem;
    color: var(--color-primario);
    margin-bottom: 0.6rem;
}

.contacto p {
    color: var(--color-texto-suave);
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
}

.contacto__lista {
    list-style: none;
    font-size: 0.95rem;
    color: var(--color-texto);
}

.contacto__lista li + li {
    margin-top: 0.3rem;
}

.contacto__formulario {
    background-color: var(--color-fondo-suave);
    padding: 1.3rem 1.4rem;
    border-radius: var(--radio-borde);
    border: 1px solid var(--color-borde-suave);
    display: grid;
    gap: 0.7rem;
}

.campo label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
    color: var(--color-texto-suave);
}

.campo input,
.campo textarea {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border-radius: 4px;
    border: 1px solid var(--color-borde-suave);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 1px rgba(61, 90, 128, 0.2);
}

/* ============================
   FOOTER
   ============================ */
.footer {
    border-top: 1px solid var(--color-borde-suave);
    padding: 1.4rem 0;
    background-color: #ffffff;
}

.footer__contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}

.footer__legal a {
    color: var(--color-texto-suave);
}

.footer__legal a:hover {
    color: var(--color-acento);
}

.footer__social {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.footer__social a:hover {
    color: var(--color-acento);
}



/* ============================
   DETALLE DE OBRA
   ============================ */
.obra-detalle {
    padding: 2.5rem 0 3rem;
}

.obra-detalle__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: flex-start;
}

/* Wrapper del marco + fondo + botones */
.obra-detalle__marco-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
}

/* Fondo (pared) de la obra */
.obra-detalle__fondo {
    display: inline-block;
    padding: 2.2rem;
    border-radius: 32px;
    background-color: #ffffff;  /* celeste claro por defecto */
    max-width: 100%;
}

/* Contenedor obra + marco (referencia para position:absolute) */
.obra-detalle__imagen {
    position: relative;       /* IMPORTANTE para que el marco absoluto use este contenedor */
    display: inline-block;
    max-width: 100%;
}

/* Imagen de la OBRA */
.marco-real__obra {
    display: block;
    max-width: 80%;           /* obra más pequeña que el marco */
    height: auto;
    margin: 8% auto;          /* separa la obra del borde del marco */
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.25);
    background-color: #ffffff;
    border-radius: 4px;
    position: relative;
    z-index: 1;               /* por debajo del marco */
}

/* Imagen del MARCO superpuesto */
.marco-real__borde {
    position: absolute;
    inset: 0;                 /* ocupa todo el contenedor padre */
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 5;               /* por encima de la obra */

    /* Sombra proyectada del marco */
    filter: drop-shadow(-7px 7px 5px rgba(15, 23, 42, 1));
}

/* Controles marco + fondo */
.obra-detalle__controles-marco {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    /*box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);*/
}

/* Botones flecha deshabilitados */
.btn--marco-nav[disabled] {
    opacity: 0.35;
    pointer-events: none;
}


/* Botón toggle de marco */
.btn-marco-toggle {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icono texto (☐ / ☒) dentro del botón */
#iconToggleMarco {
    font-size: 20px;
    line-height: 1;
}




.obra-detalle__btn-marco,
.obra-detalle__btn-fondo {
    font-size: 0.85rem;
    padding-inline: 1rem;
}

/* Input color oculto visualmente */
.obra-detalle__color-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* Etiqueta “Marco actual” */
.obra-detalle__marco-etiqueta {
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    text-align: center;
}

/* ... (aquí puedes dejar el resto de reglas de texto, precio, etc. tal como las tenías) */

@media (max-width: 900px) {
    .obra-detalle__grid {
        grid-template-columns: 1fr;
    }

    .marco-real__obra {
        max-width: 82%;
        margin: 10% auto;
    }
}



/* ============================
   PAGINACIÓN
   ============================ */
.paginacion {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.paginacion__info {
    color: var(--color-texto-suave);
}

.paginacion__controles {
    display: flex;
    gap: 0.5rem;
}

.paginacion__btn {
    padding-inline: 1rem;
}

@media (max-width: 640px) {
    .paginacion {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Botón global de fondo un poco más arriba para no solaparse tanto */
    .btn-fondo-global {
        bottom: 3.5rem; /* ajusta según veas */
        right: 1rem;
    }
}
    
    


/* Números de paginación */
.paginacion__numeros {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;             /* NUEVO: permite varias líneas */
    max-width: 100%;             /* asegúrate de que no se salga en móvil */
}

.paginacion__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-borde-suave);
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    background-color: #ffffff;
    text-decoration: none;
    padding: 0 0.4rem;
}

.paginacion__numero:hover {
    border-color: var(--color-acento);
    color: var(--color-acento);
}

.paginacion__numero--activo {
    border-color: var(--color-secundario);
    background-color: var(--color-secundario);
    color: #ffffff;
    font-weight: 600;
    cursor: default;
}

/* En móviles, que no se rompa raro */
@media (max-width: 640px) {
    .paginacion__controles {
        flex-wrap: wrap;
    }
}






/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 900px) {
    .header__contenedor {
        flex-direction: column;
        gap: 0.4rem;
        align-items: flex-start;
    }

    .nav__lista {
        gap: 1rem;
        font-size: 0.9rem;
    }

    .contacto__contenedor {
        grid-template-columns: 1fr;
    }
}


/* ============================
   PÁGINA 404
   ============================ */
.error-404 {
    min-height: calc(100vh - 140px); /* alto aprox. sin header/footer */
    display: flex;
    align-items: center;
    padding: 3rem 0;
    background: radial-gradient(circle at top left, #f3f4ff 0, #ffffff 55%);
}

.error-404__section {
    width: 100%;
}

.error-404__contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

.error-404__texto h1 {
    font-size: 1.8rem;
    color: var(--color-primario);
    margin-bottom: 0.7rem;
}

.error-404__texto p {
    max-width: 32rem;
    color: var(--color-texto-suave);
    font-size: 0.98rem;
}

.error-404__codigo {
    font-size: 3.3rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-secundario);
    margin-bottom: 0.4rem;
}

.error-404__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.4rem;
}

.error-404__ilustracion {
    display: flex;
    justify-content: center;
}

.error-404__marco {
    position: relative;
    width: 260px;
    height: 260px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.04);
    background: linear-gradient(135deg, #fdf2f2, #eef2ff);
    box-shadow: 0 20px 40px rgba(15,23,42,0.16);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-404__marco-linea {
    position: absolute;
    background: rgba(255,255,255,0.5);
}

.error-404__marco-linea:nth-child(1) {
    top: 16px;
    left: 24px;
    right: 24px;
    height: 2px;
}

.error-404__marco-linea:nth-child(2) {
    bottom: 16px;
    left: 24px;
    right: 24px;
    height: 2px;
}

.error-404__marco-linea:nth-child(3) {
    top: 24px;
    bottom: 24px;
    left: 16px;
    width: 2px;
}

.error-404__marco-linea:nth-child(4) {
    top: 24px;
    bottom: 24px;
    right: 16px;
    width: 2px;
}

.error-404__marco-contenido {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.82);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    text-align: center;
    color: var(--color-primario);
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 10px 26px rgba(15,23,42,0.18);
}

/* Responsive 404 */
@media (max-width: 900px) {
    .error-404__contenedor {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .error-404__ilustracion {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .error-404 {
        padding: 2.5rem 0;
        min-height: auto;
    }

    .error-404__codigo {
        font-size: 2.6rem;
    }
}




   /* Recomendadas dentro de la 404 */
    .error-404__recomendadas {
        padding: 0 0 3rem;
        background-color: #ffffff;
}

    .error-404__recomendadas h2 {
        font-size: 1.3rem;
        color: var(--color-primario);
        margin-bottom: 0.4rem;
}

    .error-404__recomendadas-texto {
        font-size: 0.95rem;
        color: var(--color-texto-suave);
        margin-bottom: 1.4rem;
}







@media (max-width: 640px) {
    .contenedor {
        width: min(100% - 2rem, 100%);
    }

    .hero {
        padding-top: 3rem;
    }

    .header__contenedor {
        align-items: center;
    }

    .nav__lista {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer__contenedor {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Grid de obras en pantallas grandes (3 columnas fijas) */
@media (min-width: 1024px) {
    .grid-obras {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}





/* ============================
   PANEL ADMIN
   ============================ */
.admin {
    padding: 2.5rem 0 3rem;
    background-color: #f9fafb;
}

.admin__section h1 {
    font-size: 1.4rem;
    color: var(--color-primario);
    margin-bottom: 0.5rem;
}

.admin__intro {
    font-size: 0.95rem;
    color: var(--color-texto-suave);
    margin-bottom: 1.2rem;
}

.admin__formulario {
    background-color: #ffffff;
    border-radius: var(--radio-borde);
    border: 1px solid var(--color-borde-suave);
    padding: 1.4rem 1.6rem;
    display: grid;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.admin__formulario--login {
    max-width: 420px;
}

.admin__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 1.4rem;
    margin-bottom: 0.6rem;
}

.admin__alerta {
    padding: 0.8rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.admin__alerta--error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.admin__alerta--ok {
    background-color: #ecfdf3;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.admin__alerta ul {
    margin-left: 1.1rem;
    list-style: disc;
}

/* Responsive admin */
@media (max-width: 900px) {
    .admin__grid {
        grid-template-columns: 1fr;
    }
}


/* ============================
   ADMIN - PEDIDOS
   ============================ */
.admin__pedido-detalle {
    margin-bottom: 2rem;
    padding: 1.2rem 1.4rem;
    background-color: #ffffff;
    border-radius: var(--radio-borde);
    border: 1px solid var(--color-borde-suave);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.admin__pedido-fecha {
    font-size: 0.9rem;
    color: var(--color-texto-suave);
    margin-bottom: 0.8rem;
}

.admin__pedido-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.admin__pedido-grid h3 {
    font-size: 0.95rem;
    color: var(--color-primario);
    margin-bottom: 0.4rem;
}

.admin__pedido-comentarios {
    margin-bottom: 1rem;
}

.admin__pedido-comentarios h3 {
    font-size: 0.95rem;
    color: var(--color-primario);
    margin-bottom: 0.3rem;
}

.admin__pedido-total {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primario);
}

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


/* ============================
   ADMIN - TABLA LISTADO
   ============================ */
.admin__tabla-wrapper {
    margin-top: 1rem;
    overflow-x: auto;
}

.admin__tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background-color: #ffffff;
    border-radius: var(--radio-borde);
    overflow: hidden;
    border: 1px solid var(--color-borde-suave);
}

.admin__tabla thead {
    background-color: #f3f4f6;
}

.admin__tabla th,
.admin__tabla td {
    padding: 0.55rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.admin__tabla th {
    font-weight: 600;
    color: #374151;
}

.admin__tabla tbody tr:hover {
    background-color: #f9fafb;
}

.admin__acciones {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

/* Botones pequeños y de peligro */
.btn--pequeno {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
}

.btn--peligro {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.btn--peligro:hover {
    background-color: #dc2626;
    border-color: #dc2626;
}

.campo__ayuda {
    font-size: 0.8rem;
    color: var(--color-texto-suave);
    margin-top: 0.15rem;
}

/* FORMULARIO DENTRO DE LA TARJETA DE OBRA (BOTÓN CARRITO) */
.obra-card__form-carrito {
    display: inline-block;
    margin: 0;
}

/* ESTILOS CARRITO */
.carrito {
    padding: 2.5rem 0 3rem;
    background-color: #f9fafb;
}

.carrito__intro {
    font-size: 0.95rem;
    color: var(--color-texto-suave);
    margin-bottom: 1.4rem;
}

.carrito__tabla-wrapper {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.carrito__tabla {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    border-radius: var(--radio-borde);
    border: 1px solid var(--color-borde-suave);
}

.carrito__tabla th,
.carrito__tabla td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    font-size: 0.9rem;
}

.carrito__tabla th {
    background-color: #f3f4f6;
    color: #374151;
    font-weight: 600;
}

.carrito__producto {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.carrito__thumb {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.carrito__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carrito__titulo {
    font-weight: 500;
    color: var(--color-primario);
    font-size: 0.95rem;
}

.carrito__artista {
    font-size: 0.8rem;
    color: var(--color-texto-suave);
}

.carrito__cantidad-input {
    width: 70px;
    padding: 0.25rem 0.35rem;
    border-radius: 4px;
    border: 1px solid var(--color-borde-suave);
    font-size: 0.85rem;
}

.carrito__resumen {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.carrito__total {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primario);
}

.carrito__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.carrito__cantidad-celda span {
    display: inline-block;
    min-width: 2rem;
    text-align: center;
}

.carrito__envio {
    margin-bottom: 1.5rem;
}

.carrito__envio h3 {
    font-size: 1.05rem;
    color: var(--color-primario);
    margin-bottom: 0.4rem;
}

.carrito__envio-opciones {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--color-texto);
}

.carrito__envio-opciones label {
    display: block;
    cursor: pointer;
}

.carrito__envio-opciones input[type="radio"] {
    margin-right: 0.35rem;
}

.carrito__envio-opciones span {
    display: inline-block;
    margin-left: 1.5rem;
    font-size: 0.82rem;
    color: var(--color-texto-suave);
}

.carrito__leyenda-envio {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}



/* Botón fantasma para "Vaciar carrito" */
.btn--fantasma {
    border-color: transparent;
    background-color: transparent;
    color: var(--color-texto-suave);
}

.btn--fantasma:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Botón de peligro ya lo definimos: btn--peligro y btn--pequeno */

/* Responsive carrito */
@media (max-width: 640px) {
    .carrito__resumen {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================
   CHECKOUT
   ============================ */
.checkout {
    padding: 2.5rem 0 3rem;
    background-color: #f9fafb;
}

.checkout__intro {
    font-size: 0.95rem;
    color: var(--color-texto-suave);
    margin-bottom: 1.4rem;
}

.checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: flex-start;
}

.checkout__col h2 {
    font-size: 1.1rem;
    color: var(--color-primario);
    margin-bottom: 0.6rem;
}

.checkout__total {
    margin-top: 0.8rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primario);
}

.checkout__formulario {
    background-color: #ffffff;
    border-radius: var(--radio-borde);
    border: 1px solid var(--color-borde-suave);
    padding: 1.3rem 1.6rem;
    display: grid;
    gap: 0.7rem;
}

/* Responsive checkout */
@media (max-width: 900px) {
    .checkout__grid {
        grid-template-columns: 1fr;
    }
}



.checkout__envio-opciones {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--color-texto);
}

.checkout__envio-opciones label {
    display: block;
    cursor: pointer;
}

.checkout__envio-opciones input[type="radio"] {
    margin-right: 0.4rem;
}

.checkout__envio-opciones span {
    display: inline-block;
    margin-left: 1.5rem;
    font-size: 0.82rem;
    color: var(--color-texto-suave);
}

.checkout__leyenda-envio {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}




/* Tamaño en tarjetas de obra (catálogo y 404) */
.obra-card__tamano {
    font-size: 0.8rem;
    color: var(--color-texto-suave);
}

/* Tarjeta seleccionada: leve color azul de fondo y borde */
.obra-card--selected {
    background-color: #eff6ff;            /* azul muy claro */
    border-color: #2563eb;                /* azul del marco de selección */
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
}





/* Tamaño en detalle de obra */
.obra-detalle__tamano {
    font-size: 0.9rem;
    color: var(--color-texto-suave);
    margin-bottom: 0.6rem;
}

/* Tamaño en carrito y checkout */
.carrito__tamano,
.checkout__tamano {
    font-size: 0.8rem;
    color: var(--color-texto-suave);
}

.checkout-confirm {
    margin-top: 1.8rem;
}

.checkout__total--confirm {
    margin-top: 0.9rem;
}

/* Wrapper que contiene la obra y el marco superpuesto */
.marco-wrap {
    display: inline-block;
    position: relative;
    padding: 40px;             /* grosor del marco en px */
    box-sizing: content-box;
}

/* Imagen de la obra */
.marco-obra__imagen {
    display: block;
    max-width: 100%;
    height: auto;

    /* Sombra de la obra */
    box-shadow: 0 22px 36px rgba(15, 23, 42, 0.45);
}

/* Marco superpuesto (overlay) */
.marco-obra {
    position: absolute;
    inset: 0;
    border: 40px solid transparent; /* mismo grosor que el padding */
    box-sizing: border-box;
    pointer-events: none;
}

/* Cuando ocultamos el marco */
.marco-obra--oculto {
    display: none;
}

/* Estilos de cada marco: 1 PNG por diseño */
.marco--01 {
    border-image-source: url('../Marcos/Marco1.png');
    border-image-slice: 43;
    border-image-repeat: stretch;
    filter: drop-shadow(5px 5px 10px rgba(15, 23, 42, 1));
}



.marco--02 {
    border-image-source: url('../Marcos/Marco3.png');
    border-image-slice: 43;
    border-image-repeat: stretch;
    filter: drop-shadow(5px 5px 10px rgba(15, 23, 42, 1));
}

.marco--03 {
    border-image-source: url('../Marcos/Marco5.png');
    border-image-slice: 35;
    border-image-repeat: stretch;
    filter: drop-shadow(5px 5px 10px rgba(15, 23, 42, 1));
}

.marco--04 {
    border-image-source: url('../Marcos/Marco6.png');
    border-image-slice: 35;          /* píxeles desde el borde hasta la zona transparente */
    border-image-repeat: stretch;    /* o round, si prefieres */
    filter: drop-shadow(5px 5px 10px rgba(15, 23, 42, 1));
}

.marco--05 {
    border-image-source: url('../Marcos/Marco7.png');
    border-image-slice: 43;
    border-image-repeat: stretch;
    filter: drop-shadow(5px 5px 10px rgba(15, 23, 42, 1));
}

.marco--06 {
    border-image-source: url('../Marcos/Marco17.png');
    border-image-slice: 40;
    border-image-repeat: stretch;
    filter: drop-shadow(5px 5px 10px rgba(15, 23, 42, 1));
}

.marco--07 {
    border-image-source: url('../Marcos/Marco8.png');
    border-image-slice: 43;
    border-image-repeat: stretch;
    filter: drop-shadow(5px 5px 10px rgba(15, 23, 42, 1));
}

.marco--08 {
    border-image-source: url('../Marcos/Marco9.png');
    border-image-slice: 43;
    border-image-repeat: stretch;
    filter: drop-shadow(5px 5px 10px rgba(15, 23, 42, 1));
}

.marco--09 {
    border-image-source: url('../Marcos/Marco10.png');
    border-image-slice: 43;
    border-image-repeat: stretch;
    filter: drop-shadow(5px 5px 10px rgba(15, 23, 42, 1));
}

/* Marco 2: fino, negro, generado por CSS */
.marco--10 {
    border-image: none;      /* no usar PNG */
    filter: none;            /* sin drop-shadow en el rectángulo */
}

/* El trazo real del marco 2 lo dibuja ::before */
.marco--10::before {
    content: "";
    position: absolute;
    inset: -9px;             /* coincide con el padding de .marco-wrap / grosor del marco */
    border: 10px solid #000000;  /* grosor y color del marco fino */
    box-sizing: border-box;

    /* Sombra proyectada de ese trazo fino */
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.4);
    pointer-events: none;
}

/* Marco 3: fino, blanco, generado por CSS */
.marco--11 {
    border-image: none;
    filter: none;
}

.marco--11::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 10px solid #ffffff;   /* marco blanco fino */
    box-sizing: border-box;

    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.35);
    pointer-events: none;
}

/* Marco 2: fino, negro, generado por CSS */
.marco--12 {
    border-image: none;      /* no usar PNG */
    filter: none;            /* sin drop-shadow en el rectángulo */
}

/* El trazo real del marco 2 lo dibuja ::before */
.marco--12::before {
    content: "";
    position: absolute;
    inset: -9px;             /* coincide con el padding de .marco-wrap / grosor del marco */
    border: 10px solid #EECB6C;  /* grosor y color del marco fino */
    box-sizing: border-box;

    /* Sombra proyectada de ese trazo fino */
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.4);
    pointer-events: none;
}



/* ============================
   OBRAS SIMILARES EN DETALLE
   ============================ */
.similares {
    padding: 2.5rem 0 3rem;
    border-top: 1px solid var(--color-borde-suave);
    margin-top: 2rem;
}

.similares h2 {    font-size: 1.3rem;
    color: var(--color-primario);
    margin-bottom: 1.2rem;
}

.similares__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.sim-card {
    background-color: #ffffff;
    border-radius: var(--radio-borde);
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sim-card__imagen-wrapper {
    display: block;
    overflow: hidden;
    max-height: 220px;
}

.sim-card__imagen-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease-out;
}

.sim-card:hover .sim-card__imagen-wrapper img {
    transform: scale(1.05);
}

.sim-card__contenido {
    padding: 0.75rem 0.9rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: center;
}

.sim-card__titulo {
    font-size: 0.95rem;
    color: var(--color-primario);
}

.sim-card__artista {
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}

.sim-card__precio {
    margin-top: 0.3rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-secundario);
}

/* Aviso global al añadir al carrito */
/* CONTENEDOR de avisos de carrito (se apilan en columna) */
.carrito-avisos {
    position: fixed;
    left: 0;
    right: 0;
    top: 56px;             /* escritorio: justo debajo del header */
    z-index: 160;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    pointer-events: none;
}

/* Móvil: bajar más, para quedar por debajo del header + filtros sticky */
@media (max-width: 640px) {
    .carrito-avisos {
        top: 120px;        /* prueba 120; si sigue tapado, sube a 130–140 */
    }
}

/* Cada aviso individual */
.carrito-aviso {
    background-color: #16a34a; /* verde éxito */
    color: #ffffff;
    text-align: center;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.35);
    max-width: min(420px, 100% - 2rem);
    pointer-events: auto;

    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.carrito-aviso--visible {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

.carrito-aviso--error {
    background-color: #b91c1c; /* rojo error */
}

/* Contenedor de métodos de pago (radio con iconos) */
.checkout__metodos-pago {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Cada método de pago como "tarjeta" clicable */
.metodo-pago {
    cursor: pointer;
}

.metodo-pago input[type="radio"] {
    display: none;
}

.metodo-pago__body {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--color-borde-suave);
    background-color: #ffffff;
    font-size: 0.9rem;
    color: var(--color-texto);
    transition: all 0.15s ease-out;
}

.metodo-pago__icon {
    font-size: 1.1rem;
}

/* Estado seleccionado (cuando el radio está checked) */
.metodo-pago input[type="radio"]:checked + .metodo-pago__body {
    border-color: var(--color-secundario);
    background-color: #fff7ed; /* un tono cálido suave */
    box-shadow: 0 0 0 1px rgba(224, 122, 95, 0.35);
}

/* Hover opcional */
.metodo-pago__body:hover {
    border-color: var(--color-acento);
}

.paypal-form {
    margin-top: 0.5rem;
}

.checkout-metodos-final {
    margin-top: 2rem;
}

.checkout-metodos-final h2 {
    font-size: 1.3rem;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

.checkout__metodos-final-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.checkout-metodo-final {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.9rem 1rem 1rem;
    background-color: #ffffff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    text-align: center;
}

.checkout-metodo-final__icono {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
}

.checkout-metodo-final h3 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
    color: var(--color-primario);
}

.checkout-metodo-final__importe {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.4rem 0 0.6rem;
}
/* Modal admin obras */
/* Contenedor del modal (fondo oscuro) */
/* Fondo del modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 3rem 1rem;
    z-index: 1000;
}

.modal--visible {
    display: flex;
}

/* Caja blanca del modal (desktop) */
.modal__contenido {
    background: #ffffff;
    border-radius: 8px;
    padding: 1.5rem 1.75rem 1.75rem;
    box-shadow: 0 15px 40px rgba(0,0,0,.35);
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    position: relative;
}

/* Botón X */
.modal__cerrar {
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: #4b5563;
}
.modal__cerrar:hover {
    color: #111827;
}

/* Layout del formulario dentro del modal */
.admin-obras__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 1rem;
}

/* Campos compactos en columnas */
.admin-obras__form .campo {
    flex: 1 1 240px;
    max-width: 280px;
}
.admin-obras__form .campo textarea {
    flex-basis: 100%;
    max-width: 100%;
}
.admin-obras__form .campo input,
.admin-obras__form .campo textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Wrapper del botón de enviar (para hacer sticky) */
.admin-obras__submit-wrapper {
    flex-basis: 100%;
    max-width: 100%;
    margin-top: 0.5rem;
}

/* --- Versión móvil --- */
@media (max-width: 640px) {
    .modal {
        align-items: stretch;
        padding: 0;
    }

    .modal__contenido {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .admin-obras__form {
        padding-bottom: 4.5rem; /* espacio para el botón fijo */
    }

    .admin-obras__submit-wrapper {
        position: sticky;
        bottom: 0;
        background: #ffffff;
        padding-top: 0.5rem;
        padding-bottom: 0.75rem;
        border-top: 1px solid #e5e7eb;
    }
}

.admin-obras__form-eliminar {
    margin-top: 0.5rem;
}










.btn--pequeno {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
}

.btn--peligro {
    background-color: #b91c1c;
    color: #fff;
}
.btn--peligro:hover {
    background-color: #7f1d1d;
}