/* Sentire Psicología · Ángela Cervera — hoja de estilos (mobile-first)
   Tipografías (OFL): Fraunces (instancia SOFT 100, opsz 24) + Figtree */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-soft-latin-normal.woff2") format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-soft-latin-italic.woff2") format("woff2");font-weight:300 600;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --crema:#faf6f0; --arena:#f1e7da; --arena-2:#e9dccb; --lino:#fffdf9;
  --oliva:#6f7651; --oliva-osc:#545a3c; --salvia:#a9b293; --salvia-clara:#e3e6d6;
  --terracota:#b07a62; --rosa-tierra:#ecd8cc;
  --tinta:#3b3530; --tinta-suave:#625a52;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-xl:2.2rem; --r-lg:1.6rem; --r-md:1.1rem;
  --sombra:0 18px 40px -24px rgba(84,70,55,.35);
  --ancho:68rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:var(--sans);font-size:1.0625rem;line-height:1.7;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
a{color:var(--oliva-osc);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--terracota)}
:focus-visible{outline:2px solid var(--terracota);outline-offset:3px;border-radius:.6rem}

/* Texto justificado con guiones */
p,.just li{text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 2;overflow-wrap:break-word}
.centro p,p.centro{text-align:center;-webkit-hyphens:manual;hyphens:manual}

h1,h2,h3{font-family:var(--serif);font-weight:380;line-height:1.14;color:var(--tinta);margin:0 0 .6em;letter-spacing:-.012em}
h1{font-size:clamp(2.05rem,7vw,3.35rem)}
h2{font-size:clamp(1.7rem,5vw,2.4rem)}
h3{font-size:1.28rem;font-weight:500}
em.serif{font-family:var(--serif);font-style:italic}
.antetitulo{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terracota);margin-bottom:.9rem}

.contenedor{width:min(100% - 2.6rem,var(--ancho));margin-inline:auto}
.estrecho{max-width:42rem}
.saltar{position:absolute;left:-999px;top:0}
.saltar:focus{left:1rem;top:1rem;background:var(--lino);padding:.6rem 1rem;border-radius:2rem;z-index:99}

