/* Parte de este archivo se ha desarrollado con asistencia de IA y ha sido
   revisado y comprendido por la alumna (ver memoria del proyecto). */
/* ESTILOS PRINCIPALES - Verenice Nails
   Nombres: BEM (bloque__elemento--modificador).
   Medidas: rem/em/% en el diseño; px solo en los @media. */

/* BASE */
body {
    font-family: var(--fuente-texto);
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3 {
    font-family: var(--fuente-titulos);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.contenedor {
    width: 90%;
    max-width: var(--ancho-maximo);
    margin-inline: auto;
}

/* Secciones alternas: fondo blanco / fondo crema */
.seccion {
    padding-block: clamp(3rem, 8vw, var(--espacio-xl));
}

.seccion--blanca {
    background-color: var(--color-blanco);
}

/* Al saltar a un ancla (#galeria), deja hueco bajo la cabecera fija */
:target {
    scroll-margin-top: 6rem;
}
/* BASE */

/* UTILIDADES */
/* Rótulo de sección: lazo + texto dorado + línea degradada */
.rotulo {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.75rem;
}

.rotulo__lazo {
    flex-shrink: 0;
}

.rotulo__texto {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-dorado-texto);
}

.rotulo__linea {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--color-linea-dorada), transparent);
}

/* Rótulo simple del hero: línea corta + texto */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

.eyebrow__linea {
    width: 2.25rem;
    height: 1px;
    background-color: var(--color-dorado);
}

.eyebrow__texto {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-dorado-texto);
}

.titulo-seccion {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.05;
    color: var(--color-ciruela);
    margin-bottom: 1rem;
}

/* Palabra destacada dentro de un título */
.acento {
    font-style: italic;
    color: var(--color-primario);
}

/* Icono de marca (lazo) y destello */
.lazo {
    fill: var(--color-primario);
    flex-shrink: 0;
}

.lazo--dorado {
    fill: var(--color-dorado);
}

.lazo--blanco {
    fill: var(--color-blanco);
}

.destello {
    fill: var(--color-dorado);
}

.intro {
    max-width: 56ch;
    color: var(--color-texto-suave);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: var(--espacio-lg);
}

/* Cabecera centrada (reserva, testimonios) */
.titulo-centro {
    text-align: center;
    max-width: 34rem;
    margin: 0 auto var(--espacio-lg);
}

.titulo-centro__lazo {
    margin-bottom: 0.875rem;
}

.titulo-centro .intro {
    margin-bottom: 0;
}

/* Utilidades de espaciado y alineación (sustituyen estilos inline) */
.u-mt-sm {
    margin-top: 1.25rem;
}

.u-mt-md {
    margin-top: var(--espacio-md);
}

.u-centrado {
    text-align: center;
}

/* Enlace "saltar al contenido": oculto hasta recibir el foco por teclado */
.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.625rem 1rem;
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border-radius: 0.5rem;
    font-weight: 600;
    transform: translateY(-150%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--color-blanco);
    outline-offset: 2px;
}
/* UTILIDADES */

/* BOTONES */
.boton {
    display: inline-block;
    padding: 0.8125rem 1.75rem;
    border: none;
    border-radius: 999px;
    font-family: var(--fuente-texto);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}

/* Botón principal: rosa/magenta degradado (pedir cita) */
.boton--primario {
    background: linear-gradient(120deg, var(--color-primario), var(--color-rosa-fuerte));
    color: var(--color-blanco);
    box-shadow: 0 6px 20px var(--color-rosa-fuerte-40);
}

.boton--primario:hover {
    box-shadow: 0 8px 26px var(--color-rosa-fuerte-55);
    transform: translateY(-2px);
}

/* Botón suave: blush con borde rosa */
.boton--suave {
    background-color: var(--color-secundario);
    color: var(--color-primario-oscuro);
    border: 1.5px solid var(--color-rosa-borde);
}

.boton--suave:hover {
    background-color: var(--color-suave);
}

