/**
 * YZZ · Bloque de datos del yate (precio + specs) — estilos.
 * Base: dirección "ficha-dashboard / heatmap". Todo scoped a .yzz-specs.
 * El overview nativo se oculta cuando el JS agrega body.yzz-specs-on (degradación elegante:
 * si el JS falla, el overview nativo se ve normal y no se pierde nada).
 */

/* Oculta el overview nativo (SIN borrarlo del DOM: otros scripts de la ficha lo leen). */
body.yzz-specs-on .yzz-specs-nativehide { display: none !important; }

/* En MÓVIL: oculta el precio nativo del encabezado móvil (solo queda el del bloque nuevo).
   `.mobile-property-title` vive en el bloque `d-block d-md-none`, así que esto NO afecta
   tablet/PC: ahí el precio nativo de escritorio (.property-price-wrap, arriba a la derecha)
   se conserva y quedan los dos. */
body.yzz-specs-on .mobile-property-title .item-price-wrap { display: none !important; }

/* Contenedor en la ficha: un respiro arriba/abajo. */
.yzz-specs { margin: 6px 0 22px; }

/* ===== YZZ SPECS ===== */
.yzz-specs{
  --navy:#0B1939; --navy2:#13244d; --teal:#0C2D38; --gold:#F6EA69;
  --blue:#194395; --green:#00945E; --ink:#36425a; --muted:#6b7891;
  --line:#e6ebf3; --bg:#f7f9fc; --white:#fff;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Barlow","Inter",system-ui,sans-serif;
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  width:100%;
  max-width:100%;
}
.yzz-specs *,.yzz-specs *::before,.yzz-specs *::after{box-sizing:border-box;}

/* Blindaje contra body{text-transform:uppercase} global del sitio:
   los labels van uppercase por diseño, pero cifras/precio/tipo/frases NO deben heredarlo. */
.yzz-specs__priceVal,.yzz-specs__amount,.yzz-specs__mxn,.yzz-specs__cur,
.yzz-specs__num,.yzz-specs__num--text,.yzz-specs__sub,
.yzz-specs__duration,.yzz-specs__included{ text-transform:none; }

/* ---------- GRID (mobile-first): precio + 3 cifras clave en el primer pantallazo ---------- */
.yzz-specs__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-areas:
    "price price price"
    "cap   cam   ban"
    "tipo  tipo  tipo";
  gap:10px;
}

/* ---------- Celda base (stat-cell blanca) ---------- */
.yzz-specs__cell{
  min-width:0; margin:0; background:var(--white);
  border:1px solid var(--line); border-radius:14px;
  padding:13px 13px 14px; display:flex; flex-direction:column; gap:7px;
  box-shadow:0 1px 2px rgba(11,25,57,.04);
}
.yzz-specs__cell--cap{grid-area:cap;}
.yzz-specs__cell--cam{grid-area:cam;}
.yzz-specs__cell--ban{grid-area:ban;}
.yzz-specs__cell--tipo{grid-area:tipo;}

