/* =====================================================================
   TEMA LUNA · Orbit CMS
   ---------------------------------------------------------------------
   Para un estudio creativo (ilustración, diseño editorial, portadas).
   Sigue el patrón de las webs de ilustradoras editoriales: cabecera
   blanca con una llamada a la acción siempre visible, portada de un solo
   golpe con la obra al lado del titular, títulos serif enormes con la
   última palabra en cursiva, servicios en FILAS grandes con su imagen y
   el contacto en una tarjeta centrada.

   --color-primario (botones, logotipo, detalles: el coral de Clara) y
   --color-secundario (títulos y textos destacados: su verde oliva) los
   inyecta el layout desde el panel. El resto —el papel crema, el
   verde claro de los fondos (#CCD188, el tercer color de Clara), la
   tinta— es fijo del tema.

   Índice
     1. Tokens y reset
     2. Contenedor y utilidades
     3. Botones
     4. Cabecera y navegación
     5. Portada
     6. Cabecera de página y título de firma
     7. Secciones y contenido del editor
     8. Retrato (página con imagen) y tarjetas
     9. Contacto
    10. Pantallas de mensaje (404, mantenimiento)
    11. Pie
    12. Barra de vista previa
    13. Módulos: comisiones, galería, formularios, reservas
    14. Responsive
   ===================================================================== */


/* =====================================================================
   1. TOKENS Y RESET
   ===================================================================== */

:root {
    /* Respaldo por si el layout no inyectara los colores del panel. */
    --color-primario: #fa7b7b;
    --color-secundario: #56662a;

    /* Para lo que lleva texto encima o ES texto: siempre legible aunque
       el cliente elija un primario claro (docs/guias/crear-tema.md). */
    --acento: color-mix(in srgb, var(--color-primario) 85%, #000);

    /* Neutros fijos del tema. */
    --papel:        #fffcf2;
    /* El verde claro de Clara (#CCD188), y una versión más suave. */
    --verde-claro:  #ccd188;
    --crema:        #f4f5e1;
    --tinta:        #3a3f1d;
    --tinta-suave:  #6c6f48;
    --borde:        #ebe2bf;

    /* Los títulos, con el color secundario (el verde de Clara). */
    --titulos: var(--color-secundario);

    /* Lo que leen los módulos (comisiones) para encajar con el tema. */
    --color-borde: var(--borde);
    --color-fondo: #fff;
    --color-fondo-suave: #fffaf0;

    --fondo-pastel: linear-gradient(120deg, var(--crema) 0%, color-mix(in srgb, var(--verde-claro) 70%, #fff) 100%);

    --ancho:          1200px;
    --ancho-angosto:  760px;
    --alto-cabecera:  84px;
    --radio:          12px;
    --radio-grande:   22px;
    --sombra:         0 24px 50px -28px rgba(42, 36, 64, .35);

    --fuente-display: "DM Serif Display", Georgia, "Times New Roman", serif;
    --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --paso: .25s cubic-bezier(.4, 0, .2, 1);
}

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

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

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 17px;
    line-height: 1.65;
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    line-height: 1.08;
    font-family: var(--fuente-display);
    font-weight: 400;
    color: var(--titulos);
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

h1 em, h2 em, h3 em { font-style: italic; }

p { margin: 0 0 1.15em; }

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

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


/* =====================================================================
   2. CONTENEDOR Y UTILIDADES
   ===================================================================== */

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.contenedor--angosto { max-width: var(--ancho-angosto); }

.apagado { color: var(--tinta-suave); }

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

.saltar {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 100;
    padding: .6rem 1rem;
    color: #fff;
    background: var(--acento);
    border-radius: var(--radio);
}

.saltar:focus { top: 1rem; }

.icono { flex: 0 0 auto; }


/* =====================================================================
   3. BOTONES
   ---------------------------------------------------------------------
   Píldoras. El primario lleva el color de la marca; el de contorno, para
   acciones secundarias.
   ===================================================================== */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .65rem 1.4rem;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--acento);
    background: transparent;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--paso), color var(--paso), transform var(--paso), box-shadow var(--paso);
}

