@font-face{font-family:"Montserrat";font-weight:600;font-display:swap;src:url(/fonts/montserrat-600.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:700;font-display:swap;src:url(/fonts/montserrat-700.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:100 1000;font-display:swap;src:url(/fonts/dm-sans.woff2) format("woff2")}

/* Layout: one-page con bloques de color pleno como su feed (lila · tinta · blanco · lima).
   Carácter "energía": aire de sección 48/80, títulos grandes en desk. Phone+tablet <64rem · desk ≥64rem (contenido 928).
   Espacios solo 4·8·12·16·24·32·48·64·80·96. Tema único claro: es su marca. */
:root{
  color-scheme:light;
  --blanco:#FFFFFF;
  --tinta:#29262E;       /* 14.88 blanco · 10.34 lila · 13.38 lima */
  --tinta-suave:#514A5C; /* 8.45 blanco · 5.88 lila · 7.52 lila-50 */
  --lila:#DCD3EE;        /* 10.34 con tinta */
  --lila-50:#F4F0FA;
  --lavanda:#9C79D5;     /* solo líneas decorativas */
  --violeta:#7E58C4;     /* acento de texto, solo sobre blanco (5.15) y lila-50 (4.58) */
  --lima:#E6FF6B;        /* sobre tinta 13.38 · fondo con tinta 13.38 */
  --linea-oscura:#4A4552;
  --linea-suave:rgba(41,38,46,.14);
  --font-titulo:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  --font-texto:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  --t1:2.5rem;--t1-lh:3rem; --t2:2rem;--t2-lh:2.5rem; --t3:1.5rem;--t3-lh:2rem;
  --gutter:1.5rem; --section:3rem; --head:2rem; --bloque:3rem; --header:4rem; --radio:0;
}
@media (width>=64rem){:root{
  --t1:4rem;--t1-lh:4.5rem; --t2:3rem;--t2-lh:3.5rem; --t3:1.75rem;--t3-lh:2.25rem;
  --gutter:3rem; --section:5rem; --head:3rem; --bloque:4rem; --header:5rem;
}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header) + 1rem);scroll-padding-bottom:6rem}
@media (width>=64rem){html{scroll-padding-bottom:0}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--blanco);color:var(--tinta);font:400 1rem/1.5rem var(--font-texto);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure,blockquote,form{margin:0}
h1,h2,h3{font-family:var(--font-titulo);font-weight:700;letter-spacing:-.025em;text-wrap:balance}
p,li{text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.oscuro :focus-visible{outline-color:var(--lima)}
.wrap{max-width:64rem;margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--section)}
.bg-lila{background:var(--lila)}
.bg-suave{background:var(--lila-50)}
.oscuro{background:var(--tinta);color:var(--blanco)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-5rem;z-index:60;background:var(--tinta);color:var(--blanco);padding:.75rem 1.5rem;border-radius:0;font-weight:600;text-decoration:none}
.skip:focus{top:1rem}

