/* Anunciantes - listado público (archive-anunciante.php) */

:root {
  --anun-oscuro: #141923;
  --anun-verde: #c6ff3d;
  --anun-verde-oscuro: #3e6b12;
  --anun-verde-suave: #eefbd2;
  --anun-gris: #6b7280;
  --anun-gris-claro: #e5e7eb;
  --anun-blanco: #ffffff;
  --anun-whatsapp: #25d366;
  --anun-whatsapp-hover: #1ebe5a;

  /* Tipografía: family/size/weight tomados literal de las clases reales
     del theme (style.css) para cada rol de contenido — nunca una familia
     propia del módulo:
     --anun-font-base     = .p1/p   (texto: "Monserrat-Light")
     --anun-font-heading  = .t3     (títulos: "GeorgeTown")
     --anun-font-etiqueta = .etiquetas (recuadros de categoría: "Inter") */
  --anun-font-base: "Monserrat-Light", sans-serif;
  --anun-font-heading: "GeorgeTown", sans-serif;
  --anun-font-etiqueta: "Inter", sans-serif;
}

/* ------------------------------------------------------------------ */
/* Header global: oculto SOLO en /anunciantes/ (y sus estados filtrados  */
/* por categoría, que viven en la misma vista vía AJAX, no en otra URL). */
/* Se apoya en la body class que WordPress agrega automáticamente en el  */
/* archive de este CPT (post-type-archive-anunciante) — no requiere      */
/* tocar header.php, así que ninguna otra pantalla se ve afectada.       */
/* ------------------------------------------------------------------ */
/* Mismo criterio que main.contenedor.anunciantes-landing (landing de
   categorías): flex column + gap en vez de márgenes apilados en cada hijo
   (volver-a-categorías, toolbar, grid), para que el espacio hero→toolbar y
   toolbar→grid sea literalmente el mismo, acá y en la landing. */
main.contenedor.anunciantes-archive {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Ver nota en main.contenedor.anunciantes-landing más abajo: el "CSS
     adicional" del Personalizador trae main.contenedor{padding-top:0
     !important} global, así que necesitamos el !important + selector
     compuesto (más específico) para que el padding-top real sea 24px aquí. */
  padding-top: 24px !important;
}

/* "Volver a categorías" ahora comparte fila con el toolbar (buscador, y en
   "Todos" también los pills de filtro) — sin esto, su margin-bottom:14px de
   abajo lo descentraría verticalmente en esa fila (mismo efecto que el bug
   del placeholder del buscador: un margin asimétrico que el flex centra
   incluyendo el margen, no solo el contenido). */
.anunciantes-toolbar > .anunciantes-volver-categorias {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Banner de sección: reemplaza el espacio del header oculto, compacto  */
/* (no un hero) — misma jerarquía eyebrow+título que antes vivía en un   */
/* bloque de texto suelto, ahora con identidad visual propia. Vive fuera */
/* de <main class="contenedor">, así puede ser edge-to-edge de verdad.   */
/* ------------------------------------------------------------------ */
/* Para poner una foto real: agrega una capa
   url("../../public/img/anunciantes-banner.jpg") center/cover no-repeat
   ANTES de var(--anun-oscuro) en el "background" de abajo (separada por
   coma, entre el degradado y el color de respaldo). Medidas recomendadas
   al final del reporte de esta tarea. Mientras ese archivo no exista, el
   degradado de abajo es el fondo — nunca queda un banner roto/vacío. */
.anunciantes-banner {
  align-items: center;
  background: linear-gradient(120deg, rgba(20, 25, 35, 0.88), rgba(20, 25, 35, 0.72)), var(--anun-oscuro);
  display: flex;
  height: 200px;
  overflow: hidden;
  width: 100%;
}

.anunciantes-banner-inner {
  padding: 0 5px;
}

.anunciantes-banner .anunciantes-eyebrow {
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--anun-blanco);
}

.anunciantes-banner .anunciantes-heading {
  color: var(--anun-blanco);
  margin: 0;
}

@media (max-width: 900px) {
  .anunciantes-banner {
    height: 170px;
  }
}

@media (max-width: 600px) {
  .anunciantes-banner {
    height: 132px;
  }
}

/* ------------------------------------------------------------------ */
/* Eyebrow + título (compartidos por el banner de arriba)               */
/* ------------------------------------------------------------------ */

/* Pill de marca: pieza visual real, no una etiqueta de texto suelta. El
   color de fondo/borde para el banner (oscuro) se sobreescribe arriba. */
.anunciantes-eyebrow {
  background-color: var(--anun-oscuro);
  border-radius: 999px;
  color: var(--anun-blanco);
  display: inline-block;
  font-family: var(--anun-font-etiqueta);
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 14px;
  padding: 6px 14px;
  text-transform: uppercase;
  width: fit-content;
}

.anunciantes-heading {
  color: var(--anun-oscuro);
  font-family: var(--anun-font-heading);
  font-size: 27px;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 16px;
  max-width: 640px;
  /* Los títulos del sitio (style.css: .t2, .t3, h1 de secciones, etc.)
     van SIEMPRE en mayúsculas — mismo tratamiento aquí, no una excepción. */
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Toolbar: filtros de categoría + buscador AJAX en una sola fila       */
/* ------------------------------------------------------------------ */
/* Dos zonas: filtros (flex:1, dominante) + buscador (flex:0, alineado
   a la derecha, colapsado a un botón de lupa por defecto). La lógica
   AJAX (debounce, AbortController, estado searchTerm/categoria) es la
   misma de siempre — esto es solo el contenedor visual. */

.anunciantes-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0 5px;
}

.anunciantes-filtros {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

/* Vista de una categoría: sin pills, el buscador va a la derecha del toolbar. */
.anunciantes-toolbar > .anunciantes-search {
  margin-left: auto;
}

.anunciantes-filtro-btn {
  align-items: center;
  background-color: var(--anun-blanco);
  border: 1px solid rgba(20, 25, 35, 0.1);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(7, 15, 30, 0.04);
  color: var(--anun-oscuro);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--anun-font-etiqueta);
  font-size: 13px;
  gap: 8px;
  padding: 8px 16px;
  /* Los pills son <a href> reales (vista de categoría, progressive
     enhancement) — sin esto el navegador les pone el subrayado default
     de cualquier link. */
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Hover premium: navy sólido, no solo un tinte gris — mismo lenguaje que
   el hover de los íconos del modal. */
.anunciantes-filtro-btn:hover {
  background-color: var(--anun-oscuro);
  border-color: var(--anun-oscuro);
  box-shadow: 0 10px 22px rgba(7, 15, 30, 0.2);
  color: var(--anun-blanco);
  transform: translateY(-2px);
}

.anunciantes-filtro-btn.is-active {
  background-color: var(--anun-oscuro);
  border-color: var(--anun-oscuro);
  box-shadow: 0 6px 16px rgba(7, 15, 30, 0.18);
  color: var(--anun-blanco);
}

.anunciantes-filtro-btn.is-active:hover {
  transform: none;
}

/* ------------------------------------------------------------------ */
/* Buscador colapsable (CHECK 9 — AJAX en vivo)                        */
/* ------------------------------------------------------------------ */
/* Colapsado: un botón circular con la lupa (46px). Abierto: se expande
   HACIA LA IZQUIERDA (queda pegado al extremo derecho de la toolbar,
   así que crecer su propio ancho no mueve ese borde derecho) revelando
   el input. overflow:hidden en el propio contenedor es lo que permite
   animar solo "width" — sin recortar nunca el resto de la toolbar. */
.anunciantes-search {
  align-items: center;
  background-color: var(--anun-blanco);
  border: 1px solid var(--anun-gris-claro);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(7, 15, 30, 0.04);
  display: flex;
  flex: 0 0 auto;
  height: 44px;
  overflow: hidden;
  position: relative;
  transition: width 300ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  width: 44px;
}

.anunciantes-search:hover {
  border-color: rgba(20, 25, 35, 0.22);
}

.anunciantes-search.is-open {
  border-radius: 15px;
  width: 320px;
}

.anunciantes-search:focus-within {
  border-color: var(--anun-oscuro);
  box-shadow: 0 0 0 3px rgba(20, 25, 35, 0.12);
}

.anunciantes-buscador-toggle {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--anun-gris);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  /* line-height:1 en el botón (heredado por el ícono adentro) — sin esto,
     el line-height por defecto que Bootstrap aplica a los "form controls"
     (reboot.css, line-height:1.15) deja aire asimétrico arriba/abajo del
     glifo dentro de su propia caja, y el align-items:center de aquí solo
     centra esa CAJA, no el glifo visual dentro de ella. Layout robusto,
     no un offset manual. */
  line-height: 1;
  transition: color 0.2s ease;
  width: 44px;
}

