/* ==========================================================================
   Medicors — Landing Page
   Estilo: corporativo/salud moderno
   ========================================================================== */

:root {
  --navy: #16324a;
  --navy-dark: #0e2233;
  --teal: #1aa6b7;
  --teal-text: #107784; /* mismo matiz que --teal pero mas oscuro: --teal da 2.92:1 sobre
    blanco (falla WCAG AA, que pide 4.5:1 para texto) — este token es para texto/enlaces sobre
    fondos claros; --teal se mantiene igual para botones, fondos e iconos grandes. */
  --green: #4caf7d;
  --gradient: linear-gradient(135deg, var(--teal) 0%, var(--green) 100%);
  --bg-light: #f4f8fa;
  --bg-white: #ffffff;
  --text: #33454f;
  --text-light: #5c6f79;
  --border: #e3ebee;
  --shadow: 0 0.625rem 1.875rem rgba(22, 50, 74, 0.08);
  --shadow-hover: 0 1rem 2.5rem rgba(22, 50, 74, 0.14);
  --radius: 1rem;
  --container: 73.75rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%; /* fijo por debajo de 1024px, ver el media query de abajo */
  scroll-behavior: smooth;
  scroll-padding-top: 5.625rem;
  scrollbar-width: thin;
  scrollbar-color: var(--teal) var(--bg-light);
}

/* Regla obligatoria (2026-09-21): de 1024px hacia arriba una sola estructura
   que solo escala (no reordena), nunca tamaños fijos en px. En vez de envolver
   cada declaracion en clamp() propio, se escala el font-size raiz desde 1024px
   (64em) y el resto del sitio (ya en rem) escala gratis por herencia.
   MIN=16px/MAX=20px (100%/125%) y V1=1024px/V2=2560px, mismo criterio que el
   resto de paginas de Páginas/ (ver CLAUDE.md -> Técnicas CSS reutilizables). */
@media (min-width: 64em) {
  html {
    font-size: clamp(100%, 83.33% + 0.26vw, 125%);
  }
}

::-webkit-scrollbar {
  width: 0.75rem;
}

::-webkit-scrollbar-track {
  background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
  background: var(--gradient);
  border-radius: 0.625rem;
  border: 0.125rem solid var(--bg-light);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--green) 0%, var(--teal) 100%);
}

body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg-white);
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  color: var(--navy);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Foco visible para navegacion por teclado (no interfiere con clics de mouse) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 0.125rem solid var(--teal);
  outline-offset: 0.1875rem;
  border-radius: 0.25rem;
}

/* Enlace "saltar al contenido": oculto hasta que se enfoca con teclado (Tab) */
.skip-link {
  position: absolute;
  top: -3.75rem;
  left: 1rem;
  z-index: 2000;
  background: var(--navy);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: top 0.2s ease;
}

.skip-link:focus-visible {
  top: 1rem;
  outline-offset: 0.25rem;
}

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

ul {
  list-style: none;
}

button {
  font-family: inherit;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 6.25rem 0;
}

.section-header {
  text-align: center;
  max-width: 42.5rem;
  margin: 0 auto 3.5rem;
}

.section-title {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  margin-bottom: 0.875rem;
}

.nobreak-line {
  display: inline-block;
  white-space: nowrap;
}

.section-subtitle {
  color: var(--text-light);
  font-size: 1.05rem;
}

/* ---- Utilidad universal: badge/icono circular o redondeado ---- */
/* Base compartida por todos los iconos-insignia del sitio (about, servicios, valores,
   iso, cobertura, contacto, footer, social); cada uno define su propio tamano/color/hover. */
.about__badge-icon,
.about__feature-icon,
.service-row__caption-icon,
.service-mini__icon,
.value-chip__icon,
.mv-card__icon,
.value-row__icon,
.iso-list__icon,
.coverage-route__pin,
.coverage-route__mover,
.contact-info__icon,
.footer-contact__icon,
.social-btn,
.social-float__btn,
.catalog-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.875rem;
  border-radius: 0.625rem;
  font-weight: 600;
  font-size: 0.95rem;
  border: 0.125rem solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.btn-primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 0.625rem 1.5rem rgba(26, 166, 183, 0.35);
}

.btn-primary:hover {
  transform: translateY(-0.1875rem);
  box-shadow: 0 0.875rem 1.875rem rgba(26, 166, 183, 0.45);
}

.btn-outline {
  background: transparent;
  border-color: #ffffff;
  color: #fff;
}

.btn-outline:hover {
  background: #ffffff;
  color: var(--navy);
  transform: translateY(-0.1875rem);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   Top bar corporativa
   ========================================================================== */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2.1875rem;
  z-index: 1001;
  background: linear-gradient(90deg, #0f7a8a 0%, #1aa6b7 55%, #3fb88a 100%);
  color: #ffffff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.top-bar.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.top-bar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-bar__contact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.top-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.2s ease;
}

.top-bar a:hover {
  color: #ffffff;
}

.top-bar a svg {
  color: #ffffff;
}

.top-bar__copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.95);
  padding: 0.3125rem 0.625rem;
  border-radius: 1.25rem;
  transition: background 0.2s ease;
}

.top-bar__copy:hover {
  background: rgba(255, 255, 255, 0.16);
}

.top-bar__copy-icon {
  display: inline-flex;
  opacity: 0.55;
  margin-left: 0.125rem;
  transition: opacity 0.2s ease;
}

.top-bar__copy:hover .top-bar__copy-icon {
  opacity: 1;
}

