:root {
  --primary: #0d4ccf;
  --primary-dark: #24316d;
  --primary-deep: #242a61;
  --accent: #ff8e18;
  --accent-dark: #ef7c00;
  --surface: #ffffff;
  --surface-alt: #f7f8ff;
  --border-soft: rgba(13, 76, 207, 0.18);
  --text-main: #28315d;
  --text-soft: #5f688d;
  --shadow-soft: 0 18px 35px rgba(35, 53, 109, 0.14);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at top right, rgba(16, 84, 226, 0.08), transparent 20%),
    linear-gradient(180deg, #ffffff, #fbfbff);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}

a {
  text-decoration: none;
}

.navbar-toggler-icon {
  filter: invert(1);
}

.site-header {
  background: linear-gradient(90deg, #244abb, #2b45b4);
  box-shadow: 0 10px 30px rgba(20, 38, 101, 0.15);
}

.navbar-brand,
.nav-link {
  color: #fff;
}

.navbar-brand:hover,
.nav-link:hover,
.nav-link:focus {
  color: #fff;
  opacity: 0.92;
}

.nav-link {
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 800;
}

.brand-logo {
  display: block;
  width: auto;
  height: 3.5rem;
}

.brand-logo-footer {
  height: 3.25rem;
}

.categories-page {
  min-height: 100vh;
}

.categories-page-section {
  padding-top: 4.2rem;
  padding-bottom: 4.8rem;
}

.section-heading-wide {
  margin-bottom: 3rem;
}

.section-heading-wide h1 {
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  margin: 0;
  color: var(--primary-dark);
  font-weight: 700;
}

.section-heading-wide h1 span {
  font-weight: 400;
  opacity: 0.9;
}

.categories-grid {
  --bs-gutter-y: 2rem;
}

.col-xl-20 {
  width: 20%;
}

.category-tile-page {
  min-height: 11rem;
  padding: 1.8rem 1rem 1.35rem;
  gap: 1rem;
  border-width: 1.25px;
}

.category-icon-svg {
  width: 4.15rem;
  height: 4.15rem;
  object-fit: contain;
}

.category-icon-municipal {
  width: 5rem;
  height: 3rem;
}

.category-icon-plus {
  width: 2.9rem;
  height: 2.9rem;
}

.category-tile-page h3 {
  font-size: 0.88rem;
  line-height: 1.15;
  letter-spacing: 0;
}

.brand-icon {
  width: 2.65rem;
  height: 1.6rem;
  border-radius: 1rem 1rem 0.25rem 0.25rem;
  background:
    linear-gradient(135deg, transparent 40%, #fff 41%, #fff 59%, transparent 60%) top center / 70% 58% no-repeat,
    linear-gradient(#fff, #fff) bottom center / 100% 38% no-repeat;
  display: inline-block;
}

.brand-text {
  font-size: 1.25rem;
  line-height: 1;
}

.btn-pill {
  width: fit-content;
  border-radius: 999px;
  padding: 0.82rem 1.45rem;
  font-weight: 700;
  line-height: 1;
}

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-accent:hover,
.btn-accent:focus {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

.btn-outline-accent {
  color: var(--accent-dark);
  border-color: var(--accent);
  background: #fff;
}

.btn-outline-accent:hover,
.btn-outline-accent:focus {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.boton-naranjo {
  background-color: #ff8c1a;
  border-color: #ff8c1a;
  color: #fff;
}

.boton-naranjo:hover,
.boton-naranjo:focus {
  background-color: #e67d10;
  border-color: #e67d10;
  color: #fff;
}

.download-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 65% 20%, rgba(80, 148, 255, 0.18), transparent 20%),
    radial-gradient(circle at 20% 120%, rgba(255, 255, 255, 0.12), transparent 24%),
    linear-gradient(120deg, #23295f 0%, #1150cf 58%, #1860dd 100%);
}

.download-panel::before {
  content: "";
  position: absolute;
  inset: auto -10% -26% 0;
  height: 60%;
  background:
    radial-gradient(ellipse at left center, rgba(255, 255, 255, 0.08), transparent 60%),
    radial-gradient(ellipse at center center, rgba(255, 255, 255, 0.1), transparent 42%);
  pointer-events: none;
}

.hero-section {
  position: relative;
  padding: 0;
  background: #eef3ff;
}

.hero-carousel {
  position: relative;
}

.hero-slide-link {
  display: block;
}

.hero-slide-image {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .hero-slide-image {
    max-height: 50vh;
    object-fit: cover;
  }
}

.hero-indicators {
  margin-bottom: 1rem;
}

.hero-indicators [data-bs-target] {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 0;
  background-color: rgba(255, 255, 255, 0.6);
}

.hero-indicators .active {
  background-color: var(--accent);
}

.hero-control {
  width: 5rem;
  opacity: 1;
}

.hero-control .carousel-control-prev-icon,
.hero-control .carousel-control-next-icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background-color: rgba(20, 38, 101, 0.35);
  background-size: 45% 45%;
}

.hero-control:hover .carousel-control-prev-icon,
.hero-control:hover .carousel-control-next-icon {
  background-color: rgba(20, 38, 101, 0.5);
}

.hero-kicker {
  color: var(--accent);
  font-size: clamp(2rem, 3vw, 3.3rem);
  font-weight: 800;
  line-height: 0.95;
}

.display-title {
  color: #fff;
  font-weight: 700;
  font-size: clamp(2.8rem, 5vw, 4.9rem);
  line-height: 0.9;
  max-width: 10ch;
}

.display-title span {
  display: block;
}

.hero-copy {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.7vw, 1.55rem);
  font-weight: 600;
  max-width: 34rem;
}

.hero-visual,
.phone-scene {
  position: relative;
  min-height: 22rem;
}

.glow-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.5;
}

.glow-circle-lg {
  width: 15rem;
  height: 15rem;
  right: 3rem;
  top: 0.5rem;
  background: rgba(112, 183, 255, 0.2);
}

.glow-circle-sm {
  width: 8rem;
  height: 8rem;
  right: 0;
  bottom: 2rem;
  background: rgba(255, 153, 0, 0.17);
}

.neighbor-card {
  position: relative;
  z-index: 2;
  width: min(100%, 18rem);
  padding: 1rem 1.05rem 1rem;
  border-radius: 0.9rem;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(135deg, #3047a7, #1b56c7);
  color: #fff;
  margin: 3rem auto 0;
}

.card-icons {
  display: flex;
  gap: 0.45rem;
}

.card-icons span {
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  display: inline-block;
}

.mini-label {
  font-size: 0.75rem;
  color: rgba(255, 182, 82, 0.95);
}

.neighbor-card h2,
.phone-screen h3 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 0.95;
  margin: 0;
}

.card-stripe {
  width: 5.2rem;
  height: 0.42rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb357, #ff8100);
}

.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.67rem;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.85);
}