/* Botón blanco (sobre fondos oscuros) */
.boton--blanco {
    background-color: var(--color-blanco);
    color: var(--color-primario-oscuro);
    box-shadow: 0 4px 20px var(--color-sombra-negra);
}

.boton--blanco:hover {
    background-color: var(--color-secundario);
}

.boton--pequeno {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

.boton--bloque {
    width: 100%;
    text-align: center;
}

.boton:active {
    transform: scale(0.97);
}
/* BOTONES */

/* CABECERA */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 60;
    background-color: var(--color-fondo-40);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: background-color var(--transicion), border-color var(--transicion);
}

.cabecera--scrolled {
    background-color: var(--color-fondo-92);
    border-bottom-color: var(--color-borde);
}

.cabecera__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.875rem;
}

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

.cabecera__marca {
    font-family: var(--fuente-titulos);
    font-size: 1.3125rem;
    letter-spacing: -0.035em;
    color: var(--color-texto);
    line-height: 1;
}

/* Ajuste fino: baja un poco el lazo para alinearlo con la masa del logo */
.cabecera__logo .lazo {
    transform: translateY(3px);
}

/* Logo tipográfico en la cabecera, en rosa (mismo tono que el lazo) */
.cabecera__logo-img {
    height: 2.85rem;
    width: auto;
    fill: var(--color-primario);
    flex-shrink: 0;
}

.cabecera__acciones {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cabecera__hamburguesa {
    background: none;
    border: none;
    font-size: var(--texto-grande);
    cursor: pointer;
    color: var(--color-primario-oscuro);
}

.menu {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.menu__lista {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.menu__enlace {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-texto-suave);
    transition: color var(--transicion);
}

.menu__enlace:hover {
    color: var(--color-primario);
}

.menu__enlace--activo {
    color: var(--color-primario);
}
/* CABECERA */

/* HERO */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    padding-block: clamp(2rem, 6vw, 3.5rem) clamp(3rem, 8vw, 5.5rem);
}

.hero__titulo {
    font-size: clamp(3rem, 7vw, 5.875rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: var(--color-ciruela);
    margin-bottom: 1.375rem;
}

.hero__texto {
    font-size: 1.09375rem;
    color: var(--color-texto-suave);
    line-height: 1.7;
    font-weight: 500;
    max-width: 26rem;
    margin-bottom: 2.125rem;
}

.hero__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hero__stats {
    display: flex;
    gap: 2.25rem;
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-borde);
}

.stat__numero {
    display: block;
    font-family: var(--fuente-titulos);
    font-size: 1.875rem;
    color: var(--color-texto);
    line-height: 1;
}

.stat__texto {
    display: block;
    font-size: 0.78125rem;
    color: var(--color-texto-tenue);
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Composición de fotos del hero */
.hero__foto-comp {
    position: relative;
    height: 33.75rem;
}

.hero__foto-grande {
    position: absolute;
    top: 0;
    right: 0;
    width: 78%;
    height: 86%;
    border-radius: 1.75rem;
    overflow: hidden;
    box-shadow: var(--sombra-lg);
}

.hero__foto-pequena {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 52%;
    height: 58%;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--sombra);
    border: 4px solid var(--color-fondo);
}

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

/* Insignia flotante "Cita confirmada" */
.hero__badge {
    position: absolute;
    top: 40%;
    left: 8%;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 1rem;
    padding: 0.75rem 1.125rem;
    box-shadow: var(--sombra);
}

.hero__badge-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primario), var(--color-primario-oscuro));
}

.hero__badge-titulo {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-texto);
}

.hero__badge-sub {
    font-size: 0.6875rem;
    color: var(--color-texto-tenue);
}
/* HERO */

/* SERVICIOS */
.servicios__lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.tarjeta-servicio {
    display: flex;
    flex-direction: column;
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--sombra-sm);
    transition: box-shadow var(--transicion), transform var(--transicion);
}

.tarjeta-servicio:hover {
    box-shadow: var(--sombra);
    transform: translateY(-3px);
}

.tarjeta-servicio__media {
    position: relative;
    height: 11.625rem;
    overflow: hidden;
}