.top-bar__copy::after {
  content: "¡Copiado!";
  position: absolute;
  left: 50%;
  bottom: -1.75rem;
  transform: translateX(-50%) translateY(-0.25rem);
  background: #16324a;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.top-bar__copy.is-copied::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   Header — navbar flotante tipo "glass"
   ========================================================================== */
.header {
  position: fixed;
  top: 3.5rem;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0 1.5rem;
  transition: top 0.3s ease;
}

/* Al ocultarse la cinta superior el header sube para ocupar ese espacio;
   solo se anima "top" (la posicion), nunca el padding/box-shadow del
   contenedor interno, para que la pildora se vea siempre igual. */
.header.is-scrolled {
  top: 0.875rem;
}

.header .container {
  position: relative;
  z-index: 0;
  max-width: 81.25rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0.0625rem solid rgba(26, 166, 183, 0.18);
  border-radius: 3.75rem;
  padding: 0.625rem 1rem 0.625rem 1.5rem;
  box-shadow: 0 0.75rem 2rem rgba(15, 122, 138, 0.16);
}

/* El desenfoque va en un pseudo-elemento (no en el contenedor real): backdrop-filter
   en el contenedor convertiria a sus hijos "position:fixed" (el menu movil) en fixed
   respecto a esta pildora en vez de a toda la pantalla. Con el pseudo, el vidrio se ve
   igual pero el menu movil queda libre para posicionarse contra el viewport real.
   z-index:-1 (mas el z-index:0 + position:relative de arriba, que crea su propio
   contexto de apilamiento) lo manda detras de TODO su contenido, incluido el <nav>,
   que en escritorio no tiene "position" propio y si no fuera por esto se pintaria
   detras del vidrio en vez de encima. */
.header .container::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(1.125rem);
  -webkit-backdrop-filter: blur(1.125rem);
}

.header__logo {
  position: relative;
  display: inline-block;
  width: 8.75rem;
  height: 0.0625rem;
}

.header__logo img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 8.75rem;
  height: auto;
}

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

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__list a {
  display: inline-block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  padding: 0.5rem 1.125rem;
  border-radius: 1.875rem;
  transition: background 0.25s ease, color 0.25s ease;
}

.nav__list a:hover {
  background: rgba(26, 166, 183, 0.14);
  color: #1aa6b7;
}

/* ---- Dropdown "Catalogo": Medicamentos / Limpieza, construido con divs ---- */
.nav__dropdown {
  position: relative;
}

.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  padding: 0.5rem 1.125rem;
  border-radius: 1.875rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.nav__dropdown-trigger:hover,
.nav__dropdown.is-open .nav__dropdown-trigger {
  background: rgba(26, 166, 183, 0.14);
  color: #1aa6b7;
}

.nav__dropdown-arrow {
  font-size: 0.7em;
  transition: transform 0.25s ease;
}

.nav__dropdown.is-open .nav__dropdown-arrow {
  transform: rotate(180deg);
}

.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 0;
  min-width: 11.875rem;
  background: var(--bg-white);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 0.5rem;
  opacity: 0;
  transform: translateY(-0.5rem);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1200;
}

.nav__dropdown.is-open .nav__dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav__dropdown-item {
  display: block;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

a.nav__dropdown-item:hover {
  background: rgba(26, 166, 183, 0.12);
  color: #1aa6b7;
}

.nav__dropdown-item--disabled {
  color: var(--text-light);
  opacity: 0.55;
  cursor: not-allowed;
}

.nav__cta {
  display: inline-flex;
}

.nav__cta .btn {
  background: linear-gradient(120deg, #1aa6b7 0%, #3fb88a 100%);
  color: #ffffff;
  border: none;
  border-radius: 0.625rem;
  padding: 0.75rem 1.75rem;
  font-size: 0.95rem;
  box-shadow: 0 0.375rem 1.125rem rgba(26, 166, 183, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.nav__cta .btn:hover {
  background: linear-gradient(120deg, #0f8a9c 0%, #2fa66d 100%);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.375rem rgba(26, 166, 183, 0.4);
}

.header__toggle {
  display: none;
  flex-direction: column;
  gap: 0.3125rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
}

.header__toggle span {
  width: 1.625rem;
  height: 0.1875rem;
  background: var(--navy);
  border-radius: 0.1875rem;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.header__toggle.is-active span:nth-child(1) {
  transform: translateY(0.5rem) rotate(45deg);
}
.header__toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.header__toggle.is-active span:nth-child(3) {
  transform: translateY(-0.5rem) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  color: #fff;
  overflow: hidden;
}

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  opacity: 0;
  transition: opacity 3s ease-in-out;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 77, 90, 0.94) 0%, rgba(13, 97, 110, 0.8) 45%, rgba(15, 122, 138, 0) 100%);
  z-index: -1;
}

.hero__shape-divider,
.value-prop__shape-divider {
  position: absolute;
  left: 0;
  bottom: -0.0625rem;
  width: 100%;
  line-height: 0;
  pointer-events: none;
}

.hero__shape-divider {
  z-index: 2;
}

.hero__shape-divider svg,
.value-prop__shape-divider svg {
  display: block;
  width: 100%;
}

.hero__shape-divider svg {
  height: 5.625rem;
}

.hero .container {
  position: relative;
  z-index: 3;
  padding-top: 10.9375rem;
  padding-bottom: 8.75rem;
}

.hero__carousel {
  position: relative;
  max-width: 40.625rem;
}

.hero__panel {
  display: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.hero__panel.is-active {
  display: block;
}

.hero__panel.is-visible {
  opacity: 1;
}

/* Kicker destacado: debe resaltar muchisimo (pedido explicito). Insignia solida
   con el degradado de marca, que flota suavemente y tiene un brillo que la
   recorre en diagonal, para maxima presencia y movimiento. */
.hero__panel-kicker {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  background: var(--gradient);
  padding: 0.75rem 1.375rem;
  border-radius: 1.875rem;
  overflow: hidden;
  animation: heroKickerFloat 3s ease-in-out infinite;
}

.hero__panel-kicker::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  animation: heroKickerShine 3.2s ease-in-out infinite;
}

@keyframes heroKickerFloat {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 0.625rem 1.5rem rgba(26, 166, 183, 0.35);
  }
  50% {
    transform: translateY(-0.375rem);
    box-shadow: 0 1.125rem 2.125rem rgba(26, 166, 183, 0.55);
  }
}

@keyframes heroKickerShine {
  0% {
    left: -60%;
  }
  55%,
  100% {
    left: 130%;
  }
}

.hero__dots {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin-top: 2.5rem;
  margin-left: -0.625rem;
}

/* El boton es un area de toque de 30x30 (accesibilidad); el punto visible
   es un ::before mas chico centrado adentro, asi el diseno no cambia. */
.hero__dot {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.hero__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.25s ease, width 0.25s ease;
}

.hero__dot:hover::before {
  background: rgba(255, 255, 255, 0.6);
}

.hero__dot.is-active::before {
  width: 1.875rem;
  border-radius: 0.375rem;
  background: var(--gradient);
}

.hero__title {
  color: #ffffff;
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  font-weight: 800;
  margin-bottom: 1.125rem;
  text-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.3);
}

.highlight-modern {
  color: #4be3c2;
  font-weight: 800;
  text-shadow: 0 0 1.5rem rgba(75, 227, 194, 0.55);
}

.hero__letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.5rem);
  animation: heroLetterIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes heroLetterIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.hero__text {
  font-size: 1rem;
  line-height: 1.55;
  color: #e2e8f0;
  margin-bottom: 2rem;
  max-width: 31.25rem;
  text-shadow: 0 0.0625rem 0.625rem rgba(0, 0, 0, 0.35);
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.875rem;
  margin-bottom: 3rem;
}

