/*
 * V/R Match — estilos exclusivos del centro SEO.
 * Cargado DESPUÉS de /styles.css y limitado a body.seo-landing.
 * No modifica el CSS principal de la aplicación.
 */

body.seo-landing {
  --seo-pink: #ff2f78;
  --seo-pink-2: #e90d63;
  --seo-violet: #714aff;
  --seo-card: rgba(16, 16, 24, .94);
  --seo-card-2: rgba(20, 19, 31, .96);
  --seo-line: rgba(255,255,255,.105);
  --seo-copy: #a9abb8;
  --seo-muted: #858897;
}

.seo-landing .skip-link {position:fixed;left:12px;top:-70px;z-index:9999;background:#fff;color:#111;padding:10px 14px;border-radius:10px;font-weight:900;text-decoration:none}
.seo-landing .skip-link:focus {top:12px}
.seo-landing .info-shell {width:min(1160px,calc(100% - 32px))}

/* Breadcrumb */
.seo-landing .seo-breadcrumb {margin:4px 0 12px}
.seo-landing .seo-breadcrumb ol {display:flex;gap:7px;align-items:center;list-style:none;padding:0;margin:0;color:#777b8c;font-size:10px;flex-wrap:wrap}
.seo-landing .seo-breadcrumb li+li:before {content:"/";margin-right:7px;color:#4e5060}
.seo-landing .seo-breadcrumb a {color:#a7aaba;text-decoration:none}
.seo-landing .seo-breadcrumb a:hover {color:#fff}

/* Hero y visuales */
.seo-landing .seo-hero {grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr)}
.seo-landing .seo-visual-panel {position:relative;padding:0;overflow:hidden;display:block}
.seo-landing .seo-visual-panel picture,
.seo-landing .seo-visual-panel img {display:block;width:100%;height:100%}
.seo-landing .seo-visual-panel img {object-fit:cover;min-height:360px}
.seo-landing .seo-visual-caption {position:absolute;left:18px;right:18px;bottom:18px;padding:13px 15px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(7,7,12,.78);backdrop-filter:blur(12px);display:grid;gap:3px}
.seo-landing .seo-visual-caption strong {font-size:14px;color:#fff}
.seo-landing .seo-visual-caption span {font-size:9px;color:#c1c3ce;letter-spacing:.04em}
.seo-landing .seo-live-status {display:inline-flex;margin-top:14px;color:#8f93a3;font-size:10px}
.seo-landing .seo-live-status.is-ready {color:#68e89d}
.seo-landing .seo-live-status.is-pending {color:#b6a7ff}
.seo-landing .seo-live-status.is-waiting {color:#ffd06e}

/* Texto de contenido */
.seo-landing .seo-copy {padding-bottom:18px}
.seo-landing .seo-prose {max-width:900px;display:grid;gap:13px}
.seo-landing .seo-prose p {margin:0;color:var(--seo-copy);font-size:14px;line-height:1.8}
.seo-landing .seo-card p {font-size:11px}
.seo-landing .seo-local {padding-top:18px}
.seo-landing .seo-chip-row {margin-bottom:14px}

/* Pasos */
.seo-landing .seo-step-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}
.seo-landing .seo-step {display:flex;gap:13px;padding:19px;border:1px solid var(--seo-line);background:linear-gradient(180deg,rgba(22,22,32,.92),rgba(11,11,17,.94));border-radius:20px}
.seo-landing .seo-step-number {width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,47,120,.22),rgba(113,74,255,.22));font-weight:1000;flex:0 0 auto;color:#fff}
.seo-landing .seo-step strong {font-size:14px;color:#fff}
.seo-landing .seo-step p {margin:5px 0 0;color:#9295a4;font-size:10px;line-height:1.55}
.seo-landing .seo-checklist h2,
.seo-landing .seo-safety h2 {font-size:28px;margin:8px 0 12px}
.seo-landing .seo-checklist li {margin:7px 0}
.seo-landing .seo-safety p {font-size:11px;line-height:1.7}
.seo-landing .seo-safety a {display:inline-flex;margin-top:12px;color:#ff70a1;font-size:10px;font-weight:900;text-decoration:none}

/* Rejillas: esta sección corrige los enlaces azules sin formato que se veían en descubrir.html */
.seo-landing .seo-related-grid,
.seo-landing .seo-directory-grid {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  width:100%;
  margin-top:22px;
}

.seo-landing a.seo-related-card,
.seo-landing a.seo-directory-card {
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:9px;
  min-width:0;
  min-height:142px;
  padding:21px 22px;
  border-radius:20px;
  border:1px solid var(--seo-line);
  background:
    radial-gradient(circle at 100% 0%,rgba(113,74,255,.12),transparent 42%),
    linear-gradient(180deg,var(--seo-card-2),var(--seo-card));
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:0 12px 35px rgba(0,0,0,.12);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
  overflow:hidden;
}

.seo-landing a.seo-related-card:hover,
.seo-landing a.seo-directory-card:hover {
  transform:translateY(-4px);
  border-color:rgba(255,47,120,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.28),0 0 0 1px rgba(255,47,120,.06) inset;
  background:
    radial-gradient(circle at 100% 0%,rgba(113,74,255,.20),transparent 46%),
    linear-gradient(180deg,rgba(26,22,39,.98),rgba(15,14,23,.98));
}

.seo-landing a.seo-related-card > span,
.seo-landing a.seo-directory-card > span {
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,47,120,.10);
  border:1px solid rgba(255,47,120,.18);
  color:#ff5e96 !important;
  font-size:9px;
  font-weight:1000;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.seo-landing a.seo-related-card > strong,
.seo-landing a.seo-directory-card > strong {
  display:block;
  width:100%;
  color:#fff !important;
  font-size:clamp(17px,1.45vw,21px);
  line-height:1.22;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}

.seo-landing a.seo-related-card > small,
.seo-landing a.seo-directory-card > small {
  display:block;
  margin-top:auto;
  color:#999cab !important;
  font-size:11px;
  line-height:1.45;
}

.seo-landing a.seo-related-card:hover > small,
.seo-landing a.seo-directory-card:hover > small {color:#ff8bb3 !important}

/* Separación y legibilidad del directorio */
.seo-landing #ciudades.info-section,
.seo-landing #guias.info-section {padding-top:clamp(44px,6vw,78px)}
.seo-landing #ciudades .info-section-head,
.seo-landing #guias .info-section-head {max-width:820px}
.seo-landing #ciudades .info-section-head p,
.seo-landing #guias .info-section-head p {max-width:720px}

/* CTA final */
.seo-landing .seo-final-cta {margin:42px 0 20px;padding:clamp(28px,5vw,54px);border:1px solid rgba(255,47,120,.24);border-radius:28px;background:radial-gradient(circle at 15% 0%,rgba(255,47,120,.18),transparent 42%),radial-gradient(circle at 90% 100%,rgba(113,74,255,.12),transparent 38%),linear-gradient(180deg,#15151f,#0d0d14)}
.seo-landing .seo-final-cta h2 {font-size:clamp(30px,5vw,52px);max-width:800px;margin:8px 0 12px}
.seo-landing .seo-final-cta p {max-width:700px;color:#9da0ae;line-height:1.65}
.seo-landing .seo-final-cta .btn {margin-top:16px}
.seo-landing .seo-reviewed {color:#686b79;font-size:9px;line-height:1.5;margin:18px 0}
.seo-landing .info-faq summary {font-size:13px}
.seo-landing .info-faq p {font-size:11px}
.seo-landing .info-note {font-size:11px}

@media (max-width:900px) {
  .seo-landing .seo-related-grid,
  .seo-landing .seo-directory-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:820px) {
  .seo-landing .seo-hero {grid-template-columns:1fr}
  .seo-landing .seo-step-list {grid-template-columns:1fr}
  .seo-landing .seo-visual-panel img {min-height:300px}
}

@media (max-width:560px) {
  .seo-landing .info-shell {width:min(calc(100% - 20px),1160px)}
  .seo-landing .seo-related-grid,
  .seo-landing .seo-directory-grid {grid-template-columns:1fr;gap:11px}
  .seo-landing a.seo-related-card,
  .seo-landing a.seo-directory-card {min-height:124px;padding:18px}
  .seo-landing .seo-breadcrumb ol {align-items:flex-start;flex-wrap:wrap}
  .seo-landing .seo-visual-panel img {min-height:240px}
  .seo-landing .seo-prose p {font-size:12px}
  .seo-landing .seo-final-cta {padding:26px 20px}
}