:root {
    --celeste:       #5BB8D4;
    --celeste-light: #C5E8F5;
    --celeste-dark:  #3A9BBD;
    --rosa:          #E88FA8;
    --rosa-light:    #FAD4E0;
    --rosa-dark:     #D4708A;
    --lila:          #A47DC8;
    --lila-light:    #DDD0F0;
    --lila-dark:     #8560B0;
    --dark:          #1A1A2E;
    --text:          #3D3D5C;
    --text-light:    #6E6E8A;
    --white:         #FFFFFF;
    --bg:            #FAFAFE;
    --bg-alt:        #F4F0FF;
    --gradient:      linear-gradient(135deg, var(--celeste), var(--lila), var(--rosa));
    --gradient-soft: linear-gradient(135deg, #C5E8F5, #DDD0F0, #FAD4E0);
    --shadow:        0 10px 40px rgba(100,80,160,0.12);
    --shadow-hover:  0 20px 60px rgba(100,80,160,0.22);
    --radius:        20px;
    --radius-sm:     12px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Jost', sans-serif;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
}

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--gradient); border-radius:3px; }

#navbar {
    position: fixed; top:0; width:100%; z-index:1000;
    padding: 18px 6%;
    display: flex; align-items:center; justify-content:space-between;
    background: white;
    box-shadow: 0 2px 30px rgba(100,80,160,.1);
    transition: padding .4s ease;
}
#navbar.scrolled {
    padding: 13px 6%;
}

.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo-icon {
    width:42px; height:42px; border-radius:50%;
    background: var(--gradient);
    display:flex; align-items:center; justify-content:center;
    color:white; font-family:'Cormorant Garamond',serif;
    font-size:17px; font-weight:600; letter-spacing:1px; flex-shrink:0;
}
.nav-logo-name {
    font-family:'Cormorant Garamond',serif;
    font-size:20px; font-weight:600; color:var(--dark); line-height:1.1;
}
.nav-logo-sub {
    display:block; font-size:10px; font-family:'Jost',sans-serif;
    font-weight:500; letter-spacing:2.5px; text-transform:uppercase;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.nav-links { display:flex; list-style:none; gap:4px; align-items:center; }
.nav-links a {
    text-decoration:none; color:var(--text); font-size:13.5px;
    font-weight:500; letter-spacing:.4px;
    padding:8px 15px; border-radius:50px;
    transition:all .3s ease; position:relative;
}
.nav-links a::after {
    content:''; position:absolute; bottom:4px; left:50%;
    transform:translateX(-50%); width:0; height:2px;
    background:var(--gradient); border-radius:1px; transition:width .3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width:55%; }
.nav-links a:hover, .nav-links a.active { color:var(--lila-dark); }

.nav-cta {
    background:var(--gradient) !important; color:white !important;
    padding:10px 24px !important; border-radius:50px !important;
    box-shadow:0 4px 20px rgba(164,125,200,.35);
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(164,125,200,.5) !important; }
.nav-cta::after { display:none !important; }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; }
.hamburger span { display:block; width:24px; height:2px; background:var(--dark); border-radius:2px; transition:all .3s ease; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-nav {
    position:fixed; inset:0; z-index:999;
    background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px;
    transform:translateX(100%); transition:transform .45s cubic-bezier(.77,0,.18,1);
}
.mobile-nav.open { transform:translateX(0); }
.mobile-nav a {
    font-family:'Cormorant Garamond',serif; font-size:38px; font-weight:500;
    text-decoration:none; color:var(--dark); transition:all .3s ease;
}
.mobile-nav a:hover {
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

#inicio {
    min-height:100vh; position:relative;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; background:var(--dark);
}

.blobs { position:absolute; inset:0; overflow:hidden; }
.blob {
    position:absolute; border-radius:50%;
    filter:blur(72px); opacity:.32;
}
.b1 { width:520px; height:520px; background:var(--celeste); top:-120px; left:-120px; animation:bf1 9s ease-in-out infinite; }
.b2 { width:420px; height:420px; background:var(--rosa);    bottom:-100px; right:-100px; animation:bf2 11s ease-in-out infinite; }
.b3 { width:380px; height:380px; background:var(--lila);    top:50%; left:50%; transform:translate(-50%,-50%); animation:bf3 8s ease-in-out infinite; }
.b4 { width:260px; height:260px; background:var(--rosa);    top:12%; right:18%; animation:bf1 12s ease-in-out infinite reverse; }
.b5 { width:300px; height:300px; background:var(--celeste); bottom:18%; left:8%; animation:bf2 10s ease-in-out infinite reverse; }

@keyframes bf1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,40px) scale(1.1)} }
@keyframes bf2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,-30px) scale(1.08)} }
@keyframes bf3 { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-46%,-54%) scale(1.14)} }

