/* ============================================================ Incubadora — Landing · BASE (structure, shared tokens) Theme decisions live in theme-prestige.css / theme-collage.css. The active theme is a class on : .theme-prestige | .theme-collage ============================================================ */ :root{ --maxw:1180px; /* contract — themes override all of these */ --bg:#F4F1E8; --bg-alt:#ECE7D9; --bg-dark:#2E0E13; --panel:#FBFAF4; --fg:#1A0A0E; --fg-soft:#4A3B33; --fg-on-dark:#EAE8DD; --fg-on-dark-soft:rgba(234,232,221,.72); --accent:#BB9D54; --accent-2:#8C7237; --line:rgba(26,10,14,.14); --line-strong:rgba(26,10,14,.28); --line-dark:rgba(187,157,84,.28); --radius:6px; --font-display:'Cinzel',Georgia,serif; --font-body:'Montserrat',system-ui,sans-serif; --font-label:'Montserrat',system-ui,sans-serif; --font-impact:'Anton',Impact,sans-serif; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition:background .35s ease,color .35s ease; } h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:0;} p{margin:0 0 1rem;} a{color:inherit;} strong{font-weight:700;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} /* labels / eyebrows ----------------------------------------- */ .eyebrow{ font-family:var(--font-label);font-size:.72rem;font-weight:700; letter-spacing:.24em;text-transform:uppercase;color:var(--accent); display:inline-flex;align-items:center;gap:.7em; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);display:inline-block;} .secnum{font-family:var(--font-label);font-weight:700;font-size:.72rem;color:var(--accent);letter-spacing:.18em;text-transform:uppercase;} /* ---------- NAV ---------- */ nav{ position:sticky;top:0;z-index:50; background:var(--nav-bg,rgba(244,241,232,.86));backdrop-filter:blur(12px); border-bottom:1px solid var(--nav-line,var(--line)); transition:background .35s ease,border-color .35s ease; } .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:66px;} .brand{font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:.02em;display:flex;align-items:center;gap:.6rem;text-transform:uppercase;color:var(--nav-fg,var(--fg));} .brand-mark{height:26px;width:auto;display:block;} .nav-links{display:flex;gap:1.6rem;font-size:.84rem;font-weight:600;} .nav-links a{text-decoration:none;color:var(--nav-fg-soft,var(--fg-soft));transition:color .2s;letter-spacing:.01em;} .nav-links a:hover{color:var(--accent);} @media(max-width:880px){.nav-links{display:none;}} /* ---------- BUTTONS ---------- */ .btn{ font-family:var(--font-label);font-size:.86rem;font-weight:900; letter-spacing:.12em;text-transform:uppercase; padding:.95rem 1.6rem;border-radius:999px;text-decoration:none; display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;border:0; transition:transform .22s cubic-bezier(.22,.61,.36,1),background .22s,box-shadow .22s,color .22s; } .btn .arr{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:99px;background:rgba(58,10,14,.2);font-size:.85em;line-height:1;transition:transform .22s;} .btn:hover{transform:translateY(-2px);} .btn:hover .arr{transform:translateX(3px);} .btn:active{transform:translateY(0);} /* Signature lingote-gold CTA (shared by both themes) */ .btn-primary{ background:linear-gradient(180deg,#FBE48C 0%,#F3CC4E 8%,#E5B12A 18%,#C8911E 35%,#B07A1A 50%,#C8911E 65%,#E5B12A 82%,#F3CC4E 92%,#FBE48C 100%); color:#3A0A0E; text-shadow:0 1px 0 rgba(255,250,210,.45); box-shadow: inset 0 2px 0 rgba(255,248,200,.9), inset 0 -2px 0 rgba(70,40,5,.55), inset 0 0 0 1px rgba(255,225,140,.5), 0 3px 6px rgba(46,14,19,.45); } .btn-primary:hover{ background:linear-gradient(180deg,#FFEEA0 0%,#F8D560 8%,#ECBA32 18%,#D29C22 35%,#B98220 50%,#D29C22 65%,#ECBA32 82%,#F8D560 92%,#FFEEA0 100%); } .nav-cta{padding:.6rem 1.15rem;font-size:.76rem;} /* ---------- HERO ---------- */ /* hero = banner con video; las cajas flotan sobre el borde derecho */ .hero{padding:48px 0;position:relative;overflow:visible;} .hero-media{position:relative;overflow:hidden;display:flex;align-items:center;min-height:calc(100vh - 66px);padding:56px 0 92px;width:100%;} /* video de fondo del banner (loop, silenciado) */ .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;background:#1A0509;} .hero-copy{position:relative;z-index:2;width:100%;} /* hero mas ancho: aprovecha casi toda la pantalla para texto + video */ .hero .wrap{max-width:min(1560px,94vw);} /* cartel dorado (eyebrow) a todo el ancho, arriba del texto + video. position:relative + z-index para quedar SOBRE el velo oscuro del hero (::after, z-index:1); sin posicionar, el velo lo tapaba. */ .hero-eyebrow{ position:relative;z-index:2; display:block;width:max-content;max-width:100%; margin:0 auto 26px;text-align:center; } /* hero: texto (izq) + VSL (der), mitad y mitad — el corte cae en el centro del container (centrado = centro de la pantalla), asi el video no cruza la linea del medio. */ .hero-top{ position:relative;z-index:2; display:grid;grid-template-columns:1fr 1fr; gap:48px;align-items:center; } .hero-vsl{ width:100%;border-radius:14px;overflow:hidden;background:#000; border:1px solid rgba(243,204,78,.35); box-shadow:0 30px 70px -24px rgba(0,0,0,.85); /* subir un toque para centrarlo con el bloque de texto (los botones de abajo corren el centro de la columna hacia abajo). Se resetea en mobile. */ transform:translateY(-26px); } /* cajas de stats: fila horizontal debajo del título + VSL */ .hero-stats{ position:relative;z-index:2;width:100%;margin-top:60px; display:grid;grid-template-columns:repeat(3,1fr);gap:14px; } .hero-stats .stat{ padding:16px 26px;border:1px solid rgba(108,19,27,.3);border-radius:12px;text-align:center; background:linear-gradient(180deg,#F3CC4E 0%,#E5B12A 55%,#C8911E 100%); box-shadow:inset 0 1px 0 rgba(255,248,200,.7),0 16px 40px -16px rgba(0,0,0,.8); } .hero-stats .stat .n{font-family:'Anton',sans-serif;font-weight:400;color:#6C131B;font-size:2.3rem;line-height:1;letter-spacing:.01em;} .hero-stats .stat .l{color:rgba(108,19,27,.85);font-weight:600;font-size:.8rem;margin-top:6px;min-height:auto;} .hero h1{font-size:var(--h1-size,clamp(1.6rem,2.7vw,2.3rem));margin:1.5rem 0 1.4rem;color:var(--h1-color,var(--fg));text-shadow:0 2px 16px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.45);} .hero h1 em{font-style:normal;color:var(--accent);} .lead{font-size:1.16rem;color:var(--lead-color,var(--fg-soft));max-width:40ch;margin-bottom:2rem;} .hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;} /* hero pillars map card */ .map-card{background:var(--panel);border:1px solid var(--card-line,var(--line));border-radius:var(--radius);padding:28px;box-shadow:var(--card-shadow,0 20px 50px -30px rgba(27,42,32,.4));} .mc-label{font-family:var(--font-label);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;} .pillar-row{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-top:1px solid var(--card-line,var(--line));} .pillar-row:first-of-type{border-top:none;} .pillar-row .pn{font-family:var(--font-impact);font-weight:400;color:var(--accent);font-size:1.15rem;flex:0 0 auto;width:28px;line-height:1.2;} .pillar-row .pt{font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:.01em;color:var(--card-fg,var(--fg));} .pillar-row .pd{font-size:.84rem;color:var(--card-fg-soft,var(--fg-soft));line-height:1.5;margin-top:3px;} /* ---------- STAT STRIP ---------- */ .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--stats-bg,var(--bg-alt));position:relative;} .stats-inner{display:grid;grid-template-columns:repeat(3,1fr);position:relative;z-index:1;} .stat{padding:34px 24px;border-left:1px solid var(--stats-line,var(--line));} .stat:first-child{border-left:none;} .stat .n{font-family:var(--stat-font,var(--font-display));font-weight:700;font-size:2.3rem;color:var(--stat-color,var(--accent-2));line-height:1;letter-spacing:.01em;} .stat .l{font-size:.82rem;color:var(--stats-fg-soft,var(--fg-soft));margin-top:10px;} @media(max-width:760px){.stats-inner{grid-template-columns:repeat(2,1fr);}.stat:nth-child(odd){border-left:none;}} /* ---------- SECTIONS ---------- */ section.block{padding:88px 0;position:relative;} .sec-head{max-width:62ch;margin-bottom:50px;} .sec-head h2{font-size:var(--h2-size,clamp(1.8rem,3.3vw,2.6rem));margin:1rem 0 1.1rem;color:var(--h2-color,var(--fg));} .sec-head p{font-size:1.06rem;color:var(--sec-p-color,var(--fg-soft));} /* two col qué es */ .onecol{max-width:760px;} .twocol{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;} .analogy{background:var(--panel);border:1px solid var(--card-line,var(--line));border-radius:var(--radius);padding:30px;} .analogy h4{font-size:1.15rem;margin-bottom:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--card-fg,var(--fg));} .analogy ul{list-style:none;padding:0;margin:.4rem 0 0;} .analogy li{padding:11px 0;border-top:1px solid var(--card-line,var(--line));font-size:.92rem;color:var(--card-fg-soft,var(--fg-soft));display:flex;gap:.7rem;} .analogy li::before{content:"◆";color:var(--accent);font-weight:700;font-size:.7em;line-height:1.7;} /* 12 weeks */ .weeks{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--card-line,var(--line));border-radius:var(--radius);overflow:hidden;background:var(--panel);} /* section 2 — light ground, dark text, wheel image */ #semanas.block{ background:#f8f8f8 !important; --fg:#241016;--fg-soft:#5A4640; --h2-color:#241016;--sec-p-color:#5A4640; border-top:1px solid rgba(36,16,22,.08); border-bottom:1px solid rgba(36,16,22,.08); } #semanas .sec-head h2{--h2-color:#241016;color:#241016;} #semanas .sec-head p{color:#5A4640;} #semanas .sec-head .secnum{color:var(--accent);} .weeks-wheel{margin:0 auto;max-width:1040px;} .weeks-wheel img{display:block;width:100%;height:auto;} /* #semanas: texto a la izquierda, rueda mas chica a la derecha, alineados al centro */ .semanas-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:40px;align-items:center;} .semanas-grid .sec-head{margin-bottom:0;} .semanas-grid .weeks-wheel{margin:0;max-width:800px;} @media(max-width:820px){ .semanas-grid{grid-template-columns:1fr;gap:32px;} .semanas-grid .weeks-wheel{margin:0 auto;max-width:560px;} } .week{padding:24px 22px;border-right:1px solid var(--card-line,var(--line));border-bottom:1px solid var(--card-line,var(--line));position:relative;} .week .wn{font-family:var(--font-label);font-weight:700;font-size:.7rem;color:var(--accent);letter-spacing:.16em;} .week h4{font-size:1.05rem;margin:.55rem 0 .4rem;text-transform:none;letter-spacing:.01em;color:var(--card-fg,var(--fg));} .week p{font-size:.84rem;color:var(--card-fg-soft,var(--fg-soft));margin:0;line-height:1.5;} .week::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent);transition:width .6s ease;} .week.in::after{width:100%;} @media(max-width:820px){.weeks{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.weeks{grid-template-columns:1fr;}} /* mapa stages */ /* etapas en grilla 3-2: 3 arriba (iguales), 2 abajo centradas (04 mas ancha) */ .stages{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 48px;} .stage{display:block;padding:26px 0 18px;border-top:1px solid var(--stage-line,var(--line-dark));} .stage .sn{display:block;margin-bottom:.5rem;} .stage:nth-child(1){grid-column:1/5;grid-row:1;} .stage:nth-child(2){grid-column:5/9;grid-row:1;} .stage:nth-child(3){grid-column:9/13;grid-row:1;} .stage:nth-child(4){grid-column:2/8;grid-row:2;} .stage:nth-child(5){grid-column:8/12;grid-row:2;} /* la 04 tiene lista larga: la mostramos en 2 columnas para que no quede tan alta */ .stage:nth-child(4) .stage-list{grid-template-columns:1fr 1fr;gap:.5rem 40px;} @media(max-width:880px){ .stages{grid-template-columns:repeat(2,minmax(0,1fr));} .stages .stage{grid-column:auto;grid-row:auto;} .stages .stage:nth-child(4) .stage-list{grid-template-columns:1fr;} } @media(max-width:600px){.stages{grid-template-columns:1fr;}} .stage-list{list-style:none;padding:0;margin:.5rem 0 0;display:grid;gap:.5rem;} .stage-list li{position:relative;padding-left:1.4rem;font-size:1rem;line-height:1.45;color:var(--ink-p-color,var(--fg-on-dark-soft,rgba(234,232,221,.78)));} .stage-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent);} .stage .sn{font-family:var(--font-impact);font-weight:400;font-size:2.6rem;color:var(--accent);line-height:.9;} .stage h4{font-size:1.3rem;margin-bottom:.35rem;color:var(--ink-h-color,var(--fg-on-dark));text-transform:none;} .stage p{font-size:.95rem;color:var(--ink-p-color,var(--fg-on-dark-soft));margin:0;max-width:64ch;} @media(max-width:560px){.stage{grid-template-columns:60px 1fr;gap:16px;}.stage .sn{font-size:1.7rem;}} /* teachers (unused markup-safe) */ .teachers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;} @media(max-width:760px){.teachers{grid-template-columns:1fr;}} /* feature cards */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} /* extras: 5 tarjetas (3 arriba, 2 abajo). Centramos la fila de abajo */ #complementos .cards{grid-template-columns:repeat(6,1fr);} #complementos .cards>.card:nth-child(1){grid-column:1/3;} #complementos .cards>.card:nth-child(2){grid-column:3/5;} #complementos .cards>.card:nth-child(3){grid-column:5/7;} #complementos .cards>.card:nth-child(4){grid-column:2/4;} #complementos .cards>.card:nth-child(5){grid-column:4/6;} .card{background:var(--panel);border:1px solid var(--card-line,var(--line));border-radius:var(--radius);padding:28px;transition:transform .25s,box-shadow .25s;} .card:hover{transform:translateY(-4px);box-shadow:var(--card-hover-shadow,0 18px 40px -28px rgba(27,42,32,.5));} .card .ci{font-family:var(--font-label);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);} .card-ico{width:46px;height:46px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;} .card-ico svg{width:100%;height:100%;display:block;} .card-ico.mockup{width:auto;height:54px;justify-content:flex-start;} .card-ico.mockup img{height:100%;width:auto;display:block;} .card-ico.img{justify-content:flex-start;} .card-ico.img img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;object-fit:contain;} .card-ico.reserved{border:1.5px dashed var(--card-line,var(--line));border-radius:10px;opacity:.5;} .card h4{font-size:1.2rem;margin:.65rem 0 .55rem;text-transform:uppercase;letter-spacing:.02em;color:var(--card-fg,var(--fg));} .card p{font-size:.89rem;color:var(--card-fg-soft,var(--fg-soft));margin:0;} @media(max-width:820px){ .cards{grid-template-columns:1fr;} #complementos .cards{grid-template-columns:1fr;} #complementos .cards>.card{grid-column:auto;} } /* community */ .commwrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;} .channels{list-style:none;padding:0;margin:0;} .channels li{padding:20px 0;border-top:1px solid var(--card-line,var(--line));} .channels li:first-child{border-top:none;} .channels .ct{font-family:var(--font-display);font-weight:700;font-size:1.08rem;text-transform:uppercase;letter-spacing:.02em;color:var(--card-fg,var(--fg));} .channels .cm{font-family:var(--font-label);font-size:.66rem;font-weight:700;color:var(--accent);letter-spacing:.14em;margin-left:.6rem;} .channels .cd{font-size:.9rem;color:var(--card-fg-soft,var(--fg-soft));margin-top:.3rem;} .community-aside h4{font-family:var(--font-display);font-size:1.2rem;margin-bottom:.7rem;text-transform:uppercase;letter-spacing:.03em;color:var(--card-fg,var(--fg));} .community-aside p{color:var(--card-fg-soft,var(--fg-soft));font-size:.94rem;} .cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;} .city{font-family:var(--font-label);font-size:.72rem;font-weight:600;border:1px solid var(--chip-line,var(--line-strong));border-radius:999px;padding:.4rem .8rem;color:var(--card-fg-soft,var(--fg-soft));} /* modality */ .mod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;} .mod{border:1px solid var(--card-line,var(--line));border-radius:var(--radius);padding:26px;background:var(--panel);} .mod .mk{font-family:var(--font-label);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);} .mod h4{font-size:1.12rem;margin:.55rem 0 .45rem;text-transform:uppercase;letter-spacing:.02em;color:var(--card-fg,var(--fg));} .mod p{font-size:.89rem;color:var(--card-fg-soft,var(--fg-soft));margin:0;} @media(max-width:640px){.mod-grid{grid-template-columns:1fr;}} /* pricing */ .price-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:stretch;} .price-card{background:var(--panel);border:1.5px solid var(--accent);border-radius:10px;padding:36px;box-shadow:var(--price-shadow,0 24px 60px -36px rgba(46,14,19,.5));} .price-card .matric{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;} .price-card .amount{font-family:var(--font-display);font-weight:700;font-size:3rem;color:var(--price-amount,var(--bg-dark));line-height:1;} .price-card .was{font-family:var(--font-label);font-size:.95rem;color:var(--card-fg-soft,var(--fg-soft));text-decoration:line-through;} .price-card .unit{font-size:.95rem;color:var(--card-fg-soft,var(--fg-soft));} .price-card .sub{font-size:.9rem;color:var(--card-fg-soft,var(--fg-soft));margin:.5rem 0 1.3rem;} .price-card .row2{display:flex;align-items:baseline;gap:.6rem;border-top:1px solid var(--card-line,var(--line));padding-top:1.3rem;} .price-card .row2 .amount{font-size:1.9rem;} .pfeatures{list-style:none;padding:0;margin:1.5rem 0 0;} .pfeatures li{padding:9px 0;font-size:.9rem;display:flex;gap:.7rem;color:var(--card-fg-soft,var(--fg-soft));align-items:flex-start;} .pfeatures li::before{content:"✓";color:var(--accent-2);font-weight:900;} .price-side{display:flex;flex-direction:column;gap:18px;} .guarantee{background:var(--bg-dark);color:var(--fg-on-dark);border-radius:10px;padding:28px;position:relative;overflow:hidden;} .guarantee h4{color:var(--fg-on-dark);font-size:1.2rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.03em;} .guarantee p{font-size:.9rem;color:var(--fg-on-dark-soft);margin:0;} .guarantee .big{font-family:var(--font-impact);font-weight:400;font-size:2.8rem;line-height:1;display:block;margin-top:.5rem;color:var(--accent);} .notincl{border:1px solid var(--card-line,var(--line));border-radius:10px;padding:24px;background:var(--panel);} .notincl h4{font-size:1.05rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.03em;color:var(--card-fg,var(--fg));} .notincl p{font-size:.86rem;color:var(--card-fg-soft,var(--fg-soft));margin:0;} @media(max-width:820px){.price-grid{grid-template-columns:1fr;}} /* faq */ .faq{border-top:1px solid var(--card-line,var(--line));} details{border-bottom:1px solid var(--card-line,var(--line));} summary{cursor:pointer;list-style:none;padding:20px 2px;font-family:var(--font-display);font-weight:700;font-size:1.08rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;text-transform:none;color:var(--card-fg,var(--fg));} summary::-webkit-details-marker{display:none;} summary::after{content:"+";font-family:var(--font-label);color:var(--accent);font-size:1.4rem;font-weight:400;transition:transform .2s;} details[open] summary::after{content:"–";} details p{padding:0 2px 20px;color:var(--card-fg-soft,var(--fg-soft));font-size:.95rem;margin:0;max-width:74ch;} /* final cta */ .finalcta{text-align:center;padding:104px 0;position:relative;overflow:hidden;} .finalcta .wrap{position:relative;z-index:1;} .finalcta h2{font-size:var(--final-size,clamp(2rem,4vw,3.2rem));max-width:20ch;margin:1.3rem auto 1.4rem;color:var(--ink-h-color,var(--fg-on-dark));} .finalcta p{max-width:50ch;margin:0 auto 2.2rem;color:var(--ink-p-color,var(--fg-on-dark-soft));font-size:1.08rem;} footer{background:var(--footer-bg,#1A0A0E);color:var(--fg-on-dark-soft);padding:44px 0;border-top:1px solid rgba(234,232,221,.12);font-size:.84rem;} .foot-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;} .foot-inner .brand{color:var(--fg-on-dark);} /* Entrance/scroll accents are progressive enhancement only — content is ALWAYS visible by default so no environment can render a blank section. */ .reveal{} /* ---------- THEME TOGGLE ---------- */ .theme-switch{ position:fixed;left:50%;bottom:22px;transform:translateX(-50%); z-index:200;display:flex;align-items:center;gap:6px; background:rgba(26,10,14,.92);backdrop-filter:blur(8px); border:1px solid rgba(187,157,84,.4);border-radius:999px; padding:6px;box-shadow:0 14px 40px -12px rgba(0,0,0,.6); } .theme-switch .ts-label{font-family:'Montserrat',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(234,232,221,.55);padding:0 10px 0 12px;} .theme-switch button{ font-family:'Montserrat',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.04em; border:0;cursor:pointer;padding:9px 18px;border-radius:999px; background:transparent;color:rgba(234,232,221,.7);transition:.2s; } .theme-switch button:hover{color:#EAE8DD;} .theme-switch button.active{ background:linear-gradient(180deg,#F3CC4E 0%,#C8911E 55%,#9A6E1A 100%); color:#3A0A0E;box-shadow:inset 0 1px 0 rgba(255,248,200,.7),0 2px 6px rgba(0,0,0,.35); } @media(max-width:520px){.theme-switch .ts-label{display:none;}} /* ---------- COMUNIDAD HERO BAND (image behind heading, fades to section bg) ---------- */ #comunidad{position:relative;overflow:hidden;} #comunidad::before{ content:"";position:absolute;top:0;left:0;right:0;height:var(--comm-hero-h,560px); background: var(--comm-hero-fade, linear-gradient(180deg, rgba(46,14,19,.55) 0%, rgba(46,14,19,.72) 55%, var(--bg-alt) 100%)), var(--comm-hero-img, url("../assets/comunidad-hero.png")) center 56%/cover no-repeat; z-index:0;pointer-events:none; } #comunidad > .wrap{position:relative;z-index:1;} #comunidad .sec-head{padding-top:24px;} /* ---------- VIDEO PLACEHOLDERS (to be replaced in Claude Code) ---------- */ .video-row{display:grid;gap:24px;margin-top:48px;} .video-row.cols-1{grid-template-columns:minmax(0,820px);justify-content:center;} .video-row.cols-2{grid-template-columns:repeat(2,1fr);} .video-row.cols-3{grid-template-columns:repeat(3,1fr);} .video-row.two-one{grid-template-columns:repeat(2,1fr);} .video-row.two-one>.video-slot:nth-child(3){grid-column:1/-1;width:calc(50% - 12px);justify-self:center;} @media(max-width:820px){.video-row.cols-2,.video-row.cols-3,.video-row.two-one{grid-template-columns:1fr;}.video-row.two-one>.video-slot:nth-child(3){width:100%;}} .video-slot{ position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden; background:var(--vid-bg,rgba(46,14,19,.5)); border:1px dashed var(--vid-border,rgba(187,157,84,.5)); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; color:var(--vid-fg,var(--fg-on-dark));text-align:center;padding:18px; } /* portrait (reels / testimonios) */ .video-slot.portrait{aspect-ratio:9/16;} .video-slot .play{ width:62px;height:62px;border-radius:999px;flex:0 0 auto; background:linear-gradient(180deg,#F3CC4E 0%,#D9A82E 55%,#A0782A 100%); display:flex;align-items:center;justify-content:center; box-shadow:inset 0 1px 0 rgba(255,248,200,.7),0 6px 18px rgba(0,0,0,.4); } .video-slot .play::after{content:"";display:block;width:0;height:0;margin-left:5px; border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:18px solid #2A0C11;} .video-slot .vlabel{font-family:var(--font-label);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--vid-label,var(--accent));} .video-slot .vhint{font-family:var(--font-label);font-size:.8rem;color:var(--vid-hint,var(--fg-on-dark-soft));max-width:30ch;line-height:1.4;} /* ---------- FRAMED MEDIA (section images) ---------- */ /* Mapa de Negocios — vintage map ground for the whole section */ #mapa.ink-bg{ background: linear-gradient(180deg, rgba(24,7,10,.86), rgba(10,3,5,.93)), url("../assets/map-bg-final.png") center/cover no-repeat, #140406; } /* taped title card (transparent PNG, ships with its own shadow) */ .map-title{margin:0 auto 40px;max-width:1040px;text-align:center;} .map-title img{display:block;width:100%;height:auto;} .map-intro{text-align:center;margin-left:auto;margin-right:auto;} .map-intro p{margin-left:auto;margin-right:auto;} .media-banner{margin:0 0 56px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--media-shadow,0 24px 60px -34px rgba(46,14,19,.6));} .media-banner img{display:block;width:100%;height:auto;} .media-figure{margin:56px 0 0;} .media-figure .frame-img{border-radius:var(--radius);overflow:hidden;background:var(--panel);padding:var(--media-pad,18px);box-shadow:var(--media-shadow,0 24px 60px -34px rgba(46,14,19,.6));} .media-figure .frame-img img{display:block;width:100%;height:auto;border-radius:calc(var(--radius) - 2px);} .media-figure figcaption{font-family:var(--font-label);font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--ink-p-color,var(--fg-soft));margin-top:14px;text-align:center;} @media print{ .theme-switch{display:none!important;} } @media(prefers-reduced-motion:reduce){ .week::after,.btn,.card{transition:none;} html{scroll-behavior:auto;} } @media(max-width:880px){ .twocol,.commwrap{grid-template-columns:1fr;gap:40px;} .hero{padding:0;} .hero-media{min-height:62vh;} .hero-copy{max-width:100%;} /* título arriba, VSL abajo (una columna) */ .hero-top{grid-template-columns:1fr;gap:28px;} .hero-vsl{transform:none;} .hero-stats{margin-top:22px;gap:12px;} } @media(max-width:560px){ /* en pantallas chicas las cajitas se apilan para que el texto no se apriete */ .hero-stats{grid-template-columns:1fr;} }