/* WEB-001 V16 | MOBILE ONLY full-bleed editorial band; desktop unchanged. */
/* WEB-001 V15.0 | MOBILE-ONLY PATCH
   Desktop at >=801px is unchanged: this stylesheet is linked with media="screen and (max-width: 800px)".
   This versioned filename is new to prevent cached estilos.css from hiding updates.
   Preserve V13 desktop hero, all gallery functionality and brand assets. */
@media screen and (max-width: 800px) {
  /* One quiet teal surface. Eliminate the desktop scene used on the background. */
  .hero-section {
    background: linear-gradient(153deg, #092c34 0%, #103a40 55%, #092f36 100%) !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .hero-section::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }
  .hero-section::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("images/optimized/fondo-artesanal.webp") center top / 370px 370px repeat !important;
    opacity: .045 !important;
    mix-blend-mode: screen;
    pointer-events: none;
  }
  .hero-section .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    grid-template-columns: none !important;
    width: min(100%, 610px);
    max-width: 610px;
    min-height: 0 !important;
    margin: 0 auto;
    padding: 32px 22px 80px !important;
    gap: 0 !important;
    position: relative;
    z-index: 2;
  }
  .hero-section .hero-copy {
    width: 100%;
    max-width: none;
    min-width: 0;
    position: relative;
    z-index: 2;
  }
  .hero-section .hero-eyebrow {
    margin: 0 0 14px !important;
    font-size: .68rem;
    letter-spacing: .115em;
    line-height: 1.45;
  }
  .hero-section .hero-copy h1 {
    font-size: clamp(1.9rem, 6.3vw, 3rem) !important;
    line-height: 1.13 !important;
    letter-spacing: -.028em;
    margin: 0 0 18px !important;
    max-width: 100%;
    text-wrap: balance;
  }
  .hero-section .hero-tagline {
    font-size: clamp(.92rem, 2.5vw, 1rem);
    line-height: 1.58 !important;
    max-width: 100%;
    margin: 0 0 20px !important;
  }
  .hero-section .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items: stretch;
    gap: 10px;
  }
  .hero-section .hero-actions .btn {
    display: flex;
    min-width: 0 !important;
    min-height: 50px;
    padding: 10px 8px;
    font-size: clamp(.74rem, 2.15vw, .9rem);
    line-height: 1.3;
    white-space: normal;
    text-align: center;
  }
  .hero-section .hero-signature {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 3;
    width: 100%;
    margin: 22px 0 0 !important;
    padding: 0;
    gap: 10px;
    max-width: 100%;
  }
  .hero-section .hero-signature > img {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
  }
  .hero-section .hero-signature-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
  }
  .hero-section .hero-signature-name { font-size: clamp(1.85rem, 5.6vw, 2.4rem) !important; }
  .hero-section .hero-signature-line { font-size: clamp(.80rem, 2.65vw, 1.02rem) !important; line-height: 1.25; }

  /* The photo itself is rendered ONLY here: no duplication with ::before. */
  .hero-section .hero-inner .hero-art.hero-scene-v8 {
    position: relative;
    z-index: 2;
    display: block !important;
    flex: none;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1110 / 722;
    align-self: center;
    margin: 18px auto 0 !important;
    transform: none !important;
    border: 0;
    background: url("images/optimized/hero-escena-movil-v15.webp") center center / contain no-repeat !important;
    box-shadow: none;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    pointer-events: none;
  }
  /* Keep the already-approved single gold wave, without flowers. */
  .hero-section .hero-floral-wave {
    height: 72px;
    background-image: url("images/optimized/hero-curva-solo-dorada.svg") !important;
    background-size: 100% 100% !important;
  }
  .header .nav-links { background-color: #02343F; }
}
@media screen and (max-width: 540px) {
  .hero-section .hero-inner { padding: 27px 18px 72px !important; }
  .hero-section .hero-copy h1 { font-size: clamp(1.88rem, 7.6vw, 2.52rem) !important; }
  .hero-section .hero-signature > img { width: 61px; height: 61px; flex-basis: 61px; }
  .hero-section .hero-signature-name { font-size: 1.9rem !important; }
  .hero-section .hero-signature-line { font-size: .85rem !important; }
  .hero-section .hero-floral-wave { height: 64px; }
}
@media screen and (max-width: 355px) {
  .hero-section .hero-inner { padding-left: 14px !important; padding-right: 14px !important; }
  .hero-section .hero-copy h1 { font-size: 1.77rem !important; }
  .hero-section .hero-actions { gap: 7px; }
  .hero-section .hero-actions .btn { font-size: .72rem; }
  .hero-section .hero-signature > img { width: 55px; height: 55px; flex-basis: 55px; }
  .hero-section .hero-signature-name { font-size: 1.74rem !important; }
  .hero-section .hero-signature-line { font-size: .78rem !important; }
}

