/* Heliotropia · Áreas de impacto · se suma a styles.css y sobre.css */
.area{position:relative;background:var(--negro-b);overflow:hidden}
.area__media{position:relative;overflow:hidden;line-height:0}
.area__bg{display:block;width:100%;height:auto;aspect-ratio:1600/961;object-fit:cover}
.area__shape{position:absolute;height:auto;display:block;pointer-events:none}
.area__card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(886px,55.4%);background:var(--blanco-a);color:var(--negro-b);border-radius:var(--radius-lg);padding:16px 22px;display:grid;gap:0;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.area__rule{display:block;height:1px;background:linear-gradient(90deg,var(--azul-a),var(--morado-b));opacity:.75}
.area__head{display:flex;align-items:center;gap:20px;padding:30px 0}
.area__icons{display:flex;gap:10px;flex:none;padding-right:20px;border-right:1px solid var(--morado-a)}
.area__icons svg{width:34px;height:34px;display:block}
.area__head h2{font:400 clamp(24px,2.2vw,32px)/1.2 var(--font-special);text-transform:uppercase;margin:0}
.area__card p{margin:0;padding:26px 0 30px;font:400 16px/1.5 var(--font-sans)}
@media (max-width:1180px){
  .area__card{width:min(886px,100% - 48px)}
  .area__card p{font-size:14px}
}
@media (max-width:860px){
  .area{background:var(--blanco-a);padding-bottom:40px}
  .area__bg{aspect-ratio:4/3}
  .area__card{position:relative;left:auto;top:auto;transform:none;width:calc(100% - 32px);margin:-48px auto 0;padding:14px 18px}
  .area__head{align-items:flex-start;flex-direction:column;gap:12px;padding:18px 0}
  .area__icons{border-right:0;padding-right:0}
  .area__head h2{font-size:26px}
  .area__card p{font-size:15px}
}

.area__media picture{display:contents}