/*
 * ============================================================
 * SAIZ TTT - ESTILOS PRINCIPALES
 * ============================================================
 *
 * En este archivo construiremos progresivamente todo el
 * sistema visual de la web.
 *
 * Empezamos por:
 *
 * - Reset básico
 * - Tipografía
 * - Header
 * - Logo
 * - Selector de idioma
 * - Botón hamburguesa
 *
 * IMPORTANTE:
 * Estamos trabajando MOBILE-FIRST.
 */


/*
 * ============================================================
 * 1. RESET BÁSICO
 * ============================================================
 *
 * Los navegadores tienen algunos estilos predeterminados.
 *
 * Los eliminamos para empezar desde una base controlada.
 */



* {
    box-sizing: border-box; 
    /* box-sizing: border-box hace que el padding y el border
    formen parte del tamaño total de los elementos.
    Es una práctica muy habitual para trabajar con layouts responsive.*/
}



body {
    margin: 0; /* Eliminamos el margen que los navegadores añaden automáticamente al body.*/
    font-family:'Cormorant Garamond', serif;
    background-color: #ffffff;
    color: #111111;  /*Color principal del texto.*/
}

main {
    padding-top: 1.1rem;
}



a {
    color: inherit;
    text-decoration: none; /*Los enlaces heredan el color del texto y no tienen subrayado por defecto.*/
}



button {
    font: inherit; /*Los botones utilizan inicialmente la misma tipografía que el resto de la página.*/
}


/*
 * ============================================================
 * 2. HEADER / NAV FIJO
 * ============================================================
 *
 * El header permanece siempre visible mientras el usuario
 * hace scroll.
 *
 * Además, tiene un fondo blanco opaco para impedir que el
 * contenido que pasa por debajo sea visible a través de él.
 */

.site-header {

    /*
     * Fijamos el header a la ventana del navegador.
     */
    position: fixed;

    /*
     * Lo colocamos en la parte superior y ocupando todo
     * el ancho.
     */
    top: 0;
    left: 0;
    width: 100%;

    /*
     * Fondo completamente opaco.
     *
     * El contenido que se desplace por debajo no podrá
     * verse a través del header.
     */
    background-color: #ffffff;

    /*
     * El header debe quedar por encima del contenido y
     * también por encima del menú desplegable.
     */
    z-index: 1100;


    /*
     * ESTRUCTURA DEL HEADER
     */

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

    /*
     * Espaciado en móvil.
     */
    padding: 1.25rem 1.25rem;
}


/*
 * ============================================================
 * 3. LOGOTIPO
 * ============================================================
 *
 * El logo ya no es texto escrito en HTML.
 * Utilizamos el PNG creado por Jose.
 */

.site-logo {
    /*
     * El enlace se comporta como un contenedor de la imagen.
     */
    display: block;

    /*
     * Controlamos el ancho desde CSS para que el logo sea
     * responsive.
     */
    width: 9rem;
}


/*
 * La imagen ocupa todo el ancho que hemos definido para
 * el enlace.
 */

.site-logo img {
    display: block;
    width: 100%;
    height: auto;
}


/*
 * ============================================================
 * 4. CONTROLES DEL HEADER
 * ============================================================
 */
.header-controls {
    display: flex; /*Agrupamos ES / EN y el botón hamburguesa.*/
    align-items: center;
    gap: 1.25rem; /* Separación entre el selector de idioma y el menú.*/
}

/*
 * ============================================================
 * ICONO DEL CARRITO
 * ============================================================
 *
 * El enlace contiene:
 * - el dibujo SVG del carrito;
 * - el número de unidades del carrito.
 */

/*
 * Contenedor del carrito.
 *
 * position: relative permite colocar posteriormente
 * el número de unidades encima del icono.
 */
.header-cart {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 2rem;
    height: 2rem;

    color: #111;
    text-decoration: none;
}


/*
 * Dibujo SVG del carrito.
 *
 * El SVG utiliza "currentColor", por lo que heredará
 * automáticamente el color negro definido arriba.
 */
.header-cart-icon {
    display: block;

    width: 1.8rem;
    height: 1.8rem;
}


/*
 * Número de productos del carrito.
 *
 * De momento mostrará "0".
 * Más adelante JavaScript cambiará este número
 * según el contenido de localStorage.
 */
.header-cart-count {
    position: absolute;

    top: -0.35rem;
    right: -0.45rem;

    min-width: 1rem;
    height: 1rem;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: inherit;
    font-size: 0.7rem;
    line-height: 1;

    color: #111;
}


/*
 * ============================================================
 * 5. SELECTOR DE IDIOMA
 * ============================================================
 */
.language-selector {
    display: flex;
    align-items: center;
    font-size: 0.85rem; /* Tamaño relativamente pequeño porque es un control secundario respecto al logo.*/
    letter-spacing: 0.08em;
}

.language-separator {
    margin: 0 0.25rem; /*Separador "/" entre ES y EN.*/
}

.language-link.active {
    font-weight: 700; /* Idioma seleccionado. De momento marcamos ES como activo.*/
}

.language-link:not(.active) {
    opacity: 0.45; /*El idioma que no está seleccionado tiene menos presencia.*/
}


/*
 * ============================================================
 * 6. BOTÓN HAMBURGUESA
 * ============================================================
 */
.menu-toggle {
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex; /*Colocamos las tres líneas una debajo de otra.*/
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.3rem;
}

.menu-toggle span { /* Cada <span> representa una línea del icono.*/
    display: block;
    width: 1.7rem;
    height: 1.5px;
    background-color: #111111;
}

.menu-toggle span:nth-child(2) {
    width: 1.25rem; /*La segunda línea será ligeramente más corta. Es un pequeño detalle visual que podemos 
    mantener o eliminar cuando veamos el diseño definitivo.*/
}

/*
 * ============================================================
 * 7. MENÚ PRINCIPAL
 * ============================================================
 *
 * Por defecto el menú estará oculto.
 *
 * Más adelante JavaScript añadirá la clase .is-open cuando
 * el usuario pulse el botón hamburguesa.
 */


/*
 * CONTENEDOR DEL MENÚ
 * ------------------------------------------------------------
 *
 * Lo posicionamos por encima del contenido de la página.
 *
 * En móvil queremos que el menú ocupe prácticamente toda
 * la pantalla, pero dejamos el header visible.
 */

.main-menu {

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    background-color: #ffffff;

    z-index: 1000;
    overflow-y: auto;   /*Si el contenido supera la altura disponible, podremos desplazarnos verticalmente dentro del menú.*/

    opacity: 0; /*hace que el menú sea transparente.*/
    visibility: hidden; /*hace que no sea visible ni interactuable cuando está cerrado.*/
    pointer-events: none; /*Evitamos que se puedan pulsar enlaces del menú mientras está cerrado.*/
    transform: translateY(-8px);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}


/*
 * Cuando JavaScript añada .is-open al menú, pasará a ser
 * visible.
 */

.main-menu.is-open {
    
    opacity: 1; /*El menú aparece completamente.*/
    visibility: visible;
    pointer-events: auto; /* Permitimos interactuar con los enlaces.*/ 
    transform: translateY(0); /* Volvemos a su posición original.*/
}


/*
 * CONTENIDO INTERIOR DEL MENÚ
 * ------------------------------------------------------------
 *
 * Dejamos espacio superior para que los enlaces no queden
 * pegados al borde superior de la pantalla.
 */

.main-menu-inner {
    min-height: 100%;
    padding: 6.5rem 1.25rem 2.5rem;

    display: flex;
    flex-direction: column;
}


/*
 * LISTA DE ENLACES
 * ------------------------------------------------------------
 */

.main-menu-list {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
    text-align: center;
}


/*
 * ENLACES PRINCIPALES
 *
 * Utilizamos una tipografía grande porque en móvil debe ser
 * fácil de leer y de pulsar con el dedo.
 */

.main-menu-list a {
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.1;
}


/*
 * REDES SOCIALES
 * ------------------------------------------------------------
 */

.main-menu-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 12rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ============================================================
   ANCLAS DEL MENÚ
   ============================================================ */

/*
 * El header de SAIZ TTT está fijado en la parte superior
 * de la pantalla mediante position: fixed.
 *
 * Cuando un enlace del menú lleva a una sección mediante
 * un ancla (#guest-spots, #galeria, #contacto...), el
 * navegador coloca esa sección en la parte superior.
 *
 * Este margen evita que el header fijo tape su comienzo.
 */
.gallery-section,
.guest-spots,
.contact-section,
.tattoo-gallery-section
{
    scroll-margin-top: 5rem;
}

.faq-section {
    scroll-margin-top: 7rem;
}

#galeria {
    scroll-margin-top: 5rem;
}

/* ============================================================
   TÍTULOS DE SECCIÓN COMO IMAGEN
   ============================================================ */

/* Mantiene el H2 en el HTML, pero lo oculta visualmente */
.titulo-seccion-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 2px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Imagen que sustituye visualmente al H2 */
.titulo-imagen {
    display: block;
    width: 80%;
    max-width: 900px;
    height: auto;
    margin: 2rem auto;
}

.titulo-guest-spots {
    /* Acercamos la primera ciudad al título de la sección. */
    margin: 0.5rem auto 0;
}

/* ============================================================
   SECCIÓN CONTACTO
   ============================================================ */

/* Email principal */
.contact-email {
    display: block;
    margin: 0;

    text-align: center;

    font-size: 2rem;
    font-weight: 500;

    line-height: 1;
    letter-spacing: 0.05rem;
    white-space: nowrap;
}

/* Texto aclaratorio */
.contact-text {
    text-align: center;
    font-size: 0.85rem;
    max-width: 600px;
    margin: 0 auto;
}

