/* ============================================================
   EXHIBICIÓN FRONTERA COMALAPA
   style.css - Versión limpia / consolidada
   Mantiene el diseño visual aprobado y elimina parches antiguos.
============================================================ */


/* ============================================================
   1. CONFIGURACIÓN GENERAL
============================================================ */

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

body {
  font-family: Arial, sans-serif;
  color: #1f2937;
  background:
    radial-gradient(circle at 15% 25%, rgba(104, 153, 193, .10), transparent 28%),
    radial-gradient(circle at 85% 70%, rgba(135, 149, 0, .07), transparent 30%),
    #f2f3f2;
}


/* ============================================================
   2. PORTADA / HERO
============================================================ */

.hero {
  min-height: 420px;
  position: relative;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 50px 60px 30px;
  margin-bottom: 0;

  background-image:
    linear-gradient(
      90deg,
      rgba(9, 12, 18, 0.45) 0%,
      rgba(9, 12, 18, 0.28) 42%,
      rgba(9, 12, 18, 0.08) 72%,
      rgba(9, 12, 18, 0.02) 100%
    ),
    url("imagenes/comalapa.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30px;
  background: linear-gradient(to bottom, transparent, rgba(246,247,249,.96));
  pointer-events: none;
}

.overlay {
  width: 100%;
  height: 340px;
  max-width: none;
  position: relative;
  z-index: 2;
  text-align: left;
}

.hero h1 {
  margin: 0;
  max-width: 750px;
  font-size: 68px;
  line-height: .92;
  letter-spacing: -2px;
  font-weight: 900;
  text-align: left;
  text-shadow: 0 4px 18px rgba(0,0,0,.45);
}

.hero h1::first-line {
  color: #ffb300;
}

.hero p {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 92%;
  max-width: 900px;
  margin: 0;
  text-align: center;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  color: #fff;

  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 3px 10px rgba(0,0,0,.85);
}


/* ============================================================
   3. BUSCADOR
============================================================ */

.buscador-contenedor {
  max-width: 820px;
  margin: -28px auto 8px;
  padding: 0 18px;
  position: relative;
  z-index: 5;
}

#buscador {
  width: 100%;
  padding: 19px 24px;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 38px rgba(17,24,39,.14);
  font-size: 17px;
  outline: none;
}

#buscador:focus {
  box-shadow:
    0 18px 44px rgba(17,24,39,.15),
    0 0 0 4px rgba(255,179,0,.18);
}


/* ============================================================
   4. BOTONES GENERALES
============================================================ */

.btn-principal,
.btn-registro,
.btn-whatsapp,
.btn-volver {
  display: inline-block;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 30px;
  font-weight: bold;
  transition: .3s;
  border: none;
  cursor: pointer;
}

.btn-principal,
.btn-registro {
  background: #ffb300;
  color: #111;
}

.btn-whatsapp {
  background: #25d366;
  color: #fff;
}

.btn-volver {
  background: #111;
  color: #ffb300;
}

.btn-principal:hover,
.btn-registro:hover,
.btn-whatsapp:hover,
.btn-volver:hover {
  transform: scale(1.05);
}


/* ============================================================
   5. SECCIONES / TÍTULOS
============================================================ */

.destacados,
.categorias,
.resultado,
.registro {
  padding: 44px 20px;
  text-align: center;
}

h2 {
  margin-bottom: 25px;
  color: #1f2937;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.5px;
}


/* ============================================================
   6. TARJETAS GENERALES / RESULTADOS
============================================================ */

.cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: auto;
  gap: 22px;
}

.card {
  position: relative;
  overflow: hidden;
  width: 300px;
  padding: 26px;
  border-radius: 22px;
  border: 1px solid rgba(17,24,39,.07);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,250,252,.94));
  box-shadow: 0 12px 30px rgba(17,24,39,.10);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.card::after {
  content: "";
  position: absolute;
  inset: auto -30px -45px auto;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255,179,0,.08);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 45px rgba(17,24,39,.15);
  border-color: rgba(255,179,0,.42);
}

.card h3 {
  margin-bottom: 10px;
  color: #111827;
  font-size: 21px;
  line-height: 1.22;
  position: relative;
  z-index: 1;
}

.card p {
  margin-bottom: 18px;
  color: #5f6672;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

.card .btn-whatsapp {
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 20px rgba(37,211,102,.22);
}

.card-premium {
  position: relative;
  border: 2px solid rgba(255,179,0,.85);
  background: linear-gradient(145deg, #fffdf6, #fff7df);
}

.card-premium::before {
  content: "⭐ DESTACADO";
  position: absolute;
  top: 14px;
  right: 14px;
  background: #ffb300;
  color: #111;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 5px 14px rgba(255,179,0,.28);
}

.resultado .card {
  background: linear-gradient(145deg, #fff, #f8fafc);
}

.resultado .card h3 {
  color: #b77900;
}


/* ============================================================
   7. CATEGORÍAS
============================================================ */

.grid-categorias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1040px;
  margin: auto;
  gap: 16px;
}

.categoria {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  padding: 19px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #6f91aa 0%, #58758c 100%) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.32);
  box-shadow:
    0 8px 18px rgba(46, 61, 73, .13),
    inset 0 1px 0 rgba(255,255,255,.18);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease;
}

.categoria::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 5px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #b49552, #7e8c20);
}

.categoria::after {
  content: "";
  position: absolute;
  width: 105px;
  height: 105px;
  right: -42px;
  bottom: -48px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
}

.categoria:hover {
  transform: translateY(-6px) scale(1.015);
  color: #fff !important;
  border-color: #b89a55;
  filter: brightness(1.07);
  box-shadow:
    0 16px 28px rgba(46, 61, 73, .23),
    0 0 0 3px rgba(180, 149, 82, .12);
}

.categoria *,
.categoria:hover * {
  color: inherit !important;
}

.categoria-premium {
  background: linear-gradient(135deg, #52687a, #394d5e) !important;
  border-color: rgba(180,149,82,.65);
}


/* ============================================================
   8. PERFIL DE NEGOCIO
============================================================ */

/* ============================================================
   PERFIL DE NEGOCIO
   PLANTILLA OFICIAL EXHIBICIÓN v1.0
============================================================ */

.perfil-negocio {
  background: white;
  width: 95%;
  max-width: 1100px;
  margin: 25px auto;
  border-radius: 24px;
  box-shadow: 0 16px 45px rgba(0,0,0,0.14);
  overflow: hidden;
  text-align: left;
}

.perfil-oficial {
  position: relative;
}

.btn-regresar-perfil {
  margin: 18px 18px 10px;
  background: white;
  color: #111;
  border: none;
  border-radius: 15px;
  padding: 12px 18px;
  font-weight: bold;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  cursor: pointer;
}

.perfil-hero-oficial {
  position: relative;
  width: calc(100% - 36px);
  aspect-ratio: 16 / 5;
  height: auto;
  margin: 0 18px;
  border-radius: 18px;
  overflow: hidden;
  background: #eee;
}

.perfil-hero-oficial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.badge-verificado {
  position: absolute;
  top: 18px;
  left: 18px;
  background: #16b66a;
  color: white;
  padding: 10px 15px;
  border-radius: 13px;
  font-weight: bold;
  font-size: 14px;
}

.perfil-cabecera-oficial {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 32px;
  margin-top: 0px;
  position: relative;
  z-index: 2;
}

.perfil-logo-oficial {
  width: 130px;
  height: 130px;
  background: #fff;
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.20);
  flex-shrink: 0;
  overflow: hidden;
  border: 5px solid #fff;
  margin-top: -75px;
  position: relative;
  z-index: 5;
}

.perfil-logo-oficial img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}


