/* Fotografías aportadas por el usuario: apertura, Manejo integral, Casos y métodos y El siguiente paso.
   Las capas de tema y las transiciones siguen el tratamiento de la web vigente. */
.hero,.photo-section{position:relative;isolation:isolate;overflow:clip;background:var(--paper)}
.section-photo{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 5%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 5%,#000 78%,transparent)}
.section-photo picture,.section-photo img{display:block;width:100%;height:100%}
.section-photo img{object-fit:cover;object-position:50% 18%}
.section-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,254,250,.91) 0%,rgba(255,254,250,.86) 45%,rgba(255,254,250,.46) 100%)}
.hero-grid{display:block}
.hero-copy{max-width:820px}
.hero-copy>p:not(.eyebrow):not(.small){max-width:68ch}
.hero-copy .lead{max-width:650px}
.hero{padding-bottom:84px}
#manejo .section-photo{-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 83%,transparent);mask-image:linear-gradient(180deg,transparent,#000 10%,#000 83%,transparent)}
#manejo .section-photo img{object-position:50% 28%}
#manejo .section-photo::after{background:linear-gradient(90deg,rgba(255,254,250,.88),rgba(255,254,250,.75) 58%,rgba(255,254,250,.64))}
#manejo .card{background:rgba(255,254,250,.92)}
#manejo .note{background:rgba(234,240,229,.95)}
html[data-theme="dark"] .hero .section-photo::after{background:linear-gradient(90deg,rgba(23,38,31,.92) 0%,rgba(23,38,31,.86) 45%,rgba(23,38,31,.55) 100%)}
html[data-theme="dark"] #manejo .section-photo::after{background:linear-gradient(90deg,rgba(23,38,31,.90),rgba(23,38,31,.77) 58%,rgba(23,38,31,.64))}
html[data-theme="dark"] #manejo .card{background:rgba(23,38,31,.93)}
html[data-theme="dark"] #manejo .note{background:rgba(38,59,44,.95)}
@media(max-width:800px){.hero-copy{max-width:690px}.hero{padding-bottom:64px}}
@media(max-width:767px){
  .hero .section-photo img{object-position:45% 18%}
  .hero .section-photo::after{background:linear-gradient(90deg,rgba(255,254,250,.88),rgba(255,254,250,.81))}
  #manejo .section-photo img{object-position:58% 32%}
  #manejo .section-photo::after{background:rgba(255,254,250,.80)}
  html[data-theme="dark"] .hero .section-photo::after{background:linear-gradient(90deg,rgba(23,38,31,.88),rgba(23,38,31,.81))}
  html[data-theme="dark"] #manejo .section-photo::after{background:rgba(23,38,31,.81)}
}
/* En la sección larga de casos, el encuadre acompaña la lectura sin estirar la foto. */
#casos.photo-section{background:var(--sand)}
#casos .section-photo{overflow:clip;-webkit-mask-image:none;mask-image:none}
#casos .section-photo::after{display:none}
#casos .section-photo picture{position:sticky;top:calc(var(--header-height) + var(--subnav-height));height:max(420px,calc(100svh - var(--header-height) - var(--subnav-height)));-webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 6%,#000 86%,transparent)}
#casos .section-photo img{object-position:50% 50%}
#casos .section-photo picture::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,242,235,.90),rgba(243,242,235,.81) 55%,rgba(243,242,235,.66))}
#casos .case-card{background:rgba(255,254,250,.95)}
#casos .case-card.featured{background:rgba(243,242,235,.95)}
#casos .cases-intro{background:rgba(234,240,229,.96)}
html[data-theme="dark"] #casos .section-photo picture::after{background:linear-gradient(90deg,rgba(31,48,38,.91),rgba(31,48,38,.82) 55%,rgba(31,48,38,.66))}
html[data-theme="dark"] #casos .case-card{background:rgba(23,38,31,.96)}
html[data-theme="dark"] #casos .case-card.featured{background:rgba(31,48,38,.96)}
html[data-theme="dark"] #casos .cases-intro{background:rgba(38,59,44,.96)}
@media(max-width:767px){
  #casos .section-photo img{object-position:46% 50%}
  #casos .section-photo picture::after{background:rgba(243,242,235,.83)}
  html[data-theme="dark"] #casos .section-photo picture::after{background:rgba(31,48,38,.84)}
}
/* Sección 11: fondo continuo detrás de protocolos y contacto. */
#protocolos-sargazo.photo-section{background:var(--sand)}
#protocolos-sargazo .section-photo{overflow:clip;-webkit-mask-image:none;mask-image:none}
#protocolos-sargazo .section-photo::after{display:none}
#protocolos-sargazo .section-photo picture{position:sticky;top:calc(var(--header-height) + var(--subnav-height));height:max(420px,calc(100svh - var(--header-height) - var(--subnav-height)));-webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 6%,#000 86%,transparent)}
#protocolos-sargazo .section-photo img{object-position:56% 50%}
#protocolos-sargazo .section-photo picture::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,242,235,.90),rgba(243,242,235,.81) 55%,rgba(243,242,235,.65))}
#protocolos-sargazo .protocol-card{background:rgba(255,254,250,.95)}
html[data-theme="dark"] #protocolos-sargazo .section-photo picture::after{background:linear-gradient(90deg,rgba(31,48,38,.91),rgba(31,48,38,.83) 55%,rgba(31,48,38,.65))}
html[data-theme="dark"] #protocolos-sargazo .protocol-card{background:rgba(23,38,31,.96)}
@media(max-width:767px){
  #protocolos-sargazo .section-photo img{object-position:60% 50%}
  #protocolos-sargazo .section-photo picture::after{background:rgba(243,242,235,.83)}
  html[data-theme="dark"] #protocolos-sargazo .section-photo picture::after{background:rgba(31,48,38,.84)}
}
@media print{.section-photo{display:none!important}}