.contact-booking-link {
    text-decoration: underline;
}

/* ============================================================
 * 9. GUEST SPOTS
 * ============================================================
 *
 * Diseño:
 * - Todo centrado.
 * - Mucho espacio blanco.
 * - Una ciudad por fila.
 * - Líneas finas.
 * - Sin sombras ni fondos de color.
 * - Tipografía editorial.
 */


/* CONTENEDOR GENERAL */

.guest-spots {
    width: min(100%, 1100px);

    margin-top: 3rem;;

    /*
     * Dejamos espacio superior suficiente para que el contenido
     * no quede debajo de la cabecera fija.
     */
    padding: 1rem 1.25rem 2rem;

    text-align: center;
}


/* ============================================================
 * CABECERA DE GUEST SPOTS
 * ============================================================ */

.guest-spots-header {
    margin-bottom: 0;
}

.guest-spots-header .section-label {
    margin: 0 0 1rem;

    font-size: 0.75rem;
    font-weight: 500;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.guest-spots-header h2 {
    margin: 0;

    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 500;

    line-height: 0.95;
    letter-spacing: 0.01em;
}


/* ============================================================
 * TARJETAS
 * ============================================================
 *
 * Siempre una sola columna.
 */

.guest-spots-grid {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 auto;

}


/* Cada ciudad ocupa una fila completa. */

.guest-spot-card {
    min-height: 0;

    padding: 1.75rem 1.25rem;

    border-bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* La primera tarjeta sigue al título, así que necesita menos aire arriba. */
.guest-spots-grid > .guest-spot-card:first-child {
    padding-top: 2rem;
}

.guest-spot-card:last-child {
    border-bottom: 0;
}


/* NOMBRE DE LA CIUDAD */

.guest-spot-card h3 {
    margin: 0;

    font-size: clamp(2.3rem, 8vw, 3.5rem);
    font-weight: 500;

    line-height: 1;
    letter-spacing: 0.1rem;
}


/* ============================================================
 * INSTAGRAM DEL ESTUDIO
 * ============================================================
 *
 * Este dato identifica el estudio anfitrión del Guest Spot.
 * El enlace podrá llevar posteriormente al Instagram del estudio.
 */

.guest-spot-studio {
    display: inline-block;

    margin-top: 0.8rem;

    font-size: 0.9rem;
    letter-spacing: 0.06em;
}

.guest-spot-studio:hover {
    opacity: 0.5;
}


/*
 * Cuando todavía no conozcamos el estudio (por ejemplo,
 * Madrid o Barcelona), esta clase permite reservar el espacio
 * sin mostrar texto provisional.
 */

.guest-spot-studio-empty {
    min-height: 1.2em;
}


/* FECHA / ESTADO */

.guest-spot-date {
    margin: 1.4rem 0 1.8rem;

    font-size: 1.1rem;
    font-weight: 500;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* ============================================================
 * CTA DE LAS TARJETAS
 * ============================================================
 *
 * Visualmente funciona como un enlace editorial, no como un
 * botón convencional.
 */

.guest-spot-action {
    display: inline-block;

    /*
     * Fondo gris suave para que funcione como una pequeña
     * llamada a la acción.
     */
    background: #f2f2f2;

    /*
     * Espacio interior alrededor del texto.
     */
    padding: 0.5rem 1.4rem;

    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    /*
     * Eliminamos la línea inferior que tenía anteriormente.
     */
    border-bottom: none;
    transition: background 0.2s ease;
}

/*
 * Al pasar el ratón, oscurecemos ligeramente el fondo.
 */
.guest-spot-action:hover {
    background: #e8e8e8;
}


/* ============================================================
 * 10. WAITLIST
 * ============================================================ */

.guest-spots-waitlist {
    max-width: 700px;

    margin: 5rem auto 0;

    text-align: center;
}

.guest-spots-waitlist > p {
    margin: 0 auto 1.5rem;

    font-size: 1.25rem;
    line-height: 1.35;
}


/* ENLACE QUE ABRE EL DESPLEGABLE */

.waitlist-toggle {
    display: inline-block;

    margin: 0;
    padding: 0 0 0.25rem;

    border: 0;
    border-bottom: 1px solid #111111;

    background: transparent;
    color: #111111;

    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;

    letter-spacing: 0.13em;
    text-transform: uppercase;

    cursor: pointer;

    transition: opacity 0.2s ease;
}

.waitlist-toggle:hover {
    opacity: 0.5;
}


/* ============================================================
 * OPCIONES DE LA WAITLIST
 * ============================================================ */

.waitlist-options {
    margin-top: 3rem;

    padding-top: 2.5rem;

    border-top: 1px solid #111111;
}

.waitlist-options > p {
    margin: 0 0 1.75rem;

    font-size: 1.3rem;
}


/* CIUDADES */

.waitlist-cities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 1.5rem 2.5rem;
}

.waitlist-cities button {
    padding: 0 0 0.25rem;

    border: 0;
    border-bottom: 1px solid #111111;

    background: transparent;
    color: #111111;

    font-family: inherit;
    font-size: 0.8rem;

    letter-spacing: 0.13em;

    cursor: pointer;

    transition: opacity 0.2s ease;
}

.waitlist-cities button:hover {
    opacity: 0.5;
}



/*
 * ============================================================
 * 11. PÁGINA DE INICIO — PRESENTACIÓN
 * ============================================================
 */


/*
 * CONTENEDOR DE LA PRESENTACIÓN
 * ------------------------------------------------------------
 *
 * Dejamos margen lateral para que el contenido respire.
 */

.home-intro {
    padding: 4.5rem 1.5rem 6rem;
}

/*
 * IMAGEN HORIZONTAL
 */
/* Contenedor de la imagen principal */
.home-intro-image {
    /* La imagen ocupa todo el ancho de la pantalla,
       ignorando temporalmente el padding lateral de .home-intro */
    width: calc(100% + 3rem);

    /* Compensamos el padding lateral de 1.5rem */
    margin-left: -1.5rem;

    margin-bottom: 2.5rem;
    overflow: hidden;
}

/* Imagen principal */
.home-intro-image img {
    /* Ocupa todo el ancho del contenedor */
    display: block;
    width: 100%;

    /* Mantiene las proporciones originales */
    height: auto;
}

/*
 * =========================================================
 * ENCABEZADOS PRINCIPALES
 * =========================================================
 *
 * Utilizamos el mismo formato para:
 * - JOSE SAIZ
 * - TATUANDO DESDE 2015
 * - MI ESTUDIO
 * - MUERTE MURCIÉLAGO
 * - GALERÍA
 */

.home-intro-name {
    margin: 0 0 0.5rem;

    text-align: center;

    font-size: 2rem;
    font-weight: 500;

    line-height: 1;
    letter-spacing: 0.01em;
}


.home-intro-highlight {
    margin: 0 0 2rem;

    text-align: center;

    font-size: 2rem;
    font-weight: 500;

    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}



/* En móvil, separar el bloque de los puntos del carrusel anterior y
   reducir ambos rótulos del estudio. */
.studio-section > .home-intro-name {
    margin-top: 2.5rem;
    font-size: 1.15rem;
}

.studio-section > .home-intro-highlight {
    margin-bottom: 0.75rem;
    font-size: 1.6rem;
}

.home-intro-text {
    width: 100%;
    max-width: 58rem;
}


.home-intro-text p {
    margin: 0 0 1.5rem;

    /*
     * Aumentamos el tamaño respecto al texto actual.
     */
    font-size: 1.3rem;

    line-height: 1.4;

    /*
     * Justificamos el texto.
     */
    text-align: justify;
}


/*
 * Quitamos el margen del último párrafo.
 */

.home-intro-text p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   ENLACE DE INSTAGRAM
   ============================================================ */

/* Centramos el nombre de usuario y ajustamos su separación */
.home-intro-instagram {
    margin: -1rem 0 2rem;
    text-align: center;
}

/* Estilo del enlace */
.home-intro-instagram a {
    color: #111;
    text-decoration: underline;
    font-size: 1.2rem;
}

/* Al pasar el ratón, mostramos que es un elemento interactivo */
.home-intro-instagram a:hover {
    text-decoration: underline;
}

/* =========================================================
   SECCIÓN: MI ESTUDIO MUERTE MURCIÉLAGO
   ========================================================= */

.studio-section {
    /*
     * Acercamos el bloque al último párrafo
     * de la presentación.
     */
    margin-top: 2rem;

    /*
     * NO añadimos padding lateral aquí.
     *
     * .home-intro ya tiene 1.5rem de padding,
     * por lo que añadir otro aquí hacía que
     * los títulos quedaran demasiado a la derecha.
     */
}

/*
 * Separamos el nombre del estudio de la primera fotografía.
 */
.studio-gallery {
    margin-top: 2rem;
}

/* Acercamos las fotos al título solo en el carrusel del estudio. */
.studio-section .studio-gallery {
    margin-top: 0.5rem;
}
/* 
   Contenedor horizontal de las fotografías.
   overflow-x: auto permite deslizar hacia los lados
   en dispositivos móviles.
*/
/* Galería de fotografías a ancho completo. */
.studio-gallery {
    display: flex;

    /* Sacamos la galería de los márgenes laterales de la sección
       para que las fotografías lleguen hasta los bordes. */
    width: calc(100% + 3rem);
    margin-left: -1.5rem;

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overflow-y: hidden;
}

/* Ocultamos la barra de desplazamiento en Chrome, Edge y Safari. */
.studio-gallery::-webkit-scrollbar {
    display: none;
}

/* Cada fotografía ocupa todo el ancho disponible. */
.studio-photo {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;

    /* Al deslizar, cada foto se coloca en un punto concreto. */
    scroll-snap-align: start;
}

/* La imagen ocupa todo el ancho sin deformarse. */
.studio-photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================
   CONTROLES DEL CARRUSEL
   ========================================================= */

/*
 * Contenedor general del carrusel.
 *
 * Lo utilizamos para poder colocar la flecha
 * encima de la fotografía.
 */
.studio-carousel {
    position: relative;
}

.studio-arrow {
    display: none;
}



/*
 * Contenedor de los puntos.
 *
 * Los puntos se crearán automáticamente
 * mediante JavaScript.
 */
.studio-dots {
    display: flex;

    /* Centramos los puntos horizontalmente. */
    justify-content: center;

    /* Separación entre puntos. */
    gap: 0.35rem;

    /* Separación respecto a la fotografía. */
    margin-top: 0.8rem;

    /* Altura mínima para que no salte el contenido. */
    min-height: 0.5rem;
}


/*
 * Cada punto representa una fotografía.
 */
.studio-dot {
    width: 0.45rem;
    height: 0.45rem;

    border-radius: 50%;

    /* Los puntos inactivos son grises. */
    background-color: #c7c7c7;

    /* Eliminamos cualquier aspecto de botón. */
    border: none;
    padding: 0;

    transition: background-color 0.2s ease;
}


/*
 * El punto correspondiente a la fotografía
 * que estamos viendo actualmente.
 */
.studio-dot.active {
    background-color: #111111;
}

/* =========================================================
   SECCIÓN GALERÍA
   ========================================================= */

/*
 * Separamos la sección de la barra de progreso
 * de la galería anterior.
 */
.tattoo-gallery-section {
    margin-top: 4rem;
}


/*
 * Encabezado general de la sección.
 */
.tattoo-gallery-section h2 {
    margin: 0 0 2.5rem;

    text-align: center;

    font-size: 2rem;
    font-weight: 500;

    line-height: 1;
    letter-spacing: 0.01em;
}

/*
 * ============================================================
 * 12. PREGUNTAS FRECUENTES
 * ============================================================
 */


/*
 * CONTENEDOR DE LA SECCIÓN
 */

.faq-section {
    padding: 2rem 1.5rem 3rem;
    margin-top: 3rem;
}



/*
 * CABECERA
 *
 * En móvil título y buscador se colocan verticalmente.
 */

.faq-header {
    display: flex;

    flex-direction: column;

    gap: 0;

    margin-bottom: 1rem;
}

.faq-header .titulo-imagen {
    width: 80%;
    margin: 0 auto 2rem;
}


.faq-header h2 {
    margin: 0;
  text-align: center;
    font-size: 2rem;
    font-weight: 500;
letter-spacing: 0.01em;
    line-height: 1;
}

/* ============================================================
   FAQ — PREVISUALIZACIÓN DE LAS 6 PRIMERAS PREGUNTAS
   ============================================================ */

/*
 * Contenedor de las seis primeras preguntas.
 *
 * Lo hacemos relativo porque el degradado que añadiremos
 * después se colocará sobre la parte inferior.
 */
.faq-preview {
    position: relative;

    /*
     * Ocultamos visualmente el contenido que sobresalga.
     */
    overflow: hidden;

    /*
     * Dejamos espacio suficiente para que el degradado
     * pueda aparecer sobre la parte inferior.
     */
    padding-bottom: 2rem;

    /*
     * Altura inicial de la previsualización.
     *
     * Después la ajustaremos si vemos que las seis preguntas
     * ocupan demasiado o demasiado poco espacio.
     */
    max-height: 28rem;
}

/* Si se abre una respuesta en la vista previa, deja que el contenido crezca. */
.faq-preview.faq-preview-answer-open {
    max-height: none;
    overflow: visible;
}

.faq-preview.faq-preview-answer-open::after {
    display: none;
}




/* ============================================================
   FAQ — DIFUMINADO PROGRESIVO
   ============================================================ */

/*
 * El contenedor de las primeras preguntas permite colocar
 * el efecto de degradado por encima de las últimas preguntas.
 */
.faq-preview {
    position: relative;
}


/*
 * Creamos una capa transparente que va aumentando
 * progresivamente hacia la parte inferior.
 *
 * De esta forma:
 * - La pregunta 3 todavía se ve bastante.
 * - La pregunta 4 empieza a perder intensidad.
 * - La pregunta 5 queda bastante difuminada.
 * - La pregunta 6 prácticamente desaparece.
 */
.faq-preview::after {
    content: "";

    position: absolute;

    /*
     * El degradado ocupa solamente la parte inferior
     * del bloque de las seis preguntas.
     */
    left: 0;
    right: 0;
    bottom: 0;

    height: 85%;

    /*
     * El degradado empieza transparente y termina
     * completamente blanco.
     */
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 20%,
        rgba(255, 255, 255, 0.45) 45%,
        rgba(255, 255, 255, 0.75) 70%,
        rgba(255, 255, 255, 1) 100%
    );

    /*
     * No permite que la capa interfiera con los clics
     * de las preguntas.
     */
    pointer-events: none;
}


/*
 * Botón "VER MÁS".
 */
.faq-show-more {
    display: block;

    margin: 1rem auto 0;

    padding: 0.8rem 1.5rem;

    border: 0;
    background: #f2f2f2;

    color: #111111;

    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    cursor: pointer;

    transition: background 0.2s ease;
}


/*
 * Pequeño cambio visual al pasar el ratón.
 */
.faq-show-more:hover {
    background: #e8e8e8;
}

/* ============================================================
   OCULTAR LAS PREGUNTAS RESTANTES AL CARGAR
   ============================================================ */

/*
 * Mientras la FAQ no esté desplegada, ocultamos todas las
 * preguntas que están después de "VER MÁS".
 *
 * Más adelante JavaScript añadirá la clase .faq-expanded
 * cuando pulsemos el botón.
 */
.faq-list:not(.faq-expanded) > .faq-show-more ~ .faq-item {
    display: none;
}

/* ============================================================
   FAQ — CUANDO TODAS LAS PREGUNTAS ESTÁN DESPLEGADAS
   ============================================================ */

/*
 * Cuando la FAQ está desplegada, eliminamos el difuminado
 * que utilizamos en la vista inicial.
 */
.faq-list.faq-expanded .faq-preview::after {
    display: none;
}

/* ============================================================
   FAQ — AL MOSTRAR TODAS LAS PREGUNTAS
   ============================================================ */

/*
 * Al desplegar todas las preguntas ya no necesitamos
 * el espacio inferior reservado para el difuminado.
 */
.faq-list.faq-expanded .faq-preview {
    max-height: none;
    overflow: visible;
    padding-bottom: 0;
}

/* ============================================================
 * CITAS + TIENDA — ACCIONES DESDE LA HOME
 * ============================================================ */

/*
 * Contenedor general de cada sección.
 */
.home-action-section {
    text-align: center;
    padding: 1rem 1.5rem;
}

.citas-section {
    text-align: center;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    padding: 2.5rem 1.5rem;
}

/* Mismo espacio entre las líneas y el contenido de cada bloque. */
.citas-section .titulo-imagen,
.home-action-shop .titulo-imagen,
.contact-section .titulo-imagen {
    margin: 0 auto 2rem;
}

.citas-section .titulo-imagen {
    width: 30%;
}

.contact-section {
    padding: 2.5rem 1.5rem;
    border-top: 1px solid currentColor;
}

.contact-section .titulo-imagen {
    width: 42%;
}

/* Tamaño ajustable para Contact en la home inglesa. */
.contact-section .titulo-imagen-contact-home-en {
    width: 38%;
}



/*
 * Texto introductorio.
 */
.home-action-text {
    margin: 0 auto 2.2rem;
    max-width: 32rem;
    font-size: 1.25rem;
    line-height: 1.5;
}

/*
 * CITAS:
 * damos más importancia visual a esta acción.
 */
.home-action-booking {
    padding-top: 0;
  
      border-bottom: 1px solid currentColor;
}

/*
 * Botón principal de CITAS.
 *
 * Fondo negro y texto blanco para diferenciarlo
 * claramente del resto de enlaces de la página.
 */
.home-action-button {
    display: inline-block;
    padding: 0.9rem 1.8rem;

    background: #000;
    color: #fff;

    text-decoration: none;

    font-size: 1.1rem;
    letter-spacing: 0.08em;
}

/*
 * Efecto visual al pasar el ratón.
 */
.home-action-button:hover {
    opacity: 0.75;
}


/*
 * TIENDA:
 * la tratamos de forma más ligera que CITAS.
 */
.home-action-shop {
    padding: 2.5rem 1.5rem;
    border-bottom: 1px solid currentColor;

}

/* Igualamos la distancia de la imagen de Tienda a la línea
   con la distancia que tiene la imagen de Contacto. */
.home-action-shop .titulo-imagen {
    margin-top: 0;
}

/*
 * Enlace secundario de la tienda.
 */
.home-action-link {
    display: inline-block;

    color: inherit;
    text-decoration: none;

    font-size: 1.15rem;
    letter-spacing: 0.08em;
    background: #f2f2f2;
  padding: 0.8rem 1.4rem;
     border-bottom: none;

}

/*
 * Feedback visual al pasar el ratón.
 */
.home-action-link:hover {
     background: #e8e8e8;
}


/*
 * ============================================================
 * BUSCADOR
 * ============================================================
 */

.faq-search {
    width: 100%;
}


.faq-search input {
    width: 100%;
    padding: 0.8rem 1.5rem;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
      border-left: 1px solid #111;
    border-right: 1px solid #111;
    border-radius: 999px;
    background-color: #ffffff;
    color: #111;
    font-family: inherit;
    font-size: 1.15rem;
    outline: none;
}


/*
 * Cuando el buscador recibe el foco hacemos ligeramente
 * más visible la línea inferior.
 */

.faq-search input:focus {
    border-bottom-width: 2px;
}


.faq-search input::placeholder {
    color: #111111;
    opacity: 0.5;
}



/* ============================================================
   FAQ — ACORDEÓN
   ============================================================ */


/*
 * Cada pregunta queda separada por una línea fina.
 * No añadimos fondos ni cajas.
 */
.faq-item {
    border-bottom: 0;
}


/*
 * Botón que contiene la pregunta.
 *
 * Quitamos completamente el aspecto predeterminado
 * de los botones del navegador.
 */
.faq-question {
    width: 100%;

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

    padding: 0.6rem 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: #111;

    font-family: inherit;

    /* Pregunta más grande */
    font-size: 1.5rem;

    /* Pregunta en negrita */
    font-weight: 700;

    line-height: 1.2;

    text-align: left;

    cursor: pointer;

    /* Evita que el navegador añada estilos propios */
    appearance: none;
}


/*
 * Texto de la pregunta.
 */
.faq-question-text {
    padding-right: 1.5rem;
}


/*
 * Signo + / −.
 */
.faq-icon {
    flex-shrink: 0;

    font-family: Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 400;

    line-height: 1;
}


/*
 * RESPUESTA
 *
 * Recuperamos el aspecto que tenía anteriormente:
 * mismo tamaño, interlineado y texto justificado.
 */
.faq-answer {
    padding: 0 0 1.75rem;
}


.faq-answer p {
    margin: 0 0 1.5rem;

    font-size: 1.3rem;
    line-height: 1.4;

    text-align: justify;
}


.faq-answer p:last-child {
    margin-bottom: 0;
}


/*
 * Cuando navegamos con teclado, mostramos un contorno
 * para indicar dónde está el foco.
 */
.faq-question:focus-visible {
    outline: 1px solid #111;
    outline-offset: 4px;
}


/*
 * ============================================================
 * MENSAJE "SIN RESULTADOS"
 * ============================================================
 */

.faq-no-results {
    margin: 2rem 0 0;

    font-size: 1.2rem;

    line-height: 1.4;
}



/*
 * ============================================================
 * ACCESIBILIDAD — TEXTO SOLO PARA LECTORES DE PANTALLA
 * ============================================================
 *
 * Utilizamos esta clase para que la etiqueta del buscador
 * sea accesible sin mostrarla visualmente.
 */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}





