/* ROSCOGAS WEB · HOGARES V1 */

.home-header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:40;
}

.home-nav{
  min-height:84px;
  display:flex;
  align-items:center;
  gap:28px;
}

.home-brand img{
  width:150px;
}

.home-links{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:25px;
  color:var(--navy);
  font-size:.88rem;
  font-weight:800;
}

.home-links a.active,
.home-links a:hover{
  color:var(--orange);
}

.home-order{
  min-height:44px;
}

.home-hero{
  padding:42px 0 34px;
  background:linear-gradient(180deg,#fff 0%,#fff9f5 100%);
}

.home-hero-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  align-items:center;
  gap:30px;
}

.home-hero-copy h1{
  margin:8px 0 18px;
  max-width:630px;
  color:var(--navy);
  font-size:clamp(3rem,4.7vw,4.8rem);
  line-height:.95;
  letter-spacing:-.055em;
}

.home-hero-copy h1 span{
  color:var(--orange);
  display:block;
}

.home-hero-copy>p{
  max-width:590px;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.65;
}

.home-hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}

.home-trust{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:26px;
  color:var(--navy);
  font-size:.83rem;
  font-weight:800;
}

.home-hero-photo{
  min-height:520px;
  border-radius:26px;
  overflow:hidden;
  background:#eef3f5;
}

.home-hero-photo img{
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
  object-position:center;
}

.home-section{
  padding:58px 0;
}

.home-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
}

.home-intro-grid>p{
  color:var(--muted);
  line-height:1.7;
  margin:0;
}

.home-section-head{
  margin-bottom:28px;
}

