/* ============================================================
   contacto-moderno.css — SOLO para contacto-moderno.html.
   Lo compartido (tokens, header, botones, fondo de espuma,
   títulos, CTA final, footer, reveal) vive en css/moderno.css.
   ============================================================ */

:root{--ease-out:cubic-bezier(.23,1,.32,1);}

/* ============================================================
   HERO: tarjeta de atención
   ============================================================ */
.desk{
  border-radius:var(--r-card,28px);padding:.6rem;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.7);
}
@media (prefers-reduced-motion:no-preference){
  .desk{opacity:0;animation:pgFade .8s var(--ease) .25s forwards;}
}
.desk-status{
  display:flex;align-items:center;gap:.9rem;
  padding:1.1rem 1.15rem 1.2rem;
}
.desk-dot{
  position:relative;width:12px;height:12px;border-radius:var(--r-pill,99px);flex:none;
  background:rgba(255,255,255,.35);
}
.desk[data-open="true"] .desk-dot{background:#35D07F;}
@media (prefers-reduced-motion:no-preference){
  .desk[data-open="true"] .desk-dot::after{
    content:"";position:absolute;inset:0;border-radius:var(--r-pill,99px);background:#35D07F;
    animation:ping 1.9s cubic-bezier(0,0,.2,1) infinite;
  }
}
.desk-state{font-size:17px;font-weight:var(--fw-x,800);letter-spacing:-.02em;color:#fff;}
.desk-when{margin-top:.15rem;font-size:13px;font-weight:600;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;}

.desk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;}
.desk-row{
  display:grid;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:.9rem;
  padding:.85rem 1rem;border-radius:var(--r-card,20px);background:var(--white);color:var(--ink);
  transition:transform .16s var(--ease-out),background-color .2s var(--ease-out);
}
.desk-row:hover{background:#FFFDF5;}
.desk-row:active{transform:scale(.985);}
.desk-ic{
  width:44px;height:44px;border-radius:var(--r-pill,99px);display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--line-soft);color:var(--blue);font-size:21px;
}
.desk-ic-wa{background:#0F7B3D;border-color:#0F7B3D;color:#fff;}
.desk-copy{display:flex;flex-direction:column;min-width:0;}
.desk-copy small{font-size:12.5px;font-weight:600;color:rgba(7,28,52,.58);}
.desk-copy strong{
  font-size:16px;font-weight:var(--fw-x,800);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.desk-go{font-size:19px;color:rgba(7,28,52,.35);transition:color .2s var(--ease-out),transform .2s var(--ease-out);}
.desk-row:hover .desk-go{color:var(--ink);transform:translate(2px,-2px);}

/* ============================================================
   UBICACIÓN (banda tinta)
   ============================================================ */
.loc-band{background:var(--ink);color:#fff;scroll-margin-top:24px;}
.loc{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;}
@media (min-width:1024px){.loc{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}}
.loc-map{
  position:relative;min-height:320px;border-radius:var(--r-card,28px);overflow:hidden;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 70px -40px rgba(0,0,0,.7);
}
@media (min-width:1024px){.loc-map{min-height:440px;}}
.loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.loc-panel{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:2rem;border-radius:var(--r-card,28px);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
}
@media (min-width:768px){.loc-panel{padding:2.5rem;}}
.loc-label{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.55);}
.loc-addr{
  margin-top:.5rem;font-style:normal;
  font-size:clamp(1.45rem,2.2vw,1.9rem);font-weight:var(--fw-x,800);line-height:1.25;letter-spacing:-.035em;color:#fff;
}
.loc-facts{margin:1.75rem 0 0;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:1rem;width:100%;}
.loc-facts dt{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.55);}
.loc-facts dd{margin:.15rem 0 0;font-size:16px;font-weight:700;color:rgba(255,255,255,.92);font-variant-numeric:tabular-nums;}
.loc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:auto;padding-top:2rem;}
.loc-ask{
  font-size:14px;font-weight:700;color:#fff;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px;
  transition:text-decoration-color .2s var(--ease-out);
}
.loc-ask:hover{text-decoration-color:var(--yellow);}

/* ============================================================
   ENTREGAS
   ============================================================ */
.ship{
  padding:2rem;border-radius:var(--r-card,28px);background:var(--white);border:1px solid var(--line-soft);
  box-shadow:0 30px 60px -48px rgba(7,28,52,.5);
}
@media (min-width:768px){.ship{padding:3rem;}}
@media (min-width:1024px){.ship{padding:3.5rem 4rem;}}
.ship-head{display:flex;flex-direction:column;gap:1.25rem;}
.ship-title{max-width:22ch;font-size:clamp(1.65rem,3vw,2.5rem);font-weight:var(--fw-x,800);line-height:1.08;letter-spacing:-.04em;color:var(--ink);}
.ship-states{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;}
.ship-states li{
  padding:.45rem .9rem;border-radius:var(--r-pill,99px);background:var(--paper);border:1px solid var(--line-soft);
  font-size:14px;font-weight:700;color:var(--ink);
}
.flow{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem;}
@media (min-width:768px){.flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;}}
.flow li{padding-top:1.25rem;border-top:2px solid var(--ink);}
.flow li:first-child{border-top-color:var(--yellow);}
.flow .material-symbols-outlined{font-size:24px;color:var(--blue);}
.flow h3{margin-top:.75rem;font-size:18px;font-weight:var(--fw-x,800);line-height:1.25;letter-spacing:-.025em;color:var(--ink);}
.flow p{margin-top:.4rem;max-width:40ch;font-size:14.5px;line-height:1.6;color:rgba(7,28,52,.64);}