/* ─────────────────────────────────────────────────────────────────────────────
 * 11-az-sobre-mi.css · el diseño propio de /sobre-mi/ · 27-sep-2026
 *
 * POR QUÉ ESTÁ AQUÍ Y NO EN LA PÁGINA
 *
 * Este CSS vivía dentro de un bloque <style> en el contenido, que es como se
 * construyó la página en su día dentro de un widget HTML de Elementor. Al
 * migrarla, ese contenido pasa a `post_content`… y ahí lo procesa `wpautop`,
 * que en CADA línea en blanco mete `</p><p>`. Había tres líneas en blanco: el
 * CSS se partía en cuatro trozos y solo parseaba el primero. Medido en vivo el
 * 27-sep: la página quedó sin su diseño hasta que se sacó el CSS de aquí.
 *
 * Elementor no pasaba por `wpautop`; `post_content` sí. Es la diferencia que
 * hay que tener presente al migrar cualquier página con <style> o <script>
 * dentro del contenido.
 *
 * Y UN CAMBIO OBLIGADO: el bloque declaraba sus variables en `:root`, lo que
 * en una hoja del tema se escapa a TODO el sitio. Entre ellas `--az-gold:
 * #bf8d3f`, que habría pisado el dorado de la marca (#C49B57) en cada página.
 * Ahora se declaran en `.az-sobre-mi`, así que solo valen dentro de la página.
 * ───────────────────────────────────────────────────────────────────────────── */

.az-sobre-mi{
  --az-cream:#f5f1ea;
  --az-cream-soft:#faf7f2;
  --az-dark:#1e1b16;
  --az-dark-mid:#2f2a22;
  --az-gold:#bf8d3f;
  --az-gold-light:#d2ad63;
  --az-green:#2f3a25;
  --az-olive:#4a5c3d;
  --az-text:#2c2820;
  --az-text-mid:#4a4236;
  --az-text-soft:#7a6f62;
  --az-white:#ffffff;
}
.az-sobre-mi{
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--az-text);
  background:var(--az-cream-soft);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.az-sm-inner{max-width:1120px;margin:0 auto;padding:0 2rem;}
.az-sm-section{padding:5rem 0;}
.az-sm-light{background:var(--az-cream-soft);}
.az-sm-cream{background:var(--az-cream);}
.az-sm-dark{background:var(--az-dark);}
.az-sm-olive{background:var(--az-green);}
.az-sm-cta{background:var(--az-dark-mid);}

.az-sm-retrato{
  display:block;
  width:clamp(120px,18vw,168px);
  height:clamp(120px,18vw,168px);
  margin:0 auto 1.9rem;
  border-radius:50%;
  object-fit:cover;
  object-position:center 18%;
  border:1px solid rgba(191,141,63,.45);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
}
.az-sm-hero{
  background:linear-gradient(135deg,#1e1b16 0%,#2f3a25 60%,#1e1b16 100%);
  padding:7rem 0 6rem;
  text-align:center;
}
.az-sm-eyebrow{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--az-gold-light);
  margin-bottom:1.25rem;
}
.az-sm-h1{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(2.8rem,6vw,4.5rem);
  font-weight:400;
  color:var(--az-white);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 1.5rem;
}
.az-sm-subtitle{
  font-size:clamp(1.05rem,2vw,1.28rem);
  color:rgba(255,255,255,.84);
  line-height:1.65;
  max-width:760px;
  margin:0 auto 1.4rem;
}
.az-sm-text{
  font-size:1rem;
  color:rgba(255,255,255,.7);
  line-height:1.78;
  max-width:760px;
  margin:0 auto 2.5rem;
}
.az-sm-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
  margin-bottom:2.5rem;
}
.az-sm-badge{
  display:inline-block;
  padding:.45rem 1.1rem;
  background:rgba(191,141,63,.18);
  border:1px solid rgba(191,141,63,.4);
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  color:var(--az-gold-light);
  letter-spacing:.04em;
}
.az-sm-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
}
/* Texto en tinta de marca, no en blanco (2-oct-2026). Medido sobre el degradado: blanco da 2,1:1 en el claro
   y 3,0:1 en el centro, donde cae el texto (AA pide 4,5); #1E2419 da 7,5:1 y 5,4:1.
   Hasta hoy lo corregía después el Code Snippet #459 («Contraste WCAG en los CTA dorados») con color y
   -webkit-text-fill-color; el color correcto vive ahora aquí, en su sitio. */