/*
 * ============================================================
 * 14. PÁGINA DE CITAS
 * ============================================================
 *
 * Diseño sencillo y limpio para booking.php.
 *
 * - Título centrado.
 * - Párrafos justificados.
 * - Etiquetas en negrita.
 * - Campos compactos.
 * - Sin caja exterior.
 * - Botón negro centrado.
 */


/*
 * ============================================================
 * CONTENEDOR PRINCIPAL
 * ============================================================
 */

.booking-page {

    /*
     * Espacio exterior de la página.
     */
    padding: 7rem 1.25rem 7rem;

}


/*
 * ============================================================
 * INTRODUCCIÓN
 * ============================================================
 */

.booking-intro {

    /*
     * Limitamos el ancho para facilitar la lectura.
     */
    max-width: 40rem;

    /*
     * Centramos el bloque dentro de la página.
     */
    margin: 0 auto 1.5rem;

}

/* Evita que el margen general del PNG aumente el hueco bajo el header. */
.booking-intro .titulo-imagen {
    margin: 0 auto 1.5rem;
}

/* Tamaños independientes de los PNG ingleses en páginas internas. */
.booking-intro .titulo-imagen-booking-page-en {
    width: 40%;
}

.shop-intro .titulo-imagen-shop-page-en {
    width:50%;
}

