/* agencia.tuworldcan.com · informe de marketing para la agencia (4-nov-2026). Marca World Can: púrpura, amarillo,
   Caprasimo para títulos y Clash para el texto. Pensado primero para el celular. */
:root{--purpura:#7C1667;--uva:#4F0645;--amarillo:#FFF0A9;--lila:#EBCBF1;--hueso:#FCFBF5;--tinta:#2A1027;--gris:#76606F;--linea:#EADFE6;--fondo:#F3EEF1;--ok:#1F7A4D;--ok-bg:#DDF2E6;--atencion:#9A5B00;--atencion-bg:#FFF0A9;--critico:#B3123F;--critico-bg:#FBDDE5;--radio:16px}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.5 Clash,Arial,sans-serif;font-variant-numeric:tabular-nums}
h1,h2{font-family:Caprasimo,Georgia,serif;font-weight:400;letter-spacing:.01em;margin:0}
button{font:inherit;cursor:pointer}
img{max-width:100%}

/* Cabecera */
.cabecera{background:var(--purpura);color:#fff;padding:14px max(16px,calc((100% - 1180px)/2));display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.marcas{display:flex;align-items:center;gap:12px}
.logo-wc{height:40px;width:auto}.logo-casupo{height:26px;width:auto}
.marcas .x{color:var(--amarillo);font-family:Caprasimo,serif;font-size:22px}
.titulo h1{font-size:1.45rem;color:var(--amarillo)}.titulo p{margin:2px 0 0;font-size:14px;opacity:.9}
.quien{display:flex;align-items:center;gap:12px;font-size:14px}
.quien button{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:6px 14px}
.quien button:hover{background:var(--uva)}
@media(max-width:760px){.cabecera{grid-template-columns:1fr auto;gap:8px 12px}.titulo{grid-column:1/-1}.logo-wc{height:32px}.logo-casupo{height:20px}.quien span{display:none}}

/* Aviso de datos viejos */
.aviso{background:var(--atencion-bg);color:var(--atencion);padding:10px max(16px,calc((100% - 1180px)/2));font-size:15px;border-bottom:1px solid #E8D27A}
.aviso.critico{background:var(--critico-bg);color:var(--critico);border-color:#F0B9C8}

/* Menú pegajoso */
#menu{position:sticky;top:0;z-index:5;background:var(--hueso);border-bottom:1px solid var(--linea);padding:8px max(16px,calc((100% - 1180px)/2));display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
#menu::-webkit-scrollbar{display:none}
#menu a{white-space:nowrap;text-decoration:none;color:var(--tinta);background:#fff;border:1px solid var(--linea);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600}
#menu a:hover,#menu a.activo{background:var(--purpura);color:var(--amarillo);border-color:var(--purpura)}
#menu a small{font-weight:400;opacity:.75;margin-left:4px}

main{padding:8px max(16px,calc((100% - 1180px)/2)) 60px}
.cargando{color:var(--gris);padding:40px 0;text-align:center}
section{scroll-margin-top:64px;margin-top:34px}
section>header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
section h2{font-size:1.5rem;color:var(--purpura)}
section header p{margin:0;color:var(--gris);font-size:15px}
.vacio{background:#fff;border:1px dashed var(--linea);border-radius:var(--radio);padding:22px;color:var(--gris);text-align:center}

/* Portada: qué pautar */
.portada{background:var(--purpura);color:#fff;border-radius:22px;padding:22px 20px 18px;margin-top:16px;position:relative;overflow:hidden}
.portada::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:var(--uva);opacity:.6;z-index:0}
.portada>*{position:relative;z-index:1}
.portada h2{color:var(--amarillo);font-size:1.7rem;position:relative}
.portada>p{margin:4px 0 16px;opacity:.9;position:relative;max-width:760px}
.pistas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;position:relative}
.pista{background:#fff;color:var(--tinta);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column}
.pista .foto{aspect-ratio:1;background:var(--hueso)}
.pista .numero{position:absolute;margin:10px;background:var(--amarillo);color:var(--uva);font-family:Caprasimo,serif;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:17px}
.pista .etiqueta{left:auto;right:8px}
.pista .hay,.pista .linea{display:none}
.pista .cuerpo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.pista h3{margin:0;font-size:1.02rem;line-height:1.25}
.pista .razon{margin:0;font-size:14px;color:var(--gris);flex:1}

/* Cifras y temporada */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px}
.cifra{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px}
.cifra strong{display:block;font-size:1.9rem;line-height:1.1;color:var(--purpura);font-family:Caprasimo,serif;font-weight:400}
.cifra span{font-size:14px;color:var(--gris)}
.temporada{background:linear-gradient(135deg,#FFF6CC,var(--amarillo));border-radius:var(--radio);padding:18px 20px;margin-top:14px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.temporada h2{color:var(--uva);font-size:1.35rem}
.temporada p{margin:4px 0 0;color:#5A4600}
.temporada .dias{font-family:Caprasimo,serif;font-size:2.2rem;color:var(--uva);text-align:center;line-height:1}
.temporada .dias small{display:block;font-family:Clash,Arial,sans-serif;font-size:13px;color:#5A4600}
.temporada .chips{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#fff;border-radius:999px;padding:5px 12px;font-size:14px;border:1px solid #E8D27A}
.chip b{color:var(--purpura)}

/* Tarjetas */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .15s,box-shadow .15s}
.tarjeta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(79,6,69,.1)}
.foto{position:relative;aspect-ratio:1;background:var(--hueso);display:grid;place-items:center;overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto img[src=""],.foto img:not([src]){display:none}
.sin-foto{display:none;flex-direction:column;align-items:center;gap:4px;color:var(--gris);font-size:13px}
.sin-foto svg{width:44px;height:44px;fill:var(--lila)}
.foto.vacia .sin-foto{display:flex}
.etiqueta{position:absolute;left:8px;top:8px;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:#fff;color:var(--tinta);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.etiqueta:empty{display:none}
.etiqueta.ok{background:var(--ok-bg);color:var(--ok)}.etiqueta.poco{background:var(--atencion-bg);color:var(--atencion)}.etiqueta.agotado{background:var(--critico-bg);color:var(--critico)}.etiqueta.nuevo{background:var(--purpura);color:var(--amarillo)}.etiqueta.sube{background:var(--lila);color:var(--uva)}
.cuerpo{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.nombre{margin:0;font-size:.98rem;line-height:1.25;font-weight:600}
.linea{margin:0;font-size:12px;color:var(--gris);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.codigo{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tienda{color:var(--purpura);font-weight:600;text-decoration:none}.tienda:hover{text-decoration:underline}
.faltan-fotos{margin-top:12px;background:#fff;border:1px dashed var(--purpura);border-radius:var(--radio);padding:10px 14px;font-size:14px;color:var(--gris)}
.faltan-fotos b{color:var(--purpura)}.faltan-fotos small{color:var(--purpura)}
.hay{margin:2px 0 0;font-size:14px}
.hay b{color:var(--purpura)}.hay.poco b{color:var(--atencion)}.hay.agotado b{color:var(--critico)}
.razon{margin:0;font-size:14px;color:var(--gris)}
.semanas{display:flex;gap:3px;align-items:flex-end;height:26px;margin-top:4px}
.semanas i{flex:1;background:var(--lila);border-radius:3px 3px 0 0;min-height:2px}
.semanas i:last-child{background:var(--purpura)}
.tallas{margin:0;font-size:13px;color:var(--critico)}
.campana{margin-top:auto;align-self:flex-start;border:1px solid var(--purpura);background:#fff;color:var(--purpura);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}
.campana[aria-pressed=true]{background:var(--purpura);color:var(--amarillo)}
.campana[aria-pressed=true]::before{content:"✓ "}
.campana:disabled{opacity:.5}

/* Campañas en marcha */
.campanas-vacio{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:20px;color:var(--gris)}
.campanas-vacio b{color:var(--purpura)}

/* Tiendas por zona */
.zonas{display:grid;gap:10px}
details.zona{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:0 16px}
details.zona summary{cursor:pointer;padding:14px 0;display:flex;justify-content:space-between;gap:12px;font-weight:600;list-style:none}
details.zona summary::-webkit-details-marker{display:none}
details.zona summary::after{content:"▾";color:var(--gris)}
details[open].zona summary::after{content:"▴"}
details.zona summary small{font-weight:400;color:var(--gris)}
.zona .top{margin:0 0 10px;font-size:14px;color:var(--gris)}
.zona .top b{color:var(--tinta)}
.ciudad{border-top:1px solid var(--linea);padding:10px 0}
.ciudad h4{margin:0 0 6px;font-size:15px}
.ciudad ul{margin:0;padding:0;list-style:none;columns:2;column-gap:20px}
.ciudad li{font-size:14px;break-inside:avoid;padding:2px 0}
.frecuente{font-size:11px;background:var(--ok-bg);color:var(--ok);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle;white-space:nowrap}
@media(max-width:600px){.ciudad ul{columns:1}}

footer{color:var(--gris);font-size:13px;text-align:center;padding:24px 16px 40px;border-top:1px solid var(--linea)}

/* Entrar */
body.entrar{display:grid;place-items:center;min-height:100vh;background:var(--purpura)}
.caja-entrar{background:#fff;border-radius:22px;padding:30px 26px;width:min(420px,calc(100% - 32px));box-shadow:0 20px 60px rgba(0,0,0,.25)}
.caja-entrar .marcas{justify-content:center;background:var(--purpura);border-radius:14px;padding:14px;margin-bottom:18px}
.caja-entrar h1{font-size:1.6rem;color:var(--purpura);text-align:center}
.caja-entrar .sub{text-align:center;color:var(--gris);margin:4px 0 20px}
.caja-entrar label{display:block;font-size:14px;font-weight:600;margin-bottom:12px}
.caja-entrar input{display:block;width:100%;margin-top:4px;font:inherit;padding:11px 12px;border:1px solid var(--linea);border-radius:10px;background:var(--hueso)}
.caja-entrar input:focus{outline:2px solid var(--purpura);border-color:transparent}
.caja-entrar input.pin{font-size:30px;letter-spacing:.45em;text-align:center;font-variant-numeric:tabular-nums;padding:12px 0 12px .45em}
.caja-entrar button{width:100%;background:var(--purpura);color:var(--amarillo);border:0;border-radius:999px;padding:12px;font-weight:600;font-size:16px;margin-top:4px}
.caja-entrar button:disabled{opacity:.6}
.caja-entrar .error{color:var(--critico);background:var(--critico-bg);border-radius:10px;padding:8px 12px;font-size:14px}
.caja-entrar .pie{text-align:center;color:var(--gris);font-size:12px;margin:18px 0 0}