/* ==========================================================================
   Stella Hnos. — hoja de estilos del sitio
   Paleta y tipografía centralizadas en variables para poder ajustarlas
   fácilmente (por ejemplo, cuando se sumen los colores/logo definitivos).
   ========================================================================== */

:root {
  --accent: #D0251A;
  --accent-dark: #A81F14;
  --accent-tint: #FBE4E1;
  --ink: #23262B;
  --gray-section: #F1F2F5;
  --gray-border: #E2E4E9;
  --gray-border-soft: #EDEFF3;
  --gray-text: #6B7280;
  --gray-text-soft: #5B6472;
  --gray-text-mute: #9AA2B1;
  --white: #FFFFFF;

  --font-display: 'Google Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --container-w: 1180px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 36px;
  --radius-box: 20px;
  --gap-4: 16px;
  --gap-3: 12px;
}

/* ---------- Reset base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-variation-settings: "GRAD" 0;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; color: var(--ink); letter-spacing: -0.035em; }
p { margin: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- Texto utilitario ---------- */
.eyebrow {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.section-title { font-size: 40px; line-height: 44px; font-weight: 800; }
.section-lead { color: var(--gray-text); font-size: 16px; line-height: 1.6; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-outline-dark { background: transparent; color: var(--ink); border-color: #C9CCD3; }
.btn-outline-dark:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-white { background: var(--white); color: var(--accent); }
.btn-white:hover { background: #FDF1EF; }
.btn-block { width: 100%; }

.textlink { color: var(--accent); font-weight: 600; font-size: 14px; }
.textlink:hover { color: var(--accent-dark); }

/* ---------- Tarjetas ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--gray-border-soft);
  border-radius: var(--radius-2xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
a.card {
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.card:hover, a.card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(35, 38, 43, 0.08);
  transform: translateY(-2px);
}
a.card:hover .textlink, a.card:focus-visible .textlink { color: var(--accent-dark); }
/* ---------- Tarjetas de servicio (visuales, con foto de fondo) ---------- */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover, .service-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(23, 25, 29, 0.18);
}
.service-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.service-card-box {
  margin: 0 14px 14px;
  position: relative;
  border-radius: var(--radius-box);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  isolation: isolate;
}
.service-card-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--white);
  opacity: 0.9;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  z-index: -1;
}
.service-card-box h3 { font-size: 19px; }
.service-card-box p { color: var(--gray-text); font-size: 14.5px; line-height: 1.55; }
.service-card .textlink { display: inline-flex; align-items: center; gap: 6px; }
.service-card:hover .textlink, .service-card:focus-visible .textlink { color: var(--accent-dark); }

.icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--accent-tint);
}
.icon-badge svg { stroke: var(--accent); }
.icon-badge.icon-badge-sm { width: 40px; height: 40px; background: var(--gray-section); }
.icon-badge.icon-badge-sm svg { stroke: var(--ink); }

/* ---------- Formulario ---------- */
input, select, textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid #D7DBE3;
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--white);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
label { font-size: 13px; font-weight: 600; color: #4B5563; display: block; margin-bottom: 6px; }
.required { color: var(--accent); }

/* ---------- Dropdown a medida (reemplaza el <select> nativo) ---------- */
.custom-select { position: relative; }
.custom-select-native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.custom-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  padding: 12px 16px;
  border: 1px solid #D7DBE3;
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
}
.custom-select-trigger:hover { border-color: #B9C0CC; }
.custom-select.open .custom-select-trigger,
.custom-select-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.custom-select-arrow {
  flex-shrink: 0;
  stroke: var(--gray-text);
  transition: transform .15s ease;
}
.custom-select.open .custom-select-arrow { transform: rotate(180deg); }
.custom-select-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px rgba(23, 25, 29, 0.14);
}
.custom-select.open .custom-select-list { display: block; }
.custom-select-list li {
  padding: 10px 12px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}
.custom-select-list li:hover { background: var(--gray-section); }
.custom-select-list li.selected { color: var(--accent); font-weight: 600; }