.mini-badge {
  font-weight: 700;
}

.hero-hand {
  position: absolute;
  right: -0.5rem;
  bottom: 0;
  width: 12rem;
  height: 12rem;
  border-radius: 55% 45% 55% 45%;
  background:
    radial-gradient(circle at 35% 35%, #ffd7bb 0 22%, #f5b990 40%, #c6845a 72%, transparent 73%),
    radial-gradient(circle at 70% 55%, #f4c29b 0 24%, #db9e73 45%, transparent 46%),
    linear-gradient(135deg, rgba(255, 223, 198, 0.95), rgba(213, 144, 97, 0.9));
  filter: drop-shadow(0 20px 24px rgba(13, 46, 146, 0.28));
  transform: rotate(-8deg);
  opacity: 0.95;
}

.content-section {
  padding: 4.7rem 0;
}

.section-heading {
  margin-bottom: 2.4rem;
}

.section-heading h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  margin: 0;
  color: var(--primary-dark);
  font-weight: 700;
}

.section-heading h2 span {
  font-weight: 400;
  opacity: 0.9;
}

.section-link {
  color: var(--primary);
  font-weight: 700;
}

.category-tile {
  height: 100%;
  min-height: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  padding: 1.35rem 0.75rem;
  border-radius: 1.15rem;
  border: 1.5px solid rgba(32, 84, 226, 0.45);
  background: #fff;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.category-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(32, 84, 226, 0.8);
}

.category-tile i {
  font-size: 2rem;
  color: var(--primary);
}

.category-icon-home {
  width: 3.2rem;
  height: 3.2rem;
  object-fit: contain;
}

.category-tile h3 {
  font-size: 0.96rem;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  color: var(--primary);
}


.benefit-card {
  background: #fff;
  border-radius: 1.3rem;
  /* box-shadow: var(--shadow-soft); <-- ELIMINA ESTA LÍNEA */
  
  /* Opcional: Agregar un borde muy sutil para que la tarjeta no se pierda si el fondo es blanco */
  border: 1px solid rgba(54, 67, 101, 0.08); 
  
  overflow: hidden;
  height: 100%;
  
  /* Agregamos una transición suave de 0.3 segundos */
  transition: box-shadow 0.3s ease, transform 0.3s ease; 
}
/* Se activa al pasar el ratón (hover) o al tocar algo dentro en móvil (focus-within) */
.benefit-card:hover,
.benefit-card:focus-within {
  box-shadow: var(--shadow-soft);
  
  /* Opcional: Levantar la tarjeta 4 píxeles hacia arriba crea un efecto 3D muy premium */
  transform: translateY(-4px); 
}

.benefit-media {
  height: 11rem;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.benefit-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.benefit-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 35%, rgba(7, 17, 49, 0.32)),
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent);
}

.media-market {
  background:
    linear-gradient(180deg, transparent 35%, rgba(7, 17, 49, 0.22)),
    linear-gradient(120deg, rgba(255, 255, 255, 0.1), transparent 32%),
    url("img/category/cat-comercio.png") center / cover no-repeat;
}