.home-presentations{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.home-presentations article{
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.home-presentations article.featured{
  border-color:var(--orange);
  background:#fff8f4;
}

.home-presentations strong{
  display:block;
  color:var(--navy);
  font-size:2rem;
}

.home-presentations span{
  color:var(--orange);
  font-weight:900;
}

.home-presentations p{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.55;
}

.home-center{
  text-align:center;
  margin-top:24px;
}

.home-benefits{
  background:#f7fafb;
}

.home-benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:30px;
}

.home-benefit-grid article{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px;
}

.home-number{
  color:var(--orange);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
}

.home-benefit-grid h3{
  color:var(--navy);
  margin:12px 0 8px;
  font-size:1.25rem;
}

.home-benefit-grid p{
  color:var(--muted);
  line-height:1.6;
  margin:0;
}

.home-safety-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.home-safety-photo{
  min-height:430px;
}

.home-safety-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.home-safety-copy{
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.home-safety-copy>p{
  color:var(--muted);
  line-height:1.65;
}

.home-safety-list{
  display:grid;
  gap:10px;
  margin:12px 0 24px;
}

.home-safety-list span{
  color:var(--navy);
  font-weight:750;
}

.home-safety-list span:before{
  content:"✓";
  color:var(--orange);
  margin-right:9px;
}

.home-faq{
  background:#fafbfc;
}

.home-faq-grid{
  max-width:900px;
  margin-top:28px;
  display:grid;
  gap:10px;
}

.home-faq details{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:17px 20px;
}

.home-faq summary{
  color:var(--navy);
  font-weight:900;
  cursor:pointer;
}

.home-faq details p{
  color:var(--muted);
  line-height:1.6;
  margin:12px 0 2px;
}

.home-final{
  padding:0 0 58px;
}

.home-final-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  padding:34px;
  border-radius:22px;
  background:linear-gradient(135deg,#ff4b0a,#ff6a00);
  color:#fff;
}

.home-final-card h2{
  margin:4px 0;
  font-size:2rem;
}

.home-final-card p{
  margin:0;
}

.home-final-card .section-kicker{
  color:#fff;
  opacity:.85;
}

.home-final-button{
  background:#fff;
  color:var(--orange);
  white-space:nowrap;
}

.home-footer{
  background:#ff570f;
  color:#fff;
  padding:34px 0;
}

.home-footer-grid{
  display:grid;
  grid-template-columns:.8fr 1fr 1fr;
  align-items:center;
  gap:36px;
}

.home-footer img{
  width:145px;
  background:#fff;
  border-radius:8px;
}

.home-footer-grid>div{
  display:grid;
  gap:6px;
}

.home-footer-message{
  font-size:1.55rem;
  font-weight:900;
  font-style:italic;
}

@media(max-width:980px){

  .home-nav{
    min-height:68px;
  }

  .home-brand img{
    width:135px;
  }

  .home-links{
    display:none;
  }

  .home-order{
    margin-left:auto;
  }

  .home-hero{
    padding-top:24px;
  }

  .home-hero-grid{
    grid-template-columns:1fr;
  }

  .home-hero-copy h1{
    font-size:clamp(2.65rem,10vw,4rem);
  }

  .home-hero-photo,
  .home-hero-photo img{
    min-height:360px;
  }

  .home-intro-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .home-presentations{
    grid-template-columns:1fr 1fr;
  }

  .home-benefit-grid{
    grid-template-columns:1fr;
  }

  .home-safety-card{
    grid-template-columns:1fr;
  }

  .home-safety-photo{
    min-height:340px;
  }

  .home-footer-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){

  .home-order{
    display:none;
  }

  .home-section{
    padding:42px 0;
  }

  .home-hero-copy h1{
    font-size:clamp(2.45rem,12vw,3.25rem);
  }

  .home-hero-photo,
  .home-hero-photo img{
    min-height:310px;
  }

  .home-presentations{
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .home-presentations article{
    padding:17px 14px;
  }

  .home-presentations strong{
    font-size:1.55rem;
  }

  .home-safety-copy{
    padding:26px 20px;
  }

  .home-final-card{
    align-items:flex-start;
    flex-direction:column;
  }
}
/* HOGARES-H3 � compactar ritmo vertical */
.home-intro{
  padding-top:46px;
  padding-bottom:34px;
}

.home-intro-grid{
  align-items:center;
}

.home-intro-grid .section-title{
  max-width:520px;
}

#presentaciones{
  padding-top:28px;
}

@media(max-width:980px){
  .home-intro{
    padding-top:38px;
    padding-bottom:26px;
  }

  #presentaciones{
    padding-top:22px;
  }
}

/* HOGARES-H4 � Presentaciones visuales */
.home-presentation-showcase{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}

.home-presentation-visual{
  padding:28px;
  background:linear-gradient(180deg,#fff9f5 0%,#fff 100%);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.home-presentation-visual img{
  width:100%;
  height:300px;
  object-fit:contain;
}

.home-presentation-note{
  margin-top:12px;
  text-align:center;
  color:var(--muted);
  font-size:.78rem;
}

.home-presentation-guide{
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.home-presentation-guide h3{
  color:var(--navy);
  font-size:1.65rem;
  line-height:1.08;
  margin:7px 0 22px;
}

.home-presentation-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:22px;
}

.home-presentation-options article{
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px;
}

.home-presentation-options article.featured{
  border-color:var(--orange);
  background:#fff8f4;
}

.home-presentation-options strong{
  display:block;
  color:var(--navy);
  font-size:1.3rem;
}

.home-presentation-options span{
  color:var(--orange);
  font-size:.82rem;
  font-weight:900;
}

.home-presentation-options p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:.78rem;
}

@media(max-width:980px){
  .home-presentation-showcase{
    grid-template-columns:1fr;
  }

  .home-presentation-visual img{
    height:240px;
  }
}

@media(max-width:640px){
  .home-presentation-visual{
    padding:20px 14px;
  }

  .home-presentation-guide{
    padding:24px 18px;
  }

  .home-presentation-options{
    gap:8px;
  }

  .home-presentation-options article{
    padding:12px;
  }
}

/* HOGARES-H5 � beneficios */
.home-benefits{
  padding-top:50px;
  padding-bottom:56px;
  background:linear-gradient(180deg,#f8fafb 0%,#fff 100%);
}

.home-benefit-grid{
  gap:14px;
}

.home-benefit-grid article{
  position:relative;
  min-height:190px;
  padding:28px 26px 25px;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.home-benefit-grid article::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:var(--orange);
}

.home-benefit-grid article:hover{
  transform:translateY(-3px);
  border-color:rgba(255,87,15,.35);
  box-shadow:0 16px 35px rgba(8,47,74,.08);
}

.home-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff1ea;
  color:var(--orange);
  letter-spacing:0;
  font-size:.76rem;
}

.home-benefit-grid h3{
  margin-top:18px;
  font-size:1.3rem;
}

.home-benefit-grid p{
  max-width:310px;
}

@media(max-width:640px){
  .home-benefits{
    padding-top:40px;
    padding-bottom:42px;
  }

  .home-benefit-grid article{
    min-height:auto;
    padding:22px 20px;
  }
}

/* ============================================================
   HOGARES-H6 � SEGURIDAD + FAQ
   ============================================================ */

.home-safety{
  padding-top:58px;
  padding-bottom:58px;
}

.home-safety-card{
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(8,47,74,.08);
}

.home-safety-photo{
  position:relative;
}

.home-safety-photo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(8,47,74,.03) 0%,
    rgba(8,47,74,0) 40%
  );
}

.home-safety-copy{
  padding:46px 44px;
}

.home-safety-copy .section-title{
  max-width:480px;
}

.home-safety-list{
  gap:12px;
}

.home-safety-list span{
  display:flex;
  align-items:flex-start;
  gap:7px;
  line-height:1.45;
}

.home-safety-list span::before{
  flex:0 0 auto;
}

