/* =========================================================
   LEGACY House Premium Static Website
   styles.css — versión limpia y corregida
========================================================= */

:root{
  --cream:#F7F1E8;
  --ivory:#FBF8F2;
  --gold:#B8962E;
  --dark:#2B2118;
  --gray:#6F665C;
  --soft:#E8DED0;
  --white:#fffdf8;

  --kids-cream:#FBF6EC;
  --kids-gold:#C9923E;
  --kids-coral:#C98562;
  --kids-blue:#8EAFA9;
  --kids-sage:#9CAF88;
  --kids-soft:#E8DED0;

  --studio-black:#171717;
  --studio-charcoal:#2D2D2D;
  --studio-cream:#F5EFE5;

  --serif:'Cinzel','Trajan Pro','Cormorant Garamond','Marcellus',serif;
  --sans:'Raleway','Montserrat','Inter',Arial,sans-serif;

  --shadow:0 18px 50px rgba(43,33,24,.09);
  --radius:24px;
  --max:1180px;
}

/* =========================================================
   BASE
========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--sans);
  background:var(--ivory);
  color:var(--dark);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

p{
  margin:0 0 1.15rem;
}

.page{
  overflow:hidden;
}

.container{
  width:min(var(--max),calc(100% - 40px));
  margin:0 auto;
}

.section{
  padding:96px 0;
}

.section.tight{
  padding:68px 0;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.eyebrow{
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.76rem;
  color:var(--gold);
  font-weight:600;
  margin-bottom:14px;
}

.title{
  font-family:var(--serif);
  font-size:clamp(2.25rem,5vw,5.2rem);
  line-height:1.02;
  font-weight:400;
  letter-spacing:.015em;
  margin:0 0 24px;
  text-transform:none;
}

.section-title{
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,4rem);
  line-height:1.08;
  font-weight:400;
  letter-spacing:.012em;
  margin:0 0 18px;
}

.lead{
  font-size:clamp(1.02rem,1.7vw,1.24rem);
  color:var(--gray);
  max-width:760px;
}

.muted{
  color:var(--gray);
}

.gold{
  color:var(--gold);
}

/* =========================================================
   HEADER / NAV
========================================================= */

.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(251,248,242,.9);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(184,150,46,.16);
}

.nav{
  height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:320px;
}

.brand-tree{
  width:58px;
  height:58px;
  object-fit:contain;
  flex:0 0 auto;
}

.brand-word{
  height:40px;
  max-width:270px;
  width:auto;
  object-fit:contain;
}

.brand-text{
  font-family:var(--serif);
  font-size:1.18rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:400;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:26px;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#51463b;
}

.nav-links a{
  position:relative;
}

.nav-links a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;
  height:1px;
  width:0;
  background:var(--gold);
  transition:.25s;
}

.nav-links a:hover:after,
.nav-links a.active:after{
  width:100%;
}

.nav-cta{
  border:1px solid rgba(184,150,46,.42);
  padding:10px 16px;
  border-radius:999px;
  color:var(--gold);
}

.menu-btn{
  display:none;
  background:none;
  border:0;
  color:var(--dark);
  font-size:1.6rem;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:999px;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:600;
  border:1px solid var(--gold);
  transition:.25s;
  cursor:pointer;
}

.btn.primary{
  background:var(--gold);
  color:#fff;
}

.btn.secondary{
  color:var(--gold);
  background:transparent;
}

.btn.dark{
  background:var(--dark);
  color:#fff;
  border-color:var(--dark);
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(43,33,24,.13);
}

.btn-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:30px;
}

.icon-btn img{
  width:20px;
  height:20px;
  display:inline-block;
}

.whatsapp-btn{
  border-color:#25D366;
  color:#1f6f43;
  background:rgba(37,211,102,.08);
}

.whatsapp-btn:hover{
  background:#25D366;
  color:#fff;
  border-color:#25D366;
}

.whatsapp-btn:hover img{
  filter:brightness(0) invert(1);
}

/* =========================================================
   HERO
========================================================= */

.hero{
  min-height:calc(100vh - 96px);
  display:grid;
  align-items:center;
  padding:76px 0;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:52px;
  align-items:center;
}