.boton:hover { text-decoration: none; transform: translateY(-1px); }

.boton--primario {
    color: #fff;
    background: var(--color-primario);
    background: var(--acento);
    border-color: transparent;
    box-shadow: 0 10px 24px -14px var(--color-primario);
}

.boton--primario:hover { color: #fff; background: color-mix(in srgb, var(--acento) 85%, #000); }

.boton--contorno:hover { color: #fff; background: var(--acento); border-color: var(--acento); }

.boton--grande { min-height: 52px; padding: .9rem 2rem; font-size: 1rem; }


/* =====================================================================
   4. CABECERA Y NAVEGACIÓN
   ===================================================================== */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    transition: box-shadow var(--paso);
}

.cabecera--sombra { box-shadow: 0 6px 24px -14px rgba(42, 36, 64, .35); }

.cabecera__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--alto-cabecera);
}

.marca {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--color-primario);
}

.marca:hover { text-decoration: none; }

.marca__luna { color: var(--color-primario); display: inline-flex; transform: rotate(-12deg); }

.marca__nombre {
    display: flex;
    flex-direction: column;
    font-family: var(--fuente-display);
    line-height: .92;
}

.marca__linea { font-size: 1.2rem; }
.marca__linea--grande { font-size: 1.75rem; }

.marca__logo { height: 60px; width: auto; }

.navegacion {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.navegacion__lista {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navegacion__item { position: relative; }

.navegacion__enlace {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .5rem .75rem;
    font-size: .97rem;
    color: var(--tinta);
    border-radius: 999px;
}

.navegacion__enlace:hover { color: var(--acento); text-decoration: none; }
.navegacion__enlace.es-actual { color: var(--acento); font-weight: 600; }

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    margin: 0;
    padding: .5rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--paso), visibility var(--paso), transform var(--paso);
}

.navegacion__item--con-hijos:hover .submenu,
.navegacion__item--con-hijos:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

.submenu a {
    display: block;
    padding: .55rem .8rem;
    color: var(--tinta);
    border-radius: 8px;
}

.submenu a:hover { color: var(--acento); background: var(--color-fondo-suave); text-decoration: none; }

.idiomas {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 3px;
    list-style: none;
    border: 1px solid var(--borde);
    border-radius: 999px;
}

.idiomas__enlace {
    display: block;
    padding: .2rem .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--tinta-suave);
    border-radius: 999px;
}

.idiomas__enlace:hover { color: var(--acento); text-decoration: none; }
.idiomas__enlace.es-actual { color: #fff; background: var(--acento); }

.menu-boton {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--color-primario);
    background: transparent;
    border: 1px solid var(--borde);
    border-radius: 50%;
    cursor: pointer;
}


/* =====================================================================
   5. PORTADA (la de Clara)
   ---------------------------------------------------------------------
   Una ESCENA a sangre —su ilustración de estanterías— con el borde de
   abajo en arco y el saludo centrado encima; por debajo del arco asoman
   las filas de portadas, que se mueven solas (la galería en modo
   carrusel). El arco va por encima de las portadas (z-index): son «las
   imágenes de detrás».
   ===================================================================== */

.inicio { position: relative; overflow: hidden; }

.inicio__escena {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    min-height: clamp(420px, 72vh, 680px);
    padding-block: 3rem 6rem;
    text-align: center;
    background: var(--fondo-pastel);
    /* El arco: una elipse más ancha que la escena, cortada por abajo. */
    clip-path: ellipse(85% 100% at 50% 0);
}

.inicio__fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Un velo crema sobre la ilustración: la deja «de fondo», como en el
   boceto, y el saludo coral se lee aunque la estantería esté llena. */
.inicio__escena::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 252, 240, .42);
    pointer-events: none;
}

.inicio__texto { z-index: 1; }

/* Un velo claro detrás del texto: sobre la ilustración, el saludo tiene
   que leerse igual de bien en cualquier estantería. */
.inicio__texto {
    position: relative;
    max-width: 44rem;
}

