/*
Theme Name: Sandra Jimenez
Theme URI: https://sandravjimenez.com
Author: Andres Jimenez
Description: Tema a la medida para sandravjimenez.com - MVP de bienes raices residenciales, Greater Los Angeles. Construido segun Brief v3.1, Paso 2 (Sistema Visual) y Paso 3 (Imagenes).
Version: 1.1
Text Domain: sandra-jimenez
*/

/* ==========================================================================
   1. TOKENS (Paso 2 - Sistema Visual)
   ========================================================================== */
:root{
  --navy:#17324D;
  --ivory:#F7F4EE;
  --stone:#D8D2C8;
  --warm-gray:#706C66;
  --charcoal:#23272B;
  --white:#FFFFFF;

  --font: 'Source Sans 3', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 12px;
  --radius-sm: 10px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --container-max: 1200px;
  --copy-max: 640px;

  --pad-h-desktop: 64px;
  --pad-h-tablet: 36px;
  --pad-h-mobile: 22px;

  --section-pad-desktop: 100px;
  --section-pad-mobile: 64px;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font);
  font-size:17px;
  line-height:1.6;
  color: var(--charcoal);
  background: var(--ivory);
}
img{ max-width:100%; display:block; height:auto; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color: var(--navy); text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:inherit; }
h1,h2,h3,p{ margin:0; }
[hidden]{ display:none !important; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* Foco visible para teclado en todo el sitio */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline: 2.5px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container{
  max-width: var(--container-max);
  margin:0 auto;
  padding-left: var(--pad-h-mobile);
  padding-right: var(--pad-h-mobile);
}
@media (min-width:768px){
  .container{ padding-left: var(--pad-h-tablet); padding-right: var(--pad-h-tablet); }
}
@media (min-width:1024px){
  .container{ padding-left: var(--pad-h-desktop); padding-right: var(--pad-h-desktop); }
}

.section{
  padding-top: var(--section-pad-mobile);
  padding-bottom: var(--section-pad-mobile);
}
@media (min-width:1024px){
  .section{ padding-top: var(--section-pad-desktop); padding-bottom: var(--section-pad-desktop); }
}
.section--white{ background: var(--white); }
.section--ivory{ background: var(--ivory); }
.section--navy{ background: var(--navy); color: var(--ivory); }

.copy{ max-width: var(--copy-max); }

/* ==========================================================================
   4. TIPOGRAFIA
   ========================================================================== */
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--warm-gray); margin-bottom: var(--space-2);
}
h1, .h1{
  font-family: var(--font); font-weight:700; color: var(--navy);
  font-size:38px; line-height:1.1; letter-spacing:-.01em; margin-bottom: var(--space-3);
}
@media (min-width:1024px){ h1,.h1{ font-size:56px; } }

h2, .h2{
  font-family: var(--font); font-weight:700; color: var(--navy);
  font-size:29px; line-height:1.15; letter-spacing:-.005em; margin-bottom: var(--space-3);
}
@media (min-width:1024px){ h2,.h2{ font-size:38px; } }

/* Acento editorial: una palabra en cursiva dentro de un titulo, sin
   agregar texto nuevo ni una segunda tipografia. Uso puntual, no en todos. */
h1 em, h2 em{
  font-style:italic; font-weight:600; color: var(--navy);
}

h3, .h3{
  font-family: var(--font); font-weight:600; color: var(--navy);
  font-size:21px; line-height:1.3; margin-bottom: var(--space-2);
}

p{ font-size:17px; line-height:1.6; }
@media (min-width:1024px){ p{ font-size:18px; } }

.lead{ font-size:18px; color: var(--charcoal); }
@media (min-width:1024px){ .lead{ font-size:19px; } }

.label-sm{ font-size:13px; font-weight:600; color: var(--warm-gray); }