.home-faq{
  padding-top:56px;
  padding-bottom:58px;
  background:linear-gradient(180deg,#fafbfc 0%,#fff 100%);
}

.home-faq-grid{
  max-width:none;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.home-faq details{
  min-height:74px;
  padding:19px 20px;
  transition:border-color .18s ease,box-shadow .18s ease;
}

.home-faq details[open]{
  border-color:rgba(255,87,15,.35);
  box-shadow:0 12px 28px rgba(8,47,74,.06);
}

.home-faq summary{
  list-style:none;
  position:relative;
  padding-right:28px;
}

.home-faq summary::-webkit-details-marker{
  display:none;
}

.home-faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:-3px;
  color:var(--orange);
  font-size:1.35rem;
  font-weight:900;
}

.home-faq details[open] summary::after{
  content:"�";
}

.home-final{
  padding-top:6px;
}

@media(max-width:980px){

  .home-safety{
    padding-top:46px;
    padding-bottom:46px;
  }

  .home-safety-copy{
    padding:34px 28px;
  }

  .home-faq-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){

  .home-safety-copy{
    padding:28px 20px;
  }

  .home-faq{
    padding-top:42px;
    padding-bottom:44px;
  }

  .home-faq details{
    min-height:auto;
    padding:17px 16px;
  }
}

/* HOGARES-H7 � afinar Presentaciones residencial */
.home-presentations-section{
  padding-top:34px;
  padding-bottom:48px;
}

.home-presentation-showcase{
  grid-template-columns:.96fr 1.04fr;
}

.home-presentation-visual{
  padding:22px 24px 18px;
  overflow:hidden;
}

.home-presentation-visual img{
  width:118%;
  max-width:none;
  height:255px;
  object-fit:contain;
  transform:translateX(-16%);
}

.home-presentation-note{
  margin-top:4px;
}

.home-presentation-guide{
  padding:28px 30px;
}

.home-presentation-guide h3{
  margin-bottom:17px;
}

.home-presentation-options{
  margin-bottom:17px;
}

@media(max-width:980px){
  .home-presentation-visual img{
    width:116%;
    height:230px;
    transform:translateX(-14%);
  }
}

@media(max-width:640px){
  .home-presentations-section{
    padding-top:24px;
    padding-bottom:38px;
  }

  .home-presentation-visual img{
    width:118%;
    height:205px;
    transform:translateX(-16%);
  }
}

/* ============================================================
   HOGARES-H8 � selector de presentacion
   ============================================================ */

/* Recuperamos la imagen completa: incluye 100 lb */
.home-presentation-visual img{
  width:100%;
  max-width:100%;
  height:255px;
  object-fit:contain;
  transform:none;
}

.home-presentation-options{
  grid-template-columns:1fr 1fr;
}

.home-presentation-option{
  appearance:none;
  width:100%;
  display:block;
  text-align:left;
  font:inherit;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px;
  cursor:pointer;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.home-presentation-option:hover{
  border-color:rgba(255,87,15,.45);
  transform:translateY(-1px);
}

.home-presentation-option.selected{
  border-color:var(--orange);
  background:#fff7f2;
  box-shadow:0 8px 20px rgba(255,87,15,.08);
}

.home-presentation-option strong{
  display:block;
  color:var(--navy);
  font-size:1.3rem;
}

.home-presentation-option span{
  color:var(--orange);
  font-size:.82rem;
  font-weight:900;
}

.home-presentation-option p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:.78rem;
}

.home-presentation-option-wide{
  grid-column:1 / -1;
}

@media(max-width:980px){
  .home-presentation-visual img{
    width:100%;
    height:235px;
    transform:none;
  }
}

@media(max-width:640px){
  .home-presentation-visual img{
    width:100%;
    height:205px;
    transform:none;
  }
}

/* HOGARES-H10 � corregir Presentaciones en tablet/m�vil */
@media(max-width:980px){

  .home-presentation-showcase{
    grid-template-columns:1fr;
  }

  .home-presentation-visual{
    width:100%;
    padding:22px 18px 18px;
  }

  .home-presentation-visual img{
    display:block;
    width:100%;
    max-width:100%;
    height:230px;
    object-fit:contain;
    transform:none;
  }

  .home-presentation-note{
    width:100%;
    text-align:center;
  }

  .home-presentation-guide{
    width:100%;
  }
}

@media(max-width:640px){

  .home-presentation-visual{
    padding:18px 12px 14px;
  }

  .home-presentation-visual img{
    height:190px;
  }

  .home-presentation-guide{
    padding:24px 18px;
  }

  .home-presentation-options{
    grid-template-columns:1fr 1fr;
  }

  .home-presentation-option-wide{
    grid-column:1 / -1;
  }

  #presentationAvailability{
    width:100%;
    text-align:center;
  }
}

/* ============================================================
   HOGARES-H11-R1 · MENU MOVIL
   ============================================================ */

.home-nav{
  position:relative;
}

.home-menu-toggle{
  display:none;
  width:42px;
  height:42px;
  padding:9px;
  border:0;
  background:transparent;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}

.home-menu-toggle span{
  display:block;
  width:24px;
  height:2px;
  border-radius:3px;
  background:var(--navy);
  transition:
    transform .18s ease,
    opacity .18s ease;
}

.home-menu-toggle.is-open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.home-menu-toggle.is-open span:nth-child(2){
  opacity:0;
}

