/* =========================
   Dominyum — style.css PRO (LIMPIO)
   Home + Resultados + Legales
   Responsive perfecto (sin duplicados)
   UTF-8 OK
   ========================= */

/* Reset base */
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
:root{
  --bg:#0b0f17;
  --text:#eaf0ff;
  --muted:#b8c4e6;
  --border: rgba(255,255,255,.14);
  --card: rgba(255,255,255,.08);

  --primary:#7c3aed;
  --primary2:#a78bfa;

  --good1:#00ff88;
  --good2:#00f7ff;

  /* granate oscuro */
  --dark4000:#400000;
}

html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{color:inherit}
.hidden{display:none !important}

/* iOS/Safari: evita estilos raros en inputs */
input,button{ -webkit-appearance:none; appearance:none; }

/* Accesibilidad: focus visible */
:focus-visible{
  outline:2px solid rgba(167,139,250,.9);
  outline-offset:2px;
  border-radius:12px;
}

/* Safe-area (iPhone con notch) */
.container{
  max-width:1080px;
  margin:0 auto;
  padding:
    0
    max(18px, env(safe-area-inset-right))
    0
    max(18px, env(safe-area-inset-left));
}

/* =========================
   LOGO
   ========================= */
.logo-img{
  height:clamp(30px,4vw,100px);
  width:auto;
  display:block;
}

/* =========================
   HOME
   ========================= */
.page-home .hero{
  /* iOS moderno: evita el bug del 100vh */
  min-height:86vh;
  min-height:86svh;

  /* IMPORTANTE: el hero es layout vertical */
  display:flex;
  flex-direction:column;
  align-items:stretch;

  position:relative;
  overflow:hidden;
  padding:26px 0 18px;

  background:
    radial-gradient(1000px 600px at 15% 15%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 520px at 85% 25%, rgba(0,255,200,.18), transparent 60%),
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.78)),
    url("img/fondo.jpg") center 20%/cover no-repeat;
}

.hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:950;color:#0b0f17;
  background:linear-gradient(135deg,var(--good1),var(--good2));
  box-shadow:0 18px 50px rgba(0,255,136,.14);
}
.brand-name{font-weight:950;font-size:16px;letter-spacing:.2px}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  font-weight:850;color:rgba(255,255,255,.92);
  white-space:nowrap;
  max-width:100%;
}

.hero-kicker{
  margin:0 0 6px;
  color:rgba(255,255,255,.85);
  font-weight:850;
  font-size:14px;
}

.hero-title{
  margin:0 0 16px;
  font-size:42px;
  line-height:1.05;
  letter-spacing:-.9px;
  font-weight:950;
  text-shadow:0 14px 60px rgba(0,0,0,.45);
}
.hero-title span{color:var(--primary2)}

/* Barra de búsqueda PRO */
.searchbar{
  width:100%;
  display:flex;
  align-items:stretch;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}

.searchbar input{
  flex:1;
  border:0;
  outline:none;
  padding:16px 14px;
  font-size:16px;
  font-weight:800;
  color:#111827;
  min-width:0;
}

