/* ══════════════════════════════════════════════════════════════════════════
   Autos San Martín — hoja de estilos (Fase 1)
   Paleta: verde kelly #049A28 + rojo #CC0604 + celeste #58DBF9
   Tipografía: Barlow Condensed + Inter
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Primario — verde del anillo del sello */
  --sm-verde:         #049A28;
  --sm-verde-oscuro:  #02701C;
  --sm-verde-claro:   #2FBF4E;

  /* Acento — rojo del Yaris y de la cinta */
  --sm-rojo:          #CC0604;
  --sm-rojo-oscuro:   #960301;

  /* Secundario — celeste del escudo */
  --sm-celeste:       #58DBF9;
  --sm-celeste-hondo: #1B7E9B;

  /* Detalle — oro de la corona, uso mínimo */
  --sm-oro:           #E8B21E;

  /* Neutros — base fría */
  --sm-tinta:       #10151F;
  --sm-grafito:     #3A4454;
  --sm-humo:        #F4F6FA;
  --sm-borde:       #DDE3EC;
  --sm-blanco:      #FFFFFF;

  /* Tipografía */
  --sm-titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sm-texto:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Geometría — recta/técnica, nada de pills */
  --sm-radio:    4px;
  --sm-radio-lg: 8px;
  --sm-sombra:   0 1px 2px rgba(16, 21, 31, .06);
  --sm-header-h: 74px;
  /* Barra superior (38) + header (74). */
  --sm-header-offset: 112px;
  --sm-datos-h: 132px;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--sm-texto);
  font-size: 15px;
  line-height: 1.65;
  color: var(--sm-grafito);
  background: var(--sm-blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}

body.menu-open { overflow: hidden; }

h1, h2, h3, h4, h5 {
  font-family: var(--sm-titulo);
  color: var(--sm-tinta);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.12;
  margin: 0 0 .5em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

a { color: var(--sm-verde); text-decoration: none; }
a:hover { color: var(--sm-rojo); }

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

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--sm-verde-claro); outline-offset: 2px; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.sm-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Honeypot: fuera de pantalla, no display:none (los bots lo saltan). */
.sm-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── Botones: rectangulares con esquina recortada ───────────────────────── */
.sm-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 0;
  background: var(--sm-verde);
  color: #fff;
  font-family: var(--sm-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.sm-btn:hover { background: var(--sm-verde-oscuro); color: #fff; transform: translateY(-2px); }
.sm-btn:disabled { background: #B6BFCD; cursor: not-allowed; transform: none; }

.sm-btn--rojo  { background: var(--sm-rojo); }
.sm-btn--rojo:hover { background: var(--sm-rojo-oscuro); }

.sm-btn--wsp { background: #1FA855; }
.sm-btn--wsp:hover { background: #14803f; }

.sm-btn--ghost {
  background: transparent;
  color: var(--sm-verde);
  box-shadow: inset 0 0 0 2px var(--sm-verde);
}
.sm-btn--ghost:hover { background: var(--sm-verde); color: #fff; }

.sm-btn--light {
  background: #fff;
  color: var(--sm-verde-oscuro);
}
.sm-btn--light:hover { background: var(--sm-humo); color: var(--sm-verde-oscuro); }

/* ─── Franjas diagonales (eco del swoosh del logo) ───────────────────────── */
.sm-diagonal {
  height: 54px;
  background: linear-gradient(97deg, var(--sm-verde) 0 58%, var(--sm-rojo) 58% 100%);
  clip-path: polygon(0 38%, 100% 0, 100% 62%, 0 100%);
}

.sm-diagonal--fina {
  height: 10px;
  background: linear-gradient(97deg, var(--sm-rojo) 0 42%, var(--sm-verde) 42% 100%);
  clip-path: none;
}

/* ═══════════════════════ HEADER ═══════════════════════════════════════════ */
.header-top {
  background: var(--sm-verde-oscuro);
  color: #E6F5EB;
  font-size: .82rem;
}

.header-top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}

.header-top .contact-info {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.header-top .contact-info i { color: var(--sm-celeste); margin-right: 6px; }

.social-links { display: flex; gap: 8px; }

.social-links a {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  font-size: .82rem;
  transition: background .18s ease;
  border-radius: 2px;
}
.social-links a:hover { background: var(--sm-rojo); color: #fff; }

.social-links-mobile { display: none; }

/* Header principal: una sola fila, nav a la derecha, CTA WhatsApp destacado */
.main-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--sm-borde);
  box-shadow: 0 1px 10px rgba(16, 21, 31, .05);
}

.main-header .container {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: var(--sm-header-h);
}

.logo { display: flex; align-items: center; gap: 14px; }
.logo img,
.logo .sm-img-slot__img--logo { height: 46px; width: auto; }

.logo-text .logo-nombre {
  font-family: var(--sm-titulo);
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
  line-height: 1;
  color: var(--sm-rojo);
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.logo-text .logo-slogan {
  margin: 2px 0 0;
  font-size: .72rem;
  font-weight: 500;
  color: var(--sm-grafito);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.main-header nav { margin-left: auto; }

.main-header nav > ul {
  display: flex;
  align-items: center;
  gap: 2px;
}

.main-header nav > ul > li > a {
  display: block;
  padding: 12px 12px;
  white-space: nowrap;
  font-family: var(--sm-titulo);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sm-tinta);
  border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.main-header nav > ul > li > a:hover,
.main-header nav > ul > li > a.activo {
  color: var(--sm-verde);
  border-bottom-color: var(--sm-rojo);
}

.header-cta { display: inline-flex; }

.menu-toggle, .close-menu {
  display: none;
  background: none;
  border: 0;
  font-size: 1.4rem;
  color: var(--sm-verde-oscuro);
  cursor: pointer;
  padding: 6px 8px;
}

.mobile-menu-logo { display: none; }

/* ═══════════════════════ HERO: pantalla dividida ══════════════════════════ */
.sm-hero {
  position: relative;
  isolation: isolate;
  background: var(--sm-verde-oscuro);
  color: #fff;
  overflow: hidden;
  min-height: 0;
}

@media (min-width: 992px) {
  .sm-hero {
    height: calc(100svh - var(--sm-header-offset));
    max-height: calc(100svh - var(--sm-header-offset));
    display: grid;
    grid-template-rows: minmax(0, 1fr);
  }
}

/* Capa 1 — la foto del carrusel, muy desenfocada. El scale evita que el
   blur deje bordes claros en los extremos. */
.sm-hero__fondo {
  position: absolute;
  inset: -40px;
  z-index: -2;
  background: var(--sm-verde-oscuro) center / cover no-repeat;
  filter: blur(30px) saturate(1.25);
  opacity: .92;
  transition: background-image .5s ease;
  pointer-events: none;
}

/* Capa 2 — velo verde: garantiza el contraste del texto blanco encima. */
.sm-hero__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(2, 56, 20, .86) 0%,
      rgba(2, 56, 20, .76) 36%,
      rgba(2, 64, 23, .40) 62%,
      rgba(2, 64, 23, .20) 100%);
}

.sm-hero__grid {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: max(56px, calc((100% - 1320px) / 2));
  padding-right: 0;
  display: grid;
  grid-template-columns: minmax(240px, 38%) minmax(280px, 1fr);
  align-items: stretch;
  min-height: 0;
  height: 100%;
}

.sm-hero__texto { padding: 56px 16px 56px 20px; align-self: center; }

.sm-hero__kicker {
  display: inline-block;
  background: var(--sm-rojo);
  color: #fff;
  font-family: var(--sm-titulo);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 12px;
  margin-bottom: 18px;
}

.sm-hero__texto h1 { color: #fff; margin-bottom: 14px; }
.sm-hero__texto h1 em { font-style: normal; color: var(--sm-celeste); }

.sm-hero__texto p {
  font-size: 1.05rem;
  color: #D5EDDF;
  max-width: 44ch;
  margin-bottom: 26px;
}

.sm-hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.sm-hero__foto {
  position: relative;
  background: rgba(4, 154, 40, .26);
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 18px 8px 18px 46px;
  min-width: 0;
}

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

/* ─── Carrusel del inicio ─────────────────────────────────────────────────
   Las imágenes se guardan con su proporción real (tools/preparar-hero.php).
   El visor las muestra enteras y rellena lo que sobra con una copia
   difuminada de la propia foto: ver .sm-hero__marco más abajo. */
.sm-carrusel {
  position: relative;
  width: 100%;
  /* Sin borde: la imagen manda. Se limita por el alto del hero para seguir
     siendo cuadrada y encajar la foto completa sin recorte. */
  max-width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  box-shadow: 0 20px 52px rgba(2, 40, 12, .38);
  background: var(--sm-verde-oscuro);
  overflow: hidden;
}

.sm-carrusel__visor { position: absolute; inset: 0; }

.sm-carrusel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* cuadrada dentro de cuadrado: encaje exacto */
  opacity: 0;
  transition: opacity .45s ease;   /* fundido corto: el intervalo es de 2.5 s */
}

.sm-carrusel__img.activa { opacity: 1; }

.sm-carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(2, 48, 14, .5);
  color: #fff;
  font-size: .95rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease, background .25s ease;
  z-index: 2;
}

.sm-carrusel__flecha--prev { left: 10px; }
.sm-carrusel__flecha--next { right: 10px; }
.sm-carrusel__flecha:hover { background: var(--sm-rojo); }

.sm-carrusel:hover .sm-carrusel__flecha,
.sm-carrusel:focus-within .sm-carrusel__flecha { opacity: 1; }

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

.sm-hero__datos {
  position: relative;
  background: rgba(3, 102, 29, .9);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.sm-hero__datos ul {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.sm-hero__datos li {
  padding: 18px 10px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.sm-hero__datos li:first-child { border-left: 0; }

.sm-hero__datos strong {
  display: block;
  font-family: var(--sm-titulo);
  font-size: 1.7rem;
  color: #fff;
  line-height: 1;
}

.sm-hero__datos span {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #C6E6D4;
}

/* Hero compacto para páginas interiores */
.sm-pagehero {
  background: var(--sm-verde-oscuro);
  color: #fff;
  padding: 52px 0 46px;
  position: relative;
}

.sm-pagehero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  background: linear-gradient(97deg, var(--sm-rojo) 0 42%, var(--sm-verde-claro) 42% 100%);
}

.sm-pagehero h1 { color: #fff; margin-bottom: 8px; }
.sm-pagehero p { color: #D5EDDF; max-width: 70ch; margin: 0; }

.sm-breadcrumb {
  font-size: .8rem;
  color: #A8CDB6;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sm-breadcrumb a { color: #A8CDB6; }
.sm-breadcrumb a:hover { color: #fff; }

/* ═══════════════════════ SECCIONES Y CARDS ════════════════════════════════ */
.sm-section { padding: 68px 0; }
.sm-section--humo { background: var(--sm-humo); }

.sm-section__head { max-width: 680px; margin: 0 0 38px; }
.sm-section__head.center { margin-left: auto; margin-right: auto; text-align: center; }

.sm-section__kicker {
  display: block;
  font-family: var(--sm-titulo);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sm-rojo);
  margin-bottom: 6px;
}

.sm-section__head p { margin: 0; color: var(--sm-grafito); }

.sm-grid { display: grid; gap: 20px; }
.sm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sm-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* 1 o 2 oficinas: la fila se achica y se centra, sin una columna vacía. */

/* Card: borde sólido 1px + acento superior de color, sombra mínima */
.sm-card {
  background: #fff;
  border: 1px solid var(--sm-borde);
  border-top: 3px solid var(--sm-verde);
  border-radius: var(--sm-radio);
  padding: 26px 24px;
  box-shadow: var(--sm-sombra);
  transition: border-top-color .18s ease, transform .18s ease;
}

.sm-card:hover { border-top-color: var(--sm-rojo); transform: translateY(-3px); }
.sm-card--rojo { border-top-color: var(--sm-rojo); }
.sm-card--rojo:hover { border-top-color: var(--sm-verde); }

.sm-card h2,
.sm-card h3 { margin-bottom: 8px; }
/* En Servicios el título de cada tarjeta es h2; conserva el tamaño visual del h3. */
.sm-card h2 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.sm-card p:last-child { margin-bottom: 0; }

.sm-card__icono {
  width: 50px; height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sm-humo);
  color: var(--sm-verde);
  font-size: 1.3rem;
  margin-bottom: 16px;
  border-radius: var(--sm-radio);
}

.sm-card--rojo .sm-card__icono { color: var(--sm-rojo); }

.sm-card__lista li {
  padding: 5px 0 5px 22px;
  position: relative;
  font-size: .93rem;
}

.sm-card__lista li::before {
  content: '\f058';
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
  position: absolute;
  left: 0;
  color: var(--sm-verde-claro);
}

/* ─── Servicios: tarjeta con fotografía ──────────────────────────────────── */
/* Más ancha que .sm-card: foto a un lado y contenido al otro, alternando el
   lado en cada servicio. El radio es mayor que --sm-radio a propósito y solo
   dentro de este componente; los tokens globales no cambian. */

.sm-servicios { display: grid; gap: 30px; }

.sm-servicio {
  --sm-acento: var(--sm-verde);
  --sm-acento-tenue: rgba(4, 154, 40, .10);
  display: grid;
  grid-template-columns: 40% 1fr;
  background: var(--sm-blanco);
  border: 1px solid var(--sm-borde);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 21, 31, .06);
  transition: transform .3s ease, box-shadow .3s ease;
}

.sm-servicio--rojo    { --sm-acento: var(--sm-rojo);    --sm-acento-tenue: rgba(204, 6, 4, .09); }
.sm-servicio--grafito { --sm-acento: var(--sm-grafito); --sm-acento-tenue: rgba(58, 68, 84, .10); }

.sm-servicio:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(16, 21, 31, .12); }

.sm-servicio__foto { position: relative; overflow: hidden; min-height: 300px; background: var(--sm-humo); }

.sm-servicio__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.sm-servicio:hover .sm-servicio__foto img { transform: scale(1.04); }

/* Degradado hacia el lado del contenido: cose la foto con el fondo blanco en
   lugar de dejarla pegada encima. */
.sm-servicio__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 21, 31, .20) 0%, rgba(16, 21, 31, 0) 45%),
    linear-gradient(270deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 24%);
}

/* Al invertir, la foto pasa a la segunda columna: hay que invertir tambien
   el tamano de las pistas o se quedaria con el 60%. */
.sm-servicio--invertida { grid-template-columns: 1fr 40%; }
.sm-servicio--invertida .sm-servicio__foto { order: 2; }

.sm-servicio--invertida .sm-servicio__foto::after {
  background:
    linear-gradient(270deg, rgba(16, 21, 31, .20) 0%, rgba(16, 21, 31, 0) 45%),
    linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 24%);
}

.sm-servicio__cuerpo { padding: 34px 36px; }

.sm-servicio__icono {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sm-acento-tenue);
  color: var(--sm-acento);
  font-size: 1.35rem;
  border-radius: 12px;
  margin-bottom: 16px;
  transition: transform .3s ease;
}

.sm-servicio:hover .sm-servicio__icono { transform: translateY(-2px) scale(1.06); }

.sm-servicio__cuerpo h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  margin: 0 0 10px;
}

