/* =========================================================
   Naty Visual · natalialastero.com · v2.0
   Los colores salen de la paleta elegida en <html data-paleta="...">.
   Las paletas están al final de este archivo.
   ========================================================= */
:root{
  --display:'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --texto:'Jost', 'Futura', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ancho:1180px;
  --lectura:38rem;
  --margen:clamp(16px, 4.5vw, 48px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 1.0625rem/1.7 var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--acento-texto);outline-offset:3px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08;margin:0;letter-spacing:-.005em}
/* Bodoni Moda: se fija el diseño de trazos gruesos (opsz 11) para que se lea en todos los tamaños */
h1,h2,h3,.marca-nombre{font-optical-sizing:none;font-variation-settings:'opsz' 11}
p{margin:0 0 1em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.saltar{position:absolute;left:16px;top:-60px;z-index:100;background:var(--boton);color:var(--boton-txt);padding:10px 16px}
.saltar:focus{top:12px}
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)}

/* ---------- Botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.6rem;border:1px solid var(--boton);background:var(--boton);color:var(--boton-txt);font:500 .98rem/1 var(--texto);letter-spacing:.02em;text-decoration:none;border-radius:999px;transition:background-color .2s,color .2s,border-color .2s;cursor:pointer}
.boton:hover{background:var(--boton-hover);border-color:var(--boton-hover)}
.boton--linea{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.boton--linea:hover{background:var(--tinta);border-color:var(--tinta);color:var(--fondo)}
.boton--claro{background:var(--sobre);border-color:var(--sobre);color:var(--oscuro)}
.boton--claro:hover{background:var(--fondo);border-color:var(--fondo);color:var(--tinta)}

/* ---------- Encabezado ---------- */
.cabecera{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--fondo);border-bottom:1px solid transparent;transition:border-color .25s}
.cabecera.con-borde{border-bottom-color:var(--linea)}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.marca{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.marca-nombre{font:500 1.3rem/1 var(--display);letter-spacing:.2em}
.marca-rol{font-size:.8rem;color:var(--gris);margin-top:6px;letter-spacing:.02em}
.menu-boton{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;background:none;border:0;font:500 .95rem var(--texto);color:var(--tinta);cursor:pointer}
.menu-boton svg{width:22px;height:22px}
.nav{position:fixed;inset:72px 0 auto 0;background:var(--fondo);border-bottom:1px solid var(--linea);padding:8px var(--margen) 24px;display:none}
.nav.abierta{display:block}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{display:block;padding:14px 0;border-bottom:1px solid var(--linea);text-decoration:none;font-size:1.05rem}
.nav a:hover{color:var(--acento-texto)}
.nav .nav-blog{color:var(--gris)}
@media (min-width:980px){
  .menu-boton{display:none}
  .nav{position:static;display:block;padding:0;border:0;background:none}
  .nav ul{display:flex;align-items:center;gap:26px}
  .nav a{border:0;padding:8px 0;font-size:.95rem}
  .nav .nav-cta a{padding:10px 20px;border:1px solid var(--tinta);border-radius:999px}
  .nav .nav-cta a:hover{background:var(--tinta);color:var(--fondo)}
}

/* ---------- Inicio: foto de vidriera a pantalla completa ---------- */
.portada{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;overflow:hidden;background:#000;color:#fff}
.portada-foto{position:absolute;inset:0;margin:0}
.portada-foto img{width:100%;height:100%;object-fit:cover;object-position:60% 55%;transform:scale(1.04);animation:acercar 2.6s var(--ease) both}
@keyframes acercar{from{transform:scale(1.1)}to{transform:scale(1.04)}}
/* velo para que el texto se lea sobre la foto */
.portada::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,0) 55%),
  linear-gradient(to right, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 38%, rgba(0,0,0,0) 60%)}
