/* ============================================================
   contacto.html — página suelta (mismos invariantes que
   servicios.html/presupuesto.html)
   ============================================================ */

.nav{animation:none;transform:none}
.nav__menu li{animation:none;opacity:1;transform:none}
.nav__mark a{pointer-events:auto;display:block}
.nav__mark img{width:198px;height:auto;display:block}
@media (max-width:820px){.nav__mark img{width:150px}}

.cont-wrap{position:relative;max-width:760px;margin:0 auto;
  padding:0 clamp(20px,5vw,64px) clamp(60px,8vw,110px)}

.cont-hero{padding:clamp(56px,8vw,104px) 0 clamp(30px,4vw,48px)}
.cont-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--olive);margin-bottom:14px}
.cont-hero h1{font-size:clamp(34px,5vw,56px);font-weight:800;line-height:1.05;
  letter-spacing:-.03em;margin-bottom:18px;text-align:left}
.cont-lead{font-size:clamp(16px,1.3vw,18px);line-height:1.7;color:rgba(61,65,39,.78);
  max-width:52ch;text-align:left}

.cont-personas{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.cont-persona{background:var(--cream);border-radius:26px;padding:26px 24px;text-align:left}
.cont-persona h2{font-size:17px;font-weight:800;letter-spacing:-.015em;margin-bottom:2px}
.cont-persona__rol{font-size:13.5px;color:rgba(61,65,39,.65);margin-bottom:12px}
.cont-persona a{display:block;font-size:14.5px;font-weight:600;color:var(--olive);
  text-decoration:none;line-height:1.9}
.cont-persona a:hover{color:var(--deep);text-decoration:underline;text-underline-offset:3px}

.cont-form{background:var(--cream);border-radius:34px;padding:32px 30px;
  display:grid;gap:20px}
.cont-field{display:grid;gap:8px;text-align:left}
.cont-field label{font-size:14px;font-weight:700;color:var(--deep)}
.cont-opcional{font-weight:500;color:rgba(61,65,39,.55)}
.cont-field input,.cont-field textarea{
  font:inherit;font-size:15px;padding:13px 16px;border-radius:16px;
  border:1.5px solid rgba(61,65,39,.18);background:var(--sand);color:var(--deep);
  resize:vertical}
.cont-field input:focus-visible,.cont-field textarea:focus-visible{
  outline:2.5px solid var(--olive);outline-offset:2px;border-color:transparent}
.cont-form .btn{justify-self:start;margin-top:4px}
.cont-consentimiento{display:flex;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.6;color:var(--deep);text-align:left}
.cont-consentimiento input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;
  accent-color:var(--olive);cursor:pointer}
.cont-consentimiento input:focus-visible{outline:2.5px solid var(--olive);outline-offset:3px}
.cont-consentimiento label{cursor:pointer}
.cont-consentimiento a{color:var(--olive);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cont-estado{margin:0;font-size:14px;text-align:left}
.cont-estado--ok{color:var(--olive);font-weight:600}
.cont-estado--error{color:var(--alerta);font-weight:600}
.cont-privacidad{margin:0;font-size:13px;color:rgba(61,65,39,.72);text-align:left}
.cont-privacidad a{color:var(--olive);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.jardin{position:relative;width:100%;height:clamp(170px,28vh,240px);
  margin-top:clamp(34px,5vw,62px);pointer-events:none;overflow:hidden}
.cont-wrap>.jardin{position:fixed;inset:0;width:100vw;height:100vh;margin:0;z-index:0;overflow:hidden}
.cont-wrap>.cont-hero,.cont-wrap>.cont-personas,.cont-wrap>.cont-form{position:relative;z-index:1}
.jardin__defs{position:absolute;width:0;height:0;overflow:hidden}
.flor{--f:1;position:absolute;left:var(--x);top:var(--y);
  width:calc(var(--w) * var(--f));height:calc(var(--w) * var(--f));
  margin-left:calc(var(--w) * var(--f) / -2);margin-top:calc(var(--w) * var(--f) / -2);
  color:var(--c);opacity:var(--o,1);
  animation:florBrota 1.1s cubic-bezier(.16,1,.3,1) backwards,
    florMece var(--dur,20s) ease-in-out infinite}
.flor svg{display:block;width:100%;height:100%;animation:florGira var(--giro,50s) linear infinite}
@keyframes florBrota{from{scale:0;opacity:0}to{scale:1;opacity:var(--o,1)}}
@keyframes florMece{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes florGira{to{rotate:360deg}}

@media (max-width:820px){
  .flor--extra{display:none}
  .flor{--f:.6}
}

/* pie: mismo mecanismo que servicios.css/presupuesto.css — .panel__in>*
   empieza en opacity:0 en estilos.css y solo sube dentro de .drawer.open,
   que aquí no existe */
.svc-footer{margin-top:clamp(60px,8vw,110px)}
.svc-footer .panel{border-radius:34px 34px 0 0}
.svc-footer .panel__in{padding-top:40px}
.svc-footer .panel__in>*{opacity:1!important;transform:none!important}

@media (max-width:600px){
  .cont-personas{grid-template-columns:1fr}
}

/* Los controles se ajustan a la columna, no a su ancho intrínseco. */
.cont-field{min-width:0}
.cont-field input,.cont-field textarea{width:100%;min-width:0;max-width:100%;font-size:16px}
@media (max-width:600px){
  .cont-form{padding:26px 20px}
}