/* Línea corta de acento, en vez del borde superior rígido de .sm-card. */
.sm-servicio__cuerpo h2::after {
  content: '';
  display: block;
  width: 46px; height: 3px;
  border-radius: 3px;
  background: var(--sm-acento);
  margin-top: 12px;
}

.sm-servicio__cuerpo > p { margin: 0 0 20px; }

.sm-servicio__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }

.sm-servicio__lista li {
  display: grid;
  grid-template-columns: 19px 1fr;
  gap: 11px;
  align-items: start;
  font-size: .95rem;
}

/* El check va siempre en verde: es lo que mantiene a los cuatro servicios
   dentro del mismo sistema visual aunque cada uno tenga su acento. */
.sm-servicio__lista svg {
  width: 19px; height: 19px;
  margin-top: 3px;
  color: var(--sm-verde);
  flex: none;
}

@media (max-width: 900px) {
  .sm-servicios { gap: 24px; }
  .sm-servicio,
  .sm-servicio--invertida { grid-template-columns: 1fr; }
/* Alto fijo en movil: las cuatro fotos no comparten proporcion y si se
     dejan crecer, la de Encomiendas queda un tercio mas alta. */
  .sm-servicio__foto,
  .sm-servicio--invertida .sm-servicio__foto { order: 0; min-height: 0; height: 215px; }
  .sm-servicio__foto::after,
  .sm-servicio--invertida .sm-servicio__foto::after {
    background:
      linear-gradient(180deg, rgba(16, 21, 31, .18) 0%, rgba(16, 21, 31, 0) 45%),
      linear-gradient(0deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 20%);
  }
  .sm-servicio__cuerpo { padding: 26px 22px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-servicio,
  .sm-servicio__foto img,
  .sm-servicio__icono { transition: none; }
  .sm-servicio:hover { transform: none; }
  .sm-servicio:hover .sm-servicio__foto img { transform: none; }
  .sm-servicio:hover .sm-servicio__icono { transform: none; }
}

/* Split de contenido (texto + imagen) */
.sm-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

.sm-split--solo { grid-template-columns: 1fr; }

.sm-split__media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--sm-radio);
  border: 1px solid var(--sm-borde);
}