.tarjeta-servicio__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarjeta-servicio__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-texto-30), transparent);
}

.tarjeta-servicio__duracion {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: var(--color-blanco-88);
    backdrop-filter: blur(6px);
    color: var(--color-texto-tenue);
    font-family: var(--fuente-mono);
    font-size: 0.6875rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
}

.tarjeta-servicio__cuerpo {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.25rem 1.25rem 1.375rem;
}

.tarjeta-servicio__nombre {
    font-family: var(--fuente-titulos);
    font-size: 1.1875rem;
    color: var(--color-texto);
    margin-bottom: 0.375rem;
}

.tarjeta-servicio__desc {
    font-size: 0.84375rem;
    color: var(--color-texto-suave);
    line-height: 1.55;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.tarjeta-servicio__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tarjeta-servicio__precio {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-rosa-fuerte);
}

/* Tarjeta clicable: abre el pop-up de detalle */
.tarjeta-servicio[data-servicio] {
    cursor: pointer;
}

.tarjeta-servicio[data-servicio]:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 3px;
}

/* Pop-up (modal) con el detalle del servicio */
.servicio-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--color-texto-88);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--transicion);
}

.servicio-modal--abierto {
    opacity: 1;
}

.servicio-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(92vw, 40rem);
    max-height: 88vh;
    overflow-y: auto;
    background-color: var(--color-blanco);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-lg);
    transform: translateY(12px) scale(0.98);
    transition: transform var(--transicion);
}

.servicio-modal--abierto .servicio-modal__panel {
    transform: none;
}

.servicio-modal__cerrar {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    background-color: var(--color-blanco-90);
    color: var(--color-texto);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--sombra-sm);
    transition: background-color var(--transicion);
}

.servicio-modal__cerrar:hover {
    background-color: var(--color-blanco);
}

.servicio-modal__media {
    position: relative;
    height: 13rem;
    flex-shrink: 0;
}

.servicio-modal__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.servicio-modal__duracion {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    background-color: var(--color-blanco-90);
    backdrop-filter: blur(6px);
    color: var(--color-texto-suave);
    font-family: var(--fuente-mono);
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
}

.servicio-modal__cuerpo {
    padding: 1.75rem;
}

.servicio-modal__eyebrow {
    display: inline-block;
    font-family: var(--fuente-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-texto-tenue);
    margin-bottom: 0.5rem;
}

.servicio-modal__nombre {
    font-family: var(--fuente-titulos);
    font-size: 1.875rem;
    color: var(--color-texto);
    margin-bottom: 0.75rem;
}

.servicio-modal__desc {
    color: var(--color-texto-suave);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.servicio-modal__incluye-titulo {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: 0.75rem;
}

.servicio-modal__lista {
    list-style: none;
    display: grid;
    gap: 0.625rem;
    margin-bottom: 1.75rem;
}

.servicio-modal__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--color-texto-suave);
}

.servicio-modal__item .lazo {
    flex-shrink: 0;
}

.servicio-modal__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-borde);
}

.servicio-modal__precio {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-rosa-fuerte);
}

/* Bloquea el scroll del fondo cuando el pop-up está abierto */
.sin-scroll {
    overflow: hidden;
}
/* SERVICIOS */

/* GALERÍA */
.galeria__cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.galeria__instagram {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-texto-tenue);
    font-size: 0.84375rem;
    font-weight: 600;
    padding-bottom: 0.25rem;
}

.galeria__instagram:hover {
    color: var(--color-primario);
}

.galeria__mosaico {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 14rem;
    gap: 0.75rem;
}

.galeria__item {
    border-radius: 1.25rem;
    overflow: hidden;
    cursor: pointer;
}

.galeria__item--alta {
    grid-row: span 2;
}

.galeria__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transicion);
}

.galeria__item:hover .galeria__foto {
    transform: scale(1.05);
}

/* Lightbox (se abre al pulsar una foto) */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--color-texto-88);
    backdrop-filter: blur(4px);
}