.anunciantes-search:hover .anunciantes-buscador-toggle,
.anunciantes-search.is-open .anunciantes-buscador-toggle {
  color: var(--anun-oscuro);
}

.anunciantes-buscador-toggle:focus-visible {
  outline: 2px solid var(--anun-oscuro);
  outline-offset: -2px;
}

.anunciantes-buscador-input {
  background: transparent;
  border: 0;
  color: var(--anun-oscuro);
  flex: 1 1 auto;
  font-family: var(--anun-font-base);
  font-size: 14.5px;
  height: 44px;
  /* line-height IGUAL al height (no line-height:1) — la técnica robusta
     estándar para centrar verticalmente el texto de un <input> de una
     sola línea, sin adivinar un offset. Bootstrap (reboot.css) le pone
     line-height:1.15 a todo <input> por defecto; sin esto placeholder y
     texto tecleado quedan ligeramente descentrados en algunos renderers
     mobile (WebKit/Blink) frente al ícono/botón X, que sí se centran vía
     flex. Aplica igual a placeholder y a texto tecleado (mismo <input>). */
  line-height: 44px;
  min-width: 0;
  opacity: 0;
  outline: none;
  padding: 0;
  transition: opacity 200ms ease;
}

/* responsive.css trae una regla global input[type="text"]{margin-bottom:20px;
   width:100%} dentro de su @media (max-width:600px) — pensada para otros
   formularios del sitio (stackeados en mobile), pero como nuestro <input>
   también es type="text" la hereda: el margin-bottom asimétrico (solo abajo)
   descentra el placeholder/texto dentro de la píldora del buscador (el
   flex del padre centra la CAJA del input incluyendo ese margen, no solo su
   contenido). En vez de tocar esa regla global (afecta otros formularios del
   sitio), la neutralizamos aquí con un selector más específico, scopeado
   solo al buscador de anunciantes. */
.anunciantes-search .anunciantes-buscador-input {
  margin-bottom: 0;
  width: auto;
}

.anunciantes-search.is-open .anunciantes-buscador-input {
  opacity: 1;
}

.anunciantes-buscador-input::placeholder {
  color: var(--anun-gris);
}

/* Quitamos el outline azul genérico del navegador a propósito: el foco
   visible accesible ya lo da .anunciantes-search:focus-within de arriba
   (en toda la caja), así que no hace falta duplicarlo en el <input>. */
.anunciantes-buscador-input:focus {
  outline: none;
}

.anunciantes-buscador-limpiar {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--anun-gris);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  line-height: 1;
  margin-right: 6px;
  opacity: 0;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 150ms ease;
  width: 30px;
}

.anunciantes-search.is-open .anunciantes-buscador-limpiar:not([hidden]) {
  opacity: 1;
}

/* Refuerzo explícito: aunque display:flex ya esté en la regla base (misma
   especificidad de origen que [hidden] del navegador), este selector con
   más especificidad garantiza que el atributo hidden siga ocultándolo. */
.anunciantes-buscador-limpiar[hidden] {
  display: none;
}

.anunciantes-buscador-limpiar:hover {
  background-color: var(--anun-gris-claro);
  color: var(--anun-oscuro);
}

.anunciantes-buscador-limpiar:focus-visible {
  outline: 2px solid var(--anun-oscuro);
  outline-offset: 2px;
}

/* Indicador "Buscando…": flota DEBAJO de la caja del buscador (position:
   absolute contra .anunciantes-search, que tiene position:relative) para
   que aparecer/desaparecer nunca mueva la toolbar ni las categorías. */
.anunciantes-buscador-estado {
  color: var(--anun-gris);
  font-family: var(--anun-font-base);
  font-size: 12px;
  margin: 0;
  padding: 4px 4px 0;
  position: absolute;
  right: 0;
  text-align: right;
  top: 100%;
  white-space: nowrap;
}

/* Anuncio de "N anunciantes encontrados": solo para lectores de pantalla,
   nunca se ve — el indicador visible de arriba es otro elemento. */
.anunciantes-visualmente-oculto {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 600px) {
  .anunciantes-search.is-open {
    flex: 1 1 100%;
    width: 100%;
  }

  .anunciantes-search.is-open .anunciantes-buscador-estado {
    left: 0;
    text-align: left;
  }
}

/* ------------------------------------------------------------------ */
/* Grid + tarjetas                                                     */
/* ------------------------------------------------------------------ */

.anunciantes-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 5px 40px;
  transition: opacity 0.15s ease;
}

/* Mientras llega el AJAX: baja la opacidad en vez de vaciar el grid (nunca
   un flash en blanco) — el indicador "Buscando…" del buscador es el otro
   aviso, visible arriba. */
.anunciantes-grid--cargando {
  opacity: 0.55;
}

@media (max-width: 1100px) {
  .anunciantes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

@media (max-width: 600px) {
  .anunciantes-grid {
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
  }
}

.anunciante-card {
  background-color: var(--anun-blanco);
  border: 1px solid rgba(20, 25, 35, 0.08);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(7, 15, 30, 0.04);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.anunciante-card:hover {
  border-color: rgba(20, 25, 35, 0.08);
  box-shadow: 0 18px 34px rgba(7, 15, 30, 0.14);
  transform: translateY(-4px);
}

.anunciante-card:hover .anunciante-card-img img {
  transform: scale(1.05);
}

.anunciante-card:hover .anunciante-card-arrow {
  background-color: var(--anun-oscuro);
  border-color: var(--anun-oscuro);
  box-shadow: 0 8px 16px rgba(7, 15, 30, 0.2);
  color: var(--anun-verde);
  transform: translateY(-1px);
}

.anunciante-card:focus-visible {
  outline: 2px solid var(--anun-oscuro);
  outline-offset: 2px;
}

.anunciante-card[hidden] {
  display: none;
}

.anunciante-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.anunciante-card-img img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
  width: 100%;
}

.anunciante-card-placeholder {
  align-items: center;
  background: linear-gradient(135deg, #1c2331, var(--anun-oscuro));
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.anunciante-card-placeholder span {
  color: var(--anun-blanco);
  font-family: var(--anun-font-heading);
  font-size: 42px;
  opacity: 0.92;
  text-transform: uppercase;
}

.anunciante-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 9px;
  padding: 20px 22px 22px;
}

/* Gris/navy, igual que la categoría dentro del modal — ya no verde. */
.anunciante-card-badge {
  background-color: #f3f4f6;
  border: 1px solid rgba(20, 25, 35, 0.1);
  border-radius: 999px;
  color: var(--anun-oscuro);
  display: inline-block;
  font-family: var(--anun-font-etiqueta);
  font-size: 11px;
  letter-spacing: 0.4px;
  padding: 4px 12px;
  text-transform: uppercase;
  width: fit-content;
}

.anunciante-card-title {
  color: var(--anun-oscuro);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--anun-font-heading);
  font-size: 20px;
  line-height: 1.32;
  margin: 0;
  overflow: hidden;
  text-transform: uppercase;
}

.anunciante-card-desc {
  color: var(--anun-gris);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--anun-font-base);
  font-size: 16px;
  line-height: 1.45;
  margin: 0;
  overflow: hidden;
}