.hero-logo-lockup{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:32px;
}

.hero-logo-lockup .brand-tree{
  width:82px;
  height:82px;
}

.hero-logo-lockup .brand-word{
  height:58px;
}

.hero-media,
.image-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:linear-gradient(135deg,#e7dac8,#fbf8f2);
}

.hero-media{
  min-height:540px;
}

.hero-media img,
.image-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px;
  color:rgba(43,33,24,.45);
  font-size:.86rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:linear-gradient(135deg,rgba(184,150,46,.13),rgba(255,255,255,.45));
}

.hero-media:after,
.image-card:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(43,33,24,0),rgba(43,33,24,.12));
  pointer-events:none;
}

/* =========================================================
   LAYOUT BLOCKS
========================================================= */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:58px;
  align-items:center;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:42px;
}

.card{
  background:rgba(255,253,248,.84);
  border:1px solid rgba(184,150,46,.18);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 14px 40px rgba(43,33,24,.06);
  transition:.25s;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.card-body{
  padding:28px;
}

.card h3{
  font-family:var(--serif);
  font-size:1.48rem;
  line-height:1.18;
  margin:0 0 12px;
  font-weight:400;
  letter-spacing:.04em;
}

.card p{
  color:var(--gray);
  font-size:.96rem;
}

.card-img{
  height:235px;
  position:relative;
  overflow:hidden;
  background:#eadfce;
}

.mini-link{
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--gold);
  font-weight:600;
  margin-top:10px;
  display:inline-block;
}

/* =========================================================
   TIMELINE / PROCESS
========================================================= */

.timeline{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  margin-top:42px;
}

.step{
  padding:28px 22px;
  border-top:1px solid var(--gold);
  background:rgba(255,253,248,.6);
  border-radius:0 0 18px 18px;
}

.num{
  font-family:var(--serif);
  font-size:2.4rem;
  color:var(--gold);
  line-height:1;
}

.step h3,
.feature h3{
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin:14px 0 10px;
}

.step p,
.feature p{
  font-size:.92rem;
  color:var(--gray);
}

/* =========================================================
   METHOD BAND
========================================================= */

.method-band{
  background:var(--dark);
  color:var(--ivory);
  padding:96px 0;
  position:relative;
}

.method-band:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 70% 20%,rgba(184,150,46,.18),transparent 32%);
  pointer-events:none;
}

.method-band .lead,
.method-band .muted{
  color:#d7cabb;
}

.method-points{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:42px;
}

.method-point{
  border:1px solid rgba(184,150,46,.28);
  background:rgba(255,253,248,.06);
  border-radius:20px;
  padding:24px;
}

.method-point h3{
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  margin:0 0 10px;
  color:var(--gold);
}

.method-point p{
  font-size:.94rem;
  color:#d7cabb;
  margin:0;
}

.method-note{
  margin-top:28px;
  color:#d7cabb;
  font-size:1rem;
  max-width:920px;
}

/* =========================================================
   FEATURES / CTA / PACKAGES
========================================================= */

.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:36px;
}

.feature{
  padding:28px;
  border:1px solid rgba(184,150,46,.2);
  border-radius:20px;
  background:rgba(255,253,248,.62);
}

.cta-panel{
  background:linear-gradient(135deg,rgba(184,150,46,.13),rgba(255,253,248,.96));
  border:1px solid rgba(184,150,46,.2);
  border-radius:32px;
  padding:54px;
  box-shadow:var(--shadow);
}

.internal-hero{
  padding:92px 0 70px;
  background:linear-gradient(180deg,var(--cream),var(--ivory));
}

.internal-hero .hero-media{
  min-height:440px;
}

.packages{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:42px;
}

.package{
  padding:32px;
  border-radius:24px;
  background:rgba(255,253,248,.78);
  border:1px solid rgba(184,150,46,.2);
  box-shadow:0 12px 34px rgba(43,33,24,.05);
}

.package h3{
  font-family:var(--serif);
  font-size:1.72rem;
  line-height:1.15;
  margin:0 0 8px;
  font-weight:400;
  letter-spacing:.04em;
}

.package .duration{
  color:var(--gold);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.82rem;
}

