/*
Theme Name: De Rossi Solar
Theme URI: https://derossi.cl
Author: De Rossi
Description: Tema personalizado para la landing de paneles solares de De Rossi (Los Ángeles, Provincia de Biobío).
Version: 1.0
Requires PHP: 7.4
Text Domain: derossi-solar
*/


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  --orange:#F4771E;
  --orange-dark:#DA5F0C;
  --orange-light:#FFF1E4;
  --green:#8DC63F;
  --green-dark:#5E9A2E;
  --green-tint:#EFF8E4;
  --ink:#1A1A1A;
  --ink-dim:#6B6B6B;
  --border:#ECE9E3;
  --surface:#FAF9F7;
  --white:#FFFFFF;
  --whatsapp:#25D366;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:'Montserrat',sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Montserrat',sans-serif; margin:0; letter-spacing:-0.01em; font-weight:800; }
p{margin:0;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.mono{font-family:'Montserrat',sans-serif; font-variant-numeric:tabular-nums; font-weight:700;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 24px; max-width:1120px; margin:0 auto;}
.brand{display:flex; align-items:center; text-decoration:none;}
.brand-logo{height:46px; width:auto;}
.nav-links{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.nav-links a{color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; transition:color .15s;}
.nav-links a:hover{color:var(--orange);}
.nav-cta{
  display:inline-flex; align-items:center; gap:7px; background:var(--orange); color:#fff; font-size:13.5px; font-weight:700;
  padding:10px 18px; border-radius:999px; text-decoration:none; white-space:nowrap; transition:background .15s;
}
.nav-cta:hover{background:var(--orange-dark);}
.nav-toggle{display:none; background:none; border:none; color:var(--ink); font-size:22px; cursor:pointer;}
@media (max-width:820px){
  .nav-links{display:none;}
  .nav-links.open{
    display:flex; flex-direction:column; gap:16px; position:absolute; top:100%; left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--border); padding:20px 24px;
  }
  .nav-toggle{display:block;}
}

/* ---------- hero (pantalla completa, estilo video hero) ---------- */
.hero--media{
  position:relative; min-height:640px; display:flex; align-items:center; overflow:hidden;
  padding:0; color:var(--white);
}
@media (max-width:820px){ .hero--media{ min-height:560px; } }

.hero-media-full{
  position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--ink);
}
.hero-media-full .hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.hero-media-full .hero-slide.is-active{ opacity:1; }
.hero-media-full .hero-slide img,
.hero-media-full .hero-slide video{ width:100%; height:100%; object-fit:cover; }
.photo-ph.photo-ph--hero{
  width:100%; height:100%; border-radius:0; border:none; aspect-ratio:auto;
  background:repeating-linear-gradient(135deg, #22303B, #22303B 10px, #1A252E 10px, #1A252E 20px);
  color:rgba(255,255,255,0.55);
}
.hero-media-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,18,22,0.45) 0%, rgba(14,18,22,0.72) 100%);
}
.hero-carousel-dots{
  position:absolute; bottom:26px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:2;
}
.hero-carousel-dot{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.45); border:1px solid rgba(255,255,255,0.4); cursor:pointer; padding:0;
}
.hero-carousel-dot.is-active{ background:var(--orange); border-color:var(--orange); }