/* Banda de CTA */
.sm-cta {
  background: var(--sm-verde);
  color: #fff;
  padding: 48px 0;
}

.sm-cta .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}

.sm-cta h2 { color: #fff; margin: 0 0 6px; }
.sm-cta p { color: #D5EDDF; margin: 0; }

/* Oficinas */
/* La pagina de Oficinas tiene su propio encabezado, sus tarjetas y su cierre.
   Lo que podria afectar a otras paginas lleva modificador propio (--red),
   porque .sm-pagehero, .sm-aviso y .sm-cta los comparten Servicios, Nosotros
   y Contacto. El rojo suave del encargo vive aqui como variable local: los
   tokens globales de marca no se tocan. */

.sm-pagehero--red {
  background: linear-gradient(135deg, var(--sm-verde-oscuro) 0%, #046B22 62%, var(--sm-verde) 140%);
  overflow: hidden;
}

.sm-pagehero--red .container { position: relative; z-index: 1; }

.sm-pagehero__ruta {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  opacity: .07;
  pointer-events: none;
}
.sm-pagehero__ruta circle { fill: #fff; stroke: none; }

.sm-pagehero--red p { max-width: 62ch; }

.sm-section__head--linea { margin-bottom: 24px; }
.sm-section__head--linea h2 { margin-bottom: 0; }

.sm-section__head--linea h2::after {
  content: "";
  display: block;
  width: 52px; height: 3px;
  border-radius: 3px;
  background: var(--sm-verde);
  margin-top: 12px;
}

.sm-section--oficinas { background: linear-gradient(180deg, #fff 0%, var(--sm-humo) 100%); }

.sm-oficinas-bloque { margin-bottom: 52px; }
.sm-oficinas-bloque:last-of-type { margin-bottom: 0; }

.sm-grid--oficinas {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}

.sm-oficina {
  --sm-rojo-suave: #B85C5C;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--sm-borde);
  border-radius: 16px;
  padding: 24px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(16, 21, 31, .04);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* Barra superior, en lugar del filo rojo vertical de antes. */
.sm-oficina::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sm-verde);
  transition: background .3s ease;
}

.sm-oficina:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(16, 21, 31, .08);
  border-color: rgba(4, 154, 40, .25);
}

.sm-oficina:hover::before { background: var(--sm-rojo-suave); }

.sm-oficina__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sm-oficina__pin {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(4, 154, 40, .09);
  color: var(--sm-verde);
  transition: transform .3s ease;
}
.sm-oficina__pin svg { width: 22px; height: 22px; }
.sm-oficina:hover .sm-oficina__pin { transform: translateY(-2px); }

/* Numero de sede: da sensacion de red ordenada sin competir con la ciudad. */
.sm-oficina__num {
  font-family: var(--sm-titulo);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sm-tinta);
  opacity: .12;
}

.sm-oficina h3 { margin: 0 0 8px; font-size: 1.35rem; color: var(--sm-tinta); }

.sm-oficina__badge {
  align-self: flex-start;
  display: inline-block;
  background: rgba(4, 154, 40, .10);
  color: var(--sm-verde-oscuro);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.sm-oficina__datos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 11px; }

.sm-oficina__datos li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
  font-size: .92rem;
  color: var(--sm-grafito);
}

.sm-oficina__datos svg { width: 18px; height: 18px; margin-top: 2px; color: var(--sm-verde); }
.sm-oficina__datos a { color: var(--sm-grafito); text-decoration: none; }
.sm-oficina__datos a:hover { color: var(--sm-verde-oscuro); text-decoration: underline; }

.sm-oficina__pendiente { color: #8B96A8; font-style: italic; }

.sm-oficina__mapa {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(4, 154, 40, .08);
  color: var(--sm-verde-oscuro);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.sm-oficina__mapa svg { width: 16px; height: 16px; }
.sm-oficina__flecha { transition: transform .25s ease; }
.sm-oficina__mapa:hover { background: var(--sm-verde); color: #fff; }
.sm-oficina__mapa:hover .sm-oficina__flecha { transform: translateX(3px); }

/* Nota al pie */
.sm-nota {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  background: #F6FBF7;
  border: 1px solid var(--sm-borde);
  border-left: 3px solid var(--sm-verde);
  border-radius: 14px;
  padding: 20px 22px;
}

.sm-nota__icono {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(4, 154, 40, .10);
  color: var(--sm-verde);
}
.sm-nota__icono svg { width: 22px; height: 22px; }

.sm-nota__texto p { margin: 0 0 8px; font-size: .93rem; }
.sm-nota__texto p:last-child { margin-bottom: 0; }

/* Cierre de la pagina */
.sm-cta--red {
  background: linear-gradient(120deg, var(--sm-verde-oscuro) 0%, var(--sm-verde) 78%);
  position: relative;
  overflow: hidden;
}

.sm-cta__ruta {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  opacity: .08;
  pointer-events: none;
}
.sm-cta__ruta circle { fill: #fff; stroke: none; }

.sm-cta--red .container { position: relative; z-index: 1; }

.sm-cta__texto { display: flex; align-items: center; gap: 16px; }

.sm-cta__pin {
  width: 48px; height: 48px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.sm-cta__pin svg { width: 24px; height: 24px; }

@media (max-width: 992px) {
  .sm-grid--oficinas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .sm-grid--oficinas { grid-template-columns: minmax(0, 1fr); }
  .sm-oficinas-bloque { margin-bottom: 38px; }
  .sm-nota { grid-template-columns: 1fr; gap: 12px; }
  .sm-oficina__mapa { padding: 10px 16px; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-oficina,
  .sm-oficina__pin,
  .sm-oficina__mapa,
  .sm-oficina__flecha { transition: none; }
  .sm-oficina:hover { transform: none; }
  .sm-oficina:hover .sm-oficina__pin { transform: none; }
  .sm-oficina__mapa:hover .sm-oficina__flecha { transform: none; }
}

/* Medios de pago */
.sm-pagos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.sm-pagos span {
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  padding: 7px 14px;
  font-size: .85rem;
  font-weight: 500;
  background: #fff;
}

/* Acordeón de FAQ */
.sm-faq-grupo { margin-bottom: 34px; }

.sm-faq-grupo > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sm-borde);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
}

.sm-faq-grupo > h2 i { color: var(--sm-rojo); font-size: 1.1rem; }

.sm-acordeon {
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  background: #fff;
  margin-top: 10px;
  overflow: hidden;
}

.sm-acordeon__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  background: none;
  border: 0;
  padding: 16px 20px;
  font-family: var(--sm-texto);
  font-size: .98rem;
  font-weight: 600;
  color: var(--sm-tinta);
  cursor: pointer;
}

.sm-acordeon__btn:hover { background: var(--sm-humo); }
.sm-acordeon__btn i { color: var(--sm-verde); transition: transform .2s ease; flex: 0 0 auto; }
.sm-acordeon.abierto .sm-acordeon__btn i { transform: rotate(180deg); }
.sm-acordeon.abierto .sm-acordeon__btn { color: var(--sm-verde); }

.sm-acordeon__cuerpo { display: none; padding: 0 20px 18px; font-size: .94rem; }
.sm-acordeon.abierto .sm-acordeon__cuerpo { display: block; }

/* Páginas legales */
.sm-legal { max-width: 860px; }
.sm-legal h2 { margin-top: 36px; }
.sm-legal h2:first-child { margin-top: 0; }
.sm-legal ol, .sm-legal ul { padding-left: 22px; margin: 0 0 1em; }
.sm-legal ol li, .sm-legal ul li { list-style: inherit; padding: 3px 0; }
.sm-legal ul li { list-style: disc; }

.sm-aviso {
  border: 1px solid var(--sm-borde);
  border-left: 4px solid var(--sm-oro);
  background: #FFFBEF;
  border-radius: var(--sm-radio);
  padding: 16px 20px;
  font-size: .93rem;
}

.sm-aviso strong { color: var(--sm-tinta); }

/* Formularios genéricos */
.sm-form {
  background: #fff;
  border: 1px solid var(--sm-borde);
  border-top: 3px solid var(--sm-verde);
  border-radius: var(--sm-radio);
  padding: 28px 26px;
  box-shadow: var(--sm-sombra);
}

.sm-field { margin-bottom: 16px; }

.sm-field label {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--sm-tinta);
  margin-bottom: 6px;
}

.sm-field label i { color: var(--sm-verde); margin-right: 6px; }
.sm-field .required { color: var(--sm-rojo); }

.sm-field input,
.sm-field select,
.sm-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  background: #fff;
  font-family: var(--sm-texto);
  font-size: .95rem;
  color: var(--sm-tinta);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.sm-field textarea { min-height: 120px; resize: vertical; }

.sm-field input:focus,
.sm-field select:focus,
.sm-field textarea:focus {
  outline: 0;
  border-color: var(--sm-verde);
  box-shadow: 0 0 0 3px rgba(4, 154, 40, .12);
}

/* ═══════════════════════ LIBRO DE RECLAMACIONES ═══════════════════════════ */
.lr-section {
  max-width: 940px;
  margin: 0 auto;
  padding: 50px 20px 70px;
}

/* Tarjeta del proveedor */
.lr-provider-card {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--sm-borde);
  border-top: 3px solid var(--sm-rojo);
  border-radius: var(--sm-radio);
  padding: 22px 26px;
  box-shadow: var(--sm-sombra);
  margin-bottom: 30px;
}

.lr-provider-logo { height: 62px; width: auto; }
.lr-provider-info { flex: 1 1 260px; }
.lr-provider-info h3 { margin: 0 0 6px; }

.lr-provider-info p {
  margin: 2px 0;
  font-size: .9rem;
  white-space: pre-line;
}

.lr-provider-info i { color: var(--sm-verde); width: 16px; }

.lr-date-badge {
  background: var(--sm-humo);
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  padding: 10px 16px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--sm-verde-oscuro);
}

.lr-date-badge i { color: var(--sm-rojo); margin-right: 7px; }

/* Stepper: barra de progreso segmentada */
.lr-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 26px;
}

.lr-step-item { cursor: default; }

.lr-step-item .lr-step-bar {
  display: block;
  height: 6px;
  background: var(--sm-borde);
  border-radius: 2px;
  transition: background .25s ease;
}

.lr-step-item .lr-step-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.lr-step-num {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sm-borde);
  color: var(--sm-grafito);
  font-family: var(--sm-titulo);
  font-size: .92rem;
  font-weight: 700;
  border-radius: 2px;
}

