/* CRISTAL · la materia de la referencia: vidrio líquido, serif y producto superpuesto.
   Se activa con data-hero="cristal". No toca el resto de la web. */

/* ── el producto, encima del vídeo y detrás del texto ── */
:root[data-hero="cristal"] .hero-producto-capa{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--hero-producto,url(../img/productos/abono-special-green-citricos.jpg));
  background-repeat:no-repeat;
  background-position:right -4% center;
  background-size:auto 82%;
  /* la foto tiene fondo propio: se recorta con una máscara para fundirla en negro */
  -webkit-mask-image:radial-gradient(58% 62% at 72% 52%,#000 42%,transparent 78%);
          mask-image:radial-gradient(58% 62% at 72% 52%,#000 42%,transparent 78%);
  opacity:0;transform:translateX(26px) scale(1.04);
  animation:entraProd 1.5s cubic-bezier(.16,1,.3,1) 1.1s forwards}
@keyframes entraProd{to{opacity:.92;transform:none}}
@media(max-width:820px){
  :root[data-hero="cristal"] .hero-producto-capa{
    background-position:center 86%;background-size:auto 42%;
    -webkit-mask-image:radial-gradient(62% 30% at 50% 84%,#000 45%,transparent 80%);
            mask-image:radial-gradient(62% 30% at 50% 84%,#000 45%,transparent 80%)}
}
:root[data-hero="cristal"] .hero-centro{z-index:5}
/* el texto se aparta del producto en escritorio */
@media(min-width:900px){
  :root[data-hero="cristal"] .hero-centro{align-items:flex-start;text-align:left;padding-right:38vw}
  :root[data-hero="cristal"] .hero-h1{text-align:left;white-space:normal}
  :root[data-hero="cristal"] .hero-lead{align-items:flex-start;text-align:left}
  :root[data-hero="cristal"] .hero-ctas{justify-content:flex-start}
}

/* ── vidrio líquido: el botón deja de ser un bloque y pasa a ser materia ── */
:root[data-hero="cristal"] .hero-ctas .btn-cta,
:root[data-hero="cristal"] .hero-ctas .btn-ghost{
  border-radius:999px;padding:1em 2.2em;
  background:rgba(255,255,255,.02);background-blend-mode:luminosity;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12);
  color:rgba(255,255,255,.94);position:relative;overflow:hidden;
  transition:background .35s,box-shadow .35s,transform .2s}
/* el filo del cristal: un borde que solo brilla arriba y abajo */
:root[data-hero="cristal"] .hero-ctas .btn-cta::before,
:root[data-hero="cristal"] .hero-ctas .btn-ghost::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.16) 20%,
    rgba(255,255,255,0) 42%,rgba(255,255,255,0) 58%,
    rgba(255,255,255,.16) 80%,rgba(255,255,255,.5) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
:root[data-hero="cristal"] .hero-ctas .btn-cta:hover,
:root[data-hero="cristal"] .hero-ctas .btn-ghost:hover{
  background:rgba(255,255,255,.06);box-shadow:inset 0 1px 2px rgba(255,255,255,.18)}
:root[data-hero="cristal"] .hero-ctas .btn-cta:active,
:root[data-hero="cristal"] .hero-ctas .btn-ghost:active{transform:scale(.98)}
:root[data-hero="cristal"] .hero-ctas .btn-cta::after{content:none}
:root[data-hero="cristal"] .hero-ctas .btn-ghost::after{content:none}
/* el principal se distingue por un punto lima, no por un bloque de color */
:root[data-hero="cristal"] .hero-ctas .btn-cta{
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12), 0 0 0 1px rgba(var(--rgb-acento),.28)}

/* ── la franja, del mismo cristal ── */
:root[data-hero="cristal"] .franja-cristal{
  background:rgba(255,255,255,.03);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
:root[data-hero="cristal"] .franja-cristal .franja-set b{color:rgba(255,255,255,.86);font-weight:400}
:root[data-hero="cristal"] .franja-cristal .franja-set i{background:rgba(255,255,255,.4)}

/* ── el titular deja las mayúsculas apretadas: serif fino y con aire ── */
:root[data-hero="cristal"] .hero-h1{
  text-transform:none;font-weight:400;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2.6rem,8.5vw,8.5vw);
  background:none;-webkit-text-fill-color:currentColor;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.55)}
:root[data-hero="cristal"][data-fuente="fraunces"] .hero-h1,
:root[data-hero="cristal"] .hero-h1{font-family:var(--familia,'Fraunces',Georgia,serif)}
:root[data-hero="cristal"] .hero-lead{font-weight:300;letter-spacing:.01em}
:root[data-hero="cristal"] .hero-lead .l-dim{opacity:.72}