/* Marcadores de datos pendientes */
.pendiente{background:#fff3c9;color:#6b5418;border:1px dashed #cfae55;border-radius:.6rem;padding:.05em .4em;font-size:.92em;white-space:normal;-webkit-hyphens:none;hyphens:none}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(250,246,240,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.marca{display:flex;flex-direction:column;text-decoration:none;color:var(--tinta);line-height:1.05}
.marca b{font-family:var(--serif);font-weight:420;font-size:1.25rem;letter-spacing:.16em;text-transform:uppercase}
.marca i{font-family:var(--serif);font-weight:350;font-size:.92rem;color:var(--terracota);margin-top:.15rem}
.boton-menu{appearance:none;border:0;background:var(--arena);color:var(--tinta);border-radius:2rem;padding:.55rem 1.05rem;font:600 .9rem var(--sans);display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
.boton-menu span{display:block;width:1.05rem;height:.6rem;position:relative}
.boton-menu span::before,.boton-menu span::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor}
.boton-menu span::before{top:0}.boton-menu span::after{bottom:0}
.menu{position:absolute;left:1rem;right:1rem;top:calc(100% + .3rem);background:var(--lino);border-radius:var(--r-lg);box-shadow:var(--sombra);padding:.8rem;display:none}
.menu.abierto{display:block}
.menu ul{list-style:none;margin:0;padding:0}
.menu a{display:block;padding:.7rem 1rem;border-radius:1.2rem;text-decoration:none;color:var(--tinta);font-weight:600}
.menu a:hover{background:var(--arena)}
.menu .cta-menu{background:var(--oliva);color:#fff;text-align:center;margin-top:.4rem}
.menu .cta-menu:hover{background:var(--oliva-osc);color:#fff}

.marca .tit{display:block;font-size:.88em;color:var(--tinta-suave)}
.marca .sep{display:none}
.pie .marca .tit{color:#d9cfc3}
@media (min-width:44em){.marca .tit{display:inline;font-size:1em;color:inherit}.marca .sep{display:inline}.pie .marca .tit{color:inherit}}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.6rem;border-radius:3rem;background:var(--oliva);color:#fff;text-decoration:none;font-weight:700;letter-spacing:.01em;transition:background .25s,transform .25s;box-shadow:0 12px 24px -16px rgba(84,90,60,.9)}
.boton:hover{background:var(--oliva-osc);color:#fff;transform:translateY(-1px)}
.boton.suave{background:var(--lino);color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--arena-2)}
.boton.suave:hover{background:var(--arena);color:var(--tinta)}
.botones{display:flex;flex-wrap:wrap;gap:.8rem}

/* Secciones */
section{padding:4.5rem 0;position:relative}
.fondo-arena{background:var(--arena)}
.fondo-salvia{background:var(--salvia-clara)}
.onda{display:block;width:100%;height:46px;color:var(--arena)}
.onda.salvia{color:var(--salvia-clara)}
.onda + section,.onda-sig{padding-top:3rem}

/* Portada */
.portada{padding:2.5rem 0 3.5rem;overflow:hidden}
.portada .contenedor{display:grid;gap:2.6rem}
.portada h1 em{font-style:italic;font-weight:340;color:var(--oliva)}
.portada .lead{font-size:1.15rem;color:var(--tinta-suave);max-width:36rem}
.datos-rapidos{list-style:none;padding:0;margin:1.6rem 0 2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.datos-rapidos li{background:var(--lino);border-radius:2rem;padding:.4rem .95rem;font-size:.9rem;font-weight:600;color:var(--tinta-suave);box-shadow:inset 0 0 0 1px var(--arena-2)}
.retrato{position:relative;justify-self:center;width:min(88%,24rem);margin:0}
.retrato::before{content:"";position:absolute;inset:8% -7% -5% 9%;background:var(--salvia-clara);border-radius:58% 42% 52% 48% / 46% 56% 44% 54%;z-index:0}
.retrato::after{content:"";position:absolute;width:4.5rem;height:4.5rem;left:0;top:-1%;background:var(--rosa-tierra);border-radius:50%;z-index:0}
.retrato picture,.retrato img{position:relative;z-index:1;border-radius:46% 54% 44% 56% / 38% 40% 60% 62%;aspect-ratio:4/5;object-fit:cover;width:100%}
.retrato figcaption{position:relative;z-index:2;margin:-1.8rem auto 0;width:max-content;max-width:90%;background:var(--lino);border-radius:2rem;padding:.55rem 1.1rem;box-shadow:var(--sombra);font-size:.85rem;text-align:center;line-height:1.35}
.retrato figcaption b{font-family:var(--serif);font-size:1.02rem;font-weight:500;display:block}

/* Cita */
.cita{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,4vw,1.75rem);line-height:1.35;color:var(--tinta);margin:0;text-align:center}
.cita::before{content:"“";display:block;font-size:3.5rem;line-height:.6;color:var(--terracota);margin-bottom:.4rem}
.cita-autora{display:block;text-align:center;font-family:var(--sans);font-style:normal;font-size:.9rem;color:var(--tinta-suave);margin-top:1rem}

/* Sobre mí */
.dos-col{display:grid;gap:2.4rem}
.tarjeta{background:var(--lino);border-radius:var(--r-xl);padding:1.8rem 1.6rem;box-shadow:var(--sombra)}
.lista-formacion{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.lista-formacion li{position:relative;padding-left:1.6rem}
.lista-formacion li::before{content:"";position:absolute;left:0;top:.55em;width:.62rem;height:.62rem;border-radius:50%;background:var(--salvia)}
.lista-formacion strong{display:block;font-weight:700}
.lista-formacion span{color:var(--tinta-suave);font-size:.95rem}
.etiquetas{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem;padding:0;list-style:none}
.etiquetas li{background:var(--salvia-clara);color:var(--oliva-osc);border-radius:2rem;padding:.3rem .85rem;font-size:.85rem;font-weight:600}

/* Áreas */
.rejilla{display:grid;gap:1.1rem;margin-top:2rem}
.area{background:var(--lino);border-radius:var(--r-lg);padding:1.6rem 1.5rem 1.4rem;box-shadow:var(--sombra);position:relative;overflow:hidden}
.area::after{content:"";position:absolute;right:-1.6rem;bottom:-1.9rem;width:5rem;height:5rem;border-radius:50%;background:var(--arena);opacity:.8}
.area h3{position:relative;z-index:1;padding-right:.5rem;font-size:1.22rem;margin-bottom:.4rem}
.area p{position:relative;z-index:1;margin:0;font-size:.98rem;color:var(--tinta-suave)}
.area:nth-child(3n+2)::after{background:var(--salvia-clara)}
.area:nth-child(3n)::after{background:var(--rosa-tierra)}

/* Sesiones */
.pasos{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.1rem;counter-reset:paso}
.pasos li{background:var(--lino);border-radius:var(--r-lg);padding:1.5rem 1.5rem 1.3rem 4.4rem;position:relative;counter-increment:paso;box-shadow:var(--sombra)}
.pasos li::before{content:counter(paso);position:absolute;left:1.3rem;top:1.35rem;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--rosa-tierra);color:var(--terracota);font:600 1.3rem/2.3rem var(--serif);text-align:center}
.pasos h3{font-size:1.15rem;margin-bottom:.3rem}
.pasos p{margin:0}
.modalidades{display:grid;gap:1.1rem;margin-top:1.4rem}
.modalidad{border-radius:var(--r-xl);padding:1.7rem 1.6rem;background:var(--lino);box-shadow:var(--sombra)}
.modalidad.online{background:var(--rosa-tierra)}
.modalidad h3{margin-bottom:.4rem}
.modalidad address{font-style:normal;margin:.6rem 0 .2rem;line-height:1.55}

/* Tarifas */
.tarifas{display:grid;gap:1rem;margin-top:2rem}
.tarifa{background:var(--lino);border-radius:var(--r-lg);padding:1.4rem 1.5rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;box-shadow:var(--sombra)}
.tarifa h3{margin:0;font-size:1.15rem}
.tarifa small{display:block;font-family:var(--sans);font-size:.88rem;color:var(--tinta-suave);font-weight:400;margin-top:.2rem}
.precio{font-family:var(--serif);font-size:1.75rem;font-weight:450;color:var(--oliva);white-space:nowrap}
.nota{font-size:.92rem;color:var(--tinta-suave)}

/* Preguntas */
.preguntas{margin-top:2rem;display:grid;gap:.8rem}
.preguntas details{background:var(--lino);border-radius:var(--r-lg);box-shadow:var(--sombra);overflow:hidden}
.preguntas summary{cursor:pointer;list-style:none;padding:1.15rem 3.4rem 1.15rem 1.4rem;font-weight:700;position:relative}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);width:1.8rem;height:1.8rem;border-radius:50%;background:var(--arena);font:500 1.3rem/1.75rem var(--serif);text-align:center;color:var(--terracota);transition:transform .25s}
.preguntas details[open] summary::after{content:"–"}
.preguntas .resp{padding:0 1.4rem 1.2rem}
.preguntas .resp p{margin:0 0 .6rem}

/* Contacto */
.vias{display:grid;gap:1rem;margin-top:2rem}
.via{display:flex;gap:1rem;align-items:center;background:var(--lino);border-radius:var(--r-lg);padding:1.2rem 1.3rem;text-decoration:none;color:var(--tinta);box-shadow:var(--sombra);transition:transform .25s}
a.via:hover{transform:translateY(-2px);color:var(--tinta)}
.via .ico{flex:none;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--salvia-clara);display:grid;place-items:center;color:var(--oliva-osc)}
.via .ico svg{width:1.3rem;height:1.3rem}
.via b{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terracota)}
.via span{font-weight:600;overflow-wrap:anywhere}
.aviso-urgencias{margin-top:2rem;border-radius:var(--r-lg);background:var(--rosa-tierra);padding:1.3rem 1.5rem;font-size:.95rem}
.aviso-urgencias p{margin:0}

