/* ==========================================================================
   YAE BEAUTY STUDIO — ESTILOS PRINCIPALES
   Identidad visual: Dorado, Crema y Tinta.
   Mobile-First, sin frameworks.
   ========================================================================== */

/* --- Variables y Paleta Oficial --- */
:root {
  --oro-claro:    #E8C39E;
  --oro:          #C9922F;
  --oro-oscuro:   #A97416;
  --tinta:        #2B2320;
  --piedra:       #8A7A6D;
  --arena:        #A9968A;
  --crema:        #FBF7F3;
  --crema-suave:  #F5EDE6;
  --crema-card:   #FFFDFB;
  --blanco:       #FFFFFF;
  --exito:        #2E7D32;
  --wa-verde:     #25D366;
  --wa-oscuro:    #1EAA52;

  --fuente-titulos: 'Playfair Display', Didot, 'Bodoni MT', Georgia, serif;
  --fuente-cuerpo:  'Jost', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;

  --sombra-suave:  0 10px 30px rgba(43, 35, 32, 0.05);
  --sombra-media:  0 14px 34px rgba(43, 35, 32, 0.09);
  --sombra-oro:    0 8px 24px rgba(201, 146, 47, 0.28);
  --borde-suave:   rgba(169, 150, 138, 0.22);
  --borde-oro:     rgba(201, 146, 47, 0.4);

  --radio-sm: 8px;
  --radio-md: 16px;
  --radio-lg: 24px;
  --radio-full: 9999px;

  --transicion: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --ancho-maximo: 1160px;
}

/* --- Reset y Fundamentos --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background-color: var(--crema);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transicion);
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
  background: none;
  transition: var(--transicion);
}

/* Contenedor central */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Tipografía común */
h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  line-height: 1.2;
  color: var(--tinta);
}

.subtitulo-seccion {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 0.5rem;
  display: block;
}

.titulo-seccion {
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

.descripcion-seccion {
  font-size: 1.05rem;
  color: var(--piedra);
  max-width: 580px;
  margin: 0 auto;
}

.encabezado-centro {
  text-align: center;
  margin-bottom: 2.75rem;
}

/* Filete decorativo dorado */
.adorno-oro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0.75rem auto 1.25rem;
}

.adorno-oro::before,
.adorno-oro::after {
  content: "";
  display: inline-block;
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
}

.corona-icono {
  width: 18px;
  height: 18px;
  fill: var(--oro);
}

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.75px;
  border-radius: var(--radio-full);
  transition: var(--transicion);
  text-align: center;
  white-space: nowrap;
}

.btn-oro {
  background: linear-gradient(135deg, var(--oro-claro) 0%, var(--oro) 55%, var(--oro-oscuro) 100%);
  color: var(--blanco);
  box-shadow: var(--sombra-oro);
  text-shadow: 0 1px 2px rgba(43, 35, 32, 0.2);
}

.btn-oro:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201, 146, 47, 0.4);
  filter: brightness(1.05);
}

.btn-borde {
  background-color: transparent;
  color: var(--tinta);
  border: 1px solid var(--borde-oro);
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
}

.btn-borde:hover {
  background-color: var(--blanco);
  border-color: var(--oro);
  color: var(--oro-oscuro);
  transform: translateY(-2px);
}

.btn-wa {
  background-color: var(--wa-verde);
  color: var(--blanco);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}

