:root{--ink:#101316;--green:#007c80;--lime:#00e0db;--paper:#f5f8fa;--line:#dce5e8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Arial,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:5px}a{color:inherit}button{cursor:pointer}header{background:var(--paper);border-bottom:1px solid var(--line)}.wrap{max-width:1240px;margin:auto;padding:0 30px}.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:26px;padding-bottom:24px}.brand{text-decoration:none;font-size:25px;font-weight:900;letter-spacing:-1px}.brand span{color:var(--green)}.tagline{display:block;font-size:13px;letter-spacing:1px;font-weight:400}.nav{display:flex;gap:25px;font-size:14px;align-items:center}.nav a{text-decoration:none}.pill,.button{display:inline-block;padding:11px 20px;background:var(--ink);color:white;border:0;border-radius:6px;text-decoration:none}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase}.hero{padding:48px 0 35px;display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:center}.hero h1{font:normal clamp(42px,5vw,70px)/1.04 Georgia,serif;letter-spacing:-2px;margin:18px 0 22px}.hero h1 em{color:var(--green)}.hero p{max-width:500px;color:#506366}.feature{background:var(--green);color:white;padding:32px;border-radius:10px;position:relative;overflow:hidden}.feature .num{font:110px/.85 Georgia,serif;color:var(--lime);padding:15px 0;border-bottom:1px solid #ffffff50;margin-bottom:24px}.feature h2{font:28px/1.2 Georgia,serif;margin:10px 0 20px}.feature a{color:var(--lime);font-weight:bold;text-decoration:none}.stats{display:flex;gap:35px;border-top:1px solid var(--line);padding:19px 0;font-size:14px}.stats strong{margin-right:6px}.toolbar{border-top:1px solid var(--ink);padding:25px 0 20px;display:flex;justify-content:space-between;align-items:center;gap:20px}.toolbar h2{font:32px Georgia,serif;margin:0}.search{width:340px;background:white;border:1px solid #bac8c3;border-radius:5px;padding:12px 15px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.filter{background:transparent;border:1px solid #cad4ce;border-radius:30px;padding:8px 17px;font-size:14px}.filter.active{background:var(--ink);color:white;border-color:var(--ink)}.results{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px;font-size:14px;color:#526461}.results select{border:0;background:transparent;color:var(--ink);max-width:200px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:white;border:1px solid var(--line);border-radius:8px;padding:25px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}.card:hover{transform:translateY(-4px);border-color:var(--green)}.card .cat{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;color:var(--green);font-weight:bold}.card h3{font:25px/1.22 Georgia,serif;margin:18px 0 14px}.card h3 a{text-decoration:none}.card p{color:#586965;font-size:15px;margin:0 0 22px}.meta{font-size:12px;color:#5c6a67;margin-top:auto}.cardfooter{border-top:1px solid var(--line);margin-top:17px;padding-top:15px;display:flex;justify-content:space-between;gap:10px;font-size:14px}.cardfooter a{text-decoration:none;font-weight:bold}.share{display:flex;gap:13px}.share a{font-weight:normal;color:var(--green)}.more{text-align:center;padding:32px}.conversation{margin:20px 0 55px;padding:35px;background:#e7f6f7;border-radius:10px;display:grid;grid-template-columns:1fr 1.3fr;gap:50px}.conversation h2{font:38px/1.1 Georgia,serif;margin:12px 0}.conversation p{color:#415a62}.commentbox textarea{display:block;width:100%;min-height:110px;resize:vertical;border:1px solid #a8cdd0;border-radius:6px;background:#fff;padding:14px;margin:10px 0}.commentbox label{font-weight:bold}.small{font-size:13px}.comment{padding:15px 0;border-top:1px solid #b6d3d6}.comment p{white-space:pre-wrap;overflow-wrap:anywhere;margin:5px 0}.comment button{background:none;border:0;text-decoration:underline;font-size:12px}footer{background:var(--ink);color:#e5eee7;padding:35px 0}footer .wrap{display:flex;justify-content:space-between;gap:35px}footer p{font-size:13px;max-width:490px;margin:0}.reader{max-width:900px;margin:35px auto 60px}.reader h1{font:clamp(32px,5vw,52px)/1.13 Georgia,serif}.back{border:0;background:none;color:var(--green);padding:0;text-decoration:underline}.articlebody{font:19px/1.85 Georgia,serif;background:white;padding:35px;border:1px solid var(--line);margin:25px 0;overflow-wrap:anywhere}.articlebody img{max-width:100%;height:auto}.articlebody h1,.articlebody h2{font-size:30px;line-height:1.3}.articlebody h3{font-size:24px}.articlebody a{color:var(--green)}.articlebody table{display:block;overflow:auto}.notice{background:#e7f6f7;padding:12px 17px;font-size:13px;border-left:3px solid var(--green)}[hidden]{display:none!important}.empty{padding:30px;grid-column:1/-1}.reader .conversation{display:block}.reader .commentbox{margin-top:25px}@media(max-width:800px){.wrap{padding:0 20px}.top{align-items:flex-start}.nav a:not(.pill){display:none}.brand{font-size:21px}.tagline{font-size:11px}.hero{gap:25px;grid-template-columns:1fr;padding-top:30px}.hero h1{font-size:48px}.feature .num{font-size:75px}.grid{grid-template-columns:repeat(2,1fr)}.conversation{grid-template-columns:1fr;gap:20px}.toolbar{align-items:flex-start;flex-direction:column}.search{width:100%}.stats{flex-wrap:wrap;gap:12px 25px}footer .wrap{flex-direction:column}.articlebody{padding:20px}}@media(max-width:520px){.grid{grid-template-columns:1fr}.nav .pill{font-size:12px;padding:8px}.top{gap:10px}.conversation{padding:24px}.hero h1{font-size:44px}.card h3{font-size:26px}.results{align-items:flex-start}.feature h2{font-size:25px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
header{background:#050708;color:#fff}.logo{width:min(440px,55%);line-height:0}.logo img{width:100%;height:auto;display:block}.nav .pill{background:#00d4d1;color:#061417}.feature{background:linear-gradient(135deg,#08282f,#12172c 75%,#282044);border:1px solid #006e78}.hero h1 em{color:#007c80}.feature .eyebrow{color:#00e0db}.feature a{color:#00e0db}.button:hover{background:#007c80}.formrow{display:grid;grid-template-columns:1fr 1fr;gap:15px}.formrow input{display:block;width:100%;border:1px solid #a8cdd0;border-radius:6px;padding:12px;margin:8px 0 17px;background:white}.archive{margin:20px 0 50px}.archive summary{cursor:pointer;padding:14px 0;font-weight:bold}.archive details{border-bottom:1px solid var(--line)}.archive>h2{font:30px Georgia,serif}.archive .articlebody{margin-top:5px}.skip{position:absolute;top:-100px}.skip:focus{top:8px;left:8px;background:white;color:black;z-index:9;padding:12px}@media(max-width:520px){.formrow{grid-template-columns:1fr}.logo{width:66%}.nav .pill{font-size:11px}.top{align-items:center}}
.articlebody img{content-visibility:auto}.archive details:not([open]){content-visibility:auto;contain-intrinsic-size:auto 60px}.articlebody:has(table){min-width:0}
.panel{background:white;padding:28px;border:1px solid var(--line);border-radius:10px;margin:25px 0}.panel input,.panel textarea,.panel select{width:100%;padding:12px;margin:8px 0 18px;border:1px solid #b4cdd0;border-radius:5px}.panel textarea{min-height:160px}.panel label{display:block;font-weight:bold}.flash{padding:18px;border-left:4px solid #007c80;background:#e7f6f7;margin:20px 0}.topic{display:block;border-bottom:1px solid var(--line);padding:22px 0;text-decoration:none}.topic h2{font:26px Georgia;margin:0 0 8px}.text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:18px}.pagination{display:flex;gap:20px;justify-content:center;margin:30px}.hp{position:absolute;left:-10000px}.top .logo{max-width:420px}.admin-actions{display:flex;gap:12px;flex-wrap:wrap}.admin-actions form{display:inline}.admin-actions button{padding:7px 14px}
/* Canal de YouTube: llamada destacada y acceso flotante */
.yt-banner{margin:28px 0;padding:28px;border:1px solid #edcaca;border-left:5px solid #c00000;border-radius:10px;background:#fff;display:flex;gap:28px;align-items:center;justify-content:space-between}.yt-banner h2{font:30px/1.2 Georgia,serif;margin:6px 0 12px}.yt-banner p{margin:5px 0;max-width:650px}.yt-banner .eyebrow{color:#a40000}.yt-button{display:inline-flex;align-items:center;gap:12px;background:#b90000;color:#fff!important;border:2px solid transparent;border-radius:10px;padding:13px 18px;text-decoration:none;box-shadow:0 5px 20px #0002;flex-shrink:0;line-height:1.35}.yt-button strong{display:block;font-size:16px}.yt-button small{display:block;font-size:12px;margin-top:3px}.yt-button:hover{background:#960000}.yt-button:focus-visible{outline:3px solid #00caca;outline-offset:4px}.yt-floating{position:fixed;bottom:24px;right:24px;z-index:50;max-width:calc(100vw - 32px)}body:has(.yt-floating){padding-bottom:110px}body:has(input:focus,textarea:focus,select:focus) .yt-floating{visibility:hidden}@media(max-width:800px){.yt-banner{align-items:flex-start;flex-direction:column}.yt-floating{bottom:12px;right:12px}.yt-floating .yt-button{padding:11px 14px}.yt-banner .yt-button{max-width:100%}.yt-banner h2{font-size:27px}}@media(max-width:360px){.yt-button small{font-size:11px}.yt-button strong{font-size:14px}}

/* Footer al final de la pantalla, sin franja blanca inferior */
html{min-height:100%;background:#101316}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body:has(.yt-floating){padding-bottom:0}
body>main.wrap{flex:1;width:100%;margin:0 auto}
body>footer{margin-top:auto;background:#101316}
body:has(.yt-floating)>footer{padding-bottom:110px}

/* Navegación juvenil: turquesa, violeta y negro */
header{border-bottom:1px solid #00d4d138;background:#050708}
header .top{gap:28px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
header .top .logo{width:clamp(240px,34vw,420px);max-width:100%}
header .nav{display:flex;align-items:center;gap:8px;padding:7px;border:1px solid #354046;border-radius:22px;background:#10171b;box-shadow:0 8px 28px #0003}
header .nav a{display:inline-flex!important;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 18px;border-radius:15px;font-size:15px;font-weight:700;line-height:1.2;color:#eef8fa;text-decoration:none;transition:background .2s ease,transform .2s ease,box-shadow .2s ease;white-space:nowrap}
header .nav a:hover{background:#243039;transform:translateY(-2px)}
header .nav a:focus-visible{outline:3px solid #00e0db;outline-offset:4px}
header .nav a[href="/index.php?foro=1"]{background:#00d4d1;color:#062427;box-shadow:0 3px 0 #008f92}
header .nav a[href="/index.php?foro=1"]::after{content:"↗";font-size:23px;line-height:1}
header .nav a[href="/index.php?foro=1"]:hover{background:#57efea;box-shadow:0 5px 0 #008f92,0 0 22px #00d4d12e}
header .nav a.pill{background:#7340c5;color:#fff;border:1px solid #a77aea;box-shadow:0 3px 0 #402566}
header .nav a.pill::before{content:"+";font-size:23px;font-weight:400;line-height:1}
header .nav a.pill:hover{background:#8753d8;box-shadow:0 5px 0 #402566}

/* Acceso principal al foro: botón con flecha de alto contraste */
.hero a.button[href="/index.php?foro=1"]{position:relative;display:inline-flex;align-items:center;gap:32px;min-height:78px;margin:10px 0 12px;padding:13px 14px 13px 28px;border:2px solid #00cbc8;border-radius:20px;background:linear-gradient(115deg,#09282b 0%,#111c2b 60%,#342052 100%);color:#fff;font-size:23px;font-weight:800;letter-spacing:-.4px;line-height:1.2;text-decoration:none;box-shadow:0 6px 0 #00a7a5,0 15px 30px #102c3222;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.hero a.button[href="/index.php?foro=1"]::after{content:"↗";display:grid;place-items:center;flex-shrink:0;width:49px;height:49px;background:#00e0db;border-radius:13px;color:#08272b;font-size:35px;font-weight:400;line-height:1;transition:transform .2s ease,background .2s ease}
.hero a.button[href="/index.php?foro=1"]:hover{transform:translateY(-3px);border-color:#64fff1;box-shadow:0 9px 0 #00a7a5,0 20px 34px #51409829}
.hero a.button[href="/index.php?foro=1"]:hover::after{transform:rotate(7deg);background:#80ffeb}
.hero a.button[href="/index.php?foro=1"]:active{transform:translateY(3px);box-shadow:0 3px 0 #00a7a5}
.hero a.button[href="/index.php?foro=1"]:focus-visible{outline:3px solid #7340c5;outline-offset:7px}
.conversation a.button[href="/index.php?nuevo=1"]{display:inline-flex;align-items:center;gap:20px;background:#151c29;border-radius:14px;border:1px solid #007c80;padding:14px 20px;font-weight:700;box-shadow:4px 4px 0 #00beba}
.conversation a.button[href="/index.php?nuevo=1"]::after{content:"+";font-size:25px;line-height:1;color:#00e0db}
.conversation a.button[href="/index.php?nuevo=1"]:hover{background:#332247}
@media(max-width:1000px){header .top{justify-content:center}header .top .logo{width:360px}header .nav{margin:0 auto}}
@media(max-width:600px){header .top{gap:18px;padding-top:18px;padding-bottom:18px}header .top .logo{width:min(340px,100%)}header .nav{width:100%;gap:5px;padding:6px;border-radius:18px;flex-wrap:wrap}header .nav a{flex:1 1 auto;padding:11px 9px;font-size:14px;min-height:46px;border-radius:12px;gap:6px}header .nav a.pill{font-size:14px;padding:11px 9px}.hero a.button[href="/index.php?foro=1"]{max-width:100%;min-height:72px;gap:25px;font-size:21px;padding-left:22px}.hero a.button[href="/index.php?foro=1"]::after{width:44px;height:44px;font-size:31px}}
@media(prefers-reduced-motion:reduce){header .nav a,.hero a.button[href="/index.php?foro=1"],.hero a.button[href="/index.php?foro=1"]::after{transition:none}header .nav a:hover,.hero a.button[href="/index.php?foro=1"]:hover,.hero a.button[href="/index.php?foro=1"]:hover::after{transform:none}}

/* Invitaciones a conversar: mismo acento morado en ambos accesos. */
header .nav a.pill,.conversation a.button[href="/index.php?nuevo=1"]{background:linear-gradient(135deg,#7940ce,#6423b5);color:#fff;border:2px solid #bd91ff;border-radius:14px;box-shadow:0 4px 0 #42206d,0 8px 22px #7438c540;font-weight:700;line-height:1.35;text-align:center;justify-content:center;transition:transform .18s ease,box-shadow .18s ease}
header .nav a.pill:hover,.conversation a.button[href="/index.php?nuevo=1"]:hover{background:linear-gradient(135deg,#874adf,#722bca);color:#fff;transform:translateY(-2px);box-shadow:0 6px 0 #42206d,0 12px 26px #7438c550}
header .nav a.pill:focus-visible,.conversation a.button[href="/index.php?nuevo=1"]:focus-visible{outline:3px solid #00d4d1;outline-offset:5px}
.conversation a.button[href="/index.php?nuevo=1"]::after{color:#fff}
header .nav{flex-wrap:wrap;justify-content:center}
@media(max-width:600px){header .nav a.pill{flex-basis:100%;padding:13px 12px}.conversation a.button[href="/index.php?nuevo=1"]{max-width:100%;gap:12px}}
@media(prefers-reduced-motion:reduce){header .nav a.pill:hover,.conversation a.button[href="/index.php?nuevo=1"]:hover{transform:none}}