/* 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;
  }
}