.btn-wa:hover {
  background-color: var(--wa-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
}

/* --- Aviso Temporal --- */
.aviso-temporal {
  background: linear-gradient(90deg, #3A2F2B 0%, #2B2320 50%, #3A2F2B 100%);
  color: var(--oro-claro);
  padding: 0.65rem 1rem;
  text-align: center;
  font-size: 0.88rem;
  letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(232, 195, 158, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.aviso-temporal.oculto {
  display: none;
}

/* --- Cabecera / Navbar --- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(251, 247, 243, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde-suave);
  transition: var(--transicion);
}

.nav-contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

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

.logo-img {
  height: 48px;
  width: auto;
}

.nav-menu {
  display: none;
  list-style: none;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--tinta);
  position: relative;
  padding: 0.4rem 0;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1.5px;
  background-color: var(--oro);
  transition: var(--transicion);
}

.nav-link:hover::after,
.nav-link.activo::after {
  width: 100%;
}

.nav-link:hover {
  color: var(--oro-oscuro);
}

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

.btn-cita-nav {
  padding: 0.6rem 1.25rem;
  font-size: 0.88rem;
}

/* Botón menú móvil */
.btn-hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 32px;
  height: 24px;
  padding: 0;
  background: transparent;
  z-index: 110;
}

.btn-hamburguesa span {
  width: 100%;
  height: 2px;
  background-color: var(--tinta);
  border-radius: 2px;
  transition: var(--transicion);
}

.btn-hamburguesa.abierto span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

.btn-hamburguesa.abierto span:nth-child(2) {
  opacity: 0;
}

.btn-hamburguesa.abierto span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}

/* Menú móvil desplegable */
.menu-movil {
  position: fixed;
  top: 72px;
  left: 0;
  width: 100%;
  background-color: var(--crema);
  border-bottom: 1px solid var(--borde-suave);
  padding: 1.5rem 1.25rem 2rem;
  box-shadow: var(--sombra-media);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transform: translateY(-120%);
  opacity: 0;
  visibility: hidden;
  transition: var(--transicion);
  z-index: 99;
}

.menu-movil.abierto {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.menu-movil-link {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--tinta);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--borde-suave);
  display: block;
}

.menu-movil-link:hover {
  color: var(--oro);
  padding-left: 8px;
}

/* --- Portada (Hero Section) --- */
.hero {
  padding: 2.25rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.hero-contenido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.badge-ubicacion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(201, 146, 47, 0.12);
  color: var(--oro-oscuro);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radio-full);
  margin-bottom: 1.2rem;
  border: 1px solid rgba(201, 146, 47, 0.25);
}

.hero-titulo {
  font-size: clamp(2.3rem, 6vw, 3.8rem);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 1.2rem;
  letter-spacing: -0.5px;
}

.hero-titulo span {
  font-style: italic;
  color: var(--oro);
}

.hero-descripcion {
  font-size: 1.08rem;
  color: var(--piedra);
  line-height: 1.7;
  margin-bottom: 1.8rem;
  max-width: 520px;
}

/* El botón principal DEBE verse sin hacer scroll */
.hero-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  width: 100%;
}

.hero-visual {
  position: relative;
}

.hero-marco {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-media);
  background-color: var(--crema-suave);
  aspect-ratio: 4 / 3;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.hero-marco:hover .hero-img {
  transform: scale(1.03);
}

/* Tarjeta flotante de confianza */
.hero-tarjeta-flotante {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  padding: 0.75rem 1.1rem;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-media);
  border: 1px solid var(--borde-oro);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.tarjeta-icono-estrella {
  color: var(--oro);
  font-size: 1.3rem;
  line-height: 1;
}

.tarjeta-texto-destacado {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tinta);
}

.tarjeta-subtexto {
  font-size: 0.74rem;
  color: var(--piedra);
}

/* --- Sección Servicios --- */
.seccion-servicios {
  padding: 3.5rem 0;
  background-color: var(--crema-suave);
  border-top: 1px solid var(--borde-suave);
  border-bottom: 1px solid var(--borde-suave);
}

/* LAS TARJETAS DE UNA FILA MIDEN LO MISMO.
 *
 * Se acota la altura con descripción compacta y encaje proporcional de fotos.
 * Con el recorte a 3 líneas y botón «Ver más» automático, ninguna tarjeta se dispara. */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.25rem;
}

.servicio-card {
  background-color: var(--crema-card);
  border-radius: var(--radio-md);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  border: 1px solid var(--borde-suave);
  display: flex;
  flex-direction: column;
  transition: var(--transicion);
}

.servicio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-media);
  border-color: var(--borde-oro);
}

.servicio-img-wrapper {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 180px;
  overflow: hidden;
  background-color: #E2D9D2;
}

.servicio-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.servicio-card:hover .servicio-img {
  transform: scale(1.05);
}

.servicio-categoria-tag {
  position: absolute;
  top: 9px;
  left: 9px;
  background: rgba(43, 35, 32, 0.75);
  backdrop-filter: blur(6px);
  color: var(--oro-claro);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radio-full);
  border: 1px solid rgba(232, 195, 158, 0.3);
}

.servicio-cuerpo {
  padding: 1rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.servicio-nombre {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

/* Tres líneas y puntos suspensivos para mantener tarjetas compactas.
 * Quien desee leer más pulsa «Ver más» para abrir la ficha completa. */
.servicio-descripcion {
  font-size: 0.88rem;
  color: var(--piedra);
  line-height: 1.45;
  margin-bottom: 0.75rem;
  flex-grow: 1;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.servicio-precio {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--oro-oscuro);
  margin-bottom: 0.45rem;
}

.servicio-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.65rem;
  border-top: 1px solid var(--borde-suave);
  margin-top: auto;
}

.servicio-duracion {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--piedra);
}