.home-menu-toggle.is-open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media(max-width:980px){

  .home-menu-toggle{
    display:flex;
    margin-left:auto;
  }

  .home-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:100;
    padding:12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:0 0 16px 16px;
    box-shadow:0 18px 38px rgba(8,47,74,.12);
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }

  .home-links.is-open{
    display:flex;
  }

  .home-links a{
    display:block;
    padding:12px 10px;
    border-radius:9px;
  }

  .home-links a.active,
  .home-links a:hover{
    color:var(--orange);
    background:#fff5f0;
  }
}

@media(max-width:640px){

  .home-nav{
    min-height:68px;
  }

  .home-menu-toggle{
    display:flex;
    margin-left:auto;
  }
}

/* ============================================================
   ROSCOGAS � COMERCIO V1
   ============================================================ */

.commerce-kicker{
  color:var(--orange);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.commerce-hero{
  background:linear-gradient(180deg,#fff 0%,#fff9f5 100%);
}

.commerce-hero-grid{
  min-height:520px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  align-items:center;
  gap:42px;
  padding:42px 0;
}

.commerce-hero-copy h1{
  max-width:600px;
  margin:14px 0 18px;
  color:var(--navy);
  font-size:clamp(3rem,4.4vw,4.65rem);
  line-height:.96;
  letter-spacing:-.05em;
}

.commerce-hero-copy h1 span{
  display:block;
  color:var(--orange);
}

.commerce-hero-copy>p{
  max-width:590px;
  color:var(--muted);
  line-height:1.65;
  font-size:1.02rem;
}

.commerce-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}

.commerce-promises{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin-top:28px;
  color:var(--navy);
  font-size:.84rem;
  font-weight:800;
}

.commerce-hero-media{
  min-height:430px;
  overflow:hidden;
  border-radius:26px;
  background:#eef3f5;
  box-shadow:0 20px 48px rgba(8,47,74,.11);
}

.commerce-hero-media img{
  width:100%;
  height:100%;
  min-height:430px;
  display:block;
  object-fit:cover;
}

.commerce-intro{
  padding:54px 0;
}

.commerce-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.commerce-intro h2,
.commerce-section-head h2{
  margin:8px 0 0;
  color:var(--navy);
  font-size:clamp(2rem,3vw,2.8rem);
  line-height:1.03;
  letter-spacing:-.035em;
}

.commerce-intro p,
.commerce-section-head>p{
  color:var(--muted);
  line-height:1.65;
}

.commerce-businesses,
.commerce-benefits,
.commerce-faq{
  padding:60px 0;
  background:#f7fafb;
}

.commerce-section-head{
  margin-bottom:30px;
}

.commerce-section-head>p{
  max-width:650px;
  margin-top:10px;
}

.commerce-business-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.commerce-business-card{
  min-height:220px;
  padding:24px;
  border:1px solid var(--line);
  border-top:3px solid var(--orange);
  border-radius:18px;
  background:#fff;
}

.commerce-number,
.commerce-benefit-grid article>span{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff1e9;
  color:var(--orange);
  font-size:.76rem;
  font-weight:900;
}

.commerce-business-card h3,
.commerce-benefit-grid h3{
  margin:20px 0 8px;
  color:var(--navy);
}

.commerce-business-card p,
.commerce-benefit-grid p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.commerce-supply{
  padding:66px 0;
}

.commerce-supply-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 34px rgba(8,47,74,.06);
}

.commerce-supply-copy{
  padding:34px;
}

.commerce-supply-copy h3{
  margin:8px 0 8px;
  color:var(--navy);
  font-size:1.7rem;
  line-height:1.08;
}

.commerce-supply-copy>p{
  color:var(--muted);
  line-height:1.55;
}

.commerce-option-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:22px 0;
}

.commerce-option{
  appearance:none;
  min-height:126px;
  padding:16px;
  text-align:left;
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  font:inherit;
  transition:.18s ease;
}

.commerce-option:hover{
  transform:translateY(-1px);
  border-color:rgba(255,87,15,.45);
}

.commerce-option.selected{
  border-color:var(--orange);
  background:#fff7f2;
  box-shadow:0 7px 18px rgba(255,87,15,.08);
}

.commerce-option strong{
  display:block;
  color:var(--navy);
  font-size:1.2rem;
}

.commerce-option span{
  display:block;
  margin-top:3px;
  color:var(--orange);
  font-size:.8rem;
  font-weight:900;
}

.commerce-option small{
  display:block;
  margin-top:8px;
  color:var(--muted);
  line-height:1.4;
}

.commerce-option-granel{
  grid-column:1 / -1;
}

.commerce-whatsapp{
  width:100%;
  text-align:center;
}

.commerce-note{
  margin-top:12px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.45;
}

.commerce-supply-visual{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px;
  background:#fff8f4;
}

.commerce-supply-visual>img{
  width:100%;
  max-height:260px;
  object-fit:contain;
}

