/*
  Archivo documentado para el proyecto Autocolca.
  Archivo: stylegeneral.css
  Para que sirve: Estilos de las paginas internas de servicios: fichas, carruseles, datos, clasificacion, botones y responsive.

  Guia rapida de lectura:
  - Variables de color y estilos base
  - Header de pagina y contenedor principal
  - Fichas de servicios y datos generales
  - Carrusel de imagenes e indicadores
  - Clasificacion de hoteles/hostales
  - Descripcion destacada debajo del titulo
  - Ajustes para celulares y pantallas pequenas

  Nota: estos comentarios solo ordenan y explican el codigo.
  No cambian el diseno ni el funcionamiento de la pagina.
*/
:root {
  --texto: #203126;
  --texto-suave: #5d6f64;
  --blanco: #ffffff;
}

/* BASE */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.page-servicio {
  margin: 0;
  font-family: Arial, sans-serif;
  color: var(--texto);
  background:
    linear-gradient(rgba(245,244,239,0.76), rgba(245,244,239,0.76)),
    url('../img/fondo.png') center/cover no-repeat;
  background-attachment: scroll; /* 🔥 importante */
}

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

/* HEADER */
.header-servicio {
  width: min(1120px, 92%);
  margin: 18px auto;
  padding: 28px 18px;
  border-radius: 24px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(39,115,73,0.90), rgba(47,143,91,0.80)),
    url('../img/fondo.png') center/cover no-repeat;
  box-shadow: 0 8px 16px rgba(0,0,0,0.10);
}