.btn-servicio-consulta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--oro-oscuro);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transicion);
}

.btn-servicio-consulta:hover {
  color: var(--tinta);
  transform: translateX(3px);
}

/* --- Sección Galería --- */
.seccion-galeria {
  padding: 5rem 0;
}

.filtros-galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.25rem;
}

.btn-filtro {
  padding: 0.5rem 1.15rem;
  border-radius: var(--radio-full);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--piedra);
  border: 1px solid var(--borde-suave);
  background-color: var(--blanco);
  transition: var(--transicion);
}

.btn-filtro:hover {
  color: var(--tinta);
  border-color: var(--oro);
}

.btn-filtro.activo {
  background-color: var(--tinta);
  color: var(--oro-claro);
  border-color: var(--tinta);
  box-shadow: 0 4px 14px rgba(43, 35, 32, 0.15);
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.95rem;
}

.galeria-item {
  position: relative;
  border-radius: var(--radio-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: #E2D9D2;
  box-shadow: var(--sombra-suave);
  cursor: pointer;
  transition: var(--transicion);
}

.galeria-item.oculto-filtro {
  display: none;
}

.galeria-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.galeria-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43, 35, 32, 0.85) 0%, rgba(43, 35, 32, 0.2) 60%, transparent 100%);
  opacity: 0;
  transition: var(--transicion);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
}

.galeria-item:hover .galeria-overlay {
  opacity: 1;
}

.galeria-item:hover .galeria-img {
  transform: scale(1.08);
}

.galeria-categoria {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--oro-claro);
  margin-bottom: 0.25rem;
}

.galeria-titulo {
  font-size: 0.98rem;
  color: var(--blanco);
  font-weight: 500;
}

.galeria-lupa {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: var(--radio-full);
  background: rgba(255, 255, 255, 0.85);
  color: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* --- Sección Sobre Yae --- */
.seccion-sobre-yae {
  padding: 5rem 0;
  background-color: var(--crema-suave);
  border-top: 1px solid var(--borde-suave);
  border-bottom: 1px solid var(--borde-suave);
}

.sobre-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
  align-items: center;
}

.sobre-visual {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
}

.sobre-marco-img {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--sombra-media);
  border: 4px solid var(--blanco);
}

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

.sobre-adorno-borde {
  position: absolute;
  inset: -12px -12px -12px -12px;
  border: 1px solid var(--oro);
  border-radius: calc(var(--radio-lg) + 10px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.sobre-contenido {
  position: relative;
  z-index: 1;
}

.sobre-titulo {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 1.25rem;
}

.sobre-texto {
  font-size: 1.05rem;
  color: var(--piedra);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.sobre-valores {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.75rem 0 2rem;
}

.valor-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.valor-icono {
  width: 28px;
  height: 28px;
  border-radius: var(--radio-full);
  background-color: rgba(201, 146, 47, 0.15);
  color: var(--oro-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.valor-titulo {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--tinta);
}

.valor-desc {
  font-size: 0.88rem;
  color: var(--piedra);
}

/* --- Horarios y Ubicación --- */
.seccion-contacto {
  padding: 5rem 0;
}

.contacto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.card-info {
  background-color: var(--blanco);
  border-radius: var(--radio-lg);
  padding: 1.5rem 1.35rem;
  border: 1px solid var(--borde-suave);
  box-shadow: var(--sombra-suave);
}

.card-info-titulo {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.card-info-titulo-icono {
  color: var(--oro);
}

/* Lista de Horarios */
.horarios-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.horario-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--borde-suave);
  font-size: 0.9rem;
}

.horario-fila:last-child {
  border-bottom: none;
}

.horario-dia {
  font-weight: 500;
  color: var(--tinta);
}

.horario-dia.hoy {
  color: var(--oro-oscuro);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-hoy {
  font-size: 0.7rem;
  background-color: rgba(201, 146, 47, 0.18);
  color: var(--oro-oscuro);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radio-full);
}

.horario-horas {
  color: var(--piedra);
}

.horario-horas.cerrado {
  color: #B71C1C;
  font-style: italic;
}

/* Domicilio y Ubicación */
.ubicacion-detalle {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ubicacion-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.ubicacion-icono {
  font-size: 1.2rem;
  color: var(--oro);
  margin-top: 2px;
}

.ubicacion-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--piedra);
  margin-bottom: 0.2rem;
}

.ubicacion-valor {
  font-size: 1.02rem;
  color: var(--tinta);
  font-weight: 500;
}

.zonas-domicilio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.zona-tag {
  background-color: var(--crema-suave);
  color: var(--tinta);
  font-size: 0.82rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radio-full);
  border: 1px solid var(--borde-suave);
}

/* --- Botón Flotante WhatsApp --- */
.boton-flotante-wa {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--wa-verde);
  color: var(--blanco);
  padding: 0.75rem 1.2rem;
  border-radius: var(--radio-full);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45);
  transition: var(--transicion);
}