.commerce-granel-box{
  margin-top:24px;
  padding:18px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
}

.commerce-granel-box strong,
.commerce-granel-box span{
  display:block;
}

.commerce-granel-box strong{
  color:var(--navy);
}

.commerce-granel-box span{
  margin-top:6px;
  color:var(--muted);
  line-height:1.5;
  font-size:.88rem;
}

.commerce-benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.commerce-benefit-grid article{
  padding:26px;
  border:1px solid var(--line);
  border-top:3px solid var(--orange);
  border-radius:18px;
  background:#fff;
}

.commerce-safety{
  padding:66px 0;
}

.commerce-safety-card{
  display:grid;
  grid-template-columns:1fr .9fr;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
}

.commerce-safety-copy{
  padding:38px;
}

.commerce-safety-copy h2{
  margin:8px 0 12px;
  color:var(--navy);
  font-size:2.3rem;
  line-height:1.05;
}

.commerce-safety-copy>p{
  color:var(--muted);
  line-height:1.6;
}

.commerce-safety-copy ul{
  padding:0;
  margin:22px 0;
  list-style:none;
}

.commerce-safety-copy li{
  position:relative;
  margin:11px 0;
  padding-left:23px;
  color:var(--navy);
  font-weight:700;
}

.commerce-safety-copy li::before{
  content:"?";
  position:absolute;
  left:0;
  color:var(--orange);
}

.commerce-safety-image img{
  width:100%;
  height:100%;
  min-height:410px;
  display:block;
  object-fit:cover;
}

.commerce-faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.commerce-faq details{
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
}

.commerce-faq summary{
  cursor:pointer;
  color:var(--navy);
  font-weight:850;
}

.commerce-faq details p{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.55;
}

.commerce-final{
  padding:54px 0;
}

.commerce-final-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:32px;
  border-radius:20px;
  background:var(--orange);
  color:#fff;
}

.commerce-kicker-light{
  color:#fff;
}

.commerce-final h2{
  margin:7px 0 5px;
  color:#fff;
  font-size:2rem;
}

.commerce-final p{
  margin:0;
}

.commerce-final-button{
  flex:0 0 auto;
  display:inline-flex;
  padding:14px 20px;
  border-radius:11px;
  background:#fff;
  color:var(--orange);
  text-decoration:none;
  font-weight:900;
}

@media(max-width:980px){

  .commerce-hero-grid,
  .commerce-intro-grid,
  .commerce-supply-panel,
  .commerce-safety-card{
    grid-template-columns:1fr;
  }

  .commerce-hero-grid{
    min-height:auto;
    gap:24px;
    padding:28px 0 36px;
  }

  .commerce-hero-media{
    min-height:330px;
  }

  .commerce-hero-media img{
    min-height:330px;
  }

  .commerce-business-grid{
    grid-template-columns:1fr 1fr;
  }

  .commerce-benefit-grid{
    grid-template-columns:1fr;
  }

  .commerce-safety-image{
    order:-1;
  }

  .commerce-safety-image img{
    min-height:320px;
  }
}

@media(max-width:640px){

  .commerce-hero-copy h1{
    font-size:clamp(2.65rem,12vw,3.35rem);
  }

  .commerce-actions{
    flex-direction:column;
    align-items:flex-start;
  }

  .commerce-promises{
    flex-direction:column;
    gap:8px;
  }

  .commerce-hero-media{
    min-height:270px;
    border-radius:18px;
  }

  .commerce-hero-media img{
    min-height:270px;
  }

  .commerce-intro,
  .commerce-businesses,
  .commerce-supply,
  .commerce-benefits,
  .commerce-safety,
  .commerce-faq{
    padding:42px 0;
  }

  .commerce-intro-grid{
    gap:18px;
  }

  .commerce-business-grid,
  .commerce-faq-grid{
    grid-template-columns:1fr;
  }

  .commerce-supply-copy,
  .commerce-supply-visual,
  .commerce-safety-copy{
    padding:22px 18px;
  }

  .commerce-option-grid{
    grid-template-columns:1fr 1fr;
  }

  .commerce-option{
    min-height:138px;
    padding:13px;
  }

  .commerce-supply-visual>img{
    max-height:210px;
  }

  .commerce-safety-copy h2{
    font-size:1.9rem;
  }

  .commerce-final-box{
    align-items:flex-start;
    flex-direction:column;
    padding:26px 20px;
  }

  .commerce-final-button{
    width:100%;
    justify-content:center;
  }
}

/* ============================================================
   COMERCIO C5 � HERO VISUAL
   Evitar apariencia de imagen estirada
   ============================================================ */

.commerce-hero-media{
  min-height:0;
  aspect-ratio:16 / 10;
}

.commerce-hero-media img{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center center;
}

@media(max-width:980px){
  .commerce-hero-media{
    min-height:0;
    aspect-ratio:16 / 9;
  }

  .commerce-hero-media img{
    min-height:0;
  }
}