.hero-overlay { position:absolute; inset:0; background:rgba(18,12,38,.52); }

.hero-content {
    position:relative; z-index:1;
    text-align:center; padding:0 24px; max-width:920px;
}

.hero-eyebrow {
    display:inline-flex; align-items:center; gap:14px;
    font-size:11px; font-weight:500; letter-spacing:3.5px; text-transform:uppercase;
    color:rgba(255,255,255,.6); margin-bottom:22px; opacity:0;
}
.hero-eyebrow::before, .hero-eyebrow::after {
    content:''; display:block; width:36px; height:1px; background:rgba(255,255,255,.35);
}

.hero-title {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(56px,11vw,118px); font-weight:300;
    color:white; line-height:.92; margin-bottom:10px; opacity:0;
}
.hero-title .first { font-style:italic; font-weight:300;
    background:linear-gradient(135deg,#C5E8F5,#DDD0F0,#FAD4E0);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-title .last { display:block; font-weight:600; }

.hero-sub {
    font-size:clamp(14px,1.8vw,17px); color:rgba(255,255,255,.58);
    font-weight:300; letter-spacing:1px; line-height:1.7;
    margin: 0 auto 52px; max-width:500px; opacity:0;
}

.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; opacity:0; }

.btn {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 32px; border-radius:50px; font-size:14px;
    font-weight:500; letter-spacing:.4px; text-decoration:none;
    transition:all .35s ease; border:none; cursor:pointer;
}
.btn-primary {
    background:linear-gradient(135deg,var(--celeste),var(--lila));
    color:white; box-shadow:0 6px 30px rgba(164,125,200,.4);
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(164,125,200,.55); }
.btn-ghost {
    background:transparent; color:white;
    border:1.5px solid rgba(255,255,255,.3); backdrop-filter:blur(10px);
}
.btn-ghost:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); transform:translateY(-3px); }

.scroll-hint {
    position:absolute; bottom:38px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color:rgba(255,255,255,.4); font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
    opacity:0; animation:fadeHint 1s 2.2s forwards;
}
.scroll-hint-line {
    width:1px; height:48px;
    background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);
    animation:lineAnim 2.2s ease-in-out infinite;
}
@keyframes fadeHint { to { opacity:1; } }
@keyframes lineAnim {
    0%    { transform:scaleY(0); transform-origin:top; }
    49%   { transform:scaleY(1); transform-origin:top; }
    50%   { transform:scaleY(1); transform-origin:bottom; }
    100%  { transform:scaleY(0); transform-origin:bottom; }
}

section { padding:108px 6%; }