.lr-step-label {
  font-size: .82rem;
  font-weight: 600;
  color: #8B96A8;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.lr-step-item.active .lr-step-bar   { background: var(--sm-verde); }
.lr-step-item.active .lr-step-num   { background: var(--sm-verde); color: #fff; }
.lr-step-item.active .lr-step-label { color: var(--sm-verde-oscuro); }

.lr-step-item.completed .lr-step-bar   { background: var(--sm-verde-claro); }
.lr-step-item.completed .lr-step-num   { background: var(--sm-verde-claro); color: #fff; }
.lr-step-item.completed .lr-step-label { color: var(--sm-grafito); }

/* Paneles */
.lr-panel {
  display: none;
  background: #fff;
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio-lg);
  padding: 30px 28px;
  box-shadow: var(--sm-sombra);
}

.lr-panel.active { display: block; }

.lr-section-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--sm-borde);
  margin-bottom: 22px;
}

.lr-icon {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sm-verde);
  color: #fff;
  font-size: 1.2rem;
  border-radius: var(--sm-radio);
}

.lr-section-header h3 { margin: 0 0 2px; }
.lr-section-header p { margin: 0; font-size: .9rem; }

/* Toggles natural/jurídica y servicio/producto */
.lr-toggle-group {
  display: inline-flex;
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  overflow: hidden;
  margin-bottom: 22px;
}

.lr-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: #fff;
  border: 0;
  border-right: 1px solid var(--sm-borde);
  font-family: var(--sm-texto);
  font-size: .9rem;
  font-weight: 600;
  color: var(--sm-grafito);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.lr-toggle-btn:last-child { border-right: 0; }
.lr-toggle-btn:hover { background: var(--sm-humo); }
.lr-toggle-btn.active { background: var(--sm-verde); color: #fff; }

/* Grids de campos */
.lr-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 4px;
}

.lr-form-grid.col-2 { grid-template-columns: repeat(2, 1fr); }
.lr-form-grid.col-1 { grid-template-columns: 1fr; }

.lr-juridica-fields,
.lr-menor-fields { display: none; }

.lr-juridica-fields.show,
.lr-menor-fields.show { display: grid; }

.lr-field { margin-bottom: 12px; }

.lr-field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--sm-tinta);
  margin-bottom: 6px;
}

.lr-field label i { color: var(--sm-verde); margin-right: 6px; }
.lr-field .required { color: var(--sm-rojo); }

.lr-field input,
.lr-field select,
.lr-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  background: #fff;
  font-family: var(--sm-texto);
  font-size: .95rem;
  color: var(--sm-tinta);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.lr-field textarea { min-height: 110px; resize: vertical; }

.lr-field input:focus,
.lr-field select:focus,
.lr-field textarea:focus {
  outline: 0;
  border-color: var(--sm-verde);
  box-shadow: 0 0 0 3px rgba(4, 154, 40, .12);
}

.lr-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 16px;
  font-size: .92rem;
}

.lr-checkbox-row input { width: 17px; height: 17px; accent-color: var(--sm-verde); }
.lr-checkbox-row label { font-weight: 500; cursor: pointer; }

/* Info de la oficina seleccionada */
.lr-agencia-info {
  display: none;
  background: var(--sm-humo);
  border: 1px solid var(--sm-borde);
  border-left: 4px solid var(--sm-verde);
  border-radius: var(--sm-radio);
  padding: 14px 18px;
  margin: 8px 0 4px;
}

.lr-agencia-info.show { display: block; }
.lr-agencia-info p { margin: 2px 0; font-size: .9rem; }
.lr-agencia-info i { color: var(--sm-verde); width: 15px; }

/* Cards queja / reclamo */
.lr-type-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.lr-type-card {
  background: #fff;
  border: 1px solid var(--sm-borde);
  border-top: 3px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  padding: 20px 22px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.lr-type-card:hover { border-color: var(--sm-verde-claro); }

.lr-type-card.selected {
  border-color: var(--sm-verde);
  border-top-color: var(--sm-rojo);
  background: #F4FBF6;
}

.lr-type-card h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; }
.lr-type-card h4 i { color: var(--sm-rojo); }
.lr-type-card p { margin: 0; font-size: .88rem; }

/* Adjunto */
.lr-file-upload {
  position: relative;
  border: 2px dashed var(--sm-borde);
  border-radius: var(--sm-radio);
  background: var(--sm-humo);
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.lr-file-upload:hover,
.lr-file-upload.dragover { border-color: var(--sm-verde); background: #EAF8EE; }

.lr-file-upload > i { font-size: 1.9rem; color: var(--sm-verde); display: block; margin-bottom: 8px; }
.lr-file-upload p { margin: 0; font-size: .9rem; }
.lr-file-upload .lr-file-types { font-size: .78rem; color: #8B96A8; margin-top: 4px; }

.lr-file-upload input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}

.lr-file-name {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  padding: 10px 14px;
  font-size: .9rem;
}

.lr-file-name.show { display: flex; }
.lr-file-name > i:first-child { color: var(--sm-verde); }
.lr-file-remove { margin-left: auto; color: var(--sm-rojo); cursor: pointer; }

/* Resumen paso 4 */
.lr-summary-card {
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  margin-bottom: 18px;
  overflow: hidden;
}

.lr-summary-card h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 13px 18px;
  background: var(--sm-humo);
  border-bottom: 1px solid var(--sm-borde);
  font-size: 1rem;
}

.lr-summary-card h4 i { color: var(--sm-verde); }

.lr-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sm-borde);
}

.lr-summary-item {
  background: #fff;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lr-summary-item.full { grid-column: 1 / -1; }

.lr-summary-item > span:first-child {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #8B96A8;
  font-weight: 600;
}

.lr-summary-item > span:last-child {
  font-size: .93rem;
  color: var(--sm-tinta);
  overflow-wrap: anywhere;
}

/* Notas legales y declaración */
.lr-legal-notes {
  border: 1px solid var(--sm-borde);
  border-left: 4px solid var(--sm-oro);
  background: #FFFBEF;
  border-radius: var(--sm-radio);
  padding: 18px 22px;
  margin: 22px 0 18px;
}

.lr-legal-notes h4 { margin: 0 0 8px; font-size: 1rem; }
.lr-legal-notes h4 i { color: var(--sm-oro); margin-right: 7px; }
.lr-legal-notes ol { padding-left: 20px; margin: 0; }
.lr-legal-notes li { list-style: decimal; font-size: .89rem; padding: 3px 0; }

.lr-declaration {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--sm-humo);
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  padding: 16px 20px;
}

.lr-declaration input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--sm-verde); }
.lr-declaration label { font-size: .9rem; cursor: pointer; }
.lr-declaration a { font-weight: 600; }

