/* /public_html/css/layout.css */

:root{
  --header-bg:#0b0e13; --header-text:#fff; --header-border:#1f2532;
  --content-bg:#f1f5f9; --text:#111827; --muted:#6b7280;
  --card:#fff; --card-border:#e5e7eb;
  --blue1:#60a5fa; --blue2:#2563eb;
  /* CONTRASTE AJUSTADO (antes: #ea1d5e / #d61653) */
  --brand:#d61653;
  --brandH:#b50f44;

  /* VIP dorado */
  --vipGold:#f1d36b;
  --vipGoldDark:#caa53b;
    /* TOP dorado */
  --topGold:#FA6900;
  --topGoldDark:#FA6900;


  /* Filtro */
  --filterBg:#0f131a;
  --filterBorder:#263146;
  --filterPanel:#0c1016;
  --filterShadow: 0 12px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--content-bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:inherit;text-decoration:none}

/* Header */
.header{background:var(--header-bg);color:var(--header-text);border-bottom:1px solid var(--header-border)}
.header-inner{max-width:1440px;margin:0 auto;padding:10px 5px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.logo img { height: 28px; width: auto; display: block; }
.icons-mob{display:flex;gap:8px;align-items:center}
.iconbtn{background:transparent;border:1px solid #3b455c;color:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.iconbtn .icon{width:18px;height:18px;display:block}
@media (min-width:992px){ .icons-mob{display:none} }

.menu{display:none;gap:10px;align-items:center}
@media (min-width:992px){.menu{display:flex}}
.menu a{padding:8px 10px;border-radius:10px;border:1px solid transparent;color:#e5e7eb}
.menu a:hover{border-color:#2d3648}
/* CTA marca */
.menu .cta{background:var(--brand);color:#fff;font-weight:800;border-color:var(--brand)}
.menu .cta:hover{background:var(--brandH);border-color:var(--brandH)}

/* Drawer + backdrop */
.drawer{position:fixed;top:0;right:-230px;width:230px;height:100vh;background:#0b0e13;color:#fff;border-left:1px solid #1f2532;box-shadow:-10px 0 25px rgba(0,0,0,.35);transition:right .2s;z-index:10001;padding:16px}
.drawer.open{right:0}
.drawer a{display:block;color:#e5e7eb;padding:10px 12px;border-radius:10px;margin-bottom:6px;border:1px solid transparent}
.drawer a:hover{border-color:#2d3648}
.drawer .cta{background:var(--brand);color:#fff;font-weight:800;border-color:var(--brand)}
.drawer .cta:hover{background:var(--brandH);border-color:var(--brandH)}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:none;z-index:10000}
.backdrop.show{display:block}

/* Tipos + Zona VIP */
.types{background:#0f131a;border-top:1px solid #1f2532;border-bottom:1px solid #1f2532}
.types-inner{max-width:1440px;margin:0 auto;padding:10px 5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.types a{
  color:#e6edf7;font-weight:700;font-size:13px;
  padding:8px 12px;border-radius:8px;
  background:#121826 linear-gradient(180deg,#121826,#101521);
  border:1px solid #243148;
}
.types a:hover{background:#172031;border-color:#3a4860;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.safe-toggle{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--vipGold),var(--vipGoldDark));
  border:1px solid #9a7c1d;color:#1a1302;
  border-radius:10px;padding:9px 14px;font-weight:800;cursor:pointer;
  box-shadow:0 6px 16px rgba(212,175,55,.35)
}
.safe-toggle:hover{filter:saturate(1.05) brightness(1.02)}
.safe-toggle.disabled{filter:grayscale(.4) brightness(.95);opacity:.8;cursor:not-allowed;box-shadow:none}
.safe-toggle .icon{width:14px;height:14px;display:block}
.safe-toggle.active{filter:saturate(1.2)}

/* Main wrapper */
.page{max-width:1440px;margin:0 auto;padding:16px 10px}

/* Buscador */
.search-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 12px}
.inp{background:#fff;border:1px solid var(--card-border);color:#111827;border-radius:10px;padding:10px 12px;min-width:240px}
.btn{background:#fff;border:1px solid var(--card-border);border-radius:10px;padding:10px 14px;cursor:pointer}
.btn:hover{border-color:#cbd5e1}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brandH);border-color:var(--brandH)}

/* Botón filtro */
.filter-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--filterBg); color:#e6edf7;
  border:1px solid var(--filterBorder); border-radius:10px;
  padding:10px 12px; cursor:pointer;
}
.filter-btn .icon{width:16px;height:16px;display:block}
.filter-btn:hover{background:#121826}

/* Panel filtro (pegado al botón con FIXED) */
.filter-panel{
  position:fixed; z-index:9999; display:none;
  background:var(--filterPanel); color:#e6edf7;
  border:1px solid var(--filterBorder); border-radius:12px;
  box-shadow:var(--filterShadow); padding:12px; width:280px;
  max-width:min(320px, calc(100vw - 16px));
  max-height:calc(100vh - 16px);
  overflow:auto;
}
.filter-title{font-weight:800;font-size:14px;margin-bottom:8px}
.filter-row{display:flex;align-items:center;justify-content:space-between;margin:8px 0}
.switch{width:44px;height:24px;border-radius:999px;border:1px solid #2c3a55;background:#1a2233;position:relative;cursor:pointer}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:999px;background:#e5e7eb;transition:left .15s}
.switch.on{background:#16a34a;border-color:#0f7e33}
.switch.on::after{left:22px}
.age-inputs{display:flex;gap:8px}
.age-inputs input{width:100%; background:#0f172a;color:#e6edf7;border:1px solid #2c3a55;border-radius:8px;padding:8px 10px;outline:none}
.filter-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.btn-clean{background:#0f172a;border-color:#2c3a55;color:#cbd5e1}
.btn-apply{background:#2563eb;border-color:#1.40af;color:#fff}
.btn-clean:hover{filter:brightness(1.1)}
.btn-apply:hover{filter:brightness(1.05)}

@media (max-width:768px){
  .search-row{display:none}
  body.search-open .search-row{display:flex}
}

/* Historias — móvil 1 fila x 5, círculos sin centrar */
.stories-wrap{display:none}
@media (max-width:768px){
  .stories-wrap{margin:2px 0 10px;display:block}
  .stories{--cols:4;--gap:10px;display:flex;gap:var(--gap);padding:4px 2px;flex-wrap:nowrap;overflow:hidden}
  .story{flex:0 0 calc((100% - (var(--cols) - 1)*var(--gap))/var(--cols));background:transparent;border:0;padding:0;appearance:none;-webkit-appearance:none}
  .story .avatar{width:100%;aspect-ratio:1/1;border-radius:999px;border:2px solid #ffd166;background:#fff;overflow:hidden;display:block;box-shadow:0 4px 10px rgba(0,0,0,.08)}
  .story .avatar img{width:100%;height:100%;object-fit:cover;display:block}
}


/* H1 + breadcrumbs */
h1{font-size:18px;line-height:1.2;margin:8px 0}
@media (max-width:768px){h1{font-size:16px}}
.crumbs{margin:2px 0 10px}
.crumbs a{font-size:12px;color:#475569}
.crumbs a:hover{color:#0f172a}

/* Ciudades */
.cities{margin:6px 0 12px}
.cities-head{display:none;align-items:center;gap:8px}
@media (max-width:768px){ .cities-head{display:flex;justify-content:space-between} }
.cities-title{font-weight:700;font-size:17px}
.cities-toggle{background:#fff;border:1px solid #cbd5e1;border-radius:10px;color:#0f172a;cursor:pointer;font-size:22px;line-height:1;padding:6px 12px;margin-left:6px}
.cities-inner{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:768px){
  .cities-inner{max-height:0;overflow:hidden;transition:max-height .2s}
  .cities.open .cities-inner{max-height:260px}
}
.chip{background:#fff;border:1px solid var(--card-border);color:#111827;padding:6px 10px;border-radius:999px;font-size:12px}

/* Grid 2/6 */
.grid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
/*@media (min-width:992px){ .grid{grid-template-columns:repeat(6,minmax(0,1fr));} }*/

/* Cards */
.card{position:relative;background:var(--card);border:1px solid var(--card-border);border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.card .cover{position:relative;aspect-ratio:2/3;background:#e5e7eb}
.card .cover img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ctitle{font-weight:700;padding:8px 12px;text-align:center;color:#111827;font-size:14px;background:#fff;border-bottom:1px solid var(--card-border)}

/* Ribbons */
.rib-base{font-size:15px;font-weight:bold;color:#fff}
.rib-top{--r:.32em; --c:#FA6900; position:absolute; bottom:12px; left:calc(-1*var(--r)); line-height:1.8; padding:calc(2*var(--r)) .5em 0; border-radius:var(--r) 0 0 var(--r); z-index:3;
  background: radial-gradient(100% 50% at left,var(--c) 98%,#0000 101%) 100% 100%/.5lh calc(100% - 2*var(--r)),
             radial-gradient(100% 50% at right,#0005 98%,#0000 101%) 0 0/var(--r) calc(2*var(--r)),
             conic-gradient(at var(--r) calc(2*var(--r)),#0000 25%,var(--c) 0) 0 0/calc(101% - .5lh) 100%;
  background-repeat:no-repeat;
}
.rib-verified{--f:.4em; position:absolute; top:0; left:0; line-height:1.8; padding-inline:1lh; padding-bottom:var(--f); z-index:4;
  border-image:conic-gradient(#0008 0 0) 51%/var(--f);
  clip-path:polygon(100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)),0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform:translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin:100% 100%;
  background-color:#1646a3; color:#fff;
}

/* Badge Nueva */
.badge-new{position:absolute;right:8px;bottom:8px;z-index:2;background:linear-gradient(90deg,var(--blue1),var(--blue2));color:#fff;font-weight:800;font-size:11px;border-radius:8px;padding:4px 10px;box-shadow:0 6px 14px rgba(37,99,235,.25)}

/* Chips / SEO text */
.title2{padding:8px 12px 0;text-align:center;font-size:13px;letter-spacing:.2px;color:#334155}
.chipbar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:8px 10px 10px}
.chip2{font-size:12px;background:#fff;border:1px solid var(--card-border);color:#374151;padding:3px 8px;border-radius:999px}
.seo-block h2{font-size:16px;margin:.4rem 0}
.seo-block h3{font-size:14px;margin:.35rem 0}
.seo-block p{color:#374151}

/* Varios */
.load{display:flex;justify-content:center;margin:14px 0}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.empty{padding:30px 10px;text-align:center;color:#6b7280}
.sugg{position:absolute;background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.08);z-index:9999}
.opt{padding:8px 10px;cursor:pointer}
.opt:hover{background:#f1f5f9}

/* Viewer historias */
.viewer{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:10002}
.viewer.open{display:flex}
.viewer-inner{width:1px;height:1px;display:flex;align-items:center;justify-content:center}
.viewer-inner img,.viewer-inner video,.viewer-inner iframe{width:100%;height:100%;display:block;object-fit:contain;border:none;border-radius:10px}
.viewer-close{position:absolute;top:14px;right:14px;background:#000;border:1px solid #444;color:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}
.viewer-actions{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:10px}
.viewer-goto{background:#faf745;color:#111827;border:1px solid #d9d24a;border-radius:12px;padding:10px 16px;font-weight:800;cursor:pointer}

/* Efecto pulse */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(250,247,69,.6)}100%{box-shadow:0 0 0 14px rgba(250,247,69,0)}}
.pulse{animation:pulse 1s ease-out 2}

:root { --card-w: 220px; } /* ancho mínimo por card en desktop/tablet (ajusta 200/240/260px) */

@media (min-width: 769px){
  .grid{
    /* columnas de ancho fijo = --card-w, se repiten tantas como quepan */
    grid-template-columns: repeat(auto-fill, minmax(var(--card-w), var(--card-w)));
    justify-content: start;   /* que la malla arranque pegada a la izquierda */
  }
  /* SIN limites extras en .card: el ancho ya lo define la columna */
}


/* móvil NO se toca: 2 columnas */
@media (max-width: 768px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* === TOP dorado (tarjeta completa) === */
.card--top{
  border-color: var(--topGoldDark);
  box-shadow: 0 0 0 2px rgba(241,211,107,.35), 0 6px 16px rgba(0,0,0,.08);
}
.card--top .ctitle{
  background: linear-gradient(180deg, #fffdf0, #ffffff);
  border-bottom-color: var(--topGoldDark);
}
.card--top .chip2{
  border-color: var(--topGoldDark);
}

/* Que la cinta TOP use el mismo dorado */
.card--top .rib-top{ --c: var(--topGold); }