/* Tamaños ajustables de los títulos ingleses en la home. */
.citas-section .titulo-imagen-booking-home-en {
    width: 40%;
}

.home-action-shop .titulo-imagen-shop-home-en {
    width: 25%;
}


/*
 * ============================================================
 * TÍTULO "CITAS"
 * ============================================================
 */

.booking-intro h1 {

    margin: 0 0 1.5rem;

    /*
     * Título centrado.
     */
    text-align: center;

    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1;

}


/*
 * ============================================================
 * TEXTO INTRODUCTORIO
 * ============================================================
 */

.booking-intro p {

    margin: 0;

    /*
     * Justificamos el texto para que los dos lados queden
     * visualmente alineados.
     */
    text-align: justify;

    font-size: 1.2rem;
    line-height: 1.4;

}


/*
 * ============================================================
 * AVISO IMPORTANTE
 * ============================================================
 */

.booking-notice {

    max-width: 40rem;

    margin: 0 auto 2rem;

}


/*
 * Párrafos del aviso.
 */

.booking-notice p {

    margin: 0 0 1.2rem;

    /*
     * Texto justificado.
     */
    text-align: justify;

    /*
     * Utilizamos el mismo tamaño que el texto introductorio
     * para que ambos bloques tengan coherencia.
     */
    font-size: 1.2rem;
    line-height: 1.4;

}


/*
 * El último párrafo no necesita margen inferior.
 */

.booking-notice p:last-child {

    margin-bottom: 0;

}


/*
 * ============================================================
 * FORMULARIO
 * ============================================================
 *
 * Ya no utilizamos una caja exterior.
 */

.booking-form-section {

    width: 100%;

    max-width: 40rem;

    margin: 0 auto;

}


/*
 * El formulario ocupa todo el ancho disponible.
 */

.booking-form {

    width: 100%;

}


/*
 * ============================================================
 * CAMPOS
 * ============================================================
 *
 * Cada pregunta tendrá:
 *
 * Nombre:
 * [_____________________]
 *
 * ¿Desde qué ciudad vienes?:
 * [_____________________]
 *
 * La etiqueta aparece encima del campo para que el diseño
 * sea sencillo y fácil de utilizar en móvil.
 */

.form-field {

    margin-bottom: 1.5rem;

}


/*
 * ============================================================
 * NOMBRES DE LOS CAMPOS
 * ============================================================
 */

.form-field label {

    display: block;

    margin-bottom: 0.4rem;

    /*
     * Todas las etiquetas aparecen en negrita.
     */
    font-size: 1.1rem;
    font-weight: 700;

}


/*
 * ============================================================
 * CAMPOS DE RESPUESTA
 * ============================================================
 */

.form-field input,
.form-field select {

    /*
     * No ocupamos toda la pantalla.
     * El campo tiene un tamaño contenido.
     */
    width: min(100%, 22rem);

    height: 2.5rem;

    padding: 0.4rem 0.65rem;

    border: 1px solid #777777;

    border-radius: 3px;

    background-color: #ffffff;

    color: #111111;

    font-family: inherit;
    font-size: 1.1rem;

    outline: none;

}


/*
 * ============================================================
 * DESCRIPCIÓN DEL TATUAJE
 * ============================================================
 */

.form-field textarea {

    /*
     * La descripción necesita más espacio que los campos
     * de una sola línea.
     */
    width: min(100%, 30rem);

    height: 7rem;

    padding: 0.5rem 0.65rem;

    border: 1px solid #777777;

    border-radius: 3px;

    background-color: #ffffff;

    color: #111111;

    font-family: inherit;
    font-size: 1.1rem;

    resize: vertical;

    outline: none;

}


/*
 * ============================================================
 * FOCO
 * ============================================================
 *
 * Cuando el usuario selecciona un campo, hacemos que el
 * borde sea más visible.
 */

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {

    border-color: #111111;

}


/*
 * ============================================================
 * CONTADOR DE CARACTERES
 * ============================================================
 */

.character-counter {

    width: min(100%, 30rem);

    margin-top: 0.25rem;

    font-size: 0.85rem;

    text-align: right;

}


/*
 * ============================================================
 * MENSAJES DE ERROR
 * ============================================================
 */

.form-error {

    display: block;
 color: #b00020;
    margin-top: 0.3rem;

    font-size: 0.9rem;

}


/*
 * ============================================================
 * CAMPOS CON ERROR
 * ============================================================
 *
 * JavaScript añadirá posteriormente .is-error cuando
 * detecte un campo obligatorio vacío.
 */

.form-field.is-error input,
.form-field.is-error textarea,
.form-field.is-error select {

    border-color: #b00020;

}


/*
 * ============================================================
 * CAMPO "OTRA CIUDAD"
 * ============================================================
 */

[hidden] {

    display: none !important;

}


/*
 * ============================================================
 * AVISO SOBRE LAS IMÁGENES
 * ============================================================
 */

.booking-form-instructions {

    margin: 2rem 0 1.5rem;
}


/*
 * Texto que explica qué debe enviar posteriormente por
 * WhatsApp.
 */

.booking-form-instructions p {

    margin: 0;

    /*
     * Lo centramos porque es una instrucción previa al botón.
     */
    text-align: justify;

    font-size: 1.15rem;
    line-height: 1.4;

}


/*
 * ============================================================
 * BOTÓN
 * ============================================================
 */

.booking-form-submit {

    /*
     * Centramos el botón.
     */
    display: flex;
    justify-content: center;

    margin-top: 1.5rem;

}


/*
 * Botón negro con texto blanco.
 */

.booking-form-submit button {

    padding: 0.8rem 1.5rem;

    border: 1px solid #111111;

    border-radius: 0;

    background-color: #111111;

    color: #ffffff;

    font-family: inherit;

    font-size: 1rem;
    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;

}


/*
 * Al pasar el ratón, invertimos los colores.
 */

.booking-form-submit button:hover {

    background-color: #ffffff;

    color: #111111;

}



/*
 * ============================================================
 * POLÍTICA DE PRIVACIDAD - FORMULARIO DE CITAS
 * ============================================================
 *
 * Estilos para la casilla de aceptación de la Política de
 * Privacidad.
 */