.lr-btn-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--sm-borde);
}

.lr-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border: 0;
  font-family: var(--sm-titulo);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--sm-verde);
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background .18s ease;
}

.lr-btn:hover { background: var(--sm-verde-oscuro); }
.lr-btn-next { margin-left: auto; }

.lr-btn-back {
  background: #fff;
  color: var(--sm-grafito);
  box-shadow: inset 0 0 0 1px var(--sm-borde);
  clip-path: none;
  border-radius: var(--sm-radio);
}
.lr-btn-back:hover { background: var(--sm-humo); color: var(--sm-tinta); }

.lr-btn-submit { background: var(--sm-rojo); }
.lr-btn-submit:hover { background: var(--sm-rojo-oscuro); }
.lr-btn-submit:disabled { background: #B6BFCD; cursor: not-allowed; }

/* ─── Seguimiento de reclamo ─────────────────────────────────────────────── */
.sg-section {
  background: var(--sm-humo);
  border-top: 1px solid var(--sm-borde);
  padding: 60px 20px;
}

.sg-wrap { max-width: 640px; margin: 0 auto; }
.sg-head { text-align: center; margin-bottom: 30px; }

.sg-head__icono {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sm-verde);
  color: #fff;
  font-size: 1.3rem;
  border-radius: var(--sm-radio);
  margin-bottom: 14px;
}

.sg-head p { font-size: .94rem; margin: 0 0 6px; }
.sg-head .sg-nota { font-size: .84rem; color: #8B96A8; }

.sg-card {
  background: #fff;
  border: 1px solid var(--sm-borde);
  border-top: 3px solid var(--sm-verde);
  border-radius: var(--sm-radio);
  padding: 26px 24px;
  box-shadow: var(--sm-sombra);
}

.sg-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.sg-form > div { flex: 1 1 170px; }
.sg-form > div.sg-clave-wrap { flex: 0 0 130px; }
.sg-form > div.sg-btn-wrap { flex: 0 0 auto; }

.sg-form label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--sm-tinta);
  margin-bottom: 6px;
}

.sg-form input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  font-family: var(--sm-texto);
  font-size: .95rem;
  text-transform: uppercase;
}

.sg-form input:focus { outline: 0; border-color: var(--sm-verde); box-shadow: 0 0 0 3px rgba(4, 154, 40, .12); }

.sg-form #sgClave {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 6px;
}

.sg-result { display: none; margin-top: 20px; }

.sg-alert {
  border-radius: var(--sm-radio);
  padding: 14px 18px;
  font-size: .9rem;
  border-left: 4px solid;
}

.sg-alert--warn  { background: #FFFBEF; border-left-color: var(--sm-oro); color: #7A5B00; }
.sg-alert--error { background: #FDF0F0; border-left-color: var(--sm-rojo); color: var(--sm-rojo-oscuro); }

.sg-box { border: 1px solid var(--sm-borde); border-radius: var(--sm-radio); overflow: hidden; }

.sg-box__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sm-borde);
}

.sg-box__head > i { font-size: 1.6rem; }
.sg-box__rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: #8B96A8; }
.sg-box__estado { font-family: var(--sm-titulo); font-size: 1.2rem; font-weight: 700; }
.sg-box__nro { margin-left: auto; text-align: right; }
.sg-box__nro strong { display: block; font-size: .92rem; color: var(--sm-tinta); }

.sg-box__info {
  padding: 13px 20px;
  background: var(--sm-humo);
  border-bottom: 1px solid var(--sm-borde);
  font-size: .86rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.sg-box__body { padding: 18px 20px; background: #fff; }

.sg-tl-title {
  font-size: .76rem;
  font-weight: 700;
  color: var(--sm-grafito);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 14px;
}

.sg-tl { position: relative; padding-left: 28px; }

.sg-tl__linea {
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--sm-borde);
}

.sg-hito { position: relative; margin-bottom: 18px; }
.sg-hito:last-child { margin-bottom: 0; }

.sg-hito__punto {
  position: absolute;
  left: -24px; top: 5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.sg-hito--last .sg-hito__punto { animation: pulse-dot 1.5s infinite; }

.sg-hito__caja {
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  background: #FAFBFD;
  padding: 11px 15px;
}

.sg-hito--last .sg-hito__caja { background: #F4FBF6; }

.sg-hito__top { display: flex; align-items: center; gap: 9px; }

.sg-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 2px;
  font-size: .74rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sg-hito__fecha { font-size: .78rem; color: #8B96A8; margin-left: auto; }

.sg-hito__texto {
  font-size: .9rem;
  line-height: 1.55;
  border-top: 1px solid var(--sm-borde);
  margin-top: 8px;
  padding-top: 8px;
  white-space: pre-line;
}

.sg-hito__adjunto {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  border-top: 1px solid var(--sm-borde);
  padding-top: 8px;
  font-size: .8rem;
}

.sg-hito__adjunto button {
  background: #fff;
  border: 1px solid var(--sm-borde);
  border-radius: var(--sm-radio);
  padding: 4px 11px;
  font-size: .8rem;
  cursor: pointer;
  color: var(--sm-grafito);
}

.sg-hito__adjunto button:hover { border-color: var(--sm-verde); color: var(--sm-verde); }

.sg-vacio { text-align: center; color: #8B96A8; padding: 16px; font-size: .9rem; }

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 2px currentColor, 0 0 0 4px transparent; }
  50%      { box-shadow: 0 0 0 2px currentColor, 0 0 0 6px rgba(4, 154, 40, .18); }
}

/* Modal de adjunto */
.sg-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 21, 31, .64);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.sg-modal.show { display: flex; }

.sg-modal__card {
  background: #fff;
  border-radius: var(--sm-radio-lg);
  max-width: 820px;
  width: 100%;
  overflow: hidden;
}

.sg-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--sm-borde);
  font-weight: 600;
  font-size: .95rem;
}

.sg-modal__cerrar {
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: #8B96A8;
  cursor: pointer;
}

.sg-modal__body { padding: 12px; text-align: center; }
.sg-modal__body img { max-width: 100%; max-height: 70vh; margin: 0 auto; }
.sg-modal__body iframe { width: 100%; height: 65vh; border: 0; }

/* ═══════════════════════ 404 ══════════════════════════════════════════════ */
.sm-404 {
  text-align: center;
  padding: 90px 20px;
  max-width: 620px;
  margin: 0 auto;
}

.sm-404__num {
  font-family: var(--sm-titulo);
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 700;
  line-height: .9;
  color: var(--sm-verde);
  margin: 0;
}

.sm-404__num span { color: var(--sm-rojo); }

/* ═══════════════════════ FOOTER ═══════════════════════════════════════════ */
footer {
  background: var(--sm-tinta);
  color: #AEB8C7;
  border-top: 6px solid var(--sm-rojo);
  font-size: .92rem;
}

.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 52px 20px 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 34px;
}

.footer-section h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 16px;
  padding-bottom: 9px;
  border-bottom: 2px solid rgba(255, 255, 255, .12);
  position: relative;
}

.footer-section h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 44px; height: 2px;
  background: var(--sm-rojo);
}

.footer-section p { color: #AEB8C7; }
.footer-section ul li { padding: 4px 0; }
.footer-section ul li a { color: #AEB8C7; }
.footer-section ul li a:hover { color: #fff; }
.footer-section ul li i { color: var(--sm-verde-claro); width: 16px; margin-right: 6px; }

.footer-libro { margin-top: 26px; display: inline-block; }

.footer-libro img {
  max-width: 160px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--sm-radio);
  transition: transform .2s ease;
}

.footer-libro:hover img { transform: translateY(-3px); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  /* El extra inferior deja el copyright por encima del botón flotante,
     con el fondo del pie y no con una franja blanca. */
  padding: 18px 20px calc(96px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: .84rem;
  color: #8B96A8;
}

.footer-bottom p { margin: 0; }

.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1FA855;
  color: #fff;
  font-size: 1.7rem;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(16, 21, 31, .28);
  z-index: 800;
  transition: transform .2s ease, background .2s ease;
}

.whatsapp-float:hover { background: #14803f; color: #fff; transform: scale(1.07); }

/* El aire para el botón flotante lo pone el footer, no el body: en el body
   dejaba una franja blanca de 96 px debajo del pie oscuro. */

/* ─── Huecos reservados para imágenes (se rellenan al dejar el archivo en img/) ── */
.sm-img-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 220px;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(4, 154, 40, .04) 8px, rgba(4, 154, 40, .04) 16px),
    var(--sm-humo);
  border: 1px dashed var(--sm-borde);
  color: var(--sm-grafito);
  text-align: center;
}

.sm-img-slot__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
}

.sm-img-slot__txt i { font-size: 1.6rem; color: var(--sm-verde-claro); opacity: .7; }