.anunciante-card-arrow {
  align-items: center;
  background-color: var(--anun-blanco);
  border: 1px solid rgba(20, 25, 35, 0.1);
  border-radius: 50%;
  bottom: 14px;
  box-shadow: 0 3px 8px rgba(7, 15, 30, 0.06);
  color: var(--anun-oscuro);
  display: flex;
  font-size: 13px;
  height: 28px;
  justify-content: center;
  position: absolute;
  right: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
  width: 28px;
}

.anunciantes-sin-resultados {
  padding: 32px 5px;
  text-align: center;
}

.anunciantes-sin-resultados-titulo {
  color: var(--anun-oscuro);
  font-family: var(--anun-font-heading);
  font-size: 22px;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.anunciantes-sin-resultados-sub {
  color: var(--anun-gris);
  font-family: var(--anun-font-base);
  font-size: 16px;
  margin: 0;
}

/* Error de la petición AJAX: discreto, no reemplaza el grid — solo avisa. */
.anunciantes-error-ajax {
  background-color: #fef2f2;
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 10px;
  color: #b91c1c;
  font-family: var(--anun-font-base);
  font-size: 13.5px;
  margin: 0 5px 24px;
  padding: 12px 16px;
}

/* ------------------------------------------------------------------ */
/* Modal de detalle (SweetAlert2 + customClass)                        */
/* ------------------------------------------------------------------ */

/* .arkin-anunciante-modal es la clase exclusiva de customClass.container: vive
   en el <div class="swal2-container"> raíz de ESTA instancia y todo lo demás
   se prefija con ella para no afectar ningún otro Swal.fire() del sitio.
   Overlay: oscuro semitransparente + blur perceptible pero fino — el sitio
   sigue reconocible detrás, sensación de profundidad (no negro sólido). */
.arkin-anunciante-modal.swal2-backdrop-show {
  background: rgba(8, 18, 32, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 220ms ease, backdrop-filter 220ms ease, -webkit-backdrop-filter 220ms ease;
}

/* Ancho: min(92vw, 1080px) — suficiente para 2 columnas con presencia real,
   no una franja. overflow:hidden (recorta las esquinas redondeadas y
   contiene la animación de "puerta corrediza" del panel derecho sin que se
   salga del recuadro). min-height SOLO se fuerza cuando hay ancho Y alto de
   sobra para 2 columnas (ver @media combinada más abajo) — en 1 columna
   (mobile o pantallas bajas) la altura la sigue dando el contenido, nunca
   un mínimo fijo que no le queda a un teléfono. max-height:86dvh es la
   protección extrema permanente; el fallback de scroll real de verdad
   solo vive en el @media(max-height:520px) al final del archivo. */
.arkin-anunciante-modal .anunciante-modal-popup {
  border: 1px solid rgba(20, 25, 35, 0.06);
  border-radius: 24px;
  box-shadow:
    0 24px 70px rgba(7, 15, 30, 0.2),
    0 5px 20px rgba(7, 15, 30, 0.08);
  display: block;
  margin: 0 auto;
  max-height: 86dvh;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: min(92vw, 940px);
}

@media (max-width: 600px) {
  .arkin-anunciante-modal .anunciante-modal-popup {
    width: calc(100vw - 20px);
  }
}

@media (max-width: 480px) {
  .arkin-anunciante-modal .anunciante-modal-popup {
    border-radius: 18px;
  }
}

/* Neutraliza el margin/padding default que SweetAlert2 aplica a
   .swal2-html-container (1em 1.6em 0.3em por defecto) — esta customClass
   gobierna, no el estilo base de la librería. height:auto por default (1
   columna); pasa a 100% solo en la combinación ancho+alto de 2 columnas. */
.arkin-anunciante-modal .anunciante-modal-container.swal2-html-container {
  height: auto;
  margin: 0;
  max-height: none;
  min-height: 0;
  overflow: visible;
  padding: 0;
}

/* Flota sobre el modal (position:absolute), no participa del layout ni
   consume altura del popup. */
.arkin-anunciante-modal .swal2-close.anunciante-modal-cerrar {
  align-items: center;
  background-color: var(--anun-blanco);
  border: 1px solid rgba(20, 25, 35, 0.08);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(7, 15, 30, 0.14);
  color: var(--anun-oscuro);
  display: flex;
  font-size: 17px;
  height: 46px;
  justify-content: center;
  margin: 0;
  position: absolute;
  right: 14px;
  top: 14px;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  width: 46px;
  z-index: 3;
}

@media (max-width: 480px) {
  .arkin-anunciante-modal .swal2-close.anunciante-modal-cerrar {
    height: 42px;
    right: 12px;
    top: 12px;
    width: 42px;
  }
}

.arkin-anunciante-modal .swal2-close.anunciante-modal-cerrar:hover {
  background-color: #f6f7f9;
  box-shadow: 0 10px 24px rgba(7, 15, 30, 0.18);
  color: var(--anun-oscuro);
  transform: scale(1.04);
}

/* Mobile-first: una columna (imagen arriba, contenido abajo). Desde 768px
   de ANCHO (desktop/laptop/tablet horizontal) se activa el grid de 2
   columnas y se queda ahí siempre — la altura del viewport NUNCA decide el
   número de columnas, solo compacta padding/gaps/tamaños (ver los
   @media(max-height) más abajo, que no tocan el layout, solo el tamaño). */
.anunciante-modal {
  text-align: left;
}

@media (min-width: 768px) {
  /* container-type:inline-size habilita las unidades cqw usadas más abajo
     por la animación de entrada de la imagen (centrarla en el popup sin
     importar el ancho real de columna que le toque). grid-template-columns
     usa la custom property --anun-modal-col-izq, que anunciantes.js calcula
     en cada apertura a partir del aspect ratio REAL de la imagen
     (naturalWidth/naturalHeight) y la altura real disponible del popup —
     así el ancho de columna que le toca a la imagen es EXACTAMENTE el que
     necesita para llenar su columna sin aire alrededor, sin recortarla y
     sin hardcodear nada por anunciante. Se usa un PORCENTAJE (no fr) a
     propósito: un porcentaje consume exactamente esa fracción del ancho
     disponible (descontado el gap) sin importar qué haga la columna
     derecha (1fr), mientras que dos valores en fr solo definen una
     proporción ENTRE ellos — con "1fr" fijo a la derecha, un valor en fr a
     la izquierda no da el ancho real que el cálculo espera. El valor por
     default (44%) solo aplica antes de que JS termine de medir, o si no
     hay imagen real (placeholder). */
  .anunciante-modal {
    align-items: stretch;
    container-name: anun-modal;
    container-type: inline-size;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, var(--anun-modal-col-izq, 44%)) minmax(0, 1fr);
    height: 100%;
  }

  /* Más contenido que antes: modal compacto y proporcionado, no gigante. */
  .arkin-anunciante-modal .anunciante-modal-popup {
    min-height: clamp(440px, 58dvh, 580px);
  }

  .arkin-anunciante-modal .anunciante-modal-container.swal2-html-container {
    height: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Animación de apertura/cierre — V5.1                                 */
/* ------------------------------------------------------------------ */
/* 1 columna (mobile/tablet angosto): fade+scale/fade+subida simples y
   rápidos — no hay "puerta" de 2 columnas que abrir.
   2 columnas (desktop, ver @media(min-width:768px) más abajo), APERTURA
   (1050ms totales desde el click — dos rondas de ajuste de velocidad
   sobre la v5.1 original (1450ms), mismas proporciones/fases, solo
   comprimidas en el tiempo):
     0-160ms     overlay/popup: fade de opacidad.
     130-377ms   imagen sola, COMPLETA y CENTRADA en el ancho total del
                 popup (no en su columna final): fade + scale .96→1. El
                 offset de centrado (--anun-img-center-offset) no se
                 adivina con cqw: JS mide popupCenterX e
                 imageFinalCenterX reales (ajustarColumnaImagenModal en
                 anunciantes.js) y calcula la diferencia.
     377-506ms   pausa: la imagen se sostiene centrada, sin moverse.
     506-1050ms  la imagen se desliza a su columna final IZQUIERDA a la
                 vez que el panel derecho "emerge de detrás" de ella
                 (opacity 0→1 + translateX, empezando oculto bajo el
                 borde opaco de la columna de imagen — position/z-index
                 más abajo). Nunca hay un bloque blanco completo desde
                 el frame 1: el panel está invisible hasta este momento.
   CIERRE (900ms), reverso exacto:
     0-470ms     el panel se retrae y se esconde de nuevo detrás de la
                 imagen.
     0-520ms     la imagen regresa al centro del popup.
     520-650ms   pausa centrada (igual que en la apertura, invertida).
     650-830ms   la imagen se desvanece (fade + scale 1→.96), ya
                 centrada.
     720-900ms   overlay/popup: fade de opacidad de salida — termina
                 último a propósito (ver evitarCierrePrematuroPor...
                 AnimacionInterna en anunciantes.js: los hijos cortan la
                 propagación de su animationend para que SweetAlert2
                 nunca reciba un animationend prematuro burbujeado y
                 quite el DOM antes de que termine esta secuencia).
   Todo respeta prefers-reduced-motion más abajo. */
@keyframes anunciante-modal-popup-entrada {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes anunciante-modal-popup-salida {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes anunciante-modal-img-entrada {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes anunciante-modal-panel-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2 columnas — apertura de la imagen: aparece centrada en TODO el ancho
   del popup (fade + scale, 0%-26.8% ≈ 180-520ms), se sostiene centrada
   (26.8%-40.9% ≈ 520-700ms) y RECIÉN DESPUÉS se desliza a su columna
   final izquierda (40.9%-100% ≈ 700-1450ms). --anun-img-center-offset lo
   mide JS en tiempo real, nunca se adivina en CSS. */
@keyframes anunciante-modal-img-entrada-2col {
  0% {
    opacity: 0;
    transform: translateX(var(--anun-img-center-offset, 0px)) scale(0.96);
  }
  26.8% {
    opacity: 1;
    transform: translateX(var(--anun-img-center-offset, 0px)) scale(1);
  }
  40.9% {
    opacity: 1;
    transform: translateX(var(--anun-img-center-offset, 0px)) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* 2 columnas — cierre de la imagen: reverso EXACTO de la de arriba.
   Regresa al centro (0%-62.6% ≈ 0-720ms), se sostiene (62.6%-78.3% ≈
   720-900ms) y recién entonces se desvanece, ya centrada (78.3%-100% ≈
   900-1150ms). Mismo --anun-img-center-offset medido al abrir. */
@keyframes anunciante-modal-img-salida-2col {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  62.6% {
    opacity: 1;
    transform: translateX(var(--anun-img-center-offset, 0px)) scale(1);
  }
  78.3% {
    opacity: 1;
    transform: translateX(var(--anun-img-center-offset, 0px)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--anun-img-center-offset, 0px)) scale(0.96);
  }
}

/* 2 columnas — el panel "emerge de detrás" de la imagen: arranca
   desplazado bajo su borde (la columna de imagen es opaca durante la
   animación, ver @media(min-width:768px) más abajo, y tiene z-index
   superior) y casi invisible — la superficie del panel se revela
   progresivamente al deslizarse, nunca aparece de golpe. */
@keyframes anunciante-modal-panel-entrada-2col {
  from {
    opacity: 0;
    transform: translateX(-56px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Reverso EXACTO: el panel se retrae y vuelve a ocultarse detrás de la
   imagen. */
@keyframes anunciante-modal-panel-salida-2col {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-56px);
  }
}

.arkin-anunciante-modal .anunciante-modal-animacion-entrada {
  animation: anunciante-modal-popup-entrada 160ms ease-out both;
}

/* Cierre en 1 columna (sin animación propia del panel): popup + imagen
   se desvanecen juntos, rápido. En 2 columnas esta duración se
   sobrescribe más abajo para darle tiempo a la secuencia completa. */
.arkin-anunciante-modal .anunciante-modal-animacion-salida {
  animation: anunciante-modal-popup-salida 160ms ease-in both;
}

.anunciante-modal-animacion-entrada .anunciante-modal-img {
  animation: anunciante-modal-img-entrada 270ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anunciante-modal-animacion-entrada .anunciante-modal-body {
  animation: anunciante-modal-panel-fade 190ms cubic-bezier(0.22, 1, 0.36, 1) 40ms both;
}

@media (min-width: 768px) {
  /* Opacas + apiladas SOLO mientras dura la animación (entrada/salida):
     así la columna de imagen puede taparle el paso al panel cuando este
     "emerge de/vuelve a detrás" de ella, sin depender de su proporción
     (object-fit:contain puede dejar aire transparente alrededor de la
     imagen misma). En el estado quieto (sin estas clases) no aplica. */
  .anunciante-modal-animacion-entrada .anunciante-modal-img,
  .anunciante-modal-animacion-salida .anunciante-modal-img {
    background-color: #fff;
    position: relative;
    z-index: 2;
  }

  .anunciante-modal-animacion-entrada .anunciante-modal-body,
  .anunciante-modal-animacion-salida .anunciante-modal-body {
    position: relative;
    z-index: 1;
  }

  /* Apertura: imagen centrada→columna final (1270ms + 180ms delay =
     1450ms) y panel emergiendo detrás (750ms + 700ms delay = 1450ms) —
     ambas terminan exactamente a la vez. El popup solo hace su fade de
     220ms normal (fase 1, overlay). */
  .anunciante-modal-animacion-entrada .anunciante-modal-img {
    animation: anunciante-modal-img-entrada-2col 920ms cubic-bezier(0.22, 1, 0.36, 1) 130ms both;
  }

  .anunciante-modal-animacion-entrada .anunciante-modal-body {
    animation: anunciante-modal-panel-entrada-2col 540ms cubic-bezier(0.22, 1, 0.36, 1) 510ms both;
  }

  /* Cierre: panel se retrae (650ms, sin delay), imagen vuelve al centro
     y se desvanece (1150ms, sin delay) y el popup se desvanece AL FINAL
     (250ms con 1000ms de delay = termina a los 1250ms) — es el último en
     terminar a propósito, ver comentario grande arriba. */
  .anunciante-modal-animacion-salida .anunciante-modal-img {
    animation: anunciante-modal-img-salida-2col 830ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .anunciante-modal-animacion-salida .anunciante-modal-body {
    animation: anunciante-modal-panel-salida-2col 470ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .arkin-anunciante-modal .anunciante-modal-animacion-salida {
    animation: anunciante-modal-popup-salida 180ms ease-in 720ms both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arkin-anunciante-modal .anunciante-modal-animacion-entrada,
  .arkin-anunciante-modal .anunciante-modal-animacion-salida,
  .anunciante-modal-animacion-entrada .anunciante-modal-img,
  .anunciante-modal-animacion-entrada .anunciante-modal-body,
  .anunciante-modal-animacion-salida .anunciante-modal-img,
  .anunciante-modal-animacion-salida .anunciante-modal-body {
    animation: none;
  }
}

/* No usamos showConfirmButton/showCancelButton: neutraliza el margen que
   SweetAlert2 reserva por defecto para .swal2-actions aunque esté vacío. */
.arkin-anunciante-modal .anunciante-modal-popup .swal2-actions {
  margin: 0;
}

/* Imagen COMPLETA, sin recorte, sin deformar y sin stage/navy: vive
   directamente sobre el blanco del modal, con una sombra tenue (no
   marco/borde) que la separa del fondo. El wrapper es un flex centrado sin
   fondo/borde/aspect-ratio propio — la caja NUNCA se ve, solo la imagen.
   Mobile (1 columna): limitada por ancho Y alto máximos fijos (clamp con
   dvh) porque no hay columna hermana que le dé una altura de referencia.
   Desktop (2 columnas, ver @media(min-width:768px) más abajo): el wrapper
   se estira (stretch, default de grid) a la altura de la columna de
   contenido, y max-height:100% dentro de esa misma sección deja que la
   imagen use TODA esa altura real en vez de un tope fijo — así ninguna
   imagen se ve diminuta ni se decide el tamaño mirando una sola imagen. */
.anunciante-modal-img {
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 20px 20px 4px;
}

.anunciante-modal-img img {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(7, 15, 30, 0.10), 0 2px 6px rgba(7, 15, 30, 0.05);
  display: block;
  height: auto;
  max-height: clamp(160px, 28dvh, 260px);
  max-width: min(100%, 440px);
  object-fit: contain;
  outline: 0;
  width: auto;
}

/* height (no max-height) es la dimensión DEFINIDA que aspect-ratio necesita
   para derivar el ancho — sin esto, al no tener contenido propio con
   tamaño natural, el placeholder colapsa al tamaño de la "A" en vez de
   ocupar el espacio real de la imagen. */
.anunciante-modal-placeholder {
  align-items: center;
  aspect-ratio: 4 / 3;
  background-color: var(--anun-oscuro);
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(7, 15, 30, 0.10), 0 2px 6px rgba(7, 15, 30, 0.05);
  display: flex;
  height: clamp(160px, 28dvh, 260px);
  justify-content: center;
  max-width: min(100%, 440px);
  width: auto;
}

.anunciante-modal-placeholder span {
  color: var(--anun-blanco);
  font-family: var(--anun-font-heading);
  font-size: 44px;
  text-transform: uppercase;
}

.anunciante-modal-body {
  padding: 18px 22px 22px;
}

@media (max-width: 600px) {
  .anunciante-modal-body {
    padding: 12px 16px 18px;
  }

  .anunciante-modal-img {
    padding: 16px 16px 4px;
  }
}

/* Desktop/tablet ancha (2 columnas): la columna imagen ocupa TODO el alto
   disponible (stretch, sin altura fija) y max-height:100% dentro de ese
   espacio real — nunca un valor copiado de una imagen en particular. Sin
   padding lateral derecho (lo da el "gap" del grid); el body pierde su
   padding izquierdo por la misma razón. */
@media (min-width: 768px) {
  /* padding:0 — la columna izquierda ES la imagen, no un rectángulo con
     aire alrededor. El wrapper NO recorta (overflow no se usa aquí para
     eso); overflow:hidden del popup ya contiene el layout y redondea las
     esquinas donde la imagen toca el borde del popup. */
  .anunciante-modal-img {
    height: 100%;
    padding: 0;
  }

  /* width:auto (NUNCA 100% a fuerza): el tamaño de arranque es el
     intrínseco de la imagen, nunca más grande — max-width/max-height solo
     recortan hacia abajo si no cabe, jamás agrandan. Así una imagen
     pequeña no se estira/pixela para "llenar" la columna, y una imagen
     grande siempre se ve COMPLETA (nunca recortada) dentro del espacio
     real disponible (max-height:100% de .anunciante-modal-img, que ya
     tiene height:100% arriba). object-fit:contain (regla base, más abajo)
     es un respaldo defensivo, aunque con width/height:auto el propio
     algoritmo de "elemento reemplazado" del navegador ya preserva la
     proporción sin necesidad de él. */
  .anunciante-modal-img img {
    height: auto;
    margin: 0;
    max-height: 100%;
    max-width: 100%;
    width: auto;
  }

  /* El placeholder necesita su propia altura DEFINIDA (no max-height) para
     que aspect-ratio derive el ancho a partir del alto real disponible. */
  .anunciante-modal-placeholder {
    height: 100%;
    max-width: 100%;
    width: auto;
  }

  /* Columna derecha: padding generoso + columna flex centrada, para que si
     el min-height del popup deja espacio de sobra, el contenido respire
     arriba/abajo en vez de quedar pegado arriba con un hueco abajo. */
  .anunciante-modal-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 40px 36px 0;
  }

  /* Ritmo vertical explícito entre bloques (categoría→título→descripción→
     divider→"Conecta"→íconos→WhatsApp), sin comprimir para "que quepa". */
  .anunciante-modal-categorias {
    margin: 0 0 14px;
  }

  .anunciante-modal-desc {
    font-size: 16.5px;
    line-height: 1.5;
    margin: 0 0 24px;
  }

  .anunciante-modal-contacto {
    padding-top: 22px;
  }

  .anunciante-modal-contacto-heading {
    margin: 0 0 16px;
  }

  .anunciante-modal-links {
    margin: 0 0 24px;
  }

  .anunciante-modal-whatsapp {
    height: 56px;
  }
}

/* align-self:flex-start evita que el flex-column de .anunciante-modal-body
   (desktop) la estire al 100% del ancho — debe medir solo lo que ocupa su
   texto + padding, nunca todo el ancho de la columna derecha. */
.anunciante-modal-categorias {
  align-self: flex-start;
  background-color: #f3f4f6;
  border: 1px solid var(--anun-gris-claro);
  border-radius: 999px;
  color: var(--anun-oscuro);
  display: inline-block;
  font-family: var(--anun-font-etiqueta);
  font-size: 11px;
  letter-spacing: 0.4px;
  margin: 0 0 8px;
  padding: 4px 12px;
  text-transform: uppercase;
  width: fit-content;
}

.anunciante-modal-titulo {
  color: var(--anun-oscuro);
  font-family: var(--anun-font-heading);
  font-size: 23px;
  line-height: 1.18;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.anunciante-modal-desc {
  color: var(--anun-gris);
  font-family: var(--anun-font-base);
  font-size: 16px;
  line-height: 1.42;
  margin: 0 0 14px;
  max-width: 60ch;
  white-space: pre-line;
}

.anunciante-modal-contacto {
  border-top: 1px solid var(--anun-gris-claro);
  padding-top: 14px;
}

.anunciante-modal-contacto-heading {
  color: var(--anun-oscuro);
  font-family: var(--anun-font-heading);
  font-size: 12.5px;
  margin: 0 0 12px;
  text-align: center;
  text-transform: uppercase;
}

/* Redes/sitio web: botones SOLO ÍCONO (logo real vía Font Awesome), circulares,
   con tooltip CSS (data-tooltip) que muestra el nombre al hover/focus. */
.anunciante-modal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 0 16px;
}

.anunciante-modal-link {
  align-items: center;
  background-color: var(--anun-blanco);
  border: 1px solid var(--anun-gris-claro);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(7, 15, 30, 0.06);
  box-sizing: border-box;
  color: var(--anun-oscuro);
  display: inline-flex;
  flex: 0 0 44px;
  font-size: 17px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: relative;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
  width: 44px;
}

@media (max-width: 600px) {
  .anunciante-modal-link {
    flex-basis: 40px;
    font-size: 16px;
    height: 40px;
    width: 40px;
  }
}

.anunciante-modal-link i {
  line-height: 1;
  margin: 0;
  width: auto;
}

/* Hover ARKIN (no colores oficiales de cada red): fondo navy + ícono blanco +
   leve elevación. */
.anunciante-modal-link:hover,
.anunciante-modal-link:focus-visible {
  background-color: var(--anun-oscuro);
  border-color: var(--anun-oscuro);
  box-shadow: 0 8px 18px rgba(7, 15, 30, 0.16);
  color: var(--anun-blanco);
  outline: none;
  transform: translateY(-2px);
}

/* Tooltip: burbuja oscura discreta arriba del ícono, oculta hasta hover/focus. */
.anunciante-modal-link::after,
.anunciante-modal-link::before {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.anunciante-modal-link::after {
  background-color: var(--anun-oscuro);
  border-radius: 6px;
  bottom: calc(100% + 10px);
  color: var(--anun-blanco);
  content: attr(data-tooltip);
  font-family: var(--anun-font-base);
  font-size: 12px;
  left: 50%;
  padding: 5px 10px;
  transform: translate(-50%, 4px);
  white-space: nowrap;
}

.anunciante-modal-link::before {
  border: 5px solid transparent;
  border-top-color: var(--anun-oscuro);
  bottom: calc(100% + 5px);
  content: "";
  left: 50%;
  transform: translate(-50%, 4px);
}

.anunciante-modal-link:hover::after,
.anunciante-modal-link:hover::before,
.anunciante-modal-link:focus-visible::after,
.anunciante-modal-link:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* CTA principal: navy/ARKIN, centrado en desktop (360-420px), full-width en
   móvil. La flecha se desplaza al hover en vez de solo oscurecer el fondo. */
.anunciante-modal-whatsapp {
  align-items: center;
  background-color: var(--anun-oscuro);
  border-radius: 13px;
  color: var(--anun-blanco);
  display: flex;
  font-family: var(--anun-font-heading);
  font-size: 15px;
  height: 52px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 100%;
  padding: 0 20px;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  width: min(100%, 400px);
}

@media (max-width: 600px) {
  .anunciante-modal-whatsapp {
    width: 100%;
  }
}

.anunciante-modal-whatsapp:hover,
.anunciante-modal-whatsapp:focus-visible {
  background-color: #232c3d;
  box-shadow: 0 8px 20px rgba(7, 15, 30, 0.22);
  outline: none;
  transform: translateY(-1px);
}

.anunciante-modal-whatsapp:hover .anunciante-modal-whatsapp-flecha,
.anunciante-modal-whatsapp:focus-visible .anunciante-modal-whatsapp-flecha {
  transform: translateX(3px);
}

.anunciante-modal-whatsapp-grupo {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.anunciante-modal-whatsapp-grupo i {
  color: var(--anun-whatsapp);
  font-size: 19px;
}

.anunciante-modal-whatsapp-flecha {
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  transition: transform 0.2s ease;
}

/* ------------------------------------------------------------------ */
/* Responsive por ALTURA (no por ancho): antes de permitir scroll,      */
/* se reduce imagen/padding/gaps/título en pantallas bajas.             */
/* ------------------------------------------------------------------ */

@media (max-height: 680px) {
  .anunciante-modal-img {
    padding: 12px 16px 4px;
  }

  /* No se fuerza max-width aquí: el max-height (clamp con dvh) de la regla
     base ya reduce la imagen en pantallas bajas respetando su proporción
     real, sin aplastar el ancho de imágenes horizontales. */
  .anunciante-modal-placeholder {
    max-width: 300px;
  }

  .anunciante-modal-body {
    padding: 10px 20px 14px;
  }

  .anunciante-modal-categorias {
    margin-bottom: 6px;
  }

  .anunciante-modal-titulo {
    font-size: 20px;
    margin-bottom: 4px;
  }

  .anunciante-modal-desc {
    margin-bottom: 10px;
  }

  .anunciante-modal-contacto {
    padding-top: 10px;
  }

  .anunciante-modal-contacto-heading {
    margin-bottom: 8px;
  }

  .anunciante-modal-links {
    margin-bottom: 10px;
  }

  .anunciante-modal-link {
    flex-basis: 40px;
    font-size: 16px;
    height: 40px;
    width: 40px;
  }

  .anunciante-modal-whatsapp {
    height: 46px;
  }
}

/* Desktop ancho pero bajo: la compactación de arriba no debe reintroducir
   padding izquierdo en la columna derecha — el gap del grid ya separa las
   columnas, igual que en el desktop normal. */
@media (min-width: 768px) and (max-height: 680px) {
  .anunciante-modal-body {
    padding-left: 0;
  }
}

/* Fallback EXTREMO (pantalla excepcionalmente baja): solo aquí se permite
   scroll interno real, como último recurso tras agotar la reducción de
   arriba. */
@media (max-height: 520px) {
  .arkin-anunciante-modal .anunciante-modal-popup {
    max-height: 94vh;
    overflow: hidden;
  }

  .arkin-anunciante-modal .anunciante-modal-container.swal2-html-container {
    height: auto;
    max-height: 94vh;
    overflow-y: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Landing de categorías (/anunciantes/) — franja navy + portada +      */
/* intro + grid de categorías. Coordinado con la vista de UNA categoría */
/* (template_parts/anunciantes/vista-categoria.php, otra sesión): estas  */
/* reglas cubren SOLO la landing + el componente de portada compartido   */
/* (.anunciantes-franja-navy, .anunciantes-portada*) — la vista de       */
/* categoría añade sus propias clases (toolbar/grid ya existentes más    */
/* arriba + transición AJAX) sin tocar nada de este bloque.              */
/* ------------------------------------------------------------------ */

/* Franja navy: reemplaza al header global oculto (mismo criterio que el
   comentario de archive-anunciante.php) tanto en la landing como en la
   vista de categoría — logo blanco, centrado, sin menú/buscador/carrito. */
.anunciantes-franja-navy {
  background-color: var(--anun-oscuro);
  padding: 16px 0;
}

.anunciantes-franja-navy-inner {
  display: flex;
  justify-content: center;
}

.anunciantes-franja-navy-logo {
  display: inline-flex;
  line-height: 0;
}

.anunciantes-franja-navy-logo img {
  display: block;
  height: 26px;
  width: auto;
}

@media (max-width: 600px) {
  .anunciantes-franja-navy {
    padding: 13px 0;
  }

  .anunciantes-franja-navy-logo img {
    height: 21px;
  }
}

/* Portada (foto + overlay + eyebrow/título/texto): componente compartido
   por la portada GENERAL (Configuración) y la portada de CADA categoría
   (portada_categoria). Overlay vía ::after sobre .anunciantes-portada-media
   (no sobre la imagen directamente) para que funcione igual CON o SIN foto
   — sin imagen, el fondo navy + overlay ya dejan una franja sólida, nunca
   un hueco roto (mismo criterio de fallback que el resto del módulo). */
.anunciantes-portada {
  align-items: flex-end;
  display: flex;
  min-height: 260px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.anunciantes-portada-media {
  background-color: var(--anun-oscuro);
  inset: 0;
  position: absolute;
}

.anunciantes-portada-media::after {
  background: linear-gradient(120deg, rgba(20, 25, 35, 0.86), rgba(20, 25, 35, 0.58));
  content: "";
  inset: 0;
  position: absolute;
}

.anunciantes-portada-img {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

.anunciantes-portada-inner {
  padding: 32px 5px 28px;
  position: relative;
  z-index: 1;
}

/* Sobre foto: eyebrow/título/texto pasan a blanco — mismo tratamiento que
   ya existía para .anunciantes-banner, ahora en el componente compartido. */
.anunciantes-portada .anunciantes-eyebrow {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--anun-blanco);
}

.anunciantes-portada .anunciantes-heading {
  color: var(--anun-blanco);
  font-size: 32px;
  margin: 0 0 12px;
  max-width: 720px;
}

.anunciantes-portada-texto {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--anun-font-base);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  max-width: 560px;
}

@media (max-width: 900px) {
  .anunciantes-portada {
    min-height: 210px;
  }

  .anunciantes-portada .anunciantes-heading {
    font-size: 27px;
  }
}

@media (max-width: 600px) {
  .anunciantes-portada {
    min-height: 170px;
  }

  .anunciantes-portada-inner {
    padding: 22px 5px 20px;
  }

  .anunciantes-portada .anunciantes-heading {
    font-size: 21px;
  }

  .anunciantes-portada-texto {
    font-size: 14px;
  }
}

/* Intro breve (pill "Anunciantes" + heading + subtítulo) entre la portada
   general y el grid — copy fija del template, no administrable (solo los
   campos de portada lo son, ver plugin sección 9). */
.anunciantes-landing {
  padding: 24px 5px 60px;
}

/* El margen/padding de arriba apilado con el de .anunciantes-toolbar y
   .anunciantes-landing-intro (cada uno con su propio margin-top/bottom)
   era la causa real del hueco enorme bajo la portada: tres espacios
   independientes sumándose en vez de un solo ritmo vertical. display:flex
   + gap aquí reemplaza esa cadena de márgenes — un solo valor entre
   toolbar/intro/grid, y CERO espacio reservado si alguno de esos hijos no
   se imprime (gap solo cuenta entre hijos que existen en el DOM). */
main.contenedor.anunciantes-landing {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-x: clip;
  /* El "CSS adicional" del Personalizador trae una regla global
     main.contenedor{padding-top:0 !important} (pensada para otra pantalla,
     la de un título de página vacío) que por especificidad le gana al
     padding-top de .anunciantes-landing de abajo. En vez de tocar ese CSS
     global (afectaría otras páginas), lo neutralizamos aquí con un
     selector más específico — scopeado solo a esta vista. */
  padding-top: 24px !important;
}

.anunciantes-landing-intro {
  margin: 0;
  max-width: 720px;
}

/* Fila superior de la landing: eyebrow "Anunciantes" a la izquierda,
   buscador a la derecha (mismo patrón que el toolbar filtros+buscador de
   vista-categoria.php/vista-todos.php, solo que aquí el "filtro" es el
   eyebrow en vez de pills de categoría). */
.anunciantes-landing-toolbar {
  justify-content: space-between;
  margin: 0;
}

.anunciantes-landing-toolbar .anunciantes-landing-eyebrow {
  margin-bottom: 0;
}

/* Buscador de la landing: ancho propio (no 100%) para poder compartir fila
   con el eyebrow; su alineación a la derecha ya la da justify-content:
   space-between del toolbar. */
.anunciantes-landing-buscador {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0;
  max-width: 100%;
  width: auto;
}

@media (max-width: 600px) {
  /* Mobile: NO comparten fila (spec) — se apilan buscador primero, eyebrow
     después; "order" reacomoda visualmente sin tocar el HTML (que debe
     mantener el eyebrow primero para el layout desktop de arriba). */
  .anunciantes-landing-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
  }

  .anunciantes-landing-toolbar .anunciantes-landing-eyebrow {
    order: 2;
  }

  .anunciantes-landing-toolbar .anunciantes-landing-buscador {
    order: 1;
    width: 100%;
  }
}

/* Entrada a una categoría: "Buscando" en lugar del grid hasta que anunciantes.js
   quite la clase de <html> (ver vista-categoria.php). */
.anunciantes-cargando-categoria {
  display: none;
  margin-top: 0;
}

.anunciantes-cargando .anunciantes-cargando-categoria {
  display: block;
}

.anunciantes-cargando #anunciantes-grid {
  display: none;
}

/* Estado de carga del buscador de la landing: marca (azul Arkin, tipografía
   de títulos) y tarjetas en skeleton con la misma proporción que las reales. */
.anunciantes-landing-cargando-texto {
  align-items: center;
  color: var(--anun-oscuro);
  display: flex;
  font-family: var(--anun-font-heading);
  font-size: 14px;
  gap: 10px;
  letter-spacing: 0.08em;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.anunciantes-landing-cargando-punto {
  animation: anunciantes-pulso 1.2s ease-in-out infinite;
  background: var(--anun-oscuro);
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.anunciantes-skeleton {
  animation: anunciantes-brillo 1.4s ease infinite;
  aspect-ratio: 4 / 5;
  background: linear-gradient(90deg, #eef0f3 25%, #f8f9fb 37%, #eef0f3 63%);
  background-size: 400% 100%;
  border: 1px solid var(--anun-gris-claro);
  border-radius: 14px;
  display: block;
  width: 100%;
}

@keyframes anunciantes-pulso {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes anunciantes-brillo {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .anunciantes-landing-cargando-punto,
  .anunciantes-skeleton {
    animation: none;
  }
}

/* El grid de categorías y los bloques de resultados de la landing se
   alternan con [hidden]; su display propio (grid/flex) lo pisaría sin esta regla. */
#anunciantes-landing-categorias[hidden],
.anunciantes-landing-resultados [hidden] {
  display: none !important;
}

.anunciantes-landing-resultados section + section,
.anunciantes-landing-resultados .anunciantes-sin-resultados {
  margin-top: 40px;
}

.anunciantes-landing-subtitulo {
  color: var(--anun-oscuro);
  font-family: var(--anun-font-heading);
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.anunciantes-landing-buscador .anunciantes-search {
  max-width: 100%;
}

.anunciantes-landing-heading {
  color: var(--anun-oscuro);
  font-family: var(--anun-font-heading);
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.anunciantes-landing-sub {
  color: var(--anun-gris);
  font-family: var(--anun-font-base);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  max-width: 620px;
}

@media (max-width: 600px) {
  .anunciantes-landing {
    padding: 24px 5px 40px;
  }

  .anunciantes-landing-heading {
    font-size: 22px;
  }
}

/* Grid de categorías: 3 columnas desktop / 2 tablet / 1 mobile (spec
   "responsive" landing). */
.anunciantes-categorias-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .anunciantes-categorias-grid {
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .anunciantes-categorias-grid {
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tarjeta de categoría: MISMA imagen que la portada de esa categoría
   (crop 'anunciante_categoria_tarjeta', ~12:5) — nunca dos uploads
   distintos para card/portada (spec punto 5). Enlace real <a>, no botón:
   funciona con o sin JS y la URL siempre es la definitiva de la categoría. */
.anunciante-categoria-card {
  background-color: var(--anun-blanco);
  border: 1px solid rgba(20, 25, 35, 0.08);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(7, 15, 30, 0.04);
  color: inherit;
  display: block;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.anunciante-categoria-card:hover {
  box-shadow: 0 18px 34px rgba(7, 15, 30, 0.14);
  transform: translateY(-4px);
}

.anunciante-categoria-card:hover .anunciante-categoria-card-img img {
  transform: scale(1.05);
}

.anunciante-categoria-card:focus-visible {
  outline: 2px solid var(--anun-oscuro);
  outline-offset: 2px;
}

.anunciante-categoria-card-img {
  aspect-ratio: 12 / 5;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.anunciante-categoria-card-img img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
  width: 100%;
}

.anunciante-categoria-card-placeholder {
  align-items: center;
  background: linear-gradient(135deg, #1c2331, var(--anun-oscuro));
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.anunciante-categoria-card-placeholder span {
  color: var(--anun-blanco);
  font-family: var(--anun-font-heading);
  font-size: 36px;
  opacity: 0.92;
  text-transform: uppercase;
}

.anunciante-categoria-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
}

/* Título + CTA comparten la misma fila (igual al mockup) — la descripción
   va DEBAJO, a todo el ancho de la tarjeta, no apretada contra el CTA. */
.anunciante-categoria-card-top {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.anunciante-categoria-card-titulo {
  color: var(--anun-oscuro);
  font-family: var(--anun-font-heading);
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
}

.anunciante-categoria-card-desc {
  color: var(--anun-gris);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--anun-font-base);
  font-size: 14.5px;
  line-height: 1.45;
  margin: 0;
  overflow: hidden;
}

/* CTA estilo link de texto (no pill/etiqueta): fuente base del sitio, tipo
   oración (no uppercase), SIEMPRE en una sola línea — nowrap + flex-shrink:0
   evitan que "Ver categoría" se parta en 2 líneas cuando el título es largo. */
.anunciante-categoria-card-cta {
  align-items: center;
  color: var(--anun-gris);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--anun-font-base);
  font-size: 13.5px;
  gap: 5px;
  transition: color 0.2s ease, gap 0.2s ease;
  white-space: nowrap;
}

.anunciante-categoria-card:hover .anunciante-categoria-card-cta {
  color: var(--anun-oscuro);
  gap: 9px;
}

/* El reset global del theme (style.css: "svg, img { width:100% }") estira
   cualquier <svg> al ancho de su contenedor — sin este override la flecha
   crecía hasta ocupar todo el ancho disponible del CTA (invisible/deforme,
   nunca un ícono de 13px). */
.anunciante-categoria-card-cta svg {
  flex: 0 0 auto;
  height: 13px;
  width: 13px;
}

@media (max-width: 600px) {
  .anunciante-categoria-card-titulo {
    font-size: 16px;
  }

  .anunciante-categoria-card-cta {
    font-size: 13px;
  }
}

/* ------------------------------------------------------------------ */
/* Vista de UNA categoría: bloque blanco debajo de la portada (eyebrow  */
/* "Anunciantes" + nombre de la categoría + su descripción). Reutiliza  */
/* .anunciantes-eyebrow/.anunciantes-heading base (ya navy-sobre-blanco, */
/* arriba en este archivo) — solo agrega el wrapper y el párrafo.       */
/* ------------------------------------------------------------------ */
.anunciantes-categoria-header {
  margin: 36px 0 8px;
  max-width: 720px;
  padding: 0 5px;
}

.anunciantes-categoria-desc {
  color: var(--anun-gris);
  font-family: var(--anun-font-base);
  font-size: 16px;
  line-height: 1.5;
  margin: 10px 0 0;
  max-width: 620px;
}

@media (max-width: 600px) {
  .anunciantes-categoria-header {
    margin-top: 24px;
  }
}

/* ------------------------------------------------------------------ */
/* Transición al cambiar de categoría (AJAX, sin reload): fade breve en  */
/* portada + header mientras se actualizan — evita flash en blanco,      */
/* imagen rota o el banner/texto anterior visibles a medio actualizar.   */
/* anunciantes.js precarga la imagen nueva (decode()) ANTES de quitar    */
/* estas clases, así el fade siempre termina en la imagen ya lista.      */
/* ------------------------------------------------------------------ */
.anunciantes-portada-media,
.anunciantes-portada-inner,
.anunciantes-categoria-header {
  transition: opacity 180ms ease;
}

.anunciantes-portada.is-transicionando .anunciantes-portada-media,
.anunciantes-portada.is-transicionando .anunciantes-portada-inner,
.anunciantes-categoria-header.is-transicionando {
  opacity: 0.32;
}

@media (prefers-reduced-motion: reduce) {
  .anunciantes-portada-media,
  .anunciantes-portada-inner,
  .anunciantes-categoria-header {
    transition: none;
  }
}

/* Título de la portada de categoría/todos: el nombre/descripción de la
   categoría vive SOLO aquí ahora (el bloque blanco ya no lo repite como
   H1) — este selector es el id_html compartido de
   arkin_anunciantes_portada_html() que usan vista-categoria.php y
   vista-todos.php, NUNCA la portada general de la landing
   (#anunciantes-portada-general, otro id, intacta). */
#anunciantes-portada-categoria .anunciantes-heading {
  font-size: 35px;
}

@media (max-width: 600px) {
  #anunciantes-portada-categoria .anunciantes-heading {
    font-size: 24px;
  }
}

/* "Volver a categorías": enlace real a la landing de categorías (bare
   /anunciantes/), discreto, arriba del eyebrow "Anunciantes" del bloque
   blanco. Único punto de entrada visible a esa landing desde dentro de la
   vista de categoría/todos, ahora que "Todos" ya no lleva ahí. */
.anunciantes-volver-categorias {
  align-items: center;
  color: var(--anun-gris);
  display: flex;
  font-family: var(--anun-font-etiqueta);
  font-size: 12px;
  gap: 6px;
  margin-bottom: 14px;
  text-decoration: none;
  width: fit-content;
  transition: color 0.2s ease, gap 0.2s ease;
}

.anunciantes-volver-categorias:hover {
  color: var(--anun-oscuro);
  gap: 9px;
}

.anunciantes-volver-categorias i {
  font-size: 11px;
}

/* Ajustes que ya estaban en PROD antes de esta subida (se conservan tal cual). */
.anunciantes-franja-navy {
  display: none;
}

body:has(.anunciantes-franja-navy) .header-desk {
  position: static !important;
  top: auto !important;
}

.anunciantes-filtros {
  display: none;
}

/* El menú móvil del tema queda fuera de la pantalla cuando está cerrado; sin
   esto, Chrome Android amplía el viewport al bajar y aparece un espacio blanco
   a la derecha. Solo en /anunciantes/ y solo mientras el menú está cerrado. */
body.post-type-archive-anunciante .mobile-menu-container:not(.menu-open) {
  display: none;
}

/* <picture> de la imagen Mobile: ocupa la misma caja que la imagen de la tarjeta. */
.anunciante-card-img picture {
  display: block;
  height: 100%;
  width: 100%;
}

/* <picture> del modal (imagen de detalle Mobile): ocupa la misma caja que la imagen. */
.anunciante-modal-img picture {
  display: block;
  height: 100%;
  width: 100%;
}