.inicio__texto::before {
    content: "";
    position: absolute;
    inset: -3rem -4rem;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(255, 252, 240, .95) 55%, rgba(255, 252, 240, 0));
}

.inicio__saludo {
    margin: 0 auto 1.75rem;
    font-family: var(--fuente-display);
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    line-height: 1.3;
    color: var(--acento);
}

.inicio__acciones {
    display: grid;
    justify-items: center;
    gap: .9rem;
}

.inicio__acciones .boton { min-width: 15rem; }

/* Las filas de portadas suben por debajo del arco: lo que se ve de
   ellas a los lados es lo que el arco deja al descubierto. */
.inicio--con-portadas .inicio__portadas {
    position: relative;
    z-index: 1;
    margin-top: clamp(-9rem, -12vw, -4rem);
    padding-bottom: 1rem;
}

.inicio__fila + .inicio__fila { margin-top: 1rem; }

/* En la portada el nombre de la categoría sobra: son sólo imágenes. */
.inicio__fila .galeria-publica__titulo { display: none; }

/* Dos clases para ganar a galeria.css, que se carga después. */
.inicio__fila .galeria-publica__carrusel .galeria-publica__miniatura {
    width: clamp(120px, 15vw, 200px);
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    box-shadow: 0 14px 28px -18px rgba(58, 63, 29, .55);
}

.inicio__fila .galeria-publica__carrusel-pista { gap: 1rem; padding-block: .5rem; }

/* La segunda fila, en sentido contrario: así no parece una cinta sola. */
.inicio__fila:nth-child(even) .galeria-publica__carrusel-pista { animation-direction: reverse; }

/* «Sobre mí» en la portada: centrado, con el título grande. */
.inicio__sobre { text-align: left; }
.inicio__sobre h2 { text-align: center; font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: .6em; }


/* =====================================================================
   6. CABECERA DE PÁGINA Y TÍTULO DE FIRMA
   ===================================================================== */

.cabecera-pagina {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
}

/* La palabra gigante y casi transparente detrás del título. */
.cabecera-pagina__fondo {
    position: absolute;
    top: 50%;
    right: -1rem;
    transform: translateY(-50%);
    font-family: var(--fuente-display);
    font-size: clamp(6rem, 19vw, 16rem);
    line-height: 1;
    white-space: nowrap;
    color: var(--titulos);
    opacity: .05;
    pointer-events: none;
    user-select: none;
}

.cabecera-pagina .contenedor { position: relative; }

.cabecera-pagina__titulo { margin-bottom: .3em; }

.cabecera-pagina__subtitulo {
    max-width: 34rem;
    margin: 0;
    font-size: 1.12rem;
    color: var(--tinta-suave);
}

.titulo-luna em { font-style: italic; }


/* =====================================================================
   7. SECCIONES Y CONTENIDO DEL EDITOR
   ===================================================================== */

.seccion { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.cabecera-pagina + .seccion { padding-top: 0; }
.seccion--bloque + .seccion--bloque { padding-top: 0; }

.contenido-editable { font-size: 1.05rem; }
.contenido-editable--grande { font-size: 1.15rem; }
.contenido-editable > *:first-child { margin-top: 0; }
.contenido-editable h2 { margin-top: 1.6em; }
.contenido-editable h3 { margin-top: 1.4em; }
.contenido-editable ul, .contenido-editable ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.contenido-editable li { margin-bottom: .35em; }

.contenido-editable blockquote {
    margin: 1.8em 0;
    padding: .2em 0 .2em 1.4em;
    font-family: var(--fuente-display);
    font-size: 1.45rem;
    font-style: italic;
    line-height: 1.35;
    color: var(--titulos);
    border-left: 3px solid var(--color-primario);
}

.contenido-editable img { border-radius: var(--radio); margin-block: 1.5em; }
.contenido-editable figure { margin: 1.5em 0; }
.contenido-editable figcaption { font-size: .88rem; color: var(--tinta-suave); margin-top: .5em; }

.contenido-editable table { width: 100%; border-collapse: collapse; margin-bottom: 1.2em; }
.contenido-editable th, .contenido-editable td { padding: .6rem .75rem; border-bottom: 1px solid var(--borde); text-align: left; }

.contenido-editable--angosto { max-width: 68ch; margin-inline: auto; }


/* =====================================================================
   8. RETRATO (PÁGINA CON IMAGEN) Y TARJETAS
   ===================================================================== */

.retrato {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.retrato__imagen {
    width: 100%;
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra);
    background: var(--fondo-pastel);
}

.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1.75rem;
}

