/* TutoNaye V4.5 — Encabezado y pie de página inspirados en la referencia.
   Solo presentación. No se cambian endpoints, D1, sesión, Google Drive, ni permisos. */
:root{--tn-purple-deep:#351064;--tn-purple:#7028c6;--tn-magenta:#9a12e6;--tn-lilac:#e5ccff;--tn-gold:#ffc83d}
.tn-icon{display:inline-block;flex-shrink:0;vertical-align:middle;width:24px;height:24px}
.tn-site-header{position:sticky;top:0;z-index:100;padding:14px 0 15px!important;
 background:linear-gradient(118deg,#edd5ff 0%,#f9ecff 38%,#dfb5fb 100%)!important;
 border-bottom:1px solid rgba(142,58,215,.19)!important;box-shadow:0 7px 25px #5d169b1a!important}
.tn-site-header::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(ellipse at 0 20%,#c680ee80,transparent 23%),radial-gradient(ellipse at 100% 8%,#b669f055,transparent 26%)}
.tn-site-header .tn-header-inner{position:relative;isolation:isolate;display:flex;align-items:center;gap:clamp(12px,2.5vw,35px);
 width:min(1780px,calc(100% - 60px));max-width:none;min-height:99px;padding:12px clamp(20px,2.9vw,55px);
 background:linear-gradient(165deg,#fff 0%,#fffafd 70%,#fdf6ff 100%);border:2px solid #ddbbfb;
 box-shadow:0 14px 36px #5d15a126,0 3px 1px #ffffffa8 inset;border-radius:999px}
.tn-brand{display:flex!important;align-items:center;gap:15px;min-width:0;flex-shrink:0!important;text-decoration:none}
.tn-brand .tn-brand-emblem{width:77px;height:77px;display:grid;place-items:center;flex-shrink:0;transition:transform .22s ease}
.tn-brand img{height:77px!important;width:77px!important;object-fit:contain;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.tn-brand:hover .tn-brand-emblem{transform:rotate(-7deg) scale(1.04)}
.tn-brand .tn-brand-wordmark{min-width:0}
.tn-brand strong{font-size:clamp(29px,2.45vw,39px)!important;font-weight:900!important;line-height:1.09!important;color:#351064!important;letter-spacing:-.05em}
.tn-brand small{font-size:clamp(12px,.94vw,15px)!important;font-weight:750!important;line-height:1.3!important;white-space:nowrap;color:#4f2473!important;margin-top:5px!important}
.tn-header-divider{width:2px;height:56px;background:linear-gradient(180deg,#f1d7ff,#b67af2,#f2dbff);margin:0 2px;flex-shrink:0}
.tn-main-nav{display:flex;align-items:center;justify-content:center;gap:clamp(3px,.6vw,12px);flex:1;min-width:0}
.tn-main-nav a{display:inline-flex;align-items:center;gap:10px;font:800 clamp(12px,1.14vw,17px)/1.2 'Poppins',sans-serif;
 color:#351064!important;padding:16px clamp(9px,1vw,19px)!important;white-space:nowrap;border-radius:999px;
 transition:background .2s,transform .2s,box-shadow .2s,color .2s}
.tn-main-nav a .tn-icon{width:25px;height:25px;stroke-width:2.2}
.tn-main-nav a:hover,.tn-main-nav a.active{background:linear-gradient(145deg,#a629ea,#570998)!important;color:#fff!important;
 box-shadow:0 8px 19px #5e159c34!important;transform:translateY(-2px)}
.tn-main-nav a:focus-visible{outline:3px solid #c390ed;outline-offset:3px}
.tn-header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.tn-panel-nav{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
 background:linear-gradient(180deg,#fff,#fcf6ff)!important;color:#5a129a!important;
 border:2px solid #9325d9!important;border-radius:999px!important;box-shadow:0 6px 20px #8036bd20!important;
 padding:14px 24px!important;min-height:55px!important;font:900 clamp(13px,1.03vw,17px)/1.2 Poppins,sans-serif!important;white-space:nowrap}
.tn-panel-nav:hover{background:linear-gradient(145deg,#ae31e9,#6212aa)!important;color:#fff!important;transform:translateY(-2px)}
.tn-panel-nav .tn-icon{height:26px;width:26px;display:inline-block!important}
.tn-mobile-menu{display:none!important;align-items:center;justify-content:center;min-height:44px;min-width:46px;
 margin:0!important;border:1.5px solid #c58af5!important;color:#5b1599!important;background:#f4e3ff!important;border-radius:14px!important}
/* Pie: fondo lila completo, columnas legibles, contacto real, olas decorativas */
.tn-footer{position:relative;isolation:isolate;overflow:hidden;padding:52px 0 56px!important;
 background:linear-gradient(108deg,#f3dfff 0%,#f7edff 44%,#ead0fc 100%)!important;border-top:2px solid #e4b9fb!important;
 box-shadow:inset 0 10px 30px #9847d30c}
.tn-footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 2% 15%,#d9a6fd77,transparent 26%),radial-gradient(ellipse at 92% 60%,#c689f65c,transparent 24%)}
.tn-footer .tn-footer-content{width:min(1810px,calc(100% - 60px));max-width:none;
 display:grid;align-items:center;grid-template-columns:minmax(210px,1.35fr) minmax(220px,1.2fr) minmax(255px,1.35fr) minmax(132px,.72fr) minmax(200px,1.1fr);gap:0;
 padding:8px 0 32px;position:relative;z-index:1}
.tn-footer-content>div{min-width:0;padding:7px clamp(13px,1.8vw,30px)}
.tn-footer-content>div:not(:first-child){border-left:2px solid #b87adf76}
.tn-footer-content>div:first-child{padding-left:0}
.tn-footer-content>div:last-child{padding-right:0}
.tn-footer-logo{display:flex;align-items:center;gap:12px;min-width:0}
.tn-footer-logo img{width:72px;height:72px;object-fit:contain;flex-shrink:0}
.tn-footer-logo strong{font:900 clamp(25px,1.9vw,35px)/1.1 Poppins,sans-serif;color:#351064;letter-spacing:-.04em;display:block}
.tn-footer-logo small{font-size:12px;line-height:1.4;display:block;color:#4f2875;font-weight:750;margin-top:5px}
.tn-footer-motto{display:flex;align-items:center;justify-content:center;gap:9px;line-height:1.5;text-align:center}
.tn-footer-motto strong{color:#542185;font:850 clamp(13px,1.14vw,17px)/1.4 Poppins,sans-serif}
.tn-footer-motto .tn-icon{width:27px;height:27px;color:#a52ae6;stroke-width:2.3}
.tn-motto-spark{font-size:19px;color:#ffc41c}
.tn-footer-contact{display:flex;gap:14px;align-items:center}
.tn-footer-mailicon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;color:#fff;background:linear-gradient(140deg,#a727ed,#55108c);border-radius:16px;box-shadow:0 8px 18px #6015a02b}
.tn-footer-title{display:block;font:900 clamp(15px,1.12vw,18px)/1.35 Poppins,sans-serif;color:#361364;margin-bottom:7px}
.tn-footer-contact a{font-size:clamp(13px,1vw,16px);font-weight:800;color:#542283;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:#a35ad3;text-underline-offset:4px}
.tn-footer-contact a:hover{color:#8b0ed7}
.tn-footer-social{text-align:center}
.tn-social-list{display:flex;gap:10px;align-items:center;justify-content:center}
.tn-social-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;box-shadow:0 6px 10px #7625aa1d;color:#fff;transition:transform .2s ease,box-shadow .2s ease}
.tn-social-icon svg{width:26px;height:26px;stroke-width:2.1}
.tn-social-icon:not(a){cursor:help;opacity:.82;filter:saturate(.8)}
.tn-social-icon:hover{transform:translateY(-3px);box-shadow:0 9px 15px #7625aa2b}
.tn-social-youtube{background:linear-gradient(140deg,#ff3e48,#df061c)}
.tn-social-instagram{background:linear-gradient(145deg,#fbbd46,#ed429a,#7f25e9)}
.tn-social-tiktok{background:#171425}
.tn-footer-contact-button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:57px;padding:12px 15px;
 border:2px solid #a327e3;background:linear-gradient(160deg,#fff,#fff9ff);border-radius:999px;
 color:#511080;font:900 clamp(12px,1vw,15px)/1.25 Poppins,sans-serif;box-shadow:0 8px 18px #8e39b826;
 transition:background .2s,transform .2s,color .2s;white-space:normal;text-align:center}
.tn-footer-contact-button:hover{color:white;background:linear-gradient(135deg,#9f26df,#56128d);transform:translateY(-3px)}
.tn-footer-contact-button .tn-icon{width:24px;height:24px}
.tn-footer-contact-button .tn-icon-arrow{width:17px;height:17px}
.tn-footer .tn-footer-bottom{max-width:none;width:min(1810px,calc(100% - 60px));border-top:1px solid #b57ddd69;
 padding:17px 0 0;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
 font-size:12px;color:#5b3378;font-weight:700;position:relative;z-index:2}
.tn-footer-wave{position:absolute;z-index:0;bottom:-60px;left:-15%;width:130%;height:95px;
 background:linear-gradient(90deg,#bb75ec88,#a954e795,#b977f488);border-radius:52% 48% 0 0 / 95% 88% 0 0;transform:rotate(-1deg);pointer-events:none}
/* Small laptops: mobile menu stays attractive and fully functional */
@media(max-width:1250px){
 .tn-site-header .tn-header-inner{width:calc(100% - 32px);min-height:88px;padding:10px 19px;gap:16px}
 .tn-header-divider{display:none}
 .tn-mobile-menu{display:inline-flex!important}
 .tn-site-header .tn-main-nav{display:none!important;position:absolute!important;inset:auto 16px auto 16px;left:16px!important;right:16px!important;
  top:calc(100% + 10px)!important;flex-direction:column;align-items:stretch;gap:7px;padding:15px;
  background:#fff!important;border:1.5px solid #ddb6fa;border-radius:24px;box-shadow:0 17px 36px #57109233;z-index:5}
 .tn-site-header .tn-main-nav.open{display:flex!important}
 .tn-main-nav a{font-size:16px!important;min-height:53px;justify-content:flex-start;padding:12px 18px!important}
 .tn-footer .tn-footer-content{grid-template-columns:1.2fr 1.3fr 1.2fr;row-gap:20px}
 .tn-footer-content>div{border-left:0!important}
 .tn-footer-brand{grid-column:1}
 .tn-footer-motto{grid-column:2;border-left:2px solid #b87adf76!important}
 .tn-footer-contact{grid-column:3;border-left:2px solid #b87adf76!important}
 .tn-footer-social{grid-column:1/2;text-align:left}
 .tn-social-list{justify-content:flex-start}
 .tn-footer-action{grid-column:2/4}
}
@media(max-width:760px){
 .tn-site-header{padding:8px 0 10px!important}
 .tn-site-header .tn-header-inner{width:calc(100% - 20px);min-height:77px;padding:8px 13px;border-radius:26px;gap:8px}
 .tn-brand .tn-brand-emblem,.tn-brand img{width:55px!important;height:55px!important}
 .tn-brand{gap:5px!important}
 .tn-brand strong{font-size:clamp(23px,5.7vw,29px)!important}
 .tn-brand small{font-size:clamp(9px,2.3vw,11px)!important}
 .tn-panel-nav{min-height:44px!important;padding:9px 11px!important;font-size:12px!important}
 .tn-panel-nav .tn-icon{width:20px;height:20px}
 .tn-footer{padding:32px 0 46px!important}
 .tn-footer .tn-footer-content{width:calc(100% - 38px);display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;padding:4px 0 18px}
 .tn-footer-content>div{grid-column:auto!important;padding:8px!important;border:0!important}
 .tn-footer-content .tn-footer-brand,.tn-footer-content .tn-footer-motto{grid-column:1/-1!important}
 .tn-footer-content .tn-footer-brand{justify-self:center}
 .tn-footer-content .tn-footer-motto{justify-content:center;text-align:center;padding:6px 5px 14px!important;border-bottom:1px solid #d4a2ed!important}
 .tn-footer-content .tn-footer-contact,.tn-footer-content .tn-footer-social{grid-column:1/-1!important;justify-content:center;text-align:center}
 .tn-footer-contact a{font-size:14px}
 .tn-footer-content .tn-footer-action{grid-column:1/-1!important;padding-top:1px!important}
 .tn-footer-contact-button{max-width:390px;margin:auto}
 .tn-footer .tn-footer-bottom{width:calc(100% - 40px);justify-content:center;text-align:center;font-size:11px}
}
@media(max-width:410px){
 .tn-site-header .tn-header-inner{padding:8px 9px}
 .tn-brand .tn-brand-emblem,.tn-brand img{width:47px!important;height:47px!important}
 .tn-brand strong{font-size:23px!important}
 .tn-brand small{font-size:8.5px!important}
 .tn-mobile-menu{min-width:38px;min-height:40px;padding:6px!important}
 .tn-panel-nav{min-height:40px!important;padding:6px 8px!important;font-size:11px!important;gap:5px}
 .tn-panel-nav .tn-icon{width:17px;height:17px}
}
@media(prefers-reduced-motion:reduce){.tn-brand .tn-brand-emblem,.tn-social-icon,.tn-footer-contact-button,.tn-main-nav a{transition:none!important}}