:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px)}
*,*::before,*::after{box-sizing:inherit}

:root[data-tema=base]{--bg:#F2FAFA;--sf:#fff;--ink:#0A2D31;--mu:#4F6F73;--pr:#14868B;--ac:#E0650F;--ln:#D3E6E6;--on:#fff;--g1:#bfe6e7;--g2:#fbdcc6}
:root[data-tema=dark]{--bg:#0B1C1E;--sf:#122A2D;--ink:#E8F4F3;--mu:#9DB7B8;--pr:#2FB3B8;--ac:#E0650F;--ln:#24403F;--on:#06292b;--g1:#0f3b3e;--g2:#3a2314}

body{margin:0;font:400 16px/1.6 Figtree,system-ui,sans-serif;background:var(--bg);color:var(--ink);transition:background .4s,color .4s}
h1,h2,h3,.pr{font-family:'Bricolage Grotesque',system-ui,sans-serif;line-height:1.08;margin:0;letter-spacing:-.02em}
a{color:inherit}.w{max-width:1120px;margin:auto;padding:0 20px}

.flag{display:inline-block;width:18px;height:12px;vertical-align:-1px;border-radius:2px;background:linear-gradient(90deg,#D91023 33%,#fff 33% 66%,#D91023 66%);box-shadow:0 0 0 1px #0002}
.bn{background:var(--pr);color:var(--on);text-align:center;font-size:.88rem;padding:8px 16px;font-weight:500}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)}
header .w{display:flex;align-items:center;gap:22px;height:84px}
.lg{height:76px;width:auto;display:block}

nav{margin-left:auto;display:flex;gap:22px;font-weight:500;font-size:.95rem}
nav a{text-decoration:none;color:var(--mu)}
nav a:hover{color:var(--ink)}

.b{display:inline-block;padding:11px 22px;border-radius:99px;background:var(--pr);color:var(--on);font-weight:700;text-decoration:none;border:2px solid var(--pr);font-size:.95rem;cursor:pointer;font-family:inherit}
.b.o{background:none;color:var(--ink);border-color:var(--ln)}
.b.s{padding:7px 16px;font-size:.85rem}
.b:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--ac);outline-offset:2px}