/* ==========================================================================
   5. BOTONES Y LINKS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding: 0 26px;
  border-radius: var(--radius-sm);
  font-size:16px; font-weight:600; line-height:1.2;
  border:1.5px solid transparent; text-align:center;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
@media (min-width:1024px){ .btn{ font-size:17px; } }

.btn-primary{ background: var(--navy); color: var(--white); }
.btn-primary:hover{ opacity:.9; }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

.btn-secondary{ background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-secondary:hover{ background: rgba(23,50,77,.06); }

.btn-block{ width:100%; }

.link-text{
  color: var(--navy); font-weight:600; text-underline-offset:3px;
}
.link-text:hover, .link-text:focus{ text-decoration:underline; }

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.site-header{
  background: var(--ivory);
  padding: 20px 0;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-2);
}
.site-header__name{
  font-size:18px; font-weight:700; letter-spacing:.03em; color: var(--navy);
}
.site-header__right{ display:flex; align-items:center; gap: var(--space-3); }
.site-header__cta{
  font-weight:600; color: var(--navy); border-bottom:1.5px solid var(--navy);
  padding-bottom:2px;
}

/* ==========================================================================
   6b. TOGGLE DE IDIOMA (ES/EN) - ver assets/js/main.js
   ========================================================================== */
:root{ --lang: es; }
[data-lang="es"] .lang-en{ display:none; }
[data-lang="en"] .lang-es{ display:none; }
/* Antes de que el JS corra, muestra espanol por defecto para no parpadear */
html:not([data-lang]) .lang-en{ display:none; }

.lang-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:32px; padding:0 10px;
  border:1.5px solid var(--stone); border-radius:8px;
  background: var(--white); color: var(--navy);
  font-size:13px; font-weight:700; letter-spacing:.02em;
  cursor:pointer; transition: border-color .15s ease;
}
.lang-toggle:hover{ border-color: var(--navy); }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero{ background: var(--ivory); }
.hero .container{
  display:flex; flex-direction:column-reverse; gap: var(--space-5);
}
@media (min-width:1024px){
  .hero .container{
    flex-direction:row; align-items:center; gap: var(--space-6);
  }
}
.hero__copy{ flex:1 1 58%; }
.hero__media{
  flex:1 1 42%; position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  min-height:360px;
}
.hero__shape{
  position:absolute; width:60%; max-width:300px; aspect-ratio:1/1;
  border-radius:50%; background:var(--stone); opacity:.55;
  bottom:16px; right:14%;
}
.hero__cutout{
  position:relative; z-index:1;
  width:78%; max-width:420px; height:auto;
}
.hero__support{ margin-bottom: var(--space-4); color: var(--charcoal); }
.hero__actions{ display:flex; flex-direction:column; gap: var(--space-2); align-items:flex-start; }
@media (min-width:600px){ .hero__actions{ flex-direction:row; align-items:center; } }

/* ==========================================================================
   7b. FRANJA DE DATOS REALES
   ========================================================================== */
.info-strip{ background: var(--white); border-top:1px solid var(--stone); border-bottom:1px solid var(--stone); }
.info-strip__row{
  display:flex; flex-wrap:wrap; gap: var(--space-4);
  justify-content:space-between; padding: var(--space-3) 64px;
}
@media (max-width:1023px){ .info-strip__row{ padding: var(--space-3) var(--pad-h-mobile); } }
.info-strip__item{ display:flex; flex-direction:column; gap:4px; }
.info-strip__label{
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--warm-gray);
}
.info-strip__value{ font-size:16px; font-weight:600; color: var(--navy); }

/* ==========================================================================
   8. CAMINOS (lista editorial numerada)
   ========================================================================== */
