/* ===== UBICACIÓN ===== */
#ubicacion .seccion-intro {
  max-width: 62ch;
}

/* La foto manda y los datos van al lado. Con align-items por defecto
   (stretch) las dos columnas terminan exactamente a la misma altura. */
.ubicacion-caja {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 20px;
}

/* --- Foto del local --- */
.ubicacion-foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background-color: #141414;
}

.ubicacion-foto img {
  display: block;
  width: 100%;
  /* 100% de la altura que la fila ya calculó: la foto acompaña a la
     tarjeta de datos recortando por los lados, nunca estirándose. */
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  /* Mismo tratamiento que el mosaico del portafolio, para que se sienta
     de la misma casa. */
  filter: saturate(0.9) brightness(0.94);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.6s ease;
}

.ubicacion-foto:hover img {
  transform: scale(1.03);
  filter: saturate(1.03) brightness(1);
}

/* Sombra abajo para que el rótulo se lea, y el marco dorado fino por
   dentro: el mismo detalle "de estudio" que las fotos del portafolio. */
.ubicacion-foto figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 26px 28px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.15) 38%,
    rgba(0, 0, 0, 0) 62%
  );
}

.ubicacion-foto figcaption::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(176, 141, 87, 0.45);
}

.foto-rotulo {
  position: relative;
  color: var(--dorado);
  font-size: 0.68rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.foto-lugar {
  position: relative;
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  line-height: 1.2;
}

/* --- Tarjeta de datos --- */
.ubicacion-datos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px 30px;
  border: 1px solid #242424;
  border-radius: 4px;
  background-color: #141414;
  /* Franja dorada tenue, como la tarjeta de WhatsApp en Contacto */
  background-image: linear-gradient(
    165deg,
    rgba(176, 141, 87, 0.13),
    rgba(176, 141, 87, 0) 58%
  );
}

/* El pin: el .svg funciona como recorte (mask) y el color lo pone
   background-color. Misma técnica que los iconos de Contacto. */
.ubicacion-pin {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #1e1e1e;
}

.ubicacion-pin::before {
  content: "";
  display: block;
  width: 23px;
  height: 23px;
  background-color: var(--dorado);
  -webkit-mask: url("../assets/imagenes/iconos/mapa.svg") center / contain no-repeat;
  mask: url("../assets/imagenes/iconos/mapa.svg") center / contain no-repeat;
}

.ubicacion-datos h3 {
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
}

.ubicacion-direccion {
  color: #b0b0b0;
  font-size: 0.97rem;
}

/* La referencia es la pista que de verdad sirve para encontrarlo:
   va en cursiva y con la rayita dorada, aparte de la dirección. */
.ubicacion-referencia {
  display: flex;
  gap: 12px;
  color: #8a8a8a;
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.5;
}

.ubicacion-referencia::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 1px;
  margin-top: 11px;
  background-color: var(--dorado);
}

/* --- Horario --- */
/* <dl> y no una tabla: son pares día/hora, que es justo lo que un dl es. */
.ubicacion-horario {
  width: 100%;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #242424;
  font-size: 0.88rem;
}

.ubicacion-horario > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
}

.ubicacion-horario dt {
  color: #8a8a8a;
}

.ubicacion-horario dd {
  margin: 0;
  color: #d8d8d8;
  font-variant-numeric: tabular-nums;
}

.ubicacion-horario .cerrado dd {
  color: #6a6a6a;
}

/* margin-top:auto pega el botón hasta abajo aunque el texto crezca */
.ubicacion-boton {
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ===== RESEÑAS ===== */
.resenas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 620px;
  margin: 64px auto 0;
  padding-top: 52px;
  border-top: 1px solid #1f1f1f;
  text-align: center;
}

.resenas-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Las estrellas son dos capas del mismo mosaico: la gris de fondo
   completa y la dorada encima recortada al porcentaje real. Así un 4.8
   se ve como 4.8 y no como 5 redondeado. */
.estrellas {
  position: relative;
  display: block;
  width: 120px; /* 5 estrellas de 24px */
  height: 24px;
}

.estrellas-fondo,
.estrellas-frente {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  -webkit-mask: url("../assets/imagenes/iconos/estrella.svg") left center / 24px 24px
    repeat-x;
  mask: url("../assets/imagenes/iconos/estrella.svg") left center / 24px 24px repeat-x;
}

.estrellas-fondo {
  width: 100%;
  background-color: #333;
}

.estrellas-frente {
  width: 96%; /* 4.8 / 5 */
  background-color: var(--dorado);
}

.resenas-nota {
  color: #8a8a8a;
  font-size: 0.84rem;
  letter-spacing: 0.4px;
}

.resenas-nota strong {
  color: #f0f0f0;
  font-weight: 600;
}

.resenas h3 {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.2;
  margin-top: 6px;
}

.resenas-texto {
  color: #a0a0a0;
  font-size: 0.98rem;
  text-wrap: pretty;
}

.resenas-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}

/* --- Síguenos --- */
.resenas-seguir {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid #1f1f1f;
  width: 100%;
}

.resenas-seguir p {
  color: #7a7a7a;
  font-size: 0.86rem;
}

.seguir-redes {
  display: flex;
  gap: 14px;
}

/* Botones redondos de puro icono: aquí no compiten con las tarjetas
   grandes de Contacto, solo rematan la sección. */
.seguir-red {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #262626;
  border-radius: 50%;
  background-color: #141414;
  color: #9a9a9a;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.35s, background-color 0.35s, color 0.35s;
}

.seguir-red::before {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  background-color: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
  transition: background-color 0.35s;
}

.seguir-red:hover {
  transform: translateY(-3px);
  border-color: var(--dorado);
  background-color: var(--dorado);
  color: #0d0d0d;
}

.seguir-red[data-icono="instagram"] {
  --icono: url("../assets/imagenes/iconos/instagram.svg");
}
.seguir-red[data-icono="tiktok"] {
  --icono: url("../assets/imagenes/iconos/tiktok.svg");
}
.seguir-red[data-icono="facebook"] {
  --icono: url("../assets/imagenes/iconos/facebook.svg");
}

/* --- Pantallas chicas --- */
@media (max-width: 860px) {
  .ubicacion-caja {
    grid-template-columns: 1fr;
  }

  /* Apiladas ya no hay altura que igualar: se ve la foto completa,
     sin recortes. */
  .ubicacion-foto img {
    height: auto;
    min-height: 0;
  }

  .ubicacion-datos {
    padding: 26px 22px;
  }

  .ubicacion-boton {
    align-self: stretch;
    text-align: center;
  }

  .resenas {
    margin-top: 48px;
    padding-top: 40px;
  }
}

/* --- Celular angosto --- */
/* Los dos botones no caben en un renglón. Apretarlos los dejaba
   chiquitos para el dedo, así que van uno debajo del otro y a todo
   lo ancho. */
@media (max-width: 640px) {
  .resenas-acciones {
    align-self: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ubicacion-foto img,
  .seguir-red {
    transition: none;
  }

  .ubicacion-foto:hover img,
  .seguir-red:hover {
    transform: none;
  }
}