:root{
  --ink:        #1B2431;
  --ink-soft:   #4C5768;
  --paper:      #EAF0F6;
  --paper-dark: #B9CDE3;
  --sage:       #2E5C9A;
  --sage-deep:  #16305A;
  --ochre:      #D9A441;
  --line:       #DCE4EE;
  --white:      #FAFBFC;
  --radius:     7px;
  --max:        1120px;
}

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

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.serif{
  font-family:'Fraunces', serif;
  font-weight:500;
  color:var(--ink);
  line-height:1.15;
  letter-spacing:-0.01em;
}

.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.04em;
}

a{color:inherit;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

:focus-visible{outline:2px solid var(--sage); outline-offset:3px;}

/* ============ HEADER ============ */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(234,240,246,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
/* evito que tocar los botones scrollee de mas y tape titulos */
#sobre, #modalidad, #faq, #contacto{
    scroll-margin-top:40px;
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; max-width:var(--max); margin:0 auto;
}
.logo{
  font-family:'Fraunces', serif; font-size:1.15rem; font-weight:500;
  letter-spacing:0.01em;
}
.logo span{color:var(--sage);}
.nav-links{
  display:flex; gap:36px; list-style:none;
  font-size:0.92rem; color:var(--ink-soft);
}
.nav-links a{text-decoration:none; transition:color .2s;}
.nav-links a:hover{color:var(--sage-deep);}
.nav-cta{
  display:inline-block;
  background:var(--sage-deep); color:var(--white);
  padding:10px 22px; border-radius:var(--radius);
  font-size:0.88rem; text-decoration:none;
  transition:background .2s;
}
.nav-cta:hover{background:var(--ink);}
.burger{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.burger span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;}

/* ============ HERO ============ */
  .hero{
    position:relative;
    padding:100px 32px 120px;
    max-width:100%; margin:0 auto; /*max width 100 en vez de --max*/
    display:grid; grid-template-columns:1fr; gap:40px; 
    align-items:center;
    justify-items:center;text-align:center;
    
    background-image:
      linear-gradient(rgba(234, 240, 246, 0.6), rgba(234,240,246,1)),/*HARDCODEADO*/
      url('img/hero_background.jpg');
    background-size:cover;
    background-position:center;
}
.eyebrow{
  font-size:0.78rem; color:var(--sage-deep); text-transform:uppercase;
  letter-spacing:0.14em; margin-bottom:18px; display:block;
}
.hero h1{
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  /*max-width:11ch; todo en un renglon*/
  /*PLACEHOLDER*/
  margin:auto; 
}
.hero h1 em{font-style:italic; color:var(--sage-deep);}
.hero p.lead{
  margin-top:22px; font-size:1.08rem; color:var(--ink-soft); max-width:46ch;
  /*PLACEHOLDER*/
  margin:22px auto 0;
}
.hero-ctas{
  display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;
  /*PLACEHOLDER*/
  justify-content:center;
}
.btn-primary{
  background:var(--sage-deep); color:var(--white); padding:14px 28px;
  border-radius:var(--radius); text-decoration:none; font-size:0.94rem;
  transition:transform .2s, background .2s;
}
.btn-primary:hover{background:var(--ink); transform:translateY(-1px);}
.btn-ghost{
  border:1px solid var(--ink); color:var(--ink); padding:13px 26px;
  border-radius:var(--radius); text-decoration:none; font-size:0.94rem;
  transition:background .2s;
}
.btn-ghost:hover{background:var(--paper-dark);}

/* ring / signature motif */
.ring-wrap{
  display:flex; align-items:center; justify-content:center; position:relative;
}
.ring-wrap svg{width:100%; max-width:300px; height:auto;}
.ring-track{fill:none; stroke:var(--line); stroke-width:1;}
.ring-progress{
  fill:none; stroke:var(--sage-deep); stroke-width:1.4; stroke-linecap:round;
  transform-origin:center; transform:rotate(-90deg);
  animation:breathe 9s ease-in-out infinite;
}
.ring-label{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; fill:var(--ink-soft);
  letter-spacing:0.08em;
}
.ring-num{
  font-family:'Fraunces', serif; font-size:2.6rem; fill:var(--ink); font-weight:500;
}
@keyframes breathe{
  0%{stroke-dashoffset:660;}
  50%{stroke-dashoffset:60;}
  100%{stroke-dashoffset:660;}
}
@media (prefers-reduced-motion: reduce){
  .ring-progress{animation:none; stroke-dashoffset:360;}
}

/* ============ SECTION helpers ============ */
section{padding:96px 32px;}
/* reduzco en particular el espacio vacio entre modalidad y faq */
#modalidad{
  padding-bottom:64px;
}
#faq{
  padding-top:64px;
}

.section-head{
  max-width:640px;
  margin:0 auto 56px;
  text-align:center;
}

.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:clamp(1.7rem, 3vw, 2.3rem);}

/* ============ SOBRE MI ============ */
.sobre{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.sobre-grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start;
}
.portrait{
  aspect-ratio:4.24/5; border-radius:var(--radius);
  /* guarda con el aspect ratio raro*/
  background-image:url('img/sobre_mi.jpg');
  
  /*size + position = centrar foto en parte superior*/
  background-size:145% auto;
  background-position:center 71%;

  /*colores*/
  filter:brightness(1.3);
  
  position:relative; overflow:hidden;
}
.sobre-text blockquote{
  font-family:'Fraunces', serif; font-style:italic; font-size:1.3rem;
  color:var(--sage-deep); border-left:2px solid var(--sage-deep);
  padding-left:22px; margin:28px 0; line-height:1.5;
}
.credentials{list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:10px;}
.credentials li{
  display:flex; gap:12px; font-size:0.92rem; color:var(--ink-soft);
}
.credentials li::before{content:"—"; color:var(--ochre);}