.paths__intro{ text-align:left; margin-bottom: var(--space-5); }
.decision-list{ display:flex; flex-direction:column; }
.decision-row{
  display:flex; align-items:flex-start; gap: var(--space-4);
  width:100%; text-align:left; background:none; border:none; border-top:1px solid var(--stone);
  padding: var(--space-4) 0; cursor:pointer;
}
.decision-list .decision-row:last-child{ border-bottom:1px solid var(--stone); }
.decision-row__num{
  font-size:15px; font-weight:700; color: var(--stone); min-width:40px; padding-top:6px;
}
.decision-row__body{
  flex:1; display:flex; flex-direction:column; gap:8px; min-width:0;
}
.decision-row__title{ font-size:23px; font-weight:700; color: var(--navy); }
.decision-row__text{ font-size:16.5px; line-height:1.6; color: var(--charcoal); max-width:640px; }
.decision-row__action{
  display:flex; align-items:center; gap:8px; font-weight:600; color: var(--navy);
  white-space:nowrap; padding-top:6px;
}
.decision-row__action svg{ transition: transform .18s ease; }
.decision-row:hover .decision-row__action svg,
.decision-row:focus-visible .decision-row__action svg{ transform: translateX(4px); }
@media (max-width:767px){
  .decision-row{ flex-direction:column; gap: var(--space-2); }
  .decision-row__num{ padding-top:0; }
  .decision-row__title{ font-size:20px; }
  .decision-row__action{ padding-top:2px; white-space:normal; }
}

/* ==========================================================================
   9. FORMULARIO
   ========================================================================== */
.form-section{ background: var(--stone-, var(--ivory)); }
.form-card{
  background: var(--white);
  border:1px solid var(--stone);
  border-radius: var(--radius);
  padding: var(--space-4);
  max-width:720px;
}
@media (min-width:768px){ .form-card{ padding: var(--space-5); } }
.form-card__kicker{ color: var(--warm-gray); font-weight:600; margin-bottom:var(--space-1); }
.form-card__title{ margin-bottom: var(--space-3); }

.field{ margin-bottom: var(--space-3); }
.field label{
  display:block; font-weight:600; font-size:14px; color: var(--charcoal);
  margin-bottom:6px;
}
.field input[type=text], .field input[type=email], .field input[type=tel],
.field textarea, .field select{
  width:100%; border:1.5px solid var(--stone); border-radius: 10px;
  padding: 13px 14px; min-height:50px; background: var(--white); color:var(--charcoal);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--navy); outline:none;
}
.field.has-error input, .field.has-error textarea, .field.has-error select{
  border-color:#8A3324;
}
.field__error{
  display:none; color:#8A3324; font-size:13px; margin-top:6px;
}
.field.has-error .field__error{ display:block; }

.form-consent{ font-size:13px; color: var(--warm-gray); margin-top: var(--space-2); }
.form-alt{ font-size:14px; margin-top: var(--space-2); }