.perfil-titulo-oficial h3 {
  color: #111827;
  font-size: 36px;
  line-height: 1.1;
  margin-bottom: 6px;
}

.perfil-subtitulo {
  color: #666;
  font-size: 16px;
}

.perfil-contenido-oficial {
  padding: 28px 32px 34px;
}

.perfil-descripcion-oficial {
  margin-bottom: 24px;
}

.perfil-descripcion-oficial p {
  font-size: 18px;
  line-height: 1.6;
  color: #222;
}

.perfil-acciones-oficial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.perfil-acciones-oficial .accion {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
  padding: 9px 10px;
  gap: 8px;
  border-radius: 14px;
  text-decoration: none;
  color: white;
}

.perfil-acciones-oficial .accion span {
  font-size: 20px;
  flex-shrink: 0;
}

.perfil-acciones-oficial .accion strong {
  display: block;
  font-size: 12px;
  line-height: 1.1;
}

.perfil-acciones-oficial .accion small {
  display: block;
  font-size: 9px;
  line-height: 1.1;
}

.accion-whatsapp,
.accion-delivery {
  background: linear-gradient(135deg, #17c964, #00a854);
}

.accion-maps {
  background: linear-gradient(135deg, #3b82f6, #0756c8);
}

.accion-video {
  background: linear-gradient(135deg, #ff3131, #c90000);
}

.perfil-detalles-oficial {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 28px 0;
}

.detalle-card {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 18px;
}

.detalle-card h4 {
  color: #087f45;
  margin-bottom: 10px;
  font-size: 17px;
}

.detalle-card p {
  color: #222;
  line-height: 1.5;
}

.perfil-seccion {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 20px;
  margin-top: 22px;
}

.perfil-seccion h4 {
  color: #087f45;
  margin-bottom: 18px;
  font-size: 20px;
}

.servicios-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.servicios-pills span {
  background: #f1f1f1;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 15px;
}
.perfil-galeria-fotos {
  margin: 25px 0;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 18px;
}

.perfil-galeria-fotos h4 {
  color: #087f45;
  margin-bottom: 15px;
  font-size: 20px;
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.galeria-grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
}
/* ============================================================
   PERFIL OFICIAL - MÓVIL
============================================================ */

@media (max-width: 768px) {
  .perfil-negocio {
    width: 96%;
    border-radius: 20px;
    margin: 18px auto;
  }

  .btn-regresar-perfil {
    margin: 12px;
    width: calc(100% - 24px);
  }

  .perfil-hero-oficial {
    height: 185px;
    margin: 0 12px;
    border-radius: 16px;
  }

  .badge-verificado {
    top: 12px;
    left: 12px;
    font-size: 12px;
    padding: 8px 11px;
  }

  .perfil-cabecera-oficial {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 0 18px;
    margin-top: -45px;
  }

  .perfil-logo-oficial {
    width: 105px;
    height: 105px;
  }

  .perfil-titulo-oficial {
    padding-top: 0;
  }

  .perfil-titulo-oficial h3 {
    font-size: 25px;
  }

  .perfil-contenido-oficial {
    padding: 20px 18px 26px;
  }

  .perfil-descripcion-oficial p {
    font-size: 16px;
    text-align: center;
  }

  .perfil-acciones-oficial {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

  .accion {
    min-height: 58px;
}

  .perfil-detalles-oficial {
    grid-template-columns: 1fr;
  }

  .servicios-pills {
    justify-content: center;
  }
}



/* Ajustes finales del perfil en móvil */
@media (max-width: 600px) {
  .perfil-cabecera-oficial {
    margin-top: 0;
    padding-top: 15px;
  }

  .perfil-titulo-oficial h3 {
    font-size: 22px;
    line-height: 1.15;
  }

  .perfil-hero-oficial img {
    object-fit: contain;
    background: #fff;
  }

  .galeria-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
    touch-action: pan-y pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .galeria-grid::-webkit-scrollbar {
    display: none;
  }

  .galeria-grid img {
    min-width: 220px;
    width: 220px;
    height: 150px;
    object-fit: cover;
    border-radius: 14px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}


/* ============================================================
   9. BOTONES DEL PERFIL / REDES
============================================================ */

.perfil-acciones-oficial .accion {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.perfil-acciones-oficial .accion:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
  box-shadow: 0 10px 20px rgba(17,24,39,.16);
}

.accion-telefono {
  background: linear-gradient(135deg, #64748b, #40556f);
}

.accion-facebook {
  background: linear-gradient(135deg, #1877f2, #0f5ec8);
}

.accion-instagram {
  background: linear-gradient(135deg, #c13584, #833ab4 55%, #e1306c);
}

.accion-tiktok {
  background: linear-gradient(135deg, #222831, #050505);
}

.accion-web {
  background: linear-gradient(135deg, #6f91aa, #4c6f89);
}

.accion-facebook > span,
.accion-instagram > span,
.accion-tiktok > span {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.16);
  font-weight: 900;
  font-family: Arial, sans-serif;
}

@media (max-width: 600px) {
  .perfil-acciones-oficial .accion {
    min-width: 0;
  }

  .perfil-acciones-oficial .accion strong,
  .perfil-acciones-oficial .accion small {
    overflow-wrap: anywhere;
  }
}


/* ============================================================
   10. LIGHTBOX / GALERÍA AMPLIADA
============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.lightbox img {
  max-width: 95%;
  max-height: 85vh;
  border-radius: 16px;
}

.lightbox-cerrar {
  position: fixed;
  top: 18px;
  right: 22px;
  background: white;
  border: none;
  font-size: 32px;
  border-radius: 50%;
  width: 46px;
  height: 46px;
}
.lightbox-anterior,
.lightbox-siguiente {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.9);
  color: #111;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
}

.lightbox-anterior {
  left: 22px;
}

.lightbox-siguiente {
  right: 22px;
}
.lightbox-contador {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.65);
  color: white;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: bold;
  z-index: 10000;
}
.lightbox img,
.galeria-grid img {
  user-select: none;
  -webkit-user-drag: none;
}

.galeria-grid {
  touch-action: pan-y pan-x;
  -webkit-overflow-scrolling: touch;
}


/* ============================================================
   11. REGISTRO Y FOOTER
============================================================ */

.registro {
  color: #fff;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,179,0,.18), transparent 30%),
    linear-gradient(135deg, #111827, #070a0f);
}

.registro h2 {
  color: #ffc247;
}

.registro p {
  margin-bottom: 20px;
}

footer {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 18px;
}


/* ============================================================
   12. DESTACADOS / PROMOCIONES
   Carrusel infinito, 1 banner por vista, rotación JS cada 4 s.
============================================================ */

.destacados {
  padding: 14px 0 22px !important;
  overflow: hidden;
}

.destacados > h2,
.destacados h2 {
  display: none !important;
}

.carrusel-destacados {
  display: flex;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 8px 16px 10px !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.carrusel-destacados::-webkit-scrollbar {
  display: none;
}

.carrusel-destacados.arrastrando {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.carrusel-destacados .destacado-publicado {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 min(620px, calc(100vw - 90px));
  min-width: min(620px, calc(100vw - 90px)) !important;
  max-width: none !important;
  min-height: 220px;
  padding: 30px 32px !important;
  border: 0 !important;
  border-radius: 24px;
  scroll-snap-align: start;
  cursor: pointer;
  color: #fff;
  background:
    radial-gradient(circle at 88% 24%, rgba(255,255,255,.22), transparent 25%),
    linear-gradient(125deg, #143a5e 0%, #356d8d 52%, #a6a64a 100%) !important;
  box-shadow: 0 12px 28px rgba(24,43,61,.18);
  transition: transform .22s ease, box-shadow .22s ease;
}

.carrusel-destacados .destacado-publicado.card-premium::before {
  content: none !important;
  display: none !important;
}

.carrusel-destacados .destacado-publicado::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 240px;
  right: -80px;
  bottom: -105px;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  pointer-events: none;
}

.destacado-contenido {
  position: relative;
  z-index: 2;
  max-width: 70%;
}

.destacado-etiqueta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #143a5e;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.carrusel-destacados .destacado-publicado h3 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: clamp(27px, 4vw, 44px) !important;
  line-height: .98;
  font-weight: 950;
  letter-spacing: -1px;
}

.carrusel-destacados .destacado-publicado p {
  margin: 0 0 12px !important;
  color: rgba(255,255,255,.94) !important;
  font-size: 15px;
  line-height: 1.35;
  max-width: 460px;
}

.destacado-precio {
  display: inline-block;
  margin-top: 2px;
  color: #fff;
  font-size: 27px;
  line-height: 1;
  font-weight: 950;
}

.destacado-negocio {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 700;
}

.destacado-decoracion {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 6%;
  width: 25%;
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(-8deg);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 30px rgba(0,0,0,.12);
}

.destacado-placeholder {
  cursor: default !important;
}

.destacado-demo-2 {
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.24), transparent 24%),
    linear-gradient(125deg, #735126 0%, #b27b31 52%, #d6b65b 100%) !important;
}

.destacado-demo-3 {
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(125deg, #264f42 0%, #3e7b66 52%, #8d9c56 100%) !important;
}

.destacado-demo-4 {
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(125deg, #543856 0%, #805b76 52%, #b58b79 100%) !important;
}

.carrusel-destacados .destacado-publicado:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(24,43,61,.24);
}

.destacados-indicadores,
.destacados-punto {
  display: none !important;
}


/* ============================================================
   13. RESPONSIVE
============================================================ */

@media (max-width: 900px) {
  .grid-categorias {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 601px) {
  .carrusel-destacados {
    gap: 18px;
    padding: 8px 18px 10px !important;
    scroll-padding-inline: 18px;
  }

  .carrusel-destacados .destacado-publicado {
    flex: 0 0 calc(100% - 36px) !important;
    flex-basis: calc(100% - 36px) !important;
    min-width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: 250px;
    height: auto;
    padding: 24px 18px 20px;
    align-items: flex-start;

    /* Valor móvil aprobado: NO CAMBIAR sin autorización */
    background-size: 200% !important;
    background-position: center 45%;
    background-repeat: no-repeat;
  }

  .overlay {
    width: 100%;
    height: 205px;
    text-align: left;
  }

  .hero h1 {
    margin: 0;
    max-width: 360px;
    font-size: 27px;
    line-height: .98;
    letter-spacing: -1px;
    text-align: left;
    white-space: normal;
  }

  .hero p {
    left: 50%;
    bottom: 4px;
    width: 100%;
    max-width: 390px;
    margin: 0;
    text-align: center;
    font-size: 9px;
    line-height: 1.1;
    white-space: nowrap;

    text-shadow:
      -1px -1px 0 #000,
       1px -1px 0 #000,
      -1px  1px 0 #000,
       1px  1px 0 #000,
       0 3px 10px rgba(0,0,0,.9);
  }

  .buscador-contenedor {
    margin: -18px auto 0;
    padding: 0 14px;
  }

  #buscador {
    padding: 15px 16px;
    border-radius: 16px;
    font-size: 15px;
  }

  .categorias,
  .resultado,
  .registro {
    padding: 30px 14px;
  }

  h2 {
    font-size: 25px;
    margin-bottom: 20px;
  }

  .grid-categorias {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .categoria {
    min-height: 78px;
    padding: 14px 11px;
    border-radius: 15px;
    font-size: 13px;
  }

  .categoria:hover {
    transform: translateY(-3px) scale(1.01);
  }

  .cards {
    gap: 14px;
  }

  .card {
    width: 100%;
    border-radius: 20px;
    padding: 22px;
  }

  .destacados {
    padding: 8px 0 16px !important;
  }

  .carrusel-destacados {
    gap: 12px;
    padding: 6px 12px 8px !important;
    scroll-padding-inline: 12px;
  }

  .carrusel-destacados .destacado-publicado {
    flex: 0 0 calc(100vw - 24px);
    flex-basis: calc(100vw - 24px);
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-height: 158px;
    padding: 18px !important;
    border-radius: 17px;
  }

  .destacado-contenido {
    max-width: 72%;
  }

  .destacado-etiqueta {
    margin-bottom: 7px;
    padding: 5px 8px;
    font-size: 8px;
  }

  .carrusel-destacados .destacado-publicado h3 {
    margin-bottom: 6px !important;
    font-size: clamp(22px, 7vw, 31px) !important;
    letter-spacing: -.7px;
  }

  .carrusel-destacados .destacado-publicado p {
    margin-bottom: 7px !important;
    font-size: 11px;
    line-height: 1.25;
  }

  .destacado-precio {
    font-size: 22px;
  }

  .destacado-negocio {
    margin-top: 7px;
    font-size: 9px;
  }

  .destacado-decoracion {
    right: 5%;
    width: 24%;
    border-radius: 18px;
  }
}


/* ============================================================
   PROMOCIONES CON IMAGEN DE PRODUCTO
   PNG/WebP recortado a la derecha del Destacado
============================================================ */

.destacado-producto-wrap {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 4%;
  width: 29%;
  height: 78%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.destacado-producto-imagen {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.22));
}

.perfil-promociones {
  margin: 20px 0 24px;
}

.perfil-promociones-carrusel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px 2px 10px;
}

.perfil-promociones-carrusel::-webkit-scrollbar {
  display: none;
}

.perfil-promocion-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 min(520px, 86%);
  min-height: 190px;
  padding: 22px 190px 22px 22px;
  border-radius: 20px;
  scroll-snap-align: start;
  text-decoration: none;
  color: #fff;
  background:
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.20), transparent 25%),
    linear-gradient(125deg, #143a5e 0%, #356d8d 52%, #a6a64a 100%);
  box-shadow: 0 10px 24px rgba(24,43,61,.16);
}

.perfil-promocion-card h4 {
  margin: 8px 0 7px;
  color: #fff;
  font-size: 24px;
  line-height: 1.05;
}

.perfil-promocion-card p {
  margin: 0 0 10px;
  color: rgba(255,255,255,.92);
  line-height: 1.35;
}

.perfil-promocion-etiqueta {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #143a5e;
  font-size: 10px;
  font-weight: 900;
}

.perfil-promocion-precio {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 24px;
}

.perfil-promocion-imagen {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 16px;
  width: 150px;
  max-height: 78%;
  transform: translateY(-50%);
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.22));
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 600px) {
  .destacado-producto-wrap {
    right: 3%;
    width: 31%;
    height: 72%;
  }

  .destacado-contenido {
    max-width: 67%;
  }

  .perfil-promocion-card {
    flex-basis: 92%;
    min-height: 170px;
    padding: 18px 115px 18px 18px;
  }

  .perfil-promocion-card h4 {
    font-size: 20px;
  }

  .perfil-promocion-imagen {
    right: 10px;
    width: 95px;
    max-height: 72%;
  }
}


/* ============================================================
   14. PLANES / PRIORIDAD DE RESULTADOS
============================================================ */

.resultado-negocio {
  position: relative;
  padding-top: 30px;
}

.etiqueta-plan {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 auto 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .25px;
}

.etiqueta-plan-premium {
  background: #111827;
  color: #fff;
  box-shadow: 0 6px 14px rgba(17,24,39,.18);
}

.etiqueta-plan-destacado {
  background: #fff3c4;
  color: #8a5b00;
  border: 1px solid rgba(180,122,0,.20);
}

.resultado-plan-premium {
  border-color: rgba(17,24,39,.18);
  box-shadow:
    0 14px 34px rgba(17,24,39,.13),
    inset 0 3px 0 #111827;
}

.resultado-plan-destacado {
  border-color: rgba(255,179,0,.42);
  box-shadow:
    0 13px 31px rgba(17,24,39,.11),
    inset 0 3px 0 #ffb300;
}

.resultado-plan-normal {
  padding-top: 26px;
}

@media (max-width: 600px) {
  .etiqueta-plan {
    font-size: 10px;
    padding: 5px 9px;
  }
}


/* ============================================================
   15. PROMOCIONES V6 - PRECIOS Y FONDOS
============================================================ */

.carrusel-destacados .destacado-publicado.estilo-azul-verde,
.perfil-promocion-card.estilo-azul-verde {
  background:
    radial-gradient(circle at 88% 24%, rgba(255,255,255,.22), transparent 25%),
    linear-gradient(125deg, #143a5e 0%, #356d8d 52%, #a6a64a 100%) !important;
}

.carrusel-destacados .destacado-publicado.estilo-dorado,
.perfil-promocion-card.estilo-dorado {
  background:
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(125deg, #69491f 0%, #a46e27 52%, #d1aa4c 100%) !important;
}

.carrusel-destacados .destacado-publicado.estilo-verde,
.perfil-promocion-card.estilo-verde {
  background:
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.20), transparent 24%),
    linear-gradient(125deg, #174b3a 0%, #2f755b 52%, #839b50 100%) !important;
}

.carrusel-destacados .destacado-publicado.estilo-morado,
.perfil-promocion-card.estilo-morado {
  background:
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.20), transparent 24%),
    linear-gradient(125deg, #4b3152 0%, #754f70 52%, #ad7c78 100%) !important;
}

.destacado-precios,
.perfil-promocion-precios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.destacado-precio-anterior,
.perfil-promocion-precio-anterior {
  color: rgba(255,255,255,.72);
  font-size: 15px;
  font-weight: 800;
  text-decoration-thickness: 2px;
}

.destacado-precio-actual,
.perfil-promocion-precio-actual {
  color: #ffd84d;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
  text-shadow: 0 2px 8px rgba(0,0,0,.20);
}

.destacado-descuento,
.perfil-promocion-descuento {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5b3d, #e53935);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 5px 14px rgba(180,35,35,.25);
}

@media (max-width: 600px) {
  .destacado-precio-anterior,
  .perfil-promocion-precio-anterior {
    font-size: 11px;
  }

  .destacado-precio-actual,
  .perfil-promocion-precio-actual {
    font-size: 21px;
  }

  .destacado-descuento,
  .perfil-promocion-descuento {
    padding: 4px 7px;
    font-size: 8px;
  }
}


/* ============================================================
   16. ANUNCIO PRINCIPAL
   Espacio especial debajo del buscador y arriba de Destacados.
============================================================ */

.anuncio-principal {
  padding: 16px 18px 8px;
}

.anuncio-principal.oculto {
  display: none !important;
}

.anuncio-principal-contenido {
  max-width: 1180px;
  margin: 0 auto;
}

.anuncio-principal-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 245px;
  display: flex;
  align-items: stretch;
  border-radius: 28px;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(circle at 84% 24%, rgba(255,255,255,.22), transparent 26%),
    linear-gradient(125deg, #29132e 0%, #642748 56%, #a65e47 100%);
  box-shadow: 0 18px 42px rgba(17,24,39,.18);
  border: 1px solid rgba(255,255,255,.18);
}

.anuncio-principal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(7,10,15,.28), transparent 68%);
  pointer-events: none;
}

.anuncio-principal-texto-wrap {
  width: 69%;
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.anuncio-principal-etiqueta {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 11px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #172033;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .55px;
  text-transform: uppercase;
}

.anuncio-principal-card h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(30px, 4vw, 49px);
  line-height: .98;
  letter-spacing: -1.2px;
  text-align: left;
}

.anuncio-principal-card p {
  margin: 0;
  max-width: 650px;
  color: rgba(255,255,255,.92);
  font-size: 16px;
  line-height: 1.45;
}

.anuncio-principal-boton {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 18px;
  padding: 11px 18px;
  border-radius: 999px;
  background: #ffb300;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 9px 20px rgba(0,0,0,.18);
}

.anuncio-principal-imagen-wrap {
  position: relative;
  width: 31%;
  min-height: 245px;
  overflow: hidden;
}

.anuncio-principal-imagen-wrap::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -58px;
  top: -10%;
  width: 115px;
  height: 120%;
  background: #642748;
  transform: rotate(10deg);
  box-shadow: -12px 0 30px rgba(0,0,0,.14);
}

.anuncio-principal-imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  display: block;
}

.anuncio-principal-card-sin-imagen .anuncio-principal-texto-wrap {
  width: 100%;
}

/* Un destello breve cada ocho segundos, sin bloquear el enlace. */
.anuncio-principal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: principal-destello 8s ease-in-out infinite;
}
@keyframes principal-destello {
  0%, 72% { transform: translateX(-120%); }
  92%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .anuncio-principal-card::after { animation: none; display: none; }
}
@media (max-width: 700px) {
  .anuncio-principal { padding: 10px 12px 4px; }
  .anuncio-principal-card {
    min-height: 0;
    flex-direction: row;
    border-radius: 19px;
  }
  .anuncio-principal-texto-wrap {
  width: 74%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 10px;
}
  .anuncio-principal-card h2 {
  font-size: clamp(18px, 5vw, 23px);
  line-height: 1.05;
  letter-spacing: -.4px;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
  .anuncio-principal-card p {
  font-size: 11px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
  .anuncio-principal-etiqueta {
  padding: 4px 6px;
  font-size: 7px;
  line-height: 1.2;
  margin-bottom: 5px;
}
  .anuncio-principal-boton {
  margin-top: 7px;
  padding: 7px 10px;
  font-size: 10px;
}
  .anuncio-principal-imagen-wrap {
  width: 26%;
  flex-shrink: 0;
  min-height: 0;
  height: auto;
}
  .anuncio-principal-imagen-wrap::before { display: none; }
}

/* Compras por encargo */
.compras-encargo{max-width:1180px;margin:14px auto;padding:0 18px}.compras-encargo[hidden]{display:none}.compras-encargo h2{font-size:20px;margin:0 0 5px}.compras-encargo p{color:#475569;font-size:14px;margin:0 0 12px}.compras-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.compra-boton{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;text-decoration:none;padding:17px 10px;border-radius:16px;color:#fff;background:#111;min-height:90px}.compra-boton strong{font-size:19px}.compra-boton small{font-size:12px}.compra-boton:focus-visible{outline:3px solid #2563eb;outline-offset:4px}.compra-tiktok{box-shadow:inset 3px 0 #25f4ee,inset -3px 0 #fe2c55}.compra-mercadolibre{background:#ffe600;color:#25335b}.compra-amazon{background:#232f3e;color:#ffb347}.accion svg{display:block;width:26px;height:26px}.categoria svg{width:23px;height:23px;vertical-align:middle;margin-right:7px;flex-shrink:0}@media(max-width:650px){.compras-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compra-boton{min-height:78px}}

/* Tarjetas de negocios: exclusivamente dentro de una categoría. */
.categoria-negocios-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  gap: 22px;
  text-align: left;
}
.categoria-negocio {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 24px;
  background: linear-gradient(145deg, #e2edf0, #f3ecd9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(24,45,55,.10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.categoria-negocio-portada {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: 23px 23px 0 0;
  background: radial-gradient(ellipse at 20% 30%, #b0cecc, transparent 65%), linear-gradient(120deg, #dce8ed, #e8d9ae);
}
.categoria-negocio-portada > img { width: 100%; height: 100%; object-fit: cover; }
.categoria-negocio-portada .etiqueta-plan { position: absolute; top: 14px; right: 14px; margin: 0; }
.categoria-negocio-cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0 20px 20px;
  border-radius: 0 0 23px 23px;
  background: rgba(255,255,255,.88);
}
.categoria-negocio-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: -32px 0 16px;
  border: 4px solid #fff;
  border-radius: 19px;
  background: #eef4f3;
  color: #246557;
  font-size: 23px;
  font-weight: 800;
  box-shadow: 0 5px 16px rgba(24,45,55,.12);
  overflow: hidden;
}
.categoria-negocio-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.categoria-negocio img[hidden] { display: none; }
.categoria-negocio h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; }
.categoria-negocio-enlace { border: 0; padding: 0; background: none; color: #182c32; font: inherit; font-weight: 700; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.categoria-negocio-enlace::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 24px; }
/* El área del botón se extiende a toda la tarjeta, con un solo foco de teclado. */
.categoria-negocio-cuerpo { position: static; }
.categoria-negocio-enlace:focus { outline: none; }
.categoria-negocio-enlace:focus-visible::after { outline: 3px solid #087f65; outline-offset: 4px; }
.categoria-negocio-descripcion { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #53616c; font-size: 14px; line-height: 1.65; margin: 0 0 22px; overflow-wrap: anywhere; }
.categoria-negocio-pie { margin-top: auto; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.categoria-negocio-estado { font-size: 12px; font-weight: 700; line-height: 1.5; color: #5c6772; }
.categoria-negocio-estado.estado-abierto { color: #08734c; }
.categoria-negocio-estado.estado-cerrado { color: #a33938; }
.categoria-negocio-estado.estado-descanso { color: #925d10; }
.categoria-negocio-cta { color: #155c50; font-size: 13px; font-weight: 700; white-space: nowrap; }
.categoria-negocio-cta span { margin-left: 5px; }
.categoria-negocio.resultado-plan-premium { border-color: #b7c4cc; }
.categoria-negocio.resultado-plan-destacado { border-color: #e8c568; }
.categoria-negocio.resultado-plan-normal { padding-top: 0; }
@media (min-width: 640px) { .categoria-negocios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .categoria-negocios-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) {
  .categoria-negocio:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(24,45,55,.16); }
}
@media (prefers-reduced-motion: reduce) { .categoria-negocio { transition: none; } .categoria-negocio:hover { transform: none; } }
/* Pulido visual del perfil, sin modificar su estructura ni sus funciones. */
.perfil-negocio.perfil-oficial { box-shadow: 0 14px 38px rgba(24,45,55,.10); }
.perfil-oficial .perfil-contenido-oficial { padding-bottom: 36px; }
.perfil-oficial .perfil-descripcion-oficial { margin-bottom: 28px; }
.perfil-oficial .detalle-card,
.perfil-oficial .perfil-seccion { border-color: #e7eceb; box-shadow: 0 4px 14px rgba(24,45,55,.04); }
.perfil-oficial .perfil-acciones-oficial { gap: 12px; }
.perfil-oficial .perfil-titulo-oficial { min-width: 0; }
.perfil-oficial .perfil-titulo-oficial h3 { overflow-wrap: anywhere; }


/* Mayor énfasis en acceso al perfil y estado de las tarjetas de categoría. */
.categoria-negocio-pie { align-items: center; gap: 10px; }
.categoria-negocio-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #135b4d;
  border-radius: 12px;
  background: #146653;
  color: #fff;
  line-height: 1.3;
  box-shadow: 0 4px 10px rgba(20,102,83,.16);
  transition: background-color .2s ease;
}
.categoria-negocio-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid #dce2e7;
  border-radius: 999px;
  background: #eef1f4;
  color: #4b5663;
}
.categoria-negocio-estado.estado-abierto {
  background: #e4f5eb;
  border-color: #b7dfc8;
  color: #09623f;
}
.categoria-negocio-estado.estado-cerrado {
  background: #fceaea;
  border-color: #f0c8c8;
  color: #9b3030;
}
.categoria-negocio-estado.estado-descanso {
  background: #fff3dc;
  border-color: #ead3a7;
  color: #80510b;
}
.categoria-negocio:focus-within .categoria-negocio-cta { background: #0d5141; }
@media (hover: hover) and (pointer: fine) {
  .categoria-negocio:hover .categoria-negocio-cta { background: #0d5141; }
}
@media (prefers-reduced-motion: reduce) {
  .categoria-negocio-cta { transition: none; }
}


/* Contornos por plan y brillo discreto: solo tarjetas de categoría. */
.categoria-negocio {
  --categoria-borde: #adc3bb;
  --categoria-halo: rgba(72, 112, 96, .07);
  border-width: 2px;
  box-shadow: 0 0 0 3px var(--categoria-halo), 0 12px 28px rgba(24,45,55,.14);
}
.categoria-negocio.resultado-plan-normal {
  border-color: var(--categoria-borde);
}
.categoria-negocio.resultado-plan-destacado {
  --categoria-borde: #dcad48;
  --categoria-halo: rgba(220,173,72,.10);
  border-color: var(--categoria-borde);
}
.categoria-negocio.resultado-plan-premium {
  --categoria-borde: #b88a2e;
  --categoria-halo: rgba(184,138,46,.13);
  border-color: var(--categoria-borde);
}
.categoria-negocio.resultado-plan-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 22px;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(110deg, transparent 42%, rgba(255,248,220,.08) 46%, rgba(255,255,255,.36) 50%, rgba(255,248,220,.08) 54%, transparent 58%);
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .categoria-negocio:hover {
    box-shadow: 0 0 0 3px var(--categoria-halo), 0 18px 36px rgba(24,45,55,.19);
  }
  .categoria-negocio.resultado-plan-premium:hover::before {
    animation: categoria-brillo-premium 1.1s ease-out both;
  }
}
@keyframes categoria-brillo-premium {
  0% { background-position: 100% 0; opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { background-position: 0% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .categoria-negocio.resultado-plan-premium::before,
  .categoria-negocio.resultado-plan-premium:hover::before { animation: none; opacity: 0; }
}


/* Productos y servicios del perfil: etiquetas legibles, sin apariencia de botón. */
.perfil-oficial .servicios-pills { gap: 10px; }
.perfil-oficial .servicios-pills span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 12px 16px;
  border: 1px solid #c4ded3;
  border-radius: 14px;
  background: #eaf5ef;
  color: #205741;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
  box-shadow: 0 3px 8px rgba(31,71,58,.05);
}
.perfil-oficial .servicios-pills span:nth-child(3n+2) { background: #eaf2fa; border-color: #cbdced; color: #295475; }
.perfil-oficial .servicios-pills span:nth-child(3n) { background: #fcf4e4; border-color: #ecddbb; color: #755719; }


/* Mandaditos locales, separado de las compras en plataformas. */
.compras-encargo .mandaditos-acceso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 24px;
  padding: 20px 24px;
  border: 1px solid #bcd9cd;
  border-radius: 20px;
  background: linear-gradient(120deg, #e8f5ee, #f8fcfa);
  box-shadow: 0 7px 20px rgba(23,83,60,.08);
}
.mandaditos-acceso .mandaditos-titulo { color: #184c38; font-size: 21px; }
.mandaditos-acceso .mandaditos-descripcion { margin: 5px 0 0; color: #456052; font-size: 14px; line-height: 1.5; }
.mandaditos-acceso .mandaditos-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 13px;
  background: #146653;
  color: white;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(20,102,83,.16);
}
.mandaditos-boton:focus-visible { outline: 3px solid #146653; outline-offset: 4px; }
.compra-boton.compra-temu { background: #c84900; color: #fff; }
@media (hover: hover) and (pointer: fine) { .mandaditos-acceso .mandaditos-boton:hover { background: #0d5141; } }
@media (max-width: 650px) {
  .compras-encargo .mandaditos-acceso { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
}

/* Catálogo con patrones vectoriales discretos por actividad. */
.grid-categorias .categoria { isolation:isolate; background:linear-gradient(135deg,var(--tema-claro,#244765),var(--tema-oscuro,#172435)) !important; border:1px solid rgba(255,255,255,.25); box-shadow:0 7px 16px rgba(20,32,45,.18),inset 0 1px 0 rgba(255,255,255,.12); min-height:106px; }
.grid-categorias .categoria::before { inset:0; width:auto; height:auto; border-radius:inherit; background-image:var(--tema-patron); background-size:145px 100px; opacity:.18; z-index:-2; pointer-events:none; }
.grid-categorias .categoria::after { inset:0; width:auto; height:auto; border-radius:inherit; background:radial-gradient(ellipse at center,rgba(8,15,25,.45),transparent 85%); z-index:-1; pointer-events:none; }
.grid-categorias .categoria:focus-visible { outline:3px solid #e0b65d;outline-offset:4px; }
.grid-categorias .categoria-premium { border-color:#c0a16c; }
.compra-boton strong { overflow-wrap:anywhere;max-width:100%; }
@media(max-width:650px){.grid-categorias{gap:12px}.grid-categorias .categoria{padding:16px 10px;min-height:104px;font-size:13px;line-height:1.45}}
@media(prefers-reduced-motion:reduce){.grid-categorias .categoria{transition:none}.grid-categorias .categoria:hover{transform:none}}
.grid-categorias .categoria[data-tema="moda"]{--tema-claro:#51304e;--tema-oscuro:#251e32;--tema-patron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22145%22%20height%3D%22100%22%20viewBox%3D%220%200%20145%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22translate(3%205)%20rotate(-15%2020%2020)%20scale(.7)%22%20d%3D%22M8%2010l8-6%208%206%207%203-4%208-5-2v15H10V19l-5%202-4-8z%22%2F%3E%3Cpath%20transform%3D%22translate(83%2043)%20rotate(15%2020%2020)%20scale(.7)%22%20d%3D%22M14%209q0-7%206-5t0%209v4L4%2028q-2%203%202%203h28q4%200%202-3L20%2017%22%2F%3E%3Cpath%20transform%3D%22translate(125%20-10)%20scale(.6)%22%20d%3D%22M8%2010l8-6%208%206%207%203-4%208-5-2v15H10V19l-5%202-4-8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.grid-categorias .categoria[data-tema="belleza"]{--tema-claro:#523845;--tema-oscuro:#261f2c;--tema-patron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22145%22%20height%3D%22100%22%20viewBox%3D%220%200%20145%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22translate(3%205)%20rotate(-15%2020%2020)%20scale(.7)%22%20d%3D%22M7%207l25%2026M32%207L7%2033M12%2027a5%205%200%201%201-10%200%205%205%200%200%201%2010%200M37%2027a5%205%200%201%201-10%200%205%205%200%200%201%2010%200%22%2F%3E%3Cpath%20transform%3D%22translate(83%2043)%20rotate(15%2020%2020)%20scale(.7)%22%20d%3D%22M8%205h24v7H8zM8%2012v22m5-22v22m5-22v22m5-22v22m5-22v22%22%2F%3E%3Cpath%20transform%3D%22translate(125%20-10)%20scale(.6)%22%20d%3D%22M7%207l25%2026M32%207L7%2033M12%2027a5%205%200%201%201-10%200%205%205%200%200%201%2010%200M37%2027a5%205%200%201%201-10%200%205%205%200%200%201%2010%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.grid-categorias .categoria[data-tema="salud"]{--tema-claro:#17645f;--tema-oscuro:#123e48;--tema-patron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22145%22%20height%3D%22100%22%20viewBox%3D%220%200%20145%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22translate(3%205)%20rotate(-15%2020%2020)%20scale(.7)%22%20d%3D%22M15%204h10v11h11v10H25v11H15V25H4V15h11z%22%2F%3E%3Cpath%20transform%3D%22translate(83%2043)%20rotate(15%2020%2020)%20scale(.7)%22%20d%3D%22M10%2030L30%2010a8%208%200%200%200-12-10L0%2020a8%208%200%200%200%2010%2010M10%2010l12%2012%22%2F%3E%3Cpath%20transform%3D%22translate(125%20-10)%20scale(.6)%22%20d%3D%22M15%204h10v11h11v10H25v11H15V25H4V15h11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.grid-categorias .categoria[data-tema="comida"]{--tema-claro:#8a4a29;--tema-oscuro:#492a24;--tema-patron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22145%22%20height%3D%22100%22%20viewBox%3D%220%200%20145%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22translate(3%205)%20rotate(-15%2020%2020)%20scale(.7)%22%20d%3D%22M6%203v13m5-13v13m5-13v13M6%2013q5%2010%2010%200M11%2020v17M30%203v34m0-34q-12%2014%200%2017%22%2F%3E%3Cpath%20transform%3D%22translate(83%2043)%20rotate(15%2020%2020)%20scale(.7)%22%20d%3D%22M6%2012h24v13q0%2010-12%2010T6%2025zM30%2015q13-2%207%2010h-7M11%203v4m8-4v4m8-4v4%22%2F%3E%3Cpath%20transform%3D%22translate(125%20-10)%20scale(.6)%22%20d%3D%22M6%203v13m5-13v13m5-13v13M6%2013q5%2010%2010%200M11%2020v17M30%203v34m0-34q-12%2014%200%2017%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.grid-categorias .categoria[data-tema="tecnologia"]{--tema-claro:#244765;--tema-oscuro:#172435;--tema-patron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22145%22%20height%3D%22100%22%20viewBox%3D%220%200%20145%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22translate(3%205)%20rotate(-15%2020%2020)%20scale(.7)%22%20d%3D%22M4%205h32v23H4zM15%2028v8m10-8v8M10%2036h20%22%2F%3E%3Cpath%20transform%3D%22translate(83%2043)%20rotate(15%2020%2020)%20scale(.7)%22%20d%3D%22M10%202h20v36H10zM16%206h8M18%2033h4%22%2F%3E%3Cpath%20transform%3D%22translate(125%20-10)%20scale(.6)%22%20d%3D%22M4%205h32v23H4zM15%2028v8m10-8v8M10%2036h20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.grid-categorias .categoria[data-tema="herramientas"]{--tema-claro:#515049;--tema-oscuro:#2b3137;--tema-patron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22145%22%20height%3D%22100%22%20viewBox%3D%220%200%20145%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22translate(3%205)%20rotate(-15%2020%2020)%20scale(.7)%22%20d%3D%22M7%203l8%208-4%205-8-8q-4%2012%2010%2013l15%2015%207-7-15-15Q21%200%207%203z%22%2F%3E%3Cpath%20transform%3D%22translate(83%2043)%20rotate(15%2020%2020)%20scale(.7)%22%20d%3D%22M4%2010l13-7%2012%208-6%206-7-6-5%206zM19%2017l-9%2020%206%203%209-20%22%2F%3E%3Cpath%20transform%3D%22translate(125%20-10)%20scale(.6)%22%20d%3D%22M7%203l8%208-4%205-8-8q-4%2012%2010%2013l15%2015%207-7-15-15Q21%200%207%203z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.grid-categorias .categoria[data-tema="hogar"]{--tema-claro:#3c5265;--tema-oscuro:#203442;--tema-patron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22145%22%20height%3D%22100%22%20viewBox%3D%220%200%20145%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22translate(3%205)%20rotate(-15%2020%2020)%20scale(.7)%22%20d%3D%22M3%2018L20%203l17%2015M8%2015v22h24V15M16%2037V24h8v13%22%2F%3E%3Cpath%20transform%3D%22translate(83%2043)%20rotate(15%2020%2020)%20scale(.7)%22%20d%3D%22M3%209v28m0-11h34v11M3%2014h11v12M14%2018h18q5%200%205%208%22%2F%3E%3Cpath%20transform%3D%22translate(125%20-10)%20scale(.6)%22%20d%3D%22M3%2018L20%203l17%2015M8%2015v22h24V15M16%2037V24h8v13%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.grid-categorias .categoria[data-tema="mascotas"]{--tema-claro:#46614a;--tema-oscuro:#283c37;--tema-patron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22145%22%20height%3D%22100%22%20viewBox%3D%220%200%20145%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22translate(3%205)%20rotate(-15%2020%2020)%20scale(.7)%22%20d%3D%22M12%2022q8-11%2016%200t-1%2013H13q-9%200-1-13M7%2010v5m9-12v6m9-6v6m9%201v5%22%2F%3E%3Cpath%20transform%3D%22translate(83%2043)%20rotate(15%2020%2020)%20scale(.7)%22%20d%3D%22M5%208q-4-7-8-2t4%209L24%2032q-2%208%205%206t4-6q8-3%202-8t-8%201L10%2010q4-8-5-2%22%2F%3E%3Cpath%20transform%3D%22translate(125%20-10)%20scale(.6)%22%20d%3D%22M12%2022q8-11%2016%200t-1%2013H13q-9%200-1-13M7%2010v5m9-12v6m9-6v6m9%201v5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.grid-categorias .categoria[data-tema="agua"]{--tema-claro:#226779;--tema-oscuro:#173d59;--tema-patron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22145%22%20height%3D%22100%22%20viewBox%3D%220%200%20145%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22translate(3%205)%20rotate(-15%2020%2020)%20scale(.7)%22%20d%3D%22M20%202Q-4%2029%2010%2036q10%206%2020%200T20%202z%22%2F%3E%3Cpath%20transform%3D%22translate(83%2043)%20rotate(15%2020%2020)%20scale(.7)%22%20d%3D%22M4%2015q8-8%2016%200t16%200M4%2025q8-8%2016%200t16%200%22%2F%3E%3Cpath%20transform%3D%22translate(125%20-10)%20scale(.6)%22%20d%3D%22M20%202Q-4%2029%2010%2036q10%206%2020%200T20%202z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.grid-categorias .categoria[data-tema="envios"]{--tema-claro:#346348;--tema-oscuro:#1c4038;--tema-patron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22145%22%20height%3D%22100%22%20viewBox%3D%220%200%20145%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22translate(3%205)%20rotate(-15%2020%2020)%20scale(.7)%22%20d%3D%22M2%208h22v22H2zM24%2017h8l6%208v5H24M12%2032a4%204%200%201%201-8%200%204%204%200%200%201%208%200M36%2032a4%204%200%201%201-8%200%204%204%200%200%201%208%200%22%2F%3E%3Cpath%20transform%3D%22translate(83%2043)%20rotate(15%2020%2020)%20scale(.7)%22%20d%3D%22M3%2010L20%203l17%207v23l-17%206-17-6zM3%2010l17%207%2017-7M20%2017v22%22%2F%3E%3Cpath%20transform%3D%22translate(125%20-10)%20scale(.6)%22%20d%3D%22M2%208h22v22H2zM24%2017h8l6%208v5H24M12%2032a4%204%200%201%201-8%200%204%204%200%200%201%208%200M36%2032a4%204%200%201%201-8%200%204%204%200%200%201%208%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.grid-categorias .categoria[data-tema="fiestas"]{--tema-claro:#604b6c;--tema-oscuro:#362841;--tema-patron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22145%22%20height%3D%22100%22%20viewBox%3D%220%200%20145%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22translate(3%205)%20rotate(-15%2020%2020)%20scale(.7)%22%20d%3D%22M5%2017h30v20H5zM3%2011h34v7H3zM20%2011v26M20%2011Q0-2%208%201t12%2010Q40-2%2032%201T20%2011%22%2F%3E%3Cpath%20transform%3D%22translate(83%2043)%20rotate(15%2020%2020)%20scale(.7)%22%20d%3D%22M6%2029l8-23%2020%2020zM21%204l4-3m5%2010%207-2m-8%2010%207%203%22%2F%3E%3Cpath%20transform%3D%22translate(125%20-10)%20scale(.6)%22%20d%3D%22M5%2017h30v20H5zM3%2011h34v7H3zM20%2011v26M20%2011Q0-2%208%201t12%2010Q40-2%2032%201T20%2011%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.grid-categorias .categoria[data-tema="comercios"]{--tema-claro:#5c503c;--tema-oscuro:#35343b;--tema-patron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22145%22%20height%3D%22100%22%20viewBox%3D%220%200%20145%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22translate(3%205)%20rotate(-15%2020%2020)%20scale(.7)%22%20d%3D%22M6%2012h28l3%2025H3zM12%2012V8q8-13%2016%200v4%22%2F%3E%3Cpath%20transform%3D%22translate(83%2043)%20rotate(15%2020%2020)%20scale(.7)%22%20d%3D%22M3%2012l4-8h26l4%208M3%2012q5%208%209%200%208%208%2012%200%208%208%2013%200M6%2020v17h28V20%22%2F%3E%3Cpath%20transform%3D%22translate(125%20-10)%20scale(.6)%22%20d%3D%22M6%2012h28l3%2025H3zM12%2012V8q8-13%2016%200v4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}


/* Una sola paleta y fondos opcionales. */
.grid-categorias .categoria { background:linear-gradient(135deg,#527b99,#40647f) !important; }
.grid-categorias .categoria::after { background:radial-gradient(ellipse at center,rgba(15,32,46,.14),transparent 85%); }
.grid-categorias .categoria[data-tema="sin-dibujo"] { --tema-patron:none; }
.grid-categorias .categoria[data-tema="rayas"] { --tema-patron:repeating-linear-gradient(135deg,transparent 0 13px,rgba(255,255,255,.65) 13px 14px,transparent 14px 27px); }
/* Anuncios apilados en un mismo espacio, sin desplazamiento lateral. */
.principal-escenario { display:grid; }
.principal-diapositiva { grid-area:1 / 1; min-width:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .45s ease,visibility .45s; }
.principal-diapositiva.principal-visible { opacity:1; visibility:visible; pointer-events:auto; }
.principal-diapositiva .anuncio-principal-card { height:100%; box-sizing:border-box; }
.principal-controles { display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;color:#405266;font-size:13px; }
.principal-controles button { min-width:44px;min-height:44px;padding:8px 14px;border:1px solid #cdd8df;border-radius:12px;background:#fff;color:#243e51;font:inherit;font-weight:700;cursor:pointer; }
.principal-controles button:focus-visible { outline:3px solid #146653;outline-offset:3px; }
@media(prefers-reduced-motion:reduce){.principal-diapositiva{transition:none}}