.header-servicio h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
}
.header-servicio p {
  margin: 0;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* CONTENEDOR */
.servicio-main {
  width: min(1120px, 92%);
  margin: auto;
  padding-bottom: 30px;
}

/* INTRO */
.info-servicio {
  text-align: center;
  background: rgba(255,255,255,0.92);
  padding: 18px;
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.info-servicio h2 { margin-bottom: 12px; color: #267349; }
.info-servicio p { color: var(--texto-suave); line-height: 1.6; }

/* COLORES */
.ficha-verde { --color:#2e9e5f; --rgb:46,158,95; }
.ficha-azul  { --color:#2f6fa3; --rgb:47,111,163; }
.ficha-ocre  { --color:#b8892c; --rgb:184,137,44; }
.ficha-vino  { --color:#8f4c5c; --rgb:143,76,92; }

/* TARJETAS */
.ficha-negocio {
  background: linear-gradient(180deg, rgba(var(--rgb),0.08), rgba(255,255,255,0.98));
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1.2px solid rgba(var(--rgb),0.25);
  box-shadow: 0 6px 14px rgba(var(--rgb),0.10);
  transition: 0.2s ease;
}
.ficha-negocio:hover { transform: translateY(-2px); }
.ficha-negocio::before {
  content:"";
  position:absolute; top:0; left:0; height:4px; width:100%;
  background:var(--color);
}
.ficha-negocio h2 { color: var(--color); margin-bottom: 10px; }

/* LOGO */
.logo-hotel img { max-width: 120px; margin: auto; }

/* CARRUSEL */
.carrusel {
  position: relative; /* necesario para botones */
  overflow: hidden;
  border-radius: 14px;
  margin: 10px 0;
  padding: 6px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(var(--rgb),0.18);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.carrusel-track {
  display: flex;
  gap: 10px;
  transition: transform 0.3s ease;
}
.carrusel-item {
  min-width: calc((100% - 20px)/3);
}
.carrusel-item img {
  width: 100%;
  height: 280px; /* 🔥 aumentas aquí */
  object-fit: cover;
  border-radius: 10px;
}

/* BOTONES (IZQ / DER) */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.prev { left: 10px; }
.next { right: 10px; }

.prev:hover, .next:hover {
  background: #2f8f5b;
  color: #fff;
}

/* DATOS */
.datos-negocio { margin-top: 8px; }
.dato-item { margin: 4px 0; font-size: 0.92rem; }
.dato-item strong { color: var(--color); }
.dato-item a { text-decoration: none; color: var(--texto); }
.dato-item a:hover { color: var(--color); }

/* FOOTER */
.footer-servicio { text-align: center; margin: 20px; }
.btn-inicio, .btn-distrito {
  display: inline-block;
  margin: 5px;
  background: #2f8f5b;
  color: white;
  padding: 8px 14px;
  border-radius: 18px;
  text-decoration: none;
}

/* RESPONSIVE */
@media(max-width:900px){
  .carrusel-item { min-width: 100%; }
  .carrusel-item img { height: 160px; }
}:root {
  --texto: #203126;
  --texto-suave: #5d6f64;
  --blanco: #ffffff;
}

/* BASE */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.page-servicio {
  margin: 0;
  font-family: Arial, sans-serif;
  color: var(--texto);
  background:
    linear-gradient(rgba(245,244,239,0.76), rgba(245,244,239,0.76)),
    url('../img/fondo.png') center/cover no-repeat;
  background-attachment: scroll;
}

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

/* COLOR GENERAL SEGÚN ZONA */
body.page-servicio.margen-izquierda {
  --zona-rgb: 46, 158, 95;   /* verde */
}

body.page-servicio.margen-derecha {
  --zona-rgb: 47, 111, 163;  /* azul */
}

body.page-servicio.parte-alta {
  --zona-rgb: 184, 137, 44;  /* ocre */
}

body.page-servicio.parte-baja {
  --zona-rgb: 143, 76, 92;   /* vino */
}

/* HEADER */
.header-servicio {
  width: min(1120px, 92%);
  margin: 18px auto;
  padding: 28px 18px;
  border-radius: 24px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(var(--zona-rgb), 0.92), rgba(var(--zona-rgb), 0.76)),
    url('../img/fondo.png') center/cover no-repeat;
  box-shadow: 0 8px 16px rgba(0,0,0,0.10);
}

.header-servicio h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
}

.header-servicio p {
  margin: 0;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* CONTENEDOR */
.servicio-main {
  width: min(1120px, 92%);
  margin: auto;
  padding-bottom: 30px;
}

/* INTRO */
.info-servicio {
  text-align: center;
  background: rgba(255,255,255,0.92);
  padding: 18px;
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.info-servicio h2 {
  margin-bottom: 12px;
  color: rgb(var(--zona-rgb));
}

.info-servicio p {
  color: var(--texto-suave);
  line-height: 1.6;
}

/* COLORES DE CADA NEGOCIO */
.ficha-verde { --color:#2e9e5f; --rgb:46,158,95; }
.ficha-azul  { --color:#2f6fa3; --rgb:47,111,163; }
.ficha-ocre  { --color:#b8892c; --rgb:184,137,44; }
.ficha-vino  { --color:#8f4c5c; --rgb:143,76,92; }

/* TARJETAS */
.ficha-negocio {
  background: linear-gradient(180deg, rgba(var(--rgb),0.08), rgba(255,255,255,0.98));
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1.2px solid rgba(var(--rgb),0.25);
  box-shadow: 0 6px 14px rgba(var(--rgb),0.10);
  transition: 0.2s ease;
}

.ficha-negocio:hover {
  transform: translateY(-2px);
}

.ficha-negocio::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:4px;
  width:100%;
  background:var(--color);
}

.ficha-negocio h2 {
  color: var(--color);
  margin-bottom: 10px;
}

/* LOGO */
.logo-hotel img {
  max-width: 120px;
  margin: auto;
}

/* CARRUSEL */
.carrusel {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  margin: 10px 0;
  padding: 6px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(var(--rgb),0.18);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.carrusel-track {
  display: flex;
  gap: 10px;
  transition: transform 0.3s ease;
}

.carrusel-item {
  min-width: calc((100% - (10px * (var(--visible-items, 3) - 1))) / var(--visible-items, 3));
  flex-shrink: 0;
}



/* BOTONES */
.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.prev { left: 10px; }
.next { right: 10px; }

.prev:hover,
.next:hover {
  background: rgb(var(--zona-rgb));
  color: #fff;
}

/* DATOS */
.datos-negocio {
  margin-top: 8px;
}

.dato-item {
  margin: 4px 0;
  font-size: 0.92rem;
}

.dato-item strong {
  color: var(--color);
}

.dato-item a {
  text-decoration: none;
  color: var(--texto);
}

.dato-item a:hover {
  color: var(--color);
}

/* FOOTER */
.footer-servicio {
  text-align: center;
  margin: 20px;
}

.btn-inicio,
.btn-distrito {
  display: inline-block;
  margin: 5px;
  background: rgb(var(--zona-rgb));
  color: white;
  padding: 8px 14px;
  border-radius: 18px;
  text-decoration: none;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .carrusel-item {
    min-width: 100%;
  }

  .carrusel-item img {
    height: 160px;
  }
}

/* Ajuste institucional AUTOCOLCA */
:root {
  --texto: #1f2f27;
  --texto-suave: #607267;
  --linea: #dce7df;
  --verde-autocolca: #2f8f5b;
  --verde-profundo: #155337;
  --sombra-institucional: 0 14px 30px rgba(15, 61, 42, 0.10);
}

body.page-servicio {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.90), rgba(244,247,242,0.94)),
    url("../img/fondo.png") center/cover fixed no-repeat;
}

body.page-servicio.margen-izquierda {
  --zona-rgb: 47, 143, 91;
}

.header-servicio {
  width: min(1120px, calc(100% - 36px));
  margin: 24px auto;
  padding: 36px 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.44);
  box-shadow: var(--sombra-institucional);
}

.header-servicio h1 {
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  letter-spacing: 0;
}

.servicio-main {
  width: min(1120px, calc(100% - 36px));
}

.info-servicio,
.ficha-negocio,
.carrusel {
  border-radius: 8px;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-institucional);
}

.info-servicio {
  text-align: left;
  padding: 24px;
  background: rgba(255,255,255,0.96);
}

.info-servicio h2 {
  margin: 0 0 10px;
  color: var(--verde-profundo);
}

.ficha-negocio {
  padding: 22px;
  background: rgba(255,255,255,0.96);
}

.ficha-negocio:hover {
  transform: translateY(-2px);
}

.ficha-negocio::before {
  height: 5px;
}

.ficha-negocio h2 {
  margin: 0 0 16px;
  color: var(--verde-profundo);
  font-size: clamp(1.35rem, 2.3vw, 2rem);
}

.carrusel {
  padding: 8px;
  background: #f8faf7;
}

.carrusel-item img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 6px;
}

.prev,
.next {
  border-radius: 8px;
  background: rgba(255,255,255,0.94);
  color: var(--verde-profundo);
}

.datos-negocio {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  text-align: left;
}

.dato-item {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8faf7;
  border: 1px solid #edf2ed;
  line-height: 1.55;
}

.dato-item strong {
  color: var(--verde-profundo);
}

.btn-inicio,
.btn-distrito {
  border-radius: 8px;
  background: var(--verde-profundo);
  font-weight: 800;
}

@media (max-width: 900px) {
  .carrusel-item img {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

/* Carrusel ordenado: tres imágenes completas por vista */
.carrusel {
  --carousel-gap: 12px;
  --carousel-height: 300px;
  overflow: hidden;
}

.carrusel-track {
  gap: var(--carousel-gap);
  align-items: stretch;
}

.carrusel-item {
  flex: 0 0 calc((100% - (var(--carousel-gap) * 2)) / 3);
  min-width: calc((100% - (var(--carousel-gap) * 2)) / 3);
  height: var(--carousel-height);
  background: #ffffff;
  border: 1px solid #edf2ed;
  border-radius: 8px;
  overflow: hidden;
}

.carrusel-item img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  background: #ffffff;
  border-radius: 0;
}

.carrusel:has(.carrusel-item:only-child) .carrusel-track {
  justify-content: center;
  transform: none !important;
}

.carrusel:has(.carrusel-item:only-child) .carrusel-item {
  flex-basis: 100%;
  min-width: 100%;
}


/* Oculta flechas solo cuando el carrusel tiene una sola imagen. */
.carrusel:has(.carrusel-item:only-child) .prev,
.carrusel:has(.carrusel-item:only-child) .next {
  display: none !important;
}

@media (max-width: 900px) {
  .carrusel {
    --carousel-height: 220px;
  }

  .carrusel-item {
    flex-basis: 100%;
    min-width: 100%;
  }

}

/* Margen Izquierda: fichas de servicios con color unificado */
body.page-servicio.margen-izquierda {
  --zona-rgb: 31, 122, 77;
  --margen-color: #1f7a4d;
  --margen-oscuro: #0f3d2a;
  --margen-claro: #e8f5ee;
}

body.page-servicio.margen-izquierda .header-servicio {
  background:
    linear-gradient(135deg, rgba(15, 61, 42, 0.94), rgba(31, 122, 77, 0.78)),
    url("../img/fondo.png") center/cover no-repeat;
  box-shadow: 0 20px 42px rgba(15, 61, 42, 0.18);
}

body.page-servicio.margen-izquierda .ficha-verde,
body.page-servicio.margen-izquierda .ficha-azul,
body.page-servicio.margen-izquierda .ficha-ocre,
body.page-servicio.margen-izquierda .ficha-vino {
  --color: var(--margen-color);
  --rgb: 31, 122, 77;
}

body.page-servicio.margen-izquierda .info-servicio,
body.page-servicio.margen-izquierda .ficha-negocio {
  border-color: rgba(var(--zona-rgb), 0.22);
}

body.page-servicio.margen-izquierda .ficha-negocio {
  border-top: 5px solid var(--margen-color);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

body.page-servicio.margen-izquierda .ficha-negocio:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--zona-rgb), 0.42);
  box-shadow: 0 20px 38px rgba(15, 61, 42, 0.16);
}

body.page-servicio.margen-izquierda .ficha-negocio::before {
  background: linear-gradient(90deg, #0f3d2a, #1f7a4d, #74b989);
}

body.page-servicio.margen-izquierda .ficha-negocio h2,
body.page-servicio.margen-izquierda .info-servicio h2,
body.page-servicio.margen-izquierda .dato-item strong {
  color: var(--margen-oscuro);
}

body.page-servicio.margen-izquierda .dato-item {
  border-color: rgba(var(--zona-rgb), 0.14);
  background: #f8fbf8;
}

body.page-servicio.margen-izquierda .prev:hover,
body.page-servicio.margen-izquierda .next:hover,
body.page-servicio.margen-izquierda .btn-inicio,
body.page-servicio.margen-izquierda .btn-distrito {
  background: var(--margen-oscuro);
}

/* Margen Derecha: fichas de servicios con color unificado */
body.page-servicio.margen-derecha {
  --zona-rgb: 45, 111, 140;
  --margen-color: #2d6f8c;
  --margen-oscuro: #173f51;
  --margen-claro: #e8f3f7;
}

body.page-servicio.margen-derecha .header-servicio {
  background:
    linear-gradient(135deg, rgba(23, 63, 81, 0.95), rgba(45, 111, 140, 0.78)),
    url("../img/fondo.png") center/cover no-repeat;
  box-shadow: 0 20px 42px rgba(23, 63, 81, 0.18);
}

body.page-servicio.margen-derecha .ficha-verde,
body.page-servicio.margen-derecha .ficha-azul,
body.page-servicio.margen-derecha .ficha-ocre,
body.page-servicio.margen-derecha .ficha-vino {
  --color: var(--margen-color);
  --rgb: 45, 111, 140;
}

body.page-servicio.margen-derecha .info-servicio,
body.page-servicio.margen-derecha .ficha-negocio {
  border-color: rgba(var(--zona-rgb), 0.22);
}

body.page-servicio.margen-derecha .ficha-negocio {
  border-top: 5px solid var(--margen-color);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

body.page-servicio.margen-derecha .ficha-negocio:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--zona-rgb), 0.42);
  box-shadow: 0 20px 38px rgba(23, 63, 81, 0.16);
}

body.page-servicio.margen-derecha .ficha-negocio::before {
  background: linear-gradient(90deg, #173f51, #2d6f8c, #7fb3c8);
}

body.page-servicio.margen-derecha .ficha-negocio h2,
body.page-servicio.margen-derecha .info-servicio h2,
body.page-servicio.margen-derecha .dato-item strong {
  color: var(--margen-oscuro);
}

body.page-servicio.margen-derecha .dato-item {
  border-color: rgba(var(--zona-rgb), 0.14);
  background: #f8fbfc;
}

body.page-servicio.margen-derecha .prev:hover,
body.page-servicio.margen-derecha .next:hover,
body.page-servicio.margen-derecha .btn-inicio,
body.page-servicio.margen-derecha .btn-distrito {
  background: var(--margen-oscuro);
}

/* Parte Alta: fichas de servicios con color unificado */
body.page-servicio.parte-alta {
  --zona-rgb: 173, 122, 46;
  --margen-color: #ad7a2e;
  --margen-oscuro: #6f4515;
  --margen-claro: #f7efe1;
}

body.page-servicio.parte-alta .header-servicio {
  background:
    linear-gradient(135deg, rgba(111, 69, 21, 0.95), rgba(173, 122, 46, 0.78)),
    url("../img/fondo.png") center/cover no-repeat;
  box-shadow: 0 20px 42px rgba(111, 69, 21, 0.18);
}

body.page-servicio.parte-alta .ficha-verde,
body.page-servicio.parte-alta .ficha-azul,
body.page-servicio.parte-alta .ficha-ocre,
body.page-servicio.parte-alta .ficha-vino {
  --color: var(--margen-color);
  --rgb: 173, 122, 46;
}

body.page-servicio.parte-alta .info-servicio,
body.page-servicio.parte-alta .ficha-negocio {
  border-color: rgba(var(--zona-rgb), 0.22);
}

body.page-servicio.parte-alta .ficha-negocio {
  border-top: 5px solid var(--margen-color);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

body.page-servicio.parte-alta .ficha-negocio:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--zona-rgb), 0.42);
  box-shadow: 0 20px 38px rgba(111, 69, 21, 0.16);
}

body.page-servicio.parte-alta .ficha-negocio::before {
  background: linear-gradient(90deg, #6f4515, #ad7a2e, #d2a765);
}

body.page-servicio.parte-alta .ficha-negocio h2,
body.page-servicio.parte-alta .info-servicio h2,
body.page-servicio.parte-alta .dato-item strong {
  color: var(--margen-oscuro);
}

body.page-servicio.parte-alta .dato-item {
  border-color: rgba(var(--zona-rgb), 0.14);
  background: #fcfaf5;
}

body.page-servicio.parte-alta .prev:hover,
body.page-servicio.parte-alta .next:hover,
body.page-servicio.parte-alta .btn-inicio,
body.page-servicio.parte-alta .btn-distrito {
  background: var(--margen-oscuro);
}

/* Parte Baja: fichas de servicios con color unificado */
body.page-servicio.parte-baja {
  --zona-rgb: 139, 75, 90;
  --margen-color: #8b4b5a;
  --margen-oscuro: #623240;
  --margen-claro: #f6e9ed;
}

body.page-servicio.parte-baja .header-servicio {
  background:
    linear-gradient(135deg, rgba(98, 50, 64, 0.95), rgba(139, 75, 90, 0.78)),
    url("../img/fondo.png") center/cover no-repeat;
  box-shadow: 0 20px 42px rgba(98, 50, 64, 0.18);
}

body.page-servicio.parte-baja .ficha-verde,
body.page-servicio.parte-baja .ficha-azul,
body.page-servicio.parte-baja .ficha-ocre,
body.page-servicio.parte-baja .ficha-vino {
  --color: var(--margen-color);
  --rgb: 139, 75, 90;
}

body.page-servicio.parte-baja .info-servicio,
body.page-servicio.parte-baja .ficha-negocio {
  border-color: rgba(var(--zona-rgb), 0.22);
}

body.page-servicio.parte-baja .ficha-negocio {
  border-top: 5px solid var(--margen-color);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

body.page-servicio.parte-baja .ficha-negocio:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--zona-rgb), 0.42);
  box-shadow: 0 20px 38px rgba(98, 50, 64, 0.16);
}

body.page-servicio.parte-baja .ficha-negocio::before {
  background: linear-gradient(90deg, #623240, #8b4b5a, #c78a99);
}

body.page-servicio.parte-baja .ficha-negocio h2,
body.page-servicio.parte-baja .info-servicio h2,
body.page-servicio.parte-baja .dato-item strong {
  color: var(--margen-oscuro);
}

body.page-servicio.parte-baja .dato-item {
  border-color: rgba(var(--zona-rgb), 0.14);
  background: #fdf8fa;
}

body.page-servicio.parte-baja .prev:hover,
body.page-servicio.parte-baja .next:hover,
body.page-servicio.parte-baja .btn-inicio,
body.page-servicio.parte-baja .btn-distrito {
  background: var(--margen-oscuro);
}


/* Clasificación hotelera */
.clasificacion-hotel {
  position: static;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hotel-badge {
  position: relative;
  width: 86px;
  height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #fff8df;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(180deg, var(--margen-oscuro, #155337), var(--color));
  border: 1px solid rgba(216, 180, 92, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    inset 0 -10px 18px rgba(0,0,0,0.14),
    0 14px 26px rgba(31, 47, 39, 0.18);
  overflow: hidden;
}

.hotel-badge::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.02));
  pointer-events: none;
}

.hotel-badge::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.18);
  pointer-events: none;
}

.hotel-stars {
  position: relative;
  z-index: 1;
  font-size: 0.86rem;
  line-height: 1;
  letter-spacing: 1px;
  color: #ffe08a;
  margin-bottom: 5px;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0,0,0,0.22);
}