.media-pharmacy {
  background:
    linear-gradient(180deg, transparent 35%, rgba(7, 17, 49, 0.2)),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 30%),
    url("img/category/cat-bienestar.jpg") center / cover no-repeat;
}

.media-sport {
  background:
    linear-gradient(180deg, transparent 35%, rgba(7, 17, 49, 0.2)),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 30%),
    url("img/category/cat-deporte.jpg") center / cover no-repeat;
}

.benefit-body {
  padding: 1.25rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
}

/* Empuja el botón siempre al fondo de la tarjeta */
.benefit__description {
  flex-grow: 1;
}

.benefit-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: -3.60rem;
  margin-bottom: 0.9rem;
  position: relative;
  z-index: 1;
}

.brand-chip,
.category-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.65rem;
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.brand-chip {
  background: #fff;
  color: var(--primary-dark);
}

.brand-chip-logo {
  min-width: 3.1rem;
  min-height: 3.1rem;
  padding: 0.25rem;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(35, 53, 109, 0.08);
}

.brand-chip-logo img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.category-chip {
  background: var(--accent);
  color: #fff;
}

.benefit-body p {
  font-size: 1.16rem;
  line-height: 1.25;
  margin-bottom: 1.1rem;
}

.benefit-body strong {
  color: var(--primary);
}

.business-panel {
  border-radius: 1.8rem;
  background: #fff;
}