/* ---------- Grillas ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }

/* ---------- Header / navegación ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gray-border-soft);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand img { height: 20px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.main-nav a:hover, .main-nav a.active { color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 20px; }
.header-phone { font-size: 14px; font-weight: 600; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}
.nav-toggle svg { stroke: var(--ink); }

/* Botón "Cotizar online" duplicado dentro del menú hamburguesa (mobile):
   oculto siempre salvo cuando el menú está abierto en mobile (ver media
   query más abajo). En desktop el botón real vive en .header-actions. */
.nav-quote-btn { display: none; }

/* ---------- Hero (home) ---------- */
.hero {
  background: var(--gray-section);
  border-bottom: 1px solid var(--gray-border);
}
.hero .container { padding-bottom: 88px; }
.hero-cols { display: flex; align-items: flex-start; gap: 64px; }
.hero-copy { flex: 1.1; display: flex; flex-direction: column; }
.hero-copy .eyebrow { margin-bottom: var(--gap-3); }
.hero-copy h1 { font-size: 56px; line-height: 1.1; font-weight: 800; max-width: 560px; margin-bottom: 26px; }
.hero-copy p.lead { color: #4B5563; font-size: 17px; line-height: 1.6; max-width: 520px; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-trust { display: flex; gap: 32px; flex-wrap: wrap; }
.hero-trust .item { display: flex; align-items: center; gap: 10px; }
.hero-trust span { color: #3F4552; font-size: 14px; font-weight: 500; }
.hero-form-wrap { flex: 0.9; min-width: 0; }

/* ---------- Formulario de cotización del hero (estilo Airbnb) ---------- */
.hero-quote {
  background: var(--white);
  border-radius: var(--radius-2xl);
  box-shadow: 0 24px 48px rgba(23, 25, 29, 0.14);
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hq-title { font-size: 22px; margin-bottom: -4px; }
.hq-group {
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  overflow: visible;
}
.hq-field { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--gray-border-soft); }
.hq-group .hq-field:last-child { border-bottom: none; }
.hq-field label {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hq-date-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  padding: 4px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}
.hq-date-trigger svg { flex-shrink: 0; stroke: var(--gray-text); }
.hq-date-value { color: var(--gray-text-mute); }
.hq-date-trigger.has-value .hq-date-value { color: var(--ink); font-weight: 500; }
.hq-field.hq-error .hq-date-trigger,
.hq-field.hq-error .hq-location { outline: 1.5px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.hq-field.hq-error label { color: var(--accent); }

.hq-location { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.hq-location svg { flex-shrink: 0; stroke: var(--gray-text); }
.hq-location input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: none;
}
.hq-location input:focus { outline: none; }
.hq-location input::placeholder { color: var(--gray-text-mute); }

.hq-spinner {
  flex-shrink: 0;
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid var(--gray-border);
  border-top-color: var(--gray-text);
  border-radius: 50%;
  animation: hq-spin 0.7s linear infinite;
}
.hq-field.loading .hq-spinner { display: block; }
@keyframes hq-spin { to { transform: rotate(360deg); } }

.hq-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 36px rgba(23, 25, 29, 0.18);
}
.hq-field.open .hq-suggestions { display: block; }
.hq-suggestions li {
  padding: 10px 12px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}
.hq-suggestions li:hover, .hq-suggestions li.active { background: var(--gray-section); }
.hq-suggestions li.hq-empty { color: var(--gray-text-mute); cursor: default; }
.hq-suggestions li.hq-empty:hover { background: none; }

.hq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hq-field-plain label { font-size: 12px; font-weight: 700; color: var(--gray-text-soft); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px; }
.hq-field-plain input { font-size: 15px; padding: 11px 14px; }
.hq-submit { font-size: 15px; }

/* ---------- Calendario ---------- */
.hq-calendar {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: min(300px, 84vw);
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 36px rgba(23, 25, 29, 0.18);
  padding: 16px;
}
#hq-date-field.open .hq-calendar { display: block; }
.hq-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hq-cal-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); text-transform: capitalize; }
.hq-cal-nav {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--gray-text);
  cursor: pointer;
}
.hq-cal-nav:hover:not(:disabled) { background: var(--gray-section); color: var(--ink); }
.hq-cal-nav:disabled { opacity: 0.3; cursor: default; }
.hq-cal-weekdays, .hq-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.hq-cal-weekdays span {
  text-align: center; font-size: 11px; font-weight: 700; color: var(--gray-text-mute);
  text-transform: uppercase; padding-bottom: 8px;
}
.hq-cal-grid button {
  aspect-ratio: 1;
  border: none;
  background: none;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.hq-cal-grid button:hover:not(:disabled) { background: var(--gray-section); }
.hq-cal-grid button:disabled { color: var(--gray-border); cursor: default; }
.hq-cal-grid button.selected { background: var(--accent); color: var(--white); }
.hq-cal-grid span.hq-cal-empty { visibility: hidden; }

/* ---------- Sub-hero (páginas internas) ---------- */
.page-hero {
  background: var(--gray-section);
  border-bottom: 1px solid var(--gray-border);
  padding: 64px 0;
}
.page-hero .eyebrow { display: block; margin-bottom: var(--gap-3); }
.page-hero h1 { font-size: 56px; line-height: 1.1; font-weight: 800; max-width: 640px; }
.page-hero p.lead { color: #4B5563; font-size: 17px; line-height: 1.6; max-width: 620px; margin-top: 16px; }

/* Variante de sub-hero con foto (páginas de servicio con imagen): foto
   grande con esquinas redondeadas a la izquierda y el texto a la derecha. */
.page-hero .hero-row { display: flex; align-items: center; gap: 56px; }
.page-hero .hero-row-media { flex: 1.05; min-width: 0; }
.page-hero .hero-row-copy { flex: 0.95; }
.page-hero .hero-row-media img {
  width: 100%; height: 560px; object-fit: cover;
  border-radius: var(--radius-2xl); display: block;
}
/* Ajustes puntuales de recorte: crop-bottom recorta más de arriba que de
   abajo (para que el camión, en la mitad inferior de su foto, se vea
   completo); crop-top hace lo inverso, recortando más de abajo que de
   arriba para que las caras de las personas —arriba en la foto— no se
   pierdan. */
.page-hero .hero-row-media img.crop-bottom { object-position: center bottom; }
.page-hero .hero-row-media img.crop-top { object-position: center top; }

/* ---------- Logos de clientes ---------- */
.logos-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; }
.logo-badge {
  padding: 14px 26px;
  border: 1px solid var(--gray-border-soft);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: #8890A0;
  background: var(--white);
}

/* ---------- Testimonios interactivos (una sola tarjeta estilo Airbnb, sin
   fondo oscuro): ancho completo del container, cita arriba y franja de
   logos como parte de abajo de la MISMA tarjeta (no dos cajas separadas). */
.testimonial-widget {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--gray-border-soft);
  border-radius: var(--radius-2xl);
  box-shadow: 0 24px 48px rgba(23, 25, 29, 0.10);
  overflow: hidden;
}
.testimonial-card {
  width: 100%;
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.testimonial-quote-mark { color: var(--accent-tint); }
.testimonial-quote {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  max-width: 760px;
}
.testimonial-person { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  overflow: hidden;
}
.testimonial-avatar-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.testimonial-person div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.testimonial-person strong { font-size: 16px; }
.testimonial-person span { color: var(--gray-text); font-size: 13px; }
.testimonial-demo-tag {
  margin-top: 2px;
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Franja de logos en cajas iguales, como parte de abajo de la misma
   tarjeta: grid a ancho completo, todas las celdas del mismo tamaño,
   separadas por líneas finas, con una barra de acento arriba de la celda
   activa. El redondeo de las esquinas inferiores lo da el overflow:hidden
   del contenedor padre (.testimonial-widget), no esta franja. */
.testimonial-tabs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border-top: 1px solid var(--gray-border-soft);
  background: var(--white);
}
.testimonial-tab {
  position: relative;
  height: 108px;
  padding: 16px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-right: 1px solid var(--gray-border-soft);
  border-radius: 0;
  background: var(--white);
  font-family: var(--font-display);
  cursor: pointer;
  transition: background .15s ease;
}
.testimonial-tab:last-child { border-right: 0; }
.testimonial-tab::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background .15s ease;
}
.testimonial-tab:hover { background: #F7F8FA; }
.testimonial-tab.active { background: #F7F8FA; }
.testimonial-tab.active::before { background: var(--accent); }

.testimonial-tab.logo-tab img {
  height: 36px;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter .15s ease, opacity .15s ease;
}
.testimonial-tab.logo-tab:hover img { opacity: 0.75; }
.testimonial-tab.logo-tab.active img { filter: grayscale(0); opacity: 1; }

.demo-tab-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gray-text-mute);
  transition: color .15s ease;
}
.testimonial-tab.demo-tab:hover .demo-tab-label { color: var(--gray-text-soft); }
.testimonial-tab.demo-tab.active .demo-tab-label { color: var(--accent-dark); }