/* Pie */
.pie{background:var(--tinta);color:#e9e1d7;padding:3rem 0 2.2rem;border-radius:2.4rem 2.4rem 0 0;margin-top:0}
.pie a{color:#f4ece2}
.pie .marca{color:#fff}.pie .marca i{color:var(--rosa-tierra)}
.pie p{text-align:left;-webkit-hyphens:manual;hyphens:manual;margin:.3rem 0;font-size:.92rem}
.pie nav ul{list-style:none;padding:0;margin:1.2rem 0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.pie .legal{opacity:.75;font-size:.82rem;margin-top:1.4rem}

/* Página legal */
.legal-pag{padding:3rem 0 4rem}
.legal-pag h1{font-size:clamp(2.1rem,7vw,3rem)}
.legal-pag h2{font-size:1.7rem;margin-top:2.2rem}
.legal-pag .tarjeta{margin-top:1.5rem}
.legal-pag ul{padding-left:1.2rem}

/* Animación suave al aparecer */
.aparece{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
.aparece.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.aparece{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
.no-js .aparece{opacity:1;transform:none}

/* Tableta */
@media (min-width:44em){
  body{font-size:1.1rem}
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .modalidades,.vias{grid-template-columns:repeat(2,1fr)}
  .tarifas{grid-template-columns:repeat(2,1fr)}
  section{padding:5.5rem 0}
  .onda{height:70px}
}
/* Escritorio */
@media (min-width:62em){
  .boton-menu{display:none}
  .menu{display:block;position:static;background:none;box-shadow:none;padding:0}
  .menu ul{display:flex;align-items:center;gap:.15rem}
  .menu a{padding:.5rem .8rem;font-size:.95rem}
  .menu .cta-menu{margin:0 0 0 .6rem;padding:.6rem 1.2rem}
  .portada{padding:4rem 0 5rem}
  .portada .contenedor{grid-template-columns:1.15fr .85fr;align-items:center;gap:4rem}
  .dos-col{grid-template-columns:1.1fr .9fr;gap:4rem;align-items:start}
  .rejilla{grid-template-columns:repeat(3,1fr)}
  .pasos{grid-template-columns:repeat(3,1fr)}
  .pasos li{padding:4.2rem 1.6rem 1.6rem}
  .pasos li::before{top:1.4rem;left:1.6rem}
  .pie .contenedor{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
}

@media (min-width:62em){.retrato::after{left:-8%;width:5.5rem;height:5.5rem}.area{padding-bottom:2rem}}