.searchbar button{
  border:0;
  padding:0 16px;
  min-width:190px;
  cursor:pointer;
  font-weight:950;
  font-size:16px;
  color:#fff;
  background:linear-gradient(90deg,var(--primary),#5b21b6);
  display:flex;align-items:center;justify-content:center;gap:10px;
  touch-action:manipulation;
}
.searchbar button:hover{opacity:.96}
.searchbar .icon{font-size:16px}

/* Chips */
.trust{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.tag{
  padding:9px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  font-weight:850;
  color:rgba(255,255,255,.92);
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

/* SEO bloque */
.seo-text{
  margin:26px auto 0;
  max-width:760px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
}
.seo-text h2{
  margin:0 0 10px;
  font-size:18px;
  font-weight:950;
}
.seo-list{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.55;
  font-weight:750;
  font-size:14px;
}
.seo-list li{margin:6px 0}

/* Fade abajo */
.wave{
  position:absolute;left:-2%;right:-2%;bottom:-1px;height:120px;
  background:linear-gradient(to top,#0b0f17 8%,transparent 100%);
}

/* =========================
   RESULTADOS
   ========================= */
.page-results{
  min-height:100vh;
  min-height:100svh;
  background:
    radial-gradient(900px 520px at 12% 10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 12%, rgba(0,255,200,.12), transparent 60%),
    linear-gradient(#0b0f17, #0b0f17);
}

.results-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  margin:18px 0 8px;
  flex-wrap:wrap;
}
.backlink{
  color:#c7d6ff;
  text-decoration:none;
  font-weight:900;
}
.backlink:hover{opacity:.9}

.results-title{
  margin:10px 0 14px;
  font-size:30px;
  font-weight:950;
  letter-spacing:-.6px;
  line-height:1.15;
}
.results-title span{color:var(--primary2)}

.results-bar{
  display:flex;
  gap:12px;
  align-items:stretch;
  justify-content:space-between;
  margin:0 0 14px;
  flex-wrap:wrap;
}

.countbox{
  flex:1;
  min-width:260px;
  padding:14px;
  border-radius:18px;
  background:var(--card);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
}
.countbox-label{color:#c7d6ff;font-weight:850;font-size:13px}
.countbox-time{font-size:28px;font-weight:950;color:#00f7ff;margin-top:6px}
.countbox-note{color:rgba(255,255,255,.70);font-size:12px;margin-top:6px}

.filterbox{
  width:340px;
  min-width:260px;
  flex:0 0 auto;
}
.filterbox input{
  width:100%;
  padding:14px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--card);
  color:#fff;
  outline:none;
  font-weight:800;
}

/* Grid */
.grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.card{
  padding:16px;
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
}
.card-domain{
  font-weight:950;
  font-size:18px;
  word-break:break-word;
}
.urgent{
  margin-top:10px;
  display:inline-block;
  padding:10px 12px;
  border-radius:14px;
  font-weight:950;
  color:#fff;
  background:linear-gradient(90deg, rgba(255,0,60,.92), rgba(255,0,200,.78));
}
.card-actions{
  margin-top:14px;
  display:flex;
  gap:12px;
}

/* Botones */
.btn{
  border:0;
  border-radius:16px;
  padding:12px 14px;
  font-weight:950;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1;
  user-select:none;
  touch-action:manipulation;
}

.btn-primary{
  color:#fff;
  background:linear-gradient(90deg,var(--primary),#5b21b6);
}

/* Abogados / Reformas / Inmobiliaria */
.btn-secondary{
  background:linear-gradient(90deg,var(--good1),var(--good2));
  color:#000;
}
.btn-secondary:hover{filter:brightness(.96)}

/* Copiar */
.btn-copy{
  background:var(--dark4000);
  color:#fff;
  border:1px solid var(--dark4000);
}
.btn-copy:hover{
  background:#2a0000;
  border-color:#2a0000;
}

.btn-ghost{
  flex:0;
  color:var(--text);
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
}

/* Mostrar más */
.more{margin:14px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.more-info{color:var(--muted);font-weight:800;font-size:13px}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.16);
  padding:10px 14px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  font-weight:900;
  backdrop-filter:blur(10px);
  max-width:92vw;
  text-align:center;
}
.toast.show{opacity:1}

/* =========================
   FOOTER LEGALES
   ========================= */
.legal{
  padding:18px 0 22px;
  border-top:1px solid rgba(255,255,255,.08);
  background:#0b0f17;
}
.legal-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.legal-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.legal-links a{
  color:#c7d6ff;
  text-decoration:none;
  font-weight:850;
}
.legal-links a:hover{opacity:.9}
.legal-copy{
  color:rgba(255,255,255,.62);
  font-weight:800;
  font-size:13px;
}

/* =========================
   PÁGINAS LEGALES PRO — 1 COLUMNA SIEMPRE
   ========================= */
.page-legal{background:#0f141c}
.page-legal .hero{display:none !important}

.page-legal .legal-page{
  display:block !important;
  width:100% !important;
  max-width:900px !important;
  margin:56px auto !important;
  padding:40px 42px !important;

  background:#151b24 !important;
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.45) !important;

  columns:initial !important;
  column-count:1 !important;
  column-width:auto !important;
  column-gap:0 !important;
}

.page-legal .legal-page > *,
.page-legal .legal-page .row,
.page-legal .legal-page .grid,
.page-legal .legal-page .columns,
.page-legal .legal-page [class*="col"],
.page-legal .legal-page [class*="column"]{
  display:block !important;
  width:100% !important;
  max-width:72ch !important;
  margin-left:auto !important;
  margin-right:auto !important;

  columns:initial !important;
  column-count:1 !important;
  column-width:auto !important;
}

.page-legal .legal-page h1{
  font-size:36px;
  margin:0 0 18px;
  font-weight:950;
  letter-spacing:-.5px;
  text-align:left;
}
.page-legal .legal-page h2{
  margin:26px 0 10px;
  font-size:18px;
  font-weight:900;
  color:#c7d6ff;
  text-align:left;
}
.page-legal .legal-page p,
.page-legal .legal-page li{
  color:#b9c4da;
  font-size:16px;
  line-height:1.75;
  font-weight:500;
  text-align:left;
  hyphens:none;
  overflow-wrap:anywhere;
}
.page-legal .legal-page a{color:#7c9cff;text-decoration:none;font-weight:700}
.page-legal .legal-page a:hover{text-decoration:underline}
.page-legal .legal-page ul{padding-left:20px;margin:12px 0}

/* =========================
   RESPONSIVE (MÓVIL)
   - 1 columna real
   - compacto
   - chips en 1 línea scroll
   - legales en 1 línea scroll
   ========================= */
@media (max-width:720px){
  .container{
    padding:
      0
      max(16px, env(safe-area-inset-right))
      0
      max(16px, env(safe-area-inset-left));
  }

  .page-home .hero{
    padding:16px 0 10px;
    min-height:88vh;
    min-height:88svh;
    background:
      radial-gradient(1000px 600px at 15% 15%, rgba(124,58,237,.22), transparent 60%),
      radial-gradient(900px 520px at 85% 25%, rgba(0,255,200,.18), transparent 60%),
      linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.86)),
      url("img/fondo.jpg") center 10%/cover no-repeat;
  }

  .hero-top{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:10px}
  .pill{white-space:normal;line-height:1.2}

  .hero-kicker{font-size:12.5px;margin-bottom:6px}
  .hero-title{
    font-size:26px;
    line-height:1.08;
    letter-spacing:-.5px;
    margin:0 0 10px;
    max-width:20ch;
  }

  /* Searchbar en columna */
  .searchbar{
    flex-direction:column;
    gap:10px;
    background:transparent;
    box-shadow:none;
    overflow:visible;
    border-radius:0;
  }
  .searchbar input{
    width:100%;
    border-radius:18px;
    padding:14px 14px;
    font-size:15.5px;
    box-shadow:0 14px 44px rgba(0,0,0,.28);
  }
  .searchbar button{
    width:100%;
    min-width:unset;
    border-radius:18px;
    padding:14px 14px;
    font-size:15.5px;
    box-shadow:0 14px 44px rgba(0,0,0,.28);
  }

  /* Chips: 1 línea (scroll) */
  .trust{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    padding-bottom:6px;
    margin-top:4px;
  }
  .trust::-webkit-scrollbar{display:none}
  .trust > *{flex:0 0 auto}
  .tag{
    font-size:12px;
    padding:9px 10px;
    border-radius:999px;
    white-space:nowrap;
  }

  /* SEO compacto */
  .seo-text{
    margin-top:12px;
    padding:12px;
    border-radius:18px;
  }
  .seo-text h2{font-size:15.5px;margin:0 0 8px}
  .seo-list{font-size:13px}
  .seo-list li{margin:6px 0}

  .wave{height:90px}

  /* Resultados */
  .results-title{font-size:26px}
  .results-bar{flex-direction:column}
  .filterbox{width:100%}
  .grid{grid-template-columns:1fr}

  /* Footer: links en una sola línea */
  .legal-inner{flex-direction:column;align-items:center;gap:10px}
  .legal-links{
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    gap:10px;
    padding:0 2px 6px;
  }
  .legal-links::-webkit-scrollbar{display:none}
  .legal-links a{
    flex:0 0 auto;
    white-space:nowrap;
    font-size:13.5px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);
  }
  .legal-copy{font-size:12.5px}

  /* Legales móvil */
  .page-legal .legal-page{
    margin:30px 16px !important;
    padding:26px !important;
    border-radius:18px !important;
  }
  .page-legal .legal-page h1{font-size:28px}
}

@media (max-width:390px){
  .hero-title{font-size:24px}
}

@media (min-width:980px){
  .container{
    padding:
      0
      max(22px, env(safe-area-inset-right))
      0
      max(22px, env(safe-area-inset-left));
  }
  .hero-title{font-size:58px}
  .page-home .hero{
    background:
      radial-gradient(1000px 600px at 15% 15%, rgba(124,58,237,.22), transparent 60%),
      radial-gradient(900px 520px at 85% 25%, rgba(0,255,200,.18), transparent 60%),
      linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.72)),
      url("img/fondo.jpg") center 22%/cover no-repeat;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important;}
}


/* =========================
   MOBILE FINAL OVERRIDE (GARANTIZADO)
   - Hace TODO más pequeño en iPhone
   - Usa !important para que NO lo pise nada
   ========================= */
@media (max-width:720px){

  /* Más espacio útil arriba */
  .page-home .hero{padding:14px 0 8px !important}

  /* Logo un poco más pequeño */
  .logo-img{height:34px !important}

  /* Badge */
  .pill{
    padding:8px 10px !important;
    font-size:13px !important;
  }

  /* Kicker */
  .hero-kicker{font-size:12px !important; margin-bottom:4px !important}

  /* Titular mucho más compacto */
  .hero-title{
    font-size:24px !important;
    line-height:1.06 !important;
    letter-spacing:-.45px !important;
    margin:0 0 8px !important;
    max-width:22ch !important;
  }
  .hero-title span{display:block; font-size:24px !important}

  /* Search más compacto */
  .searchbar{gap:8px !important}
  .searchbar input{
    padding:13px 14px !important;
    font-size:15px !important;
    border-radius:16px !important;
  }
  .searchbar button{
    padding:13px 14px !important;
    font-size:15px !important;
    border-radius:16px !important;
  }

  /* Chips: 1 línea scroll y más bajos */
  .trust{gap:8px !important; margin-top:2px !important; padding-bottom:4px !important}
  .tag{
    font-size:11.5px !important;
    padding:8px 10px !important;
  }

  /* SEO card: menos alta */
  .seo-text{
    margin-top:10px !important;
    padding:10px !important;
    border-radius:16px !important;
  }
  .seo-text h2{font-size:15px !important; margin:0 0 6px !important}
  .seo-list{font-size:12.75px !important; line-height:1.45 !important}
  .seo-list li{margin:5px 0 !important}

  /* Footer: botones más pequeños */
  .legal-links a{
    font-size:13px !important;
    padding:7px 10px !important;
  }
  .legal{padding:14px 0 18px !important}
}


/* =========================
   FIX ANCHO MÓVIL (NO SOBRESALE NADA)
   - botones/inputs siempre dentro
   - textos no cortados
   ========================= */
img{max-width:100%;height:auto}

@media (max-width:720px){

  /* evita que cualquier cosa empuje el layout */
  .container, .page-home .hero, .page-home .hero .container{
    max-width:100% !important;
  }

  /* el hero no debe "recortar" scroll horizontal interno */
  .page-home .hero{
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  /* Títulos y textos: permitir salto SIEMPRE */
  .hero-title,
  .hero-title span,
  .seo-text h2,
  .seo-list li{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  /* Searchbar: nada de min-widths que rompan */
  .searchbar{width:100% !important; max-width:100% !important}
  .searchbar input,
  .searchbar button{
    max-width:100% !important;
    min-width:0 !important;
  }
  .searchbar button{white-space:normal !important}

  /* Chips: scroll sin que se corten al borde derecho */
  .trust{
    padding-right:14px !important;
    margin-right:-14px !important; /* deja ver el scroll sin cortar */
  }

  /* Footer legales: scroll sin cortar */
  .legal-links{
    padding-right:14px !important;
    margin-right:-14px !important;
  }
}