.sm-img-slot__txt strong {
  font-family: var(--sm-titulo);
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sm-tinta);
}

.sm-img-slot__txt small {
  font-size: .75rem;
  color: #8B96A8;
  font-family: var(--sm-texto);
}

.sm-img-slot--hero {
  min-height: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.06) 10px, rgba(255,255,255,.06) 20px),
    var(--sm-verde);
  border: 0;
  color: #fff;
}

.sm-img-slot--hero .sm-img-slot__txt strong { color: #fff; }
.sm-img-slot--hero .sm-img-slot__txt small { color: #D5EDDF; }
.sm-img-slot--hero .sm-img-slot__txt i { color: #fff; }

.sm-img-slot--logo {
  width: 56px;
  min-width: 56px;
  height: 46px;
  min-height: 46px;
  border-radius: var(--sm-radio);
}

.sm-img-slot--logo .sm-img-slot__txt { padding: 2px; gap: 0; }
.sm-img-slot--logo .sm-img-slot__txt i { font-size: 1rem; }
.sm-img-slot--logo .sm-img-slot__txt strong,
.sm-img-slot--logo .sm-img-slot__txt small { display: none; }

.sm-img-slot--media {
  min-height: 320px;
  border-radius: var(--sm-radio);
}

.sm-img-slot--provider {
  width: 200px;
  min-width: 160px;
  min-height: 62px;
  height: 62px;
}

.sm-img-slot--provider .sm-img-slot__txt small { display: none; }
.sm-img-slot--provider .sm-img-slot__txt strong { font-size: .85rem; }

/* Respaldo cuando aún no hay imágenes en img/hero/: mismo formato cuadrado. */
.sm-hero__foto .sm-img-slot,
.sm-hero__foto .sm-img-slot__img--hero {
  width: 100%;
  max-width: 430px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.sm-split__media .sm-img-slot,
.sm-split__media .sm-img-slot__img--media {
  width: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--sm-radio);
}

.sm-img-slot__img--logo { height: 46px; width: auto; }
.sm-img-slot__img--provider { height: 62px; width: auto; }

/* ═══════════════════════ RESPONSIVE ═══════════════════════════════════════ */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .sm-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .sm-hero {
    height: auto;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .sm-hero__grid { grid-template-columns: 1fr; min-height: 0; height: auto; padding: 0; }
  .sm-hero__texto { padding: 48px 20px 36px; }
  .sm-hero__foto {
    clip-path: none;
    padding: 8px 20px 24px;
    background: transparent;
  }
  .sm-carrusel { max-width: 440px; }

  /* Apilado: el velo va de arriba (texto) hacia abajo (imagen). */
  .sm-hero__velo {
    background: linear-gradient(to bottom,
      rgba(2, 56, 20, .94) 0%,
      rgba(2, 56, 20, .9) 42%,
      rgba(2, 64, 23, .5) 72%,
      rgba(2, 64, 23, .34) 100%);
  }
  .sm-hero__datos ul { grid-template-columns: repeat(2, 1fr); }
  .sm-hero__datos li:nth-child(odd) { border-left: 0; }
  .sm-split { grid-template-columns: 1fr; gap: 28px; }
  .sm-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .header-top .container { min-height: 0; padding: 8px 20px; justify-content: center; }
  .header-top .contact-info { justify-content: center; gap: 14px; font-size: .78rem; }
  .header-top .email-contact,
  .header-top .location-contact { display: none; }
  .social-links-desktop { display: none; }
  .social-links-mobile { display: flex; }

  .main-header .container { min-height: 64px; }
  .logo img,
  .logo .sm-img-slot__img--logo { height: 40px; }
  .logo .sm-img-slot--logo { width: 48px; min-width: 48px; height: 40px; min-height: 40px; }
  .logo-text .logo-nombre { font-size: 1.2rem; }
  .logo-text .logo-slogan { display: none; }

  .menu-toggle { display: inline-flex; margin-left: auto; }
  .header-cta { display: none; }

  .main-header nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 86vw);
    background: #fff;
    border-left: 4px solid var(--sm-rojo);
    padding: 20px;
    transform: translateX(105%);
    transition: transform .26s ease;
    box-shadow: -8px 0 28px rgba(16, 21, 31, .18);
    overflow-y: auto;
    z-index: 950;
  }

  .main-header nav.active { transform: translateX(0); }
  .close-menu { display: inline-flex; margin-left: auto; }
  .mobile-menu-logo { display: block; margin: 4px 0 18px; }
  .mobile-menu-logo img { height: 48px; }

  .main-header nav > ul { flex-direction: column; align-items: stretch; gap: 0; }

  .main-header nav > ul > li > a {
    padding: 13px 4px;
    border-bottom: 1px solid var(--sm-borde);
    font-size: 1.15rem;
  }

  .main-header nav > ul > li > a:hover,
  .main-header nav > ul > li > a.activo { border-bottom-color: var(--sm-rojo); }

  .sm-section { padding: 48px 0; }
  .sm-grid--2, .sm-grid--3, .sm-grid--4 { grid-template-columns: 1fr; }
  .sm-cta .container { flex-direction: column; align-items: flex-start; }

  .lr-section { padding: 34px 16px 50px; }
  .lr-panel { padding: 22px 18px; }
  .lr-form-grid,
  .lr-form-grid.col-2,
  .lr-juridica-fields.show,
  .lr-menor-fields.show { grid-template-columns: 1fr !important; }
  .lr-type-cards { grid-template-columns: 1fr; }
  .lr-summary-grid { grid-template-columns: 1fr; }
  .lr-stepper { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .lr-step-label { display: none; }
  .lr-toggle-group { display: flex; width: 100%; }
  .lr-toggle-btn { flex: 1; justify-content: center; padding: 11px 10px; }
  .lr-btn-row { flex-direction: column-reverse; }
  .lr-btn { width: 100%; justify-content: center; }
  .lr-btn-next { margin-left: 0; }
  .lr-provider-card { flex-direction: column; align-items: flex-start; }

  .sg-form > div,
  .sg-form > div.sg-clave-wrap,
  .sg-form > div.sg-btn-wrap { flex: 1 1 100%; }
  .sg-form .sm-btn { width: 100%; justify-content: center; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 28px; }
}

@media (max-width: 400px) {
  .logo-text .logo-nombre { font-size: 1.05rem; }
  .sm-btn { padding: 12px 18px; font-size: .98rem; }
}

@media (min-width: 1400px) {
  .container, .footer-grid { max-width: 1320px; }
}

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

/* Impresión del Libro de Reclamaciones */
@media print {
  body { padding-bottom: 0 !important; }
  .header-top, .main-header, footer, .whatsapp-float,
  .sg-section, .lr-btn-row, .sm-diagonal { display: none !important; }
  .lr-panel { display: block !important; border: 0; box-shadow: none; }
  body { font-size: 12px; }
}

/* ═══════════════════════ HERO SLIDER (Fase A) ═════════════════════════════
   Paleta sin cambios: solo usa las variables ya definidas.
   El carrusel cuadrado (.sm-carrusel) sigue sirviendo a otras secciones. */

.sm-hero__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .07;
}
.sm-hero__deco--a { animation: sm-deco-a 18s ease-in-out infinite alternate; }
.sm-hero__deco--b { opacity: .05; animation: sm-deco-b 22s ease-in-out infinite alternate; }

@keyframes sm-deco-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -14px, 0); }
}
@keyframes sm-deco-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(12px, 8px, 0); }
}

.sm-hero-slider {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: 100%;
}

.sm-hero-slider .swiper-wrapper,
.sm-hero-slider .swiper-slide,
.sm-hero__slide {
  height: 100%;
}

.sm-hero-slider .sm-hero__grid {
  min-height: 0;
  height: 100%;
}

.sm-hero__texto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 28px 20px 40px 36px;
}

.sm-hero__texto .sm-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  max-width: none;
  background: transparent;
  color: #fff;
  font-family: var(--sm-titulo);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.sm-hero__eyebrow::before {
  content: '';
  width: 3px;
  height: .95em;
  background: var(--sm-rojo);
  border-radius: 1px;
  flex: none;
}

.sm-hero__titulo {
  color: #fff;
  margin: 0 0 14px;
  font-size: clamp(2.05rem, 4vw, 3.6rem);
  line-height: 1.02;
  max-width: 100%;
  padding-bottom: 14px;
  background: linear-gradient(var(--sm-rojo), var(--sm-rojo)) left bottom / 64px 2px no-repeat;
}
.sm-hero__titulo span { display: block; }
.sm-hero__titulo-b { color: #fff; }

.sm-hero__texto p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #D5EDDF;
  max-width: 42ch;
  margin-bottom: 22px;
}