.package strong{
  color:var(--dark);
}

/* =========================================================
   SOCIALS
========================================================= */

.socials{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

.socials a{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(184,150,46,.35);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
  background:rgba(255,253,248,.42);
}

.socials a:hover{
  background:var(--gold);
  transform:translateY(-2px);
}

.socials img{
  width:20px;
  height:20px;
  object-fit:contain;
  filter:none;
}

.socials a:hover img{
  filter:brightness(0) invert(1);
}

.social-section-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:36px;
}

.social-card{
  padding:28px;
  border:1px solid rgba(184,150,46,.2);
  border-radius:22px;
  background:rgba(255,253,248,.72);
  box-shadow:0 12px 34px rgba(43,33,24,.05);
}

.social-card h3{
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:400;
  margin:0 0 10px;
  letter-spacing:.04em;
}

/* =========================================================
   THEMES
========================================================= */

.kids-theme{
  background:var(--kids-cream);
}

.kids-theme .eyebrow,
.kids-theme .gold,
.kids-theme .mini-link,
.kids-theme .duration{
  color:var(--kids-sage);
}

.kids-theme .btn.primary{
  background:var(--kids-sage);
  border-color:var(--kids-sage);
  color:#fff;
}

.kids-theme .btn.secondary,
.kids-theme .btn{
  border-color:var(--kids-sage);
  color:var(--kids-sage);
}

.kids-theme .card,
.kids-theme .feature,
.kids-theme .package{
  border-color:rgba(156,175,136,.28);
}

.kids-theme .cta-panel{
  background:linear-gradient(135deg,rgba(156,175,136,.16),rgba(255,247,236,.96));
  border-color:rgba(156,175,136,.25);
}

.kids-theme .method-point h3{
  color:#D6B06A;
}

.studio-theme{
  background:var(--studio-cream);
}

.studio-dark{
  background:var(--studio-black);
  color:var(--studio-ivory);
}

.studio-dark .title,
.studio-dark .section-title{
  color:#fff;
}

.studio-dark .lead,
.studio-dark .muted{
  color:#d2c7b8;
}

.studio-dark .btn.secondary{
  color:#fff;
  border-color:rgba(255,255,255,.55);
}

.studio-dark .method-point h3{
  color:var(--studio-gold);
}

/* =========================================================
   CONTACT
========================================================= */

.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:42px;
  align-items:start;
}

.form{
  background:#fffdf8;
  border:1px solid rgba(184,150,46,.2);
  border-radius:28px;
  padding:34px;
  box-shadow:var(--shadow);
}

.field{
  display:grid;
  gap:8px;
  margin-bottom:18px;
}

.field label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gray);
  font-weight:600;
}

.field input,
.field select,
.field textarea{
  width:100%;
  border:1px solid rgba(43,33,24,.16);
  border-radius:14px;
  padding:14px 16px;
  background:#fff;
  color:var(--dark);
  font:inherit;
}

.field textarea{
  min-height:140px;
  resize:vertical;
}

/* =========================================================
   FOOTER
========================================================= */

.footer{
  padding:54px 0;
  background:#1b1510;
  color:#f6efe4;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr .7fr;
  gap:28px;
}

.footer a,
.footer p{
  color:#cfc3b4;
}

.footer h4{
  color:#fff;
  margin:0 0 12px;
}

.footer-logo{
  display:flex;
  align-items:center;
  margin-bottom:20px;
}

.footer-logo img{
  width:min(280px,80vw);
  height:auto;
  object-fit:contain;
}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
}