.hero{padding:64px 0 72px;background:radial-gradient(60% 90% at 90% 0,var(--g1),transparent 70%),radial-gradient(50% 70% at 0 100%,var(--g2),transparent 70%)}
.hg{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.k{display:inline-block;background:var(--sf);border:1px solid var(--ln);border-radius:99px;padding:5px 14px;font-size:.85rem;font-weight:700;margin-bottom:20px}
h1{font-size:clamp(2.3rem,5.4vw,4.2rem);font-weight:800}
.lead{font-size:1.15rem;color:var(--mu);max-width:34em;margin:20px 0 28px}
.bt{display:flex;gap:12px;flex-wrap:wrap}

.ha{position:relative;aspect-ratio:1}

.hero-carousel {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 24px 60px -24px #0007;
  background: var(--sf);
}

.hero-carousel img.carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero-carousel img.carousel-img.active {
  opacity: 1;
}

.c2{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;bottom:24px;background:var(--ac);color:#fff;padding:10px 18px;border-radius:14px;font-weight:500;font-size:.92rem;box-shadow:0 10px 30px -10px #0006; z-index: 10;}
.c2 b{font:800 1.5rem 'Bricolage Grotesque',sans-serif}

section{padding:68px 0}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800}
.sub{color:var(--mu);margin:10px 0 28px;max-width:40em}

.ch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.ch button{font:500 .92rem Figtree,sans-serif;padding:8px 18px;border-radius:99px;border:1px solid var(--ln);background:var(--sf);color:var(--ink);cursor:pointer}
.ch button.on{background:var(--pr);color:var(--on);border-color:var(--pr)}

.gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.cd{background:var(--sf);border:1px solid var(--ln);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.ph{aspect-ratio:1;overflow:hidden;background:var(--ln)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.cb{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.cb h3{font-size:1.2rem}
.cb p{margin:0;color:var(--mu);font-size:.93rem;flex:1}

.ft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;border-top:1px solid var(--ln);padding-top:14px}
.pr{font-size:1.5rem;font-weight:800;color:var(--ac)}

.ug{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:560px}
.ug img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:16px;display:block}
.ubv-link{display:block;border-radius:16px;overflow:hidden;transition:transform .2s ease;}
.ubv-link:hover{transform:scale(1.02);}

.wy{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:2px solid var(--ink);padding-top:28px}
.wy h3{font-size:1.3rem;margin-bottom:8px}
.wy p{margin:0;color:var(--mu)}

.ct{background:var(--pr);color:var(--on);border-radius:32px;padding:48px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.ct .b{background:var(--on);color:var(--pr);border-color:var(--on)}
.ct p{margin:8px 0}

/* Footer ordenado */
footer{padding:40px 0 110px;border-top:1px solid var(--ln);color:var(--mu);font-size:.9rem}
.footer-content{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:4px}
.text-right{text-align:right}

/* Tarjeta informativa dinámica con imagen difuminada en el fondo */
.rt{position:relative;background:var(--sf);border:1px solid var(--ln);border-left:6px solid var(--ac);border-radius:20px;padding:30px 34px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;overflow:hidden}
.rt-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.12;filter:blur(8px);z-index:0;transition:opacity .5s ease;}
.sl, .rd{position:relative;z-index:1;}
.sl{transition:opacity .35s}
.sl.out{opacity:0}
.rt h3{font-size:1.05rem}
.rt p{font:700 clamp(1.3rem,2.8vw,1.95rem)/1.25 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.015em;margin:10px 0 0;max-width:30em}
.rd{display:flex;gap:16px;align-items:center;justify-content:space-between}

#fz{display:grid;gap:22px}
.fz{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--sf);border:1px solid var(--ln);border-radius:24px;overflow:hidden}
.fz img{width:100%;height:100%;min-height:320px;object-fit:cover;display:block}
.fz .fb{padding:32px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.fz h3{font-size:1.7rem}
.fz p{margin:0;color:var(--mu)}

.tr{list-style:none;margin:6px 0;padding:0;border-top:1px solid var(--ln)}
.tr li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--ln);font-weight:500}
.tr small{display:block;color:var(--mu);font-weight:400;font-size:.85rem}
.tr b{font:800 1.5rem 'Bricolage Grotesque',sans-serif;color:var(--pr)}

.im{background:var(--sf);border:1px solid var(--ln);border-radius:24px;padding:32px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.im p{margin:0;color:var(--mu);max-width:36em}

/* Botón flotante de WhatsApp */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: #25d366;
  color: #fff;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 40;
  transition: transform .2s ease;
}
.wa-float:hover {
  transform: scale(1.1);
}

/* Botón flotante "Volver arriba" centrado en la parte inferior */
.scroll-top-float {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) scale(0);
  bottom: 20px;
  background: var(--sf);
  color: var(--ink);
  border: 1px solid var(--ln);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 35;
  transition: transform .3s ease, background .3s, color .3s;
  opacity: 0;
  pointer-events: none;
}
.scroll-top-float.show {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.scroll-top-float:hover {
  background: var(--pr);
  color: var(--on);
  border-color: var(--pr);
}

/* Selector de Modo Claro / Oscuro ubicado justo encima de WhatsApp */
.sw{position:fixed;z-index:30;right:24px;bottom:92px;display:flex;flex-direction:column;gap:6px;background:var(--sf);border:1px solid var(--ln);border-radius:99px;padding:6px;box-shadow:0 10px 30px -8px #0006}
.sw button{border:0;background:none;border-radius:50%;width:36px;height:36px;font-size:1rem;cursor:pointer;display:grid;place-content:center;color:var(--ink);transition:background .2s}
.sw button.on{background:var(--pr);color:var(--on)}

@media(max-width:820px){
  nav{display:none}
  header .w{justify-content:space-between}
  .hg,.ct,.wy,.fz{grid-template-columns:1fr}
  .ug{grid-template-columns:repeat(2,1fr)}
  .ct{padding:32px 24px}
  .hero{padding:40px 0 56px}
  section{padding:52px 0}
  .text-right{text-align:left}
}