/* =====================================================================
   CUATTRO · base.css — lo estructural que comparten las 5 versiones
   Cada versión redefine las variables y le pone su carácter encima.
   ===================================================================== */

:root{
  /* paleta oficial (marca.js también las inyecta como --cu-*) */
  --verde:#23330E; --verde-medio:#3D5718; --lima:#A2C96C; --lima-claro:#C7DEA6; --tinte:#EDF4E0;
  --negro:#202020; --gris:#E5E5E5; --blanco:#FFFFFF;

  /* las que cada versión pisa */
  --m-fondo:#fff; --m-texto:#202020; --m-suave:#6b7280; --m-linea:#e7e7e7;
  --m-radio:20px; --m-scrim:rgba(20,28,10,.62); --m-acento:#3D5718;
  --fuente:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fuente);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px}

/* ============================ MODAL ============================ */
.cu-m{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:20px;background:var(--m-scrim);backdrop-filter:blur(3px)}
.cu-m.abierto{display:flex;animation:cuFade .18s ease}
@keyframes cuFade{from{opacity:0}to{opacity:1}}
.cu-m__box{position:relative;width:100%;max-width:880px;max-height:92vh;overflow-y:auto;
  background:var(--m-fondo);color:var(--m-texto);border-radius:var(--m-radio);
  box-shadow:0 30px 80px rgba(0,0,0,.35);animation:cuUp .24s cubic-bezier(.2,.8,.3,1)}
@keyframes cuUp{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
.cu-m__x{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.94);color:#202020;font-size:24px;line-height:1;
  box-shadow:0 2px 12px rgba(0,0,0,.18)}
.cu-m__x:hover{background:#fff}
.cu-m__foto{aspect-ratio:16/9;overflow:hidden;background:var(--tinte);
  border-radius:var(--m-radio) var(--m-radio) 0 0}
.cu-m__foto img{width:100%;height:100%;object-fit:cover}
.cu-m__gal{display:flex;gap:8px;padding:12px 30px 0;flex-wrap:wrap}
.cu-m__gal img{width:70px;height:52px;object-fit:cover;border-radius:8px;cursor:pointer;
  border:2px solid transparent;transition:border-color .15s}
.cu-m__gal img.act,.cu-m__gal img:hover{border-color:var(--m-acento)}
.cu-m__cuerpo{padding:26px 30px 30px}
.cu-m__estado{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;padding:6px 12px;border-radius:999px;background:var(--tinte);color:var(--verde);margin-bottom:12px}
.cu-m__estado--no{background:#f1f1f1;color:#7a7a7a}
.cu-m__box h3{margin:0;font-size:clamp(22px,3.6vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.12}
.cu-m__precio{font-size:clamp(24px,4vw,32px);font-weight:800;color:var(--m-acento);margin:6px 0 2px}
.cu-m__loc{color:var(--m-suave);font-size:14.5px;margin-bottom:18px}
.cu-m__specs{display:flex;flex-wrap:wrap;gap:12px;padding:16px 0;margin-bottom:16px;
  border-top:1px solid var(--m-linea);border-bottom:1px solid var(--m-linea)}
.cu-m__specs>div{flex:1;min-width:92px;text-align:center}
.cu-m__specs b{display:block;font-size:19px;font-weight:800}
.cu-m__specs span{font-size:12px;color:var(--m-suave)}
.cu-m__desc{font-size:14.6px;line-height:1.7;color:var(--m-suave);margin:0 0 20px}
.cu-m__acciones{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:560px){
  .cu-m{padding:0}
  .cu-m__box{max-height:100vh;border-radius:0}
  .cu-m__foto{border-radius:0}
  .cu-m__cuerpo{padding:22px}
  .cu-m__gal{padding:12px 22px 0}
  .cu-m__acciones .cu-btn{flex:1}
}

/* ============================ BOTONES ============================ */
.cu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;font-size:14.5px;font-weight:700;
  text-decoration:none;transition:transform .15s,background .18s,color .18s,border-color .18s}
.cu-btn:hover{transform:translateY(-1px)}
.cu-btn--wa{background:#25D366;color:#0b2a14;border-color:#25D366}
.cu-btn--wa:hover{background:#1fbe5b}
.cu-btn--ghost{background:transparent;color:var(--m-texto);border-color:var(--m-linea)}
.cu-btn--ghost:hover{border-color:var(--m-acento);color:var(--m-acento)}
.cu-vacio{grid-column:1/-1;padding:44px 20px;text-align:center;color:var(--m-suave);font-size:15px}

/* utilidades mínimas */
.cu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ========================== DESPLEGABLE ==========================
   Sustituye al <select> nativo. Las versiones pisan colores y radios. */
.cu-dd{position:relative}
.cu-dd__btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;cursor:pointer;
  background:var(--dd-fondo,#fff);color:var(--dd-texto,#202020);border:1px solid var(--dd-borde,#e0e0e0);
  border-radius:var(--dd-radio,12px);padding:13px 15px;font-size:14.5px;font-weight:500;text-align:left;
  transition:border-color .18s,background .18s}
.cu-dd__btn:hover{border-color:var(--dd-acento,#A2C96C)}
.cu-dd.abierto .cu-dd__btn{border-color:var(--dd-acento,#A2C96C)}
.cu-dd--elegido .cu-dd__btn{font-weight:700}
.cu-dd__val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu-dd__flecha{flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s;opacity:.65}
.cu-dd.abierto .cu-dd__flecha{transform:translateY(1px) rotate(-135deg);opacity:1}
.cu-dd__panel{position:absolute;z-index:80;top:calc(100% + 7px);left:0;right:0;max-height:290px;overflow-y:auto;
  background:var(--dd-panel,#fff);border:1px solid var(--dd-borde,#e0e0e0);border-radius:var(--dd-radio,12px);
  padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s}
.cu-dd.abierto .cu-dd__panel{opacity:1;visibility:visible;transform:none}
.cu-dd__op{padding:11px 13px;border-radius:calc(var(--dd-radio,12px) - 4px);cursor:pointer;font-size:14.3px;
  color:var(--dd-texto,#202020);transition:background .13s,color .13s}
.cu-dd__op:hover,.cu-dd__op.foco{background:var(--dd-hover,rgba(162,201,108,.16))}
.cu-dd__op.act{color:var(--dd-acento,#3D5718);font-weight:700}
.cu-dd__op.act:after{content:'✓';float:right;font-weight:700}

/* el logo nunca lleva subrayado, aunque viva dentro de un enlace */
a .cuattro-lockup,.cuattro-lockup{text-decoration:none}
a:has(.cuattro-lockup),a[data-marca],a[data-marca-pie]{text-decoration:none}