.lightbox--abierto {
    display: flex;
}

.lightbox__img {
    max-width: min(90vw, 60rem);
    max-height: 85vh;
    border-radius: 1rem;
    box-shadow: var(--sombra-lg);
    object-fit: contain;
}

.lightbox__cerrar {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: none;
    background-color: var(--color-blanco-15);
    color: var(--color-blanco);
    font-size: 1.5rem;
    cursor: pointer;
}

.lightbox__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    background-color: var(--color-blanco-15);
    color: var(--color-blanco);
    font-size: 1.75rem;
    cursor: pointer;
    transition: background-color var(--transicion);
}

.lightbox__flecha:hover,
.lightbox__cerrar:hover {
    background-color: var(--color-blanco-30);
}

.lightbox__flecha--prev {
    left: 1.5rem;
}

.lightbox__flecha--next {
    right: 1.5rem;
}
/* GALERÍA */

/* RESERVA */
.reserva__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem;
    align-items: start;
}

/* Barra de pasos */
.pasos {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 2rem;
}

.paso {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.paso--con-linea {
    flex: 1;
}

.paso__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--color-borde);
    color: var(--color-texto-tenue);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background-color var(--transicion), color var(--transicion);
}

.paso__num--activo {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

.paso__texto {
    font-size: 0.78125rem;
    color: var(--color-texto-tenue);
    font-weight: 500;
    white-space: nowrap;
}

.paso__texto--activo {
    color: var(--color-texto);
    font-weight: 700;
}

.paso__linea {
    flex: 1;
    height: 1px;
    background-color: var(--color-borde);
    transition: background-color var(--transicion);
}

.paso__linea--hecha {
    background-color: var(--color-primario);
}

/* Paneles de cada paso */
.paso-panel {
    display: none;
}

.paso-panel--activo {
    display: block;
}

.paso-titulo {
    font-family: var(--fuente-titulos);
    font-style: italic;
    font-size: 1.375rem;
    color: var(--color-primario-oscuro);
    margin-bottom: 1.125rem;
}

/* Lista de servicios seleccionables */
.servicio-opcion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 0.875rem;
    border: 1.5px solid var(--color-borde);
    background-color: var(--color-blanco);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transicion), background-color var(--transicion);
}

.servicio-opcion + .servicio-opcion {
    margin-top: 0.5rem;
}

.servicio-opcion--activa {
    border-color: var(--color-primario);
    background-color: var(--color-secundario);
}

.servicio-opcion__info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.servicio-opcion__nombre {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-texto);
}

.servicio-opcion--activa .servicio-opcion__nombre {
    color: var(--color-primario-oscuro);
}

.servicio-opcion__dur {
    font-size: 0.75rem;
    color: var(--color-texto-tenue);
    margin-top: 0.125rem;
}

.servicio-opcion__precio {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-rosa-fuerte);
}

/* Calendario */
.calendario {
    background-color: var(--color-blanco);
    border-radius: 1.25rem;
    border: 1px solid var(--color-borde);
    padding: 1.25rem;
    box-shadow: var(--sombra-sm);
    margin-bottom: 1rem;
}

.calendario__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.calendario__mes {
    font-family: var(--fuente-titulos);
    font-size: 1.125rem;
    color: var(--color-primario-oscuro);
}

.calendario__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    border: none;
    background-color: var(--color-secundario);
    color: var(--color-rosa-fuerte);
    font-size: 1rem;
    cursor: pointer;
}

.calendario__rejilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    text-align: center;
}

.calendario__dia-nombre {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-texto-tenue);
    padding: 0.375rem 0;
}

.dia {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-texto);
    transition: background-color 0.15s, color 0.15s;
}

.dia:disabled {
    cursor: not-allowed;
}

.dia:hover {
    background-color: var(--color-secundario);
}

.dia--hoy {
    border: 1.5px solid var(--color-primario);
}

.dia--sel {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    box-shadow: 0 4px 14px var(--color-primario-30);
}

.dia--sel:hover {
    background-color: var(--color-primario);
}