.tarjeta-enlace {
    display: block;
    color: inherit;
}

.tarjeta-enlace:hover { text-decoration: none; }

.tarjeta-enlace__imagen-envoltorio {
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: var(--radio-grande);
    background: var(--fondo-pastel);
}

.tarjeta-enlace__imagen { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--paso); }
.tarjeta-enlace:hover .tarjeta-enlace__imagen { transform: scale(1.04); }

.tarjeta-enlace h2 { font-size: 1.6rem; margin-bottom: .3em; }
.tarjeta-enlace p { color: var(--tinta-suave); }


/* =====================================================================
   9. CONTACTO
   ===================================================================== */

.contacto-luna {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    background: var(--fondo-pastel);
}

.contacto-luna__tarjeta {
    max-width: 880px;
    margin-inline: auto;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    background: #fff;
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra);
}

.contacto-luna__titulo { text-align: center; margin-bottom: .8em; }

.contacto-luna__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
    font-size: .98rem;
}

.contacto-luna__directo {
    padding-left: 2rem;
    border-left: 1px solid var(--borde);
    color: var(--tinta-suave);
}

.contacto-luna__directo p { margin-bottom: .6em; }

.contacto-luna__bloque + .contacto-luna__bloque { margin-top: 2rem; }


/* =====================================================================
   10. PANTALLAS DE MENSAJE (404, MANTENIMIENTO)
   ===================================================================== */

.pantalla-mensaje { background: var(--fondo-pastel); min-height: 60vh; display: flex; align-items: center; }
.pantalla-mensaje--oscura { min-height: 100vh; }
.pantalla-mensaje__interior { max-width: 640px; text-align: center; }
.pantalla-mensaje__codigo { font-family: var(--fuente-display); font-size: 6rem; line-height: 1; color: var(--color-primario); margin: 0; }
.pantalla-mensaje__destacado { font-family: var(--fuente-display); font-size: 1.6rem; color: var(--titulos); }
.pantalla-mensaje__acciones { margin-top: 1.75rem; }
.pantalla-mensaje__menu { margin-top: 2rem; color: var(--tinta-suave); }
.pantalla-mensaje__menu ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; }


/* =====================================================================
   11. PIE
   ===================================================================== */

/* Coral, como en el boceto de Clara: su color tal cual, con el texto
   en blanco y algo más grueso para que se lea sobre un coral claro. */
.pie {
    padding-top: 3.5rem;
    text-align: center;
    color: #fff;
    font-weight: 600;
    background: var(--color-primario);
}