/*
 * Contenedor de la casilla.
 */

.form-privacy {
    margin-top: 2rem;
}


/*
 * La etiqueta contiene tanto la casilla como el texto.
 *
 * Utilizamos flex para que el texto quede correctamente
 * alineado junto a la casilla, también en móvil.
 */

.form-privacy label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;

    /*
     * El texto no necesita el mismo tamaño que los campos
     * principales del formulario.
     */
    font-size: 0.95rem;

    /*
     * La casilla no debe heredar el estilo general de los
     * inputs del formulario.
     */
    font-weight: 400;

    /*
     * Permitimos que el texto ocupe varias líneas.
     */
    line-height: 1.4;

    cursor: pointer;
}


/*
 * Casilla de aceptación.
 */

.form-privacy input[type="checkbox"] {
    /*
     * Evitamos que se estire o se reduzca al cambiar
     * el tamaño disponible.
     */
    flex: 0 0 auto;

    /*
     * Tamaño ligeramente mayor para facilitar su uso
     * especialmente en dispositivos móviles.
     */
    width: 1.1rem;
    height: 1.1rem;

    /*
     * Eliminamos márgenes que pueda aplicar el navegador.
     */
    margin: 0.1rem 0 0;
}


/*
 * Enlace a la Política de Privacidad.
 */

.form-privacy a {
    text-decoration: underline;
}


/*
 * El enlace cambia ligeramente de apariencia al pasar
 * el ratón por encima.
 */

.form-privacy a:hover {
    opacity: 0.7;
}

/*
 * ============================================================
 * FOOTER
 * ============================================================
 *
 * Footer minimalista para SAIZ TTT.
 *
 * Utilizamos fondo negro para invertir la estética principal
 * de la web, que utiliza fondo blanco y texto oscuro.
 */


/*
 * ============================================================
 * 1. CONTENEDOR PRINCIPAL
 * ============================================================
 */

.site-footer {

    /*
     * Fondo negro para crear contraste con el resto de la web.
     */
    background-color: #d1cfcf;

    /*
     * Texto claro sobre fondo oscuro.
     */
    color: #000000;

    /*
     * Espacio interior del footer.
     */
    padding: 1rem 1.25rem 1rem;

}


/*
 * ============================================================
 * 2. CONTENIDO INTERIOR
 * ============================================================
 */

.site-footer-inner {

    /*
     * Limitamos la anchura para que en pantallas grandes
     * el contenido no quede demasiado separado.
     */
    max-width: 40rem;

    /*
     * Centramos el contenido.
     */
    margin: 0 auto;

    /*
     * Centramos todos los elementos.
     */
    text-align: center;

}


/*
 * ============================================================
 * 3. ENLACES LEGALES
 * ============================================================
 */

.footer-legal {

    /*
     * Colocamos los enlaces en una sola línea cuando haya
     * espacio suficiente.
     */
    display: flex;

    /*
     * Permitimos que pasen a otra línea en pantallas pequeñas.
     */
    flex-wrap: wrap;

    /*
     * Centramos los enlaces.
     */
    justify-content: center;

    /*
     * Separación entre los enlaces.
     */
    gap: 0.8rem 1.2rem;

}


/*
 * Los enlaces legales.
 */

.footer-legal a {

    font-size: 0.9rem;

    /*
     * Mayúsculas para mantener el aspecto limpio de la web.
     */
    text-transform: uppercase;

    /*
     * Ligera separación entre letras.
     */
    letter-spacing: 0.06em;

}


/*
 * ============================================================
 * 4. REDES SOCIALES
 * ============================================================
 */

.footer-social {

    display: flex;

    justify-content: center;

    gap: 1.5rem;

    /*
     * Separación respecto a los enlaces legales.
     */
    margin-top: 1rem;

}


.footer-social a {

    font-size: 0.95rem;

}


/*
 * ============================================================
 * 5. EFECTO AL PASAR EL RATÓN
 * ============================================================
 */

.site-footer a:hover {

    /*
     * Bajamos ligeramente la intensidad del enlace
     * cuando el usuario pasa el ratón.
     */
    opacity: 0.65;

}


/*
 * ============================================================
 * 6. COPYRIGHT
 * ============================================================
 */

.footer-copyright {

    margin: 1rem 0 0;

    font-size: 0.8rem;

    opacity: 0.7;

}


/*
 * ============================================================
 * 7. AUTORÍA
 * ============================================================
 */

.footer-credit {

    margin: 1rem 0 0;

    font-size: 0.75rem;

    opacity: 0.65;

}


/*
 * El nombre de quien ha creado la web mantiene un poco más
 * de visibilidad que el texto "Web creada por".
 */

.footer-credit a {

    font-weight: 600;

}

/*
 * ============================================================
 * PÁGINAS LEGALES
 * ============================================================
 *
 * Dejamos espacio en la parte superior para que el título
 * no quede oculto detrás de la cabecera fija.
 */

.legal-page {
    padding: 7rem 1.25rem 5rem;
}


/*
 * Contenedor de la introducción.
 *
 * Limitamos la anchura para facilitar la lectura del texto.
 */

.legal-intro {
    max-width: 40rem;
    margin: 0 auto 3rem;
}


/*
 * Título principal de la página.
 */

.legal-intro h1 {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 500;
    margin: 0 0 1.5rem;
}


/*
 * Texto introductorio.
 */

.legal-intro p {
    font-size: 1.1rem;
    line-height: 1.5;
}


/*
 * Cada apartado del Aviso Legal.
 */

.legal-section {
    max-width: 40rem;
    margin: 0 auto 2.5rem;
}


/*
 * Títulos de cada apartado.
 */

.legal-section h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 1rem;
}


/*
 * Párrafos de los apartados legales.
 */

.legal-section p,
.legal-section li {
    font-size: 1rem;
    line-height: 1.6;
}


/*
 * Listado de datos identificativos.
 */

.legal-section ul {
    padding-left: 1.25rem;
}


/*
 * Separación entre elementos del listado.
 */

.legal-section li {
    margin-bottom: 0.6rem;
}


/*
 * Enlaces dentro del texto legal.
 */

.legal-section a {
    text-decoration: underline;
}


/*
 * Última actualización.
 */

.legal-update {
    margin-top: 3rem;
}

/*
 * ============================================================
 * 15. TIENDA
 * ============================================================
 *
 * Diseño inicial de la tienda.
 *
 * MOBILE-FIRST:
 * Primero definimos el aspecto para móviles.
 * Más adelante, dentro del @media de escritorio, podremos
 * adaptar la distribución para pantallas grandes.
 *
 * En esta primera fase estilizamos:
 *
 * - Página de tienda.
 * - Introducción.
 * - Aviso de envíos.
 * - Carrito provisional.
 * - Tarjetas de productos.
 * - Botones "VER PRODUCTO".
 */


/*
 * ============================================================
 * CONTENEDOR GENERAL DE LA TIENDA
 * ============================================================
 */

.shop-page {

    /*
     * Dejamos espacio suficiente arriba para compensar
     * la cabecera fija.
     */
    padding: 7rem 1.5rem 6rem;

}


/*
 * ============================================================
 * INTRODUCCIÓN
 * ============================================================
 */

.shop-intro {

    /*
     * Limitamos la anchura del texto para que resulte
     * cómodo de leer en pantallas grandes.
     */
    max-width: 40rem;

    /*
     * Centramos el bloque horizontalmente.
     */
    margin: 0 auto 1.5rem;

}

/* El PNG del título conserva su proporción en la página de tienda. */
.shop-intro .titulo-imagen {
    width: 40%;
    height: auto;
    margin: 0 auto 2rem;
}


/*
 * TÍTULO "TIENDA"
 */

.shop-intro h1 {

    margin: 0 0 1.5rem;

    /*
     * Igual que "CITAS", mantenemos el título centrado.
     */
    text-align: center;

    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1;

}


/*
 * PÁRRAFOS DE LA INTRODUCCIÓN
 */

.shop-intro p {

    margin: 0 0 1.5rem;

    /*
     * Utilizamos un tamaño similar al texto de otras
     * secciones de la web.
     */
    font-size: 1.2rem;

    line-height: 1.5;

    /*
     * Justificamos el texto para mantener el estilo
     * editorial que ya utilizamos en otras partes.
     */
    text-align: justify;

}


/*
 * Quitamos el margen inferior del último párrafo.
 */

.shop-intro p:last-child {
    margin-bottom: 0;
}


/*
 * ============================================================
 * AVISO DE ENVÍOS
 * ============================================================
 */

.shop-shipping-info {

    /*
     * El aviso queda separado visualmente de la introducción.
     */
    max-width: 40rem;
    text-align: center;
    margin: 0 auto 0.5rem;

    padding: 0.5rem 0;

}



/*
 * ============================================================
 * CARRITO 
 * ============================================================
 */

.shop-cart {
    scroll-margin-top: 8rem;

    /*
     * Limitamos el ancho para que no ocupe toda la pantalla.
     */
    max-width: 40rem;

    margin: 0 auto 6rem;

    padding-bottom: 2rem;

}


/*
 * TÍTULO DEL CARRITO
 */

.shop-cart h2 {

    margin: 0 0 1.25rem;

    text-align: center;

    font-size: 2rem;
    font-weight: 500;

    line-height: 1;

}


/*
 * TEXTO DEL CARRITO
 */

.shop-cart p {

    margin: 0 0 1.5rem;

    font-size: 1.15rem;

    text-align: center;

}

#cart-empty {
    margin: 0 0 1.25rem;
}


/*
 * ============================================================
 * BOTÓN DEL CARRITO
 * ============================================================
 */