.business-copy {
  height: 100%;
  padding: 3.2rem 2rem 3.2rem 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.business-copy h2 {
  color: var(--primary-dark);
  font-size: clamp(2.3rem, 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 1.2rem;
}

.business-copy p {
  color: var(--text-soft);
  max-width: 22rem;
  font-size: 1.1rem;
  margin-bottom: 1.7rem;
}

.business-visual {
  height: 100%;
  min-height: 27rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(26, 45, 99, 0.08)),
    linear-gradient(135deg, #f5dcb9, #e6bb7d 35%, #ede7dc 35%, #faf4eb 100%);
}

.business-photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.business-photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.download-section {
  padding: 0;
}

.download-banner-link {
  display: block;
}

.download-banner-image {
  display: block;
  width: 100%;
  height: auto;
}

.download-panel {
  border-radius: 0;
  padding: 4rem 0 3rem;
}

.phone-scene {
  min-height: 20rem;
}

.phone-mockup {
  position: absolute;
  right: 4.2rem;
  bottom: 1rem;
  width: 12rem;
  height: 22rem;
  padding: 0.75rem;
  border-radius: 1.7rem;
  background: linear-gradient(145deg, #151515, #343434);
  box-shadow: 0 22px 32px rgba(0, 0, 0, 0.28);
  transform: rotate(-28deg);
  z-index: 2;
}

.phone-notch {
  width: 5.5rem;
  height: 1rem;
  border-radius: 0 0 0.8rem 0.8rem;
  background: #0f0f0f;
  margin: -0.2rem auto 0.2rem;
}

.phone-screen {
  height: calc(100% - 1.2rem);
  border-radius: 1.2rem;
  padding: 1rem 0.8rem;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.1), transparent 20%),
    linear-gradient(160deg, #253472, #0d4ccf);
  color: #fff;
}

.phone-screen h3 {
  font-size: 1.8rem;
}

.phone-hand {
  right: 0;
  bottom: 0;
  width: 12rem;
  height: 12rem;
  transform: rotate(18deg);
}

.site-footer {
  background: #262d63;
  color: rgba(255, 255, 255, 0.92);
  padding: 3.5rem 0;
}

.site-footer .brand-text,
.site-footer h3,
.site-footer a,
.footer-phone {
  color: #fff;
}

.site-footer h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.site-footer p,
.footer-links a {
  font-size: 0.95rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li + li {
  margin-top: 0.45rem;
}

.social-links {
  display: flex;
  gap: 0.7rem;
}

.social-links a {
  width: 2.3rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  font-size: 1.05rem;
}

.form-page {
  min-height: 100vh;
  background: #fff;
}

.form-page-section {
  padding: 2.6rem 0 4.5rem;
}

.form-container {
  max-width: 1120px;
}

.form-container-wide {
  max-width: 1280px;
}

.form-page-header {
  margin-bottom: 3rem;
}

.form-page-header h1 {
  font-size: clamp(2.6rem, 5vw, 4.25rem);
  color: var(--primary-dark);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
}

.form-page-header h1 strong {
  font-weight: 700;
}

.form-page-header p {
  color: var(--primary-dark);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.35;
  margin: 1.6rem 0 0;
}

.tv-form-block + .tv-form-block {
  margin-top: 3.8rem;
}

.tv-form-section-title {
  color: var(--primary-dark);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 1.8rem;
}

.tv-input {
  min-height: 3.25rem;
  border: 1.5px solid rgba(54, 67, 101, 0.28);
  border-radius: 0.9rem;
  padding: 0.8rem 1.15rem;
  font-size: 1rem;
  color: var(--text-main);
  box-shadow: none;
}

.tv-input::placeholder {
  color: rgba(62, 69, 89, 0.7);
}

.tv-input:focus {
  border-color: rgba(13, 76, 207, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(13, 76, 207, 0.08);
}

.tv-textarea {
  min-height: 9rem;
  border-radius: 1.1rem;
  resize: vertical;
}

.tv-input.is-valid,
.tv-input.is-valid:focus {
  border-color: rgba(17, 146, 88, 0.6);
  background-color: rgba(17, 146, 88, 0.03);
  box-shadow: 0 0 0 0.2rem rgba(17, 146, 88, 0.06);
}

.tv-input.is-invalid,
.tv-input.is-invalid:focus {
  border-color: rgba(218, 52, 77, 0.58);
  background-color: rgba(218, 52, 77, 0.03);
  box-shadow: 0 0 0 0.2rem rgba(218, 52, 77, 0.06);
}

.tv-field-message,
.tv-check-message {
  min-height: 1rem;
  margin-top: 0.45rem;
  font-size: 0.88rem;
  color: #d6344d;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.tv-field-message.is-visible,
.tv-check-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tv-upload-wrap {
  max-width: 100%;
}

.tv-upload-label {
  display: block;
  color: rgba(62, 69, 89, 0.76);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.tv-upload-control {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3rem;
  border: 1.5px solid rgba(54, 67, 101, 0.28);
  border-radius: 0.85rem;
  overflow: hidden;
  background: #fff;
}

.tv-upload-control.is-valid,
.tv-upload-inline.is-valid {
  border-color: rgba(17, 146, 88, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(17, 146, 88, 0.05);
}

.tv-upload-control.is-invalid,
.tv-upload-inline.is-invalid {
  border-color: rgba(218, 52, 77, 0.58);
  box-shadow: 0 0 0 0.2rem rgba(218, 52, 77, 0.05);
}

.tv-upload-control input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.tv-upload-button {
  background: #1b2a5f;
  color: #fff;
  font-weight: 600;
  padding: 0.9rem 1.3rem;
  min-width: 13rem;
  text-align: center;
}

.tv-upload-placeholder {
  padding: 0 1rem;
  color: rgba(62, 69, 89, 0.75);
}

.tv-form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 3rem;
  color: rgba(35, 49, 93, 0.82);
}

.tv-form-check .form-check-input {
  margin-top: 0.15rem;
  width: 1.35rem;
  height: 1.35rem;
  border-color: rgba(54, 67, 101, 0.35);
  border-radius: 0.1rem;
  box-shadow: none;
}

.tv-form-check .form-check-input.is-valid {
  border-color: rgba(17, 146, 88, 0.6);
  background-color: rgba(17, 146, 88, 0.08);
}

.tv-form-check .form-check-input.is-invalid {
  border-color: rgba(218, 52, 77, 0.58);
  background-color: rgba(218, 52, 77, 0.08);
}

.tv-form-check label {
  line-height: 1.35;
}

.tv-form-check label.is-error {
  color: #b82844;
}

.tv-form-check a {
  color: var(--primary);
  font-weight: 700;
}

.tv-form-actions {
  margin-top: 2rem;
}

.tv-request-note {
  background: rgba(13, 76, 207, 0.05);
  border: 1px solid rgba(13, 76, 207, 0.12);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
}

.tv-request-note p {
  margin: 0;
  color: rgba(35, 49, 93, 0.84);
  line-height: 1.45;
}

.tv-form-status {
  display: none;
  margin-bottom: 1.5rem;
  padding: 0.95rem 1.1rem;
  border-radius: 0.95rem;
  font-size: 0.95rem;
  line-height: 1.35;
}

.tv-form-status.is-error,
.tv-form-status.is-success {
  display: block;
}

.tv-form-status.is-error {
  background: rgba(218, 52, 77, 0.08);
  color: #b82844;
  border: 1px solid rgba(218, 52, 77, 0.16);
}

.tv-form-status.is-success {
  background: rgba(17, 146, 88, 0.08);
  color: #0d6a40;
  border: 1px solid rgba(17, 146, 88, 0.16);
}

.tv-submit-btn {
  min-width: 23rem;
  text-transform: uppercase;
  font-size: 0.95rem;
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
}

.tv-upload-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tv-upload-inline {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1.6fr;
  align-items: center;
  min-height: 2.95rem;
  border: 1.5px solid rgba(54, 67, 101, 0.28);
  border-radius: 0.8rem;
  overflow: hidden;
  background: #fff;
}

.tv-upload-inline input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.tv-upload-inline-button {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.8rem;
  background: #efefef;
  color: rgba(62, 69, 89, 0.76);
  border-right: 1px solid rgba(54, 67, 101, 0.18);
}

.tv-upload-inline-label {
  padding: 0 1rem;
  color: rgba(62, 69, 89, 0.76);
}

.tv-upload-preview {
  min-height: 7rem;
  border: 1.5px solid rgba(54, 67, 101, 0.28);
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(62, 69, 89, 0.76);
  text-align: center;
  padding: 1rem;
}

.tv-dual-copy {
  margin-bottom: 1rem;
}

.tv-dual-copy h2 {
  color: var(--primary-dark);
  font-size: clamp(1.7rem, 2.5vw, 2.45rem);
  font-weight: 700;
  margin: 0 0 1rem;
}

.tv-dual-copy p {
  color: var(--primary-dark);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.25;
  margin: 0;
}

.tv-form-card {
  border: 1.5px solid rgba(54, 67, 101, 0.28);
  padding: 2.2rem;
 /* min-height: 33rem; */
  display: flex;
  flex-direction: column;
}

.tv-form-card h3 {
  text-align: center;
  color: var(--primary-dark);
  font-size: 1.05rem;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 2rem;
}

.tv-form-card h3 strong {
  font-weight: 700;
}

.tv-input-compact {
  min-height: 2.75rem;
  border-radius: 0.8rem;
}

.tv-form-check-compact {
  margin-top: auto;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.results-page {
  min-height: 100vh;
  background: #fff;
}

.results-page-section {
  padding: 3rem 0 4.5rem;
}

.results-header {
  text-align: center;
  margin-bottom: 2.2rem;
}

.results-header h1 {
  color: var(--primary-dark);
  font-size: clamp(2.8rem, 4vw, 4.2rem);
  font-weight: 700;
  margin: 0;
}

.results-filters {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1.9fr auto;
  gap: 1.1rem;
  align-items: end;
  margin-bottom: 3.6rem;
}

.results-filter-group label {
  display: block;
  color: rgba(35, 49, 93, 0.85);
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}

.results-select,
.results-search-input {
  min-height: 3rem;
  border: 1.5px solid rgba(36, 49, 109, 0.55);
  border-radius: 999px;
  color: var(--text-main);
  box-shadow: none;
}

.results-select {
  padding-left: 1rem;
}

.results-search-wrap {
  position: relative;
}

.results-search-input {
  padding-inline: 1rem 3.6rem;
}

.results-search-input:focus,
.results-select:focus {
  border-color: rgba(13, 76, 207, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(13, 76, 207, 0.08);
}

.results-search-btn {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 2.7rem;
  height: 2.7rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--primary-dark);
  font-size: 1.35rem;
}

.results-filter-action {
  display: flex;
  justify-content: flex-end;
}

.results-apply-btn {
  min-width: 7.2rem;
  padding-inline: 1.7rem;
}

.results-grid {
  --bs-gutter-y: 2rem;
}

.results-card {
  background: #fff;
  border: 1px solid rgba(36, 49, 109, 0.18);
  border-radius: 1rem;
  overflow: hidden;
  height: 100%;
}

.results-card-media {
  position: relative;
  height: 13rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.results-media-chip {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.results-brand-mark {
  position: absolute;
  left: 1rem;
  bottom: -2.4rem;
  z-index: 2;
  min-width: 4.2rem;
  min-height: 4.2rem;
  padding: 0.25rem;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--primary-dark);
  box-shadow: 0 12px 26px rgba(35, 53, 109, 0.14);
}

.results-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}

.result-media-health {
  background:
    linear-gradient(180deg, transparent 45%, rgba(36, 49, 109, 0.18)),
    linear-gradient(120deg, rgba(255, 255, 255, 0.1), transparent 32%),
    url("img/category/cat-salud.jpg") center / cover no-repeat;
}

.result-media-services {
  background:
    linear-gradient(180deg, transparent 45%, rgba(36, 49, 109, 0.18)),
    linear-gradient(120deg, rgba(255, 255, 255, 0.1), transparent 28%),
    url("img/category/cat-servicios.jpg") center / cover no-repeat;
}

.result-media-gastro {
  background:
    linear-gradient(180deg, transparent 42%, rgba(36, 49, 109, 0.14)),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 30%),
    url("img/category/cat-gastrpnomia.jpg") center / cover no-repeat;
}

.result-media-commerce {
  background:
    linear-gradient(180deg, transparent 42%, rgba(36, 49, 109, 0.14)),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 30%),
    url("img/category/cat-comercio.png") center / cover no-repeat;
}

.result-media-sport {
  background:
    linear-gradient(180deg, transparent 42%, rgba(36, 49, 109, 0.14)),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 30%),
    url("img/category/cat-deporte.jpg") center / cover no-repeat;
}

.result-media-wellness {
  background:
    linear-gradient(180deg, transparent 42%, rgba(36, 49, 109, 0.14)),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 30%),
    url("img/category/cat-bienestar.jpg") center / cover no-repeat;
}

.results-card-body {
  padding: 3.35rem 1rem 1.2rem;
}

.results-card-body p {
  font-size: 1.02rem;
  line-height: 1.28;
  margin-bottom: 0.8rem;
}

.results-card-body strong {
  color: var(--primary);
}

.results-card-body small {
  display: block;
  color: rgba(35, 49, 93, 0.78);
  font-size: 0.86rem;
  line-height: 1.3;
  margin-bottom: 1.35rem;
}

.results-card-btn {
  min-width: 10.2rem;
  display: inline-flex;
  justify-content: center;
}

.results-pagination {
  margin-top: 2.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
}

.results-page-link,
.results-page-arrow,
.results-page-dots {
  color: rgba(35, 49, 93, 0.8);
  font-size: 0.92rem;
}

.results-page-link {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.results-page-link.is-active {
  background: var(--primary-dark);
  color: #fff;
}

/* ── results-card: imagen full-bleed del beneficio ── */
.results-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── results-brand-mark: logo de empresa, pequeño y circular ── */
.results-brand-mark {
  position: absolute;
  left: 1rem;
  bottom: -1.4rem;
  z-index: 2;
  width: 2.8rem;
  height: 2.8rem;
  min-width: unset;
  min-height: unset;
  padding: 0.18rem;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(35, 53, 109, 0.18);
}

.results-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}

/* ── Ajuste del cuerpo cuando hay logo pequeño ── */
.results-card-body {
  padding-top: 2rem;
}

/* ── Botón flotante "Ir arriba" ── */
.btn-top {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  z-index: 999;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--primary-dark, #24316d);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 16px rgba(35, 53, 109, 0.3);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}

.btn-top:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.benefit-detail-page {
  min-height: 100vh;
  background: #fff;
}

.benefit-detail-hero {
  padding: 4rem 0 2.5rem;
}

.benefit-detail-copy h1 {
  color: var(--primary-dark);
  font-size: clamp(2.15rem, 3.4vw, 3.35rem);
  line-height: 1.07;
  margin: 0 0 1.8rem;
  max-width: 11ch;
}

.benefit-detail-copy p {
  color: rgba(35, 49, 93, 0.84);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.35;
  max-width: 32rem;
  margin: 0;
}

.benefit-detail-visual {
  min-height: 29rem;
  border-radius: 2.2rem;
  overflow: hidden;
  position: relative;
}

.benefit-detail-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.benefit-related-section {
  padding-top: 2.2rem;
  padding-bottom: 5rem;
}

@media (max-width: 991.98px) {
  .col-xl-20 {
    width: auto;
  }

  .content-section,
  .download-panel {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .display-title {
    max-width: none;
  }

  .hero-visual,
  .phone-scene {
    min-height: 18rem;
  }

  .phone-mockup {
    right: 1rem;
    width: 10rem;
    height: 18rem;
  }

  .business-copy {
    padding-bottom: 0;
  }

  .tv-submit-btn {
    min-width: 100%;
  }

  .tv-form-card {
    min-height: auto;
  }

  .results-filters {
    grid-template-columns: 1fr 1fr;
  }

  .results-filter-search,
  .results-filter-action {
    grid-column: span 2;
  }

  .results-filter-action {
    justify-content: flex-start;
  }

  .benefit-detail-copy h1,
  .benefit-detail-copy p {
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  .site-footer [class*="col-"] {
    width: 100%;
    flex: 0 0 auto;
  }

  .benefit-detail-hero {
    padding: 2.5rem 0 1.5rem;
  }

  .benefit-detail-copy h1 {
    margin-bottom: 1.2rem;
  }

  .benefit-detail-visual {
    min-height: 18rem;
    border-radius: 1.5rem;
  }

  .categories-page-section {
    padding-top: 2.2rem;
    padding-bottom: 3rem;
  }

  .categories-page-section .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section-heading-wide {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 1.6rem;
    gap: 0.4rem !important;
  }

  .section-heading-wide h1 {
    font-size: 2.15rem;
    line-height: 1.05;
  }

  .section-heading-wide .section-link {
    display: none;
  }

  .categories-grid {
    --bs-gutter-x: 0.9rem;
    --bs-gutter-y: 1rem;
  }

  .categories-grid > [class*="col-"] {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    width: 50%;
    flex: 0 0 auto;
  }

  .results-page-section {
    padding: 2.2rem 0 3rem;
  }

  .results-header {
    margin-bottom: 1.7rem;
  }

  .results-filters {
    grid-template-columns: 1fr;
    margin-bottom: 2.5rem;
  }

  .results-filter-search,
  .results-filter-action {
    grid-column: auto;
  }

  .results-apply-btn {
    width: 100%;
  }

  .results-card-media {
    height: 11.5rem;
  }

  .form-page-section {
    padding: 2rem 0 3rem;
  }

  .form-page-header {
    margin-bottom: 2rem;
  }

  .tv-form-block + .tv-form-block {
    margin-top: 2.6rem;
  }

  .tv-upload-button {
    min-width: 9rem;
    padding-inline: 1rem;
  }

  .tv-upload-inline {
    grid-template-columns: 1fr;
  }

  .tv-upload-inline-button,
  .tv-upload-inline-label {
    min-height: 2.7rem;
  }

  .tv-form-card {
    padding: 2rem 1.2rem 1.5rem;
  }

  .category-tile-page {
    min-height: 8.6rem;
    padding: 1rem 0.55rem 0.85rem;
    border-radius: 1rem;
    gap: 0.7rem;
  }

  .category-icon-svg {
    width: 2.7rem;
    height: 2.7rem;
  }

  .category-icon-municipal {
    width: 3.35rem;
    height: 2.1rem;
  }

  .category-icon-plus {
    width: 2.2rem;
    height: 2.2rem;
  }

  .category-tile-page h3 {
    font-size: 0.75rem;
    line-height: 1.18;
    max-width: 9ch;
    text-align: center;
  }

  .navbar-collapse {
    padding-top: 1rem;
  }

  .hero-indicators {
    margin-bottom: 0.5rem;
  }

  .hero-control {
    width: 3.5rem;
  }

  .hero-copy {
    margin-inline: auto;
  }

  .download-panel .btn-pill {
    width: 100%;
  }

  .hero-hand,
  .phone-hand {
    width: 8rem;
    height: 8rem;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 1.8rem;
  }

  .benefit-body p {
    font-size: 1.02rem;
  }

  .business-panel {
    border-radius: 1.3rem;
  }

  .business-visual {
    min-height: 20rem;
  }
}

.block-header-2 {
    border-radius: 8px;
    padding: 20px;
    background: #1c6bc9;
    background: #0e348e;
    background: -moz-linear-gradient(45deg,rgba(14,52,142,1) 0%,rgba(67,114,226,1) 84%);
    background: -webkit-linear-gradient(45deg, rgba(14, 52, 142, 1) 0%, rgba(67, 114, 226, 1) 84%);
    background: linear-gradient(45deg, rgba(14, 52, 142, 1) 0%, rgba(67, 114, 226, 1) 84%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e348e",endColorstr="#4372e2",GradientType=1);
    font-family: "Open Sans", sans-serif;
}


/* ── Menú de login / sesión ── */
.nav-login-dropdown {
  position: relative;
}

/* Sin sesión: botón "Ingresar" — hereda .btn-pill .btn-primary, solo ajuste de caret */
.nav-login-btn.dropdown-toggle::after {
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Con sesión: solo icono + caret, sin fondo ni borde */
.nav-login-toggle--auth {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0.1rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s;
}

.nav-login-toggle--auth:hover,
.nav-login-toggle--auth[aria-expanded="true"] {
  opacity: 0.8;
}

/* Caret del toggle autenticado */
.nav-login-toggle--auth.dropdown-toggle::after {
  font-size: 0.75rem;
  vertical-align: middle;
  margin-left: 0.1rem;
}

.nav-login-menu {
  min-width: 180px;
  border-radius: 0.85rem;
  border: 1px solid rgba(54, 67, 101, 0.15);
  box-shadow: 0 6px 24px rgba(32, 48, 90, 0.12);
  padding: 0.5rem 0;
  margin-top: 0.35rem;
}

.nav-login-menu .dropdown-item {
  padding: 0.6rem 1.1rem;
  font-size: 0.92rem;
  border-radius: 0.5rem;
  margin: 0 0.3rem;
  width: auto;
}

.nav-login-menu .dropdown-item:hover {
  background: rgba(13, 76, 207, 0.07);
}

.nav-login-menu .dropdown-item.text-danger:hover {
  background: rgba(218, 52, 77, 0.07);
}

/* ── */
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #fff;
    text-decoration: underline;
}

/* --- Fix para las sombras cortadas en el Slider Splide --- */
.splide__track {
  /* Le damos casi 50px abajo para que tu --shadow-soft quepa perfecta */
  padding-bottom: 50px !important; 
  /* Le damos un poco de margen arriba para evitar cortes sutiles superiores */
  padding-top: 15px !important; 
  padding-left: 20px !important;
  padding-right: 20px !important;
  
  -webkit-mask-image: linear-gradient(
    to right, 
    transparent 0px,      /* Borde izquierdo totalmente transparente */
    black 20px,           /* A los 20px ya es 100% visible */
    black calc(100% - 20px), /* Se mantiene visible hasta 20px antes del final */
    transparent 100%      /* Borde derecho totalmente transparente */
  );
  
  mask-image: linear-gradient(
    to right, 
    transparent 0px, 
    black 20px, 
    black calc(100% - 20px), 
    transparent 100%
  );
}

/* Opcional: Ajuste fino para la paginación */
/* Como empujamos el track hacia abajo, los puntitos (dots) podrían quedar muy pegados, puedes bajarlos un poco */
.splide__pagination {
  bottom: -1rem; 
}

.splide__arrow.splide__arrow--prev{
  margin-left: -15px; /* Ajusta este valor según tu diseño */
}
.splide__arrow.splide__arrow--next{
  margin-right: -15px; /* Ajusta este valor según tu diseño */
}

/* --- Estilos personalizados para las flechas de Splide --- */
.splide__arrow {
  /* Usamos los colores de tus variables root */
  background: var(--primary-dark) !important; 
  opacity: 1 !important; /* Quitamos el estilo semitransparente por defecto */
  
  /* Tamaño de los botones */
  width: 2.8rem !important; 
  height: 2.8rem !important;
  
  /* CORRECCIÓN DE POSICIÓN: 
     Compensamos el padding inferior de las sombras que agregamos antes 
     (Si sientes que están muy arriba o abajo, ajusta este -20px) */
  transform: translateY(calc(-50% - 20px)) !important; 
  
  transition: all 0.2s ease !important;
}

/* Color del icono (SVG) de la flecha */
.splide__arrow svg {
  fill: #ffffff !important; 
  width: 1.2rem !important;
  height: 1.2rem !important;
}

/* Efecto Hover (al pasar el ratón) */
.splide__arrow:hover:not(:disabled) {
  background: var(--accent) !important; /* Se vuelve naranja */
  /* Mantenemos la corrección de posición y lo hacemos crecer un poquito */
  transform: translateY(calc(-50% - 20px)) scale(1.08) !important;
}

/* Flechas deshabilitadas (ej. al llegar al final del slider) */
.splide__arrow:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed;
}

/* (Opcional) Separar las flechas un poco hacia afuera de las tarjetas */
.splide__arrow--prev { left: -1rem !important; }
.splide__arrow--next { right: -1rem !important; }
#beneficios-slider .splide__pagination{ bottom: 0.5rem !important; }


/*CUSTOM FOOTER*/
.site-footer-tvp {
    background: #222b61;
    color: #ffffff;
    padding: 80px 0 38px;
    font-family: Arial, Helvetica, sans-serif;
}

.footer-tvp-container {
    max-width: 1680px;
}

.footer-tvp-row {
    align-items: flex-start;
}

.footer-tvp-col {
    padding-left: 36px;
    padding-right: 36px;
}

.footer-tvp-brand {
    text-align: center;
    padding-top: 12px;
}

.footer-tvp-logo {
    max-width: 210px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 70px;
}

.footer-tvp-initiative {
    font-size: 22px;
    line-height: 1.18;
    font-weight: 400;
    margin: 0;
}

.footer-tvp-col h3 {
    color: #ffffff;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 24px;
}

.footer-tvp-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
    margin-bottom: 28px;
}

.footer-tvp-col p {
    color: #ffffff;
    font-size: 21px;
    line-height: 1.35;
    margin: 0 0 7px;
}

.footer-tvp-col strong {
    font-weight: 800;
}

.footer-tvp-col a {
    color: #ffffff;
    text-decoration: none;
}

.footer-tvp-col a:hover {
    text-decoration: underline;
}

.footer-tvp-follow {
    color: #ff8c1a !important;
    font-style: italic;
    font-weight: 800;
    margin-top: 24px !important;
    margin-bottom: 20px !important;
}

.footer-tvp-social {
    display: flex;
    gap: 22px;
    align-items: center;
}

.footer-tvp-social a {
    width: 44px;
    height: 44px;
    background: #ffffff;
    color: #222b61;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    text-decoration: none;
    transition: transform .2s ease, opacity .2s ease;
}

.footer-tvp-social a:hover {
    transform: translateY(-2px);
    opacity: .9;
    text-decoration: none;
}

.footer-tvp-card h4 {
    color: #ff8c1a;
    font-size: 30px;
    line-height: 1;
    font-weight: 400 !important;
    margin: 0 0 8px;
}

.footer-tvp-card h2 {
    color: #ffffff;
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
    margin: 0 0 34px;
}

.footer-tvp-card p {
    font-size: 21px;
    line-height: 1.28;
    margin-bottom: 22px;
}

.footer-tvp-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-tvp-card li {
    margin-bottom: 16px;
}

.footer-tvp-card li a {
    color: #00c8ff;
    font-size: 21px;
    font-weight: 800;
    text-decoration: none;
}

.footer-tvp-card li a:hover {
    text-decoration: underline;
}

.footer-tvp-separator {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.48);
    margin: 58px 0 48px;
}

.footer-tvp-bottom {
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    letter-spacing: .4px;
}

/* Responsive */
@media (max-width: 991px) {
    .site-footer-tvp {
        padding: 50px 0 32px;
    }

    .footer-tvp-col {
        padding-left: 18px;
        padding-right: 18px;
        margin-bottom: 42px;
    }

    .footer-tvp-brand {
        text-align: left;
    }

    .footer-tvp-logo {
        margin: 0 0 32px;
        max-width: 190px;
    }

    .footer-tvp-initiative {
        font-size: 20px;
    }

    .footer-tvp-col h3 {
        font-size: 23px;
    }

    .footer-tvp-col p,
    .footer-tvp-card p,
    .footer-tvp-card li a {
        font-size: 19px;
    }

    .footer-tvp-card h2 {
        font-size: 38px;
    }

    .footer-tvp-card h4 {
        font-size: 28px;
    }
}

@media (max-width: 575px) {
    .footer-tvp-brand {
        text-align: center;
    }

    .footer-tvp-logo {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-tvp-col {
        text-align: left;
    }

    .footer-tvp-social {
        justify-content: flex-start;
    }

    .footer-tvp-bottom {
        font-size: 13px;
        line-height: 1.4;
        padding: 0 18px;
    }
}
/*END CUSTOM FOOTER*/