.pie a { color: #fff; }

.pie__interior { display: grid; justify-items: center; gap: 1rem; }

.pie__luna { color: #fff; display: inline-flex; transform: rotate(-12deg); }
/* El MISMO logo del panel, en blanco: un logo coral sobre el pie coral
   no se vería, y así no hace falta un segundo ajuste de logotipo. */
.pie__logo { height: 96px; width: auto; filter: brightness(0) invert(1); }

.pie__eslogan {
    max-width: 30rem;
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    line-height: 1.2;
}

.pie__contacto p { margin: 0 0 .4em; }

.pie__titulo {
    margin: .5rem 0 .5rem;
    font-family: var(--fuente);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: inherit;
    opacity: .85;
}

.pie__redes { display: flex; justify-content: center; gap: .9rem; }

.pie__legal {
    margin-top: 2.5rem;
    padding-block: 1.25rem;
    font-size: .82rem;
    border-top: 1px solid rgba(255, 255, 255, .3);
}


/* =====================================================================
   12. BARRA DE VISTA PREVIA
   ===================================================================== */

.vista-previa {
    position: relative;
    z-index: 60;
    padding: .75rem 1.5rem;
    text-align: center;
    font-size: .9rem;
    color: #fff;
    background: var(--acento);
}

.vista-previa a { color: #fff; font-weight: 700; text-decoration: underline; margin-left: .5em; }


/* =====================================================================
   13. MÓDULOS
   ---------------------------------------------------------------------
   Ninguno tiene por qué estar instalado: si no lo está, estas reglas no
   se aplican nunca.
   ===================================================================== */

/* --- Comisiones: servicios en filas grandes ----------------------------
   El módulo pinta una rejilla de tarjetas; aquí, como en la referencia,
   cada servicio es una fila: la imagen grande sobre su panel de color y,
   al lado, nombre, «desde», lo que incluye y el botón. Dos clases para
   ganar a las del módulo (una), que se cargan después. */

.seccion--bloque .encargo-tarjetas {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    margin-top: 0;
}

.seccion--bloque .encargo-tarjeta {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    overflow: visible;
    background: transparent;
    border: 0;
}

.seccion--bloque .encargo-tarjeta__imagen {
    aspect-ratio: 4 / 3;
    border-radius: var(--radio-grande);
    background: var(--fondo-pastel);
    box-shadow: var(--sombra);
}

.seccion--bloque .encargo-tarjeta__cuerpo { padding: 0; }

.seccion--bloque .encargo-tarjeta__cabecera { flex-direction: column; align-items: flex-start; gap: .1rem; }

.seccion--bloque .encargo-tarjeta__nombre {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1.1;
}

.seccion--bloque .encargo-tarjeta__precio {
    font-weight: 400;
    font-style: italic;
    color: var(--tinta-suave);
}

.seccion--bloque .encargo-tarjeta__duracion { color: var(--tinta-suave); }

/* En su página, el título del bloque repite el de la página. */
.plantilla-pagina .encargo-catalogo > h2 { display: none; }

/* Dentro de la tarjeta de contacto, el formulario tampoco necesita el suyo. */
.contacto-luna .encargo > h2 { display: none; }

.incluye__marca { color: var(--color-primario); }

/* --- Formularios (comisiones y contacto) --------------------------------- */

.formulario, .campo-web { max-width: 100%; }

.formulario__fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 1.25rem;
}

.campo-web {
    display: block;
    margin-bottom: 1.25rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.campo-web label,
.campo-web legend {
    display: block;
    margin-bottom: .4em;
    padding: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--tinta);
}

.campo-web input,
.campo-web textarea,
.campo-web select {
    width: 100%;
    min-height: 48px;
    padding: .7rem 1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--tinta);
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    transition: border-color var(--paso), box-shadow var(--paso);
}

.campo-web select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 1.1rem;
}

.campo-web textarea { min-height: 140px; resize: vertical; }

.campo-web input:focus, .campo-web textarea:focus, .campo-web select:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 18%, transparent);
}

.campo-web .campo__error { color: #b3413a; font-size: .85rem; margin-top: .35em; }

.trampa-web { position: absolute; left: -9999px; }

.aviso-web {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    background: var(--color-fondo-suave);
}

.aviso-web--exito { border-color: #8fc9a3; background: #eef8f1; }
.aviso-web--error, .aviso-web--aviso { border-color: var(--color-primario); background: #fdf6e9; }

/* --- Galería: el portfolio ----------------------------------------------- */

/* Con `.seccion--bloque` delante: galeria.css se carga DESPUÉS que esta
   hoja, y con una sola clase sus reglas ganarían (miniaturas cuadradas
   de 160 px). */
.seccion--bloque .galeria-publica__titulo { font-size: 1.6rem; margin: 0 0 1.25rem; }

.seccion--bloque .galeria-publica__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 1.75rem;
}

/* Portadas de libro: más altas que anchas. */
.seccion--bloque .galeria-publica__miniatura {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: var(--radio-grande);
    background: var(--fondo-pastel);
    box-shadow: var(--sombra);
    cursor: pointer;
}

.galeria-publica__miniatura img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--paso); }
.galeria-publica__miniatura:hover img { transform: scale(1.05); }