.shop-cart-button {

    /*
     * El botón ocupa solamente el espacio necesario.
     */
    display: block;

    width: 100%;
    max-width: 28rem;

    margin: 2rem auto 0;

    padding: 0.75rem 1.5rem;

    /*
     * Diseño sencillo en blanco y negro.
     */
    border: 1px solid #111;

    background-color: #111;
    color: #ffffff;

    font-family: inherit;
    font-size: 1rem;

    cursor: pointer;

}


/*
 * Mientras el carrito esté vacío, el botón permanece
 * visualmente desactivado.
 */

.shop-cart-button:disabled {

    opacity: 0.35;

    cursor: not-allowed;

}


/*
 * ============================================================
 * PRODUCTOS
 * ============================================================
 */

.shop-products {

    /*
     * No necesitamos otro contenedor con fondo o borde.
     * Los productos respiran sobre el fondo blanco.
     */
    width: 100%;

}


/*
 * TÍTULO "PRODUCTOS"
 */

.shop-products > h2 {

    margin: 0;

    text-align: center;

    font-size: 2rem;
    font-weight: 500;

    line-height: 1;

}


/*
 * ============================================================
 * TARJETA DE PRODUCTO
 * ============================================================
 */

.product-card {

    /*
     * Cada producto ocupa inicialmente todo el ancho
     * disponible en móvil.
     */
    width: 100%;

    /*
     * Separamos un producto del siguiente.
     */
    margin-bottom: 4rem;

}


/*
 * ============================================================
 * IMAGEN DEL PRODUCTO
 * ============================================================
 */

/*
 * La imagen de portada de cada producto se muestra
 * dentro de un espacio cuadrado.
 */
.product-card-image {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    /*
     * La imagen ocupa todo el cuadrado.
     * Si la fotografía no es cuadrada, se recorta
     * manteniendo sus proporciones.
     */
    object-fit: cover;
}


/*
 * ============================================================
 * INFORMACIÓN DEL PRODUCTO
 * ============================================================
 */

.product-card-content {

    /*
     * Dejamos un pequeño espacio entre la fotografía
     * y la información.
     */
    padding-top: 1.25rem;
     text-align: center;

}


/*
 * NOMBRE DEL PRODUCTO
 */

.product-card-content h3 {

    margin: 0 0 0.75rem;

    font-size: 1.7rem;
    font-weight: 600;

    line-height: 1.1;

}

/*
 * DESCRIPCIÓN
 */

.product-card-content p {

    margin: 0 0 1rem;

    font-size: 1.15rem;

    line-height: 1.4;

}

/*
 * ============================================================
 * PRECIO
 * ============================================================
 */

.product-card-price {

    /*
     * Damos un poco más de presencia al precio.
     */
    font-weight: 600;

}


/*
 * ============================================================
 * BOTÓN "VER PRODUCTO"
 * ============================================================
 */

.product-view-button {

    /*
     * Quitamos los estilos predeterminados del botón.
     */
    appearance: none;

    /*
     * El botón se comporta como un elemento independiente.
     */
    display: inline-block;

    margin-top: 0.25rem;

    padding: 0.7rem 1.25rem;

    border: 1px solid #111;

    background-color: #ffffff;

    color: #111111;

    font-family: inherit;

    font-size: 1rem;
    font-weight: 500;

    cursor: pointer;

}


/*
 * ============================================================
 * ESTADO HOVER
 * ============================================================
 *
 * En dispositivos con ratón, invertimos los colores
 * cuando el usuario pasa por encima.
 */

.product-view-button:hover {

    background-color: #111111;
    color: #ffffff;

}


/*
 * ============================================================
 * ESTADO DE FOCO
 * ============================================================
 *
 * Importante para accesibilidad y navegación mediante teclado.
 */

.product-view-button:focus-visible {

    outline: 1px solid #111;

    outline-offset: 4px;

}


/* ============================================================
   MODAL DE PRODUCTO — TIENDA
   ============================================================ */

/*
 * Capa que cubre toda la pantalla cuando se abre el producto.
 *
 * "position: fixed" hace que permanezca fijada a la ventana
 * aunque hagamos scroll en la página.
 */
.product-modal {
    position: fixed;
    inset: 0;

    /*
     * Fondo negro semitransparente alrededor de la ventana.
     */
    background: rgba(0, 0, 0, 0.65);

    /*
     * Colocamos el contenido del modal en el centro.
     */
    display: flex;
    align-items: center;
    justify-content: center;

    /*
     * Dejamos espacio para que la ventana no toque los bordes
     * de la pantalla en móviles.
     */
    padding: 1rem;

    /*
     * El modal debe aparecer por encima del menú fijo.
     */
    z-index: 1200;
}


/*
 * Caja blanca que contiene toda la información del producto.
 */
.product-modal-content {
    position: relative;

    width: 100%;
    max-width: 900px;
    max-height: 90vh;

    /*
     * Si el contenido es más alto que la pantalla,
     * podremos desplazarnos dentro de la ventana.
     */
    overflow-y: auto;

    background: #fff;
    color: #111;

    padding: 1.5rem;
}


/*
 * Botón "X" para cerrar el modal.
 */
.product-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
     color: #111;
    width: 2.5rem;
    height: 2.5rem;

    border: none;
    background: #fff;
      border: 1px solid #111;
    border-radius: 50%;

    font-family: Arial, sans-serif;
    font-size: 2rem;
    line-height: 1;
    z-index: 10;
    cursor: pointer;

    z-index: 2;
}


/*
 * Efecto visual al pasar el ratón por encima de la X.
 */
.product-modal-close:hover {
    opacity: 0.6;
}


/*
 * Indicamos claramente el foco cuando navegamos con teclado.
 * Esto es importante para la accesibilidad.
 */
.product-modal-close:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
}


/* ============================================================
   GALERÍA DEL PRODUCTO
   ============================================================ */

/*
 * Contenedor de la fotografía principal.
 */
.product-modal-gallery {
    position: relative;
    margin-bottom: 2rem;
}


/*
 * Imagen principal del producto.
 */
#modal-product-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/*
 * Botones para pasar a la fotografía anterior/siguiente.
 */
.product-modal-prev,
.product-modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 2.5rem;
    height: 2.5rem;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);
    color: #111;

    font-family: inherit;
    font-size: 1.8rem;

    cursor: pointer;
}


/*
 * Colocamos cada flecha en un lado de la fotografía.
 */
.product-modal-prev {
    left: 0.75rem;
}

.product-modal-next {
    right: 0.75rem;
}


/*
 * Indicador de fotografías.
 *
 * Por ejemplo:
 * ● ○ ○
 */
.product-modal-gallery-indicator {
    display: flex;
    justify-content: center;

    gap: 0.4rem;

    margin-top: 0.75rem;
}


/* ============================================================
   INFORMACIÓN DEL PRODUCTO
   ============================================================ */

.product-modal-info h2 {
    margin: 0 0 1rem;

    font-size: 2rem;
    font-weight: 500;
}


.product-modal-description {
    margin-bottom: 1.5rem;

    font-size: 1.1rem;
    line-height: 1.5;
}


/*
 * Zona donde posteriormente aparecerán las variantes:
 * tallas, valores de tarjeta regalo, etc.
 */
.product-modal-options {
    margin-bottom: 1.5rem;
}


.product-modal-price {
    margin: 0 0 1.5rem;

    font-size: 1.4rem;
    font-weight: 600;
}


/* ============================================================
   CANTIDAD
   ============================================================ */

.product-modal-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 1.5rem;
}


.product-modal-quantity label {
    font-size: 1rem;
}


.quantity-controls {
    display: flex;
    align-items: center;

    border: 1px solid #111;
}


.quantity-controls button {
    width: 2.5rem;
    height: 2.5rem;

    border: none;
    background: #fff;

    font-family: inherit;
    font-size: 1.3rem;

    cursor: pointer;
}


.quantity-controls span {
    min-width: 2.5rem;

    text-align: center;
}


/* ============================================================
   BOTÓN AÑADIR AL CARRITO
   ============================================================ */

.product-add-button {
    width: 100%;

    padding: 0.9rem 1rem;

    border: 1px solid #111;
    background: #111;
    color: #fff;

    font-family: inherit;
    font-size: 1rem;

    cursor: pointer;
}


.product-add-button:hover {
    background: #fff;
    color: #111;
}


/*
 * Accesibilidad: hacemos visible el foco mediante teclado.
 */
.product-add-button:focus-visible,
.product-modal-prev:focus-visible,
.product-modal-next:focus-visible,
.quantity-controls button:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
}


/* ============================================================
   CARRITO
   ============================================================ */

/*
 * Contenedor general del carrito.
 *
 * Limitamos el ancho para que el contenido no quede
 * demasiado separado en pantallas grandes.
 */
/*
 * Título del carrito.
 *
 * Lo centramos para mantener la estética editorial
 * de la página de tienda.
 */
/*
 * ============================================================
 * CADA PRODUCTO DEL CARRITO
 * ============================================================
 *
 * Cada producto funciona como un bloque independiente.
 */
.cart-item {
    padding: 2rem 0;
    text-align: center;
    /*
     * Línea superior para separar visualmente
     * los diferentes productos.
     */
    border-top: 1px solid #111;
}


/*
 * El último producto también tendrá su separación
 * inferior antes del total.
 */
.cart-item:last-child {
    border-bottom: 1px solid #111;
}


/*
 * Nombre del producto.
 */
.cart-item h3 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 500;
}


/*
 * Variante seleccionada.
 *
 * Por ejemplo:
 * "Opción: M"
 */
.cart-item p {
    margin: 0.35rem 0;
    text-align: center;
}


/*
 * ============================================================
 * CONTROLES DE CANTIDAD
 * ============================================================
 *
 * Colocamos:
 *
 * −   2   +
 *
 * juntos y sin que ocupen demasiado espacio.
 */