@media(max-width:640px){
  .commerce-hero-media{
    min-height:0;
    aspect-ratio:16 / 10;
  }

  .commerce-hero-media img{
    min-height:0;
  }
}

/* ============================================================
   COMERCIO C6 � ALINEACION VISUAL TARJETAS
   ============================================================ */

.commerce-business-grid{
  align-items:stretch;
}

.commerce-business-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:232px;
  padding:22px 22px 24px;
}

.commerce-business-card .commerce-number{
  flex:0 0 auto;
  margin-bottom:18px;
}

.commerce-business-card h3{
  min-height:46px;
  margin:0 0 10px;
  display:flex;
  align-items:flex-start;
  color:var(--navy);
  line-height:1.22;
}

.commerce-business-card p{
  margin:0;
  min-height:92px;
  color:var(--muted);
  line-height:1.58;
}

@media(max-width:980px){

  .commerce-business-card{
    min-height:220px;
  }

  .commerce-business-card h3{
    min-height:auto;
  }

  .commerce-business-card p{
    min-height:auto;
  }
}

@media(max-width:640px){

  .commerce-business-card{
    min-height:0;
    padding:20px;
  }

  .commerce-business-card .commerce-number{
    margin-bottom:15px;
  }
}

/* ============================================================
   ROSCOGAS WEB · INDUSTRIA V1
   Diseño propio del segmento industrial
   ============================================================ */

.industry-kicker{
  color:var(--orange);
  font-size:.73rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}


/* ============================================================
   HERO
   ============================================================ */

.industry-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 18%,rgba(244,81,18,.08),transparent 30%),
    linear-gradient(180deg,#fff 0%,#fff9f5 100%);
}

.industry-hero::after{
  content:"";
  position:absolute;
  right:-180px;
  bottom:-260px;
  width:520px;
  height:520px;
  border-radius:50%;
  border:70px solid rgba(8,47,74,.025);
  pointer-events:none;
}

.industry-hero-grid{
  position:relative;
  z-index:1;
  min-height:540px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  align-items:center;
  gap:46px;
  padding:46px 0;
}

.industry-hero-copy h1{
  max-width:640px;
  margin:14px 0 18px;
  color:var(--navy);
  font-size:clamp(3rem,4.5vw,4.8rem);
  line-height:.96;
  letter-spacing:-.052em;
}

.industry-hero-copy h1 span{
  display:block;
  color:var(--orange);
}

.industry-hero-copy>p{
  max-width:610px;
  margin:0;
  color:var(--muted);
  font-size:1.03rem;
  line-height:1.68;
}

.industry-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.industry-promises{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:30px;
  color:var(--navy);
  font-size:.84rem;
  font-weight:800;
}

.industry-promises span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.industry-hero-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 10;
  border-radius:26px;
  background:#e8eef1;
  box-shadow:0 22px 54px rgba(8,47,74,.13);
}

.industry-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.35);
  border-radius:inherit;
  pointer-events:none;
}

.industry-hero-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}


/* ============================================================
   INTRO
   ============================================================ */

.industry-intro{
  padding:58px 0;
  background:#fff;
}

.industry-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:72px;
}

.industry-intro h2,
.industry-section-head h2,
.industry-supply-copy h2{
  margin:8px 0 0;
  color:var(--navy);
  font-size:clamp(2rem,3vw,2.82rem);
  line-height:1.04;
  letter-spacing:-.038em;
}

.industry-intro p,
.industry-section-head>p,
.industry-supply-copy>p{
  color:var(--muted);
  line-height:1.68;
}

.industry-intro p{
  margin:0;
}


/* ============================================================
   NECESIDADES DE OPERACION
   ============================================================ */

.industry-needs{
  padding:66px 0;
  background:#f7fafb;
}

.industry-section-head{
  margin-bottom:31px;
}

.industry-section-head>p{
  max-width:680px;
  margin:11px 0 0;
}

.industry-needs-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  align-items:stretch;
}

.industry-need-card{
  position:relative;
  min-height:245px;
  display:flex;
  flex-direction:column;
  padding:24px;
  overflow:hidden;
  border:1px solid var(--line);
  border-top:3px solid var(--orange);
  border-radius:18px;
  background:#fff;
  transition:transform .18s ease,box-shadow .18s ease;
}

.industry-need-card:hover{
  transform:translateY(-2px);
  box-shadow:0 13px 30px rgba(8,47,74,.07);
}

.industry-number,
.industry-benefit-grid article>span{
  width:35px;
  height:35px;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--orange-soft);
  color:var(--orange);
  font-size:.76rem;
  font-weight:900;
}

.industry-need-card h3{
  min-height:48px;
  margin:20px 0 10px;
  color:var(--navy);
  line-height:1.22;
}

.industry-need-card p{
  margin:0;
  color:var(--muted);
  line-height:1.58;
}


/* ============================================================
   PROCESO DE EVALUACION
   ============================================================ */

.industry-process{
  padding:70px 0;
  background:#fff;
}

.industry-process-panel{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  box-shadow:0 16px 38px rgba(8,47,74,.07);
}