.az-sm-btn-primary{
  display:inline-flex;
  align-items:center;
  padding:1rem 2rem;
  background:linear-gradient(135deg,#d2ad63 0%,#bf8d3f 50%,#a8742c 100%);
  color:#1E2419!important;
  text-decoration:none;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.03em;
  box-shadow:0 10px 28px rgba(168,116,44,.3);
  transition:all .28s ease;
}
/* El segundo botón (franja final .az-sm-cta) cae dentro de .az-dark-auto, y 02-az-base.css trae
   `.az-dark-auto a{color:var(--az-gold-claro)!important}` (0,1,1), que gana a `.az-sm-btn-primary` (0,1,0) y lo
   pintaba crema sobre dorado. Con el contenedor delante (0,2,0) la tinta gana en los dos botones, sin depender del
   orden de carga de las hojas. Medido el 2-oct en Chrome: los dos botones en rgb(30,36,25), en reposo y al pasar. */
.az-sm-ctas .az-sm-btn-primary{
  color:#1E2419!important;
}
.az-sm-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(168,116,44,.4);
}
.az-sm-btn-secondary{
  display:inline-flex;
  align-items:center;
  padding:1rem 2rem;
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.92)!important;
  text-decoration:none;
  border-radius:999px;
  font-weight:600;
  font-size:.9rem;
  border:1.5px solid rgba(255,255,255,.25);
  transition:all .28s ease;
}
.az-sm-btn-secondary:hover{
  background:rgba(255,255,255,.18);
  transform:translateY(-2px);
}
.az-sm-btn-outline-light{
  display:inline-flex;
  align-items:center;
  padding:1rem 2rem;
  background:transparent;
  color:rgba(255,255,255,.88)!important;
  text-decoration:none;
  border-radius:999px;
  font-weight:600;
  font-size:.9rem;
  border:1.5px solid rgba(255,255,255,.3);
  transition:all .28s ease;
}
.az-sm-btn-outline-light:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-2px);
}

.az-sm-h2{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.7rem,3vw,2.45rem);
  font-weight:400;
  color:var(--az-dark);
  line-height:1.24;
  letter-spacing:-.01em;
  margin:0 0 2rem;
}
.az-sm-h2-light{color:var(--az-white);}
.az-sm-h3{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.16rem;
  font-weight:400;
  color:var(--az-dark);
  margin:2rem 0 1rem;
}
.az-sm-p{
  font-size:1rem;
  color:var(--az-text-mid);
  line-height:1.82;
  margin-bottom:1.35rem;
  max-width:820px;
}
.az-sm-p-light{color:rgba(255,255,255,.73);}
.az-sm-p-soft{color:var(--az-text-soft);}
.az-sm-grid-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
  margin-top:2.2rem;
}
.az-sm-grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:1.25rem;
  margin-top:1.5rem;
}
.az-sm-card-dark{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:1rem;
  padding:1.75rem;
}
.az-sm-card-title-light{
  font-family:Georgia,serif;
  font-size:1.05rem;
  font-weight:400;
  color:var(--az-gold-light);
  margin:0 0 .75rem;
}
.az-sm-card-text-light{
  font-size:.93rem;
  color:rgba(255,255,255,.66);
  line-height:1.72;
  margin:0;
}
.az-sm-card-light{
  background:var(--az-white);
  border:1px solid rgba(61,55,48,.08);
  border-radius:1rem;
  padding:1.75rem;
  box-shadow:0 4px 16px rgba(30,27,20,.06);
}
.az-sm-card-title{
  font-family:Georgia,serif;
  font-size:1rem;
  font-weight:400;
  color:var(--az-dark);
  margin:0 0 .75rem;
  border-bottom:1.5px solid rgba(191,141,63,.25);
  padding-bottom:.5rem;
}
.az-sm-card-text{
  font-size:.92rem;
  color:var(--az-text-mid);
  line-height:1.72;
  margin:0;
}
.az-sm-list{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  list-style:none;
  padding:0;
  margin:1rem 0 0;
}
.az-sm-list li{
  background:var(--az-cream);
  border:1px solid rgba(191,141,63,.2);
  border-radius:999px;
  padding:.38rem 1rem;
  font-size:.85rem;
  color:var(--az-text-mid);
}
.az-sm-proceso-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
  margin:2rem 0;
}
.az-sm-proceso-item{
  background:var(--az-white);
  border:1px solid rgba(61,55,48,.08);
  border-left:4px solid var(--az-gold);
  border-radius:.75rem;
  padding:1.25rem 1.5rem;
  font-size:.95rem;
  color:var(--az-text);
  font-weight:500;
  line-height:1.5;
  box-shadow:0 2px 8px rgba(30,27,20,.05);
}
.az-sm-cta-inner{text-align:center;}

@media(max-width:640px){
  .az-sm-hero{padding:5rem 0 4rem;}
  .az-sm-section{padding:3.5rem 0;}
  .az-sm-inner{padding:0 1.25rem;}
  .az-sm-grid-2,.az-sm-grid-3,.az-sm-proceso-grid{grid-template-columns:1fr;}
  .az-sm-p{max-width:100%;}
}

/* 3-oct-2026 · CONTRASTE DEL HERO (Javier: «los textos, el contraste no están bien»). Los colores claros de arriba los
 * pisaban las reglas de texto de 02-az-base.css con !important: salían marrón y tinta sobre el verde (≈1,5:1). */
html body .az-sm-hero .az-sm-eyebrow { color: #D8B776 !important; }
html body .az-sm-hero h1.az-sm-h1 { color: #F5EFE7 !important; font-family: var(--azs-display, 'Newsreader', Georgia, serif) !important; }
html body .az-sm-hero p.az-sm-subtitle { color: rgba(245, 239, 231, .9) !important; }
html body .az-sm-hero p.az-sm-text { color: rgba(245, 239, 231, .8) !important; }
html body .az-sm-hero .az-sm-badge { color: #D8B776 !important; }