.hero-content{ position:relative; z-index:2; padding:120px 24px 140px; }
.eyebrow{
  font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--orange-dark); margin:0 0 16px; display:inline-block;
}
.eyebrow--onmedia{ color:var(--orange-2, #FFB068); }
.hero-title--onmedia{
  font-family:'Montserrat',sans-serif; font-size:48px; font-weight:800; line-height:1.12; max-width:640px; color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,0.25);
}
@media (max-width:560px){ .hero-title--onmedia{ font-size:32px; } }
.hero-sub{ font-size:16.5px; max-width:460px; margin:20px 0 30px; line-height:1.6; font-weight:500; color:var(--ink-dim); }
.hero-sub--onmedia{ color:rgba(255,255,255,0.85); max-width:480px; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; padding:13px 22px;
  border-radius:10px; text-decoration:none; border:1px solid transparent; cursor:pointer; font-family:'Montserrat',sans-serif;
  transition:background .15s, border-color .15s, color .15s;
}
.btn--cta{ background:var(--orange); color:#fff; }
.btn--cta:hover{ background:var(--orange-dark); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--border); }
.btn--ghost:hover{ border-color:var(--orange); color:var(--orange); }
.btn--ghost-onmedia{ color:#fff; border-color:rgba(255,255,255,0.5); }
.btn--ghost-onmedia:hover{ border-color:var(--orange); color:var(--orange); }

.receipt.receipt--corner{
  position:absolute; right:24px; bottom:-18px; z-index:3; max-width:300px;
}
@media (max-width:820px){
  .receipt.receipt--corner{ position:static; margin:-40px 20px 0 auto; max-width:280px; }
  .hero-content{ padding:90px 24px 90px; }
}

/* signature: receipt card */
.receipt{
  background:var(--white); color:var(--ink); border-radius:16px; width:100%; max-width:340px;
  padding:22px 22px 20px; box-shadow:0 30px 60px -24px rgba(26,26,26,0.28); position:relative;
  border:1px solid var(--border); transform:rotate(-1.5deg);
}
.receipt--photo{ padding:10px 10px 16px; }
.receipt--photo img{ width:100%; border-radius:10px; display:block; }
.receipt--photo .receipt-foot{ margin-top:10px; }

.receipt::before{
  content:""; position:absolute; inset:-14px; border:1px dashed rgba(244,119,30,0.25); border-radius:24px; z-index:-1;
}
.receipt-head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px dashed var(--border); padding-bottom:10px; margin-bottom:14px;}
.receipt-head span:first-child{font-family:'Montserrat',sans-serif; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim);}
.receipt-head span:last-child{font-family:'Montserrat',sans-serif; font-size:10.5px; color:var(--ink-dim);}
.receipt-row{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--ink-dim); margin-bottom:6px;}
.receipt-old{
  display:flex; justify-content:space-between; align-items:center; margin:14px 0 4px;
}
.receipt-old-label{font-size:12.5px; color:var(--ink-dim);}
.receipt-old-value{font-family:'Montserrat',sans-serif; font-size:17px; color:#B4472D; text-decoration:line-through; text-decoration-thickness:2px;}
.receipt-arrow{text-align:center; color:var(--orange-dark); font-size:15px; margin:2px 0; font-weight:600;}
.receipt-new{
  display:flex; justify-content:space-between; align-items:center; background:var(--green-tint);
  border-radius:10px; padding:12px 14px; margin-top:4px;
}
.receipt-new-label{font-size:12.5px; color:var(--green-dark); font-weight:700;}
.receipt-new-value{font-family:'Montserrat',sans-serif; font-size:22px; font-weight:600; color:var(--green-dark);}
.receipt-foot{margin-top:14px; font-size:11.5px; color:var(--ink-dim); text-align:center;}
.receipt-foot b{color:var(--green-dark);}

/* ---------- proof bar ---------- */
.proof{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.proof-inner{display:flex; justify-content:space-between; gap:20px; padding:26px 24px; flex-wrap:wrap;}
.proof-item{flex:1; min-width:150px; text-align:center;}
.proof-value{font-family:'Montserrat',sans-serif; font-size:26px; font-weight:800; color:var(--orange-dark);}
.proof-label{font-size:12.5px; color:var(--ink-dim); margin-top:4px; font-weight:500;}

/* ---------- generic section ---------- */
.section{padding:88px 0;}
.section--tight{padding:64px 0;}
.section-head{max-width:560px; margin:0 0 48px;}
.section-eyebrow{font-family:'Montserrat',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange-dark); margin:0 0 10px; display:block;}
.section-head h2{font-size:30px; font-weight:800; line-height:1.2;}
.section-head p{color:var(--ink-dim); font-size:15px; margin-top:14px; line-height:1.6; font-weight:500;}

/* ---------- how it works ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:820px){ .steps{grid-template-columns:1fr;} }
.steps--5col{grid-template-columns:repeat(5,1fr);}
.steps--5col .step{text-align:center; background:var(--surface); border:1px solid var(--border);}
@media (max-width:900px){ .steps--5col{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .steps--5col{grid-template-columns:1fr;} }

.step{background:var(--white); border:1px solid var(--border); border-radius:16px; padding:26px 24px;}
.step-tag{font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700; color:var(--orange-dark); background:var(--orange-light); display:inline-block; padding:4px 10px; border-radius:999px; margin-bottom:16px;}
.step h3{font-size:17px; margin-bottom:8px; font-weight:700;}
.step p{font-size:13.5px; color:var(--ink-dim); line-height:1.55; font-weight:500;}

/* ---------- ejemplo de lectura de boleta ---------- */
.boleta-example-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:32px; }
@media (max-width:720px){ .boleta-example-grid{ grid-template-columns:1fr; } }
.boleta-example-card{
  margin:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--white);
}
.boleta-example-card img{ width:100%; display:block; }
.boleta-example-card figcaption{
  font-size:12.5px; color:var(--ink-dim); padding:12px 14px; text-align:center; font-weight:500;
}
.boleta-scanner-wrap{ display:flex; justify-content:center; }