.dia--off {
    color: var(--color-texto-tenue);
    opacity: 0.38;
    cursor: not-allowed;
    text-decoration: line-through;
}

.dia--off:hover {
    background-color: transparent;
}

/* Horas disponibles */
.horas {
    margin-bottom: 1rem;
}

.horas__titulo {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-texto-tenue);
    margin-bottom: 0.625rem;
}

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

.hora {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1.5px solid var(--color-borde);
    background-color: var(--color-blanco);
    color: var(--color-texto-suave);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.hora:hover {
    border-color: var(--color-primario);
    color: var(--color-primario);
}

.hora--sel {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border-color: var(--color-primario);
}

.hora--ocupada {
    opacity: 0.38;
    cursor: not-allowed;
    text-decoration: line-through;
}

.hora--ocupada:hover {
    border-color: var(--color-borde);
    color: var(--color-texto-suave);
}

/* Campos del formulario */
.campo {
    margin-bottom: 1rem;
}

.campo__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: 0.4375rem;
}

.campo__input {
    width: 100%;
    font-family: var(--fuente-texto);
    font-weight: 500;
    font-size: 0.90625rem;
    color: var(--color-texto);
    background-color: var(--color-blanco);
    border: 1.5px solid var(--color-linea);
    border-radius: 0.875rem;
    padding: 0.75rem 0.9375rem;
    outline: none;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo__input:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px var(--color-primario-18);
}

.campo__input::placeholder {
    color: var(--color-texto-tenue);
}

.campo__input--error {
    border-color: var(--color-primario-oscuro);
}

.campo__error {
    font-size: 0.78125rem;
    color: var(--color-primario-oscuro);
    margin-top: 0.375rem;
}

/* Resumen y botones de navegación entre pasos */
.resumen-chip {
    padding: 0.8125rem 1rem;
    border-radius: 0.875rem;
    background-color: var(--color-secundario);
    border: 1px solid var(--color-rosa-borde);
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: var(--color-texto-suave);
    line-height: 1.55;
}

.resumen-chip strong {
    color: var(--color-primario-oscuro);
}

.paso-botones {
    display: flex;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

.boton--atras {
    flex: 1;
    background-color: var(--color-blanco);
    color: var(--color-texto-suave);
    font-weight: 600;
    border: 1.5px solid var(--color-borde);
    box-shadow: none;
}

.boton--siguiente {
    flex: 2;
}

.boton:disabled {
    background: var(--color-borde);
    color: var(--color-texto-tenue);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* Barra lateral de la reserva */
.reserva__lateral {
    position: sticky;
    top: 6.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.incluye {
    background: linear-gradient(160deg, var(--color-secundario), var(--color-blanco));
    border-radius: 1.5rem;
    border: 1px solid var(--color-rosa-borde);
    padding: 2rem;
    box-shadow: var(--sombra);
}

.incluye__titulo {
    font-family: var(--fuente-titulos);
    font-style: italic;
    font-size: 1.375rem;
    color: var(--color-texto);
    margin-block: 1rem;
}

.incluye__item {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-texto-suave);
    line-height: 1.55;
}

.incluye__item::before {
    content: "·";
    color: var(--color-primario);
    font-size: 1.5rem;
    line-height: 0.9;
    flex-shrink: 0;
}

.horario {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-borde);
}

.horario__titulo {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dorado-texto);
    margin-bottom: 0.75rem;
}

.horario__fila {
    display: flex;
    justify-content: space-between;
    font-size: 0.84375rem;
    color: var(--color-texto-suave);
    margin-bottom: 0.4375rem;
}

.horario__fila strong {
    color: var(--color-texto);
    font-weight: 600;
}

/* Promo de bienvenida */
.promo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--color-ciruela), var(--color-primario-oscuro) 55%, var(--color-primario));
    border-radius: 1.25rem;
    padding: 1.375rem 1.5rem;
    color: var(--color-blanco);
}

.promo__etiqueta {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 0.375rem;
}

