/* =====================================================================
   DTACHE SECTIONS LAYOUT (2026-10-15)
   Composición nueva de cada sección. Se carga después de glass.css.
   ===================================================================== */

/* ---------- SERVICIOS: cabecera a todo el ancho + mosaico 3 columnas sin huecos ---------- */
body.dtache-landing #servicios .svc-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* patrón: [1 1 2] [3 4 4] [5 6 6] */
body.dtache-landing #servicios .svc:nth-child(1),
body.dtache-landing #servicios .svc:nth-child(4),
body.dtache-landing #servicios .svc:nth-child(6){grid-column:span 2}
body.dtache-landing #servicios .svc{display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.4vw,30px);border-bottom:1px solid var(--g-line)}
body.dtache-landing #servicios .svc::before{display:none}
body.dtache-landing #servicios .svc h3{font-size:clamp(22px,1.9vw,28px)}
body.dtache-landing #servicios .svc-id{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px}
body.dtache-landing #servicios .svc-id h3{flex-basis:100%;order:2}
body.dtache-landing #servicios .svc-id .mode{order:1}
body.dtache-landing #servicios .svc .code{
  order:0;padding:5px 12px;border-radius:999px;background:rgba(200,169,107,.14);border:1px solid rgba(200,169,107,.35)
}
body.dtache-landing #servicios .svc-info{grid-template-columns:1fr;gap:12px}
body.dtache-landing #servicios .svc-info dt{margin-bottom:4px}
body.dtache-landing #servicios .svc-info dd{font-size:14.5px;line-height:1.5}
/* tarjetas anchas: info en 3 columnas */
body.dtache-landing #servicios .svc:nth-child(1) .svc-info,
body.dtache-landing #servicios .svc:nth-child(4) .svc-info,
body.dtache-landing #servicios .svc:nth-child(6) .svc-info{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
body.dtache-landing #servicios .svc:nth-child(1){background:linear-gradient(160deg,rgba(200,169,107,.16),rgba(255,255,255,.05));border-color:rgba(200,169,107,.35)}
body.dtache-landing #servicios .svc-cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:auto;padding-top:6px}
body.dtache-landing #servicios .cta-band{margin-top:12px}
@media (max-width:1060px){
  body.dtache-landing #servicios .svc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.dtache-landing #servicios .svc:nth-child(n){grid-column:auto}
  body.dtache-landing #servicios .svc:nth-child(1){grid-column:1/-1}
  body.dtache-landing #servicios .svc:nth-child(4) .svc-info,
  body.dtache-landing #servicios .svc:nth-child(6) .svc-info{grid-template-columns:1fr}
}
@media (max-width:700px){
  body.dtache-landing #servicios .svc-list{grid-template-columns:1fr}
  body.dtache-landing #servicios .svc:nth-child(1) .svc-info{grid-template-columns:1fr}
}
/* tarjetas anchas en horizontal (escritorio) */
@media (min-width:1061px){
  body.dtache-landing #servicios .svc:nth-child(1),
  body.dtache-landing #servicios .svc:nth-child(4),
  body.dtache-landing #servicios .svc:nth-child(6){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-template-rows:auto 1fr;
    grid-template-areas:"id info" "cta info";gap:18px clamp(24px,3vw,44px)
  }
  body.dtache-landing #servicios .svc:nth-child(1) .svc-id,
  body.dtache-landing #servicios .svc:nth-child(4) .svc-id,
  body.dtache-landing #servicios .svc:nth-child(6) .svc-id{grid-area:id}
  body.dtache-landing #servicios .svc:nth-child(1) .svc-cta,
  body.dtache-landing #servicios .svc:nth-child(4) .svc-cta,
  body.dtache-landing #servicios .svc:nth-child(6) .svc-cta{grid-area:cta;align-self:end}
  body.dtache-landing #servicios .svc:nth-child(1) .svc-info,
  body.dtache-landing #servicios .svc:nth-child(4) .svc-info,
  body.dtache-landing #servicios .svc:nth-child(6) .svc-info{
    grid-area:info;grid-template-columns:1fr;gap:14px;align-content:start;
    padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--g-line)
  }
  body.dtache-landing #servicios .svc:nth-child(1) h3,
  body.dtache-landing #servicios .svc:nth-child(4) h3,
  body.dtache-landing #servicios .svc:nth-child(6) h3{font-size:clamp(26px,2.4vw,36px)}
}
body.dtache-landing #servicios{padding-block:clamp(64px,8vw,110px)}
/* ---------- PORTAFOLIO: destacado a todo el ancho con ficha de vidrio ---------- */
body.dtache-landing .work.featured{position:relative;display:block;background:#0B0B0D;margin-bottom:clamp(16px,2vw,24px)}
body.dtache-landing .work.featured .work-media{margin:0;border-radius:0;aspect-ratio:21/9}
body.dtache-landing .work.featured .work-media img{width:100%;height:100%;object-fit:cover}
body.dtache-landing .work.featured .work-body{
  position:absolute;right:20px;bottom:20px;width:min(400px,calc(100% - 40px));
  padding:24px;border-radius:24px;color:#F2F0EB;
  background:rgba(18,17,20,.55);border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 20px 50px rgba(0,0,0,.35);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)
}
body.dtache-landing .work.featured .work-body *{color:#F2F0EB}
body.dtache-landing .work.featured .work-role{color:var(--gold-hi)!important}
body.dtache-landing .work.featured .play{left:24px;bottom:24px;top:auto;right:auto}
@media (max-width:900px){
  body.dtache-landing .work.featured .work-media{aspect-ratio:16/10}
  body.dtache-landing .work.featured .work-body{position:relative;right:auto;bottom:auto;width:auto;margin:-40px 12px 12px}
}

/* ---------- SOBRE ANGEL: retrato alto + cita ---------- */
body.dtache-landing .about{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}
body.dtache-landing .about-photo{aspect-ratio:auto;min-height:640px;height:100%;background:#F4F3F0}
body.dtache-landing .about-photo .photo-cap{
  position:absolute;left:16px;right:auto;bottom:16px;padding:10px 18px;border-radius:999px;
  background:rgba(18,17,20,.55);border:1px solid rgba(255,255,255,.18);color:#F2F0EB;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
body.dtache-landing .about-text{display:flex;flex-direction:column;justify-content:center;gap:18px}
body.dtache-landing .detache{position:relative;padding:28px 28px 28px 32px;margin:8px 0}
body.dtache-landing .detache dt{font-family:var(--f-serif);font-style:italic;font-size:clamp(34px,3.4vw,48px);line-height:1;color:var(--gold-hi)}
body.dtache-landing .detache dt small{font-family:var(--f-body);font-style:normal;font-size:14px;color:var(--silver)}
body.dtache-landing .detache dd{margin-top:12px;font-size:17px;line-height:1.55;color:var(--paper)}
@media (max-width:860px){body.dtache-landing .about-photo{min-height:0;aspect-ratio:4/5}}

/* ---------- PROCESO: línea de tiempo ---------- */
body.dtache-landing #proceso .steps::before{
  top:20px;left:20px;right:20px;height:2px;background:rgba(138,106,46,.35)
}
body.dtache-landing #proceso .step{padding:76px 22px 24px;background:rgba(255,255,255,.62)}
body.dtache-landing #proceso .step::before{display:none}
body.dtache-landing #proceso .step-n{position:absolute;top:0;left:22px;width:42px;height:42px;transform:translateY(-1px)}
body.dtache-landing #proceso .steps{padding-top:0;align-items:stretch}
body.dtache-landing #proceso .step:last-child .step-n{background:var(--gold);color:#0B0B0D}
body.dtache-landing #proceso .step h3{font:600 19px/1.2 var(--f-body);letter-spacing:-.01em}
@media (min-width:961px){
  body.dtache-landing #proceso .steps{padding-top:0}
  body.dtache-landing #proceso .step{margin-top:0}
  body.dtache-landing #proceso .step-n{top:-21px}
  body.dtache-landing #proceso .step{padding-top:40px;margin-top:21px}
  body.dtache-landing #proceso .steps::before{top:21px}
}
@media (max-width:960px){
  body.dtache-landing #proceso .steps{gap:12px}
  body.dtache-landing #proceso .steps::before{display:none}
  body.dtache-landing #proceso .step{padding:22px 22px 22px 80px}
  body.dtache-landing #proceso .step-n{top:22px;left:22px}
}

/* ---------- CONTRATAR: dos caminos contrastados ---------- */
body.dtache-landing #contratar .paths{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}
body.dtache-landing #contratar .path:first-child{
  background:linear-gradient(160deg,rgba(200,169,107,.22),rgba(200,169,107,.06));
  border-color:rgba(200,169,107,.4);min-height:420px
}
body.dtache-landing #contratar .path h3{font:300 clamp(30px,3vw,46px)/1.02 var(--f-body);letter-spacing:-.03em}
body.dtache-landing #contratar .path ul{display:grid;gap:10px;padding:0;list-style:none;margin:6px 0 10px}
body.dtache-landing #contratar .path li{position:relative;padding-left:26px}
body.dtache-landing #contratar .path li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--gold)}
body.dtache-landing #contratar .path .btn{margin-top:auto;align-self:flex-start}
body.dtache-landing #contratar .future{margin-top:14px;justify-content:space-between}
@media (max-width:760px){body.dtache-landing #contratar .paths{grid-template-columns:1fr}body.dtache-landing #contratar .path:first-child{min-height:0}}

/* ---------- FAQ: cabecera fija + acordeón ---------- */
@media (min-width:961px){
  body.dtache-landing #faq > .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
  body.dtache-landing #faq .sec-head{display:block;position:sticky;top:110px;margin:0}
}
body.dtache-landing .faq-cta{margin-top:28px;padding:22px;border-radius:24px;background:var(--g-fill);border:1px solid var(--g-line);display:grid;gap:14px}
body.dtache-landing .faq-cta p{margin:0;color:var(--paper);font-size:16px;line-height:1.5}
body.dtache-landing .faq-cta .btn{justify-self:start}
body.dtache-landing .faq summary::after{
  content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--g-fill-2);font:400 20px/1 var(--f-body);transition:transform .25s
}
body.dtache-landing .faq details[open] summary::after{transform:rotate(45deg);background:var(--gold);color:#0B0B0D}

/* ---------- CONTACTO: foto del estudio + formulario de vidrio ---------- */
body.dtache-landing #contacto{background:#0B0B0D}
body.dtache-landing #contacto .ct-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;object-position:30% center}
body.dtache-landing #contacto::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,11,13,.9) 0,rgba(11,11,13,.6) 50%,rgba(11,11,13,.35) 100%)
}
body.dtache-landing #contacto .composer{background:rgba(18,17,20,.5);border-color:rgba(255,255,255,.18)}
body.dtache-landing #contacto .contact > div:first-child{align-self:center}

/* ---------- FOOTER: logo a todo el ancho ---------- */
body.dtache-landing .footer .foot-grid > div:first-child{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:32px;margin-bottom:8px;border-bottom:1px solid rgba(11,11,13,.1)}
body.dtache-landing .footer .logo-footer img{width:min(520px,70vw);height:auto}
body.dtache-landing .footer .claim{font-family:var(--f-serif);font-style:italic;font-size:clamp(22px,2.4vw,32px);line-height:1.1;color:var(--gold-ink);max-width:16ch}
body.dtache-landing .footer .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){body.dtache-landing .footer .foot-grid{grid-template-columns:1fr 1fr}}

/* HERO: franja de especialidades centrada abajo */
@media (min-width:1181px){
  section.hg .hg-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:16px}
  section.hg .hg-about{width:100%;max-width:380px}
  section.hg .hg-chain{grid-column:2;justify-self:center}
}
@media (min-width:1181px) and (max-width:1400px){section.hg .hg-chain{gap:14px;padding:12px 20px}section.hg .hg-chain span+span::before{margin-right:14px}}

/* HERO: las esquinas superiores las cubren los notches; sin recorte del logo ni de WhatsApp */
@media (min-width:961px){
  section.hg .hg-frame{border-top-left-radius:0;border-top-right-radius:0}
  section.hg .hg-nr .hg-right{padding:2px 2px 0 0}
  section.hg .hg-logo{padding-left:22px}
}

section.hg .hg-about-title{margin:0;font:500 18px var(--f-body);color:var(--paper)}