/* ==================================================================
Dr. Tarek Hadwa — Futurista · Minimalista · Biofílico
Scroll en profundidad (eje Z) con Three.js + CSS 3D
================================================================== */
:root, [data-theme="light"]{
/* Paleta clara — fondo blanco con acentos teal/cyan */
--teal-50:#e8fbf3;
--teal-200:#a5e2cb;
--teal-300:#5fc4a3;
--teal-400:#2ea886;
--teal-500:#188a6a;
--teal-600:#0f6f54;
--cyan-400:#3bb5b0;
--cyan-500:#1a978f;
--blue-500:#2a7fb0;
--leaf-700:#13524a;
/* Superficies claras (papel/blanco) y tinta oscura */
--ink-1000:#ffffff; /* fondo principal */
--ink-950:#fafcfb; /* paneles principales */
--ink-900:#f3f6f4; /* paneles secundarios */
--ink-800:#e8efeb; /* divisores suaves */
--ink-700:#d4ded8; /* bordes */
--ink-300:#6b7d75; /* texto secundario */
--paper:#f7faf8;
--white:#ffffff;
/* Tinta para texto */
--text-1:#0e1f1a; /* principal */
--text-2:#2a3a34; /* secundario */
--text-3:#5a6b64; /* terciario */
--text-4:#8a9690; /* muy tenue */
--grad: linear-gradient(135deg, var(--teal-400) 0%, var(--cyan-500) 60%, #1377a8 100%);
--glow: 0 0 40px rgba(46,168,134,.18), 0 0 100px rgba(95,196,163,.12);
/* Tokens reactivos al tema (claros aquí) */
--panel-bg-1: rgba(250,253,251,.97);
--panel-bg-2: rgba(244,250,247,.99);
--panel-border: rgba(46,168,134,.30);
--panel-shadow: 0 30px 80px -20px rgba(20,60,50,.12);
--eyebrow: var(--teal-500);
--accent-line: linear-gradient(180deg, #0e1f1a 0%, #16574a 55%, #2ea886 100%);
--hero-bg: linear-gradient(135deg, #ffffff 0%, #f1faf5 100%);
--about-bg: linear-gradient(135deg, #fafdfb 0%, #e9f5ee 100%);
--misc-bg: linear-gradient(135deg, #fafdfb 0%, #ecf5f0 100%);
--particle-color: 0x2ea886;
--fog-color: 0xf3faf6;
--logo-rod: 0x16574a;
--logo-rod-em: 0x2ea886;
--logo-snake: 0x1a978f;
--logo-snake-em: 0x2ea886;
--logo-dna-a: 0x1a978f;
--logo-dna-b: 0x16574a;
--logo-dna-em: 0x3bb5b0;
--logo-step: 0x2ea886;
--logo-halo: 0x2ea886;
--logo-key-light: 0x2ea886;
--logo-rim-light: 0x1a978f;
--logo-ambient: 0xeaf5ee;
/* Tipografía 100% nativa (sin recursos externos): cadena de system fonts
que cubre macOS, iOS, Windows, Android y Linux con buena estética. */
--font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
--font-editorial: Georgia, 'Times New Roman', 'Iowan Old Style', 'Apple Garamond', serif;
--font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
}
/* ==== TEMA OSCURO ==== */
[data-theme="dark"]{
--teal-50:#e6fcf3;
--teal-200:#b5f0d8;
--teal-300:#8be8c9;
--teal-400:#5dd9b1;
--teal-500:#34c098;
--teal-600:#2da685;
--cyan-400:#7defe0;
--cyan-500:#3ed6cf;
--blue-500:#3a96cf;
--leaf-700:#13524a;
--ink-1000:#08141a;
--ink-950:#0b1a23;
--ink-900:#10242f;
--ink-800:#163040;
--ink-700:#1f4255;
--ink-300:#7c95a8;
--paper:#f4f6f5;
--white:#ffffff;
--text-1:#e6f0ee;
--text-2:#c4d5d1;
--text-3:#9bb1ab;
--text-4:#6e8580;
--grad: linear-gradient(135deg, var(--teal-400) 0%, var(--cyan-500) 60%, #1ea3c7 100%);
--glow: 0 0 40px rgba(93,217,177,.35), 0 0 100px rgba(125,239,224,.18);
--panel-bg-1: rgba(11,26,35,.88);
--panel-bg-2: rgba(8,20,26,.92);
--panel-border: rgba(125,239,224,.18);
--panel-shadow: 0 50px 120px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(125,239,224,.08) inset;
--eyebrow: var(--teal-300);
--accent-line: linear-gradient(180deg,#ffffff 0%, #e7fbf6 55%, #a9f5e6 100%);
--hero-bg: linear-gradient(135deg, #07151c 0%, #0a1c25 100%);
--about-bg: linear-gradient(135deg, #061419 0%, #0a1f29 100%);
--misc-bg: linear-gradient(135deg, #061419 0%, #082025 100%);
--particle-color: 0x7defe0;
--fog-color: 0x05090d;
--logo-rod: 0x111d24;
--logo-rod-em: 0x7defe0;
--logo-snake: 0x0c1a18;
--logo-snake-em: 0x34c098;
--logo-dna-a: 0x081218;
--logo-dna-b: 0x081218;
--logo-dna-em: 0x7defe0;
--logo-step: 0x0a1820;
--logo-halo: 0x7defe0;
--logo-key-light: 0x7defe0;
--logo-rim-light: 0x5dd9b1;
--logo-ambient: 0x0a1a22;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
background:var(--ink-1000);
color:var(--text-1);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
::selection{background:var(--teal-300);color:#062014}
/* Scrollbar global visible */
html{scrollbar-width:thin;scrollbar-color:rgba(46,168,134,.55) rgba(20,30,28,0.04)}
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:rgba(20,30,28,0.04)}
html::-webkit-scrollbar-thumb{
background:linear-gradient(180deg, rgba(46,168,134,.6), rgba(26,151,143,.55));
border-radius:10px;
border:2px solid rgba(14,31,26,.5);
}
html::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, rgba(46,168,134,.85), rgba(26,151,143,.8));}
/* ==================================================================
3D BACKGROUND CANVAS
================================================================== */
#bg3d{
position:fixed;inset:0;
width:100%;height:100%;
z-index:0;
pointer-events:none;
}
/* Vegetation overlays */
.veg-layer{
position:fixed;
z-index:1;
pointer-events:none;
width:520px;height:520px;
background-repeat:no-repeat;background-size:contain;
opacity:.55;
filter:saturate(.85) brightness(.85);
}
.veg-tl{
top:-80px;left:-80px;
background-image:url("data:image/svg+xml;utf8,");
animation:floatA 18s ease-in-out infinite;
}
.veg-br{
bottom:-100px;right:-100px;
background-image:url("data:image/svg+xml;utf8,");
animation:floatB 22s ease-in-out infinite;
}
@keyframes floatA{
0%,100%{transform:translate(0,0) rotate(0deg)}
50%{transform:translate(10px,18px) rotate(3deg)}
}
@keyframes floatB{
0%,100%{transform:translate(0,0) rotate(0deg)}
50%{transform:translate(-12px,-20px) rotate(-3deg)}
}
/* ==================================================================
LOADER
================================================================== */
.loader{
position:fixed;inset:0;z-index:200;
background:radial-gradient(80% 80% at 50% 50%, #f1f8f3 0%, #e9f1ec 100%);
display:flex;align-items:center;justify-content:center;
transition:opacity .9s ease, visibility .9s ease;
}
.loader.done{opacity:0;visibility:hidden}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
#loaderCanvas{
width:140px;height:140px;
filter:drop-shadow(0 0 25px rgba(46,168,134,0.22));
}
.loader-text{
font-family:var(--font-display);font-weight:400;
font-size:18px;letter-spacing:.04em;color:var(--text-1);
}
.loader-bar{
width:160px;height:1px;background:rgba(14,31,26,.1);overflow:hidden;
}
.loader-bar span{
display:block;height:100%;width:0;background:var(--grad);
animation:load 1.6s ease-out forwards;
}
@keyframes load{to{width:100%}}
/* ==================================================================
NAV
================================================================== */
.nav{
position:fixed;top:0;left:0;right:0;
z-index:60;
display:flex;align-items:center;justify-content:space-between;
padding:18px 44px;
background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,0));
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.nav-logo{
display:flex;align-items:center;gap:12px;
}
#navLogoCanvas{
width:48px;height:48px;
filter:drop-shadow(0 0 12px rgba(46,168,134,0.33));
}
.nav-logo span{
font-family:var(--font-display);font-size:15px;font-weight:500;
letter-spacing:.01em;color:var(--text-1);
}
.nav-links{
display:flex;gap:30px;list-style:none;
font-size:12.5px;font-weight:400;letter-spacing:.04em;
color:rgba(14,31,26,0.72);
}
.nav-links a{
position:relative;display:inline-flex;align-items:center;gap:8px;
padding:6px 0;transition:color .3s ease;
}
.nav-links a::before{
content:attr(data-i);
font-family:var(--font-display);font-size:10px;font-style:italic;opacity:.5;
color:var(--teal-300);
}
.nav-links a:hover{color:var(--text-1)}
.nav-links a::after{
content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
background:var(--teal-300);transition:width .4s ease;
}
.nav-links a:hover::after{width:100%}
.nav-cta-wrap{position:relative}
.nav-cta{
display:inline-flex;align-items:center;gap:10px;
padding:11px 20px;border-radius:999px;
background:rgba(14,31,26,.06);
border:1px solid rgba(46,168,134,0.165);
color:var(--text-1);font-size:13px;font-weight:500;letter-spacing:.04em;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
transition:transform .3s ease, background .3s, border-color .3s, box-shadow .3s;
}
.nav-cta .dot{
width:6px;height:6px;border-radius:50%;background:var(--teal-300);
box-shadow:0 0 10px var(--teal-300);
animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
0%,100%{transform:scale(1);opacity:.9}
50%{transform:scale(1.4);opacity:.5}
}
.nav-cta:hover{
background:rgba(46,168,134,0.066);
border-color:rgba(46,168,134,0.33);
box-shadow:0 0 30px rgba(46,168,134,0.11);
transform:translateY(-1px);
}
.cta-menu{
position:absolute;top:calc(100% + 14px);right:0;
min-width:340px;
padding:10px;
background:#ffffff;
border:1px solid rgba(14,31,26,0.08);
border-radius:18px;
box-shadow:0 30px 80px -20px rgba(20,30,28,0.22), 0 0 0 1px rgba(46,168,134,0.05);
opacity:0;visibility:hidden;transform:translateY(-10px);
transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.cta-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.cta-menu-head{
padding:14px 16px 10px;
font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--teal-600);font-weight:600;
}
.cta-link{
position:relative;
display:block;padding:14px 16px;
border-radius:12px;
transition:background .3s ease;
}
.cta-link:hover{background:rgba(46,168,134,0.039)}
.cta-link-name{
font-family:var(--font-display);font-weight:500;
font-size:16px;color:var(--text-1);margin-bottom:4px;
}
.cta-link-url{
font-size:12px;color:rgba(14,31,26,0.72);letter-spacing:.02em;
}
.cta-link-arrow{
position:absolute;right:18px;top:50%;transform:translateY(-50%);
font-size:18px;color:var(--teal-300);transition:transform .3s ease;
}
.cta-link:hover .cta-link-arrow{transform:translate(3px,calc(-50% - 3px))}
.cta-menu-foot{
padding:12px 16px 8px;
margin-top:6px;
border-top:1px solid rgba(14,31,26,.06);
font-size:11.5px;color:rgba(14,31,26,0.72);
display:flex;gap:10px;
}
.cta-menu-foot a{color:var(--text-1)}
.cta-menu-foot a:hover{color:var(--teal-300)}
@media (max-width:1000px){
.nav{padding:14px 18px}
.nav-links{display:none}
.cta-menu{min-width:280px;right:0}
.nav-logo span{display:none}
}
/* ==================================================================
PROGRESS / INDICATORS
================================================================== */
.progress{
position:fixed;left:0;right:0;bottom:0;height:2px;z-index:55;
background:rgba(14,31,26,.05);
}
.progress-bar{
height:100%;width:0;
background:var(--grad);
box-shadow:0 0 10px var(--teal-300);
transition:width .2s ease-out;
}
.section-indicator{
position:fixed;right:40px;bottom:30px;z-index:55;
font-family:var(--font-display);font-style:italic;font-size:13px;
display:flex;gap:6px;align-items:baseline;
color:var(--text-1);
}
.section-indicator span:first-child{font-size:32px;font-weight:500}
.sep{opacity:.4}
.depth-hint{
position:fixed;right:32px;bottom:32px;
z-index:55;
display:flex;flex-direction:row;align-items:center;gap:10px;
font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:rgba(14,31,26,0.78);
transition:opacity .5s ease;
cursor:pointer;
padding:10px 16px;
border-radius:999px;
background:linear-gradient(180deg, rgba(46,168,134,0.033), rgba(46,168,134,0.011));
border:1px solid rgba(46,168,134,0.165);
box-shadow:0 0 24px rgba(46,168,134,0.099), inset 0 0 0 1px rgba(14,31,26,.02);
animation:hintPulse 2.6s ease-in-out infinite;
user-select:none;
backdrop-filter:blur(6px);
}
.depth-hint:hover{
color:var(--text-1);
border-color:rgba(46,168,134,0.303);
box-shadow:0 0 36px rgba(46,168,134,0.193);
}
.depth-hint svg{
width:10px;height:18px;
animation:nudgeDown 1.8s ease-in-out infinite;
color:var(--teal-300);
}
.depth-hint.hide{opacity:0;pointer-events:none;animation:none}
@keyframes nudgeDown{
0%,100%{transform:translateY(0)}
50%{transform:translateY(8px)}
}
@keyframes hintPulse{
0%,100%{box-shadow:0 0 24px rgba(46,168,134,0.088), inset 0 0 0 1px rgba(14,31,26,.02);}
50%{box-shadow:0 0 44px rgba(46,168,134,0.193), inset 0 0 0 1px rgba(46,168,134,0.083);}
}
/* ==================================================================
DEPTH STAGE — Z scroll
================================================================== */
#stage{
position:relative;
width:100vw;
/* height set by JS = (panels) * 100vh */
}
#depth{
position:fixed;
top:0;left:0;
width:100vw;height:100vh;
z-index:2;
perspective:1200px;
perspective-origin:50% 50%;
pointer-events:none;
}
.panel{
position:absolute;
top:50%;left:50%;
width:min(1400px, 92vw);
height:min(820px, 88vh);
margin-left:calc(min(1400px, 92vw) / -2);
margin-top:calc(min(820px, 88vh) / -2);
transform-style:preserve-3d;
transform-origin:center center;
/* default transform set via JS */
will-change:transform, opacity, filter;
border-radius:28px;
overflow:hidden;
background:linear-gradient(180deg, rgba(250,253,251,.97), rgba(244,250,247,.99));
border:1px solid rgba(46,168,134,0.077);
box-shadow:
0 50px 120px -30px rgba(20,30,28,0.18),
0 0 80px -20px rgba(46,168,134,0.066),
inset 0 1px 0 rgba(14,31,26,.04);
padding:90px 70px 70px;
display:flex;flex-direction:column;
pointer-events:auto;
opacity:0;
}
/* corner deco — futurist bracket */
.panel::before,
.panel::after{
content:"";position:absolute;width:30px;height:30px;
border:1px solid rgba(46,168,134,0.248);
pointer-events:none;
}
.panel::before{
top:18px;left:18px;border-right:0;border-bottom:0;
}
.panel::after{
bottom:18px;right:18px;border-left:0;border-top:0;
}
/* Eyebrows & headings */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-size:10.5px;font-weight:500;
letter-spacing:.28em;text-transform:uppercase;
color:var(--teal-400);
margin-bottom:22px;
}
.eyebrow::before{
content:"";width:24px;height:1px;background:currentColor;
}
.eyebrow.light{color:var(--teal-300)}
.eyebrow.small{font-size:10px;letter-spacing:.22em}
h2{
font-family:var(--font-display);
font-weight:500;
font-size:clamp(38px,5vw,76px);
line-height:1.02;
letter-spacing:-.035em;
color:var(--text-1);
}
h2.light{color:var(--text-1)}
.thin{font-family:var(--font-editorial);font-weight:400;color:rgba(14,31,26,0.72);font-style:italic;letter-spacing:-.005em}
/* 3D animated name */
.name3d{
perspective:900px;
perspective-origin:50% 60%;
display:flex;flex-wrap:wrap;gap:.32em;
transform-style:preserve-3d;
}
.name3d-word{
display:inline-flex;transform-style:preserve-3d;
}
.letter3d{
display:inline-block;
transform-style:preserve-3d;
transform-origin:50% 60%;
will-change:transform, text-shadow;
animation:letterFloat 7.5s ease-in-out infinite;
animation-delay:calc(var(--i) * .14s);
background:linear-gradient(180deg, #0e1f1a 0%, #16574a 55%, #2ea886 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
text-shadow:0 0 0 rgba(46,168,134,0.0);
filter:drop-shadow(0 6px 18px rgba(46,168,134,0.099));
}
@keyframes letterFloat{
0%,100%{
transform:translateZ(0) translateY(0) rotateX(0deg) rotateY(0deg);
filter:drop-shadow(0 6px 14px rgba(46,168,134,0.083));
}
25%{
transform:translateZ(18px) translateY(-2px) rotateX(-3deg) rotateY(4deg);
filter:drop-shadow(0 10px 22px rgba(46,168,134,0.176));
}
50%{
transform:translateZ(8px) translateY(1px) rotateX(2deg) rotateY(-2deg);
filter:drop-shadow(0 8px 18px rgba(46,168,134,0.121));
}
75%{
transform:translateZ(22px) translateY(-3px) rotateX(-1deg) rotateY(5deg);
filter:drop-shadow(0 12px 26px rgba(46,168,134,0.209));
}
}
.name3d:hover .letter3d{
animation-play-state:paused;
}
.name3d:hover .letter3d{
transform:translateZ(30px) rotateY(8deg);
transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce){
.letter3d{animation:none}
}
/* Acento editorial: Instrument Serif italic con un sutil teal */
.italic{
font-family:var(--font-editorial);
font-style:italic;
font-weight:400;
letter-spacing:-.02em;
background:linear-gradient(92deg, var(--teal-500), var(--cyan-500));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* ==================================================================
HERO
================================================================== */
.hero{
background:linear-gradient(135deg, #ffffff 0%, #f1faf5 100%);
padding:60px 70px;
}
.hero-bg{
position:absolute;inset:0;
background-image: image-set(
url("hero-bg-small.jpg") 1x,
url("hero-bg-med.jpg") 2x
);
background-image: -webkit-image-set(
url("hero-bg-small.jpg") 1x,
url("hero-bg-med.jpg") 2x
);
background-image: url("hero-bg-med.jpg");
background-size:cover;background-position:center;
opacity:.45;
filter:saturate(1.1);
}
@media (min-width: 769px){
.hero-bg{ background-image: url("hero-bg-large.jpg"); }
}
@media (min-width: 1281px){
.hero-bg{ background-image: url("hero-bg-xl.jpg"); }
}
.hero-overlay{
position:absolute;inset:0;
background:
radial-gradient(60% 70% at 20% 60%, rgba(46,168,134,0.12), transparent 70%),
radial-gradient(50% 60% at 90% 30%, rgba(46,168,134,0.099), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.7) 100%);
}
.hero-content{
position:relative;z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px, 440px);
grid-template-areas:
"text logo"
"meta logo";
gap:32px 56px;
align-items:center;
width:100%;max-width:1400px;
margin:auto 0;
}
.hero-text{
grid-area:text;
display:flex;flex-direction:column;gap:22px;
min-width:0;
}
.hero-name{
font-family:var(--font-display);
font-weight:500;
font-size:clamp(28px, 3.2vw, 44px);
line-height:1.05;
letter-spacing:-.015em;
color:var(--text-1);
margin:0 0 4px;
perspective:900px;
display:flex;flex-wrap:wrap;gap:.32em;
}
.hero-name .hn-word{
display:inline-block;
background:linear-gradient(115deg, #0a3d2e 0%, #156a52 40%, #1f8e6e 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
text-shadow:0 1px 0 rgba(255,255,255,0.55), 0 0 24px rgba(21,106,82,0.20);
transform-style:preserve-3d;
animation: heroNameFloat 6s ease-in-out infinite;
will-change:transform;
}
.hero-name .hn-word.italic{ font-style:italic; font-weight:500; }
.hero-name .hn-word:nth-child(1){ animation-delay:.00s; }
.hero-name .hn-word:nth-child(2){ animation-delay:.18s; }
.hero-name .hn-word:nth-child(3){ animation-delay:.36s; }
.hero-name .hn-word:nth-child(4){ animation-delay:.54s; }
@keyframes heroNameFloat {
0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); }
25% { transform: translate3d(0, -4px, 20px) rotateX(4deg) rotateY(-3deg); }
50% { transform: translate3d(0, 0, 30px) rotateX(0deg) rotateY(2deg); }
75% { transform: translate3d(0, 3px, 12px) rotateX(-3deg) rotateY(3deg); }
}
[data-theme="dark"] .hero-name .hn-word{
background:linear-gradient(115deg, #7defe0 0%, #a9f5e6 50%, #ffffff 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
text-shadow:0 0 40px rgba(125,239,224,0.35);
}
/* Mejorar legibilidad en RTL (árabe/farsi) con tamaño más reducido y peso visible */
html[dir="rtl"] .hero-name{
font-size:clamp(24px, 2.6vw, 36px);
font-weight:600;
}
html[dir="rtl"] .hero-name .hn-word{
background:none;
-webkit-text-fill-color:#0a3d2e;
color:#0a3d2e;
text-shadow:0 1px 0 rgba(255,255,255,0.85), 0 0 18px rgba(255,255,255,0.6);
}
html[dir="rtl"][data-theme="dark"] .hero-name .hn-word{
background:linear-gradient(115deg, #a9f5e6 0%, #ffffff 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
text-shadow:0 0 30px rgba(125,239,224,0.4);
}
.hero-logo-3d{
grid-area:logo;
width:100%;
aspect-ratio:1/1;
max-width:440px;
justify-self:center;align-self:center;
filter:drop-shadow(0 0 80px rgba(46,168,134,0.4));
animation: heroLogoFloat 7s ease-in-out infinite;
}
@keyframes heroLogoFloat {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-12px) scale(1.015); }
}
#heroLogoCanvas{width:100%;height:100%}
.hero-eyebrow{
font-size:11px;letter-spacing:.3em;text-transform:uppercase;
color:var(--teal-300);font-weight:500;
}
/* Segunda línea del eyebrow: registros profesionales en blanco */
.hero-eyebrow.hero-eyebrow-reg{
color:#ffffff;
margin-top:6px;
font-weight:400;
opacity:.85;
}
[data-theme="light"] .hero-eyebrow.hero-eyebrow-reg{
color:#0e1f1a;
opacity:.75;
}
.hero-title{
font-family:var(--font-display);
font-size:clamp(40px, 5.4vw, 84px);
font-weight:400;
line-height:.98;
letter-spacing:-.025em;
color:var(--text-1);
}
.hero-title .line{display:block}
.hero-title .italic{font-weight:400}
.hero-lead{
max-width:560px;
font-size:16px;line-height:1.55;
color:rgba(14,31,26,0.72);font-weight:300;
}
.hero-meta{
grid-area:meta;
display:flex;gap:40px;flex-wrap:wrap;
margin-top:0;
padding-top:24px;
border-top:1px solid rgba(46,168,134,0.099);
max-width:760px;
align-self:start;
}
@media (max-width: 900px){
.hero-content{
grid-template-columns:1fr;
grid-template-areas:
"logo"
"text"
"meta";
gap:24px;
}
.hero-logo-3d{ max-width:260px; }
.hero-name{ font-size:clamp(26px, 6vw, 36px); }
}
.hero-meta > div{display:flex;flex-direction:column;gap:4px}
.hero-meta span{
font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:rgba(14,31,26,0.72);
}
.hero-meta strong{
font-family:var(--font-display);font-weight:400;font-size:17px;
color:var(--text-1);
}
/* ==================================================================
ABOUT
================================================================== */
.about{
background:linear-gradient(135deg, #fafdfb 0%, #e9f5ee 100%);
}
.about-grid{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:60px;align-items:center;
flex:1;width:100%;
}
.role{
margin-top:14px;font-size:12px;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;color:var(--teal-300);
}
.bio{
margin-top:22px;
font-size:15.5px;line-height:1.7;color:rgba(14,31,26,0.78);
font-weight:300;
max-width:540px;
}
.bio em{font-style:italic;color:var(--teal-300);font-weight:400}
.stats-row{
display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
margin-top:36px;
padding-top:26px;
border-top:1px solid rgba(46,168,134,0.099);
max-width:600px;
}
.stat-mini .n{
font-family:var(--font-display);font-weight:400;
font-size:38px;line-height:1;
background:var(--grad);
-webkit-background-clip:text;background-clip:text;color:transparent;
letter-spacing:-.02em;
}
.stat-mini .l{
margin-top:6px;
font-size:11px;line-height:1.4;color:rgba(14,31,26,0.72);
letter-spacing:.04em;
}
.about-portrait{
position:relative;
display:flex;flex-direction:column;align-items:center;gap:18px;
}
.portrait-frame{
position:relative;
width:100%;max-width:380px;aspect-ratio:3/4;
border-radius:20px;
overflow:hidden;
border:1px solid rgba(46,168,134,0.165);
box-shadow:
0 40px 100px -20px rgba(20,30,28,0.18),
0 0 60px -10px rgba(46,168,134,0.11);
transform:rotateY(-4deg) rotateX(2deg);
transform-style:preserve-3d;
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.portrait-frame:hover{transform:rotateY(0) rotateX(0)}
.portrait-frame img{
width:100%;height:100%;object-fit:cover;display:block;
}
.portrait-glow{
position:absolute;inset:-2px;
background:linear-gradient(135deg, rgba(46,168,134,0.22), transparent 50%, rgba(46,168,134,0.18));
z-index:-1;border-radius:22px;filter:blur(20px);opacity:.7;
}
.portrait-line{
position:absolute;left:0;right:0;top:50%;height:1px;
background:linear-gradient(90deg, transparent, var(--teal-300), transparent);
box-shadow:0 0 10px var(--teal-300);
animation:scanLine 4s ease-in-out infinite;
pointer-events:none;
}
@keyframes scanLine{
0%,100%{top:20%;opacity:0}
50%{top:80%;opacity:1}
}
.portrait-caption{
display:flex;flex-direction:column;gap:2px;align-items:center;
font-size:12px;letter-spacing:.06em;
}
.portrait-caption span:first-child{
color:var(--text-1);font-family:var(--font-display);font-size:15px;
}
.dim{color:rgba(14,31,26,0.72);font-size:11px}
/* ==================================================================
EXPERIENCE
================================================================== */
.experience{
background:linear-gradient(135deg, #fafdfb 0%, #ecf5f0 100%);
}
.exp-head{max-width:900px;margin-bottom:50px}
.timeline{
position:relative;
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(190px,1fr);
gap:22px;
align-items:start;
flex:1;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:14px;
scrollbar-width:thin;
scrollbar-color:rgba(46,168,134,0.22) transparent;
}
.timeline::-webkit-scrollbar{height:6px}
.timeline::-webkit-scrollbar-thumb{background:rgba(46,168,134,0.193);border-radius:3px}
.timeline::-webkit-scrollbar-track{background:transparent}
.t-line{
position:absolute;left:0;right:0;top:14px;
height:1px;background:linear-gradient(90deg, transparent, rgba(46,168,134,0.22), transparent);
}
.t-item{
position:relative;
padding-top:42px;
}
.t-dot{
position:absolute;top:8px;left:0;
width:11px;height:11px;border-radius:50%;
background:var(--grad);
box-shadow:0 0 0 4px rgba(46,168,134,0.066), 0 0 14px rgba(46,168,134,0.33);
}
.t-year{
font-family:var(--font-display);font-style:italic;
font-size:13px;color:var(--teal-300);
margin-bottom:10px;
}
.t-role{
font-family:var(--font-display);font-weight:500;
font-size:18px;line-height:1.2;color:var(--text-1);
margin-bottom:8px;
}
.t-place{
font-size:12.5px;color:rgba(14,31,26,0.72);line-height:1.5;
}
.t-place em{color:var(--teal-300);font-style:italic}
.t-note{
margin-top:10px;font-size:11.5px;line-height:1.55;
color:rgba(14,31,26,0.72);
padding-top:10px;border-top:1px solid rgba(14,31,26,.06);
}
/* ==================================================================
TRAINING
================================================================== */
.training{
background:linear-gradient(135deg, #fafdfb 0%, #ecf5f0 100%);
padding:74px 60px 50px;
}
.training h2{font-size:clamp(34px,4.2vw,60px)}
.bg-art{
position:absolute;inset:0;
background-image: url("section-bg-small.jpg");
background-size:cover;background-position:right center;
opacity:.16;
pointer-events:none;
}
@media (min-width: 481px){
.bg-art{ background-image: url("section-bg-med.jpg"); }
}
@media (min-width: 769px){
.bg-art{ background-image: url("section-bg-xl.jpg"); }
}
.train-head{
position:relative;z-index:2;
max-width:900px;
margin-bottom:22px;
}
.train-lead{
margin-top:14px;
font-size:14.5px;line-height:1.55;
color:rgba(14,31,26,0.72);font-weight:300;
max-width:580px;
}
.train-grid{
position:relative;z-index:2;
display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows:minmax(min-content, max-content);
gap:12px;
margin-bottom:16px;
/* Scroll vertical para ver todas las capacitaciones */
max-height:calc(100vh - 340px);
min-height:420px;
overflow-y:scroll; /* siempre visible para indicar disponibilidad */
overscroll-behavior:contain;
padding:4px 18px 18px 4px;
scrollbar-width:auto;
scrollbar-color:rgba(46,168,134,0.468) rgba(14,31,26,.06);
}
.train-grid::-webkit-scrollbar{width:12px}
.train-grid::-webkit-scrollbar-track{
background:rgba(14,31,26,.05);
border-radius:10px;
margin:6px 0;
border:1px solid rgba(46,168,134,0.066);
}
.train-grid::-webkit-scrollbar-thumb{
background:linear-gradient(180deg, rgba(46,168,134,0.522), rgba(46,168,134,0.45));
border-radius:10px;
border:2px solid rgba(20,30,28,0.18);
box-shadow:0 0 12px rgba(46,168,134,0.275);
}
.train-grid::-webkit-scrollbar-thumb:hover{
background:linear-gradient(180deg, rgba(46,168,134,0.55), rgba(46,168,134,0.57));
box-shadow:0 0 16px rgba(46,168,134,0.413);
}
/* Variante "lista" — 1 entrada por capacitación */
.train-grid.train-list{
grid-template-columns:repeat(2,1fr);
gap:8px 14px;
max-height:calc(100vh - 320px);
min-height:440px;
}
.train-grid.train-list .t-card.featured{grid-column:span 2;grid-row:auto}
.t-row{
display:grid;
grid-template-columns:60px 1fr;
gap:18px;
align-items:start;
padding:14px 18px 14px 14px;
border-radius:12px;
background:rgba(46,168,134,0.02);
border:1px solid rgba(46,168,134,0.05);
border-left:3px solid rgba(46,168,134,0.18);
transition:background .35s, border-color .35s, transform .35s, padding-left .35s;
}
.t-row:hover{
background:rgba(46,168,134,0.055);
border-color:rgba(46,168,134,0.16);
border-left-color:var(--teal-500);
transform:translateX(3px);
padding-left:18px;
}
.t-row .yr{
font-family:var(--font-mono);
font-style:normal;
font-size:11.5px;
font-weight:500;
color:var(--teal-600);
letter-spacing:.06em;
padding-top:6px;
opacity:.7;
}
/* TÍTULO DEL CURSO — con énfasis (display moderno, más grande y oscuro) */
.t-row .tr-body h4{
font-family:var(--font-display);
font-size:17px;
font-weight:600;
line-height:1.25;
letter-spacing:-.012em;
color:var(--text-1);
margin:0 0 4px 0;
}
.t-row .tr-body p{
font-family:var(--font-body);
font-size:12.5px;
letter-spacing:.005em;
color:rgba(14,31,26,0.62);
font-weight:400;
margin:0;
line-height:1.5;
}
/* Wrapper con hint visual de scroll */
.train-grid-wrap{position:relative}
.train-grid-wrap::after{
content:'\2193 desliza para ver más';
position:absolute;
bottom:-4px;right:0;
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:rgba(46,168,134,0.413);
font-weight:500;
pointer-events:none;
background:linear-gradient(180deg, transparent, rgba(5,18,22,.9));
padding:18px 8px 6px;
border-radius:0 0 12px 12px;
animation:hintFloat 2.4s ease-in-out infinite;
}
@keyframes hintFloat{
0%,100%{transform:translateY(0);opacity:.7}
50%{transform:translateY(3px);opacity:1}
}
.t-card{
padding:18px 20px;
border-radius:14px;
background:rgba(46,168,134,0.022);
border:1px solid rgba(46,168,134,0.066);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:transform .5s cubic-bezier(.2,.7,.2,1), background .4s, border-color .4s, box-shadow .4s;
}
.t-card:hover{
transform:translateY(-6px);
background:rgba(46,168,134,0.044);
border-color:rgba(46,168,134,0.193);
box-shadow:0 20px 40px -20px rgba(20,30,28,0.18), 0 0 20px rgba(46,168,134,0.083);
}
.t-card.featured{
grid-column:span 2;grid-row:span 2;
background:linear-gradient(135deg, rgba(46,168,134,0.108), rgba(46,168,134,0.055));
border-color:rgba(46,168,134,0.165);
}
.t-card-tag{
font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:var(--teal-300);font-weight:600;
margin-bottom:12px;
}
.t-card h3{
font-family:var(--font-display);font-weight:500;
font-size:18px;line-height:1.15;letter-spacing:-.01em;
color:var(--text-1);margin-bottom:8px;
}
.t-card.featured h3{font-size:26px}
/* Highlight cards — UNAB Diplomado 7.0 + Harvard */
.t-card.highlight{
position:relative;
background:linear-gradient(135deg, rgba(46,168,134,0.132), rgba(46,168,134,0.077));
border:1px solid rgba(46,168,134,0.275);
box-shadow:0 0 0 1px rgba(46,168,134,0.083) inset, 0 24px 60px -30px rgba(46,168,134,0.248), 0 0 30px rgba(46,168,134,0.108);
}
.t-card.highlight::before{
content:"";position:absolute;inset:-1px;border-radius:14px;pointer-events:none;
background:linear-gradient(135deg, rgba(46,168,134,0.385), rgba(46,168,134,0.12) 40%, rgba(46,168,134,0.303));
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
padding:1px;opacity:.85;
}
.t-card.highlight .t-card-tag{
color:#a9f5e6;
background:linear-gradient(90deg, var(--teal-300), var(--cyan-400));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
letter-spacing:.24em;
}
.t-card.highlight h3{
background:linear-gradient(90deg,#fff 0%, #a9f5e6 60%, var(--cyan-400) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.t-card.highlight:hover{
box-shadow:0 0 0 1px rgba(46,168,134,0.138) inset, 0 30px 70px -28px rgba(46,168,134,0.303), 0 0 44px rgba(46,168,134,0.168);
}
.t-card p, .t-card li{
font-size:12.5px;line-height:1.55;
color:rgba(14,31,26,0.72);font-weight:300;
}
.t-card ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:6px}
.t-card ul li{padding-left:14px;position:relative}
.t-card ul li::before{
content:"";position:absolute;left:0;top:9px;width:6px;height:1px;
background:var(--teal-300);
}
.skills-row{
position:relative;z-index:2;
display:grid;grid-template-columns:1fr 1fr;gap:28px;
margin-top:auto;
}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips span{
padding:5px 11px;border-radius:999px;
background:rgba(46,168,134,0.033);
border:1px solid rgba(46,168,134,0.099);
font-size:11.5px;color:rgba(14,31,26,0.85);
}
/* ==================================================================
VALUES
================================================================== */
.values{
background:linear-gradient(135deg, #fafdfb 0%, #e9f5ee 100%);
}
.values-content{
flex:1;display:flex;flex-direction:column;justify-content:center;gap:36px;
}
.big-quote{
font-family:var(--font-editorial);
font-weight:400;
font-size:clamp(36px,4.6vw,68px);
line-height:1.08;letter-spacing:-.025em;
max-width:1200px;
}
.reveal-word{display:inline-block;margin-right:.18em;opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-word.in{opacity:1;transform:translateY(0)}
.values-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
}
.v-item{display:flex;flex-direction:column;gap:14px}
.v-icon{
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
border-radius:14px;
background:var(--grad);color:#062014;
box-shadow:0 0 24px rgba(46,168,134,0.165);
}
.v-icon svg{width:24px;height:24px}
.v-item h4{
font-family:var(--font-display);font-weight:500;
font-size:19px;color:var(--text-1);
}
.v-item p{
font-size:13.5px;line-height:1.6;color:rgba(14,31,26,0.72);
}
/* ==================================================================
PROJECTS
================================================================== */
.projects{
background:linear-gradient(135deg, #fafdfb 0%, #e9f5ee 100%);
}
.proj-head{margin-bottom:50px;max-width:900px}
.proj-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
flex:1;align-content:center;
}
.p-card{
position:relative;
padding:28px;
border-radius:18px;
background:rgba(46,168,134,0.022);
border:1px solid rgba(46,168,134,0.066);
overflow:hidden;
transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s, background .4s;
}
.p-card::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad);
transform:scaleY(0);transform-origin:top;transition:transform .5s ease;
box-shadow:0 0 12px var(--teal-300);
}
.p-card:hover{
transform:translateY(-6px);
background:rgba(46,168,134,0.044);
border-color:rgba(46,168,134,0.165);
}
.p-card:hover::before{transform:scaleY(1)}
.p-year{
font-family:var(--font-display);font-style:italic;
font-size:13px;color:var(--teal-300);
margin-bottom:12px;
}
.p-card h3{
font-family:var(--font-display);font-weight:500;
font-size:23px;letter-spacing:-.01em;color:var(--text-1);
margin-bottom:8px;
}
.p-card p{
font-size:13.5px;line-height:1.6;color:rgba(14,31,26,0.72);
}
/* ==================================================================
CONTACT
================================================================== */
.contact{
background:
radial-gradient(70% 80% at 20% 30%, rgba(46,168,134,0.10), transparent 60%),
radial-gradient(60% 80% at 90% 80%, rgba(46,168,134,0.08), transparent 60%),
linear-gradient(135deg, #f3f6f4 0%, #eaf2ee 60%, #e2ece6 100%);
}
.contact-h2, .contact .light{ color:#0e1f1a !important; }
.contact-lead{ color:rgba(14,31,26,.78) !important; }
.contact .eyebrow{ color:#1a6a52 !important; }
.services-block{ background:linear-gradient(180deg, rgba(14,31,26,.04), rgba(14,31,26,.02)) !important; border-color:rgba(46,168,134,.22) !important; }
.services-eyebrow{ color:#1a6a52 !important; opacity:1 !important; }
.services-title{ color:#0e1f1a !important; }
.svc{ color:rgba(14,31,26,.88) !important; background:rgba(255,255,255,.55) !important; border-color:rgba(46,168,134,.18) !important; }
.price-name{ color:rgba(14,31,26,.78) !important; }
.price-sublabel{ color:rgba(14,31,26,.6) !important; }
.contact .eyebrow.light, .contact-inner .eyebrow.light{ color:#1a6a52 !important; }
/* Dark mode overrides */
[data-theme="dark"] .contact{
background:
radial-gradient(70% 80% at 20% 30%, rgba(46,168,134,0.18), transparent 60%),
radial-gradient(60% 80% at 90% 80%, rgba(46,168,134,0.14), transparent 60%),
linear-gradient(135deg, #0a1c25 0%, #122a30 60%, #1a3a40 100%);
}
[data-theme="dark"] .contact-h2, [data-theme="dark"] .contact .light{ color:#f1f7f6 !important; }
[data-theme="dark"] .contact-lead{ color:rgba(225,237,235,.85) !important; }
[data-theme="dark"] .contact .eyebrow{ color:#8be8c9 !important; }
[data-theme="dark"] .services-block{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important; border-color:rgba(125,239,224,.18) !important; }
[data-theme="dark"] .services-eyebrow{ color:#8be8c9 !important; }
[data-theme="dark"] .services-title{ color:#f1f7f6 !important; }
[data-theme="dark"] .svc{ color:rgba(225,237,235,.92) !important; background:rgba(255,255,255,.025) !important; border-color:rgba(125,239,224,.10) !important; }
[data-theme="dark"] .price-name{ color:rgba(225,237,235,.85) !important; }
[data-theme="dark"] .price-sublabel{ color:rgba(225,237,235,.62) !important; }
[data-theme="dark"] .contact .eyebrow.light, [data-theme="dark"] .contact-inner .eyebrow.light{ color:#8be8c9 !important; }
.contact-inner{
position:relative;z-index:2;
flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:18px;
overflow-y:auto;
overscroll-behavior:contain;
padding-right:14px;
scrollbar-width:thin;
scrollbar-color:rgba(46,168,134,0.303) rgba(14,31,26,.04);
}
.contact-inner::-webkit-scrollbar{width:8px}
.contact-inner::-webkit-scrollbar-track{background:rgba(14,31,26,.03);border-radius:8px}
.contact-inner::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(46,168,134,0.385),rgba(46,168,134,0.36));border-radius:8px}
.contact-h2{font-size:clamp(34px,4.4vw,64px);max-width:1100px;margin:0}
.contact-lead{
max-width:640px;
font-size:16px;line-height:1.6;color:rgba(14,31,26,0.72);font-weight:300;
}
/* Precios */
.price-grid{
display:grid;grid-template-columns:1fr 1fr;gap:14px;
margin:8px 0 4px;
}
.price-card{
position:relative;
padding:22px 24px;
border-radius:16px;
background:linear-gradient(135deg, rgba(46,168,134,0.096), rgba(46,168,134,0.033));
border:1px solid rgba(46,168,134,0.176);
box-shadow:0 0 0 1px rgba(46,168,134,0.044) inset, 0 18px 50px -28px rgba(46,168,134,0.193);
overflow:hidden;
}
.price-card::before{
content:"";position:absolute;inset:-1px;border-radius:17px;pointer-events:none;
background:linear-gradient(135deg, rgba(46,168,134,0.33), rgba(46,168,134,0.09) 50%, rgba(46,168,134,0.248));
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
padding:1px;opacity:.6;
}
.price-tag{
font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
color:var(--teal-300);font-weight:500;margin-bottom:6px;
}
.price-name{
font-size:15px;color:rgba(14,31,26,0.78);font-weight:400;letter-spacing:-.005em;
margin-bottom:10px;
}
.price-value{
font-family:var(--font-display);
font-size:42px;line-height:1;letter-spacing:-.02em;
background:linear-gradient(90deg,#0e1f1a 0%, #1a6a52 60%, #2ea886 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
font-weight:600;
}
[data-theme="dark"] .price-value{
background:linear-gradient(90deg,#ffffff 0%, #a9f5e6 65%, var(--cyan-400) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
font-weight:500;
}
.price-currency{
font-size:24px;vertical-align:top;margin-right:2px;opacity:.75;
}
.price-unit{
font-size:14px;
font-weight:500;
letter-spacing:.12em;
vertical-align:baseline;
margin-left:8px;
opacity:.65;
font-family:var(--font-sans, var(--font-body, inherit));
/* anular gradient text-fill heredado de price-value */
background:none !important;
-webkit-text-fill-color:currentColor !important;
color:var(--teal-700, #1a6a52);
-webkit-background-clip:initial !important;
background-clip:initial !important;
}
[data-theme="dark"] .price-unit{ color:var(--teal-300, #5ee3e0) !important; }
.price-value.price-value-sm .price-unit{ font-size:11px; margin-left:5px; }
/* Visita domiciliaria — dos precios lado a lado */
.price-card-split .price-split{
display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end;
margin-top:2px;
}
.price-col{display:flex;flex-direction:column;gap:6px}
.price-sublabel{
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:rgba(14,31,26,0.72);font-weight:400;
}
.price-value.price-value-sm{font-size:32px}
.price-value.price-value-sm .price-currency{font-size:19px}
/* Variante de valor textual (sin cifra), p.ej. "Copago" */
.price-value.price-value-text{
font-size:30px; font-weight:600; letter-spacing:-0.005em;
font-feature-settings: normal;
}
.price-value.price-value-text.price-value-sm{font-size:26px}
.price-divider{
width:1px;height:42px;align-self:end;margin-bottom:6px;
background:linear-gradient(180deg, transparent, rgba(46,168,134,0.275), transparent);
}
.centers-grid{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;
}
.center-card{
position:relative;
padding:24px;
border-radius:16px;
background:rgba(46,168,134,0.028);
border:1px solid rgba(46,168,134,0.099);
overflow:hidden;
transition:transform .5s cubic-bezier(.2,.7,.2,1), background .4s, border-color .4s, box-shadow .4s;
}
.center-card::before{
content:"";position:absolute;inset:0;
background:linear-gradient(135deg, rgba(46,168,134,0.066), transparent 60%);
opacity:0;transition:opacity .4s ease;
}
.center-card:hover{
transform:translateY(-4px);
border-color:rgba(46,168,134,0.275);
box-shadow:0 20px 40px -20px rgba(20,30,28,0.18), 0 0 30px rgba(46,168,134,0.099);
}
.center-card:hover::before{opacity:1}
.center-tag{
position:relative;
display:inline-block;
font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:var(--teal-300);font-weight:600;
padding:4px 10px;border-radius:999px;
border:1px solid rgba(46,168,134,0.165);
margin-bottom:14px;
}
.center-name{
position:relative;
font-family:var(--font-display);font-weight:500;
font-size:22px;line-height:1.2;letter-spacing:-.01em;
color:var(--text-1);margin-bottom:8px;
}
.center-meta{
position:relative;
font-size:13px;color:rgba(14,31,26,0.72);line-height:1.5;
margin-bottom:14px;
}
.center-url{
position:relative;
display:inline-flex;align-items:center;gap:8px;
font-size:13px;color:var(--teal-300);font-weight:500;
letter-spacing:.02em;
}
.center-url span{transition:transform .3s ease}
.center-card:hover .center-url span{transform:translate(3px,-3px)}
.center-card-multi:hover{
transform:translateY(-4px);
border-color:rgba(46,168,134,0.275);
box-shadow:0 20px 40px -20px rgba(20,30,28,0.18), 0 0 30px rgba(46,168,134,0.099);
}
.center-phones{
position:relative;
display:flex;flex-direction:column;gap:6px;
margin-bottom:12px;
}
.center-phone{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-display);
font-size:15px;font-weight:500;letter-spacing:.01em;
color:var(--text-1);
padding:6px 10px;
border-radius:8px;
background:rgba(46,168,134,0.06);
border:1px solid rgba(46,168,134,0.14);
transition:background .3s ease, border-color .3s ease, transform .3s ease;
width:fit-content;
}
.center-phone::before{
content:"\260E";
font-size:13px;opacity:.7;
}
.center-phone:hover{
background:rgba(46,168,134,0.13);
border-color:rgba(46,168,134,0.34);
transform:translateX(2px);
}
.center-phone-wa::before{
content:"";
width:14px;height:14px;
background:currentColor;
-webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask:url('data:image/svg+xml;utf8,') no-repeat center / contain;
opacity:.85;
}
.center-phone-wa::before{ /* override genérico ☎ */ }
.center-phone-wa{
/* sobrescribir el pseudo de teléfono fijo */
}
.center-phone.center-phone-wa::before{ content:""; font-size:0; }
.center-url-link{cursor:pointer}
.center-url-link:hover span{transform:translate(3px,-3px)}
[data-theme="dark"] .center-phone{
background:rgba(125,239,224,0.06) !important;
border-color:rgba(125,239,224,0.18) !important;
color:var(--text-1) !important;
}
[data-theme="dark"] .center-phone:hover{
background:rgba(125,239,224,0.13) !important;
border-color:rgba(125,239,224,0.36) !important;
}
.contact-cards{
display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.c-card{
position:relative;
padding:22px;
border-radius:14px;
background:rgba(46,168,134,0.022);
border:1px solid rgba(46,168,134,0.066);
display:flex;flex-direction:column;gap:6px;
transition:transform .5s cubic-bezier(.2,.7,.2,1), background .4s, border-color .4s;
}
.c-card:hover{
transform:translateY(-4px);
background:rgba(46,168,134,0.044);
border-color:rgba(46,168,134,0.165);
}
.c-label{
font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:rgba(14,31,26,0.72);
}
.c-value{
font-family:var(--font-display);font-weight:400;
font-size:18px;letter-spacing:-.005em;color:var(--text-1);
}
.c-arrow{
position:absolute;right:20px;top:20px;
font-size:16px;color:var(--teal-300);transition:transform .4s ease;
}
.c-card:hover .c-arrow{transform:translate(3px,-3px)}
.c-card .c-label{display:inline-flex;align-items:center;gap:8px}
.c-wa-icon{width:14px;height:14px;color:#25d366}
.c-card.c-whatsapp{border-color:rgba(37,211,102,.3)}
.c-card.c-whatsapp:hover{border-color:rgba(37,211,102,.55);box-shadow:0 0 28px rgba(37,211,102,.18)}
.footer-row{
display:flex;justify-content:space-between;align-items:center;
padding-top:24px;
border-top:1px solid rgba(180,225,209,0.45);
margin-top:8px;
font-size:12px;color:#e8f5ef;
flex-wrap:wrap;gap:12px;
letter-spacing:.01em;
}
.footer-row .reg,
.footer-row .reg span,
.footer-row .copy{color:#e8f5ef;opacity:1}
.reg{display:flex;gap:10px;flex-wrap:wrap}
/* ==================================================================
RESPONSIVE
Nota: el umbral móvil está alineado con el JS en 900px.
- <900px: scroll vertical normal (sin Z-depth)
- 900px+: experiencia Z-depth original de escritorio
================================================================== */
@media (max-width:899px){
body.no-depth #stage{height:auto !important}
body.no-depth #depth{
position:relative;perspective:none;
height:auto;
}
body.no-depth .panel{
position:relative;
top:auto;left:auto;
margin:30px auto;
width:92vw;height:auto;min-height:90vh;
transform:none !important;
opacity:1 !important;
filter:none !important;
padding:80px 28px 60px;
}
.about-grid,.timeline,.train-grid,.values-grid,.proj-grid,.centers-grid,.contact-cards,.skills-row{
grid-template-columns:1fr !important;gap:20px;
}
.t-card.featured{grid-column:span 1;grid-row:span 1}
.timeline{display:flex;flex-direction:column;gap:28px}
.t-line{display:none}
.t-item{padding-top:0;padding-left:24px}
.t-dot{top:6px;left:0}
.stats-row{grid-template-columns:repeat(2,1fr)}
.hero-title{font-size:46px}
.depth-hint{display:none}
h2{font-size:36px !important}
.big-quote{font-size:30px}
.footer-row{flex-direction:column;align-items:flex-start}
.about-portrait{order:-1}
}
@media (max-width:600px){
.stats-row{grid-template-columns:1fr 1fr;gap:12px}
.stat-mini .n{font-size:30px}
}
/* ============================================================
Áreas de atención (panel 06 Contacto)
============================================================ */
.services-block{
margin:18px 0 18px;
padding:20px 24px 22px;
border-radius:22px;
background:linear-gradient(180deg, rgba(19,42,42,.55), rgba(14,30,30,.35));
border:1px solid rgba(46,168,134,0.088);
box-shadow:0 24px 60px -40px rgba(20,30,28,0.18), inset 0 1px 0 rgba(14,31,26,.04);
position:relative;
z-index:2;
backdrop-filter:blur(6px);
}
.services-head{
display:flex;flex-direction:column;gap:4px;margin-bottom:14px;
}
.services-eyebrow{
font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:rgba(46,168,134,0.468);
}
.services-title{
margin:0;
font-family:var(--font-display, var(--font-editorial));
font-weight:500;
font-size:clamp(20px, 2.2vw, 28px);
color:rgba(241,247,246,.96);
letter-spacing:-.01em;
}
.services-grid{
list-style:none;margin:0;padding:0;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:8px 14px;
}
.svc{
display:flex;align-items:center;gap:10px;
padding:8px 12px;
border-radius:12px;
background:rgba(14,31,26,.025);
border:1px solid rgba(14,31,26,.05);
font-size:14.5px;
color:rgba(225,237,235,.92);
line-height:1.35;
transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.svc:hover{
background:rgba(46,168,134,0.033);
border-color:rgba(46,168,134,0.121);
transform:translateY(-1px);
}
.svc-dot{
width:6px;height:6px;border-radius:50%;
background:linear-gradient(135deg, #7defe0, #34c098);
box-shadow:0 0 10px rgba(46,168,134,0.275);
flex-shrink:0;
}
.svc-featured{
grid-column:span 3;
justify-content:flex-start;
gap:14px;
padding:12px 18px;
background:linear-gradient(135deg, rgba(46,168,134,0.077), rgba(46,168,134,0.048));
border:1px solid rgba(46,168,134,0.248);
box-shadow:0 0 0 1px rgba(46,168,134,0.044) inset, 0 12px 40px -22px rgba(46,168,134,0.248);
font-size:16px;
color:#f1f7f6;
font-weight:500;
letter-spacing:.01em;
}
.svc-featured .svc-star{
color:#7defe0;
font-size:18px;
text-shadow:0 0 16px rgba(46,168,134,0.385);
}
.svc-tag{
margin-left:auto;
font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
color:#0f6f54;
padding:5px 10px;
border-radius:999px;
border:1px solid rgba(46,168,134,0.35);
background:rgba(46,168,134,0.08);
font-weight:600;
}
[data-theme="dark"] .svc-tag{
color:#8be8c9 !important;
border-color:rgba(125,239,224,0.32) !important;
background:rgba(125,239,224,0.06);
}
@media (max-width:900px){
.services-grid{grid-template-columns:repeat(2,1fr)}
.svc-featured{grid-column:span 2}
}
@media (max-width:560px){
.services-block{padding:22px 18px}
.services-grid{grid-template-columns:1fr;gap:8px}
.svc-featured{grid-column:span 1;flex-wrap:wrap}
.svc-tag{margin-left:0}
}
/* ============================================================
Audio toggle (inline, junto al selector de idioma)
============================================================ */
.audio-wrap{
position:relative;
display:inline-flex;
flex-direction:column;
align-items:center;
justify-content:center;
margin-right:4px;
/* el hint queda debajo sin empujar el layout vertical */
}
.audio-toggle{
position:relative;
width:36px;height:36px;
border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.55);
border:1px solid rgba(46,168,134,0.154);
color:rgba(46,168,134,0.468);
backdrop-filter:blur(10px);
transition:all .25s ease, box-shadow .25s ease;
overflow:visible;
cursor:pointer;
}
/* Parpadeo del botón mientras el sonido NO está activado */
.audio-toggle:not(.is-on){
animation:audioBtnBlink 1.8s ease-in-out infinite;
}
@keyframes audioBtnBlink{
0%,100%{
box-shadow:0 0 0 0 rgba(46,168,134,0.0), 0 0 0 0 rgba(46,168,134,0.0) inset;
border-color:rgba(46,168,134,0.35);
color:rgba(46,168,134,0.85);
}
50%{
box-shadow:0 0 18px -2px rgba(46,168,134,0.45), 0 0 0 1px rgba(46,168,134,0.30) inset;
border-color:rgba(46,168,134,0.85);
color:#0f6f54;
}
}
/* Indicador "Activar sonido" debajo del botón */
.audio-hint{
position:absolute;
top:calc(100% + 4px);
left:50%;
transform:translateX(-50%);
font-family:'Inter',system-ui,sans-serif;
font-size:9px;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:#188a6a;
white-space:nowrap;
pointer-events:none;
text-shadow:0 1px 4px rgba(255,255,255,0.6);
animation:audioHintBlink 1.8s ease-in-out infinite;
opacity:.9;
}
@keyframes audioHintBlink{
0%,100%{opacity:.55;color:#2ea886}
50%{opacity:1;color:#0f6f54}
}
/* Cuando el sonido está activado: ocultar hint y detener parpadeo */
.audio-toggle.is-on ~ .audio-hint{
opacity:0;
animation:none;
transition:opacity .4s ease;
}
@media (max-width:600px){
.audio-hint{font-size:8px;letter-spacing:.1em;top:calc(100% + 3px)}
}
.audio-toggle:hover{
background:rgba(232,247,240,.95);
border-color:rgba(46,168,134,0.55);
color:#0f6f54;
transform:translateY(-1px);
}
.audio-icon{width:15px;height:15px;display:none}
.audio-toggle .audio-icon-off{display:block}
.audio-toggle.is-on .audio-icon-off{display:none}
.audio-toggle.is-on .audio-icon-on{display:block}
.audio-toggle.is-on{
border-color:rgba(46,168,134,0.385);
color:#bff7e3;
box-shadow:0 0 0 1px rgba(46,168,134,0.099) inset, 0 0 18px -4px rgba(46,168,134,0.275);
}
.audio-pulse{
position:absolute;inset:-3px;border-radius:50%;
border:1px solid rgba(46,168,134,0.248);
opacity:0;pointer-events:none;
}
.audio-toggle.is-on .audio-pulse{
animation:audioPulse 3.2s ease-out infinite;
}
@keyframes audioPulse{
0%{transform:scale(1);opacity:.55}
100%{transform:scale(1.5);opacity:0}
}
@media (max-width:600px){
.audio-toggle{width:32px;height:32px}
.audio-icon{width:13px;height:13px}
}
/* ============================================================
Hojas cayendo (overlay tenue sobre los paneles)
============================================================ */
#leavesCanvas{
position:fixed;
inset:0;
width:100%;
height:100%;
pointer-events:none;
z-index:8; /* sobre el escenario 3D pero bajo el nav y el contenido interactivo */
opacity:.55;
mix-blend-mode:screen;
}
@media (max-width:600px){
#leavesCanvas{opacity:.42}
}
/* ============================================================
Toggle de idioma multi (en el nav)
============================================================ */
.lang-wrap{
position:relative;
margin-right:12px;
}
.lang-toggle{
display:flex;align-items:center;gap:6px;
padding:7px 12px;
background:rgba(255,255,255,.7);
border:1px solid rgba(46,168,134,0.32);
border-radius:999px;
color:#188a6a;
font-size:11.5px;letter-spacing:.16em;font-weight:500;
text-transform:uppercase;
cursor:pointer;
transition:all .2s ease;
backdrop-filter:blur(8px);
}
.lang-toggle:hover,
.lang-toggle[aria-expanded="true"]{
background:rgba(232,247,240,.95);
border-color:rgba(46,168,134,0.55);
color:#0f6f54;
}
.lang-current{
color:#0f6f54;
min-width:18px;text-align:center;
font-weight:600;
}
.lang-chev{
width:11px;height:11px;
transition:transform .25s ease;
opacity:.7;
}
.lang-toggle[aria-expanded="true"] .lang-chev{transform:rotate(180deg)}
.lang-menu{
position:absolute;
top:calc(100% + 8px);
right:0;
min-width:178px;
margin:0;padding:6px;
list-style:none;
background:rgba(252,254,253,.98);
border:1px solid rgba(46,168,134,0.32);
border-radius:14px;
backdrop-filter:blur(14px);
box-shadow:0 18px 40px -16px rgba(20,30,28,0.18), 0 0 0 1px rgba(46,168,134,0.10) inset;
opacity:0;pointer-events:none;transform:translateY(-6px);
transition:opacity .22s ease, transform .22s ease;
z-index:120;
}
.lang-wrap.open .lang-menu{
opacity:1;pointer-events:auto;transform:translateY(0);
}
.lang-opt{
display:flex;align-items:center;gap:10px;
padding:8px 10px;
border-radius:9px;
color:#2a3a34;
font-size:12.5px;letter-spacing:.04em;
cursor:pointer;
transition:background .18s ease, color .18s ease;
}
.lang-opt:hover{
background:rgba(46,168,134,0.10);
color:#0e1f1a;
}
.lang-opt.is-active{
background:rgba(46,168,134,0.16);
color:#0f6f54;
}
.lang-code{
display:inline-flex;align-items:center;justify-content:center;
min-width:26px;height:22px;padding:0 6px;
font-size:10.5px;font-weight:600;letter-spacing:.12em;
border-radius:6px;
background:rgba(46,168,134,0.10);
border:1px solid rgba(46,168,134,0.28);
color:#0f6f54;
}
.lang-opt.is-active .lang-code{
background:rgba(46,168,134,0.22);
border-color:rgba(46,168,134,0.45);
color:#0f6f54;
}
.lang-name{
font-family:var(--font-editorial);
font-size:14.5px;font-weight:500;
letter-spacing:.005em;
text-transform:none;
white-space:nowrap;
}
.lang-opt[dir="rtl"] .lang-name{
font-family:var(--font-editorial), 'Noto Naskh Arabic', 'Amiri';
}
@media (max-width:900px){
.lang-toggle{padding:6px 10px;font-size:10.5px}
.lang-wrap{margin-right:8px}
.lang-menu{min-width:160px}
}
/* ============================================================
Alta resolución / HiDPI — render más nítido en pantallas Retina
============================================================ */
html{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
img, canvas{
image-rendering:-webkit-optimize-contrast;
image-rendering:crisp-edges;
}
img{
image-rendering:auto; /* override para fotos */
}
/* ==================================================================
THEME TOGGLE BUTTON (sol/luna)
================================================================== */
.theme-toggle{
position:relative;
width:54px;height:28px;
padding:0;
border:1px solid rgba(46,168,134,.32);
border-radius:999px;
background:rgba(255,255,255,.7);
cursor:pointer;
transition:background .35s ease, border-color .35s ease, transform .2s ease;
-webkit-tap-highlight-color:transparent;
backdrop-filter:blur(8px);
flex:0 0 auto;
}
.theme-toggle:hover{
background:rgba(232,247,240,.95);
border-color:rgba(46,168,134,.55);
}
.theme-track{
position:absolute;inset:0;
border-radius:inherit;
overflow:hidden;
display:block;
}
.theme-thumb{
position:absolute;
top:50%;left:3px;
width:22px;height:22px;
border-radius:50%;
background:linear-gradient(180deg, #ffd28a 0%, #f5a55c 100%);
box-shadow:0 0 14px rgba(255,180,80,.55), 0 1px 3px rgba(0,0,0,.18);
transform:translateY(-50%);
transition:left .45s cubic-bezier(.7,0,.3,1.2), background .45s ease, box-shadow .45s ease;
display:flex;align-items:center;justify-content:center;
color:#5b2c00;
}
.theme-icon{
width:13px;height:13px;
position:absolute;
transition:opacity .35s ease, transform .35s ease;
}
.theme-icon-sun{ opacity:1; transform:rotate(0deg); }
.theme-icon-moon{ opacity:0; transform:rotate(-90deg); }
/* Estado oscuro: pulgar a la derecha + luna visible */
[data-theme="dark"] .theme-toggle{
background:rgba(255,255,255,.04);
border-color:rgba(125,239,224,.32);
}
[data-theme="dark"] .theme-toggle:hover{
background:rgba(125,239,224,.08);
border-color:rgba(125,239,224,.5);
}
[data-theme="dark"] .theme-thumb{
left:calc(100% - 25px);
background:linear-gradient(180deg, #d8efe8 0%, #7fb6a8 100%);
box-shadow:0 0 16px rgba(125,239,224,.5), inset -2px -2px 6px rgba(0,0,0,.25);
color:#0a1a18;
}
[data-theme="dark"] .theme-icon-sun{ opacity:0; transform:rotate(90deg); }
[data-theme="dark"] .theme-icon-moon{ opacity:1; transform:rotate(0deg); }
/* Animación suave entre temas para body y elementos clave */
html,body,
.panel, .hero, .about, .experience, .training, .values, .projects, .contact,
.lang-toggle, .lang-menu, .audio-toggle, .cta-menu,
.pe-card, .pr-card, .val-card, .t-row, .train-card, .train-block, .contact-card, .price-block{
transition: background-color .55s ease, border-color .55s ease, color .45s ease, box-shadow .55s ease, background .55s ease;
}
/* Móvil */
@media (max-width:600px){
.theme-toggle{ width:46px;height:24px; }
.theme-thumb{ width:18px;height:18px; left:3px; }
[data-theme="dark"] .theme-thumb{ left:calc(100% - 21px); }
.theme-icon{ width:11px;height:11px; }
}
/* ==================================================================
DARK THEME OVERRIDES — sobrescribe paneles y elementos con colores
hardcoded del tema claro para que funcionen en oscuro.
================================================================== */
[data-theme="dark"] html,
[data-theme="dark"] body{ background:var(--ink-1000); color:var(--text-1); }
[data-theme="dark"] ::selection{ background:var(--teal-300); color:#062014; }
/* Scrollbar */
[data-theme="dark"]{ scrollbar-color: rgba(125,239,224,.55) rgba(255,255,255,.04); }
[data-theme="dark"] html::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); }
[data-theme="dark"] html::-webkit-scrollbar-thumb{
background:linear-gradient(180deg, rgba(125,239,224,.7), rgba(52,192,152,.5));
border:2px solid rgba(0,0,0,.2);
}
[data-theme="dark"] html::-webkit-scrollbar-thumb:hover{
background:linear-gradient(180deg, rgba(125,239,224,.9), rgba(52,192,152,.7));
}
/* Hero / About / panel surfaces use reactive gradient tokens */
[data-theme="dark"] .hero{ background:var(--hero-bg); }
[data-theme="dark"] .about,
[data-theme="dark"] .experience{ background:var(--about-bg); }
[data-theme="dark"] .training,
[data-theme="dark"] .values,
[data-theme="dark"] .projects,
[data-theme="dark"] .contact{ background:var(--misc-bg); }
/* Paneles principales */
[data-theme="dark"] .panel{
background:linear-gradient(180deg, var(--panel-bg-1), var(--panel-bg-2));
border-color:var(--panel-border);
box-shadow:var(--panel-shadow);
}
/* Texto que estaba en rgba(14,31,26,X) ahora claro */
[data-theme="dark"] .thin{ color:rgba(230,240,238,.72); }
[data-theme="dark"] .eyebrow{ color:var(--eyebrow); }
/* Navegación */
[data-theme="dark"] .nav-logo span{ color:var(--text-1); }
[data-theme="dark"] .nav-links a{ color:var(--text-2); }
[data-theme="dark"] .nav-links a.is-active{ color:var(--text-1); }
/* Lang toggle / menu en oscuro */
[data-theme="dark"] .lang-toggle{
background:rgba(255,255,255,.04);
border-color:rgba(125,239,224,.18);
color:#bff7e3;
}
[data-theme="dark"] .lang-toggle:hover,
[data-theme="dark"] .lang-toggle[aria-expanded="true"]{
background:rgba(125,239,224,.08);
border-color:rgba(125,239,224,.32);
color:#e7fbf6;
}
[data-theme="dark"] .lang-current{ color:#e7fbf6; }
[data-theme="dark"] .lang-menu{
background:rgba(8,18,24,.95);
border-color:rgba(125,239,224,.18);
box-shadow:0 18px 40px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(125,239,224,.06) inset;
}
[data-theme="dark"] .lang-opt{ color:rgba(225,237,235,.82); }
[data-theme="dark"] .lang-opt:hover{ background:rgba(125,239,224,.06); color:#e7fbf6; }
[data-theme="dark"] .lang-opt.is-active{ background:rgba(125,239,224,.10); color:#bff7e3; }
[data-theme="dark"] .lang-code{
background:rgba(125,239,224,.06);
border-color:rgba(125,239,224,.20);
color:#bff7e3;
}
[data-theme="dark"] .lang-opt.is-active .lang-code{
background:rgba(125,239,224,.14);
border-color:rgba(125,239,224,.32);
color:#e7fbf6;
}
/* Audio button blink en oscuro */
[data-theme="dark"] .audio-toggle{
background:rgba(255,255,255,.04);
border-color:rgba(125,239,224,.18);
color:#bff7e3;
}
[data-theme="dark"] .audio-toggle:hover{
background:rgba(125,239,224,.10);
border-color:rgba(125,239,224,.40);
color:#e7fbf6;
}
[data-theme="dark"] .audio-hint{ color:#bff7e3; text-shadow:0 1px 6px rgba(0,0,0,.55); }
[data-theme="dark"] @keyframes audioHintBlink {} /* keyframes can't be overridden by attribute; handled via .audio-hint color anim below */
/* Cards / panels secundarios */
[data-theme="dark"] .pe-card,
[data-theme="dark"] .pr-card,
[data-theme="dark"] .val-card,
[data-theme="dark"] .t-row,
[data-theme="dark"] .train-card,
[data-theme="dark"] .train-block,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .price-block{
background:rgba(11,26,35,.55);
border-color:rgba(125,239,224,.14);
color:var(--text-2);
}
[data-theme="dark"] .pe-card *,
[data-theme="dark"] .pr-card *,
[data-theme="dark"] .val-card *,
[data-theme="dark"] .train-card *,
[data-theme="dark"] .train-block *,
[data-theme="dark"] .contact-card *,
[data-theme="dark"] .price-block *{ color:inherit; }
/* CTA menu */
[data-theme="dark"] .cta-menu{
background:rgba(8,18,24,.92);
border-color:rgba(125,239,224,.18);
box-shadow:0 30px 80px -20px rgba(0,0,0,.65), 0 0 40px rgba(125,239,224,.08);
}
[data-theme="dark"] .cta-menu-head{ color:rgba(225,237,235,.65); }
[data-theme="dark"] .cta-link{ color:var(--text-1); }
[data-theme="dark"] .cta-link:hover{ background:rgba(125,239,224,.06); }
[data-theme="dark"] .cta-link-url{ color:rgba(225,237,235,.62); }
[data-theme="dark"] .cta-link-arrow{ color:#bff7e3; }
[data-theme="dark"] .cta-menu-foot{ color:rgba(225,237,235,.62); border-top-color:rgba(125,239,224,.10); }
/* Z-panels */
[data-theme="dark"] .scene .panel-glow{
background:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
}
/* Hint deslizar */
[data-theme="dark"] .scroll-hint{ color:rgba(225,237,235,.65); }
/* Loader */
[data-theme="dark"] .loader{ background:#08141a; }
[data-theme="dark"] .loader-text{ color:var(--text-1); }
[data-theme="dark"] .loader-bar{ background:rgba(255,255,255,.06); }
/* ============================================================
DARK MODE COMPREHENSIVE TEXT FIXES
Sobreescribe todos los rgba(14,31,26,X) hardcoded con álpha
============================================================ */
/* Hero: la imagen de fondo y el overlay claro estaban dominando el dark */
[data-theme="dark"] .hero-bg{ opacity:.16; filter:saturate(.85) brightness(.55); }
[data-theme="dark"] .hero-overlay{
background:
radial-gradient(60% 70% at 20% 60%, rgba(125,239,224,0.08), transparent 70%),
radial-gradient(50% 60% at 90% 30%, rgba(125,239,224,0.06), transparent 70%),
linear-gradient(180deg, rgba(8,20,26,.55) 0%, rgba(8,20,26,.85) 100%);
}
/* Texto secundario y lírico: hero-lead, descripciones, dim, tag, eyebrow-small */
[data-theme="dark"] .hero-lead,
[data-theme="dark"] .pe-text,
[data-theme="dark"] .pe-dates,
[data-theme="dark"] .pr-text,
[data-theme="dark"] .val-text,
[data-theme="dark"] .train-text,
[data-theme="dark"] .train-meta,
[data-theme="dark"] .train-block p,
[data-theme="dark"] .contact-text,
[data-theme="dark"] .price-text,
[data-theme="dark"] .dim,
[data-theme="dark"] .tag,
[data-theme="dark"] .t-meta,
[data-theme="dark"] .t-dates,
[data-theme="dark"] .stats-row .stat .label,
[data-theme="dark"] .nav .meta,
[data-theme="dark"] .nav-foot,
[data-theme="dark"] footer,
[data-theme="dark"] .lead,
[data-theme="dark"] .small,
[data-theme="dark"] p{ color:rgba(225,237,235,.78) !important; }
/* Headings y títulos más prominentes */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .contact-h2,
[data-theme="dark"] .pe-title,
[data-theme="dark"] .pr-title,
[data-theme="dark"] .val-title,
[data-theme="dark"] .train-title,
[data-theme="dark"] .train-block h3,
[data-theme="dark"] .contact-card h3{ color:var(--text-1); }
/* Stats y números grandes */
[data-theme="dark"] .stat .num,
[data-theme="dark"] .stat-num{ color:var(--teal-300); }
[data-theme="dark"] .stat .label,
[data-theme="dark"] .stat-label{ color:rgba(225,237,235,.55); }
/* Eyebrows con su color de acento */
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .hero-eyebrow,
[data-theme="dark"] .pe-eyebrow,
[data-theme="dark"] .pr-eyebrow,
[data-theme="dark"] .train-eyebrow,
[data-theme="dark"] .val-eyebrow{ color:var(--teal-300); }
/* Excepción: la línea de registros del eyebrow se mantiene blanca */
[data-theme="dark"] .hero-eyebrow.hero-eyebrow-reg{ color:#ffffff; }
/* Líneas separadoras y bordes finos */
[data-theme="dark"] hr,
[data-theme="dark"] .line-sep,
[data-theme="dark"] .divider{ background:rgba(125,239,224,.14); border-color:rgba(125,239,224,.14); }
/* Tablas de precios y doméstica */
[data-theme="dark"] .price-block .price{ color:var(--text-1); }
[data-theme="dark"] .price-block .price-label{ color:rgba(225,237,235,.62); }
/* Inputs / fields si los hubiera */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select{ color:var(--text-1); background:rgba(11,26,35,.6); border-color:rgba(125,239,224,.18); }
/* Bordes / fondos sutiles que seguían en claro */
[data-theme="dark"] .stats-row,
[data-theme="dark"] .stats,
[data-theme="dark"] .t-row{ border-color:rgba(125,239,224,.12); }
/* CTA "Agendar" pill principal */
[data-theme="dark"] .cta-btn{
background:linear-gradient(135deg, rgba(125,239,224,.14), rgba(46,168,134,.18));
border-color:rgba(125,239,224,.32);
color:#e7fbf6;
}
[data-theme="dark"] .cta-btn:hover{
background:linear-gradient(135deg, rgba(125,239,224,.22), rgba(46,168,134,.28));
border-color:rgba(125,239,224,.5);
}
[data-theme="dark"] .cta-dot{ background:#7defe0; box-shadow:0 0 12px rgba(125,239,224,.65); }
/* Scroll hint, deslice */
[data-theme="dark"] .scroll-hint .arrow{ color:rgba(225,237,235,.55); }
/* Fondos de secciones en "scenes" 3D */
[data-theme="dark"] .scene,
[data-theme="dark"] .scene-bg{ background:transparent; }
/* Nombre animado del hero/about — gradient claro sobre dark */
[data-theme="dark"] .letter3d{
background:linear-gradient(180deg, #ffffff 0%, #d8f3ec 55%, #7defe0 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
text-shadow:0 0 30px rgba(125,239,224,.18);
}
/* Foto / portrait wrapper */
[data-theme="dark"] .portrait,
[data-theme="dark"] .portrait-frame,
[data-theme="dark"] .about-photo{
border-color:rgba(125,239,224,.22);
box-shadow:0 30px 70px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(125,239,224,.08) inset;
}
[data-theme="dark"] .portrait-caption,
[data-theme="dark"] .photo-caption{ color:rgba(225,237,235,.62); }
/* Texto enriquecido (about-body lleva varias rgba hardcodeadas) */
[data-theme="dark"] .about-body,
[data-theme="dark"] .about-text,
[data-theme="dark"] .about p,
[data-theme="dark"] .panel p{ color:rgba(225,237,235,.78); }
/* Chips (Fichas electrónicas / Habilitaciones / etc.) en modo oscuro */
[data-theme="dark"] .chips span{
color:rgba(225,237,235,.86) !important;
background:rgba(125,239,224,.07);
border-color:rgba(125,239,224,.22);
}
[data-theme="dark"] .skill-block .eyebrow,
[data-theme="dark"] .skill-block .eyebrow.light,
[data-theme="dark"] .skill-block .eyebrow.small{
color:rgba(125,239,224,.78) !important;
}
/* Stats (números grandes) en modo oscuro — asegurar visibilidad */
[data-theme="dark"] .stat-mini .n{ color:var(--text-1) !important; }
[data-theme="dark"] .stat-mini .l{ color:rgba(225,237,235,.62) !important; }
/* ============================================================
EDUCACIÓN (training) — arreglo de textos invisibles
============================================================ */
/* H3 de tarjetas destacadas (UNAB Diplomado, Harvard): el gradiente con
webkit-text-fill-color:transparent quedaba invisible sobre fondo blanco.
En tema CLARO usamos color sólido teal oscuro; en oscuro mantenemos el
gradiente claro/cyan que sí contrasta. */
.t-card.highlight h3{
background:none !important;
-webkit-background-clip:initial !important;
background-clip:initial !important;
-webkit-text-fill-color:initial !important;
color:var(--teal-700, #0e3d34) !important;
}
.t-card.highlight .t-card-tag{
background:none !important;
-webkit-background-clip:initial !important;
background-clip:initial !important;
-webkit-text-fill-color:initial !important;
color:var(--teal-600, #1a978f) !important;
}
/* En MODO OSCURO restauramos el gradiente luminoso para las destacadas */
[data-theme="dark"] .t-card.highlight h3{
background:linear-gradient(90deg,#fff 0%, #a9f5e6 60%, var(--cyan-400) 100%) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important;
}
[data-theme="dark"] .t-card.highlight .t-card-tag{
background:linear-gradient(90deg, var(--teal-300), var(--cyan-400)) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
}
/* Lista larga de cursos (.t-row): en MODO OSCURO el h4 y los eran negros */
[data-theme="dark"] .t-row .tr-body h4{ color:var(--text-1) !important; }
[data-theme="dark"] .t-row .tr-body p { color:rgba(225,237,235,.72) !important; }
[data-theme="dark"] .t-card li,
[data-theme="dark"] .t-card p,
[data-theme="dark"] .t-card ul li{ color:rgba(225,237,235,.78) !important; }
[data-theme="dark"] .t-row{ background:rgba(11,26,35,.45); border-color:rgba(125,239,224,.10); }
[data-theme="dark"] .t-row:hover{ background:rgba(125,239,224,.06); border-color:rgba(125,239,224,.22); }
/* ============================================================
DARK MODE — FIXES ADICIONALES (texto invisible)
============================================================ */
/* Hero meta labels (EUNACOM / Convenios / Atención en) */
[data-theme="dark"] .hero-meta span{ color:rgba(225,237,235,.60) !important; }
[data-theme="dark"] .hero-meta strong{ color:var(--text-1) !important; }
/* Trayectoria — lugares y notas bajo cada cargo */
[data-theme="dark"] .t-place,
[data-theme="dark"] .t-note{ color:rgba(225,237,235,.72) !important; }
[data-theme="dark"] .t-note{ border-top-color:rgba(125,239,224,.10) !important; }
[data-theme="dark"] .t-place em{ color:var(--teal-300) !important; }
[data-theme="dark"] .t-role{ color:var(--text-1) !important; }
[data-theme="dark"] .t-year{ color:rgba(225,237,235,.55) !important; }
/* Centros médicos en panel de contacto */
[data-theme="dark"] .center-meta{ color:rgba(225,237,235,.78) !important; }
[data-theme="dark"] .center-tag{
color:var(--teal-300) !important;
border-color:rgba(125,239,224,.28) !important;
background:rgba(125,239,224,.05);
}
[data-theme="dark"] .center-name{ color:var(--text-1) !important; }
[data-theme="dark"] .center-url{ color:var(--teal-300) !important; }
[data-theme="dark"] .center-card{ border-color:rgba(125,239,224,.18) !important; background:rgba(11,26,35,.35); }
[data-theme="dark"] .center-card:hover{ border-color:rgba(125,239,224,.36) !important; }
/* Tarjetas WhatsApp / Email */
[data-theme="dark"] .c-card{ border-color:rgba(125,239,224,.18) !important; background:rgba(11,26,35,.35); }
[data-theme="dark"] .c-card:hover{ border-color:rgba(125,239,224,.36) !important; }
[data-theme="dark"] .c-label{ color:rgba(225,237,235,.65) !important; }
[data-theme="dark"] .c-value{ color:var(--text-1) !important; }
[data-theme="dark"] .c-arrow{ color:var(--teal-300) !important; }
/* Lead/descripción del panel contact */
[data-theme="dark"] .contact-lead{ color:rgba(225,237,235,.78) !important; }
/* Precios */
[data-theme="dark"] .price-card{ border-color:rgba(125,239,224,.18) !important; background:rgba(11,26,35,.35); }
[data-theme="dark"] .price-tag{ color:var(--teal-300) !important; border-color:rgba(125,239,224,.28) !important; }
[data-theme="dark"] .price-name{ color:var(--text-1) !important; }
[data-theme="dark"] .price-value{ color:var(--text-1) !important; }
[data-theme="dark"] .price-sublabel{ color:rgba(225,237,235,.65) !important; }
[data-theme="dark"] .price-currency{ color:var(--teal-300) !important; }
/* Cuadrícula de servicios — list items con bullet */
[data-theme="dark"] .services-grid li,
[data-theme="dark"] .service-list li,
[data-theme="dark"] .skill-list li{ color:rgba(225,237,235,.85) !important; }
/* Eyebrow.light forzada cuando se usa en dark */
[data-theme="dark"] .eyebrow.light{ color:var(--teal-300) !important; }
[data-theme="dark"] .light{ color:var(--text-1) !important; }
/* ==================================================================
MOBILE OPTIMIZATION — Optimización integral para móviles
Iteración profunda: tipografía legible, botones táctiles 44px+,
layout flexible, hero proporcional, navegación accesible.
================================================================== */
/* ---- Base mobile: 768px y abajo ---- */
@media (max-width: 768px){
/* Tipografía y reset base */
html{ font-size: 16px; -webkit-text-size-adjust: 100%; }
body{
overflow-x: hidden;
/* Evita el "bounce" en iOS y problemas de altura */
min-height: 100vh;
min-height: 100svh;
}
/* Safe area para notch (iPhone) */
.topbar, .footer{
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
/* Topbar móvil más compacta */
.topbar{
padding-top: 8px; padding-bottom: 8px;
flex-wrap: nowrap; gap: 6px;
align-items: center;
}
.topbar .brand{ font-size: 12px; letter-spacing: .08em; flex-shrink: 1; min-width: 0; }
.topbar .brand img, .topbar .brand .logo{ max-height: 32px; width: auto; }
.topbar nav{ display: none; } /* ocultamos nav desktop en móvil */
/* Ocultar el tooltip 'Activar sonido' en móvil (ocupa espacio y se ve apretado) */
.audio-hint{ display: none !important; }
/* Botones del topbar: táctil min 40px, compactos para caber en 390px */
.topbar .lang-toggle,
.topbar .theme-toggle,
.topbar .audio-toggle{
min-width: 40px; min-height: 40px; width: 40px; height: 40px;
padding: 8px;
font-size: 12px;
flex-shrink: 0;
}
.topbar .cta, .topbar .btn-cta, .topbar .agendar, .topbar a.cta{
min-height: 40px; padding: 8px 14px;
font-size: 13px;
flex-shrink: 0;
}
/* El selector de idioma muestra solo código, sin caret extra */
.topbar .lang-toggle{ font-size: 11px; }
/* Panel general: padding reducido */
.panel{
padding: 48px 20px;
min-height: auto;
}
/* HERO móvil */
.hero{
padding: 70px 20px 40px;
min-height: auto;
}
.hero-content{
grid-template-columns: 1fr;
grid-template-areas:
"logo"
"text"
"meta";
gap: 24px;
align-items: center;
justify-items: center;
text-align: center;
}
.hero-text{ order: 2; }
.hero-logo, .hero-3d, .hero-logo-3d{
order: 1;
width: min(240px, 60vw) !important;
height: min(240px, 60vw) !important;
max-width: 240px !important;
margin: 0 auto;
}
#heroLogoCanvas{ width: 100% !important; height: 100% !important; }
.hero-meta{ order: 3; justify-content: center; }
/* Hero name: flex centrado con palabras en línea y wrap controlado */
.hero-name{
font-size: clamp(26px, 7.2vw, 44px) !important;
line-height: 1.08;
letter-spacing: -0.02em;
gap: .22em !important;
justify-content: center;
text-align: center;
perspective: none;
max-width: 100%;
overflow-wrap: anywhere;
word-break: normal;
}
.hero-name .hn-word{
/* Desactiva animación 3D pesada en móvil para evitar artefactos del background-clip */
animation: none !important;
transform: none !important;
will-change: auto;
display: inline-block;
}
.hero-subtitle, .hero-tag{
font-size: clamp(13px, 3.8vw, 16px);
text-align: center;
letter-spacing: .14em;
}
.hero-meta{
flex-wrap: wrap;
gap: 12px;
}
/* ABOUT móvil */
.about-grid, .about-content{
grid-template-columns: 1fr !important;
gap: 28px;
}
.about-portrait{
order: -1;
max-width: 300px;
margin: 0 auto;
}
.portrait-frame img{ width: 100%; height: auto; }
h1, h2{ word-break: break-word; hyphens: auto; }
h2{ font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.15; }
h3{ font-size: clamp(20px, 5.5vw, 26px); }
p{ font-size: 16px; line-height: 1.6; }
/* SPECIALTIES / áreas — una columna en móvil */
.specialties-grid,
.areas-grid,
.services-grid,
.centers-grid,
.training-grid,
.grid-3, .grid-4{
grid-template-columns: 1fr !important;
gap: 16px;
}
/* Tarjetas: padding y bordes táctiles */
.card, .specialty-card, .center-card, .service-card, .training-card{
padding: 22px 20px;
border-radius: 16px;
}
.card h3, .specialty-card h3{ font-size: 19px; margin-bottom: 8px; }
/* CENTROS — info pegada al teléfono */
.center-card{ text-align: center; }
.center-card .center-name{ font-size: 22px; }
.center-card a{
display: inline-block;
min-height: 44px;
padding: 10px 16px;
margin: 4px 2px;
}
/* SERVICIOS / precios */
.service-card .price{ font-size: 30px; }
.service-card .price-tag{ font-size: 14px; }
/* FORMACIÓN: lista en columna */
.training-list{ grid-template-columns: 1fr; gap: 12px; }
.training-card{ display: block; }
/* CONTACTO: botones grandes y centrados */
.contact-cta, .contact-buttons{
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.contact-cta a, .contact-buttons a,
.btn-whatsapp, .btn-call, .btn-email{
min-height: 52px;
padding: 14px 20px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
}
/* Footer */
.footer{
padding: 32px 20px;
text-align: center;
flex-direction: column;
gap: 12px;
}
.footer-links{
flex-direction: column;
gap: 12px;
align-items: center;
}
.footer-links a{ min-height: 44px; display: inline-flex; align-items: center; }
/* Inputs (si los hay) — evita zoom de iOS */
input, select, textarea{
font-size: 16px !important;
}
/* Reducir motion innecesario en móviles (perf) */
.panel{ transform: none !important; }
/* Z-depth scroll: en móvil mostramos secuencialmente sin profundidad */
#depth{
perspective: none;
transform-style: flat;
}
#depth > .panel{
position: relative !important;
transform: none !important;
opacity: 1 !important;
z-index: auto !important;
}
}
/* ---- Móvil pequeño (≤480px) ---- */
@media (max-width: 480px){
.panel{ padding: 40px 16px; }
.hero{ padding: 60px 16px 32px; }
.hero-name{ font-size: clamp(22px, 6.8vw, 36px) !important; gap: .18em !important; }
h2{ font-size: clamp(24px, 7vw, 34px) !important; }
.topbar .brand{ font-size: 12px; }
.topbar .lang-toggle button,
.topbar .lang-toggle select{
font-size: 12px; padding: 8px 10px;
}
/* Logo más pequeño */
.hero-logo, .hero-3d, .hero-logo-3d{
width: 200px !important; height: 200px !important; max-width: 200px !important;
}
}
/* ---- Landscape móvil: hero más compacto ---- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px){
.hero{ padding: 60px 20px 30px; min-height: auto; }
.hero-content{
grid-template-columns: 1fr 1fr;
grid-template-areas:
"logo text"
"logo meta";
}
.hero-logo, .hero-3d, .hero-logo-3d{ width: 160px !important; height: 160px !important; max-width: 160px !important; }
.hero-name{ font-size: clamp(22px, 5vw, 32px) !important; }
}
/* ---- Touch / Hover detection ---- */
@media (hover: none){
/* En dispositivos touch, los efectos hover se aplican on tap */
a, button{ -webkit-tap-highlight-color: rgba(125,239,224,0.15); }
.card:hover, .center-card:hover{ transform: none; }
}
/* ---- Tablets (769-1024) ---- */
@media (min-width: 769px) and (max-width: 1024px){
.panel{ padding: 72px 40px; }
.hero-content{ grid-template-columns: 1fr minmax(260px, 380px); }
.grid-3{ grid-template-columns: repeat(2, 1fr) !important; }
.specialties-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* ---- Imágenes responsive por defecto ---- */
img, picture{
max-width: 100%;
height: auto;
}
/* ---- Mejora general de accesibilidad táctil ---- */
a, button, [role="button"]{
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* =====================================================================
MOBILE FIX v2 — Auditoría completa 360-430px (override final)
Solo se aplica a móviles reales (<900px). Escritorio mantiene Z-depth.
===================================================================== */
@media (max-width: 899px){
/* --- TOPBAR: opaco para no dejar contenido detrás --- */
.topbar{
background: rgba(245, 250, 248, 0.95) !important;
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
border-bottom: 1px solid rgba(46,168,134,.12);
box-shadow: 0 2px 18px rgba(14,31,26,.06);
}
[data-theme="dark"] .topbar{
background: rgba(8, 16, 20, 0.95) !important;
border-bottom: 1px solid rgba(125,239,224,.12);
}
/* Tamaño total del topbar más bajo en móvil */
.topbar{ min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
/* Compensación: agregar padding-top al primer panel para que no quede tapado */
body.no-depth #depth > .panel:first-of-type{ padding-top: 70px !important; }
/* Para que ningún panel quede con su h2/título tapado tras la topbar */
.panel{ scroll-margin-top: 70px; }
/* --- RESET de background-clip SOLO en h2 generales (no hero) --- */
h2:not(.hero-name), .big-quote, .reveal-word:not(.italic),
.about-grid h2, .about-name,
.train-title{
-webkit-text-fill-color: currentColor !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
text-shadow: none !important;
}
/* Asegurar color visible en .big-quote y sus palabras no-italic */
[data-theme="dark"] .big-quote,
[data-theme="dark"] .reveal-word:not(.italic){
color: var(--text-1, #e6f0ee) !important;
}
/* Palabras en itálica dentro de la cita: gradiente teal→cyan legible en oscuro */
.reveal-word.italic, .big-quote .italic{
background: linear-gradient(92deg, var(--teal-300, #5fc4a3), var(--cyan-400, #3bb5b0)) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
[data-theme="dark"] .reveal-word.italic,
[data-theme="dark"] .big-quote .italic{
background: linear-gradient(92deg, #8be8c9, #7defe0) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* Hero name: mantener gradiente pero asegurar legibilidad */
.hero-name, .hn-word{
color: var(--text-1, #0e1f1a) !important;
text-shadow: none !important;
opacity: 1 !important;
}
[data-theme="dark"] .hero-name, [data-theme="dark"] .hn-word{
color: var(--teal-200, #b6f3e6) !important;
}
/* Nombre en sección "Quién soy" — sin clip que lo recorte */
.about-name, .about h2, .quien-soy h2{
color: var(--teal-700, #176456) !important;
line-height: 1.1 !important;
padding: 4px 0 !important;
}
/* --- TRAIN / FORMACIÓN: 1 columna sin caja con scroll --- */
.train-grid,
.train-grid.train-list{
grid-template-columns: 1fr !important;
gap: 14px !important;
max-height: none !important;
min-height: 0 !important;
height: auto !important;
overflow: visible !important;
padding: 4px 0 !important;
}
.train-grid.train-list .t-card.featured{ grid-column: span 1 !important; }
.train-grid-wrap::after{ display: none !important; } /* quitar "desliza para ver más" */
/* Tarjetas formación: evitar overflow horizontal en títulos largos */
.t-card{ padding: 22px 18px !important; overflow: hidden; }
.t-card h3{ font-size: 22px !important; line-height: 1.2; word-wrap: break-word; }
.t-card.featured h3{ font-size: 22px !important; }
.t-card p, .t-card li{ font-size: 14.5px !important; line-height: 1.5; }
.t-card ul li{ word-wrap: break-word; }
/* Filas de cursos */
.t-row{
grid-template-columns: 1fr !important;
gap: 4px !important;
padding: 14px 16px !important;
border-left-width: 3px;
}
.t-row .yr{ font-size: 11px; opacity: .8; padding-top: 0; margin-bottom: 2px; }
.t-row .tr-body h4{ font-size: 15.5px !important; }
.t-row .tr-body p{ font-size: 12.5px !important; }
/* --- SKILLS-ROW (fichas/habilitaciones): 1 columna y chips ajustadas --- */
.skills-row{ grid-template-columns: 1fr !important; gap: 20px !important; }
.skill-block .chips{
display: flex !important; flex-wrap: wrap; gap: 8px;
}
.skill-block .chips span{
font-size: 12px; padding: 6px 12px; white-space: nowrap;
}
/* --- PRECIOS: 1 columna en móvil --- */
.panel .price-grid,
.price-grid{
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.price-card{
padding: 24px 20px !important;
text-align: left;
}
/* Valor de precio: que el número + CLP queden en una sola línea */
.price-value{
display: flex !important;
align-items: baseline;
flex-wrap: nowrap;
gap: 4px;
white-space: nowrap;
font-size: clamp(36px, 10vw, 56px) !important;
line-height: 1.05;
}
.price-value-sm{
font-size: clamp(28px, 8vw, 44px) !important;
}
.price-currency{ font-size: 0.55em; opacity: .7; }
.price-unit{
font-size: 0.32em;
letter-spacing: .08em;
margin-left: 4px;
white-space: nowrap;
opacity: .7;
}
/* Split de domicilio: en móvil, columnas apiladas */
.price-card-split .price-split{
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
}
.price-card-split .price-divider{ display: none !important; }
.price-card-split .price-col{
padding: 14px;
background: rgba(46,168,134,.04);
border: 1px solid rgba(46,168,134,.1);
border-radius: 12px;
}
.price-sublabel{ font-size: 11px !important; letter-spacing: .08em; margin-bottom: 6px; opacity: .75; }
/* --- STATS ROW (13 años / 160 h/mes / 50+ / 7.0) --- */
.stats-row{
grid-template-columns: 1fr 1fr !important;
gap: 18px 14px !important;
}
.stat-num{
font-size: clamp(32px, 9vw, 48px) !important;
line-height: 1;
}
.stat-mini .n{ font-size: clamp(28px, 8vw, 42px) !important; }
/* --- ÁREAS DE ATENCIÓN: 1 columna --- */
.areas-grid, .areas-list, .panel .areas{
grid-template-columns: 1fr !important; gap: 8px !important;
}
.area-chip, .areas-grid li, .areas-list li{
padding: 14px 16px;
font-size: 14.5px;
line-height: 1.35;
}
/* --- CENTROS / VALUES / PROJECTS: 1 columna --- */
.centers-grid, .values-grid, .proj-grid, .contact-cards{
grid-template-columns: 1fr !important; gap: 18px !important;
}
.center-card, .val-card, .pe-card, .pr-card, .contact-card{
padding: 26px 20px !important;
}
/* --- OVERFLOW HORIZONTAL: prevenir en TODO el body --- */
html, body{ overflow-x: hidden !important; max-width: 100vw; }
.panel, section, article, .panel > *{
max-width: 100%;
overflow-wrap: anywhere;
}
.panel{ overflow-x: hidden; }
img, picture, video, canvas{ max-width: 100%; height: auto; }
/* --- HERO: que la imagen retrato no haga overflow --- */
.about-portrait, .portrait-frame, .hero-photo{
max-width: 100%; height: auto;
}
/* --- BIG QUOTE / valores --- */
.big-quote{
font-size: clamp(24px, 6.5vw, 36px) !important;
line-height: 1.2;
word-wrap: break-word;
}
.reveal-word{ display: inline; }
/* --- TIMELINE (trayectoria) --- */
.timeline{ padding-left: 0 !important; }
/* --- FOOTER: legible --- */
.footer-row .reg, .footer-row p, footer{
color: rgba(14,31,26,0.55) !important;
font-size: 12px;
}
[data-theme="dark"] .footer-row p, [data-theme="dark"] footer{
color: rgba(220,240,235,0.5) !important;
}
}
/* ---- Móvil estrecho (≤480px) — endurecer aún más ---- */
@media (max-width: 480px){
.topbar{ padding-left: 10px; padding-right: 10px; gap: 4px; }
.topbar .brand{ font-size: 11px; }
.topbar .brand img{ max-height: 28px; }
.topbar .lang-toggle, .topbar .theme-toggle, .topbar .audio-toggle{
width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important;
}
.topbar .cta, .topbar a.cta{ padding: 6px 12px !important; font-size: 12px !important; min-height: 36px !important; }
.panel{ padding: 60px 16px 40px !important; }
body.no-depth #depth > .panel:first-of-type{ padding-top: 64px !important; }
h2{ font-size: clamp(24px, 7vw, 32px) !important; line-height: 1.15 !important; }
.about-name, .about h2{ font-size: clamp(24px, 7vw, 32px) !important; }
.price-card{ padding: 22px 18px !important; }
.price-card .price-num, .price-card strong, .price-card .num{
font-size: clamp(30px, 8.5vw, 44px) !important;
}
.stat-num, .stat-mini .n{ font-size: clamp(28px, 8vw, 38px) !important; }
.t-card h3{ font-size: 19px !important; }
.t-card p, .t-card li{ font-size: 13.5px !important; }
.big-quote{ font-size: clamp(22px, 6vw, 32px) !important; }
}