.hero__stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.hero__stat strong {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem;
  color: #ffffff;
  text-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.35);
}

.hero__stat span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0.0625rem 0.5rem rgba(0, 0, 0, 0.35);
}

.hero__scroll {
  position: absolute;
  bottom: 6.875rem;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0.0625rem 0.5rem rgba(0, 0, 0, 0.45);
}

.hero__scroll-line {
  width: 0.0625rem;
  height: 2.25rem;
  background: linear-gradient(#fff, transparent);
  animation: scrollPulse 1.8s infinite;
}

@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ==========================================================================
   Quienes somos
   ========================================================================== */
.about {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about__media {
  position: relative;
}

.about__media::before {
  content: "";
  position: absolute;
  top: -2.25rem;
  left: -2.25rem;
  width: 13.75rem;
  height: 13.75rem;
  background: var(--gradient);
  border-radius: 50%;
  filter: blur(3.75rem);
  opacity: 0.35;
  z-index: -1;
  animation: aboutBlobFloat 8s ease-in-out infinite;
}

.about__media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.about__slide {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center 15%;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.8s ease-in-out, transform 0.6s ease;
}

.about__slide.is-active {
  opacity: 1;
}

.about__media:hover .about__slide.is-active {
  transform: scale(1.05);
}

.about__badge {
  position: absolute;
  bottom: -1.75rem;
  right: -1.75rem;
  max-width: min(18.75rem, calc(100% - 1.25rem));
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@keyframes aboutBlobFloat {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0.75rem, -1rem);
  }
}


.about__badge-icon {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  flex-shrink: 0;
}

.about__badge strong {
  display: block;
  font-family: "Poppins", sans-serif;
  color: var(--navy);
  font-size: 1.05rem;
}

.about__badge span {
  display: block;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--text-light);
}

.wave-word,
.split-word {
  display: inline-block;
}

.wave-letter {
  display: inline-block;
  transition: transform 0.25s ease, color 0.25s ease;
}

.wave-word:hover .wave-letter {
  color: var(--teal);
  transform: translateY(-0.375rem);
}

.about__eyebrow {
  color: var(--teal-text);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 0.875rem;
  display: block;
}

.about__body p {
  color: var(--text-light);
  margin-bottom: 1.75rem;
  font-size: 1.05rem;
}

.about__features {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.about__features li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.375rem;
  border-radius: 0.75rem;
  transition: transform 0.3s ease, background 0.3s ease;
}

.about__features li:hover,
.service-mini:hover,
.contact-info__item:hover {
  transform: translateX(0.375rem);
}

.about__features li:hover {
  background: var(--bg-light);
}

.about__feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background: var(--bg-light);
  color: var(--teal);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.about__features li:hover .about__feature-icon {
  background: var(--gradient);
  color: #ffffff;
  transform: scale(1.08) rotate(-4deg);
}

.about__features strong {
  display: block;
  color: var(--navy);
  font-size: 0.98rem;
}

.about__features span {
  font-size: 0.88rem;
  color: var(--text-light);
}

/* ==========================================================================
   Servicios
   ========================================================================== */
.services-section {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
}

.services-section .container {
  position: relative;
  z-index: 1;
}

.service-rows {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4.375rem;
  margin-top: 3.5rem;
}

.service-row {
  position: relative;
  width: 100vw;
  max-width: 137.5rem;
  left: 50%;
  margin-left: max(-50vw, -68.75rem);
  display: grid;
  grid-template-columns:
    1fr
    calc(min(73.75rem, 100% - 3rem) * 0.5)
    calc(min(73.75rem, 100% - 3rem) * 0.5)
    1fr;
  align-items: center;
  min-height: 25rem;
}

.service-row--reverse {
  grid-template-columns:
    1fr
    calc(min(73.75rem, 100% - 3rem) * 0.5)
    calc(min(73.75rem, 100% - 3rem) * 0.5)
    1fr;
}

.service-row__media {
  position: relative;
  z-index: 1;
  grid-column: 3 / 5;
  align-self: stretch;
  overflow: hidden;
  border-radius: 12.5rem 0 0 12.5rem;
}

.service-row--reverse .service-row__media {
  grid-column: 1 / 3;
  border-radius: 0 12.5rem 12.5rem 0;
}

