/* ViveNatur — estilos de la portada (copiados del diseño de Blogger) */
:root{
--bg:#F7FBFC;
--tint-1:#EAF3F5;
--tint-2:#DCEBEE;
--tint-3:#CBE1E6;
--panel:#FFFFFF;
--ink:#16232C;
--ink-soft:#425563;
--primary:#2B4C5E;
--primary-deep:#123240;
--deep-sea:#0E2A36;
--soft-blue:#6E93A8;
--sky:#CFE0E8;
--sage:#7E9E8C;
--sage-soft:#DCE7E0;
--sand:#E9E1CE;
--line:#D8E2E7;
--max:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:'Source Sans 3', sans-serif;
font-weight:400;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
font-family:'Fraunces', serif;
font-weight:500;
color:var(--primary-deep);
margin:0;
letter-spacing:-0.01em;
}
.eyebrow{
font-family:'IBM Plex Mono', monospace;
font-size:0.72rem;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--soft-blue);
display:inline-block;
margin-bottom:14px;
}
a{color:inherit;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
section{padding:110px 0;}
@media(max-width:768px){ section{padding:70px 0;} .wrap{padding:0 22px;} }
/* WAVE DIVIDERS */
.wave{line-height:0; width:100%;}
.wave svg{display:block; width:100%; height:64px;}
@media(max-width:768px){ .wave svg{height:38px;} }
/* NAV */
header.site{
position:fixed; top:0; left:0; right:0; z-index:100;
backdrop-filter:blur(10px);
background:rgba(247,251,252,0.86);
border-bottom:1px solid var(--line);
}
.nav-inner{
max-width:var(--max); min-height:64px; margin:0 auto; padding:8px 32px;
display:flex; align-items:center; justify-content:space-between;
}
.brand{
display:inline-flex; align-items:center; flex:0 0 auto;
color:var(--primary-deep); text-decoration:none;
}
.brand-logo{display:block; width:150px; height:auto;}
nav.links{display:flex; gap:28px; align-items:center;}
nav.links a{
font-size:0.86rem; text-decoration:none; color:var(--ink-soft);
transition:color .2s; white-space:nowrap;
}
nav.links a:hover{color:var(--primary);}
.nav-cta{
font-size:0.82rem !important; padding:10px 20px; border:1px solid var(--primary);
border-radius:100px; color:var(--primary-deep) !important;
}
.nav-cta:hover{background:var(--primary); color:#fff !important;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--primary-deep); margin:5px 0;}
@media(max-width:1000px){
.nav-inner{min-height:64px; padding:10px 22px;}
.brand-logo{width:125px;}
nav.links{
position:fixed; top:64px; left:0; right:0; background:var(--panel);
flex-direction:column; align-items:flex-start; gap:0; padding:8px 0;
border-bottom:1px solid var(--line);
transform:translateY(-130%); transition:transform .3s ease;
max-height:80vh; overflow-y:auto;
}
nav.links.open{transform:translateY(0);}
nav.links a{width:100%; padding:16px 32px; border-top:1px solid var(--line);}
.nav-toggle{display:block;}
}
/* HERO */
.hero{
position:relative;
padding:190px 0 130px;
overflow:hidden;
color:#fff;
background-image:
linear-gradient(180deg, rgba(14,42,54,0.72) 0%, rgba(14,42,54,0.55) 45%, rgba(14,42,54,0.82) 100%),
url('../img/fondo-mar.jpg');
background-size:cover;
background-position:center 60%;
}
.hero-inner{
display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;
position:relative; z-index:2;
}
@media(max-width:900px){ .hero-inner{grid-template-columns:1fr;} }
.hero h1{ font-size:clamp(2.3rem, 4.4vw, 3.4rem); line-height:1.12; color:#fff; }
.hero h1 em{font-style:italic; color:var(--tint-3); font-weight:400;}
.hero .eyebrow{color:var(--tint-3);}
.hero p.lead{ margin-top:24px; font-size:1.12rem; color:#E4EEF1; max-width:46ch; }
.hero .cta-row{margin-top:36px; display:flex; gap:16px; flex-wrap:wrap;}
.btn{
display:inline-block; padding:14px 30px; border-radius:100px;
font-size:0.92rem; text-decoration:none; font-weight:500; transition:all .2s; border:none; cursor:pointer;
}
.btn-primary{background:#fff; color:var(--primary-deep);}
.btn-primary:hover{background:var(--tint-3);}
.btn-ghost{border:1px solid rgba(255,255,255,0.55); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,0.12);}
/* NETWORK DIAGRAM */
.diagram-wrap{position:relative;}
svg.network{width:100%; height:auto; overflow:visible;}
.node-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; fill:#fff; letter-spacing:0.04em; }
.node-sub{font-family:'Source Sans 3', sans-serif; font-size:9.5px; fill:#DCE7EA;}
.pulse-line{ stroke:#BFDCE3; stroke-width:1.4; fill:none; opacity:0.65; stroke-dasharray:6 7; animation:dash 5s linear infinite; }
.pulse-line.slow{animation-duration:8s; stroke:var(--sage-soft); opacity:0.55;}
@keyframes dash{ to{ stroke-dashoffset:-260; } }
.node-circle{fill:rgba(255,255,255,0.08); stroke:#BFDCE3; stroke-width:1.3;}
.node-circle.accent{stroke:var(--sage-soft);}
@media (prefers-reduced-motion: reduce){ .pulse-line{animation:none;} }
/* SECTION HEADERS */
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.2;}
.section-head p{color:var(--ink-soft); margin-top:16px; font-size:1.03rem;}
.center{margin-left:auto; margin-right:auto; text-align:center;}
.bg-tint-1{background:var(--tint-1);}
.bg-tint-2{background:var(--tint-2);}
.bg-tint-3{background:var(--tint-3);}
.bg-base{background:var(--bg);}
/* STATEMENT */
.statement{
font-family:'Fraunces', serif; font-weight:300; font-style:italic;
font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--primary-deep);
line-height:1.45; max-width:760px;
}
.statement strong{font-weight:600; font-style:normal; color:var(--sage);}
/* SYSTEMS GRID */
.systems-grid{
display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden;
}
@media(max-width:900px){ .systems-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .systems-grid{grid-template-columns:1fr;} }
.sys-card{ background:var(--panel); padding:34px 26px; cursor:pointer; transition:background .25s; }
.sys-card:hover, .sys-card.active{background:var(--tint-1);}
.sys-code{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--soft-blue); letter-spacing:0.1em; }
.sys-card h3{font-size:1.15rem; margin-top:10px; font-weight:500;}
.sys-card p{
font-size:0.92rem; color:var(--ink-soft); margin-top:12px;
max-height:0; overflow:hidden; transition:max-height .35s ease, margin .35s ease;
}
.sys-card.active p{max-height:220px; margin-top:12px;}
.sys-card .plus{float:right; font-family:'IBM Plex Mono',monospace; color:var(--soft-blue); transition:transform .3s;}
.sys-card.active .plus{transform:rotate(45deg);}
/* TWO COL FEATURE */
.feature{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;}
@media(max-width:880px){ .feature{grid-template-columns:1fr; gap:32px;} }
.feature h2{font-size:clamp(1.7rem,3vw,2.2rem); line-height:1.18;}
.feature.reverse .col-visual{order:2;}
@media(max-width:880px){ .feature.reverse .col-visual{order:0;} }
.mini-chip-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.mini-chip{
font-family:'IBM Plex Mono', monospace; font-size:0.74rem; padding:7px 14px;
border:1px solid var(--line); border-radius:100px; color:var(--primary); background:var(--panel);
}
.visual-card{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:36px; height:100%; }
.axis-diagram{width:100%; height:auto;}
.axis-label{font-family:'IBM Plex Mono', monospace; font-size:10px; fill:var(--ink-soft);}
/* TRIAD */
.triad{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:56px; }
@media(max-width:760px){ .triad{grid-template-columns:1fr;} }
.triad-card{ text-align:center; padding:44px 24px; border-radius:18px; background:var(--panel); border:1px solid var(--line); }
.triad-card::before{ content:''; display:block; width:44px; height:44px; margin:0 auto 20px; border-radius:50%; border:1.4px solid var(--soft-blue); }
.triad-card:nth-child(2)::before{border-color:var(--sage);}
.triad-card:nth-child(3)::before{border-color:var(--primary-deep); background:var(--sky);}
.triad-card h3{font-size:1.1rem;}
.triad-card p{font-size:0.92rem; color:var(--ink-soft); margin-top:12px;}
/* QUOTE */
.quote-block{ text-align:center; max-width:820px; margin:0 auto; }
.quote-block p{ font-family:'Fraunces', serif; font-style:italic; font-weight:300; font-size:clamp(1.3rem,2.6vw,1.7rem); color:var(--primary-deep); line-height:1.5; }
.quote-block span{ display:block; margin-top:20px; font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--soft-blue); }
/* WHO */
.who-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px;}
@media(max-width:700px){ .who-list{grid-template-columns:1fr;} }
.who-item{ display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line); font-size:0.97rem; color:var(--ink-soft); }
.who-item::before{content:'—'; color:var(--sage); flex-shrink:0;}
/* SERVICES */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px;}
@media(max-width:900px){ .services-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .services-grid{grid-template-columns:1fr;} }
.service-card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:30px; transition:transform .25s, box-shadow .25s; }
.service-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px -18px rgba(23,48,61,0.35);}
.service-card h3{font-size:1.05rem; font-weight:500;}
.service-card p{font-size:0.9rem; color:var(--ink-soft); margin-top:10px;}
.service-card a.more{ display:inline-block; margin-top:16px; font-size:0.85rem; color:var(--primary); text-decoration:none; border-bottom:1px solid var(--soft-blue); }
/* TOPICS */
.topics-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:20px; }
@media(max-width:820px){ .topics-grid{grid-template-columns:1fr;} }
.topic-card{
background:var(--panel); border:1px solid var(--line); border-radius:20px;
padding:34px; display:flex; flex-direction:column;
}
.topic-icon{ width:38px; height:38px; margin-bottom:18px; }
.topic-card h3{font-size:1.2rem;}
.topic-card p.desc{font-size:0.94rem; color:var(--ink-soft); margin-top:12px; flex-grow:0;}
.topic-foot{margin-top:auto; padding-top:22px;}
.pdf-box{
display:flex; align-items:center; gap:14px; margin-top:22px; padding:16px 18px;
background:var(--tint-1); border-radius:12px; border:1px solid var(--line);
}
.pdf-box .pdf-badge{
font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.06em;
background:var(--primary-deep); color:#fff; padding:6px 9px; border-radius:6px; flex-shrink:0;
}
.pdf-box p{font-size:0.85rem; color:var(--ink-soft); margin:0;}
.btn-small{
display:inline-block; margin-top:14px; padding:11px 22px; border-radius:100px;
background:var(--primary-deep); color:#fff; text-decoration:none; font-size:0.85rem; font-weight:500;
}
.btn-small:hover{background:var(--primary);}
.btn-outline-small{
display:inline-block; margin-top:14px; padding:10px 21px; border-radius:100px;
border:1px solid var(--soft-blue); color:var(--primary-deep); text-decoration:none; font-size:0.85rem; font-weight:500; background:none; cursor:pointer;
}
.btn-outline-small:hover{background:var(--tint-1);}
.quiz-panel{ margin-top:20px; display:none; }
.quiz-panel.open{display:block;}
.quiz-item{
display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line);
font-size:0.88rem; color:var(--ink-soft);
}
.quiz-item input{width:16px; height:16px; accent-color:var(--primary);}
.quiz-result{
margin-top:16px; padding:16px 18px; border-radius:12px; background:var(--sage-soft);
font-size:0.9rem; color:var(--primary-deep); display:none;
}
.quiz-result.show{display:block;}
.quiz-disclaimer{font-size:0.76rem; color:var(--ink-soft); margin-top:14px; line-height:1.5;}
/* ABOUT */
.about-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; align-items:center;}
@media(max-width:860px){ .about-grid{grid-template-columns:1fr;} }
.portrait{
aspect-ratio:4/5; border-radius:20px;
background:linear-gradient(160deg, var(--tint-2), var(--tint-1));
display:flex; align-items:center; justify-content:center;
font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--soft-blue);
border:1px solid var(--line); text-align:center; padding:20px;
}
.creds{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:10px;}
.creds li{ font-size:0.92rem; color:var(--ink-soft); padding-left:22px; position:relative; }
.creds li::before{ content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--sage); }
/* CONTACT */
.contact-section{
position:relative; overflow:hidden; color:#fff;
background-image:
linear-gradient(180deg, rgba(14,42,54,0.86) 0%, rgba(14,42,54,0.9) 100%),
url('../img/fondo-mar.jpg');
background-size:cover; background-position:center 30%;
}
.contact-inner{position:relative; z-index:2; text-align:center; max-width:640px; margin:0 auto;}
.contact-section .eyebrow{color:var(--tint-3);}
.contact-section h2{color:#fff; font-size:clamp(1.8rem,3.4vw,2.5rem);}
.contact-section p{color:#D7E6EA; margin-top:16px;}
.contact-meta{
margin-top:34px; display:flex; gap:28px; justify-content:center; flex-wrap:wrap;
font-size:0.86rem; color:#AFC4CB;
}
.contact-meta a{color:#E7EFF2; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.25);}
footer.site{padding:44px 0 60px; text-align:center; background:var(--deep-sea);}
footer.site p{font-size:0.82rem; color:#9FB6BF;}

/* Espacio para el calendario de reservas (Calendly / Cal.com / Google Calendar).
   Mientras esté vacío no se ve. */
.calendar-embed{margin:32px auto 0; max-width:720px; background:#fff; border-radius:16px; overflow:hidden; text-align:left;}
.calendar-embed:empty{display:none;}
.calendar-embed iframe{display:block; width:100%; min-height:700px; border:0;}