.promo__titulo {
    font-family: var(--fuente-titulos);
    font-style: italic;
    font-size: 1.375rem;
    margin-bottom: 0.25rem;
}

.promo__texto {
    font-size: 0.8125rem;
    opacity: 0.9;
}

/* Pantalla de confirmación */
.confirmacion {
    max-width: 30rem;
    margin: 0 auto;
    text-align: center;
    padding: 3.25rem 2.5rem;
    background: linear-gradient(135deg, var(--color-secundario), var(--color-blanco));
    border-radius: 1.75rem;
    border: 1px solid var(--color-rosa-borde);
    box-shadow: var(--sombra);
}

.confirmacion__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primario), var(--color-primario-oscuro));
    color: var(--color-blanco);
    font-size: 1.75rem;
    margin: 0 auto 1.25rem;
}

.confirmacion__titulo {
    font-family: var(--fuente-titulos);
    font-style: italic;
    font-size: 1.875rem;
    color: var(--color-texto);
    margin-bottom: 0.5rem;
}

.confirmacion__texto {
    color: var(--color-texto-suave);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.confirmacion__detalle {
    padding: 1rem 1.25rem;
    background-color: var(--color-blanco);
    border-radius: 0.875rem;
    border: 1px solid var(--color-borde);
    font-size: 0.875rem;
    color: var(--color-texto-suave);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.confirmacion__detalle strong {
    display: block;
    color: var(--color-texto);
}
/* RESERVA */

/* SOBRE NOSOTRAS */
.sobre {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
    align-items: center;
}

.sobre__foto-wrap {
    position: relative;
}

.sobre__foto {
    border-radius: 1.75rem;
    overflow: hidden;
    height: 31.25rem;
    box-shadow: var(--sombra-lg);
    width: 100%;
    object-fit: cover;
}

.sobre__badge {
    position: absolute;
    bottom: -1.25rem;
    right: -1.25rem;
    background: linear-gradient(135deg, var(--color-primario), var(--color-primario-oscuro));
    border-radius: 1.25rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 12px 34px var(--color-magenta-28);
    color: var(--color-blanco);
}

.sobre__badge-num {
    font-family: var(--fuente-titulos);
    font-size: 2.25rem;
    line-height: 1;
}

.sobre__badge-texto {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-blanco-80);
    margin-top: 0.25rem;
}

.sobre__parrafo {
    color: var(--color-texto-suave);
    font-size: 1.03125rem;
    line-height: 1.75;
    margin-bottom: 1.125rem;
}

.sobre__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.875rem;
}

.tag {
    padding: 0.4375rem 0.875rem;
    border-radius: 999px;
    background-color: var(--color-secundario);
    color: var(--color-primario-oscuro);
    border: 1px solid var(--color-rosa-borde);
    font-size: 0.8125rem;
    font-weight: 600;
}
/* SOBRE NOSOTRAS */

/* TESTIMONIOS */
.testimonios__lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.testimonio {
    position: relative;
    background: linear-gradient(135deg, var(--color-secundario), var(--color-blanco));
    border: 1px solid var(--color-rosa-borde);
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: var(--sombra-sm);
    transition: box-shadow var(--transicion), transform var(--transicion);
}

.testimonio:hover {
    box-shadow: var(--sombra);
    transform: translateY(-3px);
}

.testimonio__comilla {
    font-family: var(--fuente-titulos);
    font-size: 3.25rem;
    color: var(--color-rosa-borde);
    line-height: 0.6;
    height: 1.625rem;
    margin-bottom: 1.125rem;
}

.testimonio__valoracion {
    position: absolute;
    top: 1.75rem;
    right: 1.75rem;
    display: flex;
    gap: 0.125rem;
}

.testimonio__texto {
    font-family: var(--fuente-texto);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-texto);
    line-height: 1.6;
    margin-bottom: 1.375rem;
}

.testimonio__autor {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.testimonio__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primario), var(--color-primario-oscuro));
    color: var(--color-blanco);
    font-family: var(--fuente-titulos);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.testimonio__nombre {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-texto);
}

