:root {
  --afa-blue:#F4A20B; --celeste:#F4C90B; --text:#1a252f; --oro:#f1c40f;
  --filete-text-red:#7A1E1E; --filete-gold-shadow:#D4AF37; --filete-bg-crema:#f5ebd6; --filete-border-dark:#4A1212;
  --link:#8a4b00;
}
* { box-sizing:border-box; margin:0; padding:0; font-family:'Segoe UI',Roboto,sans-serif; }
body { min-height:100vh; width:100%; overflow-x:hidden; display:flex; flex-direction:column; align-items:center; padding:40px 0; background:url('imagenes/fondo-buenos-aires.png') no-repeat top center fixed; background-size:cover; background-color:#f5ebd6; color:var(--text); }

/* Stickers (solo home) */
.stickers-container { position:fixed; inset:0; z-index:5; pointer-events:none; }
.floating-sticker { position:absolute; bottom:-90px; height:90px; width:auto; filter:drop-shadow(0 4px 6px rgba(0,0,0,.15)); animation:subir-cielo 10s linear infinite; }
@keyframes subir-cielo { 0%{bottom:-90px;transform:translateX(0) rotate(0);opacity:1} 15%{opacity:.9} 85%{opacity:.9} 100%{bottom:110vh;transform:translateX(20px) rotate(360deg);opacity:1} }
.st-chori{left:13%;animation-duration:7s} .st-chorizo{left:66%;animation-duration:8s;animation-delay:4s} .st-trucaso{left:75%;animation-duration:10s}
.st-truco{left:45%;animation-duration:7s;animation-delay:4s} .st-mate{left:78%;animation-duration:7s;animation-delay:1s} .st-obelisco{left:88%;animation-duration:10s;animation-delay:4s}
.st-obeliscos{left:11%;animation-duration:5s;animation-delay:6s} .st-copa{left:28%;animation-duration:9s;animation-delay:2s}
.bg-text-arg { position:fixed; top:60px; left:-20px; font-size:230px; font-weight:900; color:rgba(0,50,150,.03); font-family:'Arial Black',Impact,sans-serif; z-index:3; pointer-events:none; user-select:none; transform:rotate(-15deg); }

/* Quiz */
.container { background:rgba(255,255,255,.98); max-width:500px; width:90%; padding:25px; border-radius:24px; border:4px solid var(--celeste); box-shadow:0 15px 35px rgba(11,83,148,.25); text-align:center; position:relative; z-index:10; margin:0 auto 20px; transition:background .3s ease,border .3s ease; overflow:hidden; }
.container.fileteado-active { background:linear-gradient(135deg,#fbf4e6 0%,var(--filete-bg-crema) 100%); border:6px double var(--filete-border-dark); outline:3px solid var(--filete-gold-shadow); outline-offset:-14px; border-radius:16px; box-shadow:0 20px 45px rgba(0,0,0,.4); padding:40px 28px; }
.filete-corner { display:none; position:absolute; width:60px; height:auto; pointer-events:none; z-index:11; }
.container.fileteado-active .filete-corner { display:block; }
.corner-tl{top:5px;left:5px} .corner-tr{top:5px;right:5px;transform:scaleX(-1)} .corner-bl{bottom:5px;left:5px;transform:scaleY(-1)} .corner-br{bottom:5px;right:5px;transform:scale(-1)}
.filete-subtitle { font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:20px; color:#2c3e50; margin-bottom:15px; font-weight:500; }
.container h1 { font-size:26px; margin-bottom:12px; color:var(--afa-blue); font-weight:900; letter-spacing:-.5px; line-height:1.2; }
.container.fileteado-active h1 { font-family:Georgia,'Times New Roman',serif; color:var(--filete-text-red); text-shadow:1px 1px 0 var(--filete-gold-shadow),2px 2px 2px rgba(0,0,0,.2); letter-spacing:.5px; }
.container h1.plain { color:var(--text); text-shadow:none; font-family:'Segoe UI',sans-serif; }
.container p { margin-bottom:20px; font-size:15px; line-height:1.4; color:#566573; }
.container.fileteado-active p { color:#3e4a56; font-weight:500; font-size:16px; }
.btn { display:block; width:100%; padding:18px; margin-bottom:10px; background:#f8f9f9; border:2px solid #d5dbdb; border-radius:12px; font-size:15px; font-weight:700; color:var(--text); cursor:pointer; transition:all .1s ease; text-align:left; }
.btn:hover { border-color:var(--celeste); background:#fff8e1; }
.btn-start { text-align:center; background:var(--afa-blue); color:#fff; border:none; font-size:18px; text-transform:uppercase; font-weight:800; }
.btn-start:hover { background:#b87a00; }
.container.fileteado-active .btn-start { background:linear-gradient(180deg,#ca9e4a 0%,#8e6623 100%); border:2px solid var(--filete-border-dark); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 5px 12px rgba(0,0,0,.3); color:#fff; font-family:Georgia,serif; font-style:italic; font-size:22px; font-weight:500; text-transform:none; border-radius:12px; text-shadow:1px 1px 2px rgba(0,0,0,.6); padding:14px; }
.container.fileteado-active .btn-start:hover { background:linear-gradient(180deg,#dbae56 0%,#9e752d 100%); }
.progress-bar { width:100%; height:8px; background:#eaeded; border-radius:4px; margin-bottom:20px; overflow:hidden; display:none; }
.progress { height:100%; background:var(--afa-blue); width:0; transition:width .2s ease; }
.hidden { display:none !important; }
.loading-layout { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 10px; }
.loading-gif { width:180px; height:auto; margin-bottom:20px; }
.loading-text { font-size:20px; font-weight:800; color:var(--afa-blue); text-transform:uppercase; letter-spacing:.5px; }
.result-layout { display:flex; flex-direction:column; align-items:center; margin-top:15px; }
.result-tag { font-size:14px; font-weight:900; color:#2c3e50; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px; font-family:Georgia,serif; font-style:italic; }
.result-title { font-size:32px; color:var(--filete-text-red); margin-bottom:15px; font-weight:900; text-shadow:1px 1px 0 var(--filete-gold-shadow); font-family:Georgia,serif; }
.speech-bubble { background:rgba(255,255,255,.95); border:2px solid var(--filete-border-dark); border-radius:16px; padding:18px; font-size:16px; line-height:1.4; font-weight:600; color:#2c3e50; margin-bottom:14px; box-shadow:0 4px 10px rgba(0,0,0,.15); text-align:center; width:100%; }
.result-link { display:block; font-weight:800; color:var(--filete-text-red); margin-bottom:10px; font-size:17px; }
.result-secondary { font-size:14px; color:#3e4a56; margin-bottom:12px; }
.result-secondary a { color:var(--link); font-weight:700; }
.btn-wa { background:#25D366; color:#fff; border:none; text-align:center; text-decoration:none; }
.btn-wa:hover { background:#1da851; color:#fff; }
#feedback-container { margin-top:25px; background:#fdfefe; border:3px solid #eaeded; border-radius:16px; padding:15px; width:100%; text-align:left; }
#feedback-container h3 { font-size:18px; color:var(--afa-blue); margin-bottom:10px; font-weight:800; }
#feedback-container p { font-size:13px; color:#7f8c8d; margin-bottom:12px; }
#user-opinion { width:100%; height:80px; border:2px solid #eaeded; border-radius:10px; padding:10px; font-size:14px; font-weight:600; color:#2c3e50; resize:none; margin-bottom:10px; }
.btn-opinion { background:#fff; color:#8a4b00; border:2px solid var(--afa-blue); text-align:center; padding:12px; font-size:14px; }

/* Páginas de contenido */
.site-nav { max-width:760px; width:92%; margin:0 auto 14px; padding:10px 16px; background:rgba(255,255,255,.96); border:2px solid var(--filete-border-dark); border-radius:14px; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; justify-content:space-between; position:relative; z-index:10; }
.site-nav .brand { font-weight:900; color:var(--filete-text-red); text-decoration:none; font-family:Georgia,serif; font-size:17px; }
.site-nav .links { display:flex; flex-wrap:wrap; gap:4px 16px; }
.site-nav .links a { color:var(--text); text-decoration:none; font-weight:600; font-size:14px; }
.site-nav .links a:hover { color:var(--link); text-decoration:underline; }
.card { max-width:760px; width:92%; margin:0 auto 18px; padding:26px 28px; background:rgba(255,255,255,.97); border-radius:16px; border:2px solid #eaeded; box-shadow:0 4px 15px rgba(0,0,0,.08); position:relative; z-index:10; text-align:left; color:var(--text); }
.card h1 { font-size:30px; line-height:1.2; color:var(--filete-text-red); font-family:Georgia,serif; margin-bottom:14px; }
.card h2 { font-size:21px; color:var(--text); margin:26px 0 8px; padding-bottom:4px; border-bottom:2px solid var(--celeste); }
.card h3 { font-size:17px; margin:18px 0 4px; }
.card p, .card li, .card dd { font-size:16px; line-height:1.65; color:#33404d; margin-bottom:12px; }
.card .lead { font-size:17px; color:#2c3e50; }
.card ul { margin:0 0 12px 22px; }
.card a { color:var(--link); }
.crumbs { max-width:760px; width:92%; margin:0 auto 10px; font-size:13px; position:relative; z-index:10; color:#33404d; }
.crumbs a { color:var(--link); font-weight:600; }
.facts { background:#fff8e6; border:1px solid var(--celeste); border-radius:12px; padding:12px 16px; margin:16px 0; }
.facts h2 { font-size:15px; margin:0 0 6px; border:none; padding:0; text-transform:uppercase; letter-spacing:.5px; }
.facts dl { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; }
.facts dt { font-weight:700; font-size:14px; } .facts dd { margin:0; font-size:14px; }
.cta { background:#fbf4e6; border:2px solid var(--filete-gold-shadow); border-radius:12px; padding:16px 18px; margin:22px 0; text-align:center; }
.cta p { margin-bottom:10px; }
.btn-link { display:inline-block; background:var(--afa-blue); color:#fff !important; text-decoration:none; font-weight:800; padding:10px 20px; border-radius:10px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin:12px 0; }
.grid a { display:block; padding:12px 14px; border:1px solid #e3d9c0; border-radius:12px; background:#fffdf7; text-decoration:none; color:var(--text); }
.grid a:hover { border-color:var(--afa-blue); background:#fff6dc; }
.grid strong { display:block; color:var(--filete-text-red); font-size:16px; margin-bottom:2px; }
.grid span { font-size:13px; line-height:1.4; color:#566573; }
.glosario dt { font-weight:800; margin-top:10px; color:var(--filete-text-red); }
.glosario dd { margin:0 0 6px; }
.lista-48 { columns:3 160px; font-size:14px; line-height:1.7; margin:8px 0 0 18px; }
.site-footer { max-width:760px; width:92%; margin:10px auto 0; padding:18px 15px; background:rgba(30,41,59,.96); color:#f8fafc; border-radius:16px; text-align:center; font-size:13px; position:relative; z-index:10; }
.site-footer a { color:#7dd3fc; text-decoration:none; margin:0 8px; }
.site-footer p { margin-bottom:10px; color:#e2e8f0; }

/* Cookies */
.cookie-banner { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); width:92%; max-width:520px; background:rgba(26,37,47,.98); color:#fff; padding:15px 20px; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:12px; z-index:9999; border:2px solid var(--celeste); }
.cookie-banner p { font-size:13px; line-height:1.45; color:#e5e7eb; margin:0; }
.cookie-banner a { color:#7dd3fc; }
.cookie-actions { display:flex; gap:8px; }
.cookie-banner button { flex:1; background:var(--afa-blue); color:#fff; border:none; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; }
.cookie-banner button.secondary { background:transparent; border:1px solid #9ca3af; }

@media (max-width:600px) {
  body { padding-top:20px; }
  .filete-corner { width:45px; }
  .container { width:90%; padding:18px; }
  .container.fileteado-active { padding:35px 20px; }
  .container h1 { font-size:21px; }
  .btn { font-size:14px; padding:14px; }
  .card { padding:20px 16px; } .card h1 { font-size:25px; }
}