:root{
  --ink:#1a1a1a;
  --brand:#0051C1;        /* Island Roofing azul */
  --brand-dark:#003f96;
  --green:#40A80C;        /* Island Roofing verde */
  --green-dark:#358c0a;
  --muted:#4D4D4D;        /* gris corporativo */
  --line:#e5e5e5;
  --bg:#ffffff;
  --wa:#25D366;
  --radius:6px;
  --max:1240px;
  --serif:"Times New Roman",Times,Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:100px}
body{
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
section{padding:96px 0}
h1,h2,h3{font-family:var(--serif);letter-spacing:.005em;line-height:1.12}
h2{font-size:clamp(30px,3.4vw,44px);font-weight:700}
.center{text-align:center}
.kicker{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.sub{font-size:17px;color:var(--muted);max-width:62ch;margin:18px auto 0}

/* ── IMAGES ── */
.img-cover{width:100%;height:100%;object-fit:cover;border-radius:4px}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;font-size:15px;font-weight:500;white-space:nowrap;
  border-radius:var(--radius);cursor:pointer;transition:all .18s ease;
  border:1.5px solid transparent;
}
.btn-outline{border-color:var(--brand);background:#fff;color:var(--brand)}
.btn-outline:hover{background:#eaf1fc}
.btn-dark{background:var(--brand);color:#fff}
.btn-dark:hover{background:var(--brand-dark)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-dark)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--brand);padding:13px 10px}
.link-arrow:hover{opacity:.7}
.cta-pair{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:44px}

/* ── NAVBAR ── */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.logo-img{height:56px;width:auto}
.nav-links{display:flex;align-items:center;gap:36px;font-size:15.5px;color:#333}
.nav-links a:hover{color:#000}
.nav-actions{display:flex;align-items:center;gap:14px}
.menu-toggle{display:none;background:none;border:0;font-size:26px;cursor:pointer}

/* ── HERO ── */
.hero{padding:90px 0 80px}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center}
h1{font-size:clamp(38px,4.6vw,62px);font-weight:700;margin-bottom:28px}
.hero p.lead{font-size:18px;color:var(--muted);max-width:52ch;margin-bottom:22px}
.hero .trust{font-size:16px;color:#222;margin-bottom:34px}
.hero .trust span{color:#999;margin:0 10px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-img{aspect-ratio:4/3.4;border-radius:8px;overflow:hidden}

/* ── LOGO STRIP ── */
.logos{padding:72px 0}
.logos h2{font-size:clamp(22px,2.4vw,30px);text-align:center;margin-bottom:56px}
.logo-row{display:flex;justify-content:center;align-items:center;gap:64px;flex-wrap:wrap}
.logo-row img{height:84px;width:auto;opacity:.92;transition:opacity .18s ease}
.logo-row img:hover{opacity:1}
@media (max-width:700px){.logo-row{gap:36px}.logo-row img{height:60px}}

/* ── PROBLEMAS (tabs) ── */
.problems-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:stretch;margin-top:64px}
.problems-img{min-height:640px}
.prob-item{padding:20px 0 20px 28px;border-left:3px solid transparent;cursor:pointer}
.prob-item.active{border-left-color:var(--green)}
.prob-item.active h3{color:var(--brand)}
.prob-item h3{font-size:26px;margin-bottom:12px}
.prob-item p{font-size:16px;color:var(--muted);max-width:56ch}

/* ── PROCESO ── */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:44px;margin-top:72px;text-align:center}
.steps4 .ico{height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.steps4 .ico svg{width:44px;height:44px}
.steps4 h3{font-size:21px;margin-bottom:16px}
.steps4 p{font-size:15px;color:var(--muted)}

/* ── OFERTAS (alternating features) ── */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:72px 0}
.feature h3{font-size:clamp(26px,2.8vw,38px);margin-bottom:24px}
.feature p{font-size:17px;color:#333;max-width:48ch}
.feature .ph-box{aspect-ratio:4/3}

/* ── CONFIANZA ── */
.trust4{display:grid;grid-template-columns:repeat(4,1fr);gap:44px;margin-top:72px;text-align:center}
.trust4 .ico{height:52px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.trust4 .ico svg{width:40px;height:40px}
.trust4 h3{font-size:20px;margin-bottom:14px}
.trust4 p{font-size:15px;color:var(--muted)}

/* ── PROYECTOS carousel ── */
.carousel-wrap{position:relative;margin-top:64px}
.carousel{
  display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:8px;
}
.carousel::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 min(560px,84vw);aspect-ratio:1/1;scroll-snap-align:center;
}
.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border-radius:50%;border:1px solid #ccc;background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.car-btn:hover{border-color:var(--brand);color:var(--brand)}
.car-prev{left:-8px}
.car-next{right:-8px}
.dots{display:flex;gap:10px;justify-content:center;margin-top:36px}
.dot{width:9px;height:9px;border-radius:50%;background:#cfcfcf;border:0;cursor:pointer;padding:0}
.dot.active{background:var(--brand)}

/* ── FAQS ── */
.faqs{max-width:1080px;margin:64px auto 0;border-top:2px solid var(--brand)}
.faq{border-bottom:1.5px solid #cfd8e8;padding:6px 0}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  font-size:18px;font-weight:700;padding:22px 4px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:22px;height:22px;transition:transform .2s ease;flex:none;margin-left:20px}
.faq[open] summary svg{transform:rotate(180deg)}
.faq .a{padding:0 4px 26px;font-size:16.5px;color:#222;max-width:88ch}

.otra-duda{padding-top:40px}
.otra-duda h2{font-size:clamp(28px,3vw,40px)}

/* ── FOOTER ── */
.footer-wave{display:block;line-height:0;margin-bottom:-1px}
.footer-wave svg{width:100%;height:clamp(90px,15vw,230px);display:block}
footer{padding:56px 0 0;background:var(--brand);color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:60px;padding-bottom:72px}
.foot-grid .logo-img{height:72px;margin-bottom:36px}
.foot-label{font-size:14px;font-weight:700;margin-bottom:6px;color:#fff}
.foot-grid p,.foot-grid a{font-size:15px;color:rgba(255,255,255,.85)}
.foot-contact a{text-decoration:underline}
.socials{display:flex;gap:20px;margin-top:32px}
.socials svg{width:22px;height:22px;fill:#fff}
.socials a:hover svg{fill:#7ddb4a}
.foot-links{display:flex;flex-direction:column;gap:18px;font-size:15px;font-weight:600}
.foot-links a{color:#fff}
.foot-links a:hover{color:#7ddb4a}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.28);padding:28px 0 40px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14.5px;
  color:rgba(255,255,255,.85);
}
.foot-bottom nav{display:flex;gap:32px}
.foot-bottom nav a{text-decoration:underline}

/* ── ANIMATIONS ──
   All effects are transform/opacity only (compositor-friendly), applied
   only when JS runs (html.anim) so content is never hidden from crawlers
   or no-JS visitors, and disabled for prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  html.anim .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
  html.anim .rv.in{opacity:1;transform:none}

  .btn{transition:all .18s ease,transform .18s ease,box-shadow .18s ease}
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12)}
  .btn:active{transform:translateY(0)}

  .slide .img-cover,.ph-box .img-cover,.hero-img .img-cover{transition:transform .5s cubic-bezier(.22,1,.36,1)}
  .slide:hover .img-cover,.ph-box:hover .img-cover{transform:scale(1.03)}

  #probImg{transition:opacity .28s ease}
  #probImg.swapping{opacity:0}
  .prob-item{transition:border-color .25s ease}
  .prob-item h3{transition:color .25s ease}

  .faq .a{animation:none}
  .faq[open] .a{animation:faqIn .3s ease both}
  @keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  .wa-float{animation:waPulse 3.2s ease-in-out infinite}
  @keyframes waPulse{
    0%,100%{box-shadow:0 10px 30px rgba(37,211,102,.45)}
    50%{box-shadow:0 10px 30px rgba(37,211,102,.45),0 0 0 12px rgba(37,211,102,.12)}
  }

  .car-btn{transition:border-color .18s ease,color .18s ease,transform .18s ease}
  .car-btn:hover{transform:translateY(-50%) scale(1.06)}
}

/* Receptive Swarm / ClaudeCMS embed: give the gated pill room even if the
   loader's resize ping is missed (loader inlines height:0 until it hears back) */
[data-receptive-swarm]{margin-top:24px}
[data-receptive-swarm] iframe{min-height:44px !important}

/* ── FLOATING WHATSAPP ── */
.wa-float{
  position:fixed;right:28px;bottom:28px;z-index:60;
  width:66px;height:66px;border-radius:50%;
  background:var(--wa);border:6px solid #8ee6ac;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.45);transition:transform .18s ease;
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px;fill:#fff}

/* ── RESPONSIVE ── */
@media (max-width:1024px){
  .steps4,.trust4{grid-template-columns:1fr 1fr;gap:56px 40px}
}
@media (max-width:1000px){
  .nav-actions .btn-outline{display:none}
}
@media (max-width:900px){
  .hero-grid,.problems-grid,.feature{grid-template-columns:1fr;gap:44px}
  /* Stacked hero: image directly under the nav, before the headline */
  .hero{padding:20px 0 72px}
  .hero-grid{gap:28px}
  .hero-grid .hero-img{order:-1;margin:0 -24px}
  .problems-img{min-height:380px}
  .feature.rev .ph-box{order:-1}
  .foot-grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:700px){
  .nav-links,.nav-actions .btn-outline{display:none}
  .menu-toggle{display:block}
  .steps4,.trust4{grid-template-columns:1fr}
  .hero{padding:12px 0 32px}
  /* Ritmo vertical movil: la separacion visual entre secciones es la suma de
     los paddings adyacentes (32+32 = 64px). Solo espaciado EXTERIOR; el
     espaciado interno de cada seccion no cambia. Sin alturas fijas. */
  section{padding:32px 0}
  .logos{padding:32px 0}
  .feature{padding:24px 0}
  #ofertas .center{margin-bottom:20px}
  #ofertas .feature:last-child{padding-bottom:0}
  .otra-duda{padding-top:0}
  .car-prev{left:6px}.car-next{right:6px}
  /* Ofertas: cada servicio apila titulo -> descripcion -> imagen;
     anula el order:-1 de 900px que subia la imagen del bloque .rev */
  .feature.rev .ph-box{order:1}
}

/* ── MOBILE MENU (open state, toggled by .menu-toggle in main.js) ── */
@media (max-width:700px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 16px 28px rgba(0,0,0,.1);
    padding:8px 0 14px;
  }
  header.menu-open .nav-links{display:flex}
  .nav-links a{padding:14px 32px;font-size:17px;font-weight:500}
  .menu-toggle{width:44px;height:44px;line-height:1}
}

/* ── MOBILE CTA PAIRS (below the 700px mobile breakpoint only) ──
   Recurring "Cotiza via WhatsApp" + "Llama a un especialista" pairs:
   stacked, equal-size rectangular buttons filling the content container.
   Selectors key off the hrefs so every recurring instance is covered. */
@media (max-width:700px){
  .hero-ctas,.cta-pair{flex-direction:column;align-items:stretch;gap:12px}
  .hero-ctas a,.cta-pair a{
    display:flex;align-items:center;justify-content:center;
    width:100%;min-height:50px;padding:13px 20px;
    border-radius:var(--radius);font-size:15px;font-weight:600;
    text-align:center;white-space:nowrap;
  }
  /* WhatsApp CTA: solid brand green, white text */
  .hero-ctas a[href^="https://wa.me"],.cta-pair a[href^="https://wa.me"]{
    background:var(--green);color:#fff;border:1.5px solid var(--green);
  }
  /* Phone CTA: transparent, brand-blue text + outline */
  .hero-ctas a[href^="tel:"],.cta-pair a[href^="tel:"]{
    background:transparent;color:var(--brand);border:1.5px solid var(--brand);
  }
  /* Drop the text-link arrow + appearance on mobile */
  .cta-pair .link-arrow svg{display:none}
  .cta-pair .link-arrow:hover{opacity:1}
}

/* ── MOBILE PROBLEMS ACCORDION (≤700px only) ──
   Below the mobile breakpoint the standalone problems image is hidden and
   main.js moves #probImg inside the active .prob-item, so each option
   expands accordion-style with its description followed by its image.
   Tablet/desktop keep the side-by-side layout above. */
@media (max-width:700px){
  .problems-img{display:none}
  .problems-grid{margin-top:44px}
  .prob-item p{display:none}
  .prob-item.active p{display:block}
  .prob-item #probImg{width:100%;height:auto;border-radius:4px;margin:18px 0 0}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}