.service-row__media img {
  width: 100%;
  height: 100%;
  min-height: 25rem;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.service-row__media:hover img {
  transform: scale(1.06);
}

.service-row__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  gap: 0.75rem;
  padding: 1.625rem 1.75rem;
  background: linear-gradient(0deg, rgba(11, 77, 90, 0.92) 0%, rgba(11, 77, 90, 0) 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.service-row--reverse .service-row__caption {
  justify-content: flex-start;
  text-align: left;
}

.service-row__media:hover .service-row__caption {
  opacity: 1;
  transform: translateY(0);
}

.service-row__caption-icon {
  width: 2.375rem;
  height: 2.375rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(0.25rem);
}

.service-row__text {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  padding: 0 2.5rem 0 1.5rem;
}

.service-row--reverse .service-row__text {
  grid-column: 3;
  padding: 0 1.5rem 0 2.5rem;
}

.service-mini {
  display: flex;
  gap: 1.125rem;
  align-items: flex-start;
  padding: 0.625rem;
  border-radius: 0.5rem;
  transition: transform 0.3s ease, background 0.3s ease;
}

.service-mini:hover {
  background: var(--bg-light);
}

.service-mini__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.5rem;
  background: var(--teal);
  color: #fff;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.service-mini:hover .service-mini__icon {
  transform: scale(1.08) rotate(-4deg);
}

.service-mini h3 {
  font-size: 1.1rem;
  margin-bottom: 0.375rem;
}

.service-mini p {
  color: var(--text-light);
  font-size: 0.92rem;
  margin: 0;
}

/* ==========================================================================
   Banner: Catalogo de Higiene Industrial
   ========================================================================== */
.catalog-banner-section {
  background: var(--bg-white);
  padding: 3.75rem 0;
}

/* Fondo con un lavado de degradado suave (teal -> verde) en vez de blanco liso,
   para que la tarjeta transmita "limpieza" a simple vista, sin caer en un color
   solido pesado que rompa el tono claro y clinico del resto del sitio. */
.catalog-banner {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(135deg, rgba(26, 166, 183, 0.1), rgba(63, 184, 138, 0.12));
  border: 0.0625rem solid rgba(26, 166, 183, 0.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.25rem 2.5rem;
}

.catalog-banner__icon {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: 1rem;
  background: var(--gradient);
  color: #fff;
}

.catalog-banner__body {
  flex: 1;
  min-width: 0;
}

.catalog-banner__kicker {
  display: inline-block;
  color: var(--teal-text);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.catalog-banner__title {
  color: var(--navy);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.catalog-banner__text {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
}

.catalog-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  background: var(--gradient);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 1rem 1.625rem;
  border-radius: 3.125rem;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.catalog-banner__cta:hover {
  transform: translateY(-0.1875rem);
  box-shadow: var(--shadow-hover);
}

.catalog-banner__cta-arrow {
  display: flex;
  align-items: center;
  transition: transform 0.25s ease;
}

.catalog-banner__cta:hover .catalog-banner__cta-arrow {
  transform: translateX(0.3125rem);
}

@media (max-width: 53.75em) {
  .catalog-banner {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
  }

  .catalog-banner__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Propuesta de valor (dark section)
   ========================================================================== */
.value-prop {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  color: #fff;
  position: relative;
  overflow: hidden;
}

.value-prop::before,
.coverage::before {
  content: "";
  position: absolute;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: var(--gradient);
  opacity: 0.18;
  filter: blur(5rem);
  top: -10rem;
  right: -7.5rem;
  animation: valuePropBlobFloat 11s ease-in-out infinite;
}

.value-prop::after,
.coverage::after {
  content: "";
  position: absolute;
  width: 22.5rem;
  height: 22.5rem;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.14;
  filter: blur(5rem);
  left: -6.25rem;
  animation: valuePropBlobFloat 9s ease-in-out infinite reverse;
}

.value-prop::after {
  bottom: 2.5rem;
}

.coverage::after {
  bottom: -5rem;
}

@keyframes valuePropBlobFloat {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(1.875rem, 1.5rem);
  }
}

.value-prop .container {
  position: relative;
  z-index: 2;
  padding-top: 3.125rem;
  padding-bottom: 3.75rem;
}

.value-prop__header {
  max-width: 45rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.value-prop__header h2 {
  color: #fff;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.3;
  margin-bottom: 1.375rem;
}

.value-prop__highlight {
  color: #4be3c2;
  font-weight: 800;
  text-shadow: 0 0 1.5rem rgba(75, 227, 194, 0.5);
}

.value-prop__quote {
  font-family: "Poppins", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  position: relative;
  padding-top: 1.625rem;
}

.value-prop__quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.875rem;
  height: 0.1875rem;
  border-radius: 0.1875rem;
  background: var(--gradient);
  animation: valueQuoteLinePulse 2.4s ease-in-out infinite;
}

@keyframes valueQuoteLinePulse {
  0%, 100% {
    width: 2.875rem;
    opacity: 1;
  }
  50% {
    width: 4.375rem;
    opacity: 0.6;
  }
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
  gap: 1rem;
  max-width: 62.5rem;
  margin: 0 auto;
}

.value-chip {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 0.875rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  padding: 0.875rem 1.125rem;
  border-radius: 0.5rem;
  font-size: 0.94rem;
  font-weight: 500;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.value-chip::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.value-chip:hover {
  transform: translateY(-0.3125rem);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(127, 224, 214, 0.4);
}

.value-chip:hover::after {
  left: 125%;
}

.value-chip__icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  color: #7fe0d6;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.value-chip:hover .value-chip__icon {
  background: var(--gradient);
  color: #ffffff;
  transform: scale(1.1) rotate(-6deg);
}

.value-prop__shape-divider {
  z-index: 1;
}

.value-prop__shape-divider--top {
  top: -0.0625rem;
  bottom: auto;
}

.value-prop__shape-divider svg {
  height: 8.75rem;
}

/* ==========================================================================
   Mision y vision
   ========================================================================== */
.mv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.875rem;
}

.mv-card {
  position: relative;
  overflow: hidden;
  min-height: 28.75rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mv-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: var(--shadow-hover);
}

.mv-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  z-index: 0;
}

.mv-card:hover .mv-card__bg {
  transform: scale(1.08);
}

.mv-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 34, 51, 0.15) 0%, rgba(14, 34, 51, 0.6) 55%, rgba(14, 34, 51, 0.93) 100%);
  z-index: 1;
  transition: background 0.4s ease;
}

.mv-card:hover .mv-card__overlay {
  background: linear-gradient(180deg, rgba(15, 122, 138, 0.25) 0%, rgba(11, 77, 90, 0.65) 55%, rgba(11, 77, 90, 0.95) 100%);
}

.mv-card__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem 2.25rem;
}

.mv-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(0.375rem);
  -webkit-backdrop-filter: blur(0.375rem);
  color: #ffffff;
  margin-bottom: 1.25rem;
  transition: background 0.3s ease, transform 0.3s ease;
}

.mv-card:hover .mv-card__icon {
  background: var(--gradient);
  transform: scale(1.1) rotate(-6deg);
}

.mv-card h3 {
  color: #ffffff;
  font-size: 1.5rem;
  margin-bottom: 0.875rem;
}

.mv-card p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ==========================================================================
   Valores — video de fondo con degradado
   ========================================================================== */