.hotel-letter {
  position: relative;
  z-index: 1;
  font-family: Georgia, serif;
  font-size: 2.25rem;
  line-height: 0.95;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.24);
}


/* Diseño profesional para fichas de servicios */
.ficha-negocio {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(300px, 0.86fr);
  grid-template-areas:
    "titulo titulo"
    "descripcion descripcion"
    "media datos";
  gap: 0;
  text-align: left;
  padding: 0;
  margin-bottom: 34px;
  background: #ffffff;
  border: 1px solid rgba(var(--rgb), 0.22);
  border-radius: 18px;
  box-shadow: 0 20px 44px rgba(31, 47, 39, 0.12);
  overflow: hidden;
}

.ficha-negocio:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--rgb), 0.42);
  box-shadow: 0 28px 56px rgba(31, 47, 39, 0.16);
}

.ficha-negocio::before {
  display: none;
}

.ficha-negocio h2 {
  grid-area: titulo;
  margin: 0;
  padding: 24px 132px 24px 28px;
  color: #ffffff !important;
  font-size: clamp(1.25rem, 2.15vw, 1.72rem);
  line-height: 1.2;
  letter-spacing: 0;
  border: 0;
  background:
    linear-gradient(90deg, var(--margen-oscuro, var(--color)), var(--color)),
    linear-gradient(135deg, rgba(255,255,255,0.16), transparent 42%);
  text-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

.logo-hotel,
.clasificacion-hotel {
  position: absolute;
  top: 14px;
  right: 20px;
  z-index: 2;
  margin: 0;
}

.logo-hotel img {
  width: 82px;
  max-height: 58px;
  object-fit: contain;
  padding: 7px;
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}

.clasificacion-hotel {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hotel-badge {
  position: relative;
  width: 76px;
  height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #fff8df;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(180deg, var(--margen-oscuro, #155337), var(--color));
  border: 1px solid rgba(216, 180, 92, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    inset 0 -10px 18px rgba(0,0,0,0.14),
    0 12px 22px rgba(0,0,0,0.18);
  overflow: hidden;
}

.hotel-badge::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.02));
}

