/* ==========================================================================
   Edgar Orozco — CSS de apoyo  v1 (18 ago 2026)
   Subir a: /wp-content/uploads/edgar/edgar-additional.css
   Se encola con snippet PHP (ver edgar-snippets-v3.php)
   Estilos fieles al preview aprobado: grid overlay de Obra + ficha sticky stack
   ========================================================================== */

/* ---------- Variables puente hacia los Global de Elementor ---------- */
:root{
  --eo-ink:      var(--e-global-color-primary,   #1C1B18);
  --eo-soft:     var(--e-global-color-secondary, #726F67);
  --eo-bg:       var(--e-global-color-3b951ee,   #FBFAF8);
  --eo-hair:     var(--e-global-color-ac50724,   rgba(28,27,24,.13));
  --eo-ok:       var(--e-global-color-ca0771c,   #5E7A5A);
  --eo-serif:    var(--e-global-typography-primary-font-family, "Fraunces"), Georgia, serif;
  --eo-sans:     var(--e-global-typography-text-font-family,    "Inter"), system-ui, sans-serif;
}

/* ==========================================================================
   A · PÁGINA OBRA — tarjeta con título en overlay
   ========================================================================== */
.eo-cell{ position:relative; overflow:hidden; aspect-ratio:4/5; background:#ded9d0; }
.eo-cell .elementor-widget-image,
.eo-cell .elementor-widget-image > div,
.eo-cell figure{ height:100%; margin:0; }
.eo-cell img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.eo-cell:hover img{ transform:scale(1.04); }
.eo-cell::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(to top,
    rgba(18,17,15,.55) 0%, rgba(18,17,15,.12) 34%, rgba(18,17,15,0) 62%);
  transition:opacity .5s;
}
.eo-cell:hover::after{ opacity:.85; }
/* bloque de textos sobre la imagen */
.eo-cell-cap{
  position:absolute; left:22px; right:22px; bottom:20px; z-index:2;
  display:flex; flex-direction:column; gap:3px;
}
.eo-cell-cap, .eo-cell-cap *{ color:#fff !important; }
.eo-cell-cap .elementor-heading-title{
  font-family:var(--eo-sans); font-weight:500; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.3;
}
.eo-cell-cap .eo-ficha-corta{
  font-family:var(--eo-sans); font-weight:300; font-size:11px;
  letter-spacing:.06em; color:rgba(255,255,255,.72) !important;
}
@media(max-width:560px){ .eo-cell-cap{ left:16px; right:16px; bottom:14px; } }

/* ==========================================================================
   B · FICHA DE PIEZA
   ========================================================================== */

/* ---------- Estado / disponibilidad ---------- */
.eo-estado{
  display:inline-flex; align-items:center; font-family:var(--eo-sans);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--eo-soft);
}
.eo-estado::before{
  content:""; width:6px; height:6px; border-radius:50%;
  margin-right:8px; background:var(--eo-soft);
}
.eo-estado--ok::before { background:var(--eo-ok); }
.eo-estado--off::before{ background:var(--eo-hair); }

/* ---------- Ficha técnica ---------- */
.eo-ficha{ display:flex; flex-direction:column; gap:12px; margin:0; }
.eo-ficha > div{ display:flex; flex-direction:column; gap:2px; }
.eo-ficha dt{
  font-family:var(--eo-sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--eo-soft); margin:0;
}
.eo-ficha dd{
  font-family:var(--eo-serif); font-size:17px; line-height:1.4;
  color:var(--eo-ink); margin:0;
}
/* variante en línea (si se usa horizontal) */
.eo-ficha--inline{ flex-direction:row; flex-wrap:wrap; gap:44px; }

/* ---------- Relato: bloques alternados imagen / texto ---------- */
.eo-relato{ display:flex; flex-direction:column; }
.eo-bloque{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,70px); align-items:center;
  padding:clamp(50px,8vh,100px) 0;
}
.eo-bloque:nth-child(even) .eo-bloque-txt{ order:-1; }
.eo-bloque-img{ background:#ded9d0; aspect-ratio:4/3; overflow:hidden; }
.eo-bloque-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.eo-bloque-txt h3{
  font-family:var(--eo-serif); font-weight:400;
  font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.18;
  color:var(--eo-ink); margin:0 0 14px;
}
.eo-bloque-txt p{
  font-family:var(--eo-sans); font-weight:300; color:var(--eo-soft);
  max-width:46ch; margin:0;
}
@media(max-width:820px){
  .eo-bloque{ grid-template-columns:1fr; padding:44px 0; }
  .eo-bloque:nth-child(even) .eo-bloque-txt{ order:0; }
}

/* ---------- Banda full-bleed oscura ---------- */
.eo-fullbleed{ background:#141311; min-height:72vh; overflow:hidden; margin:0; }
.eo-fullbleed img{ width:100%; height:72vh; object-fit:cover; opacity:.95; display:block; }
@media(max-width:760px){ .eo-fullbleed, .eo-fullbleed img{ height:52vh; min-height:52vh; } }

/* ---------- Vistas: TODAS las imágenes se traslapan (sticky stack) ----------
   Mismo `top` en todas = cada imagen se encima por completo sobre la anterior.
   La primera es la imagen destacada de la pieza. */
.eo-vistas{ display:flex; flex-direction:column; gap:0; }
.eo-vistas figure{
  position:sticky; top:90px; height:80vh; overflow:hidden; margin:0;
  box-shadow:0 -22px 50px rgba(28,27,24,.16);
  background:#ded9d0;
}
.eo-vistas figure:first-child{ box-shadow:none; }
.eo-vistas figure img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:900px){
  .eo-vistas figure{ position:relative; top:auto; height:auto; margin-bottom:6px; box-shadow:none; }
  .eo-vistas figure img{ height:auto; }
}

/* ---------- Columna de texto fija (izquierda) ---------- */
.eo-sticky-side{ position:sticky; top:90px; align-self:start; }
@media(max-width:900px){ .eo-sticky-side{ position:static; } }

.eo-contador{
  font-family:var(--eo-sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--eo-soft);
}

/* ---------- Botón de cotización (fallback fuera de Elementor) ---------- */
.eo-cotizar{
  display:inline-block; font-family:var(--eo-sans); font-weight:500; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--eo-ink);
  background:transparent; border:1px solid var(--eo-ink); border-radius:2px;
  padding:14px 32px; transition:background .3s, color .3s; text-decoration:none;
}
.eo-cotizar:hover{ background:var(--eo-ink); color:var(--eo-bg); }

/* ---------- Hero de la pieza ---------- */
.eo-principal{ margin:0; background:#ded9d0; aspect-ratio:4/5; overflow:hidden; }
.eo-principal img{ width:100%; height:100%; object-fit:cover; display:block; }
.eo-subtitulo{
  font-family:var(--eo-serif); font-style:italic; font-size:18px;
  color:var(--eo-soft); line-height:1.4;
}