.sm-hero .sm-btn {
  min-height: 52px;
  padding: 0 22px;
  border-radius: 10px;
  clip-path: none;
  box-shadow: none;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.sm-hero .sm-btn svg { width: 18px; height: 18px; flex: none; }
.sm-hero .sm-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(2, 40, 12, .28);
}
.sm-hero .sm-btn--reserva { background: var(--sm-verde); color: #fff; }
.sm-hero .sm-btn--reserva:hover { background: var(--sm-verde-oscuro); color: #fff; }
.sm-hero .sm-btn--oficina {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}
.sm-hero .sm-btn--oficina:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8), 0 10px 22px rgba(2, 40, 12, .22);
}

.sm-hero__beneficios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 20px 0 0;
}
.sm-hero__beneficios li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #D5EDDF;
  font-size: .84rem;
  font-weight: 500;
}
.sm-hero__beneficios svg {
  width: 18px;
  height: 18px;
  color: var(--sm-celeste);
  flex: none;
}

.sm-hero__foto {
  position: relative;
  z-index: 1;
  clip-path: none;
  background: transparent;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  min-width: 0;
  min-height: 0;
  padding: 12px 16px 28px 4px;
}
.sm-hero__foto::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 78%;
  height: 72%;
  right: 8%;
  border-radius: 40%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sm-verde-claro) 55%, transparent), transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}
/* El visor NUNCA recorta. La foto entra entera con object-fit: contain y el
   espacio que sobra lo rellena una copia difuminada de la misma foto. Así da
   igual si el archivo es vertical, horizontal o un flyer, y da igual la altura
   de la pantalla: se ve completa y sin franjas vacías.

   Antes la foto iba con object-fit: cover y las barras difuminadas venían
   quemadas dentro del .webp (1200x1200). Como el visor es más ancho que alto,
   el recorte se comía rótulos como las letras de Juanjuí. Por eso también
   sobran los parches --flyer y --foco: ya no hay nada que anclar. */
.sm-hero__marco {
  position: relative;
  z-index: 1;
  display: grid;            /* las dos capas comparten la misma celda */
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 46px rgba(2, 32, 12, .38);
  background: rgba(2, 32, 12, .28);
}
.sm-hero__marco > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* Capa de atrás — relleno: la misma foto recortada, muy desenfocada y
   oscurecida. El scale evita que el blur deje un borde claro pegado al marco. */
.sm-hero__relleno {
  object-fit: cover;
  filter: blur(26px) saturate(1.1) brightness(.55);
  transform: scale(1.2);
  pointer-events: none;
}

/* Capa de delante — la foto, completa. El position + z-index es obligatorio:
   el relleno lleva transform, y una capa transformada se pinta por encima de
   una hermana sin posicionar aunque vaya antes en el HTML. */
.sm-hero__foto-img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
}

.sm-hero__tarjeta {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 14px;
  margin: 0;
  max-width: 78%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .95);
  color: var(--sm-tinta);
  border-radius: 10px;
  border-left: 3px solid var(--sm-rojo);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 10px 24px rgba(16, 21, 31, .18);
}
.sm-hero__slide--cobertura .sm-hero__tarjeta { left: auto; right: 14px; }
.sm-hero__slide--encomiendas .sm-hero__foto { align-items: stretch; padding-bottom: 36px; }
.sm-hero__slide--encomiendas .sm-hero__marco { border-radius: 18px; }
.sm-hero__slide--confianza .sm-hero__marco { border-radius: 14px 22px 14px 14px; }

/* Entrada escalonada, solo en la diapositiva visible.
   La FOTO entra primero y sin retardo; el texto va detrás, separado por 150 ms.
   Antes era al revés: el marco esperaba 1,2 s y el hero se quedaba más de un
   segundo con el lado derecho vacío. No se notaba porque, hasta que Swiper
   arrancaba, la foto se pintaba igualmente (el parpadeo); al quitarlo quedó a
   la vista. Toda la coreografía cabe ahora en ~1,1 s. */
.swiper-initialized .swiper-slide-active .sm-hero__marco {
  animation: sm-in-zoom .7s ease both;
}
.swiper-initialized .swiper-slide-active .sm-hero__in--eyebrow {
  animation: sm-in-down .6s ease .15s both;
}
.swiper-initialized .swiper-slide-active .sm-hero__in--titulo {
  animation: sm-in-up .6s ease .3s both;
}
.swiper-initialized .swiper-slide-active .sm-hero__in--texto {
  animation: sm-in-up .6s ease .42s both;
}
.swiper-initialized .swiper-slide-active .sm-hero__in--botones {
  animation: sm-in-up .6s ease .54s both;
}
/* El zoom lento va sobre el relleno. Sobre la foto la haría crecer más allá
   del marco y el overflow: hidden volvería a recortarla. Arranca cuando el
   marco ya terminó de entrar, para que los dos no se peleen por la escala. */
.swiper-initialized .swiper-slide-active .sm-hero__relleno {
  animation: sm-ken 5.5s ease-out .7s forwards;
}

@keyframes sm-in-down {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sm-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sm-in-zoom {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes sm-ken {
  from { transform: scale(1.2); }
  to   { transform: scale(1.26); }
}

.sm-hero-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; }

/* Parpadeo al entrar: las animaciones de arriba cuelgan de .swiper-initialized,
   que Swiper añade cuando ya corrió su JavaScript. Hasta ese momento no se
   aplica ninguna, así que la diapositiva se pinta ENTERA; al inicializarse, el
   fill "both" la devuelve a su estado inicial (opacity 0) para animarla. Se ve
   todo, desaparece y vuelve. Por eso parte oculta.

   Las dos salvaguardas importan: .sm-js lo pone un script en el <head>, de modo
   que sin JavaScript nada se oculta; y --sin-swiper lo pone helpers.js si la
   libreria no cargó. En cualquiera de los dos casos el hero se ve igual que
   siempre, nunca en blanco. */
.sm-js .sm-hero-slider:not(.swiper-initialized):not(.sm-hero-slider--sin-swiper) .sm-hero__in,
.sm-js .sm-hero-slider:not(.swiper-initialized):not(.sm-hero-slider--sin-swiper) .sm-hero__marco {
  opacity: 0;
}

.sm-hero__nav {
  position: absolute;
  top: 46%;
  z-index: 4;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: rgba(16, 21, 31, .32);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.sm-hero__nav svg { width: 18px; height: 18px; }
.sm-hero__nav::after { display: none; }
.sm-hero__nav:hover { background: rgba(16, 21, 31, .55); }
.sm-hero__nav--prev { left: 16px; }
.sm-hero__nav--next { right: 16px; }

/* Entre el quiebre de dos columnas y el ancho cómodo, las flechas
   no deben montarse sobre el texto. */
@media (min-width: 992px) and (max-width: 1280px) {
  .sm-hero__texto { padding-left: 12px; padding-right: 8px; }
  .sm-hero__foto { padding-right: 16px; }
}

.sm-hero__puntos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.sm-hero__puntos .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  background: rgba(255, 255, 255, .55);
  opacity: 1;
  border-radius: 8px;
  transition: width .25s ease, background .25s ease;
}
.sm-hero__puntos .swiper-pagination-bullet-active {
  width: 22px;
  background: var(--sm-rojo);
}

.sm-hero__datos {
  position: relative;
  z-index: 2;
  background: linear-gradient(100deg, rgba(6, 42, 20, .94), rgba(2, 112, 28, .92));
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(88, 219, 249, .45);
}
.sm-hero__datos ul {
  align-items: stretch;
}
.sm-hero__datos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--sm-datos-h);
  padding: 12px 12px 14px;
  border-left: 0;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .16);
  transition: background .25s ease;
}
.sm-hero__datos li:first-child { box-shadow: none; }
.sm-hero__datos li:hover { background: rgba(255, 255, 255, .07); }
.sm-hero__datos svg {
  width: 18px;
  height: 18px;
  padding: 7px;
  box-sizing: content-box;
  margin-bottom: 6px;
  border-radius: 8px;
  background: rgba(88, 219, 249, .14);
  color: var(--sm-celeste);
}
.sm-hero__datos strong {
  font-size: clamp(1.7rem, 2.2vw, 2.1rem);
  line-height: 1;
  letter-spacing: .02em;
}
.sm-hero__datos span {
  display: block;
  max-width: 22ch;
  margin-top: 3px;
  font-size: .72rem;
  line-height: 1.3;
  letter-spacing: .1em;
  text-wrap: balance;
}

/* El botón flotante de WhatsApp tapa la última cifra si la franja
   llega hasta el borde derecho. */
@media (min-width: 992px) {
  .sm-hero__datos ul { padding-right: 96px; }
}