.boton-flotante-wa:hover {
  background-color: var(--wa-oscuro);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55);
}

.wa-icono-svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex-shrink: 0;
}

.wa-texto-flotante {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* --- Modal Lightbox --- */
.modal-lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 12, 11, 0.92);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: var(--transicion);
}

.modal-lightbox.activo {
  opacity: 1;
  visibility: visible;
}

.lightbox-contenido {
  position: relative;
  max-width: 900px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: var(--radio-sm);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-pie {
  margin-top: 1rem;
  color: var(--oro-claro);
  font-size: 1rem;
  text-align: center;
}

.lightbox-cerrar {
  position: absolute;
  top: -45px;
  right: 0;
  color: var(--blanco);
  font-size: 2rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transicion);
}

.lightbox-cerrar:hover {
  color: var(--oro);
  transform: scale(1.15);
}

/* --- Pie de Página (Footer) --- */
.pie-pagina {
  background-color: #241D1A;
  color: var(--arena);
  padding: 4rem 0 2.25rem;
  border-top: 1px solid rgba(201, 146, 47, 0.2);
}

.pie-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
  text-align: center;
}

.pie-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pie-logo {
  /* Era de 54 px y se veía apretado entre el borde de arriba y el lema. */
  height: 74px;
  width: auto;
  filter: brightness(0) invert(1) sepia(0.3) saturate(2) hue-rotate(350deg);
  margin-bottom: 1.4rem;
}

.pie-lema {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--oro-claro);
  max-width: 320px;
}

.pie-redes {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.btn-social {
  width: 40px;
  height: 40px;
  border-radius: var(--radio-full);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--oro-claro);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transicion);
  border: 1px solid rgba(232, 195, 158, 0.2);
}

.btn-social:hover {
  background-color: var(--oro);
  color: var(--blanco);
  transform: translateY(-3px);
}

/* Crédito de Negocio */
.pie-credito-separador {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.credito-enlace {
  color: var(--oro-claro);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.credito-enlace:hover {
  color: var(--blanco);
}

/* --- Micro-animaciones (Intersection Observer) --- */
.animar-elemento {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Retrasos secuenciales */
.retraso-1 { transition-delay: 0.1s; }
.retraso-2 { transition-delay: 0.2s; }
.retraso-3 { transition-delay: 0.3s; }
.retraso-4 { transition-delay: 0.4s; }

/* Accesibilidad: Reducción de movimiento */
/* Dos columnas en el móvil: cuatro tarjetas por pantalla.

   Con una sola columna cabía una tarjeta y media y había que desplazarse mucho
   para ver cinco servicios. A dos columnas se ven cuatro de un vistazo, que es
   como se mira un catálogo. Los huecos se estrechan, porque a 160 px de columna
   un hueco de 28 quita más de lo que ordena. */
@media (max-width: 639px) {
  .servicios-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 440px;
    margin: 0 auto;
  }
  .servicio-cuerpo {
    padding: 1.1rem 1.2rem 1.25rem;
  }
  .servicio-nombre {
    font-size: 1.18rem;
    margin-bottom: 0.35rem;
  }
  .servicio-descripcion {
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 0.75rem;
  }
  .servicio-pie {
    padding-top: 0.65rem;
  }
  .aspecto-horizontal {
    grid-column: 1 / -1;
  }
}

/* El encaje todavía sin decidir. Mientras la foto carga se usa el marco de
   siempre, para que la tarjeta no dé un salto al elegir. */
.aspecto-auto .servicio-img-wrapper { aspect-ratio: 16 / 10; }

/* ==========================================================================
   VER MÁS + FICHA COMPLETA
   ========================================================================== */
.servicio-vermas {
  align-self: flex-start;
  margin: -0.6rem 0 1rem;
  padding: 0.2rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--oro);
  border-radius: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--oro-oscuro);
  cursor: pointer;
}
.servicio-vermas:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.ficha {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(380px, calc(100vw - 2rem));
  max-height: min(90vh, 720px);
  padding: 0;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-md);
  background: var(--crema-card);
  box-shadow: 0 24px 60px rgba(43, 35, 32, 0.45);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10000;
}

