/* Theme Name: Unipix Theme URI: https://rossbs.com Author: Ross Business Studio Description: Tema a medida para Unipix — uniformes escolares con sentido. Version: 1.0 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 8.0 License: GPL v2 or later Text Domain: unipix */ :root{ --navy:#12294D; --navy-2:#1B3A66; --navy-3:#2C4E80; --cream:#F7F3EA; --cream-2:#EFE8DA; --paper:#FFFFFF; --gold:#E9A319; --gold-soft:#F6D28A; --impact:#2E6B52; --impact-soft:#DCEBE2; --pink:#F5CBD6; --ink:#0D1A2D; --muted:#5C6A7C; --line:#E2DCCF; --radius:14px; --radius-lg:22px; --shadow:0 1px 2px rgba(13,26,45,.05), 0 8px 24px rgba(13,26,45,.06); --shadow-lg:0 24px 60px rgba(13,26,45,.14); --display:'Poppins', -apple-system, 'Helvetica Neue', Arial, sans-serif; /* titulares: acompaña al logotipo */ --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --maxw:1720px; --gutter:clamp(20px, 3vw, 48px); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.03em;margin:0} h1{font-size:clamp(2.3rem,5vw,4rem)} h2{font-size:clamp(1.7rem,3.2vw,2.6rem)} h3{font-size:clamp(1.15rem,1.8vw,1.45rem)} p{margin:0} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .eyebrow.dark{color:var(--navy-3)} .lead{font-size:1.06rem;color:var(--muted);max-width:60ch} .center{text-align:center} .mx-auto{margin-left:auto;margin-right:auto} /* ---------- BOTONES ---------- */ .btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:999px;font-weight:600;font-size:.94rem;transition:.18s ease;white-space:nowrap} .btn-primary{background:var(--navy);color:#fff} .btn-primary:hover{background:var(--navy-2);transform:translateY(-1px)} .btn-gold{background:var(--gold);color:var(--navy)} .btn-gold:hover{background:#F2B437;transform:translateY(-1px)} .btn-ghost{border:1.5px solid var(--line);background:transparent;color:var(--navy)} .btn-ghost:hover{border-color:var(--navy);background:rgba(18,41,77,.04)} .btn-white{background:#fff;color:var(--navy)} .btn-white:hover{transform:translateY(-1px)} .btn-sm{padding:.6rem 1.1rem;font-size:.85rem} .btn-block{width:100%;justify-content:center} /* ---------- TOP BAR + NAV ---------- */ .impactbar{background:var(--impact);color:#fff;font-size:.96rem;text-align:center;padding:.65rem 24px;letter-spacing:.01em} .impactbar .marq{display:inline-block} .impactbar .marq span + span{display:none} .impactbar b{font-weight:600} .impactbar a{border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:1px} header.nav{position:sticky;top:0;z-index:60;background:rgba(247,243,234,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .navrow{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);height:78px;display:flex;align-items:center;gap:2rem} .logo{display:flex;flex:none;align-items:baseline;font-family:var(--sans);font-size:1.62rem;font-weight:800;color:var(--navy);letter-spacing:-.045em} .dotstar{position:relative;display:inline-block;line-height:1} .dotstar .star{position:absolute;top:-.34em;left:50%;transform:translateX(-50%);width:.6em;height:.6em;fill:var(--gold)} .mainmenu{display:flex;gap:.35rem;margin-left:auto;align-items:center} .mainmenu > li{list-style:none;position:relative} .mainmenu > li > a,.mainmenu > li > button{display:flex;align-items:center;gap:.3rem;padding:.5rem .85rem;border-radius:8px;font-size:1.1rem;font-weight:500;color:var(--navy);transition:.15s} .mainmenu > li > a:hover,.mainmenu > li > button:hover{background:rgba(18,41,77,.06)} .mainmenu > li.active > a{color:var(--gold)} .caret{width:9px;height:9px;fill:currentColor;opacity:.5} .navtools{display:flex;align-items:center;gap:.4rem;padding-left:.8rem;margin-left:.5rem;border-left:1px solid var(--line)} .icobtn{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;transition:.15s;position:relative} .mainmenu > li.navtools > a{padding:0} .icobtn:hover{background:rgba(18,41,77,.07)} .icobtn svg{width:23px;height:23px;stroke:var(--navy);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .badge{position:absolute;top:2px;right:2px;background:var(--gold);color:var(--navy);font-size:.62rem;font-weight:700;min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;padding:0 4px} .burger{display:none} @media(min-width:961px) and (max-width:1320px){ .mainmenu > li > a,.mainmenu > li > button{font-size:1.02rem;padding:.5rem .6rem} .mainmenu{gap:.1rem} .logo img{height:72px} } /* mega menu */ .mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:1.1rem;width:400px;opacity:0;visibility:hidden;transition:.18s} .mainmenu li:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .mega-item{display:flex;gap:.85rem;align-items:center;padding:.7rem;border-radius:12px;transition:.15s} .mega-item:hover{background:var(--cream)} .mega-item .ico{width:42px;height:42px;border-radius:10px;background:var(--cream-2);display:grid;place-items:center;flex:none;font-size:.9rem;font-weight:700;color:var(--navy-3);font-family:var(--display)} .mega-item .t{font-weight:600;font-size:.92rem} .mega-item .d{font-size:.78rem;color:var(--muted);line-height:1.35} .mega-foot{border-top:1px solid var(--line);margin-top:.6rem;padding:.8rem .7rem 0;font-size:.82rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center} .pill{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;background:var(--gold-soft);color:#7a5310} .pill.green{background:var(--impact-soft);color:var(--impact)} .pill.navy{background:rgba(18,41,77,.09);color:var(--navy)} /* ---------- HERO ---------- */ .hero{background:var(--navy);color:#fff;position:relative;overflow:hidden} .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 78% 15%,rgba(233,163,25,.16),transparent 60%),radial-gradient(700px 400px at 5% 90%,rgba(46,107,82,.22),transparent 60%);pointer-events:none} .hero-inner{max-width:1480px;margin:0 auto;padding:clamp(44px,7vh,92px) clamp(28px,4.4vw,80px) clamp(48px,7.4vh,100px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:stretch;position:relative;z-index:2} .hero h1{font-size:clamp(2.1rem,3.5vw + .6rem,4.15rem)} .hero .eyebrow{font-size:clamp(.72rem,.5vw + .36rem,.86rem)} .hero-inner > *{min-width:0} .hero-art{width:100%} .hero h1{color:#fff} .hero h1 em{font-style:normal;color:var(--gold-soft)} .hero p.lead{color:rgba(255,255,255,.76);margin-top:1.1rem;font-size:clamp(.95rem,.62vw + .63rem,1.22rem);max-width:none} .searchcard{margin-top:1.8rem;background:#fff;border-radius:var(--radius-lg);padding:.6rem;box-shadow:var(--shadow-lg);display:flex;gap:.4rem;align-items:center;max-width:100%} .searchcard svg{width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:1.7;margin-left:.9rem;flex:none} .searchcard input{flex:1 1 0px;width:0;min-width:0;-webkit-appearance:none;appearance:none;border:none;outline:none;padding:.95rem .3rem;font-size:clamp(.95rem,.45vw + .63rem,1.08rem);color:var(--ink);background:transparent;text-overflow:ellipsis} .searchcard .btn{flex:none} @media(min-width:961px){.searchcard .btn{padding:.9rem 1.5rem;font-size:.95rem}.searchcard svg{width:21px;height:21px}} .searchcard input::placeholder{color:#98A3B2} .hero-trust{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.5rem;margin-top:1.6rem;max-width:540px} .hero-trust div{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:rgba(255,255,255,.72)} .hero-trust svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:2;flex:none} .btn .btn-ico{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .hero-art{position:relative;height:auto;min-height:300px;border-radius:var(--radius-lg);background:linear-gradient(160deg,#22406e,#16305a);border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;overflow:hidden} .hero-tag{position:absolute;top:14px;left:14px;z-index:3;background:rgba(255,255,255,.92);color:var(--navy);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;pointer-events:none} .hero-art .ph{color:rgba(255,255,255,.35);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;position:absolute;bottom:18px;left:0;right:0;text-align:center} .hero-art svg.garment{width:58%;opacity:.9} .impact-chip{position:absolute;left:50%;transform:translateX(-50%);bottom:20px;background:#fff;color:var(--ink);border-radius:16px;padding:.85rem 1.2rem;box-shadow:var(--shadow-lg);display:flex;gap:.7rem;align-items:center;white-space:nowrap;z-index:3} .impact-chip .dot{width:36px;height:36px;border-radius:50%;background:var(--impact-soft);display:grid;place-items:center;flex:none} .impact-chip .dot svg{width:18px;height:18px;stroke:var(--impact);fill:none;stroke-width:1.9} .impact-chip b{display:block;font-size:.9rem} .impact-chip span{font-size:.76rem;color:var(--muted);line-height:1.3;display:block} /* ---------- SECCIONES ---------- */ section{padding:80px 0} section.tight{padding:56px 0} .bg-cream{background:var(--cream)} .bg-navy{background:var(--navy);color:#fff} .bg-navy h2,.bg-navy h3{color:#fff} .sec-head{max-width:640px;margin-bottom:2.6rem} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-head h2{margin:.5rem 0 .7rem} /* tres puertas */ .doors{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .door{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;display:flex;flex-direction:column;gap:.45rem;transition:.2s;position:relative} .door:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--navy-3)} .door .ico{width:46px;height:46px;border-radius:11px;background:var(--cream);display:grid;place-items:center;margin-bottom:.5rem;transition:.2s} .door:hover .ico{background:var(--gold-soft)} .door .ico svg{width:23px;height:23px;stroke:var(--navy);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .door h3{font-size:1.08rem} .door p{font-size:.86rem;color:var(--muted);flex:1;line-height:1.5} .door .go{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--navy);margin-top:.5rem} .door .go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:.2s} .door:hover .go svg{transform:translateX(4px)} /* pasos */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;counter-reset:s} .step{position:relative;padding-top:1.6rem;border-top:2px solid var(--line)} .step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:0;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:700;font-size:.85rem;display:grid;place-items:center} .step h3{font-size:1.08rem;margin-bottom:.35rem} .step p{font-size:.9rem;color:var(--muted)} /* colegios */ .schoolgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;max-width:660px} .sec-head.center + .schoolgrid,.schoolgrid.mx-auto{margin-left:auto;margin-right:auto} .schoolcard{padding:2.4rem 1.6rem} .schoolcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;text-align:center;transition:.2s;position:relative} .schoolcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .schoolcard .crest{width:148px;height:148px;margin:0 auto 1.1rem;border-radius:50%;background:var(--cream-2);display:grid;place-items:center;font-family:var(--display);font-weight:600;color:var(--navy-3);font-size:1.1rem} .schoolcard .nm{font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.01em;line-height:1.2;margin-bottom:.3rem} .schoolcard .cm{font-size:.95rem;color:var(--muted)} .schoolcard{display:flex;flex-direction:column;align-items:center;justify-content:flex-start} .schoolcard .pill{margin-top:.9rem;font-size:.72rem;padding:.3rem .75rem} .schoolcard.soon{border-style:dashed;background:transparent;cursor:default;overflow:hidden} .schoolcard.soon:hover{transform:none;box-shadow:none} .schoolcard.soon .crest{background:transparent;border:1.5px dashed var(--line)} .schoolcard.soon .crest svg{width:40px;height:40px;stroke:var(--navy-3);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.55} /* un colegio que todavía no abre no muestra su nombre: se difumina el contenido y encima queda el aviso, legible y en grande */ .schoolcard.soon .crest, .schoolcard.soon .sc-info{filter:blur(6px);opacity:.5;user-select:none;pointer-events:none} .schoolcard.soon .pill{visibility:hidden} .schoolcard.soon::after{content:"Próximamente";position:absolute;inset:0;z-index:2; display:grid;place-items:center;font-family:var(--display);font-weight:700; font-size:clamp(1.1rem,1.4vw + .5rem,1.5rem);letter-spacing:.1em;text-transform:uppercase; color:var(--navy);text-shadow:0 1px 10px rgba(255,255,255,.9)} @media(max-width:600px){ .schoolcard.soon .crest,.schoolcard.soon .sc-info{filter:blur(4px)} .schoolcard.soon::after{font-size:1.05rem} } .school-invite{margin-top:1.4rem;font-size:.92rem;color:var(--muted);max-width:660px;text-align:center} .school-invite a{font-weight:600;color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:1px} /* productos */ .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem} /* carrusel de destacados: se ven pocos y se desliza para ver el resto */ .prail{display:flex;gap:1.3rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.4rem;scrollbar-width:none;-webkit-overflow-scrolling:touch} .prail::-webkit-scrollbar{display:none} .prail .pcard{flex:0 0 calc(25% - 1rem);scroll-snap-align:start} .rail-tools{display:flex;gap:.5rem;align-items:center} .rail-btn{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:.15s;background:#fff} .rail-btn:hover{border-color:var(--navy);background:var(--navy)} .rail-btn:hover svg{stroke:#fff} .rail-btn svg{width:17px;height:17px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pcard{cursor:pointer;position:relative} .pcard .thumb{aspect-ratio:4/5;border-radius:var(--radius);background:var(--cream);display:grid;place-items:center;position:relative;overflow:hidden;transition:.25s;border:1px solid transparent} .pcard:hover .thumb{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--shadow)} .pcard .thumb svg.garment{width:56%;stroke:var(--navy-3);fill:none;stroke-width:1.2;stroke-linejoin:round;opacity:.85} .pcard .tag{position:absolute;top:10px;left:10px;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:#fff;padding:.25rem .55rem;border-radius:999px;color:var(--navy)} .pcard .tag.green{background:var(--impact);color:#fff} .pcard .wish{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;opacity:0;transition:.2s} .pcard:hover .wish{opacity:1} .pcard .wish svg{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:1.7} .pcard .nm{margin-top:.8rem;font-weight:600;font-size:.93rem;line-height:1.3} .pcard .sub{font-size:.78rem;color:var(--muted);margin-top:.1rem} .pcard .pr{margin-top:.4rem;font-weight:700;font-size:.98rem;display:flex;align-items:baseline;gap:.5rem} .pcard .pr s{font-weight:400;font-size:.82rem;color:var(--muted)} .sizes-mini{display:flex;gap:.25rem;margin-top:.5rem;flex-wrap:wrap} .sizes-mini span{font-size:.68rem;border:1px solid var(--line);border-radius:5px;padding:.1rem .34rem;color:var(--muted)} .sizes-mini span.out,.sizes-mini span.off{opacity:.35;text-decoration:line-through} /* pestañas nuevos / usados */ .tabbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:78px;z-index:41} .tabbar .wrap{display:flex;gap:.3rem} .tab{padding:1.15rem .4rem;margin-right:2rem;font-size:1.22rem;font-weight:700;font-family:var(--display);color:var(--navy);border-bottom:4px solid transparent;display:flex;align-items:center;gap:.6rem;transition:.15s;letter-spacing:-.01em} .tab:hover{border-bottom-color:rgba(233,163,25,.4)} .tab.on{color:var(--navy);border-bottom-color:var(--gold)} /* los filtros del colegio no van fijos: chocaban con las pestañas y comían pantalla */ #filterCat{position:static} .usednote{background:var(--impact-soft);border-bottom:1px solid #C6DDD0;padding:.9rem 0;display:none} .usednote.on{display:block} .usednote .wrap{display:flex;gap:.7rem;align-items:flex-start} .usednote svg{width:19px;height:19px;stroke:var(--impact);fill:none;stroke-width:1.9;flex:none;margin-top:2px} .usednote p{font-size:.85rem;color:#22523F;line-height:1.45} .usednote a{font-weight:600;color:var(--impact);white-space:nowrap} .cond{position:absolute;top:10px;left:10px;background:var(--impact);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:.25rem .55rem;border-radius:999px;z-index:2} .unica{font-size:.72rem;color:var(--gold);font-weight:600;margin-top:.35rem} @media(max-width:960px){.tabbar{top:84px}.tab{font-size:1.05rem;margin-right:1.2rem;padding:.9rem .25rem}.usednote p{font-size:.79rem}} /* aviso de prototipo: fotos pendientes */ .needphoto{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(180,83,9,.94);color:#fff;font-size:.64rem;font-weight:600;letter-spacing:.01em;padding:.28rem .5rem;border-radius:6px;text-align:center;z-index:3} .needphoto.amber{background:rgba(18,41,77,.82)} .pcard.proposed{cursor:default} .pcard.proposed .thumb{background:repeating-linear-gradient(135deg,#fff,#fff 9px,#FAF8F3 9px,#FAF8F3 18px);border-style:dashed} .pcard.proposed .thumb svg.garment{opacity:.4} .pcard.proposed:hover .thumb{transform:none;box-shadow:none;border-color:var(--line)} .pcard.proposed .nm{color:var(--muted)} .tag.prop{background:var(--navy);color:#fff} /* impacto */ .impact-panel{background:var(--impact);color:#fff;border-radius:var(--radius-lg);padding:3rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center} .impact-panel h2{color:#fff} /* variante rosada con tipografía azul */ .impact-panel.pink{background:var(--pink);color:var(--navy)} .impact-panel.pink h2,.impact-panel.pink .metric b{color:var(--navy)} .impact-panel.pink .eyebrow{color:#9E3F5C} .impact-panel.pink .metric span{color:var(--navy);opacity:.62} .impact-panel.pink .goalcard{background:rgba(255,255,255,.6);border-color:rgba(18,41,77,.1);color:var(--navy)} /* La mitad derecha del panel rosado es una franja de color claro que llega hasta el borde, en vez de una tarjeta flotando sobre el rosa. */ .impact-panel.pink{padding:0;align-items:stretch;gap:0} .impact-panel.pink > *:first-child{padding:3rem;display:flex;flex-direction:column;justify-content:center} .impact-panel.pink > *:last-child{background:rgba(255,255,255,.6);padding:3rem; border-radius:0 var(--radius-lg) var(--radius-lg) 0;display:flex;flex-direction:column;justify-content:center} /* dentro de la franja clara la tarjeta ya no necesita fondo propio */ .impact-panel.pink > *:last-child .goalcard{background:none;border:none;padding:0;margin:0} .impact-panel.pink .goalcard .gpic{background:rgba(18,41,77,.06)} .impact-panel.pink .bar{background:rgba(18,41,77,.14)} .impact-panel.pink .bar i{background:var(--navy)} .impact-panel.pink .gm{color:var(--navy);opacity:.6} .metricrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.8rem} .metric b{font-family:var(--display);font-size:1.9rem;display:block;line-height:1} .metric span{font-size:.78rem;opacity:.8;line-height:1.3;display:block;margin-top:.3rem} .goalcard{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:1.3rem;margin-bottom:.9rem} .goalcard .gh{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:600;margin-bottom:.5rem} .goalcard p{font-size:.84rem;opacity:.82;margin-bottom:.85rem} .bar{height:7px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden} .bar i{display:block;height:100%;background:var(--gold);border-radius:999px} .goalcard .gm{font-size:.74rem;opacity:.75;margin-top:.45rem} /* confianza */ .trustgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem} .trustitem svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.6;margin-bottom:.7rem} .trustitem h4{font-family:var(--sans);font-size:.94rem;font-weight:600;margin-bottom:.25rem} .trustitem p{font-size:.84rem;color:var(--muted)} .bg-navy .trustitem p{color:rgba(255,255,255,.7)} /* faq */ .faq{max-width:760px;margin:0 auto} .faq details{border-bottom:1px solid var(--line);padding:1.1rem 0} .faq summary{list-style:none;cursor:pointer;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.35rem;color:var(--gold);font-weight:400;transition:.2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq p{font-size:.92rem;color:var(--muted);margin-top:.7rem;max-width:64ch} /* ---------- PÁGINA COLEGIO ---------- */ .school-hero{background:var(--cream);border-bottom:1px solid var(--line);padding:34px 0 28px} .school-hero .row{display:flex;gap:1.5rem;align-items:center} .school-hero .crest{width:100px;height:100px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-weight:600;color:var(--navy);font-size:1.4rem;flex:none} .crumbs{font-size:.8rem;color:var(--muted);margin-bottom:1.2rem;display:flex;gap:.45rem;align-items:center} .crumbs a:hover{color:var(--navy);text-decoration:underline} .school-meta{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:.5rem;font-size:.84rem;color:var(--muted)} .school-meta span{display:flex;align-items:center;gap:.35rem} .school-meta svg{width:14px;height:14px;stroke:var(--impact);fill:none;stroke-width:2} .filterbar{position:sticky;top:78px;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:.85rem 0} .filterrow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} .chip{border:1.5px solid var(--line);border-radius:999px;padding:.45rem .95rem;font-size:.85rem;font-weight:500;color:var(--navy);transition:.15s;background:#fff} .chip:hover{border-color:var(--navy-3)} .chip.on{background:var(--navy);color:#fff;border-color:var(--navy)} .select{margin-left:auto;border:1.5px solid var(--line);border-radius:999px;padding:.45rem 1rem;font-size:.85rem;background:#fff} /* pack */ .packcard{background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:1.4rem 1.9rem;display:grid;grid-template-columns:1.5fr .8fr;gap:2rem;align-items:center;margin-bottom:1.6rem} .packcard .packtexto h2{font-size:1.5rem !important;margin:.5rem 0 .3rem !important} .packcard .packtexto p{font-size:.88rem !important} .packlist{list-style:none;padding:0;margin:.7rem 0 0;font-size:.86rem;display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem} .packlist li{display:flex;gap:.55rem;align-items:flex-start;padding:.2rem 0;color:rgba(255,255,255,.82);min-width:0} .packlist li span{flex:1 1 auto;min-width:0} .packlist li svg{margin-top:.25em} .packlist svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:2.4;flex:none} .packprice{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:1rem 1.2rem;text-align:center} .packprice .btn{padding:.7rem 1.2rem;font-size:.9rem} .packprice p{margin-top:.5rem !important} .packprice .old{font-size:.85rem;color:rgba(255,255,255,.55);text-decoration:line-through} .packprice .now{font-family:var(--display);font-size:1.8rem;line-height:1.1;margin:.1rem 0} .packprice .save{font-size:.78rem;color:var(--gold);font-weight:600;margin-bottom:.6rem;display:block} /* ---------- PDP ---------- */ .pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:start} .gallery{display:grid;grid-template-columns:64px 1fr;gap:.8rem} .thumbs{display:flex;flex-direction:column;gap:.55rem} .thumbs button{aspect-ratio:1;border-radius:9px;background:var(--cream);border:1.5px solid transparent;display:grid;place-items:center} .thumbs button.on{border-color:var(--navy)} .thumbs svg{width:60%;stroke:var(--navy-3);fill:none;stroke-width:1.4} .mainimg{aspect-ratio:4/5;border-radius:var(--radius-lg);background:var(--cream);display:grid;place-items:center;position:relative} .mainimg svg.garment{width:52%;stroke:var(--navy-3);fill:none;stroke-width:1.1;stroke-linejoin:round} .mainimg .ph{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#A9A192} .pdp h1{font-size:clamp(1.8rem,3vw,2.4rem);margin:.6rem 0 .5rem} .price{font-size:1.6rem;font-weight:700;display:flex;align-items:baseline;gap:.7rem;margin:1rem 0 .3rem} .price s{font-size:1rem;font-weight:400;color:var(--muted)} .vat{font-size:.8rem;color:var(--muted)} .opt-label{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;font-weight:600;margin:1.6rem 0 .6rem} .opt-label button{font-size:.8rem;font-weight:500;color:var(--navy-3);text-decoration:underline;text-underline-offset:3px} .sizerow{display:flex;gap:.5rem;flex-wrap:wrap} .size{min-width:52px;border:1.5px solid var(--line);border-radius:10px;padding:.6rem .5rem;text-align:center;font-size:.88rem;font-weight:500;background:#fff;transition:.15s} .size:hover{border-color:var(--navy-3)} .size.on{background:var(--navy);color:#fff;border-color:var(--navy)} .size.out{opacity:.4;cursor:not-allowed;background:repeating-linear-gradient(135deg,#fff,#fff 4px,#F3F1EC 4px,#F3F1EC 8px)} .stocknote{font-size:.82rem;color:var(--impact);margin-top:.6rem;display:flex;align-items:center;gap:.4rem} .stocknote svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4} .qtyrow{display:flex;gap:.8rem;margin-top:1.6rem} .qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden} .qty button{width:42px;height:48px;font-size:1.1rem;color:var(--navy)} .qty span{width:34px;text-align:center;font-weight:600} .impact-note{margin-top:1.3rem;background:var(--impact-soft);border-radius:var(--radius);padding:1rem 1.1rem;display:flex;gap:.8rem;align-items:flex-start} .impact-note svg{width:20px;height:20px;stroke:var(--impact);fill:none;stroke-width:1.8;flex:none;margin-top:2px} .impact-note p{font-size:.85rem;color:#22523F} .impact-note b{color:var(--impact)} .acc{margin-top:2rem;border-top:1px solid var(--line)} .acc details{border-bottom:1px solid var(--line);padding:1rem 0} .acc summary{list-style:none;cursor:pointer;font-weight:600;font-size:.92rem;display:flex;justify-content:space-between} .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:"+";color:var(--gold);font-size:1.2rem} .acc details[open] summary::after{content:"–"} .acc .body{font-size:.87rem;color:var(--muted);margin-top:.8rem} table.sizes{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:.6rem} table.sizes th,table.sizes td{border:1px solid var(--line);padding:.45rem .6rem;text-align:center} table.sizes th{background:var(--cream);font-weight:600} /* ---------- EMPRESAS ---------- */ .b2b-hero{background:var(--navy);color:#fff;padding:70px 0} .b2b-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start} .form-card{background:#fff;border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-lg);color:var(--ink)} .field{margin-bottom:1rem} .field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.35rem} .field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:.72rem .85rem;font:inherit;font-size:.9rem;outline:none;background:#fff} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy-3)} .field2{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .usecases{display:grid;gap:.8rem;margin-top:1.6rem} .usecase{display:flex;gap:.9rem;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:1rem 1.1rem} .usecase .ico{width:38px;height:38px;border-radius:9px;background:rgba(233,163,25,.18);display:grid;place-items:center;flex:none} .usecase .ico svg{width:19px;height:19px;stroke:var(--gold);fill:none;stroke-width:1.7} .usecase b{font-size:.92rem;display:block} .usecase span{font-size:.82rem;color:rgba(255,255,255,.68);line-height:1.4} /* ---------- NOSOTRAS ---------- */ .founders{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.5rem} .founder{background:var(--cream);border-radius:var(--radius-lg);padding:2rem;text-align:center} .founder .av{width:96px;height:96px;border-radius:50%;background:var(--cream-2);margin:0 auto 1rem;display:grid;place-items:center;font-family:var(--display);font-size:2rem;color:var(--navy-3)} .founder h3{font-size:1.2rem} .founder .role{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:.3rem 0 .8rem} .founder p{font-size:.88rem;color:var(--muted)} /* ---------- CARRITO ---------- */ .drawer-bg{position:fixed;inset:0;background:rgba(13,26,45,.4);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.25s;z-index:80} .drawer-bg.on{opacity:1;visibility:visible} .drawer{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;z-index:90;transform:translateX(100%);transition:.28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column} .drawer.on{transform:translateX(0)} .drawer-head{padding:1.3rem 1.5rem;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .drawer-head h3{font-size:1.2rem} .drawer-body{flex:1;overflow-y:auto;padding:1.2rem 1.5rem} .citem{display:flex;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--line)} .citem .th{width:66px;height:80px;border-radius:9px;background:var(--cream);display:grid;place-items:center;flex:none} .citem .th svg{width:60%;stroke:var(--navy-3);fill:none;stroke-width:1.4} .citem .th{overflow:hidden} .citem .th img{width:100%;height:100%;object-fit:cover} .citem .nm{font-weight:600;font-size:.88rem;line-height:1.25} .citem .vr{font-size:.78rem;color:var(--muted);margin:.15rem 0 .4rem} .citem .pr{font-weight:600;font-size:.88rem} .drawer-foot{border-top:1px solid var(--line);padding:1.3rem 1.5rem} .impact-strip{background:var(--impact-soft);border-radius:10px;padding:.75rem .9rem;font-size:.82rem;color:#22523F;display:flex;gap:.6rem;align-items:center;margin-bottom:1rem} .impact-strip svg{width:17px;height:17px;stroke:var(--impact);fill:none;stroke-width:2;flex:none} .totrow{display:flex;justify-content:space-between;font-size:.88rem;padding:.25rem 0;color:var(--muted)} .totrow.big{font-size:1.1rem;font-weight:700;color:var(--ink);border-top:1px solid var(--line);margin-top:.5rem;padding-top:.7rem} /* ---------- FOOTER ---------- */ footer{background:var(--navy);color:rgba(255,255,255,.72);padding:64px 0 28px;font-size:.88rem} .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.13)} footer h4{font-family:var(--sans);color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;font-weight:600} footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem} footer a:hover{color:#fff} .flogo{font-family:var(--sans);font-size:1.5rem;font-weight:800;letter-spacing:-.045em;color:#fff;display:flex;align-items:baseline;margin-bottom:.8rem} .fbot{display:flex;justify-content:space-between;gap:1rem;padding-top:1.5rem;font-size:.78rem;color:rgba(255,255,255,.5);flex-wrap:wrap} .paylogos{display:flex;gap:.5rem} .paylogos span{background:rgba(255,255,255,.1);border-radius:5px;padding:.22rem .5rem;font-size:.68rem;color:rgba(255,255,255,.7)} /* ---------- COLEGIO: PORTADA Y LOGO ---------- */ .school-hero.with-cover{position:relative;overflow:hidden;border-bottom:none;padding:52px 0 44px} .school-hero .cover{position:absolute;inset:0} .school-hero .cover img{width:100%;height:100%;object-fit:cover;object-position:center 35%} .school-hero .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,41,77,.95) 0%,rgba(18,41,77,.88) 42%,rgba(18,41,77,.55) 100%)} .school-hero.with-cover .wrap{position:relative;z-index:2} .school-hero.with-cover h1,.school-hero.with-cover .crumbs span{color:#fff} .school-hero.with-cover .crumbs{color:rgba(255,255,255,.6)} .school-hero.with-cover .crumbs a:hover{color:#fff} .school-hero.with-cover .school-meta{color:rgba(255,255,255,.78)} .school-hero.with-cover .school-meta svg{stroke:var(--gold)} .school-logo{background:#fff;border-radius:16px;padding:.6rem;flex:none;box-shadow:var(--shadow);display:grid;place-items:center;width:132px;height:132px} .school-logo img{width:100%;height:100%;object-fit:contain;display:block} .schoolcard .crest{overflow:hidden;background:#fff;border:1px solid var(--line)} .schoolcard .crest img{width:100%;height:100%;object-fit:contain;padding:10px} .mega-item .ico.logo-ico{background:#fff;border:1px solid var(--line);overflow:hidden} .mega-item .ico.logo-ico img{width:100%;height:100%;object-fit:contain;padding:4px} @media(max-width:600px){.school-logo img{width:150px}} /* ---------- IMÁGENES REALES ---------- */ .hero-art img,.door .art img{width:100%;height:100%;object-fit:cover;display:block} .door .art{overflow:hidden;padding:0;background:#fff;border:1px solid var(--line)} .door .art img{object-fit:contain !important;padding:6%} /* fotos de producto: fondo blanco, sin recorte */ .pcard .thumb{overflow:hidden;background:#fff;border:1px solid var(--line)} .pcard .thumb img{width:100%;height:100%;object-fit:contain;padding:7%;display:block} .pcard:hover .thumb{border-color:var(--navy-3)} .mainimg{overflow:hidden;background:#fff;border:1px solid var(--line)} .mainimg img{width:100%;height:100%;object-fit:contain;padding:5%;display:block} .thumbs button{overflow:hidden;padding:0;background:#fff;border:1.5px solid var(--line)} .thumbs img{width:100%;height:100%;object-fit:contain;padding:8%;display:block} .citem .th img{object-fit:contain !important;background:#fff;padding:4%} .campaign{position:relative;height:380px;overflow:hidden} .campaign img{width:100%;height:100%;object-fit:cover;object-position:center 40%} .campaign .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,41,77,.94) 0%,rgba(18,41,77,.72) 45%,rgba(18,41,77,.15) 100%);display:flex;align-items:center} .campaign .ov .wrap{width:100%} .campaign h2{color:#fff;max-width:16ch} .campaign p{color:rgba(255,255,255,.82);max-width:42ch;margin-top:.8rem} .goalcard{display:flex;gap:1rem;align-items:flex-start} .goalcard .gpic{width:74px;height:74px;border-radius:10px;overflow:hidden;flex:none;background:rgba(255,255,255,.12)} .goalcard .gpic img{width:100%;height:100%;object-fit:cover} .goalcard .gbody{flex:1;min-width:0} .impact-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;margin-bottom:1rem} .impact-media img{width:100%;height:100%;object-fit:cover} .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem} .gallery-grid figure{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:var(--cream)} .gallery-grid img{width:100%;height:100%;object-fit:cover;transition:.35s} .gallery-grid figure:hover img{transform:scale(1.05)} /* grilla pareja: todas del mismo alto */ /* el encuadre de cada foto se define en la plantilla, según dónde esté lo importante */ .gallery-grid img[data-pos]{object-position:var(--pos)} .impact-hero{position:relative;overflow:hidden} .impact-hero .bgimg{position:absolute;inset:0} .impact-hero .bgimg img{width:100%;height:100%;object-fit:cover} .impact-hero .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,107,82,.96) 0%,rgba(46,107,82,.86) 50%,rgba(46,107,82,.55) 100%)} .impact-hero .wrap{position:relative;z-index:2} .founders-photo{border-radius:var(--radius-lg);background:var(--cream);padding:1.5rem 1.5rem 0;text-align:center;margin-top:2.5rem} .founders-photo img{width:100%;max-width:520px;height:auto;margin:0 auto;display:block} .steps-4{grid-template-columns:repeat(4,1fr)} .goals-2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem} @media(max-width:960px){.gallery-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.gallery-grid{grid-template-columns:minmax(0,1fr)}.gallery-grid figure{aspect-ratio:4/3}} /* controles de nav móvil: ocultos en escritorio */ .mobnav,.burger,.mobilemenu{display:none} @media(max-width:960px){ .hero-inner,.pdp,.b2b-grid,.impact-panel{grid-template-columns:minmax(0,1fr);gap:1.4rem} .hero-art{height:auto;aspect-ratio:16/9;order:2;border-radius:var(--radius)} .doors,.steps,.steps-4,.trustgrid,.founders,.goals-2{grid-template-columns:1fr 1fr;gap:1.4rem} /* pie: marca arriba a todo el ancho, y los tres bloques de enlaces en fila */ .fgrid{grid-template-columns:repeat(3,1fr);gap:1.4rem 1rem} .fgrid > div:first-child{grid-column:1/-1} .pgrid,.schoolgrid{grid-template-columns:repeat(2,1fr)} .prail .pcard{flex:0 0 calc(50% - .8rem)} .rail-btn{display:none} .mainmenu{display:none} /* barra superior: menú · logo centrado · carrito */ .navrow{height:84px;padding:0 12px;gap:0} .mobnav{display:grid;flex:none} .logo{flex:1;justify-content:center;font-size:2rem} .burger{display:grid;flex:none;position:relative} .mobilemenu{display:block;background:var(--cream);border-top:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1)} .mobilemenu.on{max-height:640px;overflow-y:auto} .mobilemenu a{display:block;padding:.95rem 22px;font-size:1rem;font-weight:500;color:var(--navy);border-bottom:1px solid rgba(226,220,207,.65)} .mobilemenu .mm-label{display:block;padding:.8rem 22px .3rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-3);opacity:.65} .mobilemenu .mm-sub{padding:.62rem 22px .62rem 34px;font-size:.94rem;font-weight:400;border-bottom:none;background:rgba(18,41,77,.03)} .mobilemenu .mm-sub:has(+ a:not(.mm-sub)){padding-bottom:.85rem;border-bottom:1px solid rgba(226,220,207,.65)} .mobilemenu .mm-cta{background:var(--gold);color:var(--navy);font-weight:600;text-align:center;border-bottom:none} } @media(max-width:600px){ section{padding:52px 0} .steps,.steps-4,.trustgrid,.founders,.goals-2{grid-template-columns:1fr} .gallery{grid-template-columns:1fr} .thumbs{flex-direction:row} .thumbs button{width:56px} /* hero: texto más arriba, sin la foto */ .hero-inner{padding:30px 22px 42px} .hero h1{font-size:2.15rem} .hero p.lead{font-size:.98rem;margin-top:.8rem} .searchcard{margin-top:1.4rem;padding:.35rem} .searchcard svg{margin-left:.65rem;width:18px;height:18px} .searchcard input{font-size:.92rem;padding:.75rem .2rem} .searchcard .btn{padding:.72rem 1rem;font-size:.88rem;gap:.35rem} .searchcard .btn-ico{width:15px;height:15px} .hero-trust{gap:.55rem .9rem;margin-top:1.1rem} .hero-trust div{font-size:.76rem;align-items:flex-start} .hero-trust svg{margin-top:3px} /* "¿Qué estás buscando?": una sola pantalla, sin imágenes */ /* destacados: dos visibles y el borde del tercero para invitar a deslizar */ .prail{gap:.8rem} .prail .pcard{flex:0 0 45%} .doors{grid-template-columns:1fr;gap:.6rem} .door{padding:.85rem 1rem;flex-direction:row;align-items:center;gap:.85rem;flex-wrap:wrap} .door .ico{width:38px;height:38px;border-radius:9px;margin:0;flex:none;order:1} .door .ico svg{width:19px;height:19px} .door h3{font-size:1rem;flex:1;order:2;min-width:0} .door p{font-size:.78rem;line-height:1.4;order:4;flex-basis:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0} .door .go{order:3;flex:none;margin:0;font-size:0} .door .go svg{width:18px;height:18px} section.tight{padding:40px 0} .sec-head{margin-bottom:1.4rem} .sec-head .lead{font-size:.9rem} /* "Nuestra ayuda": cabe en una pantalla */ .impact-panel{padding:1.5rem;gap:1.3rem} .impact-panel.pink{padding:0;gap:0} .impact-panel.pink > *:first-child{padding:1.6rem 1.5rem 1.4rem} .impact-panel.pink > *:last-child{padding:1.5rem;border-radius:0 0 var(--radius-lg) var(--radius-lg)} .impact-panel h2{font-size:1.55rem;margin:.4rem 0 .5rem} .impact-panel p{font-size:.88rem} .impact-media{display:none} .metricrow{grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.1rem} .metric b{font-size:1.35rem} .metric span{font-size:.68rem} .impact-panel .btn{width:100%;justify-content:center} .ip-actions{flex-direction:column;gap:.6rem} .goalcard{padding:.8rem;gap:.75rem;margin-bottom:.6rem} .goalcard .gpic{width:52px;height:52px} .goalcard .gh{font-size:.78rem;margin-bottom:.4rem} .goalcard .gm{font-size:.7rem} /* cabecera del colegio: máximo un tercio de la pantalla */ .school-hero.with-cover{padding:16px 0 18px} .school-hero .row{gap:.9rem;align-items:center} .school-logo{width:64px;height:64px;padding:.35rem;border-radius:11px} .school-hero.with-cover .crumbs{margin-bottom:.6rem;font-size:.72rem} .school-hero.with-cover h1{font-size:1.32rem !important;margin-top:.35rem !important;line-height:1.15} .school-hero.with-cover .pill{font-size:.6rem;padding:.16rem .45rem} .school-meta{gap:.3rem;margin-top:.55rem;font-size:.73rem;flex-direction:column} .school-meta span:nth-child(n+3){display:none} /* filtros en una sola línea deslizable */ .filterrow{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.15rem} .filterrow::-webkit-scrollbar{display:none} .filterrow .chip,.filterrow .select{flex:none;margin-left:0 !important;font-size:.82rem;padding:.42rem .8rem} .filterbar{padding:.7rem 0} /* barras de servicio: una línea cada una */ .impactbar{font-size:.78rem;padding:.5rem 0;white-space:nowrap;overflow:hidden} .impactbar .marq{display:inline-flex;gap:3rem;animation:unipix-marq 22s linear infinite;will-change:transform} .impactbar .marq span + span{display:inline} .impactbar .marq span{flex:none} @keyframes unipix-marq{to{transform:translateX(calc(-50% - 1.5rem))}} @media(prefers-reduced-motion:reduce){.impactbar .marq{animation:none}.impactbar .marq span + span{display:none}} } /* ================================================================== WOOCOMMERCE — llevar la vitrina al diseño aprobado ================================================================ */ .woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin:0;padding:0;list-style:none} .woocommerce ul.products::before,.woocommerce ul.products::after{display:none} .woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;text-align:left;position:relative} /* la foto, como en las tarjetas del prototipo */ .woocommerce ul.products li.product a img{ aspect-ratio:4/5;object-fit:contain;padding:16%;background:#fff; border:1px solid var(--line);border-radius:var(--radius);margin:0;transition:.25s;width:100%} .woocommerce ul.products li.product:hover a img{border-color:var(--navy-3);transform:translateY(-4px);box-shadow:var(--shadow)} .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--sans);font-size:.93rem;font-weight:600;line-height:1.3; color:var(--ink);margin:.8rem 0 .1rem;padding:0} .woocommerce ul.products li.product .price{ font-family:var(--sans);font-size:.98rem;font-weight:700;color:var(--ink);margin-top:.4rem;display:block} .woocommerce ul.products li.product .price del{font-weight:400;font-size:.82rem;color:var(--muted);margin-right:.4rem} .woocommerce ul.products li.product .price ins{text-decoration:none;font-weight:700} /* botón de añadir: discreto, no compite con la foto */ .woocommerce ul.products li.product .button{ display:inline-flex;align-items:center;margin-top:.6rem;padding:.5rem 1rem; border-radius:999px;background:var(--navy);color:#fff;font-size:.82rem;font-weight:600} .woocommerce ul.products li.product .button:hover{background:var(--navy-2)} /* etiqueta de oferta: reemplaza la burbuja verde de WooCommerce */ .woocommerce span.onsale{ position:absolute;top:10px;right:10px;left:auto;margin:0;min-height:0;min-width:0;line-height:1; background:var(--gold);color:var(--navy);font-family:var(--sans);font-size:.66rem;font-weight:700; letter-spacing:.04em;text-transform:uppercase;padding:.28rem .6rem;border-radius:999px;z-index:3} /* estado de las prendas usadas */ .unipix-estado{ position:absolute;top:10px;left:10px;z-index:3;background:var(--impact);color:#fff; font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase; padding:.25rem .55rem;border-radius:999px} .unipix-aviso-usado{background:var(--impact-soft);border-radius:var(--radius);padding:1rem 1.1rem;margin:1rem 0} .unipix-aviso-usado strong{color:var(--impact);display:block;margin-bottom:.3rem;font-size:.9rem} .unipix-aviso-usado p{font-size:.85rem;color:#22523F;margin:0} /* ficha de producto */ .woocommerce div.product{display:grid;max-width:1180px;margin:0 auto;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); grid-template-areas:"galeria resumen" "tabs tabs" "related related"; column-gap:clamp(2rem,3.5vw,3.8rem);row-gap:3.2rem;align-items:start} .woocommerce div.product > .woocommerce-product-gallery,.woocommerce div.product > div.images{grid-area:galeria;width:100%;max-width:none;float:none} .woocommerce div.product > .summary, .woocommerce div.product div.summary.entry-summary{grid-area:resumen;width:100%;max-width:none;float:none;margin:0} .woocommerce div.product > .woocommerce-tabs{grid-area:tabs;width:100%;max-width:none;float:none} .woocommerce div.product > .related,.woocommerce div.product > .upsells{grid-area:related;width:100%;max-width:none;float:none} /* la galería ocupa su columna completa */ .woocommerce div.product .woocommerce-product-gallery__wrapper{width:100%;margin:0} .woocommerce div.product .woocommerce-product-gallery__image{width:100%} .woocommerce div.product .woocommerce-product-gallery__image a{display:block} .woocommerce div.product div.images img{width:100%;height:auto;display:block} .woocommerce div.product .flex-viewport{width:100%} /* miniaturas de la galería */ .woocommerce div.product .flex-control-thumbs{display:flex;gap:.6rem;margin:.8rem 0 0;padding:0;list-style:none;flex-wrap:wrap} .woocommerce div.product .flex-control-thumbs li{width:74px;margin:0;float:none} .woocommerce div.product .flex-control-thumbs img{border-radius:10px;border:1.5px solid var(--line);opacity:.65;transition:.15s;cursor:pointer} .woocommerce div.product .flex-control-thumbs img.flex-active,.woocommerce div.product .flex-control-thumbs img:hover{opacity:1;border-color:var(--navy)} .woocommerce div.product div.images{margin:0} .woocommerce div.product div.images img{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:11%;box-sizing:border-box;object-fit:contain} /* las miniaturas conservan su propio encuadre */ .woocommerce div.product .flex-control-thumbs img{padding:6%;border-radius:10px} .woocommerce div.product .product_title{font-family:var(--display);font-size:clamp(1.5rem,1.7vw + .5rem,2rem);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:.35rem 0 .7rem} .woocommerce div.product .summary > *{max-width:none} .woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted);font-size:.92rem;line-height:1.7;margin-bottom:1.5rem;max-width:52ch} .woocommerce div.product p.price{font-family:var(--display);font-size:1.62rem;font-weight:600;color:var(--ink);margin:0 0 1.2rem;letter-spacing:-.02em} .woocommerce div.product p.price del{font-size:1rem;font-weight:400;color:var(--muted)} .woocommerce div.product form.cart{margin-top:.4rem} .woocommerce div.product form.cart .button{background:var(--navy);color:#fff;border-radius:999px;padding:.8rem 1.7rem;font-weight:600;font-size:.92rem;transition:.15s} .woocommerce div.product form.cart div.quantity{margin-right:.7rem} .woocommerce div.product form.cart .single_variation_wrap{width:100%} .woocommerce div.product .woocommerce-variation-price{margin-bottom:.8rem} .woocommerce div.product .woocommerce-variation-price .price{font-size:1.3rem} .woocommerce div.product .stock{font-size:.88rem;font-weight:500;color:var(--impact);margin:.3rem 0 .8rem} .woocommerce div.product .stock.out-of-stock{color:var(--red,#B4432F)} .woocommerce div.product form.cart .button:hover{background:var(--navy-2)} .woocommerce .quantity input{border:1.5px solid var(--line);border-radius:10px;padding:.5rem} .woocommerce div.product .woocommerce-tabs{border-top:1px solid var(--line);padding-top:2.2rem} .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 1.4rem;display:flex;gap:2rem;border:none} .woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:none;border-radius:0;padding:0;margin:0} .woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--muted);padding:0 0 .6rem;border-bottom:3px solid transparent;display:block} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--navy);border-bottom-color:var(--gold)} .woocommerce div.product .woocommerce-tabs .panel{max-width:70ch;color:var(--muted);font-size:.95rem;line-height:1.65} .woocommerce div.product .woocommerce-tabs .panel h2{display:none} .woocommerce div.product .related > h2,.woocommerce div.product .upsells > h2{font-family:var(--display);font-size:1.5rem;font-weight:600;margin-bottom:1.4rem;letter-spacing:-.02em} .woocommerce div.product .related{border-top:1px solid var(--line);padding-top:2.4rem} /* selector de tallas */ .woocommerce div.product form.cart .variations{margin-bottom:1rem} .woocommerce div.product form.cart .variations label{font-weight:600;font-size:.86rem} .woocommerce div.product form.cart .variations select{ border:1.5px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-size:.9rem;min-width:180px} /* mensajes, carrito y pago */ .woocommerce-message,.woocommerce-info,.woocommerce-error{ border-top-color:var(--navy);border-radius:var(--radius);font-size:.92rem} .woocommerce-message::before,.woocommerce-info::before{color:var(--navy)} .woocommerce table.shop_table{border-radius:var(--radius);font-size:.92rem} .woocommerce .cart .button,.woocommerce button.button.alt,.woocommerce #respond input#submit.alt{ background:var(--navy);color:#fff;border-radius:999px;font-weight:600;padding:.85rem 1.6rem} .woocommerce .cart .button:hover,.woocommerce button.button.alt:hover{background:var(--navy-2)} .woocommerce-breadcrumb{font-size:.8rem;color:var(--muted);margin-bottom:1.2rem} .woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{font-size:.86rem;color:var(--muted)} .unipix-woo{padding-top:34px} /* carrusel de la portada: mismo marcado que la tienda, en fila deslizable */ .woocommerce ul.products.prail{display:flex;grid-template-columns:none;gap:1.3rem;overflow-x:auto; scroll-snap-type:x mandatory;padding-bottom:.4rem;scrollbar-width:none} .woocommerce ul.products.prail::-webkit-scrollbar{display:none} .woocommerce ul.products.prail li.product{flex:0 0 calc(25% - 1rem);scroll-snap-align:start} @media(max-width:960px){ .woocommerce ul.products{grid-template-columns:repeat(2,1fr)} .woocommerce div.product{grid-template-columns:minmax(0,1fr);grid-template-areas:"galeria" "resumen" "tabs" "related";row-gap:2rem} .woocommerce ul.products.prail li.product{flex:0 0 calc(50% - .8rem)} } @media(max-width:600px){ .woocommerce ul.products.prail{gap:.8rem} .woocommerce ul.products.prail li.product{flex:0 0 45%} } /* ================================================================== HERO — acceso a las listas de útiles escolares ================================================================ */ .hero-utiles{display:block;position:relative;overflow:hidden;border-radius:var(--radius-lg); aspect-ratio:1/1.02;background:#fff;text-decoration:none;transition:.25s;border:1px solid rgba(255,255,255,.12)} .hero-utiles:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .hero-utiles img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} .hero-utiles::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.94) 74%)} .hero-utiles-texto{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem} .hero-utiles-texto .eyebrow{color:var(--gold);display:block;margin-bottom:.45rem} .hero-utiles-texto strong{display:block;font-family:var(--display);font-weight:500;font-size:1.32rem; line-height:1.2;color:var(--navy);letter-spacing:-.015em} .hero-utiles-texto .go{display:flex;align-items:center;gap:.4rem;margin-top:.75rem; font-size:.85rem;font-weight:600;color:var(--navy)} .hero-utiles-texto .go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:.2s} .hero-utiles:hover .go svg{transform:translateX(4px)} @media(max-width:960px){ .hero-utiles{display:block;aspect-ratio:16/9;margin-top:1.6rem} .hero-utiles-texto strong{font-size:1.1rem} } /* tres colegios por fila */ .schoolgrid-3{grid-template-columns:repeat(3,1fr);max-width:none} .schoolgrid .crest img{width:100%;height:100%;object-fit:contain;padding:8px} @media(max-width:960px){.schoolgrid-3{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){ .schoolgrid,.schoolgrid-3{grid-template-columns:minmax(0,1fr);gap:.8rem} .schoolcard{flex-direction:row;align-items:center;text-align:left;gap:1rem;padding:1rem 1.1rem} .schoolcard .crest{width:84px;height:84px;margin:0;flex:none} .schoolcard .crest img{padding:7px} .schoolcard .nm{font-size:1.08rem;margin-bottom:.2rem} .schoolcard .cm{font-size:.86rem} .schoolcard .pill{margin-top:.45rem} .schoolcard .sc-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start} } /* las etiquetas se posicionan dentro de su tarjeta, no de la página */ .woocommerce ul.products li.product{position:relative} /* ================================================================== BANNERS DE PROMOCIÓN — packs, producto del mes, etc. ================================================================ */ .banners-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem} .banners{display:grid;gap:1.2rem} /* un banner a la vez: sin asomar el siguiente, se cambia solo con las flechas */ .banners-rail{display:block} .banners-rail .packcard:not(.activo){display:none} .banners-rail .packcard.activo{animation:unipix-fade .28s ease} @keyframes unipix-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.banners-rail .packcard.activo{animation:none}} .banners-cuenta{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:3.2em;text-align:center} .banners-cuenta b{color:var(--navy)} .banners-tools .rail-btn{display:grid} .banners-rail .packcard{margin-bottom:0} .packcard{position:relative;overflow:hidden} .packcard .packtexto{position:relative;z-index:2} .packcard .packfoto{position:absolute;inset:0;z-index:0} .packcard .packfoto img{width:100%;height:100%;object-fit:cover} .packcard.con-foto::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(100deg,rgba(18,41,77,.96) 0%,rgba(18,41,77,.86) 55%,rgba(18,41,77,.55) 100%)} .packcard .packprice{position:relative;z-index:2} .packcard .packprice .old del,.packcard .packprice .old .amount{text-decoration:line-through} .packcard .packprice .now .amount{font-family:var(--display)} @media(max-width:960px){ /* móvil: banners compactos, uno a la vez, con flechas */ .banners-zona{padding-top:14px !important} .banners-head{margin-bottom:.5rem} .banners-head .eyebrow{font-size:.62rem} .banners-tools .rail-btn{width:34px;height:34px} .packcard{grid-template-columns:1fr;gap:.8rem;padding:1rem 1.1rem;border-radius:var(--radius);margin-bottom:0} .packcard{align-items:start} .packcard .packtexto h2{font-size:1.15rem !important;margin:.4rem 0 0 !important} .packcard .packtexto p{display:none} /* el contenido del pack sí va: compacto, en dos columnas */ .packcard .packlist{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;margin:.55rem 0 0;font-size:.78rem} .packcard .packlist li{padding:.12rem 0;gap:.4rem;line-height:1.3} .packcard .packlist svg{width:11px;height:11px} .packcard .packprice{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2rem .9rem;text-align:left;padding:.7rem .9rem} .packcard .packprice .old{grid-column:1;font-size:.72rem} .packcard .packprice .now{grid-column:1;font-size:1.35rem;margin:0} .packcard .packprice .save{grid-column:1;margin:0;font-size:.7rem} .packcard .packprice .btn{grid-column:2;grid-row:1/4;width:auto;padding:.6rem 1rem;font-size:.85rem} .packcard .packprice p{display:none} } /* ================================================================== REUTILIZA — banners de la pestaña de usados ================================================================ */ .reutiliza-banners{padding:26px 0 0} .reutiliza-banners .wrap{display:grid;gap:.9rem} .rbanner{display:flex;align-items:center;gap:1.1rem;padding:1.15rem 1.4rem;border-radius:var(--radius);flex-wrap:wrap} .rbanner-ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:none} .rbanner-ico svg{width:22px;height:22px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .rbanner-texto{flex:1;min-width:230px} .rbanner-texto h3{font-family:var(--sans);font-size:1rem;font-weight:700;margin-bottom:.15rem;letter-spacing:0} .rbanner-texto p{font-size:.89rem;line-height:1.45} .rbanner .btn{flex:none} /* el que invita a reciclar: destacado, con acción */ .rbanner-reciclar{background:var(--impact);color:#fff} .rbanner-reciclar .rbanner-ico{background:rgba(255,255,255,.16)} .rbanner-reciclar .rbanner-ico svg{stroke:#fff} .rbanner-reciclar h3{color:#fff} .rbanner-reciclar p{color:rgba(255,255,255,.85)} /* el que explica cómo comprar: informativo */ .rbanner-comprar{background:var(--cream);border:1px solid var(--line)} .rbanner-comprar .rbanner-ico{background:#fff;border:1px solid var(--line)} .rbanner-comprar .rbanner-ico svg{stroke:var(--impact)} .rbanner-comprar h3{color:var(--navy)} .rbanner-comprar p{color:var(--muted)} @media(max-width:600px){ /* móvil: una línea con icono + título, sin bajada; el botón compacto al lado */ .reutiliza-banners{padding-top:14px} .reutiliza-banners .wrap{gap:.55rem} .rbanner{padding:.7rem .9rem;gap:.7rem;flex-wrap:nowrap;align-items:center} .rbanner-ico{width:32px;height:32px;border-radius:8px} .rbanner-ico svg{width:17px;height:17px} .rbanner-texto{min-width:0;flex:1} .rbanner-texto h3{font-size:.92rem;margin:0;line-height:1.25} .rbanner-texto p{display:none} .rbanner .btn{width:auto;padding:.55rem .9rem;font-size:.82rem;flex:none} } /* distintivo de las prendas nuevas: navy, distinto del verde de Reutiliza */ .unipix-destacado{position:absolute;top:10px;left:10px;z-index:3;background:var(--navy);color:#fff; font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase; padding:.25rem .55rem;border-radius:999px} /* avisos del formulario de cotización */ .form-aviso{border-radius:var(--radius);padding:.9rem 1.1rem;margin-bottom:1.2rem;font-size:.88rem} .form-aviso strong{display:block;margin-bottom:.15rem} .form-aviso p{margin:0} .form-aviso.ok{background:var(--impact-soft);color:#22523F;border:1px solid #C6DDD0} .form-aviso.error{background:#FDECEA;color:#8A2318;border:1px solid #F5C6C0} .field label span[aria-hidden]{color:#B3261E} .b2b-hero .usecases{margin-top:1.6rem} /* meta en curso: sin barras de progreso ni montos */ .impact-panel .goalcard.meta-actual{display:block;padding:1.5rem 1.6rem} .impact-panel .goalcard.meta-actual h3{font-family:var(--display);font-weight:500;letter-spacing:-.01em} .impact-panel .goalcard.meta-actual p{font-size:.9rem;line-height:1.5;opacity:.85} .ip-actions{display:flex;gap:.7rem;margin-top:2rem;flex-wrap:wrap} .impact-panel.pink .ip-actions .btn-ghost{border-color:rgba(18,41,77,.25);color:var(--navy)} .impact-panel.pink .ip-actions .btn-ghost:hover{background:rgba(255,255,255,.45)} /* ================================================================== IMPACTO ================================================================ */ .duo-impacto{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center} .comofunciona{display:grid;gap:.8rem} .cf-item{display:flex;gap:.95rem;align-items:flex-start;background:var(--cream); border-radius:var(--radius);padding:1rem 1.15rem} .cf-num{width:30px;height:30px;border-radius:50%;background:var(--impact);color:#fff; font-size:.85rem;font-weight:700;display:grid;place-items:center;flex:none} .cf-item b{display:block;font-size:.94rem;margin-bottom:.1rem} .cf-item span{font-size:.86rem;color:var(--muted);line-height:1.45} .meta-destacada{display:grid;grid-template-columns:1.15fr .85fr;gap:1.6rem;align-items:center} .meta-destacada .pill{font-size:.92rem;padding:.42rem 1rem;letter-spacing:.08em} .meta-ig{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.4rem;font-family:var(--display);font-weight:600;font-size:1.22rem;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:4px;transition:.15s;letter-spacing:-.01em} .meta-ig:hover{color:var(--impact);border-color:var(--impact)} .meta-ig svg{width:30px;height:30px;fill:currentColor;stroke:none;flex:none} .meta-foto{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3} /* en Impacto la foto se acerca al texto en vez de irse al borde derecho */ .page-template-page-impacto .meta-destacada .meta-foto{justify-self:start;width:100%;max-width:420px} /* en Reutiliza la foto es horizontal: menos recorte y encuadre más alto */ .page-template-page-reutiliza .meta-foto{aspect-ratio:16/9;border-radius:var(--radius-lg)} .page-template-page-reutiliza .meta-foto img{object-position:center 28%} /* la columna de la foto crece para recuperar la altura que perdió al achatarse, y la sección se angosta para que no quede un hueco grande entre ambas columnas */ /* el conjunto ocupa todo el ancho útil: así el margen lateral es el mismo del sitio y coincide con el espacio entre la foto y el texto */ .page-template-page-reutiliza .meta-destacada{grid-template-columns:.78fr 1fr;gap:var(--gutter);max-width:none} /* el párrafo trae un límite de lectura propio por su clase .lead; aquí lo cede para que el título y el texto ocupen el mismo ancho y terminen en la misma línea */ .page-template-page-reutiliza .meta-destacada .lead{max-width:none} .meta-foto img{width:100%;height:100%;object-fit:cover} @media(max-width:960px){ .duo-impacto,.meta-destacada{grid-template-columns:1fr;gap:1.8rem} } /* ================================================================== ÚTILES ESCOLARES ================================================================ */ .utiles-colegio{margin-bottom:2.6rem} .utiles-cabecera{display:flex;gap:1rem;align-items:center;padding-bottom:1rem; border-bottom:1px solid var(--line);margin-bottom:1.2rem} .utiles-cabecera .crest{width:54px;height:54px;border-radius:11px;background:#fff; border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:none} .utiles-cabecera .crest img{width:100%;height:100%;object-fit:contain;padding:5px} .utiles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem} .utiles-item{display:flex;align-items:center;gap:.85rem;padding:.95rem 1.1rem; background:#fff;border:1px solid var(--line);border-radius:var(--radius); text-decoration:none;color:var(--ink);transition:.18s} a.utiles-item:hover{border-color:var(--navy);box-shadow:var(--shadow);transform:translateY(-2px)} .utiles-item.sin-archivo{opacity:.6;background:transparent;border-style:dashed} .utiles-ico{width:38px;height:38px;border-radius:9px;background:var(--cream); display:grid;place-items:center;flex:none} .utiles-ico svg{width:18px;height:18px;stroke:var(--navy-3);fill:none;stroke-width:1.6} .utiles-texto{flex:1;min-width:0} .utiles-texto b{display:block;font-size:.94rem} .utiles-texto span{font-size:.8rem;color:var(--muted)} .utiles-flecha{width:17px;height:17px;stroke:var(--navy);fill:none;stroke-width:2;flex:none;transition:.18s} a.utiles-item:hover .utiles-flecha{transform:translateX(3px)} .utiles-vacio{text-align:center;padding:2.5rem 0 3rem;max-width:52ch;margin:0 auto} .utiles-cierre{background:var(--cream);border-radius:var(--radius-lg);padding:1.8rem; display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;margin-top:2rem} .utiles-cierre > div:first-child{flex:1;min-width:250px} /* ================================================================== CONTACTO ================================================================ */ .contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start} .contacto-vias{display:grid;gap:.7rem;margin-top:1.8rem} .via{display:flex;gap:.9rem;align-items:center;padding:.95rem 1.1rem;background:var(--cream); border-radius:var(--radius);text-decoration:none;color:var(--ink);transition:.18s} a.via:hover{background:var(--cream-2);transform:translateX(3px)} .via-ico{width:38px;height:38px;border-radius:9px;background:#fff;border:1px solid var(--line); display:grid;place-items:center;flex:none} .via-ico svg{width:18px;height:18px;stroke:var(--impact);fill:none;stroke-width:1.9} .via b{display:block;font-size:.94rem} .via span{font-size:.82rem;color:var(--muted)} .contacto-nota{margin-top:1.8rem;padding:1.3rem 1.4rem;border:1px solid var(--line);border-radius:var(--radius)} .contacto-nota h3{font-family:var(--sans);font-size:1rem;font-weight:700;margin-bottom:.35rem} .contacto-nota p{font-size:.89rem;color:var(--muted);line-height:1.5} @media(max-width:960px){ .utiles-grid{grid-template-columns:repeat(2,1fr)} .contacto-grid{grid-template-columns:1fr;gap:2.2rem} } @media(max-width:600px){.utiles-grid{grid-template-columns:1fr}} /* ================================================================== LOGOTIPO — archivo original de la marca ================================================================ */ .logo{padding:0} .logo img{height:66px;width:auto;display:block} .flogo img{height:56px;width:auto;display:block; /* el logotipo va en azul: sobre el pie oscuro se invierte a blanco */ filter:brightness(0) invert(1)} @media(max-width:960px){ .logo{flex:1;justify-content:center} .logo img{height:62px} } @media(max-width:600px){.logo img{height:62px}} /* ================================================================== SELLOS — garantías de la marca, bajo el buscador ================================================================ */ .sellos{display:flex;gap:2rem;margin-top:1.8rem;flex-wrap:wrap} @media(min-width:961px){.sellos{flex-wrap:nowrap}.sello{flex:1 1 0}} .sello{display:flex;align-items:center;gap:.75rem} .sello-emblema{width:49px;height:49px;border-radius:50%;flex:none;display:grid;place-items:center; border:2px solid var(--gold);background:rgba(233,163,25,.1);position:relative} .sello-emblema::after{content:"";position:absolute;inset:3px;border-radius:50%; border:1px dashed rgba(233,163,25,.45)} .sello-emblema svg{width:21px;height:21px;stroke:var(--gold);fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1} .sello-texto b{display:block;font-size:clamp(.88rem,.45vw + .54rem,1.01rem);font-weight:600;color:#fff;letter-spacing:-.01em} .sello-texto span{display:block;font-size:clamp(.77rem,.36vw + .5rem,.86rem);color:rgba(255,255,255,.65);line-height:1.35;margin-top:1px} @media(max-width:600px){ .sellos{gap:.9rem;margin-top:1.3rem;flex-direction:column} .sello-emblema{width:40px;height:40px} .sello-emblema svg{width:18px;height:18px} .sello-texto b{font-size:.85rem} .sello-texto span{font-size:.75rem} } /* ================================================================== REUTILIZA — página de reciclaje ================================================================ */ .reciclar-hero{background:var(--impact);color:#fff;padding:64px 0 72px} .reciclar-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center} .reciclar-hero h1{color:#fff;font-size:clamp(2.1rem,4vw,3.2rem);margin:.8rem 0 1rem;max-width:16ch} .reciclar-hero .lead{color:rgba(255,255,255,.85)} .reciclar-hero .btn-gold{margin-top:1.6rem} .reciclar-pasos{display:grid;gap:.9rem} .reciclar-pasos .cf-item{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)} .reciclar-pasos .cf-num{background:var(--gold);color:var(--navy)} .reciclar-pasos .cf-item b{color:#fff;font-size:1.02rem} .reciclar-pasos .cf-item span{color:rgba(255,255,255,.8);font-size:.92rem} .comprar-card{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 2.2rem;box-shadow:var(--shadow)} .comprar-card h2{font-size:1.7rem;margin:.5rem 0 .6rem} .comprar-card p{color:var(--muted);max-width:78ch} .comprar-card .acciones{display:flex;flex-direction:column;gap:.7rem;align-items:stretch;min-width:210px} .comprar-card .acciones .btn{justify-content:center} @media(max-width:960px){ .reciclar-hero{padding:48px 0 56px} .reciclar-hero .wrap,.comprar-card{grid-template-columns:1fr;gap:1.8rem} .comprar-card{padding:1.6rem} .comprar-card .acciones{min-width:0} } /* ================================================================== PÁGINAS DE TEXTO (términos, privacidad, despacho, cambios) ================================================================ */ main.wrap > section{padding:44px 0 64px} main.wrap .sec-head h1{font-size:clamp(1.9rem,3.4vw,2.6rem)} .unipix-contenido{max-width:72ch;font-size:1rem;line-height:1.7;color:var(--ink)} .unipix-contenido h2{font-size:1.35rem;margin:2.2rem 0 .7rem} .unipix-contenido h3{font-size:1.08rem;margin:1.6rem 0 .5rem} .unipix-contenido p{margin:0 0 1rem;color:var(--muted)} .unipix-contenido ul,.unipix-contenido ol{margin:0 0 1.1rem;padding-left:1.4rem;color:var(--muted)} .unipix-contenido li{margin-bottom:.35rem} .unipix-contenido strong{color:var(--ink)} .unipix-contenido a{color:var(--navy);border-bottom:1px solid var(--gold)} .unipix-contenido .aviso{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;margin:1.4rem 0;font-size:.94rem} .unipix-contenido .actualizado{font-size:.82rem;color:var(--faint);margin-top:2.5rem} /* ================================================================== FLOTANTES ================================================================ */ .flotantes{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;align-items:center;gap:10px} .flot{width:58px;height:58px;border-radius:50%;display:grid;place-items:center; box-shadow:0 10px 28px rgba(0,0,0,.22);transition:transform .15s} .flot:hover{transform:scale(1.06)} .flot.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)} .flot.ig svg{width:30px;height:30px;fill:#fff} .wa-flotante{background:#25D366} .wa-flotante svg{width:32px;height:32px;fill:#fff} .ver-productos{display:none} @media(max-width:960px){ .flotantes{right:14px;bottom:14px;gap:8px} .flot{width:50px;height:50px} .flot.ig svg{width:26px;height:26px} .ver-productos{position:fixed;left:14px;bottom:14px;transform:none;z-index:69; display:inline-flex;align-items:center;gap:.4rem;background:var(--gold);color:var(--navy);font-weight:600;font-size:.92rem;border:2px solid #fff; padding:.8rem 1.2rem;border-radius:999px;box-shadow:0 10px 28px rgba(18,41,77,.3);transition:opacity .2s,transform .2s;white-space:nowrap;min-height:52px} .ver-productos svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .ver-productos.oculto{opacity:0;pointer-events:none;transform:translateY(12px)} } /* ================================================================== FICHA: talla y estado como botones (los