@media (max-width: 991px) {
  .sm-hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .sm-hero-slider,
  .sm-hero-slider .swiper-wrapper,
  .sm-hero-slider .swiper-slide,
  .sm-hero__slide,
  .sm-hero-slider .sm-hero__grid {
    height: auto;
    min-height: 0;
  }
  .sm-hero-slider .sm-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 0;
  }
  .sm-hero__slide--comienza .sm-hero__grid {
    display: flex;
    flex-direction: column;
  }
  .sm-hero__slide--comienza .sm-hero__foto { order: -1; padding-top: 16px; }
  .sm-hero__texto { padding: 32px 22px 8px; }
  .sm-hero__titulo {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    background-position: center bottom;
  }
  .sm-hero__texto p { margin-left: auto; margin-right: auto; }
  .sm-hero__acciones { flex-direction: column; align-items: stretch; }
  .sm-hero .sm-btn { width: 100%; justify-content: center; }
  .sm-hero__beneficios { justify-content: center; }
  .sm-hero__foto {
    align-items: stretch;
    padding: 8px 18px 28px;
  }
  .sm-hero__slide--encomiendas .sm-hero__foto { padding-bottom: 28px; }
  /* Cada foto trae su proporción real en --sm-ar (la emite index.php con las
     medidas del archivo): apilado el visor la adopta y la foto entra justa,
     sin relleno. Si es muy vertical, el max-height recorta el alto del visor y
     ahí sí aparece el relleno difuminado a los lados. */
  .sm-hero__marco {
    width: 100%;
    height: auto;
    aspect-ratio: var(--sm-ar, 4 / 3);
    max-height: min(68svh, 540px);
  }
  .sm-hero__tarjeta { left: 16px; right: auto; bottom: 16px; }
  .sm-hero__nav { top: auto; bottom: 18px; width: 36px; height: 36px; }
  .sm-hero__nav--prev { left: 10px; }
  .sm-hero__nav--next { right: 10px; }
  .sm-hero__datos ul { grid-template-columns: 1fr 1fr; }
  .sm-hero__datos li { min-height: 0; padding: 18px 12px 20px; }
  .sm-hero__datos li:nth-child(odd) { box-shadow: none; }
}

@media (max-width: 360px) {
  .sm-hero__titulo { font-size: 2.05rem; }
  .sm-hero__datos ul { grid-template-columns: 1fr; }
  .sm-hero__datos li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
  .sm-hero__datos li:first-child { box-shadow: none; }
  .sm-hero__beneficios { flex-direction: column; align-items: center; gap: 8px; }
  .sm-hero__texto { padding-top: 24px; }
  .sm-hero__marco { max-height: min(52svh, 380px); }
}

@media (min-width: 992px) and (max-height: 760px) {
  .sm-hero__texto { padding: 16px 16px 28px 28px; }
  .sm-hero__titulo { font-size: clamp(1.75rem, 3.2vw, 2.55rem); margin-bottom: 10px; }
  .sm-hero__texto p { margin-bottom: 12px; font-size: .95rem; }
  .sm-hero__beneficios { margin-top: 10px; }
  .sm-hero .sm-btn { min-height: 44px; }
  .sm-hero__foto { padding: 8px 12px 20px 8px; }
}

@media (max-width: 1080px) and (min-width: 769px) {
  .main-header nav > ul > li > a { padding: 12px 9px; font-size: 1rem; }
  .header-cta { padding: 11px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-hero__deco,
  .sm-hero__marco,
  .sm-hero__in,
  .sm-hero__datos li,
  .sm-galeria__foto img {
    animation: none !important;
    transform: none !important;
  }
  /* El relleno pierde la animación pero NO el scale: sin él, el desenfoque
     deja un borde claro pegado al marco. */
  .sm-hero__relleno { animation: none !important; }
}

/* ═══════════════════════ GALERÍA NOSOTROS ════════════════════════════════ */
/* Mosaico: columnas fluidas y cada foto con SU proporción. Antes todas se
   forzaban a 4:3 con object-fit: cover y se recortaba 24,5 % de media; las
   dos verticales (9:16) perdían el 58 %. Aquí no se recorta nada. */
.sm-galeria {
  columns: 3;
  column-gap: 20px;
}

.sm-galeria__card {
  break-inside: avoid;
  margin: 0 0 20px;
  /* Chrome necesita el inline-block para no partir la tarjeta entre columnas. */
  display: inline-block;
  width: 100%;
}

.sm-galeria__foto {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--sm-radio-lg);
  background: var(--sm-humo);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--sm-sombra);
  transition: transform .25s ease, box-shadow .25s ease;
  /* aspect-ratio real llega inline desde PHP */
}

.sm-galeria__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* el marco ya tiene la proporción exacta */
  display: block;
  transition: transform .5s ease;
}

/* Velo inferior: da contraste al pie sin apagar la foto. */
.sm-galeria__velo {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to top, rgba(3, 26, 11, .88) 0%, rgba(3, 26, 11, .55) 38%, transparent 100%);
  opacity: .92;
  transition: opacity .25s ease;
  pointer-events: none;
}

.sm-galeria__pie {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: 14px 16px 15px;
  text-align: left;
  color: #fff;
  pointer-events: none;
}

.sm-galeria__pie strong {
  display: block;
  font-family: var(--sm-fuente-titulo, inherit);
  font-size: 1.06rem;
  line-height: 1.2;
  letter-spacing: .2px;
}

/* El pie de foto se despliega al pasar el cursor. En táctil queda visible. */
.sm-galeria__pie small {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: .82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .88);
  transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}

.sm-galeria__lupa {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--sm-verde);
  font-size: .8rem;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

/* Barra de color por tarjeta, alternando la identidad de la marca. */
.sm-galeria__foto::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--sm-verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

.sm-galeria__card:nth-child(3n+2) .sm-galeria__foto::after { background: var(--sm-rojo); }

@media (hover: hover) {
  .sm-galeria__foto:hover,
  .sm-galeria__foto:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(2, 56, 20, .22);
  }
  .sm-galeria__foto:hover img,
  .sm-galeria__foto:focus-visible img { transform: scale(1.05); }
  .sm-galeria__foto:hover .sm-galeria__velo,
  .sm-galeria__foto:focus-visible .sm-galeria__velo { opacity: 1; }
  .sm-galeria__foto:hover .sm-galeria__pie small,
  .sm-galeria__foto:focus-visible .sm-galeria__pie small {
    max-height: 4.5em;
    opacity: 1;
    margin-top: 4px;
  }
  .sm-galeria__foto:hover .sm-galeria__lupa,
  .sm-galeria__foto:focus-visible .sm-galeria__lupa { opacity: 1; transform: scale(1); }
  .sm-galeria__foto:hover::after,
  .sm-galeria__foto:focus-visible::after { transform: scaleX(1); }
}

/* Sin cursor (móvil y tablet táctil) el texto no se puede "pasar por encima". */
@media (hover: none) {
  .sm-galeria__pie small { max-height: 4.5em; opacity: 1; margin-top: 4px; }
  .sm-galeria__foto::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sm-galeria__foto,
  .sm-galeria__foto img,
  .sm-galeria__velo,
  .sm-galeria__pie small,
  .sm-galeria__lupa,
  .sm-galeria__foto::after { transition: none; }
}
.sm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 56px 16px 24px;
  background: rgba(6, 22, 12, .88);
  backdrop-filter: blur(8px);
}

.sm-lightbox[hidden] { display: none; }

.sm-lightbox__marco {
  margin: 0;
  max-height: 100%;
  text-align: center;
}

.sm-lightbox__marco img {
  max-width: min(100%, 1100px);
  max-height: calc(100svh - 140px);
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  object-fit: contain;
}

.sm-lightbox__marco figcaption {
  margin-top: 12px;
  color: #E6F5EB;
  font-family: var(--sm-titulo);
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sm-lightbox__cerrar,
.sm-lightbox__nav {
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
}

.sm-lightbox__cerrar {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 1.8rem;
  line-height: 1;
}

.sm-lightbox__nav {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 1.8rem;
  line-height: 1;
}

.sm-lightbox__cerrar:hover,
.sm-lightbox__nav:hover { background: var(--sm-rojo); }

@media (max-width: 992px) {
  .sm-galeria { columns: 2; }
}

@media (max-width: 600px) {
  .sm-galeria { columns: 1; }
  .sm-lightbox { grid-template-columns: 1fr; padding: 64px 12px 72px; }
  .sm-lightbox__nav {
    position: absolute;
    bottom: 16px;
  }
  .sm-lightbox__nav--prev { left: 16px; }
  .sm-lightbox__nav--next { right: 16px; }
}