.ficha::backdrop {
  background: rgba(43, 35, 32, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.ficha-cerrar {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radio-full);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 14px rgba(43, 35, 32, 0.28);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--tinta);
  cursor: pointer;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, background 0.18s ease;
}
.ficha-cerrar:hover {
  background: var(--blanco);
  transform: scale(1.1);
}

.ficha-contenido-tarjeta {
  width: 100%;
}

.tarjeta-en-modal.servicio-card {
  box-shadow: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: none !important;
  margin: 0;
}

/* En el modal, la imagen conserva su proporción elegida sin recorte forzado */
.tarjeta-en-modal .servicio-img-wrapper {
  max-height: none;
}

.tarjeta-en-modal.aspecto-recorte .servicio-img-wrapper,
.tarjeta-en-modal.aspecto-completa .servicio-img-wrapper {
  aspect-ratio: 16 / 10;
}

.tarjeta-en-modal.aspecto-cuadrada .servicio-img-wrapper {
  aspect-ratio: 1 / 1;
}

.tarjeta-en-modal.aspecto-vertical .servicio-img-wrapper {
  aspect-ratio: 4 / 5;
}

.tarjeta-en-modal.aspecto-apaisada .servicio-img-wrapper {
  aspect-ratio: 4 / 3;
}

.tarjeta-en-modal.aspecto-panoramica .servicio-img-wrapper {
  aspect-ratio: 16 / 7;
}

/* En el modal, la descripción se muestra completa sin límite de líneas */
.tarjeta-en-modal .servicio-cuerpo {
  padding: 1.25rem 1.25rem 1.35rem;
}

.tarjeta-en-modal .servicio-nombre {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.45rem;
}

.tarjeta-en-modal .servicio-descripcion {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  max-height: none;
  overflow: visible;
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.tarjeta-en-modal.aspecto-horizontal {
  flex-direction: column;
  min-height: auto;
}
.tarjeta-en-modal.aspecto-horizontal .servicio-img-wrapper {
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animar-elemento {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Media Queries (Tablet y Escritorio) --- */
@media (min-width: 768px) {
  .nav-menu {
    display: flex;
  }
  .btn-hamburguesa {
    display: none;
  }
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    padding: 3rem 0;
  }
  .sobre-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: 3.5rem;
  }
  .contacto-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pie-grid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }
  .pie-marca {
    align-items: flex-start;
  }
  .pie-redes {
    justify-content: flex-start;
  }
  .pie-credito-separador {
    flex-direction: row;
    justify-content: space-between;
  }
  .sobre-valores {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding: 3.5rem 0 5rem;
  }
  /* Cuatro columnas en vez de tres fijas.
     Con tres, cada tarjeta medía 355 px de ancho, y una foto puesta en
     «Vertical» (3:4) daba 471 px de alto: la tarjeta entera se iba a 871 px,
     más de una pantalla. El ancho de la columna es lo que manda sobre el alto
     de la foto, así que estrechar la columna es lo que de verdad las encoge.
     `auto-fill` y no `repeat(4, 1fr)` para que a 1024 px, donde el contenedor
     es más estrecho, se queden en tres en vez de quedar apretadas. */
  .servicios-grid {
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 1.15rem;
  }
  .galeria-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.95rem;
  }
}


/* El botón flotante de contacto entra al bajar (ver inicializarBotonFlotante).
   En la portada tapaba la tarjeta flotante y no hacía falta: ahí arriba ya hay
   dos botones de contacto a la vista. */
.boton-flotante-wa {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.boton-flotante-wa.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .boton-flotante-wa { transition: none; }
}


/* El atributo `hidden` trae `display: none` de la hoja del navegador, pero
   CUALQUIER `display` declarado por nosotros le gana: un elemento con
   `display: flex` marcado como oculto se sigue viendo. Pasaba con la píldora de
   ubicación, que aparecía vacía con el icono del mapa señalando a ninguna parte.
   Esta regla hace que `hidden` signifique lo que dice. */
[hidden] { display: none !important; }

/* ==========================================================================
   VÍDEO EN LA GALERÍA
   ========================================================================== */

/* El distintivo de reproducir. Sustituye a la lupa en los elementos que son
   vídeo: la lupa promete ampliar una foto, y aquí lo que pasa al tocar es que
   algo empieza a moverse y a sonar. */
.galeria-play {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: var(--radio-full);
  background: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El triángulo se dibuja con bordes en vez de meter otro archivo o un emoji:
   un emoji lo pinta cada sistema a su manera y aquí desentonaría. */
.galeria-play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-left: 11px solid var(--tinta);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/* El <video> de reserva, cuando no se pudo sacar miniatura al subir: ocupa el
   mismo hueco que la foto para que la rejilla no se descuadre. */
.galeria-item video.galeria-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--crema-suave);
}