/* ============ MODALIDAD (cards) ============ */
.cards{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; transition:transform .25s, box-shadow .25s;
}
.card:hover{transform:translateY(-4px); box-shadow:0 12px 28px -12px rgba(22,48,90,0.18);}
.card svg{width:30px; height:30px; stroke:var(--sage-deep); margin-bottom:20px;}
.card h3{font-size:1.08rem; margin-bottom:10px; font-weight:600;}
.card p{font-size:0.92rem; color:var(--ink-soft);}

/* inicio codigo FAQ =======================================================
   apertura/cierre se controla 100% con una clase CSS ".open"
   que agrega/saca un JavaScript
*/
.faq{max-width:760px; margin:0 auto;}

/* Cada pregunta es un <div class="faq-item"> que contiene:
   - un <button class="faq-question"> (el título clickeable)
   - un <div class="faq-answer"> (la respuesta, oculta por defecto) 
*/
.faq-item{
  border-bottom:1px solid var(--line);
}

.faq-question{
  width:100%;
  background:none;
  border:none;
  padding:20px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-family:inherit;
  font-size:1rem;
  font-weight:500;
  color:var(--ink);
  text-align:left;
  transition:color .2s, padding-left .2s;
}
.faq-question:hover{
  color:var(--sage-deep);
  padding-left:6px;
}

/* el ícono +/- es un <span> simple dentro del botón */
.faq-question .icon{
  width:20px; height:20px; position:relative; flex-shrink:0; margin-left:20px;
}
.faq-question .icon::before,
.faq-question .icon::after{
  content:""; position:absolute; background:var(--ink); border-radius:2px;
  transition:transform .25s, background .2s;
}
.faq-question .icon::before{width:100%; height:2px; top:9px; left:0;}
.faq-question .icon::after{width:2px; height:100%; left:9px; top:0;}
/* cuando el item tiene la clase .open, el "palito" vertical del + gira
   y desaparece, quedando solo el "-" */
.faq-item.open .icon::after{transform:rotate(90deg); opacity:0;}
.faq-item.open .icon::before{background:var(--sage-deep);}

/* la respuesta: colapsada con max-height:0, se expande con .open a un
   valor fijo (400px) que alcanza de sobra para estos textos.
   Esto es lo que hace que la animación sea siempre estable: no depende
   de calcular la altura real del contenido con JS. */
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease, padding .35s;
  font-size:0.92rem; color:var(--ink-soft); max-width:60ch; text-align:justify;
  padding:0;
}
.faq-item.open .faq-answer{
  max-height:400px;
  padding-top:0;
  padding-bottom:20px;
}
/*Fin codigo FAQ =======================================================*/

/* ============ CONTACTO ============ */
.contacto{background:var(--sage-deep); color:var(--white);}
.contacto .section-head h2{color:var(--white);}

.contacto h2{color:var(--white);} /*para el "Estoy para acompañarte."*/

.contacto .eyebrow{color:var(--paper-dark);}
.form-grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
}
.contacto-info p{color:rgba(250,251,252,0.75); max-width:38ch; margin-top:14px;}
.contacto-info .mono{display:block; margin-top:26px; font-size:0.85rem; opacity:0.85;}

form{display:flex; flex-direction:column; gap:16px;}
.field label{
  display:block; font-size:0.8rem; margin-bottom:6px; color:rgba(250,251,252,0.85);
  text-transform:uppercase; letter-spacing:0.06em;
}
.field input, .field select, .field textarea{
  width:100%; background:rgba(250,251,252,0.08); border:1px solid rgba(250,251,252,0.3);
  border-radius:var(--radius); padding:12px 14px; color:var(--white); font-family:inherit;
  font-size:0.94rem;
}
.field input::placeholder, .field textarea::placeholder{color:rgba(250,251,252,0.4);}
.field textarea{resize:vertical; min-height:110px;}
.field select option{color:var(--ink);}
.submit-btn{
  margin-top:6px; background:var(--ochre); color:var(--ink); border:none;
  padding:14px 26px; border-radius:var(--radius); font-size:0.94rem; font-weight:500;
  cursor:pointer; transition:background .2s; align-self:flex-start;
}
.submit-btn:hover{background:#c2872f;} /*HARDCODEADO*/
.form-note{font-size:0.8rem; margin-top:10px; opacity:0.85; display:none;}
.form-note.show{display:block;}

/* ============ FOOTER ============ */
footer{padding:56px 32px; border-top:1px solid var(--line);}
.footer-grid{
  max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:20px;
}
.footer-links{display:flex; gap:26px; list-style:none; font-size:0.86rem; color:var(--ink-soft);}
.footer-links a{text-decoration:none;}
.footer-links a:hover{color:var(--sage-deep);}
.copy{font-size:0.8rem; color:var(--ink-soft);}

/* ============ RESPONSIVE ============ */
@media (max-width:860px){
  .nav-links, .nav-cta{display:none;}
  .burger{display:block;}
  .hero{grid-template-columns:1fr; padding-top:60px;}
  .ring-wrap{order:-1; margin-bottom:10px;}
  .ring-wrap svg{max-width:220px;}
  .sobre-grid{grid-template-columns:1fr;}
  .portrait{max-width:280px;}
  .cards{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr; gap:36px;}
  section{padding:64px 20px;}
  .hero{padding:60px 20px 80px;}
}

.mobile-menu{
  display:none; flex-direction:column; gap:18px; padding:24px 32px 30px;
  border-top:1px solid var(--line); background:var(--paper);
}
.mobile-menu.open{display:flex;}
.mobile-menu a{text-decoration:none; font-size:0.98rem; color:var(--ink);}
.mobile-menu .nav-cta{display:inline-block; width:fit-content;}