.industry-process-copy{
  padding:38px;
}

.industry-process-step{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:17px;
  padding:21px 0;
  border-bottom:1px solid var(--line);
}

.industry-process-step:first-child{
  padding-top:0;
}

.industry-process-step:nth-child(3){
  border-bottom:0;
}

.industry-process-step>span{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:var(--orange-soft);
  color:var(--orange);
  font-size:.78rem;
  font-weight:900;
}

.industry-process-step h3{
  margin:1px 0 6px;
  color:var(--navy);
  font-size:1.12rem;
}

.industry-process-step p{
  margin:0;
  color:var(--muted);
  line-height:1.58;
}

.industry-whatsapp{
  width:100%;
  margin-top:25px;
  text-align:center;
}

.industry-process-aside{
  display:flex;
  align-items:stretch;
  padding:34px;
  background:
    linear-gradient(145deg,var(--navy) 0%,#12435f 100%);
}

.industry-process-highlight{
  width:100%;
  min-height:340px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:32px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:
    radial-gradient(circle at 85% 15%,rgba(244,81,18,.32),transparent 32%),
    rgba(255,255,255,.04);
  color:#fff;
}

.industry-process-highlight>span{
  color:#ff9868;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
}

.industry-process-highlight strong{
  display:block;
  max-width:430px;
  margin-top:12px;
  color:#fff;
  font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1.06;
  letter-spacing:-.035em;
}

.industry-process-highlight p{
  max-width:420px;
  margin:15px 0 0;
  color:rgba(255,255,255,.74);
  line-height:1.62;
}


/* ============================================================
   MODALIDADES DE SUMINISTRO
   ============================================================ */

.industry-supply{
  padding:70px 0;
  background:#fff8f4;
}

.industry-supply-grid{
  display:grid;
  grid-template-columns:1fr .92fr;
  align-items:center;
  gap:60px;
}

.industry-supply-copy>p{
  max-width:620px;
  margin:14px 0 0;
}

.industry-supply-options{
  display:grid;
  gap:12px;
  margin-top:28px;
}

.industry-supply-options article{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:15px;
  padding:19px;
  border:1px solid rgba(8,47,74,.09);
  border-radius:15px;
  background:#fff;
}

.industry-supply-options article>span{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--orange-soft);
  color:var(--orange);
  font-size:.75rem;
  font-weight:900;
}

.industry-supply-options h3{
  margin:1px 0 5px;
  color:var(--navy);
}

.industry-supply-options p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.industry-supply-visual{
  padding:30px;
  border:1px solid rgba(8,47,74,.08);
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 34px rgba(8,47,74,.06);
}

.industry-supply-visual img{
  width:100%;
  max-height:300px;
  object-fit:contain;
}

.industry-supply-visual p{
  margin:18px 0 0;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.88rem;
  line-height:1.55;
}


/* ============================================================
   BENEFICIOS
   ============================================================ */

.industry-benefits{
  padding:66px 0;
  background:#f7fafb;
}

.industry-benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.industry-benefit-grid article{
  min-height:210px;
  padding:27px;
  border:1px solid var(--line);
  border-top:3px solid var(--orange);
  border-radius:18px;
  background:#fff;
}

.industry-benefit-grid h3{
  margin:20px 0 8px;
  color:var(--navy);
}

.industry-benefit-grid p{
  margin:0;
  color:var(--muted);
  line-height:1.58;
}


/* ============================================================
   SEGURIDAD
   ============================================================ */

.industry-safety{
  padding:72px 0;
  background:#fff;
}

.industry-safety-card{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  overflow:hidden;
  border-radius:24px;
  background:var(--navy);
  box-shadow:0 18px 42px rgba(8,47,74,.13);
}

.industry-safety-copy{
  padding:42px;
}

.industry-kicker-light{
  color:#ff9a6a;
}

.industry-safety-copy h2{
  max-width:650px;
  margin:9px 0 14px;
  color:#fff;
  font-size:clamp(2rem,3.2vw,2.7rem);
  line-height:1.05;
  letter-spacing:-.037em;
}

.industry-safety-copy>p{
  max-width:640px;
  color:rgba(255,255,255,.72);
  line-height:1.64;
}

.industry-safety-copy ul{
  padding:0;
  margin:24px 0;
  list-style:none;
}

.industry-safety-copy li{
  position:relative;
  margin:12px 0;
  padding-left:25px;
  color:#fff;
  font-weight:700;
}

.industry-safety-copy li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#ff8c55;
}

.industry-safety-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 20px;
  border-radius:12px;
  background:#fff;
  color:var(--navy);
  font-weight:900;
  transition:.18s ease;
}

.industry-safety-button:hover{
  transform:translateY(-1px);
}