.portada-texto{position:relative;z-index:2;width:100%;padding-block:clamp(96px,14vw,140px) clamp(36px,6vw,72px)}
.portada h1{font-size:clamp(3.8rem,12.5vw,9.6rem);line-height:.86;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.portada h1 span{display:block}
.portada h1 .segunda{font-style:italic;padding-left:.48em}
.portada-rol{display:inline-block;margin:clamp(18px,2.6vw,28px) 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.7);font-size:clamp(1rem,1.5vw,1.15rem);letter-spacing:.03em}
.portada-bajada{max-width:30rem;margin:12px 0 0;font-size:1.08rem;color:rgba(255,255,255,.9)}
.portada .acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.portada .boton-foto{background:#fff;border-color:#fff;color:#121012}
.portada .boton-foto:hover{background:var(--boton);border-color:var(--boton);color:var(--boton-txt)}
.portada .boton-foto-linea{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.portada .boton-foto-linea:hover{background:rgba(255,255,255,.12);border-color:#fff}
.credito-foto{position:absolute;z-index:2;right:max(16px, env(safe-area-inset-right, 0px));bottom:10px;margin:0;font-size:.72rem;color:rgba(255,255,255,.7)}
.credito-foto a{color:inherit}
.credenciales{border-bottom:1px solid var(--linea)}
.credenciales .contenedor{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;padding-block:22px}
.credenciales p{margin:0;color:var(--gris);font-size:.98rem}
.credenciales strong{color:var(--tinta);font-weight:500}
@media (min-width:900px){
  .portada{align-items:center}
  .portada-foto{left:30%}
  .portada-foto img{object-position:18% 55%}
  .portada::before{background:
    linear-gradient(to right, #000 0%, #000 32%, rgba(0,0,0,.6) 44%, rgba(0,0,0,0) 62%),
    linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%)}
  .portada-texto{padding-block:clamp(96px,10vw,120px)}
}
@media (max-width:700px){
  .portada{min-height:86vh}
  .portada-foto img{object-position:52% 50%}
  .portada::before{background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.05) 72%)}
}

/* Retrato en Enfoque */
.retrato{margin:0}
.retrato img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;background:var(--piedra)}
.retrato .hueco{display:none;aspect-ratio:4/5;background:var(--piedra);border:1px dashed var(--acento);align-items:center;justify-content:center;text-align:center;padding:16px;font-size:.85rem;color:var(--gris)}
.retrato.sin-foto img{display:none}
.retrato.sin-foto .hueco{display:flex}
.retrato figcaption{font-size:.86rem;color:var(--gris);margin-top:8px}

/* ---------- Secciones ---------- */
.seccion{padding:clamp(72px,10vw,128px) 0}
.seccion--piedra{background:var(--piedra)}
.seccion--oscura{background:var(--oscuro);color:var(--sobre)}
.seccion-cabeza{display:grid;gap:14px;margin-bottom:clamp(36px,5vw,64px)}
@media (min-width:900px){.seccion-cabeza{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end;gap:48px}}
.seccion-titulo{font-size:clamp(2.3rem,5.4vw,4rem);letter-spacing:-.015em}
.seccion-intro{color:var(--gris);font-size:1.1rem;max-width:var(--lectura);margin:0}
.seccion--oscura .seccion-intro{color:var(--sobre2)}

/* Enfoque */
.enfoque{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:900px){.enfoque{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:start}}
.enfoque-frase{margin-bottom:24px!important}
.enfoque-frase{font:400 clamp(1.45rem,2.6vw,2rem)/1.4 var(--texto);margin:0}
.enfoque-texto{max-width:var(--lectura)}
.enfoque-texto p{color:var(--texto2)}
.marcas{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--linea);color:var(--gris);font-size:.98rem}
.marcas strong{color:var(--tinta);font-weight:500}

/* Trabajos */
.trabajo{display:grid;gap:22px;padding:clamp(36px,5vw,56px) 0;border-top:1px solid var(--linea)}
.trabajo:first-of-type{border-top:0;padding-top:0}
@media (min-width:900px){.trabajo{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px}}
.trabajo-ficha h3{font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:-.015em}
.trabajo-meta{color:var(--acento-texto);font-size:.98rem;margin:10px 0 16px}
.trabajo-ficha p{color:var(--texto2);max-width:30rem}
.trabajo-tareas{list-style:none;margin:16px 0 0;padding:0;font-size:.98rem;color:var(--gris)}
.trabajo-tareas li{padding:7px 0;border-top:1px solid var(--linea)}
.galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.galeria figure{margin:0;position:relative}
.galeria figure:first-child{grid-column:1/-1}
.galeria img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--linea)}
.galeria figure:first-child img{aspect-ratio:3/2}
.galeria figcaption{font-size:.86rem;color:var(--gris);margin-top:8px}
.galeria .hueco{display:none;aspect-ratio:4/5;background:var(--fondo);border:1px dashed var(--acento);align-items:center;justify-content:center;text-align:center;padding:16px;font-size:.85rem;line-height:1.4;color:var(--gris)}
.galeria figure:first-child .hueco{aspect-ratio:3/2}
.galeria figure.sin-foto img{display:none}
.galeria figure.sin-foto .hueco{display:flex}
@media (min-width:900px){
  .galeria{grid-template-columns:repeat(3,minmax(0,1fr))}
  .galeria figure:first-child{grid-column:span 2;grid-row:span 2}
  .galeria figure:first-child img,.galeria figure:first-child .hueco{aspect-ratio:auto;height:100%;min-height:100%}
  .galeria--dos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .galeria--dos figure:first-child{grid-column:auto;grid-row:auto}
  .galeria--dos figure:first-child img,.galeria--dos figure:first-child .hueco{aspect-ratio:4/5;height:auto;min-height:0}
}