.cart-quantity-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin: 1.2rem 0;
}


/*
 * Botones − y +.
 */
.cart-quantity-controls button {
    width: 2.2rem;
    height: 2.2rem;

    padding: 0;

    border: 1px solid #111;
    background: transparent;

    font-family: inherit;
    font-size: 1.2rem;

    cursor: pointer;
}


/*
 * Número de unidades.
 */
.cart-quantity-number {
    min-width: 1.5rem;
    text-align: center;
}


/*
 * ============================================================
 * PRECIO DE LA LÍNEA
 * ============================================================
 *
 * El precio queda separado de los controles de cantidad
 * para que sea fácil identificarlo.
 */
.cart-item p:last-of-type {
    font-size: 1.2rem;
    margin-top: 0.8rem;
    text-align: center;
}


/*
 * ============================================================
 * BOTÓN ELIMINAR
 * ============================================================
 *
 * Lo hacemos mucho más discreto que el botón
 * "SOLICITAR COMPRA".
 */
.cart-remove-button {
    margin-top: 1rem;
    display: block;
    margin-left: auto;
    margin-right: auto;

    padding: 0;

    border: 0;
    background: none;

    font-family: inherit;
    font-size: 1rem;

    text-decoration: underline;

    cursor: pointer;
}


/*
 * Al pasar el ratón por encima, cambiamos ligeramente
 * la opacidad para indicar que es interactivo.
 */
.cart-remove-button:hover {
    opacity: 0.6;
}


/*
 * ============================================================
 * TOTAL
 * ============================================================
 */
.shop-cart-total {
    margin: 1.25rem 0;

    text-align: center;

    font-size: 1.4rem;
    font-weight: 500;
}

.shop-cart-products-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    margin: 3rem auto 0;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.shop-cart-products-link:hover {
    opacity: 0.65;
}

.shop-cart-products-arrow {
    font-size: 1.5rem;
    line-height: 1;
}


/*
 * ============================================================
 * BOTÓN SOLICITAR COMPRA
 * ============================================================
 *
 * Dejamos el botón como elemento principal de acción,
 * separado visualmente del listado.
 */
/* ============================================================
   ERROR DE VARIANTE
   ============================================================ */

/*
 * Mensaje que aparece cuando el usuario intenta añadir
 * un producto con variantes sin haber seleccionado ninguna.
 *
 * Por ejemplo:
 * "Selecciona una talla"
 * "Selecciona un valor"
 */
#variant-error {
    color: #b00000;
    margin-top: 0.5rem;
}

.cart-added-notice {
    position: fixed;
    z-index: 2000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 0.5rem));
    margin: 0;
    padding: 0.85rem 1.25rem;
    background: #222;
    color: #fff;
    font-size: 0.95rem;
    text-align: center;
    opacity: 0;
    transition: opacity 250ms ease, transform 250ms ease;
    pointer-events: none;
}

.cart-added-notice.is-visible {
    transform: translate(-50%, -50%);
    opacity: 1;
}

.cart-added-notice[hidden] {
    display: none;
}


/*
 * ============================================================
 * SAIZ TTT — VERSIÓN ESCRITORIO
 * ============================================================
 *
 * Todas las adaptaciones para pantallas grandes se concentran
 * en este bloque.
 *
 * La versión móvil permanece como base.
 * A partir de 768px modificamos únicamente aquello que necesita
 * más espacio o una distribución diferente.
 */


/* ============================================================
 * 1. HEADER
 * ============================================================ */

@media (min-width: 768px) {

    .site-header {
        /*
         * Aumentamos el espacio lateral del encabezado para que
         * el logo y los controles no queden demasiado cerca
         * de los bordes de la pantalla.
         */
        padding: 1.5rem 2.5rem;
    }

    .site-logo {
        /*
         * El logo puede crecer ligeramente en escritorio.
         */
        width: 10.5rem;
    }

    .header-controls {
        /*
         * Un poco más de separación entre idioma y menú.
         */
        gap: 2rem;
    }

}


/* ============================================================
 * 2. MENÚ PRINCIPAL
 * ============================================================ */

@media (min-width: 768px) {

    .main-menu-inner {
        /*
         * En escritorio reducimos ligeramente el espacio lateral
         * y dejamos más aire alrededor de los enlaces.
         */
        padding: 8rem 2.5rem 4rem;
    }

    .main-menu-list {
        /*
         * Aumentamos ligeramente la separación vertical.
         */
        gap: 1.5rem;
    }

    .main-menu-list a {
        /*
         * Los enlaces pueden ser algo mayores en una pantalla
         * grande sin perder elegancia.
         */
        font-size: 2rem;
    }

    .main-menu-social {
        margin-top: 5rem;
        font-size: 0.85rem;
    }

}


/* ============================================================
 * 3. GUEST SPOTS
 * ============================================================ */

@media (min-width: 768px) {

    .guest-spots {
        /*
         * Limitamos el ancho para evitar que las tarjetas se
         * extiendan demasiado en monitores grandes.
         */
        width: min(100%, 1100px);
        margin-left: auto;
        margin-right: auto;

        padding: 4rem 2.5rem 2rem;
    }

    .guest-spots-header {
        margin-bottom: 1rem;
    }

    .guest-spots-header h2 {
        font-size: 3.5rem;
    }

    .guest-spot-card {
        /*
         * Seguimos manteniendo UNA CIUDAD POR FILA.
         *
         * No convertimos Guest Spots en cuatro columnas porque
         * esta es la distribución que hemos establecido para
         * esta sección.
         */
        padding: 2.75rem 2.5rem;
    }

    .guest-spots-grid > .guest-spot-card:first-child {
        padding-top: 0.75rem;
    }

    .guest-spot-card h3 {
        font-size: 3.5rem;
    }

    .guest-spot-date {
        margin-top: 1rem;
        margin-bottom: 2rem;
        font-size: 1rem;
    }

    .guest-spot-action {
        font-size: 0.85rem;
    }

    .guest-spots-waitlist {
        margin-top: 5rem;
    }

    .guest-spots-waitlist > p {
        font-size: 1.35rem;
    }

}


/* ============================================================
 * 4. PÁGINA DE INICIO — PRESENTACIÓN
 * ============================================================ */

@media (min-width: 768px) {

    .home-intro {
        /*
         * Más espacio vertical y laterales amplios.
         */
        padding: 7rem 4rem 8rem;
    }

    .home-intro-image {
        /*
         * En escritorio la imagen no necesita ocupar
         * necesariamente todo el ancho del monitor.
         *
         * La mantenemos dentro de un ancho controlado y
         * centramos el conjunto.
         */
        width: min(100%, 1100px);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 4rem;
    }

    .home-intro-name {
        font-size: 2.5rem;
    }

    .home-intro-highlight {
        /*
         * Destacamos un poco más "TATUANDO DESDE 2015".
         */
        margin-bottom: 2.75rem;
        font-size: 2.4rem;
    }

    .studio-name-highlight {
        font-size: 2rem;
    }

    .studio-section > .home-intro-name {
        margin-top: 0;
        font-size: 1.5rem;
    }

    .studio-section > .home-intro-highlight {
        margin-bottom: 2rem;
        font-size: 2.5rem;
    }

    .home-intro-text {
        /*
         * El texto no ocupa todo el ancho de la pantalla.
         */
        max-width: 58rem;
        margin-left: auto;
        margin-right: auto;
    }

    .home-intro-text p {
        font-size: 1.45rem;
        line-height: 1.45;
        margin-bottom: 1.75rem;
    }

}


/* ============================================================
 * 5. ESTUDIO — GALERÍAS DE IMÁGENES
 * ============================================================ */

@media (min-width: 768px) {

    .studio-section {
        margin-top: 3rem;
    }


    /*
     * En escritorio mostramos las imágenes en una cuadrícula
     * de 3 columnas.
     *
     * Las primeras 6 imágenes forman dos filas de 3.
     * Las siguientes 6 continúan debajo.
     */
    .studio-section .studio-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;

        width: min(100%, 1100px);
        margin-left: auto;
        margin-right: auto;
        margin-top: 2rem;

        /* En escritorio ya no necesitamos desplazamiento horizontal. */
        overflow: visible;

        /* Desactivamos el comportamiento de carrusel de móvil. */
        scroll-snap-type: none;
    }


    /*
     * Cada fotografía ocupa una de las tres columnas.
     */
    .studio-section .studio-photo {
        width: 100%;
        margin: 0;

        /* Anulamos el tamaño establecido para el carrusel móvil. */
        flex: none;

        scroll-snap-align: none;
    }


    /*
     * En escritorio tampoco necesitamos los puntos indicadores,
     * porque todas las fotografías están visibles simultáneamente.
     */
    .studio-section .studio-dots {
        display: none;
    }


    /*
     * Separación y tamaño de la sección que contiene
     * las galerías de tatuajes.
     */
    .tattoo-gallery-section {
        margin-top: 5rem;
        margin-bottom: 0;
    }


    .tattoo-gallery-section h2 {
        font-size: 2.5rem;
        margin-bottom: 3rem;
    }

}