/* V16: crisp, edge-to-edge product photograph; centered visual hierarchy. */
@media screen and (max-width:800px) {
  .hero-section {
    background: #072f36 !important;
    overflow: hidden !important;
  }
  .hero-section::before { display: none !important; content: none !important; }
  .hero-section::after { opacity: .035 !important; }
  .hero-section .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: min(100%,610px) !important;
    max-width:610px !important;
    padding: 29px 20px 0 !important;
    gap: 0 !important;
    margin: 0 auto !important;
    min-height: 0 !important;
  }
  .hero-section .hero-copy {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .hero-section .hero-eyebrow {
    margin: 0 auto 13px !important;
    font-size: clamp(.65rem, 2.65vw, .78rem) !important;
    letter-spacing:.11em !important;
  }
  .hero-section .hero-copy h1 {
    text-align:center !important;
    font-size: clamp(1.83rem, 7.2vw, 2.55rem) !important;
    line-height: 1.09 !important;
    max-width: 100% !important;
    margin: 0 auto 17px !important;
    text-wrap: balance !important;
  }
  .hero-section .hero-tagline {
    max-width: 470px !important;
    margin:0 auto 20px !important;
    line-height:1.45 !important;
    font-size: clamp(.9rem,3.5vw,1.07rem) !important;
    text-align:center !important;
  }
  .hero-section .hero-actions {
    display:grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    justify-content:center !important;
    max-width:460px !important;
    margin-inline:auto !important;
  }
  .hero-section .hero-actions .btn {
    min-height:52px !important;
    font-size:clamp(.72rem,3vw,.88rem) !important;
    padding:10px 8px !important;
  }
  .hero-section .hero-signature {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    max-width:340px !important;
    width:100% !important;
    margin:24px auto 23px !important;
    text-align:left !important;
  }
  .hero-section .hero-signature > img {
    flex: 0 0 69px !important;
    height:69px !important;
    width:69px !important;
  }
  .hero-section .hero-signature-copy {align-items:flex-start !important;}
  .hero-section .hero-signature-name {font-size: clamp(1.85rem,6vw,2.15rem) !important;}
  .hero-section .hero-signature-line {font-size:clamp(.82rem,3.05vw,.97rem) !important;line-height:1.25 !important;}
  /* The decorative hero artwork now truly spans the phone edge-to-edge.
     No border, overlay, vignette, masking, or inset container. */
  .hero-section .hero-inner .hero-art.hero-scene-v8 {
    display:block !important;
    flex: none !important;
    width:100vw !important;
    max-width:none !important;
    min-width:100vw !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio: 1056 / 612 !important;
    margin:0 0 0 calc(50% - 50vw) !important;
    align-self:auto !important;
    background-image: url("images/optimized/hero-escenario-unificado-v8.webp") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border:0 !important;
    border-radius:0 !important;
    filter:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    box-shadow:none !important;
    transform:none !important;
  }
  /* Sweep over the bottom of the full-bleed image to create a curved gold edge. */
  .hero-section .hero-floral-wave {
    position:absolute !important;
    height: min(72px, 17vw) !important;
    left:0 !important;right:0 !important;bottom:-1px !important;
    background-image:url("images/optimized/hero-curva-solo-dorada.svg") !important;
    background-size:100% 100% !important;
    background-position:center bottom !important;
    z-index:5 !important;
  }
  .header .nav-links {background-color:#02343F !important;}
}
@media screen and (max-width:355px) {
  .hero-section .hero-inner {padding: 23px 14px 0 !important;}
  .hero-section .hero-copy h1 {font-size:clamp(1.65rem, 7.7vw, 1.89rem) !important;}
  .hero-section .hero-actions {gap:8px !important;}
  .hero-section .hero-signature {gap:8px !important;}
  .hero-section .hero-signature > img {width:60px !important;height:60px !important;flex-basis:60px !important;}
  .hero-section .hero-signature-name {font-size:1.72rem !important;}
  .hero-section .hero-signature-line {font-size:.78rem !important;}
}


/* WEB-001 V18 — MOBILE ONLY. A straight gold rule above the photograph,
   the approved curved gold edge below, and an intentionally composed first
   screen instead of a large empty teal block. The desktop CSS is untouched.
   Linked via media="screen and (max-width: 800px)" in index.html. */
@media screen and (max-width:800px) {
  .hero-section {
    display:flex !important;
    flex-direction:column !important;
    /* ensure the next section begins after the first viewport */
    min-height:calc(100svh - 70px) !important;
    padding:0 0 clamp(19px, 2.7svh, 30px) !important;
    background:#072f36 !important;
  }
  /* No second wave at the base of the hero. The only lower curve attaches
     directly to the image, and the top border is perfectly straight. */
  .hero-section .hero-floral-wave {display:none !important;}
  .hero-section .hero-inner {
    display:flex !important;
    flex-direction:column !important;
    flex:1 0 auto !important;
    min-height:0 !important;
    width:min(100%,610px) !important;
    max-width:610px !important;
    padding:clamp(20px, 3svh, 30px) 20px 0 !important;
    gap:0 !important;
    justify-content:space-between !important;
  }
  .hero-section .hero-copy {
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:space-evenly !important;
    gap:clamp(7px,1svh,12px) !important;
    min-height:0 !important;
    text-align:center !important;
  }
  .hero-section .hero-eyebrow,
  .hero-section .hero-copy h1,
  .hero-section .hero-tagline {
    margin:0 auto !important;
  }
  .hero-section .hero-actions {
    width:100% !important;
    margin:0 auto !important;
  }
  .hero-section .hero-signature {
    margin:0 auto !important;
    width:min(100%,340px) !important;
  }
  .hero-section .hero-inner .hero-art.hero-scene-v8 {
    margin:0 0 0 calc(50% - 50vw) !important;
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    flex:0 0 auto !important;
    /* The original unblurred three-piece scene covers the entire width. */
    background-image:url("images/optimized/hero-escenario-unificado-v8.webp") !important;
  }
  /* Straight gold top rule, matching the drawn blue guideline in the ref. */
  .hero-section .hero-inner .hero-art.hero-scene-v8::before {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:3px !important;
    z-index:4 !important;
    background:#DBAF60 !important;
    pointer-events:none !important;
  }
  /* Only the BOTTOM edge is curved: gold stroke against the teal field. */
  .hero-section .hero-inner .hero-art.hero-scene-v8::after {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    bottom:-1px !important;
    left:0 !important;
    right:0 !important;
    height:clamp(38px,12vw,65px) !important;
    z-index:4 !important;
    background: url("images/optimized/hero-curva-solo-dorada.svg") center bottom / 100% 100% no-repeat !important;
    pointer-events:none !important;
  }
}
@media screen and (max-width:540px) {
  .hero-section {min-height:calc(100svh - 70px) !important;}
  .hero-section .hero-inner {padding:clamp(17px,2.7svh,27px) 18px 0 !important;}
  .hero-section .hero-copy h1 {font-size:clamp(1.82rem,7.15vw,2.42rem) !important;}
}
@media screen and (max-width:355px) {
  .hero-section .hero-inner {padding-left:14px !important;padding-right:14px !important;}
  .hero-section .hero-copy h1 {font-size:clamp(1.64rem,7.3vw,1.85rem) !important;}
  .hero-section .hero-signature > img {width:57px !important;height:57px !important;flex-basis:57px !important;}
}
@media screen and (max-width:800px) and (max-height:680px) {
  /* Short devices: keep everything usable instead of forcing overlaps. */
  .hero-section .hero-inner {padding-top:16px !important;}
  .hero-section .hero-copy {gap:5px !important;}
  .hero-section .hero-signature > img {width:54px !important;height:54px !important;flex-basis:54px !important;}
  .hero-section .hero-signature-name {font-size:1.65rem !important;}
}

/* Mobile: render Soltzin crisply without GPU-dependent drop-shadow. */
@media screen and (max-width:800px){.hero-section .hero-signature > img {filter:none !important; position:relative !important; z-index:1 !important;}}