/* Roles */
.etiqueta{font:700 .75rem/1rem var(--font-texto);letter-spacing:.12em;text-transform:uppercase}
.oscuro .etiqueta{color:var(--lima)}
.t1{font-size:var(--t1);line-height:var(--t1-lh)}
.t2{font-size:var(--t2);line-height:var(--t2-lh)}
.t3{font-size:var(--t3);line-height:var(--t3-lh)}
.destacado{font-size:1.25rem;line-height:1.75rem}
.chico{font-size:.875rem;line-height:1.25rem}
.suave{color:var(--tinta-suave)}
/* Resaltado de su feed: bloque tinta con letra lima */
.hl{background:var(--tinta);color:var(--lima);padding:0 .5rem;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.oscuro .hl{background:var(--lima);color:var(--tinta)}

/* Encabezado de sección: etiqueta →12→ título →16→ bajada ; →head→ contenido */
.head{display:flex;flex-direction:column;gap:.75rem;max-width:40rem;margin-bottom:var(--head)}
.head .bajada{margin-top:.25rem}

/* Botones */
.btns{display:flex;flex-direction:column;gap:.75rem;width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:3rem;padding:.75rem 1.5rem;border-radius:0;font:700 1rem/1.5rem var(--font-texto);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .15s}
.btn svg{width:1.25rem;height:1.25rem;flex:none}
.btn-pri{background:var(--tinta);color:var(--blanco)}
.btn-pri:hover{background:#000;color:var(--lima)}
.btn-sec{border-color:var(--tinta);color:var(--tinta)}
.btn-sec:hover{background:var(--tinta);color:var(--lima)}
.btn-lima{background:var(--lima);color:var(--tinta)}
.btn-lima:hover{background:var(--blanco);color:var(--tinta)}
@media (prefers-reduced-motion:no-preference){.btn:active{transform:translateY(1px)}}
@media (width>=40rem){.btns{flex-direction:row;flex-wrap:wrap;width:auto}}
.flecha{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.375rem}
.flecha svg{width:1.25rem;height:1.25rem;flex:none}

/* Header (lila, continúa el hero) */
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--lila)}
.header .wrap{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marca{font:700 1.25rem/1.75rem var(--font-titulo);letter-spacing:-.025em;text-decoration:none}
.nav{display:none}
.menu-btn{width:3rem;height:3rem;margin-right:-.75rem;display:grid;place-items:center;background:none;border:0;color:var(--tinta);cursor:pointer;border-radius:0}
.menu-btn svg{width:1.5rem;height:1.5rem}
.menu{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:var(--lila);overflow-y:auto;overscroll-behavior:contain;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.menu[hidden]{display:none}
.header .menu-top{flex:none;width:100%;height:calc(var(--header) + 1px);border-bottom:1px solid var(--linea-suave);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.header .menu-body{flex:1;width:100%;height:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding-block:0 2rem}
.menu ul{list-style:none;margin:0 calc(var(--gutter) * -1) 2rem;padding:0}
.menu li{border-bottom:1px solid var(--linea-suave)}
.menu li a{padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem;font:700 .875rem/1.25rem var(--font-texto);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.menu li a svg{width:1.25rem;height:1.25rem;flex:none}
.menu .btn{width:100%}
.menu-nota{margin:1rem 0 0;text-align:center;font-size:.875rem;line-height:1.25rem;color:var(--tinta-suave)}
html.menu-abierto{overflow:hidden}
@media (width>=64rem){
  .marca{font-size:1.5rem;line-height:2rem}
  .nav{display:flex;align-items:center;gap:2rem}
  .nav a:not(.btn){font-size:.875rem;line-height:1.25rem;font-weight:600;text-decoration:none;padding-block:.75rem}
  .nav .btn{min-height:2.5rem;padding:.5rem 1.25rem;gap:.5rem;font-size:.875rem;line-height:1.25rem}
  .nav .btn svg{width:1rem;height:1rem}
  .menu-btn,.menu{display:none!important}
}

/* Hero: etiqueta →16→ H1 →24→ bajada →32→ botones ; texto →48/64→ foto */
.hero{padding-block:1.5rem var(--section)}
.hero-grid{display:grid;gap:var(--bloque);align-items:center}
.hero-txt{display:flex;flex-direction:column}
.hero .t1{margin-top:1rem}
.hero .destacado{margin-top:1.5rem;color:var(--tinta-suave);max-width:32rem}
.hero .btns{margin-top:2rem}
.foto{position:relative;margin:0 0 2rem;justify-self:center;width:100%;max-width:26rem}
.foto img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 12%;border-radius:0}
.sticker{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem;background:var(--lima);color:var(--tinta);padding:.75rem 1rem;box-shadow:0 8px 24px rgba(41,38,46,.18);white-space:nowrap}
.sticker strong{font:700 .875rem/1.25rem var(--font-titulo)}
.sticker span{font:500 .875rem/1.25rem var(--font-texto)}
@media (width>=64rem){
  .hero{padding-top:2rem}
  .hero-grid{grid-template-columns:1fr 22rem;gap:4rem}
  .foto{max-width:none}
  .foto img{aspect-ratio:4/5}
}

/* ¿Te pasa? (tinta) */
.pasa-grid{display:grid;gap:var(--head)}
.pasa-grid>*{min-width:0}
.pasa-grid .head{margin-bottom:0}
.pasa-grid .bajada{color:var(--lila)}
.fijado{position:relative;background:var(--lila);color:var(--tinta);padding:3rem 2rem 5rem;text-align:center}
.fijado-txt{display:flex;flex-direction:column;gap:1rem;font-size:1.125rem;line-height:1.75rem}
.fijado .ln{display:block}
.fijado .fuerte{margin-top:.5rem;font:700 1.5rem/2rem var(--font-titulo);letter-spacing:-.02em}
.firma{position:absolute;left:2rem;right:2rem;bottom:1.5rem;display:flex;align-items:center;gap:.75rem;font:700 .625rem/1rem var(--font-texto);letter-spacing:.16em;color:var(--tinta-suave)}
.firma::before,.firma::after{content:"";flex:1;height:1px;background:var(--lavanda)}
.frases{margin-top:var(--bloque);display:grid;grid-auto-flow:column;grid-auto-columns:min(72%,16rem);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);padding:.75rem var(--gutter) 1rem;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.post{scroll-snap-align:start;position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem 1.5rem 3rem;background:var(--blanco);color:var(--tinta);transition:transform .25s}
.post blockquote{font:700 1.125rem/1.5rem var(--font-titulo);text-transform:uppercase}
.post .violeta{color:var(--violeta)}
.post.lima{background:var(--lima)}
.post.lila{background:var(--lila)}
.post .firma{bottom:1rem;left:1.5rem;right:1.5rem}
.post.lima .firma::before,.post.lima .firma::after{background:var(--tinta)}
.frases-pie{margin-top:1rem;display:flex;justify-content:center}
.frases-pie a{color:var(--blanco)}
@media (width>=64rem){.frases-pie{justify-content:flex-end}}
@media (width>=64rem){
  .pasa-grid{grid-template-columns:5fr 6fr;gap:4rem;align-items:center}
  .fijado{padding:3rem 3rem 5rem}
  .frases{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);gap:2rem;overflow:visible;margin-inline:0;padding:1rem 0 0}
  .post blockquote{font-size:1.25rem;line-height:1.75rem}
}

/* Servicios: tres tarjetas de color pleno */
.cards{display:grid;gap:1rem}
.card{border-radius:0;padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:flex-start;color:var(--tinta)}
.card{border:1px solid transparent}
.card.c-lila{background:var(--lila);border-color:var(--lila)}
.card.c-blanco{background:var(--blanco);border-color:var(--tinta)}
.card.c-lima{background:var(--lima);border-color:var(--lima)}
.chip{border:1px solid var(--tinta);border-radius:0;padding:.25rem .75rem;font:700 .75rem/1rem var(--font-texto);letter-spacing:.08em;text-transform:uppercase}
.card h3{margin-top:1rem}
.card p{margin-top:.75rem;color:var(--tinta-suave)}
.card .flecha{margin-top:auto;padding-top:1.5rem}
@media (width>=64rem){.cards{grid-template-columns:repeat(3,1fr);gap:1.5rem}.card{padding:2rem}}

/* Cómo empezar (lila): head + CTA | pasos */
.empezar-grid{display:grid;gap:var(--head)}
.empezar-grid .head{margin-bottom:0}
.pasos{list-style:none;padding:0;display:flex;flex-direction:column;gap:1rem;counter-reset:p}
.pasos li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:center;background:var(--blanco);border-radius:0;padding:1rem 1.5rem 1rem 1rem;counter-increment:p}
.pasos li::before{content:counter(p);width:3rem;height:3rem;border-radius:0;background:var(--tinta);color:var(--lima);display:grid;place-items:center;font:700 1.25rem/1 var(--font-titulo)}
.pasos h3{font-size:1.125rem;line-height:1.5rem}
.pasos p{margin-top:.25rem;color:var(--tinta-suave);font-size:.875rem;line-height:1.25rem}
@media (width>=64rem){
  .empezar-grid{grid-template-columns:5fr 6fr;gap:4rem;align-items:center}
  .empezar-izq{display:flex;flex-direction:column;gap:2rem}
}

/* Sobre mí */
.sobre{display:grid;gap:var(--head)}
.voz{background:var(--tinta);color:var(--blanco);border-radius:0;padding:2rem;display:flex;flex-direction:column;justify-content:center;gap:1.5rem}
.voz p{font:700 2.5rem/3rem var(--font-titulo);letter-spacing:-.03em;text-transform:uppercase}
.voz p span{display:block}
.voz p span:last-child{color:var(--lima)}
.voz small{font:700 .75rem/1rem var(--font-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--lila)}
.sobre-txt{display:flex;flex-direction:column}
.sobre-txt .t2{margin-top:.75rem}
.sobre-txt .destacado{margin-top:1rem;color:var(--tinta-suave)}
.datos{list-style:none;padding:0;margin-top:1.5rem;display:flex;flex-direction:column;gap:.75rem}
.datos li{display:grid;grid-template-columns:2rem 1fr;gap:.75rem;align-items:center}
.datos .ic{width:2rem;height:2rem;border-radius:0;background:var(--lila);display:grid;place-items:center}
.datos svg{width:1rem;height:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;list-style:none;padding:0}
.chips a{display:inline-flex;align-items:center;min-height:2.5rem;background:var(--lila-50);border:1px solid var(--lila);border-radius:0;padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:600;text-decoration:none}
.chips a:hover{background:var(--tinta);color:var(--lima);border-color:var(--tinta)}
@media (width>=64rem){.sobre{grid-template-columns:5fr 6fr;gap:4rem;align-items:center}.voz{padding:3rem;aspect-ratio:4/5}}

/* FAQ */
.faq-grid{display:grid;gap:var(--head)}
.faq-grid .head{margin-bottom:0}
.faq{border-top:1px solid var(--lila)}
.faq details{border-bottom:1px solid var(--lila)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-block:1rem;font:700 1rem/1.5rem var(--font-titulo)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mas{width:1.5rem;height:1.5rem;flex:none;border-radius:0;background:var(--tinta);color:var(--lima);display:grid;place-items:center;transition:transform .25s}
.faq summary .mas svg{width:1rem;height:1rem}
.faq details[open] summary .mas{transform:rotate(45deg)}
.faq details p{padding:0 2.5rem 1rem 0;color:var(--tinta-suave)}
.completar{background:var(--lima);color:var(--tinta);padding-inline:.25rem;border-radius:0;font-weight:700}
@media (width>=64rem){.faq-grid{grid-template-columns:5fr 6fr;gap:4rem;align-items:start}.faq summary{font-size:1.125rem;line-height:1.75rem}}

/* Cierre + footer (tinta) */
.cierre-grid{display:grid;gap:var(--head)}
.cierre-grid>*{min-width:0}
.cierre .head{margin-bottom:0}
.cierre .bajada{color:var(--lila)}
.form{background:var(--blanco);color:var(--tinta);border-radius:0;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.form :focus-visible{outline-color:var(--tinta)}
.campo{display:flex;flex-direction:column;gap:.5rem}
.campo label{font-weight:700;font-size:.875rem;line-height:1.25rem}
.campo input,.campo select,.campo textarea{font:inherit;color:var(--tinta);background:var(--blanco);border:1px solid var(--tinta-suave);border-radius:0;padding:.75rem 1rem;min-height:3rem;width:100%}
.campo textarea{min-height:6rem;resize:vertical}
.form .btn{width:100%;margin-top:.5rem}
.pie{margin-top:var(--bloque);padding-top:1.5rem;border-top:1px solid var(--linea-oscura);display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;color:var(--lila)}
.pie .marca{color:var(--blanco)}
.pie nav{display:flex;justify-content:center;gap:1.5rem}
.pie nav a{display:inline-flex;align-items:center;gap:.5rem;color:var(--blanco);text-underline-offset:.375rem}
.pie nav svg{width:1.25rem;height:1.25rem;flex:none}
@media (width>=64rem){.cierre-grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.form{padding:2rem}.pie{flex-direction:row;justify-content:space-between;align-items:center;text-align:left}}

/* Barra CTA mobile */
.barra{position:fixed;inset:auto 0 0 0;z-index:30;background:var(--lila);padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform .25s}
.barra.on{transform:none}
.barra .btn{width:100%}
@media (width>=64rem){.barra{display:none}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Radios: una sola regla para todo el sitio
   píldora → botones, chips y etiquetas · grande 24 → bloques (foto, tarjetas, formulario, Mi voz)
   medio 16 → pasos y etiqueta de la foto · chico 12 → campos · rectos → resaltados y posts · círculo → números e íconos */
:root{--r-pill:999px;--r-lg:1.5rem;--r-md:1rem;--r-sm:.75rem}
.btn,.chip,.chips a,.skip{border-radius:var(--r-pill)}
.foto img,.card,.form,.voz{border-radius:var(--r-lg)}
.pasos li,.sticker{border-radius:var(--r-md)}
.hl,.post,.fijado{border-radius:0} /* resaltados y posts: rectos, como en su Instagram */
.campo input,.campo select,.campo textarea{border-radius:var(--r-sm)}
.pasos li::before,.datos .ic,.faq summary .mas,.menu-btn{border-radius:50%}
.completar{border-radius:.25rem}

.desk-only{display:none}@media (width>=64rem){.desk-only{display:flex}.phone-only{display:none}}
.normal{font-weight:400}

/* Mobile: línea fina bajo el header y outline más fino */
@media (width<64rem){.hero{padding-top:var(--bloque)}.btn-sec{border-width:1px}.header{border-bottom:1px solid var(--linea-suave)}}

/* Links: un solo hover en todo el sitio.
   fondo claro → violeta oscuro (AA: 5.8 sobre lila, 7.4+ sobre blanco/lila-50/lima) · fondo oscuro → lima · siempre subrayado.
   Botones y chips mantienen su hover (fondo oscuro + texto lima). */
:root{--link-hover:#5A3A9C}
@media (hover:hover){
  a:hover{color:var(--link-hover);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.375rem}
  .frases-pie a:hover,.pie a:hover{color:var(--lima)}
  .btn:hover,.chips a:hover,.skip:hover{text-decoration:none}
  .skip:hover{color:var(--blanco)}
  .nav a:not(.btn):hover,.menu li a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.375rem}
}

/* Página de links (/links) */
.lt{max-width:30rem;margin-inline:auto;min-height:100vh;min-height:100svh;padding:calc(var(--section) + env(safe-area-inset-top,0px)) var(--gutter) calc(var(--section) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;text-align:center}
.lt-avatar{display:block;line-height:0}
.lt-avatar img{width:8rem;height:8rem;border-radius:50%;object-fit:cover;object-position:50% 12%;border:3px solid var(--blanco)}
.lt h1{margin:1rem 0 0}
.lt .etiqueta{margin:.5rem 0 0}
.lt-bio{margin:1rem 0 0;max-width:24rem;color:var(--tinta-suave)}
.lt-grupos{width:100%;margin-top:2rem;display:flex;flex-direction:column;gap:2rem;text-align:left}
.lt-grupo .etiqueta{margin:0 0 .75rem .25rem;color:var(--tinta-suave)}
.lt-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.lt-row{display:flex;align-items:center;gap:1rem;min-height:4rem;padding:.75rem 1rem;background:var(--blanco);color:var(--tinta);border-radius:var(--r-md);text-decoration:none;transition:background-color .15s,color .15s}
.lt-row .ico{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--lila-50);display:grid;place-items:center}
.lt-row .ico svg{width:1.25rem;height:1.25rem}
.lt-row .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.lt-t{font:700 1rem/1.5rem var(--font-texto)}
.lt-s{font:400 .875rem/1.25rem var(--font-texto);color:var(--tinta-suave)}
.lt-row .ch{flex:none;width:1.25rem;height:1.25rem}
.lt-row.principal{background:var(--tinta);color:var(--blanco)}
.lt-row.principal .lt-s{color:var(--lila)}
.lt-row.principal .ico{background:var(--lima);color:var(--tinta)}
.lt-pie{margin:3rem 0 0}
@media (hover:hover){
  .lt-row:hover{background:var(--tinta);color:var(--lima);text-decoration:none}
  .lt-row:hover .lt-s{color:var(--lila)}
  .lt-row:hover .ico{background:var(--lima);color:var(--tinta)}
  .lt-row.principal:hover{background:#000}
}