@media (min-width: 768px) and (orientation: landscape) {
    .studio-carousel.tattoo-carousel .studio-dots {
        display: none;
    }

    .studio-carousel.tattoo-carousel {
        width: min(100%, 1100px);
        margin: 1rem auto 2rem;
        padding: 0 2.5rem;
    }

    .studio-carousel.tattoo-carousel .studio-gallery {
        display: flex;
        width: 100%;
        margin: 0;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

    .studio-carousel.tattoo-carousel .studio-gallery::-webkit-scrollbar {
        display: none;
    }

    .studio-carousel.tattoo-carousel .studio-photo {
        flex: 0 0 calc((100% - 1.5rem) / 3);
        width: calc((100% - 1.5rem) / 3);
        scroll-snap-align: start;
    }

    .studio-carousel.tattoo-carousel .studio-arrow {
        position: absolute;
        top: 50%;
        z-index: 2;
        display: flex;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        padding: 0;
        transform: translateY(-50%);
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        color: #111;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
    }

    .studio-carousel.tattoo-carousel .studio-arrow-prev {
        left: 2.75rem;
    }

    .studio-carousel.tattoo-carousel .studio-arrow-next {
        right: 2.75rem;
    }
}

/* Igualamos los títulos PNG con lienzo 2252 × 358. */
.titulo-imagen,
.titulo-guest-spots,
.faq-header .titulo-imagen,
.citas-section .titulo-imagen,
.contact-section .titulo-imagen,
.home-action-shop .titulo-imagen,
.booking-intro .titulo-imagen,
.shop-intro .titulo-imagen {
    width: 80%;
    max-width: 900px;
    height: auto;
}

@media (min-width: 768px) {
    .titulo-imagen,
    .titulo-guest-spots,
    .faq-header .titulo-imagen,
    .citas-section .titulo-imagen,
    .contact-section .titulo-imagen,
    .home-action-shop .titulo-imagen,
    .booking-intro .titulo-imagen,
    .shop-intro .titulo-imagen {
        width: 30%;
        max-width: 900px;
    }
}

.shop-intro-copy-en {
    text-align: center !important;
}

.shop-intro .titulo-imagen:not(.titulo-imagen-shop-page-en) {
    width: 75%;
}

@media (min-width: 768px) {
    .shop-intro .titulo-imagen:not(.titulo-imagen-shop-page-en) {
        width: 50%;
    }

    .shop-intro .titulo-imagen-shop-page-en {
        width: 50%;
    }
}


/*
 * Cuando se accede directamente al ancla #galeria,
 * dejamos espacio para que el encabezado no tape el título.
 */
#galeria {
    scroll-margin-top: 6rem;
}

#gallery {
    scroll-margin-top: 6rem;
}

/* ============================================================
 * FAQ — DISTRIBUCIÓN EN ESCRITORIO
 * ============================================================ */

@media (min-width: 768px) {

    /*
     * Colocamos el título y el buscador uno debajo del otro.
     */
    .faq-header {
        display: flex;
        flex-direction: column;
        align-items: center;

        /*
         * Reducimos el espacio entre el título y el buscador.
         */
        gap: 1.5rem;

        /*
         * Reducimos el espacio inferior antes
         * de que comiencen las preguntas.
         */
        margin-bottom: 2.5rem;
    }


    /*
     * Título de FAQ centrado.
     */
    .faq-header h2 {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 1;
    }


    /*
     * El buscador queda debajo del título,
     * pero no ocupa todo el ancho.
     */
    .faq-search {
        width: min(100%, 30rem);
    }


    /*
     * Reducimos el espacio superior de toda la sección
     * para acercarla a la sección anterior.
     */
    .faq-section {
        padding-top: 3rem;
    }

}

/* ============================================================
 * PÁGINA DE CITAS — TEXTO MÁS ANCHO EN ESCRITORIO
 * ============================================================ */

@media (min-width: 768px) {

    /*
     * Ampliamos el ancho del bloque introductorio.
     * El formulario NO se modifica.
     */
    .booking-intro {
        max-width: 58rem;
    }

    .booking-intro > .titulo-imagen:not(.titulo-imagen-booking-en) {
        width: 35%;
    }


    /*
     * Ampliamos también el bloque de información importante.
     */
    .booking-notice {
        max-width: 58rem;
    }


    /*
     * El formulario mantiene su ancho original de 40rem
     * y continúa centrado en la página.
     */
    .booking-form-section {
        max-width: 40rem;
        margin-left: auto;
        margin-right: auto;
    }

    .booking-intro p,
    .booking-notice p {
    font-size: 1.3rem;
    line-height: 1.45;
}

}

/* ============================================================
   TIENDA — VERSIÓN ESCRITORIO
   ============================================================ */

@media (min-width: 768px) {

    /*
     * Contenedor de los productos.
     *
     * Utilizamos CSS Grid para colocar los productos
     * en tres columnas iguales.
     */
    .shop-products {
        width: min(100%, 1100px);
        margin: 0 auto;
    }


    /*
     * Los productos se organizan en una cuadrícula:
     *
     * PRODUCTO 1 | PRODUCTO 2 | PRODUCTO 3
     * PRODUCTO 4 | PRODUCTO 5 | PRODUCTO 6
     *
     * Si posteriormente añadimos más productos,
     * automáticamente pasarán a la siguiente fila.
     */
    .shop-products {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 2rem;
        row-gap: 2rem;
    }


    /*
     * El título "PRODUCTOS" y el texto de envíos
     * deben ocupar las tres columnas completas.
     *
     * Así no se mezclan con la cuadrícula.
     */
    .shop-products > h2,
    .shop-products > .shop-shipping-info {
        grid-column: 1 / -1;
    }

    /*
 * Acercamos la frase "Envíos nacionales e internacionales."
 * al título "PRODUCTOS".
 */
.shop-products > .shop-shipping-info {
    margin-top: -2rem;
    margin-bottom: 1rem;
}


    /*
     * En escritorio eliminamos el margen inferior
     * individual que utilizamos en móvil.
     *
     * El espacio entre productos lo controla ahora
     * row-gap.
     */
    .product-card {
        width: 100%;
        margin-bottom: 0;
    }


    /*
     * Reducimos ligeramente el tamaño del nombre
     * porque ahora cada tarjeta ocupa solamente
     * un tercio del ancho.
     */
    .product-card-content h3 {
        font-size: 1.4rem;
    }

}

/* ============================================================
 * CARRITO — SEPARACIÓN RESPECTO A LOS PRODUCTOS
 * ============================================================ */

@media (min-width: 768px) {

    /*
     * El carrito es una sección independiente de la cuadrícula
     * de productos.
     *
     * Añadimos espacio superior para que no quede pegado
     * al último producto.
     */
    .shop-cart {
        margin-top: 6rem;
    }

}

/*
 * ============================================================
 * MODAL DE PRODUCTO — ESCRITORIO
 * ============================================================
 *
 * En pantallas grandes reducimos el tamaño máximo del modal
 * para que la ventana respire y quede completamente visible.
 *
 * No afecta al diseño móvil.
 */
@media (min-width: 769px) {

    /*
     * La ventana ocupará como máximo el 80 % del ancho
     * disponible y el 85 % de la altura de la pantalla.
     */
    .product-modal-content {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        align-items: center;
        gap: 2rem;
        width: min(90vw, 1100px);
        max-width: 1100px;
        max-height: 85vh;

        /*
         * Reducimos un poco el espacio interior.
         */
        padding: 1rem;

        /*
         * Evitamos que el contenido se salga visualmente
         * de la ventana.
         */
        overflow-y: auto;
    }


    /*
     * La galería tendrá una altura limitada.
     *
     * Así una fotografía vertical no puede hacer crecer
     * demasiado la ventana.
     */
    .product-modal-gallery {
        max-height: 75vh;
        margin: 0;
    }


    /*
     * La fotografía se adapta al espacio disponible.
     *
     * "object-fit: contain" hace que se vea la imagen completa
     * sin deformarla ni recortarla.
     */
    #modal-product-image {
        width: 100%;
        height: 75vh;
        object-fit: contain;
    }
}

/*
 * ============================================================
 * CONTENIDO DEL PRODUCTO — ESCRITORIO
 * ============================================================
 *
 * Limitamos el ancho de la información para que no se extienda
 * por toda la ventana del modal.
 */
@media (min-width: 769px) {

    /*
     * Centramos la información del producto y limitamos
     * su anchura.
     */
    .product-modal-info {
        width: 100%;
        max-width: 480px;
        margin: 0;
    }

}


/* ============================================================
 * 8. POLÍTICA DE PRIVACIDAD EN EL FORMULARIO
 * ============================================================ */

@media (min-width: 768px) {

    .form-privacy {
        margin-top: 2.25rem;
    }

    .form-privacy label {
        font-size: 1rem;
    }

}


/* ============================================================
 * 9. FOOTER
 * ============================================================ */

@media (min-width: 768px) {

    .site-footer {
        /*
         * Un poco más de espacio vertical en escritorio.
         */
        padding: 1.5rem 2.5rem;
    }

    .site-footer-inner {
        /*
         * Permitimos una línea algo más ancha sin convertir
         * el footer en un bloque excesivamente extendido.
         */
        max-width: 60rem;
    }

    .footer-legal {
        gap: 1rem 1.5rem;
    }

    .footer-social {
        margin-top: 1.25rem;
    }

}


/* ============================================================
 * 10. PÁGINAS LEGALES
 * ============================================================ */

@media (min-width: 768px) {

    .legal-page {
        /*
         * Más espacio superior para compensar el header fijo
         * y mejorar la lectura en pantallas grandes.
         */
        padding: 8rem 2.5rem 7rem;
    }

    .legal-intro,
    .legal-section {
        max-width: 46rem;
    }

    .legal-intro h1 {
        font-size: 3.5rem;
    }

    .legal-intro p {
        font-size: 1.2rem;
    }

    .legal-section h2 {
        font-size: 1.5rem;
    }

    .legal-section p,
    .legal-section li {
        font-size: 1.1rem;
        line-height: 1.6;
    }

}

/* Todos los títulos PNG comparten el mismo ancho en escritorio. */
@media (min-width: 768px) {
    .titulo-imagen {
        width: 30%;
        max-width: 900px;
    }
}