/* Servicios */
.servicios{display:grid;gap:0;margin:0}
@media (min-width:760px){.servicios{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}}
.servicio{padding:26px 0;border-top:1px solid var(--linea-oscura)}
.servicio dt{font:500 1.25rem/1.3 var(--texto);color:var(--sobre)}
.servicio dd{margin:10px 0 0;color:var(--sobre2);max-width:30rem}

/* Cursos y capacitaciones (sección secundaria) */
.cursos{display:grid;gap:clamp(28px,4vw,48px)}
.cursos-cabeza{display:grid;gap:16px}
@media (min-width:900px){.cursos-cabeza{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end;gap:48px}}
.cursos-cabeza .seccion-titulo{font-size:clamp(2rem,4.2vw,3rem)}
.cursos-cabeza p{color:var(--gris);margin:0 0 18px;max-width:30rem;font-size:1.05rem}
.ofertas{display:grid;gap:14px}
@media (min-width:700px){.ofertas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.oferta{display:flex;flex-direction:column;gap:8px;padding:22px 20px;background:var(--fondo);border-top:2px solid var(--acento)}
.oferta h3{font:500 1.15rem/1.3 var(--texto)}
.oferta-formato{color:var(--acento-texto);font-size:.92rem;margin:0}
.oferta p{color:var(--texto2);font-size:.98rem;margin:0}
.oferta-para{color:var(--gris);font-size:.9rem;margin-top:auto!important;padding-top:10px}
.oferta a{align-self:flex-start;margin-top:6px;color:var(--tinta);font-weight:500;font-size:.95rem;text-decoration:underline;text-decoration-color:var(--acento);text-underline-offset:4px}
.oferta a:hover{text-decoration-thickness:2px}

/* Método (secuencia real) */
.metodo{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:paso}
@media (min-width:900px){.metodo{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
.metodo li{counter-increment:paso;padding:22px 0;border-top:1px solid var(--tinta)}
.metodo li::before{content:counter(paso);display:block;font:500 2.6rem/1 var(--display);font-optical-sizing:none;font-variation-settings:'opsz' 11;color:var(--acento-texto);margin-bottom:14px}
.metodo h3{font:500 1.2rem/1.3 var(--texto);margin-bottom:8px}
.metodo p{color:var(--gris);margin:0;font-size:1rem}

/* Trayectoria (CV completo) */
.etapa{display:grid;gap:8px 48px;padding:clamp(28px,4vw,40px) 0;border-top:1px solid var(--tinta)}
@media (min-width:900px){.etapa{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}}
.etapa-cabeza h3{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.01em}
.etapa-cabeza p{color:var(--acento-texto);font-size:.95rem;margin:8px 0 0}
.puestos{list-style:none;margin:0;padding:0}
.puesto{padding:16px 0;border-top:1px solid var(--linea)}
.puesto:first-child{border-top:0;padding-top:4px}
.puesto-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;align-items:baseline}
.puesto h4{margin:0;font:500 1.12rem/1.35 var(--texto)}
.puesto h4 span{font-weight:400;color:var(--gris)}
.puesto time{color:var(--gris);font-size:.92rem;white-space:nowrap}
.puesto p{margin:6px 0 0;color:var(--texto2);font-size:.98rem;max-width:44rem}
.puesto ul{margin:8px 0 0;padding-left:1.1em;color:var(--texto2);font-size:.98rem;max-width:44rem}
.puesto ul li{margin-bottom:3px}
.etapa--destacada{border-top-width:3px;border-top-color:var(--acento)}
.etapa--destacada .puesto h4{font-size:1.25rem}

/* Formación */
.columnas{display:grid;gap:clamp(36px,5vw,64px)}
@media (min-width:900px){.columnas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.columna h3{font:500 1.2rem/1.3 var(--texto);margin-bottom:16px}
.columna ul{list-style:none;margin:0;padding:0}
.columna li{padding:11px 0;border-top:1px solid var(--linea);font-size:1rem}
.columna li span{display:block;color:var(--gris);font-size:.92rem}

/* Blog */
.blog{display:grid;gap:28px}
@media (min-width:900px){.blog{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}}
.blog-texto p{color:var(--texto2);max-width:28rem;margin-top:18px}
.blog-notas{display:grid;gap:22px}
@media (min-width:640px){.blog-notas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nota{text-decoration:none;display:block}
.nota img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--linea)}
.nota h3{font:500 1.05rem/1.3 var(--texto);margin-top:12px}
.nota:hover h3{text-decoration:underline;text-decoration-color:var(--acento);text-underline-offset:4px}
.nota time{display:block;color:var(--gris);font-size:.88rem;margin-top:6px}

/* Contacto */
.contacto{display:grid;gap:clamp(36px,5vw,64px)}
@media (min-width:900px){.contacto{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.contacto-titulo{font-size:clamp(2.4rem,5.6vw,4.2rem);letter-spacing:-.015em}
.contacto-bajada{color:var(--sobre2);max-width:28rem;margin:18px 0 28px;font-size:1.1rem}
.canales{list-style:none;margin:28px 0 0;padding:0}
.canales li{padding:13px 0;border-top:1px solid var(--linea-oscura)}
.canales span{display:block;color:var(--acento-claro);font-size:.9rem}
.canales a{color:var(--sobre);text-decoration:none;font-size:1.08rem}
.canales a:hover{text-decoration:underline;text-underline-offset:4px}
.formulario{background:var(--form);color:var(--tinta);padding:clamp(24px,4vw,40px)}
.campo{margin-bottom:18px}
.campo label{display:block;font-size:.95rem;font-weight:500;margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;padding:12px 14px;border:1px solid var(--linea);border-radius:2px;background:#fff;font:inherit;color:#1b1b1b}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--tinta);box-shadow:0 0 0 2px var(--linea)}
.campo textarea{min-height:150px;resize:vertical}
.campo-doble{display:grid;gap:0 16px}
@media (min-width:600px){.campo-doble{grid-template-columns:1fr 1fr}}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulario .boton{width:100%}
@media (min-width:600px){.formulario .boton{width:auto}}
.estado{margin:14px 0 0;font-size:.98rem;min-height:1.5em}
.estado.ok{color:#2c6a43}
.estado.error{color:#9a2f1f}

/* Pie */
.pie{background:var(--marco);color:var(--sobre2);padding:28px 0;font-size:.92rem}
.pie .contenedor{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.pie a{color:var(--sobre);text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}

/* 404 */
.error-pagina{padding:clamp(80px,14vw,160px) 0;max-width:40rem}
.error-pagina h1{font-size:clamp(2.6rem,7vw,4.6rem);margin-bottom:18px}
.error-pagina p{color:var(--gris);font-size:1.1rem;margin-bottom:28px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .portada-foto img{transform:none}
}

/* =========================================================
   PALETAS · para cambiarla, editá data-paleta en <html> de index.html
   ========================================================= */
/* Negro y frambuesa */
[data-paleta="contraste"],:root{--fondo:#FFFFFF;--tinta:#121012;--texto2:#2C292B;--gris:#5B585A;--linea:#E0DEDA;--piedra:#EFEDE8;--oscuro:#141214;--marco:#000000;--brillo:#2A272A;--sombra:#0C0B0C;--sobre:#FFFFFF;--sobre2:#C2BEC0;--linea-oscura:#353235;--acento:#9E1B45;--acento-texto:#9E1B45;--acento-claro:#EBA9BC;--boton:#121012;--boton-hover:#000000;--boton-txt:#FFFFFF;--form:#FFFFFF}
/* Monocromo */
[data-paleta="galeria"]{--fondo:#FFFFFF;--tinta:#0A0A0A;--texto2:#2B2B2B;--gris:#5C5C5C;--linea:#DEDEDE;--piedra:#F1F0EE;--oscuro:#111111;--marco:#000000;--brillo:#2A2A2A;--sombra:#0B0B0B;--sobre:#FFFFFF;--sobre2:#BDBDBD;--linea-oscura:#333333;--acento:#8C8478;--acento-texto:#6B645A;--acento-claro:#CFC8BC;--boton:#111111;--boton-hover:#000000;--boton-txt:#FFFFFF;--form:#FFFFFF}
/* Negro y champagne */
[data-paleta="maison"]{--fondo:#FBF9F6;--tinta:#151515;--texto2:#33312D;--gris:#5E5B55;--linea:#DDD6CA;--piedra:#F2EEE7;--oscuro:#191919;--marco:#0F0F0F;--brillo:#2E2B27;--sombra:#141414;--sobre:#F3EBDD;--sobre2:#CDC6BA;--linea-oscura:#3A3733;--acento:#A88A5C;--acento-texto:#7D6440;--acento-claro:#D6BF94;--boton:#151515;--boton-hover:#000000;--boton-txt:#F6F3EE;--form:#F3EBDD}