.hotel-badge::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.18);
}

.hotel-stars {
  position: relative;
  z-index: 1;
  font-size: 0.82rem;
  line-height: 1;
  letter-spacing: 1px;
  color: #ffe08a;
  margin-bottom: 4px;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0,0,0,0.22);
}

.hotel-letter {
  position: relative;
  z-index: 1;
  font-family: Georgia, serif;
  font-size: 2rem;
  line-height: 0.95;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.24);
}

.carrusel {
  grid-area: media;
  min-width: 0;
  margin: 0;
  padding: 18px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(var(--rgb), 0.07), rgba(var(--rgb), 0.025));
  box-shadow: none;
}

.carrusel-track {
  gap: 12px;
}

.carrusel-item img {
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
  background: #eef3ef;
  box-shadow: 0 12px 24px rgba(31, 47, 39, 0.12);
}

.prev,
.next {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.75);
  background: rgba(var(--rgb), 0.94);
  box-shadow: 0 10px 20px rgba(0,0,0,0.16);
}

.datos-negocio {
  grid-area: datos;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 18px;
  background: #ffffff;
  border-left: 1px solid rgba(var(--rgb), 0.14);
}

.datos-negocio::before {
  content: "Datos del servicio";
  display: block;
  margin: 0 0 4px;
  color: var(--margen-oscuro, var(--color));
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dato-item {
  margin: 0;
  min-height: 48px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
  border-radius: 12px;
  color: var(--texto);
  background: rgba(var(--rgb), 0.045);
  border: 1px solid rgba(var(--rgb), 0.12);
  line-height: 1.42;
}

.dato-item strong {
  color: var(--margen-oscuro, var(--color));
  white-space: nowrap;
}

.dato-item a {
  color: var(--texto);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.dato-item a:hover {
  color: var(--margen-oscuro, var(--color));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hace clickeable todo el cuadro cuando el dato tiene un solo enlace. */
.dato-item:has(a:only-of-type) {
  position: relative;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dato-item:has(a:only-of-type):hover {
  transform: translateY(-1px);
  border-color: rgba(var(--rgb), 0.28);
  box-shadow: 0 10px 22px rgba(var(--rgb), 0.12);
}

.dato-item:has(a:only-of-type) a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

@media (max-width: 980px) {
  .ficha-negocio {
    grid-template-columns: 1fr;
    grid-template-areas:
      "titulo"
      "descripcion"
      "media"
      "datos";
  }

  .datos-negocio {
    border-left: 0;
    border-top: 1px solid rgba(var(--rgb), 0.14);
  }

  .carrusel-item img {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

@media (max-width: 640px) {
  .ficha-negocio h2 {
    padding: 96px 18px 20px;
    text-align: center;
  }

  .logo-hotel,
  .clasificacion-hotel {
    top: 14px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .carrusel {
    padding: 14px;
  }

  .carrusel-item img {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .datos-negocio {
    padding: 14px;
  }
}
/* Carrusel panorámico refinado */
.carrusel {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(var(--rgb), 0.08), rgba(255,255,255,0.92));
  border: 1px solid rgba(var(--rgb), 0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72), 0 14px 28px rgba(31, 47, 39, 0.10);
}

.carrusel-track {
  align-items: stretch;
  gap: 12px;
}

.carrusel-item {
  overflow: hidden;
  border-radius: 12px;
  background: #eef3ef;
}

.carrusel-item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: center center;
  border-radius: 12px;
  box-shadow: none;
}

.prev,
.next {
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(var(--rgb), 0.94);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.76);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.prev:hover,
.next:hover {
  filter: brightness(1.08);
  transform: translateY(-50%) scale(1.04);
}

.prev {
  left: 16px;
}

.next {
  right: 16px;
}

.carrusel-puntos {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  justify-content: center;
  pointer-events: none;
}

@media (max-width: 900px) {
  .carrusel {
    padding: 8px;
    border-radius: 14px;
  }

  .carrusel-item img {
    aspect-ratio: 4 / 3;
  }

  .prev,
  .next {
    width: 38px;
    height: 38px;
  }

  .prev {
    left: 12px;
  }

  .next {
    right: 12px;
  }
}
/* Carrusel de una imagen */
.carrusel {
  --visible-items: 1;
}

.carrusel-item {
  min-width: 100% !important;
  flex-basis: 100% !important;
}
/* Indicadores del carrusel unificado */
.carrusel-punto {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 2px 8px rgba(0,0,0,0.16);
}

.carrusel-punto.activo {
  width: 24px;
  background: var(--color);
}
/* Brillo por color de ficha */
.ficha-negocio {
  box-shadow:
    0 0 0 1px rgba(var(--rgb), 0.10),
    0 0 24px rgba(var(--rgb), 0.22),
    0 20px 44px rgba(31, 47, 39, 0.12);
}

.ficha-negocio:hover {
  box-shadow:
    0 0 0 1px rgba(var(--rgb), 0.18),
    0 0 34px rgba(var(--rgb), 0.34),
    0 28px 56px rgba(31, 47, 39, 0.16);
}

.carrusel {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.72),
    0 0 20px rgba(var(--rgb), 0.16);
}
/* Descripción destacada de ficha */
.descripcion-servicio {
  grid-area: descripcion;
  margin: 0;
  padding: 16px 28px 0;
  color: var(--texto-suave);
  font-size: 1rem;
  line-height: 1.55;
  background: #ffffff;
  text-align: left;
}

.descripcion-servicio::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 3px;
  margin: 0 10px 4px 0;
  border-radius: 999px;
  background: var(--color);
}

@media (max-width: 640px) {
  .descripcion-servicio {
    padding: 16px 18px 0;
    text-align: center;
  }

  .descripcion-servicio::before {
    display: block;
    margin: 0 auto 10px;
  }
}