.values-section {
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

.values-section__video {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.values-section__video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.values-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(14, 34, 51, 0.85) 0%, rgba(14, 34, 51, 0.65) 35%, rgba(14, 34, 51, 0.28) 65%, rgba(14, 34, 51, 0.05) 100%);
}

#valores .section-header {
  text-align: left;
  max-width: 45rem;
  margin: 0 0 3.5rem;
}

.values-section .container {
  position: relative;
  z-index: 2;
}

#valores .section-title {
  color: #ffffff;
}

.values-timeline {
  position: relative;
  max-width: 45rem;
  margin: 0;
}

.values-timeline::before {
  content: "";
  position: absolute;
  left: 4rem;
  top: 0.625rem;
  bottom: 0.625rem;
  width: 0.125rem;
  background: linear-gradient(180deg, transparent, rgba(26, 166, 183, 0.35) 8%, rgba(26, 166, 183, 0.35) 92%, transparent);
}

.value-row {
  position: relative;
  display: flex;
  gap: 1.875rem;
  align-items: center;
  padding: 1.375rem 0;
}

.value-row__icon {
  position: relative;
  z-index: 1;
  width: 8.125rem;
  height: 8.125rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-white);
  border: 0.125rem solid rgba(255, 255, 255, 0.5);
  color: var(--teal);
  box-shadow: 0 0.875rem 1.875rem rgba(0, 0, 0, 0.25);
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.value-row:hover .value-row__icon {
  background: var(--teal);
  border-color: transparent;
  color: #ffffff;
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 0.875rem 1.875rem rgba(26, 166, 183, 0.4);
}

.value-row__content {
  padding-top: 0;
}

.value-row__index {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: #7fe0d6;
  margin-bottom: 0.5rem;
}

.value-row__content h3 {
  color: #ffffff;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.value-row__content p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.94rem;
  max-width: 38.75rem;
}

/* ==========================================================================
   Certificaciones ISO
   ========================================================================== */
.iso-layout {
  display: flex;
  align-items: stretch;
  gap: 3.125rem;
  max-width: 70rem;
  margin: 0 auto;
}

.iso-image {
  flex: 1.35;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.iso-image img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.iso-image:hover img {
  transform: scale(1.04);
}

.iso-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.125rem;
}

/* Insignias de certificacion: cada una se ve como un sello de confianza
   independiente (icono circular + texto centrado), no como una fila de lista. */
.iso-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.625rem;
  background: var(--bg-white);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius);
  padding: 1.625rem 1.25rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.iso-list__item:hover {
  transform: translateY(-0.375rem);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}