.testimonio__desde {
    font-size: 0.75rem;
    color: var(--color-texto-tenue);
}

/* Carrusel de testimonios (lo monta js/testimonios.js) */
.carrusel {
    position: relative;
    max-width: 44rem;
    margin-inline: auto;
}

.carrusel__viewport {
    overflow: hidden;
}

/* Las reseñas van en fila y se deslizan de lado (se ve cómo van pasando).
   El hueco (gap) deja aire entre una y otra al pasar; el viewport
   (overflow hidden) enseña solo una a la vez. */
.testimonios__lista.carrusel__track {
    display: flex;
    gap: 2rem;
    transition: transform 0.45s ease;
}

.carrusel__track > .testimonio {
    flex: 0 0 100%;
}

.carrusel__controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.carrusel__flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background-color: var(--color-blanco);
    color: var(--color-primario);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--sombra-sm);
    transition: background-color var(--transicion), color var(--transicion);
}

.carrusel__flecha:hover {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

.carrusel__puntos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* El botón es un área táctil de 24px; el puntito visual va en ::before */
.carrusel__punto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.carrusel__punto::before {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: var(--color-rosa-borde);
    transition: background-color var(--transicion), transform var(--transicion);
}

.carrusel__punto--activo::before {
    background-color: var(--color-primario);
    transform: scale(1.25);
}
/* TESTIMONIOS */

/* GALERÍA (slider de fotos) */
.foto-slider {
    position: relative;
    max-width: 58rem;
    margin-inline: auto;
}

.foto-slider__viewport {
    position: relative;
    overflow: hidden;
}

.foto-slider__track {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform 0.5s ease;
}

/* Cada slide es un grupo de 3 fotos (se pasan de 3 en 3) */
.foto-slider__slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Card de cada foto: marco vertical con la imagen bien encuadrada */
.foto-slider__card {
    margin: 0;
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-sm);
    background-color: var(--color-secundario);
    aspect-ratio: 3 / 4;
}

.foto-slider__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.foto-slider__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 50%;
    background-color: var(--color-blanco-85);
    backdrop-filter: blur(4px);
    color: var(--color-primario-oscuro);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--sombra-sm);
    transition: background-color var(--transicion);
}

.foto-slider__flecha:hover {
    background-color: var(--color-blanco);
}

.foto-slider__flecha--prev { left: 1rem; }
.foto-slider__flecha--next { right: 1rem; }

.foto-slider__puntos {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* El botón es un área táctil de 24px; el puntito visual va en ::before */
.foto-slider__punto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.foto-slider__punto::before {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: var(--color-rosa-borde);
    transition: background-color var(--transicion), transform var(--transicion);
}

.foto-slider__punto--activo::before {
    background-color: var(--color-primario);
    transform: scale(1.25);
}
/* GALERÍA (slider de fotos) */

/* CTA */
.cta {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    background: linear-gradient(120deg, var(--color-ciruela) 0%, var(--color-primario-oscuro) 45%, var(--color-primario) 100%);
    padding: clamp(2.5rem, 6vw, 3.75rem) clamp(1.75rem, 5vw, 4rem);
    box-shadow: var(--sombra-lg);
}

.cta__textura {
    position: absolute;
    inset: 0;
    opacity: 0.09;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M45 40c-6-8-17-6-16 1 0 4 10 4 16 0 6 4 15 5 16 0 1-7-10-9-16-1z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 90px;
    pointer-events: none;
}

.cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.75rem;
}

.cta__etiqueta {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-blanco-75);
    margin-bottom: 0.5rem;
}

.cta__titulo {
    font-family: var(--fuente-titulos);
    font-style: italic;
    font-size: clamp(1.625rem, 4vw, 2.75rem);
    color: var(--color-blanco);
    margin-bottom: 0.5rem;
}

.cta__texto {
    font-size: 1rem;
    color: var(--color-blanco-88);
}
/* CTA */

/* PIE */
.pie {
    background-color: var(--color-texto);
    color: var(--color-sobre-ciruela);
    padding: 4rem 0 2.5rem;
    margin-top: var(--espacio-lg);
}