.lightbox-video {
  max-width: 100%;
  max-height: 75vh;
  border-radius: var(--radio-sm);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  background: #000;
}

/* El visor enseña la foto O el vídeo, nunca los dos. Sin esto no se cumple:
   `.lightbox-img` declara `display` y eso gana al atributo `hidden`. */
.lightbox-img[hidden],
.lightbox-video[hidden] { display: none; }


/* ==========================================================================
   EL BANNER DE WEB-ONLINE-PRO
   ========================================================================== */

/* Antes esto eran DOS menciones en dos sitios distintos —un «Sitio creado por»
   perdido a la derecha del copyright y una línea suelta debajo— y no se leía
   ninguna. Ahora es un solo banner, con su recuadro, que sí se ve.

   Sigue al final del todo a propósito: la web es de Yae y su trabajo es
   conseguirle clientas. Un anuncio compitiendo con sus botones de contacto le
   quita conversiones, y una web que no le funciona acaba costando el cliente a
   quien la hizo. */
.pie-reclamo {
  margin: 2rem auto 0;
  max-width: 560px;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(232, 195, 158, 0.28);
  border-radius: var(--radio-md);
  background: rgba(232, 195, 158, 0.06);
  text-align: center;
}

.pie-reclamo-firma {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}
.pie-reclamo-firma strong {
  color: var(--oro-claro);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pie-reclamo-gancho {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

.pie-reclamo-enlace {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radio-full);
  background: var(--oro);
  color: var(--blanco);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-oro);
  transition: var(--transicion);
}
.pie-reclamo-enlace:hover {
  background: var(--oro-oscuro);
  transform: translateY(-2px);
  color: var(--blanco);
}

@media (max-width: 520px) {
  .pie-reclamo { padding: 1.25rem 1rem; }
  .pie-reclamo-enlace { display: block; }
}

/* ==========================================================================
   EL FONDO
   ========================================================================== */

/* Va en el `body`, DEBAJO de todo. Las secciones traen su propio color, así
   que el mosaico sólo asoma donde hay hueco; el color plano de reserva está
   puesto igualmente por si el archivo no cargara. */
body {
  background-color: var(--crema);
  background-image: url("../img/fondo-cliente.svg");
  background-repeat: repeat;
  background-attachment: fixed;
}

/* Quien pide menos movimiento tampoco quiere un fondo que se queda quieto
   mientras el resto se desplaza. */
@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
}

/* ==========================================================================
   CARRUSEL DE FOTOS Y VÍDEOS
   ========================================================================== */

.carrusel { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* Todos apilados y sólo uno visible. Se eligió apilar en vez de deslizar una
   tira: deslizar obliga a medir anchos, y esto vive dentro de tarjetas que
   cambian de tamaño con la pantalla. Apilado no hay nada que medir. */
/* EL FUNDIDO, Y POR QUÉ `visibility` VA EN LA TRANSICIÓN.
 *
 * Aquí había `transition: opacity 0.35s` y aun así el cambio se veía de golpe.
 * La culpa era de `visibility`: al no estar en la lista, saltaba a `hidden` en
 * el primer fotograma y se llevaba por delante la foto saliente antes de que
 * el `opacity` tuviera nada que atenuar. Se veía aparecer la nueva sobre un
 * hueco, no una foto fundirse en otra.
 *
 * `visibility 0s linear 0.5s` no la anima —no se puede—: la RETRASA hasta que
 * el fundido ha terminado. Al entrar, el retraso es 0 y aparece al instante.
 * No se puede quitar `visibility` y dejar sólo la opacidad: un elemento a
 * opacidad 0 sigue recibiendo toques, y las fotos ocultas se comerían los
 * clics de la que se ve. */
.carrusel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s ease-in-out, visibility 0s linear 2s;
}
/* `height: 100%` — SIN ESTO LA FOTO NO LLENA SU MARCO.
 *
 * El item activo es `position: relative` para poder dar altura al carrusel
 * cuando su padre no la tiene. El efecto secundario, que costó ver: al no
 * llevar altura propia, el `height: 100%` de la <img> de dentro no resolvía
 * contra nada y caía a `auto` — o sea, la foto se pintaba con SU proporción
 * original y `object-fit: cover` no llegaba a tener una caja que cubrir.
 *
 * Medido el 21 de agosto en un marco «Vertical» de 257x343: una foto cuadrada
 * de 1254x1254 se pintaba 257x257 y dejaba **86 px de banda gris** entre la
 * imagen y el texto; una de 704x1521 se pintaba 257x556 y se salía 213 px.
 *
 * Con `100%` resuelve contra el carrusel —que sí tiene altura, la del marco— y
 * las dos llenan exacto. Donde el padre NO tenga altura, `100%` vuelve a caer a
 * `auto` y se comporta como antes, así que no rompe ese caso. */