.sec-header { text-align:center; margin-bottom:72px; }
.sec-tag {
    display:inline-block; font-size:10.5px; font-weight:600;
    letter-spacing:3px; text-transform:uppercase;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    margin-bottom:10px;
}
.sec-title {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(36px,5vw,58px); font-weight:500;
    color:var(--dark); line-height:1.1; margin-bottom:18px;
}
.sec-title em {
    font-style:italic;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.sec-div {
    width:56px; height:3px; background:var(--gradient);
    border-radius:2px; margin:0 auto;
}
.sec-desc {
    font-size:15.5px; color:var(--text-light);
    max-width:560px; margin:18px auto 0; line-height:1.75;
}

#sobre-mi { background:var(--bg); }

.about-wrap {
    display:grid; grid-template-columns:1fr 1.45fr;
    gap:80px; align-items:center; max-width:1120px; margin:0 auto;
}

.photo-col { position:relative; }
.photo-frame {
    position:relative; border-radius:var(--radius); overflow:hidden;
    aspect-ratio:3/4; background:var(--gradient-soft);
}
.photo-frame img {
    width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
}
.photo-placeholder {
    width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; color:var(--lila-dark);
}
.photo-placeholder i { font-size:88px; opacity:.35; }
.photo-placeholder p { font-size:12px; opacity:.45; letter-spacing:1.5px; text-transform:uppercase; }
.photo-deco {
    position:absolute; inset:0;
    top:18px; left:18px;
    border-radius:var(--radius);
    box-shadow:18px 18px 0 0 var(--lila-light);
    z-index:-1; pointer-events:none;
}

.float-badge {
    position:absolute; background:white; border-radius:var(--radius-sm);
    padding:13px 18px; box-shadow:var(--shadow);
    display:flex; align-items:center; gap:12px;
}
.fb-icon {
    width:40px; height:40px; border-radius:10px;
    background:var(--gradient-soft);
    display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
}
.fb-text { font-size:12px; color:var(--text-light); line-height:1.4; }
.fb-text strong { display:block; font-size:13.5px; color:var(--dark); font-weight:600; }
.fb-years { bottom:-22px; right:-22px; }
.fb-role  { top:-22px;   left:-22px; }

.about-greeting {
    font-size:13px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    margin-bottom:10px;
}
.about-heading {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(30px,4vw,50px); font-weight:500;
    color:var(--dark); line-height:1.2; margin-bottom:22px;
}
.about-heading em {
    font-style:italic;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.about-text {
    font-size:15.5px; line-height:1.82; color:var(--text-light); margin-bottom:38px;
}
.about-text strong { color:var(--text); font-weight:600; }

.credentials { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cred-item {
    display:flex; align-items:flex-start; gap:13px;
    padding:16px 18px; background:white; border-radius:var(--radius-sm);
    box-shadow:0 4px 20px rgba(100,80,160,.08);
    transition:all .3s ease;
}
.cred-item:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.cred-icon {
    width:40px; height:40px; border-radius:10px;
    background:var(--gradient-soft);
    display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;
}
.cred-info strong { display:block; font-size:13px; font-weight:600; color:var(--dark); margin-bottom:2px; }
.cred-info span  { font-size:12px; color:var(--text-light); }

#servicios { background:var(--dark); position:relative; overflow:hidden; }
#servicios .sec-title { color:white; }
#servicios .sec-desc  { color:rgba(255,255,255,.45); }

.svc-glow {
    position:absolute; pointer-events:none;
    border-radius:50%; filter:blur(90px);
}
.svc-glow-1 { width:500px;height:500px; background:rgba(91,184,212,.1);  top:-160px; right:-160px; }
.svc-glow-2 { width:450px;height:450px; background:rgba(164,125,200,.1); bottom:-140px; left:-140px; }

.svc-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px; max-width:1120px; margin:0 auto; position:relative;
}
.svc-card {
    background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius); padding:42px 32px;
    transition:all .4s ease; position:relative; overflow:hidden;
}
.svc-card::after {
    content:''; position:absolute; inset:0;
    background:var(--gradient); opacity:0; border-radius:var(--radius);
    transition:opacity .4s ease;
}
.svc-card:hover { transform:translateY(-9px); border-color:transparent; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.svc-card:hover::after { opacity:.07; }

.svc-inner { position:relative; z-index:1; }
.svc-icon-box {
    width:58px; height:58px; border-radius:16px;
    background:var(--gradient-soft);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:26px; transition:all .4s ease;
}
.svc-card:hover .svc-icon-box { background:var(--gradient); transform:scale(1.1) rotate(-6deg); }
.svc-icon-box i {
    font-size:24px;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    transition:all .4s ease;
}
.svc-card:hover .svc-icon-box i {
    background:white;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.svc-title { font-family:'Cormorant Garamond',serif; font-size:25px; font-weight:600; color:white; margin-bottom:12px; }
.svc-desc  { font-size:14px; line-height:1.72; color:rgba(255,255,255,.48); }
.svc-link {
    margin-top:26px; display:flex; align-items:center; gap:8px;
    font-size:13px; font-weight:500;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    opacity:0; transform:translateY(10px); transition:all .4s ease;
}
.svc-card:hover .svc-link { opacity:1; transform:translateY(0); }

#zona-de-trabajo { background:var(--bg-alt); position:relative; overflow:hidden; }
#zona-de-trabajo::before {
    content:''; position:absolute; pointer-events:none;
    width:700px; height:700px;
    background:radial-gradient(circle,rgba(197,232,245,.45) 0%,transparent 68%);
    top:-320px; right:-180px;
}

.zona-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:28px; max-width:1020px; margin:0 auto;
}
.zona-card {
    background:white; border-radius:var(--radius);
    padding:48px 36px; text-align:center;
    box-shadow:var(--shadow); transition:all .4s ease;
    position:relative; overflow:hidden;
}
.zona-card::before {
    content:''; position:absolute; top:0; left:0; right:0;
    height:4px; background:var(--gradient);
}
.zona-card:hover { transform:translateY(-9px); box-shadow:var(--shadow-hover); }
.zona-icon {
    width:68px; height:68px; border-radius:50%;
    background:var(--gradient);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 24px; font-size:27px; color:white;
    box-shadow:0 8px 28px rgba(164,125,200,.35);
    transition:transform .4s ease;
}
.zona-card:hover .zona-icon { transform:scale(1.1) rotate(10deg); }
.zona-city     { font-family:'Cormorant Garamond',serif; font-size:29px; font-weight:600; color:var(--dark); margin-bottom:6px; }
.zona-prov     {
    font-size:11px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    margin-bottom:14px;
}
.zona-desc { font-size:14px; color:var(--text-light); line-height:1.72; }
.zona-tag {
    display:inline-block; margin-top:22px;
    padding:6px 18px; border-radius:50px;
    font-size:12px; font-weight:500;
    background:var(--gradient-soft); color:var(--lila-dark);
}

#contacto { background:var(--bg); }

.contact-grid {
    display:grid; grid-template-columns:1fr 1.25fr;
    gap:72px; max-width:1120px; margin:0 auto; align-items:start;
}

.contact-heading {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(28px,3.5vw,42px); font-weight:500;
    color:var(--dark); line-height:1.2; margin-bottom:18px;
}
.contact-heading em {
    font-style:italic;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.contact-intro { font-size:15px; color:var(--text-light); line-height:1.75; margin-bottom:42px; }

.contact-items { display:flex; flex-direction:column; gap:20px; }
.c-item {
    display:flex; align-items:center; gap:18px;
    text-decoration:none; color:var(--text); transition:transform .3s ease;
}
.c-item:hover { transform:translateX(8px); }
.c-item:hover .c-icon { background:var(--gradient); box-shadow:0 8px 25px rgba(164,125,200,.35); }
.c-item:hover .c-icon i {
    background:white;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.c-icon {
    width:50px; height:50px; border-radius:14px;
    background:var(--gradient-soft);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all .3s ease;
}
.c-icon i {
    font-size:20px;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    transition:all .3s ease;
}
.c-label { display:block; font-size:10.5px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-light); margin-bottom:2px; }
.c-value { font-size:14.5px; font-weight:500; color:var(--dark); }

.form-wrap {
    background:white; border-radius:var(--radius);
    padding:46px; box-shadow:var(--shadow);
}
.form-row2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fg { margin-bottom:20px; }
.fg label {
    display:block; font-size:11px; font-weight:600;
    letter-spacing:1.5px; text-transform:uppercase;
    color:var(--text-light); margin-bottom:8px;
}
.fg input, .fg textarea {
    width:100%; padding:14px 18px;
    border:1.5px solid #E8E4F0; border-radius:var(--radius-sm);
    font-family:'Jost',sans-serif; font-size:14px; color:var(--dark);
    background:var(--bg); transition:all .3s ease; outline:none; resize:none;
}
.fg input:focus, .fg textarea:focus {
    border-color:var(--lila); background:white;
    box-shadow:0 0 0 4px rgba(164,125,200,.1);
}
.fg textarea { height:130px; }
.btn-send {
    width:100%; padding:16px; border-radius:50px; border:none;
    background:var(--gradient); color:white;
    font-family:'Jost',sans-serif; font-size:15px; font-weight:500; letter-spacing:.5px;
    cursor:pointer; transition:all .35s ease;
    box-shadow:0 6px 30px rgba(164,125,200,.35);
    display:flex; align-items:center; justify-content:center; gap:10px;
}
.btn-send:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(164,125,200,.5); }

.wa-float {
    position:fixed; bottom:32px; right:32px; z-index:500;
    width:56px; height:56px; border-radius:50%;
    background:#25D366; color:white; font-size:27px;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; transition:all .3s ease;
    box-shadow:0 6px 28px rgba(37,211,102,.4);
    animation:waPulse 3s ease-in-out infinite;
}
.wa-float:hover { transform:scale(1.12); box-shadow:0 10px 36px rgba(37,211,102,.55); }
@keyframes waPulse {
    0%,100% { box-shadow:0 6px 28px rgba(37,211,102,.4); }
    50%      { box-shadow:0 6px 28px rgba(37,211,102,.4), 0 0 0 12px rgba(37,211,102,.1); }
}

footer {
    background:var(--dark); padding:54px 6%;
    text-align:center;
}
.footer-name {
    font-family:'Cormorant Garamond',serif;
    font-size:30px; font-weight:500; color:white; margin-bottom:6px;
}
.footer-name em {
    font-style:italic;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.footer-sub { font-size:11px; color:rgba(255,255,255,.35); letter-spacing:2.5px; text-transform:uppercase; margin-bottom:32px; }
.footer-nav { display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.footer-nav a { color:rgba(255,255,255,.45); text-decoration:none; font-size:13.5px; transition:color .3s; }
.footer-nav a:hover { color:white; }
.footer-copy { font-size:11.5px; color:rgba(255,255,255,.2); }

@media (max-width:960px) {
    .about-wrap { grid-template-columns:1fr; gap:52px; }
    .photo-col { max-width:340px; margin:0 auto; }
    .contact-grid { grid-template-columns:1fr; gap:52px; }
}
@media (max-width:768px) {
    .nav-links { display:none; }
    .hamburger { display:flex; }
    section { padding:84px 6%; }
    .credentials { grid-template-columns:1fr; }
    .form-row2 { grid-template-columns:1fr; }
    .form-wrap { padding:30px 22px; }
    .fb-role  { top:-16px; left:-8px; }
    .fb-years { bottom:-16px; right:-8px; }
}
@media (max-width:480px) {
    .hero-btns { flex-direction:column; align-items:center; }
    .zona-grid { grid-template-columns:1fr; }
}