.pie__cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.pie__logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.pie__marca {
    font-family: var(--fuente-titulos);
    font-size: 1.5rem;
    letter-spacing: -0.035em;
    color: var(--color-blanco);
}

/* Logo tipográfico en el pie (fondo oscuro → blanco) */
.pie__logo-img {
    height: 3.1rem;
    width: auto;
    fill: var(--color-blanco);
    flex-shrink: 0;
}

.pie__desc {
    font-size: 0.875rem;
    line-height: 1.75;
    max-width: 38ch;
    color: var(--color-sobre-ciruela-72);
}

.pie__tagline {
    margin-top: 1.125rem;
    font-family: var(--fuente-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--color-dorado);
}

.pie__titulo {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-dorado);
    margin-bottom: 1rem;
}

.pie__lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pie__lista a,
.pie__lista span {
    font-size: 0.84375rem;
    color: var(--color-sobre-ciruela-72);
    transition: color var(--transicion);
}

.pie__lista a:hover {
    color: var(--color-blanco);
}

.pie__horario-dia {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-sobre-ciruela-48);
}

.pie__horario-hora {
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--color-sobre-ciruela);
}

.pie__contacto-item {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.pie__cita {
    margin-top: 1.125rem;
}

.pie__bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-blanco-08);
}

.pie__copyright {
    font-family: var(--fuente-mono);
    font-size: 0.75rem;
    color: var(--color-sobre-ciruela-72);
}
/* PIE */

/* CONTACTO */
.contacto {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2.5rem;
    align-items: start;
}

.contacto__info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contacto__dato {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}

.contacto__dato-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-secundario);
    border: 1px solid var(--color-rosa-borde);
    font-size: 1.125rem;
}

.contacto__dato-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dorado-texto);
    margin-bottom: 0.125rem;
}

.contacto__dato-valor {
    color: var(--color-texto);
    font-weight: 500;
}

.contacto__form {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--sombra-sm);
}

textarea.campo__input {
    min-height: 8rem;
    resize: vertical;
}

.contacto__aviso {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 0.875rem;
    background-color: var(--color-secundario);
    border: 1px solid var(--color-rosa-borde);
    color: var(--color-primario-oscuro);
    font-size: 0.875rem;
    font-weight: 600;
}
/* CONTACTO */

/* ANIMACIONES SCROLL */
/* Estado inicial: invisible y desplazado. JS le añade --visible al verse. */
.revelar {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.revelar--visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .revelar {
        opacity: 1;
        transform: none;
    }
}
/* ANIMACIONES SCROLL */

/* RESPONSIVE */
/* Tablets (hasta 900px) */
@media (max-width: 900px) {
    .cabecera__hamburguesa {
        display: block;
    }

    /* Menú oculto por defecto; se muestra al abrirlo con JS */
    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-blanco);
        box-shadow: var(--sombra);
    }

    .menu--abierto {
        display: block;
    }

    .menu__lista {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem 5%;
    }

    .cabecera__interior {
        position: relative;
    }

    /* Rejillas a una columna */
    .hero,
    .sobre,
    .reserva__grid,
    .contacto {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .servicios__lista,
    .testimonios__lista {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero__foto-comp {
        display: none;
    }

    .sobre__foto {
        height: 22rem;
    }

    .reserva__lateral {
        position: static;
    }

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

    /* Galería: la foto alta pasa a normal */
    .galeria__mosaico {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 11rem;
    }

    .galeria__item--alta {
        grid-row: span 1;
    }
}

/* Móviles (hasta 560px) */
@media (max-width: 560px) {
    .servicios__lista {
        grid-template-columns: 1fr;
    }

    .hero__stats {
        gap: 1.25rem;
    }

    .cta__inner {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
    }

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

/* Escritorio (más de 900px): ocultar la hamburguesa */
@media (min-width: 901px) {
    .cabecera__hamburguesa {
        display: none;
    }
}
/* RESPONSIVE */