.carrusel-item.es-activo {
  opacity: 1;
  visibility: visible;
  position: relative;
  height: 100%;
  transition: opacity 2s ease-in-out, visibility 0s linear 0s;
}

.carrusel-item img,
.carrusel-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El distintivo de reproducir, igual que en la galería. */
.carrusel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: var(--radio-full);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.carrusel-play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 17px solid var(--tinta);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radio-full);
  background: rgba(255, 255, 255, 0.88);
  color: var(--tinta);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(43, 35, 32, 0.25);
  transition: background 0.2s ease;
}
.carrusel-flecha:hover { background: var(--blanco); }
.carrusel-antes { left: 8px; }
.carrusel-despues { right: 8px; }

.carrusel-puntos {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.carrusel-punto {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--radio-full);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
.carrusel-punto.es-activo { background: var(--blanco); width: 18px; }

/* Cuando el carrusel sustituye a una imagen suelta —portada, «Sobre mí»— tiene
   que RELLENAR exactamente el hueco que ocupaba aquella.

   El `width/height: 100%` no es decorativo. Sin él, la caja no tenía medida
   propia y crecía con lo que hubiera dentro: con un vídeo vertical se estiraba
   a 930 px de alto y al pasar a una foto apaisada encogía de golpe. Las flechas,
   que van al 50% de la altura, saltaban de sitio a cada paso — y parecía que se
   escondían. El marco de la portada ya manda su proporción 4:3; lo único que
   hacía falta era ocuparlo entero, igual que hacía la imagen. */
.carrusel-caja {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .carrusel-item { transition: none; }
}

/* El vídeo mientras se reproduce dentro de una tarjeta.
   `contain` y no `cover`: un vídeo vertical de móvil dentro de una tarjeta
   apaisada quedaría recortado por la mitad con `cover`. Prefiero franjas a los
   lados antes que cortarle la cara a alguien. */
.carrusel-reproduciendo {
  object-fit: contain !important;
  background: #1A1512;
}

/* ==========================================================================
   CÓMO SE ENCAJA LA FOTO EN SU TARJETA
   ==========================================================================
   El marco por defecto es 16:10 recortando, que es lo correcto para fotos de
   trabajos —una mirada, unas pestañas— donde perder los bordes no importa. Pero
   una foto vertical de un producto, o un gráfico con texto dentro, quedan
   destrozados. De ahí estas opciones. */

/* --- Completa: se ve entera, con márgenes ---
   Es la más segura de todas: NO cambia el alto de la tarjeta, así que la fila
   sigue cuadrada. El fondo tiñe los márgenes con el color de la web en vez de
   dejar dos franjas muertas. */
.aspecto-completa .servicio-img-wrapper { background-color: var(--crema-suave); max-height: 180px; }
.aspecto-completa .servicio-img,
.aspecto-completa .carrusel-item img,
.aspecto-completa .carrusel-item video { object-fit: contain; }

/* --- Vertical y panorámica: sólo cambia la forma del marco --- */
.aspecto-vertical .servicio-img-wrapper { aspect-ratio: 4 / 5; max-height: 240px; }
/* ==========================================================================
   SERVICIOS EN TIRA — se pasan de lado con el dedo
   --------------------------------------------------------------------------
   Ocupa poquísimo alto, y ese es el motivo de existir. El precio hay que
   decirlo: **esconde servicios**. Sólo se ven dos o tres, y hay que descubrir
   que la tira se desliza.

   Para que se descubra, las tarjetas se dimensionan de modo que **la siguiente
   asome por el borde**. Una tira donde la última tarjeta acaba justo en el
   canto parece una rejilla que cabe entera, y nadie intenta arrastrarla.
   ========================================================================== */
.servicios-grid.en-tira {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
}

.servicios-grid.en-tira .servicio-card {
  flex: 0 0 clamp(210px, 65vw, 260px);
  scroll-snap-align: start;
}

/* En tira, «Horizontal» no puede ocupar la fila entera: no hay filas. Se le da
   un ancho mayor para que siga teniendo sentido tener la foto al lado. */
.servicios-grid.en-tira .aspecto-horizontal {
  flex: 0 0 clamp(290px, 85vw, 420px);
  grid-column: auto;
}

.servicios-grid.en-tira::-webkit-scrollbar { height: 8px; }
.servicios-grid.en-tira::-webkit-scrollbar-thumb {
  background: var(--borde-suave);
  border-radius: var(--radio-full);
}

.aspecto-panoramica .servicio-img-wrapper { aspect-ratio: 16 / 7; max-height: 140px; }

/* Cuadrada. Mantiene el formato cuadrado para fotos 1:1 con altura contenida. */
.aspecto-cuadrada .servicio-img-wrapper { aspect-ratio: 1 / 1; max-height: 220px; }

.aspecto-apaisada .servicio-img-wrapper { aspect-ratio: 4 / 3; max-height: 190px; }

.aspecto-recorte .servicio-img-wrapper { aspect-ratio: 16 / 10; max-height: 180px; }

/* ==========================================================================
   HORIZONTAL — la foto AL LADO del texto
   --------------------------------------------------------------------------
   Es el único encaje que cambia la FORMA de la tarjeta y no sólo el marco de
   la foto. En 2 columnas queda equilibrada con la foto al lado.
   ========================================================================== */
.aspecto-horizontal {
  grid-column: span 2;
  flex-direction: row;
  min-height: 160px;
}

.aspecto-horizontal .servicio-img-wrapper {
  width: 36%;
  flex: 0 0 36%;
  aspect-ratio: auto;
  max-height: none;
  align-self: stretch;
  position: relative;
}

.aspecto-horizontal .servicio-img-wrapper > .carrusel,
.aspecto-horizontal .servicio-img-wrapper > .carrusel-caja,
.aspecto-horizontal .servicio-img-wrapper > img,
.aspecto-horizontal .servicio-img-wrapper > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.aspecto-horizontal .servicio-cuerpo {
  flex: 1 1 auto;
  padding: 0.85rem 1rem;
  justify-content: center;
}

/* En móvil vuelve a apilarse */
@media (max-width: 639px) {
  .aspecto-horizontal {
    flex-direction: column;
    min-height: auto;
  }
  .aspecto-horizontal .servicio-img-wrapper {
    width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    max-height: 180px;
  }
}

/* --- De fondo: la foto ocupa la tarjeta entera y el texto va encima --- */
.aspecto-fondo { position: relative; min-height: 290px; }

.aspecto-fondo .servicio-img-wrapper {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  max-height: none;
}

.aspecto-fondo .servicio-cuerpo {
  position: relative;
  z-index: 2;
  margin-top: auto;          /* el texto se apoya abajo, sobre el velo */
  color: var(--blanco);
  padding: 1rem 1.15rem 1.15rem;
}

/* EL SUELO DE CONTRASTE, en dos capas suaves. */
.aspecto-fondo .servicio-img,
.aspecto-fondo .carrusel-item img,
.aspecto-fondo .carrusel-item video {
  filter: var(--filtro-propio, ) brightness(0.82) saturate(0.96);
}

/* Y un degradado apenas insinuado bajo el texto */
.aspecto-fondo .servicio-cuerpo::before {
  content: "";
  position: absolute;
  inset: -2.5rem 0 0 0;
  background: linear-gradient(to top,
              rgba(20, 16, 14, 0.65) 0%,
              rgba(20, 16, 14, 0.32) 55%,
              rgba(20, 16, 14, 0) 100%);
  pointer-events: none;
  z-index: -1;
}

.aspecto-fondo .servicio-nombre,
.aspecto-fondo .servicio-descripcion,
.aspecto-fondo .servicio-duracion,
.aspecto-fondo .servicio-precio { color: var(--blanco); }
.aspecto-fondo .servicio-descripcion { opacity: 0.92; }

/* El vídeo mientras se reproduce sí recupera su brillo */
.aspecto-fondo .carrusel-reproduciendo { filter: none; }
.aspecto-fondo .servicio-pie { border-top-color: rgba(255, 255, 255, 0.2); }

/* Las flechas del carrusel suben por encima del velo */
.aspecto-fondo .carrusel-flecha,
.aspecto-fondo .carrusel-puntos { z-index: 3; }
.aspecto-fondo .carrusel-puntos { bottom: auto; top: 10px; }

@media (max-width: 480px) {
  .aspecto-fondo { min-height: 260px; }
}

/* El ajuste de imagen de cada foto, cuando la tarjeta NO es de fondo.
   Va por variable para poder componerlo arriba; aquí, solo. */
.carrusel-item img,
.carrusel-item video,
.galeria-img,
.servicio-img { filter: var(--filtro-propio, none); }