html {
  scroll-behavior: smooth;
}


/* Palette from mockup */
:root{
  --blue-900:#1a2f5a;
  --blue-950:#0f1c36;
  --red-700:#9b1d22;
  --text:#1a1d21;
  --muted:#605e5d;
  --bg:#f2f2f1;
  --yellow:#e2bb15;
  --white:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-top: 80px;
  /* Reserve space for fixed header */;
}

@media (max-width:1100px){
  body { padding-top: 70px; }
}
@media (max-width:700px){
  body { padding-top: 60px; }
}

img{max-width:100%;height:auto;display:block}
.container{width:min(95vw, 1800px);margin-inline:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.25rem;border-radius:12px;font-weight:800;text-decoration:none;border:2px solid transparent;transition:.2s transform ease,.2s box-shadow ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.btn-red{background:var(--red-700);color:#fff !important}
.btn-blue{background:var(--blue-900);color:#fff}
.btn-yellow{background:var(--yellow);color:#000;border-color:#000}
.btn-outline{background:transparent;border-color:var(--blue-900);color:var(--blue-900)}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background: #fff;;border-bottom:1px solid rgba(230,230,230,0);box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.header-inner{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:1rem;padding:1.1rem 0; margin-top: .5rem;}
.logo-text{font-weight:900;font-size:clamp(16px,2.2vw,22px);line-height:.95;color:var(--blue-900); text-decoration: none;}
.logo-text span{color:var(--red-700)}


.menu-btn {
  display: inline-block;
  appearance: none;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}

/* Líneas */
.menu-btn::before,
.menu-btn span,
.menu-btn::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2.75px;
  background: #0f1c36;
  border-radius: 2px;
  transition: 0.2s;
}

.menu-btn::before { top: 10px; }  
.menu-btn span { top: 18px; }      
.menu-btn::after { top: 26px; }   

/* Animación a X */
.menu-btn[aria-expanded="true"]::before {
  top: 18px;
  transform: rotate(45deg);
}

.menu-btn[aria-expanded="true"]::after {
  top: 18px;
  transform: rotate(-45deg);
}

.menu-btn[aria-expanded="true"] span {
  opacity: 0; 
}


/* Lock body scroll when menu open */
body.menu-open{overflow:hidden}
.nav{display:flex;gap:1.25rem;justify-self:center;justify-content:center}
.nav a{color:var(--text);text-decoration:none;font-weight:700}
.header-ctas{display:flex;align-items:center;gap:.75rem;justify-self:end}
.lang-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:var(--text);text-decoration:none;font-weight:800}
.lang-btn img{width:18px;height:18px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.lang-btn:hover{transform: translateY(-1px)}

/* Mobile drawer */
.mobile-menu{position:fixed;inset:0 0 0 auto;width:min(88vw,380px);background:#fff;box-shadow:-8px 0 24px rgba(0,0,0,.12);transform:translateX(100%);transition:transform .25s ease;z-index:60;display:flex;flex-direction:column}
.mobile-menu.open{transform:translateX(0)}
.menu-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.45);backdrop-filter:saturate(120%) blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:55}
.menu-backdrop.open{opacity:1;pointer-events:auto}
.mobile-menu__header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #eee}
.mobile-nav{display:flex;flex-direction:column;padding:1rem;gap:.75rem}
.mobile-nav a{color:var(--text);text-decoration:none;font-weight:800;padding:.75rem 1rem;border-radius:10px}
.mobile-nav a.btn{display:inline-flex;justify-content:center}
.menu-close{appearance:none;background:transparent;border:0;font-size:2rem;line-height:1;padding:.25rem;border-radius:8px}

/* Hero */
.hero {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 48%, var(--bg) 58%, var(--bg));
  /* padding: 0rem 0 5rem; */
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 4rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}
.hero.full .hero-inner{
  grid-template-columns: 1fr;
  max-width: 1100px;
}
.hero-copy h1 {
  font-size: clamp(38px, 5vw, 60px);
  margin: 0 0 1.5rem 0;
  line-height: 1.1;
  font-weight: 800;
  color: inherit;
  max-width: 90%;
}
.hero-copy .red-text { color: #9b1d22; font-weight: 900; white-space: nowrap; }
.hero-copy .blue-text { color: #1a2f5a; font-weight: 900; white-space: nowrap; }
.hero-copy p {
  font-size: 1.5rem;
  color: #4b5563;
  margin: 0 0 3.5rem;
  max-width: 90%;
  font-weight: 500;
  line-height: 1.4;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 800px;
  justify-content: center;
  align-items: center;
}
.btn-primary {
  background: white;
  color: #1a2f5a;
  font-weight: 800;
  padding: .5rem 2.5rem;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 2px solid #9b1d22;
  text-align: center;
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.3rem);
  min-width: 280px;
}
.btn-primary:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-secondary {
  background: #9b1d22;
  color: #e2bb15;
  font-weight: 900;
  padding: 1.25rem 2.5rem;
  border-radius: 40px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  font-size: clamp(1.35rem, 1vw + 1.1rem, 2rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .4px;
  flex: 1;
  min-width: 280px;
}
.hero .btn-secondary{font-size:clamp(1.6rem, 1.2vw + 1.2rem, 2.4rem);letter-spacing:.6px;font-weight:900}
.btn-secondary:hover {
  background: #8a191e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(155, 29, 34, 0.2);
}
.hero-image {
  position: relative;
  z-index: 1;
}
.hero-image img {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Quote form */
.quote{background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee}
.quote-inner{padding:1rem 0;background:rgba(26,47,90,.03);border-radius:14px}
.quote-inner h3{margin:.25rem 0 1rem;color:var(--red-700);text-align:center}
.quote .quote-inner{width:100%;max-width:none;margin-inline:0;border-radius:0}
.quote-inner{position:relative;background:#fff;overflow:visible}
.quote-inner .quote-title{position:relative;z-index:2;margin:.25rem 0 0;color:var(--red-700);text-align:center;font-weight:900;font-size:clamp(22px,3.4vw,34px)}
.quote-sub-pill{position:relative;z-index:2;margin:0.6rem auto 1rem;background:var(--red-700);color:#fff;display:block;padding:.5rem 1rem;border-radius:999px;font-weight:800;font-size:0.95rem;box-shadow:0 6px 18px rgba(155,29,34,0.18);width:auto;max-width:100%;text-align:center;left:50%;transform:translateX(-50%)}
.quote-form{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem; padding: 1rem 1.5rem; box-shadow: 0 0 12px rgba(0, 0, 0, 0.15); border-radius: 1rem; background-color: #fff;}
.quote-form input,.quote-form select{padding:.9rem;border:2px solid var(--blue-950);border-radius:10px;font-size:1rem;background:#fff}

/* Desktop: make 'Cotización Rápida' taller */
@media (min-width:1100px){
  .quote-inner{padding:2rem 0 3rem}
  .quote-form{width:min(1500px, 92vw);margin-inline:auto}
}


/* Umbrella block */
.umbrella{padding:2rem 0}
.umbrella-wrap{position:relative}
.umbrella-img{width:min(900px, 90%);margin:0 auto}
.umbrella-title{position:absolute;inset:10% 0 auto 0;text-align:center;pointer-events:none;z-index:10;transform:translateY(0.8rem)}
.umbrella-title h2{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.25);font-size:clamp(28px,3vw,44px);margin:0;font-weight:800;line-height:1.05}
.icons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
/* Umbrella services cards (scoped) */
.umbrella .icons-grid{grid-template-columns:1fr;gap:-15rem 1.5rem;align-items:start}
.umbrella .icons-group{display:grid;grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));gap:1.25rem 1.5rem;justify-items:center}
.umbrella .service-card{width:clamp(190px, 21vw, 230px);aspect-ratio:3/4;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;box-shadow:0 4px 8px rgba(0,0,0,0.1);background:#fff;transition:transform .18s ease, box-shadow .18s ease;will-change:transform;cursor:default}
.umbrella .service-card:hover{transform:scale(1.05);box-shadow:0 10px 22px rgba(0,0,0,0.18)}
.umbrella .service-card .card-top{background:#a4161a;flex:1 1 65%;min-height:96px;display:flex;align-items:center;justify-content:center}
.umbrella .service-card .card-top i{color:#fff;font-size:clamp(34px,5vw,46px);line-height:1}
.umbrella .service-card .card-bottom{background:#f5f5f5;flex:0 0 35%;display:flex;align-items:center;justify-content:center;text-align:center;color:#002f6c;font-weight:600;font-size:clamp(15px,1.4vw,17px);padding:.75rem .65rem}
.umbrella-sub{color:var(--muted);text-align:center;margin:4rem auto 0;max-width:1050px} /* moved down more */

/* Overlay cards on top of umbrella image */
.umbrella-wrap{position:relative}
.umbrella-img{position:relative;z-index:1}
/* bring the icons grid up and above the image */
.umbrella .icons-grid{position:relative;z-index:4;margin-top:2rem;pointer-events:auto;transition:margin-top .18s ease}

/* Slightly increase overlap on wider screens */
@media (min-width:1100px){
  .umbrella .icons-grid{margin-top:-20rem}
  .umbrella .icons-group.left{margin-left:12vw}
  .umbrella .icons-group.right{margin-right:12vw}
  /* ensure cards cast a shadow over the umbrella */
  .umbrella .service-card{box-shadow:0 32px 56px rgba(0,0,0,0.18)}
}

/* On smaller screens remove overlap to avoid crowding */
@media (max-width:900px){
  .umbrella .icons-grid{margin-top:1rem}
  .umbrella-img{z-index:0}
  .umbrella .service-card{box-shadow:0 6px 14px rgba(0,0,0,0.08)}
  /* Move up the umbrella title on mobile */
  .umbrella-title {
    margin-top: -20px;
    margin-bottom: 20px;
  }
}

/* Other Services */
.services{padding:3rem 0;background:#fff}
.services h2{text-align:center;color:var(--blue-900);margin:0 0 1.5rem;font-weight:900;font-size:clamp(34px, 4vw, 52px)}
/* Layout: two centered cards on desktop, one on smaller screens */
.service-cards{display:grid;grid-template-columns:repeat(2, minmax(260px, 540px));gap:2rem;justify-content:center;justify-items:center}
.card{background:#f3f4f6;border:0;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.08);padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.75rem;max-width:clamp(260px, 32vw, 520px);width:100%}
.card h4{color:#0b3a78;margin:0 0 .25rem;font-weight:900;font-size:clamp(22px,1.8vw,30px)}
.card ul{margin:.25rem 0 0 1.25rem;padding:0}
.card ul li{margin:.4rem 0;color:#334155;line-height:1.7;font-size:clamp(16px,1.2vw,19px)}
/* Otros Servicios: remove images inside cards and tighten width */
.services .card img{display:none !important}

/* Why */
.why{padding:0 0 2.25rem;background:#f5f5f5}
/* Top red band */
.why-hero{color:#fff;text-align:justify;padding:2rem}
.why-hero h2{margin:0 0 .5rem;font-size:clamp(30px,3.2vw,46px);line-height:1.15}
.why-hero p{margin:0 auto;max-width:900px;opacity:.95;}
/* Grid of reasons */
.why-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:start;margin:1.5rem 0;justify-items:center}
.why-item{display:grid;grid-template-columns:repeat(2, 1fr);gap:.85rem;align-items:center;background:transparent;border-radius:16px;padding:2rem 1rem;max-width:min(1100px, 92vw);width:100%}
.why-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:14px;max-width:clamp(240px, 28vw, 340px);justify-self:center;}
.why-photo img{width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:0 10px 18px rgba(0,0,0,.1)}
/* Check badge */
.why-photo::after{content:"✓";position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 6px 12px rgba(22,163,74,.35)}
.why-copy h3{margin:.25rem 0 .35rem;font-weight:900;font-size:clamp(20px,1.6vw,28px)}
.why-copy p{margin:0;color:#475569;line-height:1.7}

/* Reverse layout: text left, image right */
.why-item.reverse .why-photo{grid-column:2;justify-self:end}
.why-item.reverse .why-copy{grid-column:1}

/* Make reverse card copy wider on desktop so text extends more but doesn't touch the image */
@media (min-width:900px){
  .why-item.reverse{grid-template-columns:1.6fr 0.9fr;}
  /* constrain image so it doesn't grow too much when text expands */
  .why-item.reverse .why-photo{max-width:clamp(220px, 26vw, 340px);}
}

/* Responsive layout for why cards */
@media (max-width:900px){
  .why-item{grid-template-columns:1fr;gap:.75rem;padding:1rem;text-align:center}
  .why-photo{
    aspect-ratio:auto;
    max-width: 100% !important;
    width: 100%;
    margin: 0 auto;
  }
  /* Ensure image goes above text on mobile */
  .why-photo{grid-row:1}
  .why-copy{grid-row:2}
  .why-photo img{
    height:auto;
    width: 100%;
    max-width: 480px;
    display: block;
    margin: 0 auto;
  }
  .why-item.reverse .why-photo, .why-item.reverse .why-copy{grid-column:auto}
  .why-copy h3, .why-copy p{text-align:center}
  .why-copy {max-width: 100%; margin: 0 auto;}
}

/* Assist & testimonials */
.assist{padding:2rem 0;background:#fff}
.two-col{display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem;align-items:center;margin-bottom:1.5rem}
.two-col.reverse{grid-template-columns:1fr 1.2fr}

/* Testimonios */
.testimonials{padding:3rem 0;background:#fff}
.testimonials-inner{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;margin:0 auto}
.test-left h2{color:var(--red-700);font-weight:900;font-size:clamp(26px,3.6vw,40px);line-height:1.05;margin:0 0 1rem}
.test-left .test-images{display:flex;gap:1rem;margin-bottom:1rem}
.test-left .test-images img{width:140px;height:110px;object-fit:cover;border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,.08)}
.reviews-badge{width:110px;height:110px;border-radius:999px;background:var(--red-700);color:#fff;display:grid;place-items:center;font-weight:900;text-align:center;margin-top:1.25rem;box-shadow:0 10px 30px rgba(0,0,0,.12);font-size:0.8rem;line-height:1}

/* Center testimonials left column content on larger screens too */
.test-left{ text-align:center }
.test-left h2{ text-align:center }
.reviews-badge{ margin-left:auto; margin-right:auto }

.test-right{position:relative}
.test-slider{min-height:220px;display:grid;place-items:center}
.test-card{max-width:480px;margin:0 auto;text-align:center;padding:1rem;background:transparent;display:none}
.test-card.active{display:block}
.test-card .avatar{width:76px;height:76px;border-radius:999px;object-fit:cover;margin:0 auto 0.6rem;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.test-card h4{margin:0;font-weight:900;color:var(--blue-900);font-size:1.05rem}
.test-card .location{font-size:.9rem;color:var(--muted);margin-bottom:.5rem}
.test-card .quote{margin:0.5rem 0;color:#334155;line-height:1.6;font-size:0.98rem}
.test-card .source{font-weight:800;color:#6b7280;margin-top:.5rem}
.test-card .stars{color:#eab308;margin-top:.25rem;font-size:1.05rem}

.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:0;font-size:2rem;color:var(--muted);width:48px;height:48px;border-radius:999px;display:grid;place-items:center;cursor:pointer}
.slider-btn:hover{color:var(--blue-900);background:rgba(0,0,0,0.03)}
.slider-btn.prev{left:-12px}
.slider-btn.next{right:-12px}

/* Small screens: stack and simplify */
@media (max-width:1100px){
  .testimonials-inner{grid-template-columns:1fr;gap:1.25rem;padding:0 1rem}
  .test-left{order:1}
  .test-right{order:2}
  .test-left .test-images img{width:120px;height:100px}
  .reviews-badge{width:86px;height:86px;font-size:0.7rem}
  /* Center testimonials left column content */
  .test-left{ text-align:center }
  .test-left h2{ text-align:center }
  .test-left .test-images{ justify-content:center }
  .reviews-badge{ margin: 1rem auto 0 }
  .slider-btn.prev{left:6px}
  .slider-btn.next{right:6px}
  /* Make quote subtitle pill responsive */
  .quote-sub-pill{display:inline-block;max-width:90%;white-space:normal;font-size:0.9rem;padding:.45rem .9rem}
}

/* Tablet and up: slightly reduce quote subtitle pill width */
@media (min-width:901px){
  .quote-sub-pill{
    display:block;
    width:86%;
    max-width:960px;
    margin:0.6rem auto 1rem;
    left:auto;
    transform:none;
    padding:.55rem 1.1rem;
  }
}

/* Responsive */
@media (max-width:1100px){
  .hero-inner{grid-template-columns:1fr;}
  .nav{display:none}
  /* Mobile/Tablet header layout */
  .header-inner{grid-template-columns: repeat(3, 1fr); margin-top: -0.1rem;}
  .menu-btn{display:inline-block;justify-self:center}
  .logo-text{justify-self:center;text-align:center}
  .header-ctas{display:none}
  .lang-btn{display:inline-flex;justify-self:center}
  /* Ensure HERO is fully centered on tablets */
  .hero.full .hero-inner{justify-items:center}
  .hero.full .container{width:100%; margin:0; padding-left:1rem; padding-right:1rem}
  .hero-copy{text-align:center; max-width:800px; width:100%; margin-inline:auto}
  .hero-copy h1, .hero-copy p{max-width:100%; width:100%; margin-left:0; margin-right:0}
  .hero-copy .line1, .hero-copy .line2{white-space:normal}
  .hero.full .hero-copy{margin-left:0 !important;margin-right:0 !important}
  .hero-actions{display: flex; max-width:800px; width:90%; justify-content:center; flex-direction:column; align-items: center; margin: 0 auto !important;}
  .btn-primary,.btn-secondary{min-width:0;width:100%}
}
@media (max-width:900px){
  .quote-form{grid-template-columns:1fr 1fr}
  .icons-grid{grid-template-columns:1fr 1fr}
  .service-cards{
    grid-template-columns: minmax(280px, 480px);
    padding: 0 1rem;
  }
  .card {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .why-grid{grid-template-columns:1fr}
  .why-item{grid-template-columns:1fr}
  .two-col, .two-col.reverse{grid-template-columns:1fr}
  /* HERO tablet centering */
  .hero.full .hero-inner{justify-items:center; align-items:center; padding-left:1rem; padding-right:1rem}
  .hero-copy{text-align:center}
  .hero.full .hero-copy{width:100%}
  .hero-copy h1, .hero-copy p{max-width:100%; width:100%; margin-left:0; margin-right:0}
  .hero-copy .line1, .hero-copy .line2{white-space: normal}
  .hero-actions{flex-direction:column;max-width:90%}
  .btn-primary,.btn-secondary{min-width:0;width:100%}
  .hero.full .container{width:100%; margin:0; padding-left:1rem; padding-right:1rem}
  .hero.full .hero-copy{margin-left:0 !important; margin-right:0 !important}
}
/* Mobile tweaks */
@media (max-width:700px){
  .hero-copy h1{font-size:clamp(32px, 7.2vw, 44px); line-height:1.08}
  .hero.full .hero-inner{justify-items:center}
  .umbrella .icons-grid { margin-top: -8rem; }
  /* Move the umbrella H2 up slightly on mobile */
  .umbrella-title { inset: 6% 0 auto 0; transform: translateY(-0.6rem); }
  .hero-copy .line1, .hero-copy .line2{white-space: normal}
  /* Make HERO span full width and center strictly without overflow */
  .hero.full .container{width:100%;margin:0;padding-left:1rem;padding-right:1rem}
  .hero.full .hero-copy{margin-left:0 !important;margin-right:0 !important}
  .hero-actions{flex-direction:column;max-width:100%; display: flex; align-items: center; justify-content: center;}
  .btn-primary,.btn-secondary{
    min-width:0;
    width:100%;
    padding:1rem 1.25rem;
    border-radius:32px;
  }
  .btn-primary{font-size:1.05rem}
  .btn-secondary{font-size:1.25rem}

  /* Umbrella: keep headline over the umbrella image and centered on mobile */
  .umbrella{padding:1.25rem 0}
  .umbrella-wrap{max-width:620px;margin:0 auto;}
  .umbrella-img{width:100%;margin:0 auto}
  .umbrella-title{inset:5% 0 auto 0;padding:0 1rem;text-align:center} /* Texto de la umbrella */
  .umbrella-title h2{font-size:clamp(16px, 5.5vw, 26px);line-height:1.06}

  /* Center and narrow quote content on small phones */
  #cotizacion .quote-inner{max-width:92vw;padding-left:1rem;padding-right:1rem;margin-inline:auto}
  #cotizacion .quote-inner .quote-title{font-size:1.15rem}
  #cotizacion .quote-form{grid-template-columns:1fr;gap:.6rem}
  #cotizacion .quote-form .btn{width:100%}
}
/* Extra-small phones */
@media (max-width:480px){
  .hero-copy h1{font-size:clamp(26px, 6.6vw, 34px); line-height:1.05}
  .hero-copy p{font-size:1.15rem; margin: .5rem 0 2.5rem}
}

/* Desktop tweak: nudge HERO content left */
@media (min-width:1100px){
  /* .hero.full .hero-inner{padding-left:0}
  .hero.full .hero-copy{margin-left:-20px} */
  .hero.full .hero-copy {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
  }
}

@media (min-width:2000px){
  .container{width:min(92vw, 2300px)}
  .hero-copy h1{font-size:clamp(48px,2.8vw,96px)}
  .umbrella-title h2{font-size:clamp(42px,2.4vw,84px)}
}

/* Desktop (>=1100px): Header/Nav per design */
@media (min-width:1100px){
  .site-header{position:fixed}
  .site-header::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--blue-950)}
  .header-inner{grid-template-columns:auto 1fr auto auto;grid-template-areas:"logo nav cta lang"; position: sticky; }
  .menu-btn{display:none}
  .logo-text{grid-area:logo;justify-self:center;text-align:center}
  .nav{grid-area:nav;display:flex;justify-self:center;justify-content:center;gap:2rem;}
  .nav a{
    color:#1f2937;
    font-weight:700;
    /* border:1px solid #e5e7eb; */
    padding:.6rem .9rem;
    border-radius:10px; /* slightly rounded corners */
    line-height:1;
    text-decoration:none;
    transition:box-shadow .18s ease, transform .18s ease, background-color .18s ease;
  }
  .nav a:hover{transform: translateY(-1px)}
  .header-ctas{grid-area:cta;display:flex}
  .btn.btn-red{padding:.55rem 1rem;border-radius:999px;font-size:.9rem;box-shadow:0 1px 0 rgba(0,0,0,.06)}
  .lang-btn{grid-area:lang;display:inline-flex;justify-self:end;padding:.4rem .65rem;border-radius:12px;border:2px solid #d1d5db;background:#fff}
  .lang-btn img{width:18px;height:18px}

  /* Umbrella: two 2x2 grids (left/right) */
  .umbrella{padding:3rem 0}
  .umbrella .icons-grid{grid-template-columns:1fr 1fr;gap:1.5rem 2rem;align-items:start;justify-content:space-between}
  /* push groups to sides */
  .umbrella .icons-group.left{justify-self:start; margin-left:15vw}
  .umbrella .icons-group.right{justify-self:end; margin-right:15vw}
  /* tighter internal grid with fixed card widths */
  .umbrella .icons-group{grid-template-columns:repeat(2, max-content);gap:1rem 1.25rem}
  .umbrella .service-card{width:clamp(175px, 18vw, 205px)}
}

/* Redesigned Footer */
.footer-main{display:grid;grid-template-columns:1fr 1fr 320px;gap:1rem;align-items:center;padding:2rem 0;background:transparent;color:#e6eefc}
.site-footer{background:var(--blue-950);color:#cbd5e1;border-top:4px solid #0b1335;position:relative;z-index:70}

/* Footer: only-CTA variant */
.footer-main.only-cta{display:flex;justify-content:center;align-items:center;padding:2rem 0}
.footer-only-cta{display:flex;justify-content:center}
.footer-only-cta .btn{min-width:280px}

.footer-left .footer-logo{color:#fff;font-weight:900}
.footer-center{display:flex;gap:2rem;justify-content:center}
.footer-links-list{list-style:none;margin:0;padding:0;color:#cbd5e1}
.footer-links-list li{margin:.4rem 0;color:#cbd5e1}
.footer-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}

.call-cta{background:#b31f23;padding:10px 16px;border-radius:12px;color:#fff;display:flex;flex-direction:column;align-items:center;min-width:200px}
.call-cta .call-text{font-weight:900;font-size:.95rem}
.call-cta .call-phone{font-weight:900;color:#ffe8b2;font-size:1.2rem;text-decoration:none}
.socials{display:flex;gap:.5rem}
.social{font-family: 'Font Awesome 6 Free';font-weight:900;color:#fff;text-decoration:none;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.06)}

.footer-policy{background:#07203b;padding:.5rem 0;border-top:4px solid #021223}
.policy-inner{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap;color:#9fb0cd;padding:.5rem 0;text-align:center}
.policy-links{display:flex;flex-direction:column;gap:.35rem;justify-content:flex-start;align-items:flex-start}
.policy-links a{color:#9fb0cd;text-decoration:none;margin-right:0;font-weight:700;display:block}

/* Responsive footer */
@media (max-width:900px){
  .footer-main{grid-template-columns:1fr;gap:1rem;padding:1.25rem 1rem;text-align:center;justify-items:center;align-items:center}
  .footer-main.only-cta{padding:1.5rem 1rem}
  .footer-center{order:3;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center}
  .footer-right{order:2;align-items:center;text-align:center}
  .footer-left{order:1}
  .call-cta{min-width:160px;margin:0 auto}
  .socials{justify-content:center}
  .policy-inner{flex-direction:column;gap:.5rem;text-align:center;align-items:center;justify-content:center}
}

/* Mobile & tablet: stack and center policy section */
@media (max-width:1100px){
  .policy-inner{flex-direction:column;gap:.5rem;justify-content:center;align-items:center;text-align:center}
  .policy-links{flex-direction:column;gap:.35rem}
  .policy-links a{display:block}
}

/* BENEFITS / REASONS-WHY GRID */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  margin: 0 auto;
  gap: 2rem;
  max-width: min(1100px, 92vw);
}

.reason-card {
  /* border: 1px solid #ccc; */
  border-radius: 1rem;
  padding: .7rem 1.5rem;
  box-shadow: 6px 10px 18px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.reasons-grid .reason-card {
  width: 100%;
  max-width: 100%; /* mismo ancho para todas */
}

/* Las dos primeras tarjetas (arriba) más altas */
.reasons-grid .reason-card:nth-child(-n+2) {
  height: 400px; 
}

/* Las dos últimas tarjetas (abajo) más bajas */
.reasons-grid .reason-card:nth-child(n+3) {
  height: 300px; 
}

@media (max-width: 1024px) {
  .reasons-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .reason-card {
    justify-content: center;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
  }

  .reasons-grid .reason-card {
    height: auto !important;
  }
}

.reason-card__title {
  display: flex;
  align-items: center;
  justify-content: start;
}

.reason-card__title h4 {
  font-weight: bolder;
  color: var(--blue-900);
  font-size: clamp(16px, 2.2vw, 20px);
}

.reason-card__text {
  display: flex;
  flex-direction: column;
}

.reason-card__text ul {
  list-style: none; 
  padding: 0;
  margin: 0.5rem 0;
}

.reason-card__text ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem; 
  position: relative;
  padding-left: 1.5rem;
}

.reason-card__text ul li::before {
  content: "•"; 
  color: var(--red-700);
  font-weight: bold;
  position: absolute;
  left: 0;
}

.reason-card__number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--red-700); 
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  margin-right: 0.75rem;
}

/* Paginas Locales */

/* TITULO Y TEXTO */
.oficinas-locales-titulos {
  text-align: center;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.oficinas-locales-titulos h3 {
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  color: #9b1d22;
  font-weight: 900;
}

.oficinas-locales-titulos p {
  margin: 0;
  background: white;
  color: #1a2f5a;
  font-weight: 800;
  padding: 0.6rem 2.5rem;
  border-radius: 50px;
  border: 2px solid #9b1d22;
  text-align: center;
  font-size: clamp(1rem, 1.2vw + 0.9rem, 1.3rem);
  min-width: 280px;
  transition: all 0.3s ease;
}

/* CONTENEDOR TARJETAS */
.oficinas-locaciones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 4rem auto;
  max-width: min(1100px, 92vw);
  place-items: center;
  padding: 0 1rem;
}

/* TARJETAS */
.oficinas-locaciones__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--blue-900);
  border-radius: 1.5rem;
  padding: 1.5rem 1.5rem;
  width: 100%;
  max-width: 500px;
  min-height: 320px;
  box-shadow: 6px 4px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* .oficinas-locaciones__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(26, 47, 90, 0.45);
} */

.oficinas-locaciones__card svg {

  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 0.5rem;
}

/* TITULO Y TEXTO DE TARJETAS */
.oficinas-locaciones__card__ubicacion {
  color: var(--bg);
  font-weight: 900;
  text-align: center;
  font-size: clamp(20px, 3vw, 25px);
  margin-bottom: 0.5rem;
}

.oficinas-locaciones__card__texto {
  color: var(--bg);
  /* text-align: center; */
  line-height: 1.6;
}


@media (max-width: 1100px) {
  .oficinas-locaciones {
    grid-template-columns: 1fr;
  }
  .oficinas-locaciones__card {
    max-width: 100%;
  }
}

@media (max-width: 699px) {
  .oficinas-locales-titulos p {
    width: 95%;
  }
  .oficinas-locaciones__card {
    max-width: 100%;
  }
  .oficinas-locaciones {
    padding: 0;
  }
}

/* Pasos Cotizacion */

.pasos-cotizacion-titulo {
  margin-top: 0;
}

.pasos-cotizacion-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.pasos-cotizacion-container__card {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 200px;
  background-color: var(--red-700);
  color: white;
  padding: 1.5rem;
  border-radius: 20px;
  text-align: center;
  height: 200px;
  box-shadow: 6px 4px 12px rgba(0, 0, 0, 0.5);
}

/* REQUISITOS CALIFORNIA */
.requisito {
  width: 100%;
  background-color: var(--blue-900);
  padding: 3rem 0;
}

.requisito-container {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  align-items: center;
  gap: 1rem;
  width: 80%;
  margin: 0 auto;
}

/* Botón */
.no-risk {
  margin: 0;
  background: white;
  color: var(--red-700);
  font-weight: 800;
  padding: 0.6rem 2.5rem;
  border-radius: 25px;
  border: 2px solid #9b1d22;
  text-align: center;
  font-size: clamp(1rem, 1.2vw + 0.9rem, 1.3rem);
  min-width: 280px;
  transition: all 0.3s ease;
  margin-top: 2rem;
}

.requisito-container ul {
  list-style: none; 
  padding: 0;
  margin: 0.5rem 0;
}

.requisito-container ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem; 
  position: relative;
  padding-left: 1.5rem;
}

.requisito-container ul li::before {
  content: "•"; 
  color: var(--bg);
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* RESPONSIVE */
.requisito-container img {
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 25px;
  box-shadow: 6px 4px 12px rgba(0, 0, 0, 0.5);
}

/* Tablet */
@media (max-width: 1400px) {
  .requisito-container {
    grid-template-columns: 1fr;
    text-align: center;
    width: 80%;
    gap: 2rem;
  }

  .requisito-container img {
    max-width: 100%; 
  }
}

/* Mobile */
@media (max-width: 576px) {
  .requisito-container {
    gap: 1.5rem;
    width: 90%;
  }

  .requisito-container img {
    max-width: 100%;
  }

  .no-risk {
    padding: 0.6rem 1.5rem;
    font-size: 0.95rem;
  }
}

/* TESTIMONIOS */
.test-left img {
  max-width: 600px; 
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 25px; 
  box-shadow: 6px 4px 12px rgba(0, 0, 0, 0.5);
}

/* Tablet */
@media (max-width: 1400px) {
  .test-left img {
    max-width: 87%; 
  }
}

/* Mobile */
@media (max-width: 576px) {
  .test-left img {
    max-width: 100%;
  }
}

/* PROTECCION MONUMENTAL */
.proteccion-monumental {
  color: var(--bg) !important;
}

.proteccion-monumental__contenido {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  padding: 3rem 0;
  width: 90%;
}

@media (min-width: 1100px) {
  .proteccion-monumental__contenido {
    width: 50%;
  }
}

.proteccion-monumental__contenido h2 {
  color:var(--bg);font-weight:900;font-size:clamp(26px,3.6vw,40px);line-height:1.05;margin:0 0 1rem; text-align: center;
}

.proteccion-monumental__contenido p {
  text-align: justify;
}

.proteccion-monumental__contenido ul {
  list-style: none; 
  padding: 0;
  margin: 0.5rem 0;
  width: 100%;
}

.proteccion-monumental__contenido ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem; 
  position: relative;
  padding-left: 1.5rem;
}

.proteccion-monumental__contenido ul li::before {
  content: "•"; 
  color: var(--bg);
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* FOOTER */
footer {
  width: 100%;
  background-color: var(--text);
  padding: 3rem 1rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Tablet */
@media (max-width: 1024px) {
  .footer-content {
    grid-template-columns: 1fr; /* una columna */
    text-align: center;
    gap: 3rem;
  }

  .footer-content__logo-container img {
    width: 300px; /* reduce logo */
  }

  .footer-content__list-services {
    grid-template-columns: 1fr; /* lista en una columna */
    gap: 1rem;
  }

  .footer-content__list-services ul {
    font-size: clamp(14px, 2vw, 18px);
  }

  .phone-number p:first-child {
    font-size: clamp(20px, 2vw, 28px);
  }

  .phone-number__number p {
    font-size: clamp(28px, 2vw, 40px);
  }
}

/* Móvil */
@media (max-width: 600px) {
  .footer-content__logo-container img {
    width: 200px; /* aún más pequeño */
  }

  .footer-content__list-services ul {
    font-size: 14px;
  }

  .phone-number p:first-child {
    font-size: 18px;
  }

  .phone-number__number p {
    font-size: 24px;
  }
}

.footer-content__logo-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer-content__logo-container img {
  width: 400px;
}

.footer-content__list-services {
  color: var(--bg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* más flexible que 2 columnas fijas */
  justify-items: center;
  align-items: start; /* mejor alineación para listas */
  gap: 2rem;
  padding: 1rem 0; /* agrega un poco de espacio vertical */
}

.footer-content__list-services ul {
  text-align: left;
  padding: 0;
  margin: 0;
  font-size: clamp(12px, 1.5vw, 18px); /* tamaño más consistente */
}

.footer-content__list-services ul li {
  margin-top: 0.5rem;
  line-height: 1.5; /* mejora legibilidad */
}


.footer-content__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-content__contact .phone-number {
  background: var(--red-700);
  padding: .5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 15px;
}

.phone-number p  {
  margin: 0;
}

.phone-number p:first-child {
  color: var(--bg);
  font-size: clamp(25px, 2vw, 35px);
  font-weight: bold;
}

.phone-number__number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.phone-number__number p {
  font-size: clamp(35px, 2vw, 50px);
  color: var(--yellow);
  font-weight: bolder;
}

/************** Utilities */
.centered-text {
  text-align: center !important;
}

.quote-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .9rem 2.5rem .9rem 1rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4" stroke="%230f1c36" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 1rem center;
  background-size: 12px 12px;
  border: 2px solid var(--blue-950);
  border-radius: 10px;
  font-size: 1rem;
  background-color: #fff;
}

.quote-form input:focus, .quote-form select:focus {
  border-color: var(--red-700);
  outline: none;
}

.gray-bg {
  background: #e9e9e9;
}

.text-color-black {
  color: black !important;
}

/* Ajuste solo para tablet */
@media (max-width: 1100px) and (min-width: 700px) {
  .quote-form {
    width: 95%;         
    grid-template-columns: repeat(2, 1fr); 
    padding: 1rem;      
    margin-inline: auto; 
  }
}

.red-background {
  background:#a4161a;
}

.blue-background {
  background:var(--blue-900);
}

.white-background {
  background:var(--bg) !important;
}

.red-letters{
  color: var(--red-700);
}

.blue-letters {
  color: var(--blue-900);
}

.site-header {
  height: 80px; 
}

section {
  scroll-margin-top: 80px; 
}

.large-font {
  font-size: clamp(24px, 4vw, 45px) !important; /* más chica en móvil */
  font-weight: 900;
  line-height: 1.2;           /* mejor legibilidad */
  text-align: left;           /* nada de justificado */
  word-break: break-word;     /* evita que títulos largos se salgan */
  margin: 0;                  /* opcional: ajustar según tu layout */
  color: inherit;             /* toma el color del contenedor */
}

.medium-font {
  font-size: clamp(20px, 2.5vw, 30px) !important;
  font-weight: 700;
}

.w-100 {
  width: 100%;
}

.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bold-text {
  font-weight: bold;
}

.contenedor {
  max-width: 80%;
}

.white-text {
  color: var(--bg);
}

.restricciones-aplican {
  font-size: 0.85rem;       
  color: #6c757d;           
  font-style: italic;     
  margin-top: 8px;         
  text-align: left;         
}

.red-text {
  color: #9b1d22
}

.mt-0 {
    margin-top: 0 !important;
}

/* Logo size adjustments */
.header-inner {
  padding-top: 0.3rem;
}

.logo-text img {
  max-width: 150px; /* ancho máximo del logo */
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width:1100px){
  .logo-text img {
    max-width: 150px; /* más pequeño en tablet */
  }

  .header-inner {
  padding-top: 0.5rem;
}
}

@media (max-width:700px){
  .logo-text img {
    max-width: 120px; /* más pequeño en móviles */
  }
}

@media (max-width:704px) {
    .header-inner {
  padding-top: 1rem;
}
}

footer a {
  text-decoration: none;
  color: inherit;
}

footer a:hover {
  text-decoration: underline
}

.contenedor-error-msg {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 1rem;
}

.yellow-text {
  color: #e2bb15 !important;
}

.adjusted-font-size {
  font-size: 1.6rem; /* tamaño base */
  text-align: left; /* evita justificado */
  line-height: 1.6;
}

/* Tablets y pantallas medianas */
@media (max-width: 768px) {
  .adjusted-font-size {
    font-size: 1.3rem;
  }
}

/* Teléfonos y pantallas pequeñas */
@media (max-width: 480px) {
  .adjusted-font-size {
    font-size: 1rem;
    text-align: left;
  }
}

.phone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* espacio entre icono y texto */
  font-size: 16px; /* mismo tamaño de letra que el botón de cotización */
  padding: 10px 65px; /* mismo padding que el botón de cotización */
  border: 2px solid #9b9b9b;
  border-radius: 25px; /* mismo borde redondeado */
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  color: black;
}

.phone-btn svg {
  width: 20px; /* igual que el icono del botón de cotización */
  height: 20px;
}

@media (max-width: 480px) {
  .phone-btn {
    padding: 10px 45px;
  }
}

.mb-3rem {
  margin-bottom: 3rem;
}

.mt-3rem {
  margin-top: 3rem;
}

.center{
  text-align: center !important;
}