/* DJL Real Estate: estilos de las páginas internas (servicios, presentadores, cotizar, clases).
   Es la misma casa de la portada (arena, bosque y latón; Cormorant Garamond + Manrope). Solo lo usa esta marca. */
:root{
  --arena:#f3ede3; --arena2:#e9e1d3; --blanco:#fbf8f3; --bosque:#1f3b32; --bosque2:#2d5245; --tinta:#1a2420; --muted:#5d6a64; --dim:#8a948f;
  --laton:#a8834e; --laton2:#c9a56c; --linea:rgba(31,59,50,.14); --linea2:rgba(31,59,50,.28);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(16px,4vw,48px); --max:1200px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--arena); color:var(--tinta); font:400 16px/1.7 var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased}
img,video,svg{display:block; max-width:100%}
a{color:inherit}
::selection{background:var(--bosque); color:var(--arena)}
:focus-visible{outline:2px solid var(--laton); outline-offset:3px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
section[id]{scroll-margin-top:90px}

/* nav */
.nav{position:fixed; inset:0 0 auto; z-index:50; transition:background .35s, border-color .35s; border-bottom:1px solid transparent}
.nav.solida{background:rgba(243,237,227,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-color:var(--linea)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:78px}
.logo{display:inline-flex; align-items:center; gap:12px; text-decoration:none; white-space:nowrap}
.logo .mono{width:44px; height:44px; border-radius:50%; background:var(--bosque); color:var(--arena); display:grid; place-items:center; box-shadow:0 0 0 3px var(--arena),0 0 0 4px var(--laton)}
.logo .mono svg{width:22px; height:22px}
.logo .txt{display:grid; line-height:1}
.logo .txt b{font:600 21px/1 var(--serif); letter-spacing:.01em}
.logo .txt small{font:600 10px/1 var(--sans); letter-spacing:.32em; text-transform:uppercase; color:var(--laton); margin-top:5px}
.links{display:flex; gap:26px; font:500 14px/1 var(--sans); color:var(--muted)}
.links a{text-decoration:none; transition:color .2s}
.links a:hover,.links a[aria-current]{color:var(--bosque)}
.links a[aria-current]{text-decoration:underline; text-decoration-color:var(--laton); text-underline-offset:6px}
@media (max-width:960px){ .links{display:none} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:600 14.5px/1 var(--sans); letter-spacing:.02em; text-decoration:none; border-radius:4px; padding:17px 26px; cursor:pointer; border:1px solid transparent; transition:background .25s, color .25s, border-color .25s, box-shadow .25s; white-space:nowrap}
.btn svg{width:16px; height:16px; flex:none}
.btn-bosque{background:var(--bosque); color:var(--arena)}
.btn-bosque:hover{background:var(--bosque2); box-shadow:0 14px 30px -14px rgba(31,59,50,.6)}
.btn-linea{border-color:var(--bosque); color:var(--bosque); background:transparent}
.btn-linea:hover{background:var(--bosque); color:var(--arena)}
.btn-laton{background:var(--laton2); color:var(--tinta)}
.btn-laton:hover{background:#d8b77f}
.nav .btn{padding:12px 18px; font-size:13.5px}
@media (max-width:420px){ .nav .btn{display:none} }

/* cabecera de página interna */
.portada{padding:clamp(130px,15vw,170px) 0 clamp(50px,7vw,80px); border-bottom:1px solid var(--linea2); position:relative; overflow:hidden}
.portada::after{content:""; position:absolute; right:-120px; bottom:-1px; width:min(520px,70vw); height:min(300px,40vw); border-radius:999px 999px 0 0; border:1px solid var(--linea2); border-bottom:0; pointer-events:none}
.sobre{font:600 12px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--laton); display:flex; align-items:center; gap:14px}
.sobre::before{content:""; width:36px; height:1px; background:currentColor}
h1{font:500 clamp(46px,6.4vw,88px)/.98 var(--serif); letter-spacing:-.015em; margin:26px 0 24px; color:var(--bosque); max-width:15ch}
h1 em{font-style:italic; color:var(--laton)}
.portada p.sub{font-size:clamp(16.5px,1.4vw,18.5px); color:var(--muted); max-width:600px; margin:0 0 34px}
.ctas{display:flex; flex-wrap:wrap; gap:12px}

/* secciones */
section.sec{padding:clamp(80px,11vw,130px) 0}
h2{font:500 clamp(36px,4.6vw,62px)/1.02 var(--serif); letter-spacing:-.01em; margin:22px 0 0; color:var(--bosque); max-width:18ch}
h2 em{font-style:italic; color:var(--laton)}
.lead{color:var(--muted); font-size:clamp(16px,1.3vw,18px); margin:0; max-width:520px}
.cabeza{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:end; margin-bottom:clamp(40px,6vw,64px)}
@media (max-width:900px){ .cabeza{grid-template-columns:1fr} }
.blanco{background:var(--blanco)}

/* lista numerada de servicios */
.servicios{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(30px,5vw,70px)}
.servicios li{display:grid; grid-template-columns:56px 1fr; gap:14px; padding:28px 0; border-top:1px solid var(--linea2)}
.servicios .rn{font:italic 500 26px/1 var(--serif); color:var(--laton)}
.servicios h3{margin:0 0 8px; font:600 26px/1.15 var(--serif); color:var(--bosque)}
.servicios p{margin:0; color:var(--muted); font-size:15.5px}
.servicios .chips{margin-top:12px}
@media (max-width:760px){ .servicios{grid-template-columns:1fr} }

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips span{font-size:12.5px; padding:6px 12px; border:1px solid var(--linea2); border-radius:999px; background:var(--arena); color:var(--tinta)}

/* tarjetas con arco */
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(18px,2.4vw,28px)}
.tarjeta{background:var(--blanco); border:1px solid var(--linea2); border-radius:6px; overflow:hidden; display:flex; flex-direction:column}
.tarjeta .cielo{aspect-ratio:16/10; background:linear-gradient(180deg,#e3b98d,#f1d9b8 55%,var(--arena)); display:grid; place-items:end center; position:relative}
.tarjeta .cielo svg{width:62%; height:auto; color:var(--bosque)}
.tarjeta .cielo .et{position:absolute; top:14px; left:14px; font:600 10px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; background:var(--blanco); color:var(--laton); padding:7px 10px; border-radius:999px}
.tarjeta .cuerpo{padding:24px 24px 28px; display:grid; gap:10px; flex:1; align-content:start}
.tarjeta h3{margin:0; font:600 28px/1.1 var(--serif); color:var(--bosque)}
.tarjeta p{margin:0; color:var(--muted); font-size:15.5px}
.tarjeta ul{margin:6px 0 0; padding:0; list-style:none; display:grid; gap:6px; font-size:14.5px}
.tarjeta ul li{padding-left:22px; position:relative}
.tarjeta ul li::before{content:""; position:absolute; left:0; top:.72em; width:12px; height:1px; background:var(--laton)}
.tarjeta .pie{margin-top:auto; padding-top:14px}
.tarjeta .pie a{font-weight:600; font-size:14.5px; color:var(--bosque); text-decoration-color:var(--laton); text-underline-offset:5px}

/* proceso */
.pasos{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,36px); position:relative}
.pasos::before{content:""; position:absolute; left:0; right:0; top:22px; height:1px; background:var(--linea2)}
.paso{position:relative}
.paso .c{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--arena); border:1px solid var(--laton); color:var(--laton); font:italic 600 20px/1 var(--serif); margin-bottom:22px; font-variant-numeric:lining-nums}
.blanco .paso .c{background:var(--blanco)}
.paso h3{margin:0 0 8px; font:600 24px/1.15 var(--serif); color:var(--bosque)}
.paso p{margin:0; color:var(--muted); font-size:15px}
@media (max-width:900px){ .pasos{grid-template-columns:1fr 1fr; row-gap:36px} .pasos::before{display:none} }
@media (max-width:520px){ .pasos{grid-template-columns:1fr} }

/* banda verde */
.banda{background:var(--bosque); color:var(--arena); position:relative; overflow:hidden}
.banda::after{content:""; position:absolute; left:50%; bottom:-1px; width:min(1100px,140vw); height:min(520px,66vw); translate:-50% 0; border-radius:999px 999px 0 0; border:1px solid rgba(201,165,108,.22); border-bottom:0; pointer-events:none}
.banda .wrap{position:relative; z-index:1}
.banda h2{color:var(--arena)} .banda h2 em{color:var(--laton2)}
.banda .sobre{color:var(--laton2)} .banda .lead{color:#c9d3cd}
.banda .doble{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,6vw,80px); align-items:center}
.lista-clara{list-style:none; margin:0; padding:0}
.lista-clara li{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid rgba(243,237,227,.18); font-size:15.5px; color:#dfe6e1}
.lista-clara li::before{content:"✓"; color:var(--laton2); font-weight:700}
@media (max-width:900px){ .banda .doble{grid-template-columns:1fr} }

/* formulario */
.contacto .wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,6vw,80px); align-items:start}
@media (max-width:900px){ .contacto .wrap{grid-template-columns:1fr} }
.datos-c{margin-top:30px; display:grid; gap:4px; font-size:15px; color:var(--muted)}
.datos-c b{color:var(--bosque); font-weight:600}
form.f{position:relative; background:var(--blanco); border:1px solid var(--linea2); border-radius:6px; padding:clamp(22px,3.4vw,40px); box-shadow:0 40px 80px -50px rgba(31,59,50,.5)}
form.f::before{content:""; position:absolute; inset:8px; border:1px solid var(--linea); border-radius:3px; pointer-events:none}
.campos{display:grid; gap:18px; position:relative}
.fila{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.campo{display:flex; flex-direction:column; gap:8px; font:600 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--laton)}
.campo em{font-style:normal; text-transform:none; letter-spacing:0; color:var(--dim); font-weight:500}
.campo input,.campo select,.campo textarea{width:100%; font:400 16px/1.4 var(--sans); letter-spacing:0; text-transform:none; color:var(--tinta); background:var(--arena); border:1px solid var(--linea2); border-radius:4px; padding:13px 14px}
.campo textarea{min-height:110px; resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none; border-color:var(--bosque); background:#fff; box-shadow:0 0 0 3px rgba(31,59,50,.12)}
.campo ::placeholder{color:var(--dim)}
.req{color:var(--bosque)}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.estado{margin:0; min-height:1.4em; font-size:14.5px; color:var(--muted)}
.estado.ok{color:var(--bosque2)} .estado.err{color:#a33b2c}
form.f button[disabled]{opacity:.5; pointer-events:none}
.priv{font-size:12.5px; color:var(--dim); margin:0}
.gracias{text-align:center; display:grid; gap:12px; padding:40px 10px; position:relative}
.gracias b{font:500 44px/1.05 var(--serif); color:var(--bosque)}
.gracias p{margin:0; color:var(--muted)}
@media (max-width:560px){ .fila{grid-template-columns:1fr} }

/* opciones marcables (cotizador y clases) */
fieldset.grupo{border:0; margin:0; padding:0; display:grid; gap:10px; min-width:0}
fieldset.grupo legend{padding:0; margin-bottom:10px; font:600 11px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--laton)}
fieldset.grupo legend em{font-style:normal; text-transform:none; letter-spacing:0; color:var(--dim); font-weight:500}
.marcas{display:flex; flex-wrap:wrap; gap:8px}
.marcas label{position:relative; cursor:pointer}
.marcas input{position:absolute; opacity:0; inset:0; cursor:pointer}
.marcas span{display:inline-block; font-size:14px; padding:10px 15px; border:1px solid var(--linea2); border-radius:999px; background:var(--arena); transition:background .2s, color .2s, border-color .2s}
.marcas input:checked + span{background:var(--bosque); color:var(--arena); border-color:var(--bosque)}
.marcas input:focus-visible + span{outline:2px solid var(--laton); outline-offset:2px}
.marcas label:hover span{border-color:var(--bosque)}

/* bloques numerados del cotizador */
.bloque{display:grid; gap:16px; padding-top:22px; border-top:1px solid var(--linea)}
.bloque:first-child{border-top:0; padding-top:0}
.bloque > .tit{display:flex; gap:14px; align-items:baseline}
.bloque > .tit i{font:italic 600 22px/1 var(--serif); color:var(--laton); font-style:italic}
.bloque > .tit b{font:600 24px/1.1 var(--serif); color:var(--bosque)}
.bloque > .tit small{display:block; font-size:14px; color:var(--muted); font-weight:400}

.resumen{background:var(--arena); border:1px dashed var(--linea2); border-radius:4px; padding:16px 18px; font-size:14px; color:var(--muted); white-space:pre-line; position:relative}
.resumen b{display:block; font:600 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--laton); margin-bottom:10px}

/* preguntas */
.faq{max-width:900px; border-top:1px solid var(--linea2)}
.faq details{border-bottom:1px solid var(--linea2)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font:600 clamp(17px,1.6vw,20px)/1.35 var(--sans); color:var(--bosque)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; color:var(--laton); font:400 28px/1 var(--sans); transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 24px; color:var(--muted); max-width:68ch; line-height:1.65; font-size:16.5px}

/* cierre */
.cierre{text-align:center; padding:clamp(80px,10vw,120px) 0}
.cierre h2{margin:22px auto 18px; max-width:20ch}
.cierre .sobre{justify-content:center}
.cierre .sobre::after{content:""; width:36px; height:1px; background:currentColor}
.cierre .lead{margin:0 auto 32px}
.cierre .ctas{justify-content:center}

footer{background:var(--arena2); border-top:1px solid var(--linea2); padding:44px 0 calc(34px + env(safe-area-inset-bottom,0px)); color:var(--muted); font-size:13.5px}
footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
footer nav{display:flex; gap:22px; flex-wrap:wrap}
footer a{text-decoration:none} footer a:hover{color:var(--bosque)}

.rev{opacity:0; transform:translateY(20px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1)}
.rev.visto{opacity:1; transform:none}
.rev.d1{transition-delay:.1s} .rev.d2{transition-delay:.2s} .rev.d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important} .rev{opacity:1; transform:none} html{scroll-behavior:auto} }