/* ---------- simulator CTA ---------- */
.sim{
  background:linear-gradient(135deg, var(--orange-light), var(--white)); border:1px solid var(--border); border-radius:22px; padding:44px 40px;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; color:var(--ink);
}
@media (max-width:820px){ .sim{grid-template-columns:1fr; padding:32px 24px;} }
.sim h2{font-size:26px; margin-bottom:12px; font-weight:800;}
.sim p{color:var(--ink-dim); font-size:14.5px; line-height:1.6; font-weight:500;}
.sim-calc{background:var(--white); border:1px solid var(--border); border-radius:16px; padding:26px;}
.sim-label{font-size:12.5px; color:var(--ink-dim); display:block; margin-bottom:8px; font-weight:600;}
.sim-amount{font-size:32px; font-weight:700; color:var(--orange-dark); margin-bottom:16px;}
.sim-slider{width:100%; accent-color:var(--orange); margin-bottom:24px; cursor:pointer;}
.sim-results{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.sim-result{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 8px; text-align:center;}
.sim-result-val{display:block; font-size:15.5px; font-weight:700; color:var(--ink);}
.sim-result-lbl{display:block; font-size:9.5px; color:var(--ink-dim); margin-top:5px; line-height:1.3; font-weight:500;}
.sim-note{font-size:11px; color:var(--ink-dim); margin-top:14px; text-align:center; line-height:1.5;}

/* ---------- testimonials ---------- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){ .testi-grid{grid-template-columns:1fr;} }
.testi{background:var(--white); border:1px solid var(--border); border-radius:16px; padding:24px;}
.testi-quote{font-size:14.5px; line-height:1.6; color:var(--ink); margin-bottom:18px; font-weight:500;}
.testi-who{display:flex; align-items:center; gap:10px;}
.avatar{
  width:36px; height:36px; border-radius:50%; background:var(--orange); color:#fff; font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.testi-name{font-size:13.5px; font-weight:700;}
.testi-loc{font-size:12px; color:var(--ink-dim);}
.testi-save{margin-left:auto; text-align:right;}
.testi-save-val{font-family:'Montserrat',sans-serif; font-size:13px; color:var(--green-dark); font-weight:600;}
.testi-save-lbl{font-size:10.5px; color:var(--ink-dim);}

/* ---------- trust grid ---------- */
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .trust-grid{grid-template-columns:repeat(2,1fr);} }
.trust-card{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:22px 20px;}
.trust-icon{width:34px; height:34px; margin-bottom:14px; color:var(--orange);}
.trust-card h3{font-size:14.5px; margin-bottom:6px; font-weight:700;}
.trust-card p{font-size:12.5px; color:var(--ink-dim); line-height:1.5; font-weight:500;}