.yzz-specs__label{
  display:flex; align-items:center; gap:7px;
  font-size:.66rem; font-weight:700; letter-spacing:.085em;
  text-transform:uppercase; color:var(--muted); line-height:1.15;
}
.yzz-specs__icon{width:19px; height:19px; flex:0 0 auto; color:var(--blue); display:inline-flex;}
.yzz-specs__icon svg{width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.yzz-specs__icon--gold{color:var(--gold);}

.yzz-specs__num{
  display:flex; align-items:baseline; gap:6px; min-width:0;
  font-family:var(--display); font-weight:800;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  font-size:clamp(1.3rem,4.6vw,1.6rem); line-height:1;
  letter-spacing:-.01em; color:var(--navy);
}
.yzz-specs__sub{font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:0; color:var(--muted);}
/* "Tipo" es TEXTO, no cifra: selector compuesto (0,2,0) para ganarle a las media queries de
   `.yzz-specs__num`, en bloque para que envuelva, y con corte de palabra para no desbordar. */
.yzz-specs__num.yzz-specs__num--text{
  display:block; min-width:0;
  font-size:clamp(.85rem,2.6vw,1.05rem) !important; font-weight:700; line-height:1.22; letter-spacing:0;
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
}

/* ---------- Celda PRECIO (hero navy, único bloque oscuro + único acento dorado) ---------- */
.yzz-specs__cell--price{
  grid-area:price;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);
  border-color:var(--navy); border-radius:16px;
  padding:15px 17px 17px; gap:8px; position:relative; overflow:hidden;
}
.yzz-specs__cell--price::after{
  content:""; position:absolute; top:-40%; right:-10%;
  width:220px; height:220px;
  background:radial-gradient(circle,rgba(246,234,105,.14) 0%,transparent 62%);
  pointer-events:none;
}
.yzz-specs__eyebrow{
  position:relative; font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.74);
}
.yzz-specs__priceVal{
  position:relative; margin:0; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  font-family:var(--display); font-weight:800;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  font-size:clamp(1.85rem,7vw,2.35rem); line-height:.95;
  letter-spacing:-.015em; color:var(--white); overflow-wrap:anywhere;
}
.yzz-specs__cur{font-size:.5em; font-weight:700; color:var(--gold); transform:translateY(-.15em);}
.yzz-specs__mxn{font-size:.3em; font-weight:700; letter-spacing:.09em; color:rgba(255,255,255,.72); align-self:flex-end; transform:translateY(-.4em);}
.yzz-specs__underline{position:relative; width:58px; height:4px; margin:1px 0 3px; border-radius:3px; background:var(--gold);}
.yzz-specs__meta{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;}
.yzz-specs__duration{display:inline-flex; align-items:center; gap:7px; font-family:var(--display); font-weight:600; font-size:.95rem; color:rgba(255,255,255,.82);}
.yzz-specs__duration strong{color:var(--white); font-weight:700;}
.yzz-specs__duration .yzz-specs__icon{width:17px; height:17px;}
.yzz-specs__included{display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px; border-radius:999px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); font-size:.72rem; font-weight:600; color:rgba(255,255,255,.92);}
.yzz-specs__check{width:15px; height:15px; flex:0 0 auto; color:#5fd2a4;}
.yzz-specs__check svg{width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}

/* solo lectores de pantalla (anuncia MXN antes de la cifra) */
.yzz-specs__sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- TABLET (>=768px): precio banner + 4 stats en fila.
   Debajo de 768 va el layout MÓVIL (3 col) donde "tipo" ocupa fila completa y nunca se aprieta. ---------- */
@media (min-width:768px){
  .yzz-specs__grid{grid-template-columns:repeat(4,1fr); grid-template-areas:"price price price price" "cap cam ban tipo"; gap:12px;}
  .yzz-specs__cell--price{flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 22px; padding:16px 22px;}
  .yzz-specs__eyebrow{flex:1 1 100%;}
  .yzz-specs__underline{flex:1 1 100%; width:64px;}
  .yzz-specs__num{font-size:clamp(1.5rem,3.6vw,1.8rem);}
}

/* ---------- DESKTOP (>=960px): precio hero vertical izq (2 filas) + rejilla 2x2 ---------- */
@media (min-width:960px){
  .yzz-specs__grid{grid-template-columns:1.5fr 1fr 1fr; grid-template-areas:"price cap cam" "price ban tipo"; gap:14px;}
  .yzz-specs__cell{padding:16px 16px 17px;}
  .yzz-specs__cell--price{flex-direction:column; flex-wrap:nowrap; align-items:flex-start; justify-content:center; gap:10px; padding:24px 26px;}
  .yzz-specs__eyebrow{flex:none;}
  .yzz-specs__underline{flex:none; width:64px;}
  .yzz-specs__priceVal{font-size:clamp(2.6rem,2.8vw,3.1rem);}
  .yzz-specs__num{font-size:1.9rem;}
}

/* ---------- Móvil muy angosto (<=360px) ---------- */
@media (max-width:360px){
  .yzz-specs__num{font-size:1.5rem;}
  .yzz-specs__sub{font-size:.66rem;}
  .yzz-specs__label{font-size:.62rem; letter-spacing:.05em;}
  .yzz-specs__included{font-size:.68rem;}
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){ .yzz-specs *{transition:none !important; animation:none !important;} }
@media (prefers-contrast:more){
  .yzz-specs__cell{border-color:var(--ink);}
  .yzz-specs__label{color:var(--ink);}
  .yzz-specs__duration{color:#fff;}
  .yzz-specs__included{color:#fff;}
}