.iso-list__icon {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.iso-list__icon svg {
  transition: transform 0.35s ease;
}

.iso-list__item:hover .iso-list__icon {
  transform: scale(1.1) rotate(4deg);
  box-shadow: 0 0.625rem 1.375rem rgba(26, 166, 183, 0.4);
}

.iso-list__item h3 {
  font-size: 1.1rem;
  margin-bottom: 0.125rem;
}

.iso-list__item p {
  color: var(--text-light);
  font-size: 0.9rem;
}

@media (max-width: 53.75em) {
  .iso-layout {
    flex-direction: column;
  }

  .iso-image {
    max-width: 30rem;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Cobertura
   ========================================================================== */
.coverage {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  color: #fff;
  text-align: center;
}

.coverage .container {
  position: relative;
  z-index: 2;
  padding-top: 3.125rem;
  padding-bottom: 3.75rem;
}

.coverage .section-title,
.coverage .section-subtitle {
  color: #fff;
}

.coverage .section-subtitle {
  color: rgba(255, 255, 255, 0.75);
}

.coverage-route {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: 61.25rem;
  margin: 3rem auto 0;
}

.coverage-route__line {
  position: absolute;
  top: 1.4375rem;
  left: 6%;
  right: 6%;
  height: 0.125rem;
  background: linear-gradient(90deg, transparent, rgba(26, 166, 183, 0.4) 10%, rgba(26, 166, 183, 0.4) 90%, transparent);
  z-index: 0;
}

.coverage-route__mover {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  box-shadow: 0 0.5rem 1.25rem rgba(26, 166, 183, 0.45);
  transform: translate(-50%, -50%);
  animation: coverageRouteMove 8s linear infinite;
}

@keyframes coverageRouteMove {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

.coverage-route__stop {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.coverage-route__pin {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 0.125rem solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(0.25rem);
  color: #7fe0d6;
  margin-bottom: 1rem;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.coverage-route__stop:hover .coverage-route__pin {
  background: var(--gradient);
  border-color: transparent;
  color: #fff;
  transform: scale(1.15) translateY(-0.25rem);
  box-shadow: 0 0.75rem 1.625rem rgba(26, 166, 183, 0.4);
}

.coverage-route__stop strong {
  font-family: "Poppins", sans-serif;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.coverage-route__stop span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}

/* ==========================================================================
   Contacto
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}

.contact-info {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-dark), var(--navy));
  color: #ffffff;
  padding: 3rem 2.5rem;
}

.contact-info::before {
  content: "";
  position: absolute;
  width: 18.75rem;
  height: 18.75rem;
  border-radius: 50%;
  background: var(--gradient);
  opacity: 0.16;
  filter: blur(4.375rem);
  top: -6.25rem;
  right: -5rem;
  animation: valuePropBlobFloat 10s ease-in-out infinite;
}

.contact-info h3 {
  position: relative;
  color: #ffffff;
  font-size: 1.3rem;
}

.contact-info__list {
  position: relative;
  display: grid;
  gap: 0.875rem;
  margin: 1.625rem 0 2rem;
}

.contact-info__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 0.0625rem solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 1rem 1.125rem;
  transition: transform 0.3s ease, background 0.3s ease;
}

.contact-info__item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.contact-info__icon {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.1);
  color: #7fe0d6;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.contact-info__item:hover .contact-info__icon {
  background: var(--gradient);
  color: #ffffff;
  transform: scale(1.08) rotate(-5deg);
}

.contact-info__item strong {
  display: block;
  color: #ffffff;
  font-size: 0.92rem;
}

.contact-info__item span,
.contact-info__item a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.contact-info__item a:hover {
  color: var(--teal);
}

.contact-info__socials {
  position: relative;
  display: flex;
  gap: 0.75rem;
}

.social-btn {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 0.0625rem solid rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.social-btn:hover {
  background: var(--gradient);
  border-color: transparent;
  transform: translateY(-0.1875rem);
}

.contact-form {
  background: var(--bg-white);
  padding: 3rem 2.75rem;
}

.contact-form__privacy {
  margin-top: 0.875rem;
  text-align: center;
  color: var(--text-light);
  font-size: 0.8rem;
}

.contact-form__privacy a {
  color: var(--teal-text);
  font-weight: 600;
}

.contact-form__privacy a:hover {
  color: var(--navy);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem;
}

.form-hp {
  position: absolute;
  left: -624.9375rem;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
}

.form-group {
  margin-bottom: 1.125rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.8125rem 1rem;
  border: 0.0938rem solid var(--border);
  border-radius: 0.625rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-light);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--bg-white);
  box-shadow: 0 0 0 0.25rem rgba(26, 166, 183, 0.14);
}

.form-group textarea {
  resize: vertical;
  min-height: 7.5rem;
}

.form-error {
  color: #d64545;
  font-size: 0.78rem;
  margin-top: 0.375rem;
  display: none;
}

.form-group.has-error input,
.form-group.has-error textarea {
  border-color: #d64545;
}

.form-group.has-error .form-error {
  display: block;
}

.form-alert {
  padding: 0.875rem 1.125rem;
  border-radius: 0.625rem;
  font-size: 0.9rem;
  margin-bottom: 1.375rem;
}

.form-alert--success {
  background: rgba(76, 175, 125, 0.12);
  color: #2e7d54;
  border: 0.0625rem solid rgba(76, 175, 125, 0.3);
}

.form-alert--error {
  background: rgba(214, 69, 69, 0.1);
  color: #d64545;
  border: 0.0625rem solid rgba(214, 69, 69, 0.28);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 4.375rem 0 1.625rem;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.1875rem;
  background: var(--gradient);
}

.footer::after {
  content: "";
  position: absolute;
  width: 21.25rem;
  height: 21.25rem;
  border-radius: 50%;
  background: var(--gradient);
  opacity: 0.1;
  filter: blur(5.625rem);
  bottom: -8.75rem;
  right: -5rem;
  pointer-events: none;
}

.footer .container {
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.85fr 1fr 0.9fr;
  gap: 2.5rem;
  padding-bottom: 2.75rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
  position: relative;
  width: 9.375rem;
  height: 4.375rem;
  background: #fff;
  border-radius: 0.875rem;
  margin-bottom: 1.25rem;
}

.footer-logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.75rem;
  height: auto;
  display: block;
}

.footer-about p {
  font-size: 0.9rem;
  line-height: 1.7;
}

.footer-ruc {
  margin-top: 0.625rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

.footer h4 {
  position: relative;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1.375rem;
  padding-bottom: 0.75rem;
}

.footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.875rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background: var(--gradient);
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  display: inline-block;
  font-size: 0.9rem;
  transition: color 0.25s ease, transform 0.25s ease;
}

.footer-links a:hover {
  color: var(--teal);
  transform: translateX(0.3125rem);
}

.footer-contact li {
  font-size: 0.9rem;
  margin-bottom: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-contact li a {
  transition: color 0.2s ease;
}

.footer-contact li a:hover {
  color: var(--teal);
}

.footer-contact svg {
  flex-shrink: 0;
}

.footer-contact__icon {
  width: 2.125rem;
  height: 2.125rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.08);
  color: #7fe0d6;
  transition: background 0.3s ease, color 0.3s ease;
}

.footer-contact li:hover .footer-contact__icon {
  background: var(--gradient);
  color: #ffffff;
}

.footer-bottom {
  padding-top: 1.625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.82rem;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom a:hover {
  color: var(--teal);
}

.footer-reclamos-badge {
  display: inline-block;
  background: #fff;
  border-radius: 0.75rem;
  padding: 0.875rem;
  box-shadow: 0 0.5rem 1.375rem rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.footer-reclamos-badge:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.32);
}
.footer-reclamos-badge img {
  display: block;
  width: 8.75rem;
  height: auto;
}

/* ==========================================================================
   Botones flotantes de redes sociales
   ========================================================================== */
.social-float {
  position: fixed;
  bottom: 1.625rem;
  right: 1.625rem;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}

.social-float__btn {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 0.625rem 1.375rem rgba(14, 34, 51, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.social-float__btn:hover {
  transform: scale(1.12) translateY(-0.1875rem);
}

.social-float__btn--whatsapp {
  width: 3.625rem;
  height: 3.625rem;
  background: #25d366;
  box-shadow: 0 0.75rem 1.625rem rgba(37, 211, 102, 0.4);
}

.social-float__btn--facebook,
.social-float__btn--instagram {
  background: linear-gradient(120deg, #1aa6b7 0%, #3fb88a 100%);
  box-shadow: 0 0.625rem 1.375rem rgba(26, 166, 183, 0.35);
}

/* ==========================================================================
   Boton "volver arriba"
   ========================================================================== */
.back-to-top {
  position: fixed;
  left: 1.625rem;
  bottom: 1.625rem;
  z-index: 900;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 0.625rem 1.375rem rgba(14, 34, 51, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-0.1875rem);
  box-shadow: 0 0.875rem 1.75rem rgba(14, 34, 51, 0.32);
}

@media (max-width: 40em) {
  .back-to-top {
    left: 1.125rem;
    bottom: 1.125rem;
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(1.875rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Franja "apretada": el nav horizontal ya tiene 6 enlaces + logo + boton, asi
   que justo por encima del punto donde aparece el menu hamburguesa (1024px)
   se achica un poco para que todo entre comodo sin desbordar ni partirse en
   dos lineas. Por encima de 1220px sobra espacio de sobra y usa el tamano normal. */
@media (min-width: 64.0625em) and (max-width: 76.25em) {
  .nav__list {
    gap: 0.0625rem;
  }

  .nav__list a,
  .nav__dropdown-trigger {
    padding: 0.5rem 0.625rem;
    font-size: 0.88rem;
  }

  .nav__cta .btn {
    padding: 0.75rem 1.25rem;
  }
}

@media (max-width: 64em) {
  .service-rows {
    gap: 3rem;
    margin-top: 2.5rem;
  }

  .service-row,
  .service-row--reverse {
    width: 100%;
    left: 0;
    margin-left: 0;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 1.5rem;
  }

  .service-row__text,
  .service-row--reverse .service-row__text {
    grid-column: 1;
    padding: 0;
  }

  .service-row__media,
  .service-row--reverse .service-row__media {
    grid-column: 1;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .service-row__media img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .service-row__caption {
    opacity: 1;
    transform: translateY(0);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .about {
    grid-template-columns: 1fr;
  }

  .about__media {
    max-width: 28.75rem;
    margin: 0 auto;
  }
}

/* El punto de quiebre a menu hamburguesa es mas ancho que el resto de breakpoints
   moviles (1024px en vez de 860px) porque el nav horizontal tiene mas enlaces que
   antes: a ese ancho no entrarian sin apretujarse o desbordar. */
@media (max-width: 64em) {
  .top-bar {
    display: none;
  }

  .header,
  .header.is-scrolled {
    top: 0;
    padding: 0;
  }

  .header .container {
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: 0 0.25rem 1rem rgba(15, 122, 138, 0.14);
    padding: 0.625rem 0.75rem 0.625rem 1rem;
  }

  .header__logo {
    position: static;
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 2.125rem;
  }

  .header__logo img {
    position: static;
    transform: none;
    width: auto;
    height: 100%;
  }

  .nav {
    position: fixed;
    inset: 0;
    left: auto;
    width: min(20rem, 80%);
    background: var(--bg-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 9.375rem 2rem 2rem;
    gap: 1.875rem;
    box-shadow: -0.75rem 0 1.875rem rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }

  .nav.is-open {
    transform: translateX(0);
  }

  .nav__list {
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
  }

  .nav__list a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: 1.05rem;
    color: var(--navy);
  }

  /* En el menu movil el desplegable se abre como acordeon (empuja el contenido
     de abajo), en vez de flotar encima como en el nav horizontal de escritorio. */
  .nav__dropdown-trigger {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: 1.05rem;
    color: var(--navy);
  }

  .nav__dropdown-menu {
    position: static;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    transition: max-height 0.3s ease;
  }

  .nav__dropdown.is-open .nav__dropdown-menu {
    max-height: 10rem;
    padding: 0.25rem 0 0.25rem 0.875rem;
  }

  .nav__dropdown-item {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    font-size: 1rem;
  }

  .nav__cta {
    display: flex;
    width: 100%;
    margin-top: 0.5rem;
  }

  .nav__cta .btn {
    width: 100%;
    justify-content: center;
    min-height: 3rem;
  }

  .header__toggle {
    display: flex;
  }

  .header__toggle span {
    background: var(--navy);
  }
}

/* Este breakpoint quedo independiente del de arriba: .mv-grid y .contact-grid
   no tienen relacion con el menu, deben seguir colapsando en su propio punto. */
@media (max-width: 53.75em) {
  .mv-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40em) {
  .section {
    padding: 4.375rem 0;
  }

  .about__body .section-title {
    font-size: 1.5rem;
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__stats {
    gap: 1.625rem;
  }

  .coverage-route {
    flex-direction: column;
    gap: 2rem;
  }

  .coverage-route__line,
  .coverage-route__mover {
    display: none;
  }

  .values-timeline::before {
    left: 2.9375rem;
  }

  .value-row {
    gap: 1.125rem;
  }

  .value-row__icon {
    width: 5.875rem;
    height: 5.875rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 2rem 1.5rem;
  }

  .contact-info {
    padding: 2.25rem 1.5rem;
  }

  .about__badge {
    position: relative;
    z-index: 1;
    margin-top: -2.5rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
}

/* ==========================================================================
   Pagina del catalogo (catalogo.php)
   ========================================================================== */
/* ---- Visor editorial: todas las paginas del PDF en una columna continua ---- */
/* Es la primera seccion de la pagina (ya no hay hero de texto arriba), asi que
   el padding-top reemplaza al que antes daba esa seccion para despejar el header fijo. */
.catalog-viewer-section {
  background: var(--bg-white);
  padding-top: 10.9375rem;
  /* Deja espacio para que la ultima pagina no quede pegada a la barra flotante. */
  padding-bottom: 6.875rem;
}

/* Rompe el ancho maximo de 1180px del sitio para que el catalogo aproveche casi todo el viewport */
.catalog-viewer-wrap {
  position: relative;
  width: 100vw;
  max-width: 112.5rem;
  left: 50%;
  margin-left: max(-50vw, -56.25rem);
  padding: 0 0.75rem;
}

.catalog-viewer {
  position: relative;
  width: 100%;
  max-width: 62.5rem;
  margin: 0 auto;
  padding: 0.5rem 0;
}

.catalog-viewer__stage {
  min-width: 0;
  min-height: 25rem;
}

.catalog-summary {
  background: var(--bg-light);
  border-top: 0.0625rem solid var(--border);
}

.catalog-summary__grid {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.catalog-summary__item {
  background: var(--bg-white);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius);
  padding: 1.625rem 1.75rem;
}

.catalog-summary__item h3 {
  color: var(--navy);
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.catalog-summary__item p {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.6;
}

@media (max-width: 45em) {
  .catalog-summary__grid {
    grid-template-columns: 1fr;
  }
}

/* Columna continua: cada pagina del PDF apilada debajo de la anterior */
.catalog-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Tarjeta por pagina: reserva su alto real via aspect-ratio (asignado por JS en
   cuanto se conocen las dimensiones del PDF) para que el documento no salte al
   ir dibujando canvases a medida que entran en pantalla. */
.catalog-page {
  position: relative;
  width: 100%;
  max-width: 100%;
  /* Para que la navegacion prev/next de la barra flotante no deje la pagina
     tapada debajo del header fijo al hacer scroll hacia ella. */
  scroll-margin-top: 8.75rem;
  background: var(--bg-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.catalog-page__canvas {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.catalog-page.is-rendered .catalog-page__canvas {
  opacity: 1;
}

.catalog-viewer__loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 25rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--bg-white);
  color: var(--text-light);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.25rem;
}

.catalog-viewer__loading.is-hidden {
  display: none;
}

.catalog-viewer__spinner {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  border: 0.1875rem solid var(--border);
  border-top-color: var(--teal);
  animation: catalogViewerSpin 0.8s linear infinite;
}

@keyframes catalogViewerSpin {
  to {
    transform: rotate(360deg);
  }
}

.catalog-viewer__fallback {
  max-width: 70rem;
  margin: 1.25rem auto 0;
  text-align: center;
  color: var(--text-light);
  font-size: 0.9rem;
}

@media (max-width: 40em) {
  .catalog-viewer {
    padding: 0.75rem 0;
  }

  .catalog-pages {
    gap: 0.875rem;
  }

  .catalog-page {
    scroll-margin-top: 5.625rem;
  }

  .catalog-viewer__stage {
    min-height: 22.5rem;
  }

  .catalog-viewer__loading {
    min-height: 22.5rem;
  }
}

/* ---- Barra flotante: navegar entre paginas + descargar + WhatsApp ---- */
.catalog-toolbar {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  max-width: calc(100vw - 1.5rem);
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(0.875rem);
  -webkit-backdrop-filter: blur(0.875rem);
  border: 0.0625rem solid var(--border);
  border-radius: 3.125rem;
  box-shadow: var(--shadow-hover);
  padding: 0.5rem;
}

/* La barra arranca oculta y solo se revela la primera vez que el usuario
   hace scroll (no debe aparecer de entrada al cargar la pagina); una vez
   que se revela, se queda visible el resto de la sesion en esta pagina.
   El prefijo .js replica el patron de .reveal: sin JS, la barra permanece
   visible por defecto para no perder la descarga/WhatsApp del catalogo. */
.js .catalog-toolbar {
  opacity: 0;
  transform: translateX(-50%) translateY(1rem);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.js .catalog-toolbar.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.catalog-toolbar__nav-group {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
}

.catalog-toolbar__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.catalog-toolbar__nav:hover:not(:disabled) {
  background: var(--gradient);
  color: #fff;
}

.catalog-toolbar__nav--prev svg {
  transform: scaleX(-1);
}

.catalog-toolbar__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.catalog-toolbar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
}

/* Input editable: duplica como indicador de pagina actual y como forma de
   saltar directo a una pagina especifica, sin tener que ir de una en una. */
.catalog-toolbar__page-input {
  width: 1.875rem;
  border: none;
  background: var(--bg-light);
  border-radius: 0.5rem;
  color: var(--navy);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  padding: 0.375rem 0.125rem;
  -moz-appearance: textfield;
}

.catalog-toolbar__page-input::-webkit-outer-spin-button,
.catalog-toolbar__page-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.catalog-toolbar__page-input:focus {
  outline: 0.125rem solid var(--teal);
  outline-offset: 0.0625rem;
}

.catalog-toolbar__sep {
  opacity: 0.5;
}

.catalog-toolbar__divider {
  width: 0.0625rem;
  height: 1.625rem;
  flex-shrink: 0;
  background: var(--border);
}

.catalog-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  flex-shrink: 0;
  border-radius: 3.125rem;
  background: var(--gradient);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.catalog-toolbar__btn:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-hover);
}

.catalog-toolbar__btn--whatsapp {
  background: #25d366;
}

/* Empuja el bubble flotante de redes sociales y el boton "volver arriba" hacia
   arriba en esta pagina, para que no se pisen con la barra flotante del catalogo
   (los tres son elementos fixed en la franja inferior de la pantalla). */
.catalogo-page .social-float,
.catalogo-page .back-to-top {
  bottom: 6rem;
}

@media (max-width: 40em) {
  .catalog-toolbar__btn-label {
    display: none;
  }

  .catalog-toolbar__btn {
    width: 2.75rem;
    padding: 0;
  }

  .catalogo-page .social-float,
  .catalogo-page .back-to-top {
    bottom: 5.25rem;
  }
}

/* ==========================================================================
   Paginas legales (privacidad.php)
   ========================================================================== */
.legal-page .container {
  padding-top: 10.9375rem;
}

.legal-page__body {
  max-width: 47.5rem;
  margin: 0 auto;
  color: var(--text);
  line-height: 1.75;
}

.legal-page__body h2 {
  font-size: 1.3rem;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

.legal-page__body p {
  margin-bottom: 1rem;
}

.legal-page__body ul {
  margin: 0 0 1rem;
  padding-left: 0.25rem;
}

.legal-page__body li {
  margin-bottom: 0.5rem;
  padding-left: 1.25rem;
  position: relative;
}

.legal-page__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--teal);
}

.legal-page__body a {
  color: var(--teal-text);
  font-weight: 600;
}

.legal-page__body a:hover {
  color: var(--navy);
}

.legal-note {
  background: var(--bg-light);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.7;
}
.legal-note strong { color: var(--navy); }
.legal-note__deadline {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 0.0625rem solid var(--border);
  color: var(--navy);
}

.form-radio-group {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.form-radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
}
.form-radio-option input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--teal);
  cursor: pointer;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.88rem;
  color: var(--text-light);
  cursor: pointer;
}
.form-checkbox input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--teal);
  margin-top: 0.125rem;
  flex-shrink: 0;
  cursor: pointer;
}

.legal-page__body h3 {
  font-size: 1.1rem;
  color: var(--navy);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Politica de privacidad (privacidad.php): estructura de la maqueta del ERP, paleta Medicors */
.legal-page--ficha .legal-page__body {
  max-width: 57rem;
  margin: 0 auto;
}

.legal-ficha__titulo {
  font-size: 2.5rem;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.legal-ficha__sub {
  color: var(--text-light);
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.legal-ficha__intro {
  margin-top: 2rem;
  font-size: 1.125rem;
}

.legal-page--ficha .legal-page__body h2 {
  font-size: 1.5rem;
  color: var(--teal-text);
  margin-top: 2.75rem;
  margin-bottom: 1rem;
}

.legal-ficha__card {
  background: var(--bg-white);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.5rem 0.5rem;
  margin-bottom: 1rem;
}

.legal-page--ficha .legal-page__body a {
  text-decoration: underline;
}

@media (max-width: 63.9375em) {
  .legal-ficha__titulo {
    font-size: 2rem;
  }

  .legal-page--ficha .legal-page__body h2 {
    font-size: 1.3rem;
  }
}