/* ---------- quiénes somos ---------- */
.about{display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center;}
@media (max-width:900px){ .about{grid-template-columns:1fr;} }
.about-copy p{color:var(--ink-dim); font-size:15px; line-height:1.7; font-weight:500; margin-bottom:14px;}
.about-stats{display:flex; gap:28px; margin-top:24px; flex-wrap:wrap;}
.about-stat-val{font-size:24px; font-weight:800; color:var(--orange-dark);}
.about-stat-lbl{font-size:12px; color:var(--ink-dim); font-weight:500; margin-top:2px;}

/* ---------- photo placeholders ---------- */
.photo-ph{
  background:repeating-linear-gradient(135deg, var(--surface), var(--surface) 10px, #F2F0EB 10px, #F2F0EB 20px);
  border:2px dashed var(--border); border-radius:16px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; color:var(--ink-dim); text-align:center; padding:20px;
}
.photo-ph svg{width:30px; height:30px; opacity:0.55;}
.photo-ph span{font-size:12px; font-weight:600; max-width:220px; line-height:1.4;}
.photo-ph--about{aspect-ratio:4/3;}
.photo-ph--gallery{aspect-ratio:1/1;}

/* ---------- gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
.como-funciona-cta{ text-align:center; margin-top:36px; }
.steps--icons .step{ text-align:center; }
.step-icon{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:50%; background:var(--orange-light); color:var(--orange); margin-bottom:16px;
}
.step-icon svg{ width:26px; height:26px; }

/* ---------- FAQ ---------- */
.faq{max-width:720px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:18px 4px; font-family:'Montserrat',sans-serif;
  font-size:15px; font-weight:700; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-q .plus{font-family:'Montserrat',sans-serif; font-size:19px; font-weight:700; color:var(--orange); transition:transform .25s ease; flex-shrink:0;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{font-size:13.5px; color:var(--ink-dim); padding:0 4px 18px; line-height:1.6; max-width:600px; font-weight:500;}

/* ---------- footer ---------- */
.footer{background:var(--green-tint); color:var(--ink-dim); padding:52px 0 28px; border-top:1px solid #DCEEC7;}
.footer-top{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid #DCEEC7;}
.footer-brand{margin-bottom:10px; display:flex; align-items:center;}
.footer-brand img{height:40px; width:auto;}
.footer-col h4{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--green-dark); margin-bottom:12px;}
.footer-col p, .footer-col a{font-size:13.5px; display:block; text-decoration:none; margin-bottom:7px; color:var(--ink-dim); font-weight:500;}
.footer-col a:hover{color:var(--orange-dark);}
.footer-bottom{padding-top:22px; font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--ink-dim);}
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,0.05); color:var(--ink-dim);
  display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s;
}
.footer-social a:hover{ background:var(--orange); color:#fff; }
.footer-payments{ display:flex; flex-direction:column; gap:14px; padding-top:22px; border-top:1px solid #DCEEC7; }
.footer-payments-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-payments-row--center{ justify-content:center; }
.footer-payments-label{ font-size:13.5px; font-weight:700; color:var(--green-dark); text-decoration:none; }
.footer-payments-label:hover{ text-decoration:none; color:var(--orange); }
.payment-badge{
  font-size:11.5px; font-weight:700; color:var(--ink); background:#fff; border:1px solid var(--border);
  border-radius:6px; padding:5px 12px;
}
.payment-item{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.payment-item--center{ align-items:center; text-align:center; }
.payment-caption{ font-size:13.5px; color:var(--ink-dim); font-weight:500; }
.payment-badge-img{ height:48px; width:auto; }
.payment-badge-img--mp{ height:64px; width:auto; }
.footer-legal-link{ text-decoration:none; font-size:13px; color:var(--ink-dim); transition:color .15s; }
.footer-legal-link:hover{ text-decoration:none; color:var(--ink); }

/* ---------- floating whatsapp ---------- */
.float-wa{
  position:fixed; bottom:22px; right:22px; z-index:60; background:var(--whatsapp); color:#fff; width:56px; height:56px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 10px 26px -6px rgba(0,0,0,0.28);
}