.reveal.visible{
  opacity:1;
  transform:none;
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media(max-width:980px){

  .nav-links{
    position:fixed;
    top:96px;
    right:0;
    left:0;
    background:rgba(251,248,242,.98);
    padding:24px;
    display:none;
    flex-direction:column;
    border-bottom:1px solid rgba(184,150,46,.18);
  }

  .nav-links.open{
    display:flex;
  }

  .menu-btn{
    display:block;
  }

  .hero-grid,
  .split,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .hero{
    min-height:auto;
    padding:54px 0;
  }

  .hero-media,
  .internal-hero .hero-media{
    min-height:340px;
  }

  .cards,
  .features{
    grid-template-columns:1fr 1fr;
  }

  .timeline{
    grid-template-columns:1fr;
  }

  .method-points{
    grid-template-columns:1fr 1fr;
  }

  .packages{
    grid-template-columns:1fr;
  }

  .section{
    padding:72px 0;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .brand{
    min-width:auto;
    gap:12px;
  }

  .brand-tree{
    width:48px;
    height:48px;
  }

  .brand-word{
    height:32px;
    max-width:210px;
  }

  .cta-panel{
    padding:34px;
  }

  .social-section-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media(max-width:620px){

  body{
    font-size:15px;
  }

  .container{
    width:min(100% - 28px,var(--max));
  }

  .nav{
    height:76px;
  }

  .nav-links{
    top:76px;
  }

  .brand{
    min-width:0;
    gap:10px;
  }

  .brand-tree{
    width:42px;
    height:42px;
  }

  .brand-word{
    height:28px;
    max-width:170px;
  }

  .hero-logo-lockup .brand-tree{
    width:48px;
    height:48px;
  }

  .hero-logo-lockup .brand-word{
    height:30px;
  }

  .cards,
  .features,
  .method-points{
    grid-template-columns:1fr;
  }

  .card-img{
    height:210px;
  }

  .title{
    font-size:clamp(2rem,8vw,3rem);
    line-height:1.08;
    letter-spacing:0.01em;
  }

  .section-title{
    font-size:clamp(2rem,8vw,3rem);
    line-height:1.1;
  }

  .btn{
    width:100%;
    padding:14px 18px;
  }

  .btn-row{
    width:100%;
  }

  .packages .package{
    padding:26px;
  }

  .footer{
    padding-bottom:90px;
  }

  .footer-logo img{
    width:min(240px,86vw);
  }

  .hero-media{
    min-height:300px;
  }

  .section{
    padding:60px 0;
  }
}

/* =========================================================
   FIX ESPECÍFICO — HERO LEGACY KIDS EN MOBILE
========================================================= */

@media(max-width:768px){

  .kids-theme .internal-hero{
    padding-top:88px !important;
    padding-bottom:44px !important;
    min-height:auto !important;
    overflow:visible !important;
  }

  .kids-theme .internal-hero .hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
    align-items:start !important;
  }

  .kids-theme .internal-hero .title{
    font-size:32px !important;
    line-height:1.1 !important;
    letter-spacing:0.01em !important;
    margin-bottom:20px !important;
    max-width:100% !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .kids-theme .internal-hero .lead{
    font-size:16px !important;
    line-height:1.65 !important;
    max-width:100% !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .kids-theme .internal-hero .btn-row{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    width:100% !important;
  }

  .kids-theme .internal-hero .btn{
    width:100% !important;
    text-align:center !important;
  }

  .kids-theme .internal-hero .hero-media{
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }

  .kids-theme .internal-hero .hero-media img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block !important;
  }

  .kids-theme .internal-hero .hero-media .placeholder{
    display:none !important;
  }
}

/* =========================================================
   FIX EXTRA — CELULARES MUY ANGOSTOS
========================================================= */

@media(max-width:390px){

  .kids-theme .internal-hero .title{
    font-size:29px !important;
    line-height:1.12 !important;
  }

  .kids-theme .internal-hero .lead{
    font-size:15.5px !important;
  }

  .brand-word{
    max-width:145px;
  }
}/* =========================================================
   HOME — MÉTODO SIMPLIFICADO PREMIUM
========================================================= */

.method-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}

.method-list-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid rgba(184,150,46,.34);
}

.method-list-item span {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--gold);
  opacity: .9;
  min-width: 42px;
}

.method-list-item h3 {
  margin: 0;
  font-size: .9rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--ivory);
  font-weight: 500;
}

@media(max-width:980px) {
  .method-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:620px) {
  .method-list {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 34px;
  }

  .method-list-item {
    padding: 16px 0;
    gap: 14px;
  }

  .method-list-item span {
    font-size: 1.35rem;
    min-width: 36px;
  }

  .method-list-item h3 {
    font-size: .82rem;
    letter-spacing: .11em;
  }
}