.form-status{
  display:none; padding: var(--space-3); border-radius: var(--radius-sm);
  margin-top: var(--space-3);
}
.form-status.is-visible{ display:block; }
.form-status--success{ background:#EAF1EC; color:#2F6B4F; }
.form-status--error{ background:#F5E9E5; color:#8A3324; }

.btn[data-loading="true"]{ opacity:.7; pointer-events:none; }

/* ==========================================================================
   10. PROOF OF USEFULNESS (dos columnas)
   ========================================================================== */
.proof-grid{ display:flex; gap: var(--space-6); flex-wrap:wrap; }
.proof-intro{ flex:1 1 320px; max-width:420px; display:flex; flex-direction:column; gap: var(--space-3); align-items:flex-start; }
.proof-intro__note{ color: var(--warm-gray); }
.proof-items{ flex:1 1 380px; display:flex; flex-direction:column; }
.proof-item{ display:flex; gap: var(--space-3); padding: var(--space-3) 0; border-top:1px solid var(--stone); }
.proof-item--last{ border-bottom:1px solid var(--stone); }
.proof-item__num{ font-weight:700; color: var(--navy); font-size:17px; min-width:28px; flex-shrink:0; }
.proof-item__text{ color: var(--charcoal); font-size:16.5px; line-height:1.55; min-width:0; flex:1; }

/* ==========================================================================
   11. TRUST / SANDRA
   ========================================================================== */
.trust .container{
  display:flex; flex-direction:column; gap: var(--space-5);
}
@media (min-width:1024px){
  .trust .container{ flex-direction:row; align-items:center; gap: var(--space-6); }
}
.trust__media{ flex:1 1 44%; }
.trust__media img{
  border-radius: var(--radius); border:1px solid var(--stone);
  width:100%; height:auto; display:block;
}
.trust__copy{ flex:1 1 56%; }
.trust__copy p{ margin-bottom: var(--space-2); }

/* ==========================================================================
   12. PROCESO 1-2-3
   ========================================================================== */
.steps{ display:flex; flex-direction:column; gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width:768px){ .steps{ flex-direction:row; } }
.step{ flex:1; }
.step__num{ font-size:34px; font-weight:700; color: var(--navy); margin-bottom: var(--space-1); }
.step__text{ color: var(--charcoal); }

/* ==========================================================================
   13. NEWSLETTER (diseñado, activacion condicional)
   ========================================================================== */
.newsletter{ background: var(--navy); color: var(--ivory); }
.newsletter .container{ text-align:left; max-width:640px; }
.newsletter h2{ color: var(--ivory); font-size:24px; }
.newsletter p{ color: var(--stone); }
.newsletter form{
  display:flex; flex-direction:column; gap: var(--space-2); margin-top: var(--space-3);
}
@media (min-width:600px){ .newsletter form{ flex-direction:row; } }
.newsletter input[type=email]{
  flex:1; min-height:48px; border-radius:10px; border:none; padding:0 14px;
}
.newsletter .btn-primary{ background: var(--ivory); color: var(--navy); }
.newsletter__note{ font-size:13px; color: var(--stone); margin-top: var(--space-2); }

/* ==========================================================================
   14. FINAL CTA
   ========================================================================== */
.final-cta{ text-align:left; }
.final-cta__actions{ display:flex; flex-direction:column; gap: var(--space-2); align-items:flex-start; margin-top: var(--space-3); }
@media (min-width:600px){ .final-cta__actions{ flex-direction:row; align-items:center; } }

/* ==========================================================================
   15. FOOTER / COMPLIANCE
   ========================================================================== */
.site-footer{
  background: var(--charcoal); color: var(--stone);
  padding: var(--space-5) 0;
  font-size:13px; line-height:1.7;
}
.site-footer a{ color: var(--stone); text-decoration:underline; }
.site-footer strong{ color: var(--white); }
.site-footer .container{
  display:flex; flex-direction:column-reverse; gap: var(--space-4);
}
@media (min-width:768px){
  .site-footer .container{
    flex-direction:row; justify-content:space-between; align-items:flex-start;
    gap: var(--space-5);
  }
  .site-footer__meta{ text-align:right; }
}
.site-footer__lockup{ margin-bottom: var(--space-2); font-weight:700; color:var(--white); font-size:17px; letter-spacing:.02em; }
.site-footer__links{ margin-top: var(--space-3); padding-top: var(--space-3); border-top:1px solid rgba(216,210,200,.2); }
@media (min-width:768px){ .site-footer__links{ border-top:none; padding-top:0; margin-top: var(--space-2); } }
.site-footer__links a{ margin-right: var(--space-3); }

/* ==========================================================================
   16. PAGINAS UTILITARIAS (/connect, /privacy)
   ========================================================================== */
.page-narrow{ max-width:720px; margin:0 auto; }
.connect-block{
  border-top:1px solid var(--stone); padding: var(--space-4) 0;
}
.connect-block:first-of-type{ border-top:none; }
.connect-block h3{ margin-bottom: var(--space-1); }
.connect-block p{ margin-bottom: var(--space-2); color: var(--charcoal); }

.privacy-content h2{ font-size:22px; margin-top: var(--space-4); }
.privacy-content p{ margin-bottom: var(--space-2); }
.privacy-content .updated{ color: var(--warm-gray); font-size:14px; margin-bottom: var(--space-4); }