.lightbox { border: none; padding: 0; max-width: 90vw; max-height: 90vh; background: transparent; }
.lightbox::backdrop { background: rgba(42, 36, 64, .92); }
.lightbox__marco { position: relative; }
.lightbox__imagen { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: var(--radio); }
.lightbox__figura { margin: 0; }
.lightbox__descripcion { color: #fff; text-align: center; padding-top: .75rem; }

.lightbox__cerrar, .lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background: rgba(42, 36, 64, .65);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.lightbox__cerrar { top: -1rem; right: -1rem; }
.lightbox__nav--anterior { left: -1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--siguiente { right: -1rem; top: 50%; transform: translateY(-50%); }

/* --- Reservas: calendario y horas (por si se activa) ---------------------- */

.calendario { max-width: 26rem; margin-bottom: 1.5rem; }
.calendario__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.calendario__titulo { font-family: var(--fuente-display); font-size: 1.3rem; margin: 0; }
.calendario__nav { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid var(--borde); border-radius: 50%; cursor: pointer; }
.calendario__nav:disabled { opacity: .35; cursor: not-allowed; }
.calendario__semana, .calendario__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.calendario__semana { font-size: .72rem; color: var(--tinta-suave); margin-bottom: .4rem; }
.calendario__dia { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--borde); border-radius: 50%; background: #fff; cursor: pointer; font-size: .85rem; }
.calendario__dia--fuera-de-mes { visibility: hidden; }
.calendario__dia--deshabilitado { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.calendario__dia--seleccionado { color: #fff; background: var(--acento); border-color: var(--acento); }
.horas__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: .6rem; }
.horas__grid button { padding: .6rem; font: inherit; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); cursor: pointer; }
.horas__grid button[aria-pressed="true"] { color: #fff; background: var(--acento); border-color: var(--acento); }
.horas__grid button:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.horas__mensaje { color: var(--tinta-suave); font-style: italic; }


/* =====================================================================
   14. RESPONSIVE
   ===================================================================== */

@media (max-width: 960px) {
    /* El panel del menú cubre la pantalla (fixed; inset: 0). El botón y la
       marca van por ENCIMA con z-index: el panel llega después en el DOM
       y, sin él, taparía el botón que lo cierra (CLAUDE.md). */
    .menu-boton { display: flex; position: relative; z-index: 2; }

    .navegacion {
        position: fixed;
        inset: 0;
        z-index: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 1.75rem;
        padding: calc(var(--alto-cabecera) + 1rem) 1.5rem 2rem;
        overflow-y: auto;
        background: #fff;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--paso), visibility var(--paso);
    }

    .navegacion.abierta { opacity: 1; visibility: visible; }

    .navegacion__lista { flex-direction: column; align-items: flex-start; gap: .25rem; width: 100%; }

    .navegacion__enlace {
        padding: .4rem 0;
        font-family: var(--fuente-display);
        font-size: 1.9rem;
        color: var(--titulos);
    }

    .submenu {
        position: static;
        display: block;
        min-width: 0;
        padding: 0 0 0 1rem;
        background: transparent;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .inicio__escena { clip-path: ellipse(120% 100% at 50% 0); padding-bottom: 5rem; }

    .retrato { grid-template-columns: 1fr; }
    .retrato__imagen { max-width: 420px; }

    .seccion--bloque .encargo-tarjeta { grid-template-columns: 1fr; }

    .contacto-luna__intro { grid-template-columns: 1fr; gap: 1rem; }
    .contacto-luna__directo { padding-left: 0; padding-top: 1rem; border-left: 0; border-top: 1px solid var(--borde); }
}

@media (max-width: 560px) {
    :root { --alto-cabecera: 72px; }
    .marca__linea { font-size: 1.05rem; }
    .marca__linea--grande { font-size: 1.5rem; }
    .inicio__acciones .boton { min-width: 0; width: 100%; max-width: 20rem; }
    .cabecera-pagina__fondo { font-size: 7rem; }
}