/* ---------- Logos de clientes a color (reemplazo temporal del widget de
   testimonios de arriba, hasta tener las reseñas reales confirmadas).
   Cada logo vive en su propia caja con relación de aspecto fija; si no
   entran todos en una sola línea, el JS del final del body agrega la
   clase .is-marquee al track y lo duplica para un carrousel automático
   infinito (pausa al pasar el mouse). Sin tarjeta contenedora: el
   carrousel corre directo sobre el fondo de la sección. ---------- */
.clients-logos {
  width: 100%;
  overflow: hidden;
}
.clients-logos-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.clients-logos-track.is-marquee {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: clients-logos-marquee 26s linear infinite;
}
.clients-logos-track.is-marquee:hover { animation-play-state: paused; }
@keyframes clients-logos-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.client-logo-box {
  flex: 0 0 auto;
  width: 150px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border: 1px solid var(--gray-border-soft);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.client-logo-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- Reseñas reales de Google (carrusel estilo Airbnb) ---------- */
.reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.reviews-head-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.reviews-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.reviews-score { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); }
.reviews-stars { color: var(--accent); font-size: 15px; letter-spacing: 1px; }
.reviews-count { color: var(--gray-text); font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
.reviews-summary:hover .reviews-count { color: var(--ink); }
.reviews-nav-group { display: flex; gap: 10px; flex-shrink: 0; }

.reviews-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews-track::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--gray-border-soft);
  border-radius: var(--radius-xl);
  padding: 26px;
}
.review-head { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.review-head div { display: flex; flex-direction: column; gap: 2px; }
.review-head strong { font-size: 14px; }
.review-meta { color: var(--gray-text-mute); font-size: 12px; display: flex; align-items: center; gap: 5px; }
.review-stars { color: var(--accent); font-size: 12px; letter-spacing: 1px; }
.review-text {
  color: var(--gray-text-soft);
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-text.expanded { -webkit-line-clamp: unset; overflow: visible; }
.review-more {
  align-self: flex-start;
  margin-top: -8px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.reviews-nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gray-border);
  background: var(--white);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.reviews-nav:hover { background: var(--gray-section); }
.reviews-nav:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* Dots de paginación para los sliders mobile (.mobile-slider): ocultos por
   default (en desktop esas secciones son grids normales, sin slider). Se
   muestran solo dentro de la media query mobile. */
.mobile-slider-dots { display: none; }

/* ---------- Secciones genéricas ---------- */
section { padding: 96px 0; }
section.tight { padding: 56px 0; }
.section-head { max-width: 620px; display: flex; flex-direction: column; gap: var(--gap-4); margin-bottom: 48px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }

.bg-white { background: var(--white); }
.bg-gray { background: var(--gray-section); }
.bg-accent { background: var(--accent); }
.border-top { border-top: 1px solid var(--gray-border); }
.border-bottom { border-bottom: 1px solid var(--gray-border-soft); }

/* ---------- Foto histórica horizontal (sección Nosotros) ---------- */
.historia-photo {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.historia-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

/* ---------- Collage de stats (sección Nosotros) ---------- */
.stats-collage {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.stat-card {
  border-radius: var(--radius-2xl);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-height: 168px;
}
.stat-card strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-card span { font-size: 14.5px; line-height: 1.45; }

.stat-card-a { grid-column: span 2; background: var(--ink); }
.stat-card-a strong { color: var(--white); }
.stat-card-a span { color: #C7CAD1; }

.stat-card-b { grid-column: span 3; background: var(--accent-tint); justify-content: flex-start; }
.stat-card-b strong { color: var(--accent-dark); }
.stat-card-b span { color: #8B463C; }

.stat-card-c { grid-column: span 3; min-height: 200px; background: var(--gray-section); }
.stat-card-c strong { color: var(--ink); }
.stat-card-c span { color: var(--gray-text); }

.stat-card-d { grid-column: span 2; min-height: 200px; background: var(--white); border: 1px solid var(--gray-border); }
.stat-card-d strong { color: var(--ink); }
.stat-card-d span { color: var(--gray-text); }

/* ---------- Placeholder de foto ---------- */
.photo-placeholder {
  border: 1.5px dashed #C9CEDA;
  border-radius: var(--radius-2xl);
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-section);
  text-align: center;
  padding: 0 24px;
}
.photo-placeholder span { color: #8891A0; font-size: 14px; font-weight: 500; }

/* ---------- Foto real en sección grid-2 (reemplaza .photo-placeholder) ---------- */
.section-photo {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius-2xl);
}

/* ---------- Feature list (guardamuebles) ---------- */
.feature-item { display: flex; flex-direction: column; gap: 14px; }
.feature-item h3 { font-size: 16px; font-weight: 700; }
.feature-item p { color: var(--gray-text-soft); font-size: 14px; line-height: 1.55; }

/* ---------- Pasos numerados ---------- */
.step-list { display: flex; flex-direction: column; gap: 28px; }
.step-item { display: flex; gap: 20px; align-items: flex-start; }
.step-num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent);
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.step-item h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.step-item p { color: var(--gray-text-soft); font-size: 15px; line-height: 1.6; }

/* ---------- CTA banda ---------- */
.cta-band { background: var(--accent); padding: 56px 0; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: var(--white); font-size: 24px; font-weight: 800; }
.cta-band p { color: #FBDAD5; font-size: 15px; margin-top: 6px; }
.cta-band-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta-band-actions a.phone-link { color: var(--white); font-size: 14px; font-weight: 600; }

/* ---------- Contacto ---------- */
.contact-list { display: flex; flex-direction: column; gap: 18px; }
.contact-list .row { display: flex; align-items: center; gap: 14px; }
.contact-list .row strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.contact-list .row small { display: block; font-size: 13px; color: var(--gray-text-mute); }
.contact-list .mail-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.contact-list .mail-link strong { color: inherit; }
.contact-list .mail-link:hover { color: var(--accent-dark); }

.contact-form {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--gray-section); border-radius: var(--radius-xl); padding: 32px;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--gray-section); border-top: 1px solid var(--gray-border); padding: 64px 0 28px 0; }
.footer-grid { gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--gray-border); }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col .brand { font-size: 19px; }
.footer-col p { color: var(--gray-text-soft); font-size: 14px; line-height: 1.6; }
.footer-col .col-title { color: var(--ink); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.footer-col a, .footer-col span.line { color: var(--gray-text-soft); font-size: 14px; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; flex-wrap: wrap; gap: 10px; }
.footer-bottom span { color: #8890A0; font-size: 13px; }

.footer-social { display: flex; gap: 10px; margin-top: 6px; }
.footer-social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--gray-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-text-soft);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  flex-shrink: 0;
}
.footer-social-link:hover { color: var(--accent); border-color: var(--accent-tint); background: var(--accent-tint); }
.footer-social-link svg { width: 17px; height: 17px; }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  z-index: 40;
  transition: transform 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float svg { width: 30px; height: 30px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .container { padding: 0 20px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card-a, .stat-card-b, .stat-card-c, .stat-card-d { grid-column: span 1; min-height: 150px; }
  .stat-card strong { font-size: 38px; }

  .main-nav { display: none; }
  .header-phone { display: none; }
  .header-actions .header-quote-btn { display: none; }
  .nav-toggle { display: inline-flex; }

  .site-header.nav-open .main-nav {
    display: flex;
    position: absolute;
    top: 78px; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--gray-border-soft);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 20px 20px 20px;
  }
  .site-header.nav-open .main-nav a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--gray-border-soft); }
  .site-header.nav-open .main-nav .nav-quote-btn {
    display: inline-flex;
    width: 100%;
    padding: 14px 26px;
    border-bottom: 0;
    margin-top: 10px;
    color: var(--white);
  }
  .site-header.nav-open .main-nav .nav-quote-btn:hover { color: var(--white); }

  .hero { padding-top: 28px; }
  .hero-cols { flex-direction: column; gap: 28px; }
  .hero-form-wrap { width: 100%; order: -1; }
  .hq-row { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 34px; }
  .page-hero { padding-top: 28px; }
  .page-hero h1 { font-size: 34px; }

  .page-hero .hero-row { flex-direction: column; gap: 24px; }
  .page-hero .hero-row-media { width: 100%; }
  .page-hero .hero-row-media img { height: 240px; }
  .section-photo { height: 240px; }

  #nosotros .grid-2 { gap: 24px !important; }
  #guardamuebles-teaser .grid-2 { gap: 24px !important; }

  /* Todos los CTA (botones .btn) al 100% de ancho en mobile. */
  .btn { width: 100%; }
  .hero-actions { flex-direction: column; }

  section { padding: 64px 0; }
  .cta-band .container { flex-direction: column; align-items: center; text-align: center; }
  .cta-band-actions { flex-direction: column; width: 100%; gap: 14px; }
  .cta-band-actions a.phone-link { display: block; text-align: center; }

  /* Footer: todo centrado, bloques uno debajo del otro. */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col { align-items: center; text-align: center; }
  .footer-social { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 6px; }

  .whatsapp-float { width: 52px; height: 52px; bottom: 18px; right: 18px; }
  .whatsapp-float svg { width: 26px; height: 26px; }

  .testimonial-card { padding: 32px 24px; }
  .testimonial-quote { font-size: 19px; }
  .testimonial-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .testimonial-tab { height: 76px; border-bottom: 1px solid var(--gray-border-soft); }
  .testimonial-tab:nth-child(3n) { border-right: 0; }
  .testimonial-tab.logo-tab img { height: 28px; }

  /* Carrousel de logos de clientes: borde a borde de página, sin el
     margen lateral que da .container (mismo criterio de "full bleed"
     que los sliders de abajo). */
  .clients-logos { margin: 0 -20px; width: calc(100% + 40px); }
  .clients-logos-track { gap: 14px; padding: 0 20px; }
  .clients-logos-track.is-marquee { padding: 0; }
  .client-logo-box { width: 118px; padding: 10px 14px; }

  .reviews-head { align-items: flex-start; }
  .reviews-head-right { width: 100%; justify-content: space-between; }

  /* Reseñas de Google: la card activa queda centrada en el viewport y se
     ven los bordes de las cards anterior/siguiente (peek), invitando al
     swipe. Mismo criterio que .mobile-slider más abajo. Full bleed: sin
     el margen lateral de .container, para ganar ancho de card. */
  .reviews-track {
    margin: 0 -20px;
    width: calc(100% + 40px);
    padding: 4px 5%;
  }
  .review-card { flex: 0 0 90%; scroll-snap-align: center; }

  /* ---------- Sliders horizontales con peek + dots (Servicios, Qué
     incluye, Seguridad): en desktop estas secciones son grids normales;
     acá, dentro de .mobile-slider, pasan a ser un carrousel con scroll-snap
     centrado, con las cards vecinas asomando a los costados. Los dots se
     arman por JS (uno por card) y se insertan justo después del slider.
     Full bleed (sin margen lateral de .container) para poder agrandar el
     ancho de las cards. */
  .mobile-slider {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -20px;
    width: calc(100% + 40px);
    padding: 4px 5%;
  }
  .mobile-slider::-webkit-scrollbar { display: none; }
  .mobile-slider > * {
    flex: 0 0 90%;
    min-width: 0;
    scroll-snap-align: center;
  }
  .mobile-slider .service-card { min-height: 460px; }
  .mobile-slider .feature-item {
    background: var(--white);
    border: 1px solid var(--gray-border-soft);
    border-radius: var(--radius-xl);
    padding: 24px 20px;
  }

  .mobile-slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
  }
  .mobile-slider-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gray-border);
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
  }
  .mobile-slider-dots button.active {
    width: 22px;
    border-radius: 4px;
    background: var(--accent);
  }
}