/* Frame aprobado 2499:2685. Cabecera y pie siguen siendo los compartidos. */
.sustainability-page { background:#2b3220; }
.sustainability-container { width:calc(100% - 84px); max-width:1600px; margin-inline:auto; padding-top:165px; padding-bottom:110px; }
.sustainability-eyebrow { font-size:16px; margin-bottom:30px; text-transform:uppercase; }
.sustainability-intro { display:grid; grid-template-columns:1fr 1fr; gap:36px; min-height:180px; }
.sustainability-intro h1 { font:700 55px/64px var(--font-display); text-transform:uppercase; max-width:550px; }
.sustainability-intro p { font:400 18px/24px var(--font-body); letter-spacing:-.18px; max-width:575px; }
.sustainability-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 20px; margin-top:78px; align-items:start; perspective:1600px; }
.sustainability-tile { min-width:0; min-height:487px; background-color:var(--tile-bg); background-image:var(--tile-image); background-size:100% 100%; color:var(--tile-color); transform-origin:center; }
.sustainability-tile>summary { list-style:none; cursor:pointer; padding:36px 0 36px 28px; min-height:487px; position:relative; }
.sustainability-tile>summary::-webkit-details-marker { display:none; }
.sustainability-tile h2 { font:400 50px/60px var(--font-display); letter-spacing:-.5px; text-transform:uppercase; margin:0; max-width:min(250px,100%); overflow-wrap:normal; }
.sustainability-icon { position:absolute; bottom:60px; left:0; right:0; display:flex; justify-content:center; align-items:center; pointer-events:none; }
.sustainability-icon img { max-width:none; flex:none; }
.sustainability-tile>summary:focus-visible { outline:3px solid currentColor; outline-offset:-9px; }
.sustainability-tile[open]>summary { min-height:0; padding-right:28px; padding-bottom:20px; }
.sustainability-tile[open] h2 { font-size:32px; line-height:38px; }
.sustainability-tile[open] .sustainability-icon { display:none; }
.sustainability-copy { padding:0 28px 30px; }
.sustainability-copy p { font:400 17px/24px var(--font-body); margin-bottom:22px; }
.sustainability-copy a { display:inline-block; color:inherit; text-decoration:underline; text-underline-offset:4px; padding-block:12px; line-height:1.4; }
.sustainability-copy a:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
.sustainability-tile--amarillo { --tile-bg:#f5eb76; --tile-color:#0f0f0f; --tile-image:url('../Imagenes/Sostenibilidad/fondo-amarillo.svg'); }
.sustainability-tile--rojo { --tile-bg:#f24f30; --tile-color:#fff; --tile-image:url('../Imagenes/Sostenibilidad/fondo-rojo.svg'); }
.sustainability-tile--crema { --tile-bg:#f6efe3; --tile-color:#0f0f0f; --tile-image:url('../Imagenes/Sostenibilidad/fondo-crema.svg'); }
.sustainability-tile--oliva { --tile-bg:#736f3c; --tile-color:#fff; --tile-image:url('../Imagenes/Sostenibilidad/fondo-oliva.svg'); }
.sustainability-tile--verde { --tile-bg:#9fc46d; --tile-color:#fff; --tile-image:url('../Imagenes/Sostenibilidad/fondo-verde.svg'); }
.sustainability-tile--naranja { --tile-bg:#f18c29; --tile-color:#0f0f0f; --tile-image:url('../Imagenes/Sostenibilidad/fondo-naranja.svg'); }
.sustainability-tile--territorio { --tile-bg:#f24f30; --tile-color:#fff; --tile-image:url('../Imagenes/Sostenibilidad/fondo-rojo-territorio.svg'); }
.sustainability-tile--circular { --tile-bg:#9fc46d; --tile-color:#fff; --tile-image:url('../Imagenes/Sostenibilidad/fondo-verde-circular.svg'); }
@media(max-width:1200px) {
  .sustainability-container { width:calc(100% - 48px); padding-top:135px; }
  .sustainability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .sustainability-intro { gap:28px; }
  .sustainability-intro h1 { font-size:46px; line-height:54px; }
}
@media(max-width:600px) {
  .sustainability-container { padding-top:120px; padding-bottom:65px; }
  .sustainability-intro { grid-template-columns:minmax(0,1fr); }
  .sustainability-intro h1 { font-size:40px; line-height:48px; }
  .sustainability-grid { grid-template-columns:minmax(0,1fr); margin-top:48px; }
  .sustainability-tile h2 { font-size:46px; line-height:54px; }
  .sustainability-tile[open] h2 { font-size:32px; line-height:38px; }
}

.sustainability-tile:has(img[src$="envases.svg"]) h2 { max-width:min(262px,100%); }
.sustainability-tile:has(img[src$="saludable.svg"]) h2 { max-width:min(295px,100%); }
.sustainability-tile:has(img[src$="social.svg"]) h2 { max-width:min(289px,100%); }
.sustainability-tile:has(img[src$="territorio.svg"]) h2 { max-width:min(300px,100%); }
.sustainability-tile--verde[open], .sustainability-tile--circular[open], .sustainability-tile--rojo[open], .sustainability-tile--territorio[open] { color:#0f0f0f; }