/* ============================================================
   paltishop . atelier.css
   Papel, tinta y lacre. Un regalo que se abre, no una ficha.
   Archivo consolidado: una sola regla por decision.
   ============================================================ */

:root{ --hand:'Nothing You Could Do', cursive; }

/* --- grano de papel: el fondo deja de ser un degradado plano --- */
.hero2{ position:relative; isolation:isolate }
.hero2::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  opacity:.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark-mode .hero2::before{ mix-blend-mode:screen; opacity:.045 }


/* ============================================================
   COMPOSICION
   La foto va contenida y completa: el producto entero se ve, con
   sus cuatro esquinas redondeadas y su etiqueta. Se probo sangrarla
   al borde y no era lo que la tienda necesita.
   ============================================================ */
@media (min-width:1000px){
  .hero2-left{ position:relative; z-index:3 }
  .hero2-right{ position:relative }
  .hero2-img-frame{
    position:relative !important;
    width:100% !important; height:auto !important;
    aspect-ratio:4 / 3.4 !important;
    border-radius:24px !important;
    box-shadow:0 30px 70px rgba(92,74,61,.22) !important;
    overflow:visible !important;
  }
  .hero2-img-frame .hero2-img{ border-radius:inherit }
  /* el lacre a la esquina superior, fuera del producto */
  .seal{ left:-44px !important; top:26px !important; bottom:auto !important;
         transform:rotate(-13deg) !important; width:96px !important; height:96px !important }
}

/* --- tipografia con conviccion --- */
.hero2-title{ line-height:.98 !important; letter-spacing:-.02em }
.hero2-title em{ font-size:1.18em; line-height:.8; display:inline-block; transform:translateY(.04em) }

/* --- la nota manuscrita --- */
.hand-note{
  display:flex; align-items:flex-end; gap:.35rem;
  font-family:var(--hand); color:var(--mink,#8b6f6a);
  font-size:clamp(1.05rem,.95rem + .5vw,1.35rem); line-height:1.35;
  margin:var(--sp-4) 0 var(--sp-5); transform:rotate(-1.6deg); transform-origin:left center;
}
.hand-arrow{ width:64px; height:44px; flex:none; fill:none;
  stroke:var(--rose2,#c4847e); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  opacity:.8; transform:translateY(6px) }

/* --- el lacre, en el filo izquierdo de la foto --- */
.seal{
  position:absolute; z-index:9; width:118px; height:118px;
  left:-58px; top:50%; transform:translateY(-50%) rotate(-13deg);
  filter:drop-shadow(0 6px 14px rgba(92,74,61,.22));
}
.seal svg{ width:100%; height:100% }
.seal-ring{ fill:var(--cream,#eeddd2); stroke:var(--gold2,#b8935a); stroke-width:1.1 }
.seal-ring2{ fill:none; stroke:var(--gold,#c9a96e); stroke-width:.6; stroke-dasharray:2.5 3.5 }
.seal-txt{ font-family:var(--sans); font-size:8.4px; letter-spacing:.24em;
  fill:var(--bark,#5c4a3d); text-transform:uppercase }
.seal-mono{ font-family:var(--serif); font-style:italic; font-size:34px;
  fill:var(--gold2,#b8935a); text-anchor:middle }
@media (max-width:999px){
  .seal{ left:auto; right:14px; top:auto; bottom:-26px;
         transform:rotate(-13deg); width:88px; height:88px }
  .hand-note{ font-size:1.05rem }
}

/* --- los chips salen de sus burbujas: fila con filetes --- */
@media (min-width:700px){
  .hero2-features{ border-top:1px solid var(--cream4,#e8d4c4); padding-top:var(--sp-4) }
  .hero2-feat{ position:relative; padding-right:var(--sp-4) }
  .hero2-feat:not(:last-child)::after{ content:""; position:absolute; right:0; top:14%;
    height:72%; width:1px; background:var(--cream4,#e8d4c4) }
}

/* ============================================================
   TRATAMIENTO FOTOGRAFICO
   El material es de celular con flash. No se rehace desde CSS,
   pero si deja de pelearse con la paleta.
   ============================================================ */
.hero2-img{
  object-fit:cover !important;
  object-position:50% 50%;
  filter:none;
}
.hero2-img-frame:hover .hero2-img.is-active{ transform:scale(1.02) }

.photo-scrim{ display:none !important }