.industry-safety-mark{
  min-height:440px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:42px;
  background:
    radial-gradient(circle at 75% 18%,rgba(255,125,64,.35),transparent 32%),
    linear-gradient(145deg,#103e59,#07283d);
  border-left:1px solid rgba(255,255,255,.08);
}

.industry-safety-icon{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  margin-bottom:24px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:20px;
  background:rgba(255,255,255,.08);
  color:#ff9765;
  font-size:2rem;
  font-weight:900;
}

.industry-safety-mark strong{
  color:#fff;
  font-size:1.55rem;
}

.industry-safety-mark p{
  max-width:390px;
  margin:10px 0 0;
  color:rgba(255,255,255,.7);
  line-height:1.6;
}


/* ============================================================
   FAQ
   ============================================================ */

.industry-faq{
  padding:66px 0;
  background:#f7fafb;
}

.industry-faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}

.industry-faq details{
  padding:19px 21px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.industry-faq summary{
  cursor:pointer;
  color:var(--navy);
  font-weight:850;
}

.industry-faq details p{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.58;
}


/* ============================================================
   CTA FINAL
   ============================================================ */

.industry-final{
  padding:56px 0;
  background:#fff;
}

.industry-final-box{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  overflow:hidden;
  padding:34px;
  border-radius:22px;
  background:
    linear-gradient(120deg,var(--orange),#ff6a1d);
  color:#fff;
}

.industry-final-box::after{
  content:"";
  position:absolute;
  right:-70px;
  top:-100px;
  width:260px;
  height:260px;
  border:42px solid rgba(255,255,255,.08);
  border-radius:50%;
  pointer-events:none;
}

.industry-final-box>div,
.industry-final-button{
  position:relative;
  z-index:1;
}

.industry-final h2{
  margin:7px 0 6px;
  color:#fff;
  font-size:clamp(1.8rem,3vw,2.2rem);
  line-height:1.08;
}

.industry-final p{
  margin:0;
  color:rgba(255,255,255,.9);
}

.industry-final-button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 21px;
  border-radius:12px;
  background:#fff;
  color:var(--orange);
  font-weight:900;
  transition:.18s ease;
}

.industry-final-button:hover{
  transform:translateY(-1px);
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:980px){

  .industry-hero-grid,
  .industry-intro-grid,
  .industry-process-panel,
  .industry-supply-grid,
  .industry-safety-card{
    grid-template-columns:1fr;
  }

  .industry-hero-grid{
    min-height:auto;
    gap:26px;
    padding:30px 0 38px;
  }

  .industry-hero-media{
    aspect-ratio:16 / 9;
  }

  .industry-intro-grid{
    gap:20px;
  }

  .industry-needs-grid{
    grid-template-columns:1fr 1fr;
  }

  .industry-need-card{
    min-height:220px;
  }

  .industry-process-aside{
    padding-top:0;
  }

  .industry-process-highlight{
    min-height:280px;
  }

  .industry-supply-grid{
    gap:30px;
  }

  .industry-benefit-grid{
    grid-template-columns:1fr;
  }

  .industry-benefit-grid article{
    min-height:0;
  }

  .industry-safety-mark{
    min-height:300px;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.08);
  }
}


/* ============================================================
   MOVIL
   ============================================================ */

@media(max-width:640px){

  .industry-hero-copy h1{
    font-size:clamp(2.6rem,12vw,3.35rem);
  }

  .industry-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .industry-actions .btn{
    width:100%;
  }

  .industry-promises{
    flex-direction:column;
    gap:8px;
  }

  .industry-hero-media{
    aspect-ratio:16 / 10;
    border-radius:18px;
  }

  .industry-intro,
  .industry-needs,
  .industry-process,
  .industry-supply,
  .industry-benefits,
  .industry-safety,
  .industry-faq{
    padding:44px 0;
  }

  .industry-needs-grid,
  .industry-faq-grid{
    grid-template-columns:1fr;
  }

  .industry-need-card{
    min-height:0;
    padding:21px;
  }

  .industry-need-card h3{
    min-height:0;
  }

  .industry-process-copy{
    padding:23px 18px;
  }

  .industry-process-step{
    grid-template-columns:40px 1fr;
    gap:13px;
  }

  .industry-process-step>span{
    width:38px;
    height:38px;
  }

  .industry-process-aside{
    padding:0 18px 18px;
  }

  .industry-process-highlight{
    min-height:250px;
    padding:24px;
  }

  .industry-supply-visual{
    padding:22px 18px;
  }

  .industry-supply-visual img{
    max-height:230px;
  }

  .industry-benefit-grid article{
    padding:22px;
  }

  .industry-safety-card{
    border-radius:18px;
  }

  .industry-safety-copy,
  .industry-safety-mark{
    padding:26px 20px;
  }

  .industry-safety-mark{
    min-height:250px;
  }

  .industry-safety-icon{
    width:58px;
    height:58px;
    border-radius:16px;
  }

  .industry-safety-button{
    width:100%;
    text-align:center;
  }

  .industry-final{
    padding:46px 0;
  }

  .industry-final-box{
    flex-direction:column;
    align-items:flex-start;
    padding:27px 21px;
  }

  .industry-final-button{
    width:100%;
  }
}