:root{
  --bg1:#0a1b33; --bg2:#0e2847; --bg3:#12385c;
  --text:#eaf3ff; --muted:#cfe3ff;
  --line:rgba(255,255,255,.12);
  --panel:rgba(255,255,255,.06);
}
*{box-sizing:border-box}

html{ font-size:16px; }
body{
  margin:0;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg1);
}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header */
header{
  position:sticky; top:0; z-index:100;
  background:#0a2a43;
  border-bottom:1px solid var(--line);
}
.wrap.nav{display:flex;align-items:center;justify-content:space-between;height:84px}

.brand img{ height:clamp(72px,7.5vw,96px); width:auto; }

header nav{display:flex;gap:22px}
header nav a{ color:var(--muted); text-decoration:none; font-size:14px !important; }
@media (min-width:1025px){ header nav a{ white-space:nowrap; } }

/* Botón hamburguesa */
.nav-toggle{
  display:none; width:44px; height:44px; margin-left:auto;
  border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.06); cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; width:22px; margin:6px auto; background:#eaf3ff }

/* Backdrop */
.nav-backdrop{
  position:fixed; inset:0; z-index:99;
  background:rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
header.open + .nav-backdrop{ opacity:1; pointer-events:auto; }

/* Móvil / tablet */
/* ===== Marcas: responsive fino ===== */

/* Tablet y móviles grandes: 2 columnas */
@media (max-width: 768px){
  .brand-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-bottom: 72px; /* evita que lo tape el botón de WhatsApp */
  }
  .brand-card{
    padding: 18px 14px;
  }
  .brand-card img{
    max-height: 72px;   /* antes 48px -> se veía chico */
  }
}

/* Teléfonos pequeños: 2 columnas, un poco más compacto */
@media (max-width: 480px){
  .brand-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .brand-card{
    padding: 16px 12px;
  }
  .brand-card img{
    max-height: 64px;
  }
}

/* Hero */
.hero{
  min-height:calc(100svh - 84px);
  padding-top:40px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(180deg,var(--bg1),var(--bg2) 40%,var(--bg3));
}
.hero-inner{ display:flex; flex-direction:column; align-items:center; gap:20px; padding-inline:24px }
.logo-hero img{ max-width:190px; height:auto; margin-bottom:16px }
@media (max-width:768px){ .logo-hero img{ max-width:140px } }
@media (max-width:480px){ .logo-hero img{ max-width:110px } }

.hero-image img{
  width:100%; height:auto;
  max-width:860px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.25));
}
@media (max-width:1024px){ .hero-image img{ max-width:600px } }
@media (max-width:768px){  .hero-image img{ max-width:520px } }
@media (max-width:480px){  .hero-image img{ max-width:380px } }

/* Demo content */
.section{ padding:36px 0 }
.cards-demo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:32px; text-align:center; color:var(--muted) }

/* ===== Agenda Premium ===== */
.agenda{
  background:
    radial-gradient(1200px 700px at 50% -200px, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg3));
  padding: 48px 0 32px;
  border-top: 1px solid var(--line);
}
.agenda-head{ text-align:center; margin-bottom:20px }
.agenda .p_sub{ color:var(--muted); margin-top:6px }

.agenda-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px
}
@media (max-width:1024px){ .agenda-cards{ grid-template-columns:1fr 1fr } }
@media (max-width:680px){  .agenda-cards{ grid-template-columns:1fr } }

.agenda-card{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  display:flex; flex-direction:column; gap:10px;
}
.agenda-card__icon{
  font-size: 28px; line-height: 1;
  width: 48px; height: 48px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
}
.agenda-card h3{ margin: 6px 0 2px }
.p_small{ color: var(--muted); font-size: 14px }

.agenda-list{
  margin: 0; padding-left: 18px;
  color: var(--muted);
  display: grid; gap: 4px;
  font-size: 14px;
}

/* Botones */
.btn{
  background:#0a2a43; color:#eaf3ff; border:1px solid var(--line);
  padding:10px 14px; border-radius:10px; cursor:pointer;
  transition: transform .05s ease, filter .15s ease;
  width: fit-content;
}
.btn:hover{ filter:brightness(1.1) }
.btn:active{ transform: translateY(1px) }
.btn-primary{
  background: linear-gradient(180deg, #0e2847, #0a1b33);
  border-color: rgba(255,255,255,.18);
}

/* Sin iframe, solo popups */
.agenda-embed{ display:none; }

.agenda-footnote{
  color: var(--muted);
  margin-top: 10px;
  text-align: center;
  opacity: .9;
}
.p_tiny{ font-size: 12px }
/* Principales marcas */
.brand-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:22px;
  margin-top:18px;
}
.brand-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; color:var(--text);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.brand-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.brand-card img{
  max-height:300px; width:auto; object-fit:contain; margin-bottom:12px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
}
.brand-card span{
  font-weight:600; color:var(--muted); letter-spacing:.2px;
}
.brand-card:active { transform: translateY(1px) scale(.99); }

/* Ajustes responsivos sutiles */
@media (max-width:480px){
  .brand-card{ padding:18px 14px; }
  .brand-card img{ max-height:48px; }
}
/* Botón flotante WhatsApp */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
.whatsapp-float img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: transform .2s ease;
}
/* ===== Bloque de logos de marcas ===== */
.logos-marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: min(3vw, 24px);
  padding: 20px 0;
}

.logos-marcas img {
  width: clamp(90px, 14vw, 240px); /* escala fluida */
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Ajustes para móviles pequeños */
@media (max-width: 480px) {
  .logos-marcas img {
    width: clamp(100px, 36vw, 200px);
  }
}
/* Ajuste general para logos en tarjetas */
.brand-card img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

/* En móviles: que los logos sean más grandes */
@media (max-width: 768px) {
  .brand-card img {
    max-height: 150px;  /* cámbialo a 120px si lo quieres más moderado */
  }
}
/* ===== PRINCIPALES MARCAS (desktop y mobile) ===== */

/* 1) Grid de tarjetas: 4 columnas en PC, 2 en tablet, 1 en móvil */
.brand-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 20px;
}

/* 2) Tarjeta: centrado y altura cómoda */
.brand-card{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 160px;          /* sube si quieres más alto */
  padding: 14px;
  border-radius: 16px;
}

/* Ocultar nombre si quedó en el HTML */
.brand-card span{ display:none !important; }

/* 3) Logo dentro de la tarjeta: grande en PC, fluido en mobile */
.brand-card img{
  width: clamp(180px, 18vw, 280px);  /* crecer en monitores grandes */
  max-height: 120px;                 /* evita desbordes verticales */
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Tablet */
@media (max-width: 1024px){
  .brand-grid{ grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .brand-card{ min-height: 150px; }
  .brand-card img{ width: clamp(160px, 32vw, 260px); max-height: 110px; }
}

/* Móvil */
@media (max-width: 600px){
  .brand-grid{ grid-template-columns: 1fr; }
  .brand-card{ min-height: 160px; padding: 16px; }
  .brand-card img{ width: clamp(180px, 70vw, 300px); max-height: 130px; }
}

#catalogo-btu h2 {
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  color: white;
  font-size: 32px;
  text-align: center;
  margin-bottom: 10px;
}

#catalogo-btu .p_sub {
  text-align: center;
  color: var(--muted);
  margin-bottom: 30px;
}
/* Catálogo por BTU */
.btu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 24px;
}

.btu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btu-card img {
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: 12px;
  margin-bottom: 10px;
}

.btu-card span {
  color: white;
  font-size: 20px;
  font-weight: 600;
}

.btu-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Ajuste móvil */
@media (max-width: 768px) {
  .btu-card img {
    max-width: 160px;
  }
  .btu-card span {
    font-size: 18px;
  }
}

/* ===== Catálogo por BTU (PRO, sin JPG) ===== */
#catalogo-btu h2{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 32px;
  margin: 0 0 6px;
  text-align: center;
  color: #fff;
}
#catalogo-btu .p_sub{
  text-align:center; color: var(--muted); margin: 0 0 24px;
}

.btu-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:22px;
}
@media (max-width: 1024px){ .btu-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)); } }
@media (max-width: 600px){  .btu-grid{ grid-template-columns: 1fr; } }

.btu-card{
  position: relative;
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, #0a1b33, #12385c);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 40px rgba(0,0,0,.28);
  padding: 28px;
  min-height: 220px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  color: #dfefff;
}
.btu-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.35);
}

.btu-card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  pointer-events:none;
}

/* Ícono AC (SVG inline) */
.btu-card .ac-icon{
  position:absolute; top:20px; right:20px;
  width: 44px; height:44px;
  color: rgba(200,230,255,.75);
}

/* Número/label */
.btu-label{
  position: relative;
  font-family: ui-serif, Georgia, serif;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: clamp(26px, 4.4vw, 40px);
  color: #eaf3ff;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}

/* Tonos sutiles por BTU (diferenciación premium) */
.btu-9  { background-image:
  radial-gradient(60% 80% at 0% 0%, rgba(106,209,255,.18), rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
  linear-gradient(180deg, #0a1b33, #12385c); }

.btu-12 { background-image:
  radial-gradient(60% 80% at 100% 0%, rgba(152,226,255,.18), rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
  linear-gradient(180deg, #0a1b33, #12385c); }

.btu-18 { background-image:
  radial-gradient(60% 80% at 0% 100%, rgba(90,210,200,.18), rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
  linear-gradient(180deg, #0a1b33, #12385c); }

.btu-24 { background-image:
  radial-gradient(60% 80% at 100% 100%, rgba(170,200,255,.18), rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
  linear-gradient(180deg, #0a1b33, #12385c); }
/* --- Catálogo por BTU --- */
.btu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  margin-top: 25px;
}

.btu-card {
  background: linear-gradient(180deg, rgba(20,40,80,0.7) 0%, rgba(10,20,40,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 25px;
  text-align: center;
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.2);
}

.btu-card img {
  width: 80px;
  height: auto;
  margin-bottom: 15px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.1));
}

.btu-card span {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.5px;
}
/* ===== Catálogo por BTU — versión premium sin imágenes ===== */
#catalogo-btu h2{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  color:#fff; font-size:32px; text-align:center; margin:0 0 6px;
}
#catalogo-btu .p_sub{ text-align:center; color:var(--muted); margin:0 0 24px; }

.btu-grid{
  display:grid; gap:22px;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}
@media (max-width:1024px){ .btu-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width:600px){  .btu-grid{ grid-template-columns: 1fr; } }

.btu-card{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:220px; padding:28px; border-radius:18px;
  color:#eaf3ff;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, #0a1b33, #12385c);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 40px rgba(0,0,0,.28);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  backdrop-filter: blur(3px);
}
.btu-card:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 60px rgba(0,0,0,.38);
  border-color:rgba(255,255,255,.35);
  filter:saturate(108%);
}

/* Brillo sutil superior */
.btu-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}

/* Ícono de aire (SVG) */
.ac-icon{
  position:absolute; top:18px; right:18px;
  width:44px; height:44px; color:rgba(200,230,255,.78);
}

/* Título */
.btu-label{
  position:relative;
  font-family: ui-serif, Georgia, serif; font-weight:700;
  font-size: clamp(24px, 4.2vw, 38px); letter-spacing:.2px;
  color:#eaf3ff; text-shadow:0 2px 10px rgba(0,0,0,.28);
}

/* Paletas sutiles por tarjeta para variedad premium */
.btu-9  { background-image:
  radial-gradient(60% 80% at 0% 0%, rgba(106,209,255,.18), rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
  linear-gradient(180deg, #0a1b33, #12385c); }
.btu-12 { background-image:
  radial-gradient(60% 80% at 100% 0%, rgba(152,226,255,.18), rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
  linear-gradient(180deg, #0a1b33, #12385c); }
.btu-18 { background-image:
  radial-gradient(60% 80% at 0% 100%, rgba(90,210,200,.18), rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
  linear-gradient(180deg, #0a1b33, #12385c); }
.btu-24 { background-image:
  radial-gradient(60% 80% at 100% 100%, rgba(170,200,255,.18), rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
  linear-gradient(180deg, #0a1b33, #12385c); }
  
  /* ===== Sección BTU ===== */
.btu-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  margin-top: 20px;
}

.btu-card {
  background: linear-gradient(145deg, rgba(14,30,60,0.9), rgba(10,20,40,0.95));
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.btu-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  border-color: #00c4ff;
}

.btu-card img {
  width: 85px;
  height: auto;
  margin-bottom: 10px;
  filter: brightness(1.1);
}

.btu-card span {
  color: white;
  font-family: "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
/* ===== Sección BTU (azul oscuro + brillo metálico) ===== */
.btu-section h2{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  color:#fff; font-size:32px; text-align:center; margin:0 0 6px;
}
.btu-section .p_sub{ text-align:center; color:var(--muted); margin:0 0 22px; }

.btu-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(220px,1fr));
  gap:22px;
}
@media (max-width:1200px){ .btu-grid{ grid-template-columns: repeat(3, minmax(220px,1fr)); } }
@media (max-width:768px){  .btu-grid{ grid-template-columns: repeat(2, minmax(200px,1fr)); } }
@media (max-width:520px){  .btu-grid{ grid-template-columns: 1fr; } }

.btu-card{
  position:relative; overflow:hidden; border-radius:18px; text-align:center;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, #0a1b33, #12385c);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 36px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px; min-height:260px;
  color:#eaf3ff;
}
.btu-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
.btu-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0,0,0,.40);
  border-color: rgba(255,255,255,.28);
  filter: saturate(1.08);
}

/* Imagen (con brillo metálico sutil) */
.btu-media{
  position:relative; width:100%; max-width:360px; margin:4px auto 10px;
}
.btu-media picture, .btu-media img{ display:block; width:100%; height:auto; border-radius:12px; }
.btu-media::after{
  content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  /* “sheen” metálico diagonal */
  background: linear-gradient(120deg, rgba(255,255,255,.20), rgba(255,255,255,0) 35% 65%, rgba(255,255,255,.12));
  mix-blend-mode: screen; opacity:.18;
}

/* Título */
.btu-label{
  font-family: ui-serif, Georgia, serif; font-weight:700;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing:.2px; color:#f5f9ff;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}
/* ===== Tarjetas BTU con borde brillante animado ===== */
.btu-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(180deg, #0a1b33 0%, #12385c 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  min-height: 260px;
  color: #eaf3ff;
}

/* ✨ Borde animado con brillo metálico */
.btu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(
    120deg,
    rgba(0, 255, 255, 0.9),
    rgba(0, 102, 255, 0.6),
    rgba(255, 255, 255, 0.9),
    rgba(0, 102, 255, 0.6),
    rgba(0, 255, 255, 0.9)
  );
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: shine-border 5s linear infinite;
  pointer-events: none;
}

/* 💫 Animación del halo brillante */
@keyframes shine-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Hover elegante */
.btu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Imagen y texto */
.btu-media {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 10px auto;
}

.btu-media img {
  display: block;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.btu-label {
  font-family: ui-serif, Georgia, serif;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: 0.2px;
  color: #f5f9ff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
/* ===== Tarjetas de MARCAS con borde brillante animado ===== */
.brand-card{
  position: relative;
  isolation: isolate;          /* asegura que el brillo no se “escape” */
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg,#0a1b33 0%,#12385c 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  padding: 18px; min-height: 160px;        /* ajusta si quieres más alto */
  transition: transform .25s ease, box-shadow .25s ease;
}

/* ✨ Borde brillante (mismo efecto que BTU) */
.brand-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:18px; padding:2px;
  background: linear-gradient(
    120deg,
    rgba(0,255,255,.9),
    rgba(0,102,255,.6),
    rgba(255,255,255,.9),
    rgba(0,102,255,.6),
    rgba(0,255,255,.9)
  );
  background-size:300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;        /* deja sólo el borde iluminado */
  animation: brand-shine 5s linear infinite;
  pointer-events:none;
}

/* 💫 Animación del halo */
@keyframes brand-shine{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Hover elegante */
.brand-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.18);
}

/* Logo dentro de la tarjeta (por si usas <img>) */
.brand-card img{
  max-width: 70%; height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* Responsive: un poco más compactas en móvil */
@media (max-width: 560px){
  .brand-card{ min-height: 130px; padding: 14px; }
}
/* === Fix nitidez BTU (unificado) === */
.btu-media { width: 100%; max-width: 340px; margin: 8px auto 10px; }
.btu-media picture, .btu-media img { display:block; width:100%; height:auto; border-radius:12px; }

@media (max-width: 1024px){ .btu-media { max-width: 300px; } }
@media (max-width: 600px) { .btu-media { max-width: 88vw; } }

/* Evita que reglas anteriores achiquen la imagen a 80/85px */
.btu-card img { max-width: none !important; width: 100% !important; height: auto !important; }

/* Opcional: un pequeño boost a la nitidez (mejora en Chrome) */
.btu-media img{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
/* === Corrección del grid BTU === */
.btu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  justify-items: center;
  align-items: center;
  margin: 20px auto;
  max-width: 1200px;
}

.btu-card {
  background: rgba(10, 20, 40, 0.85);
  border: 1px solid rgba(0, 120, 255, 0.4);
  border-radius: 18px;
  box-shadow: 0 0 25px rgba(0, 120, 255, 0.2);
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.btu-card:hover {
  box-shadow: 0 0 35px rgba(0, 140, 255, 0.6);
  transform: translateY(-3px);
}

.btu-card img {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 10px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
/* === TARJETAS BTU MÁS PEQUEÑAS === */
.btu-grid {
  gap: 18px; /* menos separación entre tarjetas */
  max-width: 900px; /* antes estaba en 1200px */
}

.btu-card {
  padding: 12px;
  border-radius: 16px;
  box-shadow: 0 0 18px rgba(0,150,255,0.25);
  max-width: 230px; /* tamaño de tarjeta más compacto */
}

.btu-card img {
  max-width: 200px;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
/* === 5 TARJETAS BTU EN UNA FILA === */
.btu-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap; /* evita que bajen de línea */
  gap: 18px; /* espacio entre tarjetas */
  overflow-x: auto; /* scroll horizontal en pantallas pequeñas */
  padding: 10px;
}

.btu-card {
  flex: 0 0 200px; /* ancho fijo de cada tarjeta */
  background: rgba(0, 30, 60, 0.9);
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0, 120, 255, 0.25);
  text-align: center;
  padding: 12px;
  transition: all 0.3s ease;
}

.btu-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
/* === TARJETAS BTU EN UNA FILA (scroll táctil premium) === */
.btu-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;           /* mantiene las 5 en una sola línea */
  gap: 18px;                   /* espacio entre tarjetas */
  overflow-x: auto;            /* permite desplazamiento horizontal */
  scroll-behavior: smooth;     /* scroll suave */
  -webkit-overflow-scrolling: touch; /* suave en iPhone/iPad */
  scrollbar-width: none;       /* oculta barra en Firefox */
}

.btu-grid::-webkit-scrollbar {
  display: none;               /* oculta barra en Chrome/Safari */
}

.btu-card {
  flex: 0 0 220px;             /* ancho fijo por tarjeta */
  background: rgba(0, 30, 60, 0.9);
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0, 120, 255, 0.25);
  text-align: center;
  padding: 14px;
  transition: all 0.3s ease;
}

.btu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 30px rgba(0, 150, 255, 0.5);
}

.btu-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
/* --- FIX superposición y recortes del carrusel BTU --- */

/* Asegura que la sección BTU nunca se recorte ni quede debajo */
#btu, .section#btu {
  position: relative;
  z-index: 5;              /* por encima de bloques posteriores */
  overflow: visible !important;
}

/* Si tu .wrap o un padre tiene overflow oculto, anúlalo aquí */
.wrap, .section, .container, .panel {
  overflow: visible;
}

/* Carrusel en una sola línea con scroll táctil premium (oculto) */
.btu-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  overflow-x: auto;            /* scroll horizontal */
  overflow-y: visible;         /* evita recortes verticales */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 8px;
  max-width: 100%;
}
.btu-grid::-webkit-scrollbar { display: none; }

/* Tamaño uniforme de tarjetas (ajusta el 220px si las quieres más chicas/grandes) */
.btu-card {
  flex: 0 0 220px;
  border-radius: 16px;
  text-align: center;
  padding: 12px;
}

/* Imagen dentro de la tarjeta sin deformaciones ni recortes */
.btu-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* El bloque siguiente (agenda) no debe tapar el carrusel */
#agenda, .section#agenda, #agendar, .agenda {
  position: relative;
  z-index: 1;               /* por debajo del carrusel */
  margin-top: 24px !important;  /* sin márgenes negativos */
  overflow: visible;
}

/* Si usas filters/backdrop-filter en el panel de agenda, bájale la prioridad */
#agenda, .section#agenda, #agendar, .agenda {
  transform: none;          /* evita stacking context extra */
  filter: none;             /* si tenías filter, quita o baja su z-index */
  backdrop-filter: none;    /* si lo usas, asegúrate que no tape el carrusel */
}
/* === Scroll-snap premium para la fila BTU === */
.btu-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  /* Snap */
  scroll-snap-type: x mandatory;
  scroll-padding: 12px;            /* margen virtual antes del primer snap */
}
.btu-grid::-webkit-scrollbar { display: none; }

.btu-card {
  flex: 0 0 220px;                 /* ancho de cada tarjeta */
  scroll-snap-align: center;       /* se centra al soltar */
  scroll-snap-stop: always;        /* siempre “engancha” */
  border-radius: 16px;
  text-align: center;
  padding: 12px;
}

.btu-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
/* ===== Agenda PRO (glass + neon sutil) ===== */
.agenda-pro { position: relative; z-index: 1; }
.agenda-pro h2{
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: .5px;
  text-align:center; margin:0 0 6px;
}
.agenda-pro .sub{
  color: #b8c9ff; text-align:center; margin:0 0 22px;
  font-size: 14px;
}

/* GRID responsivo */
.agenda-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap:22px; max-width:1200px; margin:0 auto;
  padding:16px;
}
@media (max-width: 980px){
  .agenda-grid{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
}
@media (max-width: 640px){
  .agenda-grid{ grid-template-columns: 1fr; }
}

/* Tarjeta PRO */
.card-pro{
  position:relative; overflow:hidden;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(12,24,48,.65), rgba(8,16,32,.85));
  border:1px solid rgba(90,150,255,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 28px rgba(0,40,120,.25);
  padding:18px 18px 16px;
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-pro::before{
  content:""; position:absolute; inset:-1px;
  border-radius:18px;
  pointer-events:none;
  background: radial-gradient(60% 50% at 50% -10%, rgba(70,150,255,.35), transparent 60%);
  opacity:.7; transition: opacity .25s ease;
}
.card-pro:hover{
  transform: translateY(-4px);
  border-color: rgba(120,190,255,.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 36px rgba(40,120,255,.35);
}
.card-pro:hover::before{ opacity:1; }

/* Cabecera */
.card-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.card-head .ico{
  width:28px; height:28px; fill:#8ec3ff; filter: drop-shadow(0 0 6px rgba(80,160,255,.45));
}
.card-head h3{ font-size:18px; margin:0; letter-spacing:.3px; }
.pill{
  margin-left:auto; font-size:11px; padding:4px 8px; border-radius:999px;
  background: linear-gradient(180deg,#1a3d7a,#0f2b58);
  color:#bfe1ff; border:1px solid rgba(120,190,255,.35);
  box-shadow: 0 0 8px rgba(80,150,255,.35);
}

/* Lista con check */
.list{ list-style:none; padding:10px 0 12px; margin:0; display:grid; gap:8px; }
.list li{
  position:relative; padding-left:22px; color:#cfe0ff; font-size:14px;
}
.list li::before{
  content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:3px;
  background: linear-gradient(180deg,#7fd0ff,#5198ff);
  box-shadow: 0 0 8px rgba(80,150,255,.5);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M6.2 11.2L2.7 7.7l1.2-1.2 2.3 2.3 5-5 1.2 1.2-6.2 6.2z"/></svg>') center/12px 12px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M6.2 11.2L2.7 7.7l1.2-1.2 2.3 2.3 5-5 1.2 1.2-6.2 6.2z"/></svg>') center/12px 12px no-repeat;
}

/* Botón PRO */
.btn-pro{
  display:inline-block; text-decoration:none; text-align:center;
  width:100%; padding:12px 14px; border-radius:12px;
  background: linear-gradient(180deg,#5eb3ff,#2b7aff);
  color:#071224; font-weight:700; letter-spacing:.3px;
  border:1px solid rgba(120,190,255,.55);
  box-shadow: 0 6px 18px rgba(35,120,255,.45), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-pro:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.btn-pro:active{ transform: translateY(0); box-shadow: 0 4px 14px rgba(35,120,255,.35); }

/* Nota inferior */
.foot{ display:block; margin-top:10px; color:#96b5ff; opacity:.9; font-size:12px; }

/* Accesibilidad al foco teclado */
.card-pro:focus-within, .btn-pro:focus{
  outline: 2px solid rgba(140,200,255,.7);
  outline-offset: 2px;
}
/* ========= PRO-Max Sur Climatizado ========= */

/* Ambient glow suave detrás del contenedor agenda */
.agenda-pro {
  isolation: isolate;
}
.agenda-pro::after {
  content: "";
  position: absolute;
  inset: -60px -80px -80px -80px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 500px at 50% -10%,
      rgba(60,140,255,.10), transparent 60%);
  filter: blur(18px);
}

/* Tarjeta PRO: mejoras de rendimiento + base visual */
.card-pro {
  perspective: 800px;
  will-change: transform, box-shadow, border-color;
  contain: layout paint style;
}

/* Sheen (brillo lateral) y halo sutil */
.card-pro::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(110deg,
      transparent 0%,
      rgba(255,255,255,.06) 15%,
      rgba(255,255,255,.12) 22%,
      rgba(255,255,255,.06) 29%,
      transparent 45%),
    radial-gradient(80% 60% at 50% -10%, rgba(90,160,255,.18), transparent 60%);
  mix-blend-mode: screen;
  opacity: .0;
  transition: opacity .35s ease;
}

/* Glow interior más fino al pasar */
.card-pro:hover,
.card-pro:focus-within {
  transform: translateY(-4px) rotateX(0.6deg) rotateY(-0.6deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 16px 36px rgba(35,120,255,.35),
    0 1px 0 rgba(255,255,255,.06);
}
.card-pro:hover::before { opacity: 1; }
.card-pro:hover::after  { opacity: .9; }

/* Animación del sheen (deslizamiento) */
.card-pro:hover .sheen,
.card-pro:focus-within .sheen {
  opacity: .55;
  transform: translateX(120%);
}
.card-pro .sheen {
  content: "";
  position: absolute;
  top: -10%;
  left: -40%;
  width: 50%;
  height: 120%;
  background: linear-gradient(100deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.15) 50%,
      rgba(255,255,255,0.00) 100%);
  filter: blur(6px);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform .9s cubic-bezier(.2,.6,.2,1), opacity .4s ease;
  pointer-events: none;
}

/* Botón con pulso leve */
.btn-pro {
  position: relative;
  overflow: hidden;
}
.btn-pro::after {
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(220px 120px at 20% -40%,
              rgba(255,255,255,.35), transparent 60%);
  opacity:.0; transition: opacity .25s ease;
}
.btn-pro:hover::after { opacity:.25; }

/* Hover táctil (móviles que no soportan :hover nativo) */
@media (hover: none) {
  .card-pro:active {
    transform: translateY(-2px) scale(.996);
    box-shadow: 0 10px 28px rgba(35,120,255,.30);
  }
  .btn-pro:active {
    transform: translateY(1px);
  }
}

/* Scroll-snap para la fila BTU (si lo estás usando también aquí) */
.btu-grid {
  scroll-snap-type: x mandatory;
  scroll-padding: 12px;
}
.btu-card { scroll-snap-align: center; scroll-snap-stop: always; }

/* Accesibilidad: respeta reducir animaciones */
@media (prefers-reduced-motion: reduce) {
  .card-pro, .btn-pro, .card-pro .sheen,
  .card-pro::after, .card-pro::before {
    transition: none !important;
    animation: none !important;
  }
}
/* ===== Agenda PRO-Max: micro-interacciones + glow + shimmer ===== */

/* Luz ambiental de toda la sección Agenda (fondo integrado) */
.agenda-pro {
  position: relative;
  z-index: 1;
}
.agenda-pro::before {
  content: "";
  position: absolute;
  inset: -40px -20px -60px;
  pointer-events: none;
  background:
    radial-gradient(1200px 380px at 50% -120px, rgba(60,140,255,.12), transparent 60%),
    radial-gradient(800px 260px  at 50% 100%, rgba(40,100,220,.10), transparent 70%);
  filter: blur(0.2px);
  z-index: 0;
}

/* Tarjeta base (ya la tienes). Aumentamos rendimiento y preparamos animaciones */
.card-pro{
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}

/* Halo superior existente (tu ::before) se mantiene.
   Añadimos un SHIMMER en ::after que cruza la tarjeta */
.card-pro::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255,255,255,.18) 35%,
    rgba(120,190,255,.28) 50%,
    rgba(255,255,255,.14) 65%,
    transparent 80%
  );
  background-size: 200% 100%;
  transform: translateZ(0);
}

/* Hover / foco: levita, aumenta glow y corre el brillo */
.card-pro:hover,
.card-pro:focus-within{
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 14px 40px rgba(40,120,255,.35);
  border-color: rgba(120,190,255,.45);
  filter: saturate(1.03);
}
.card-pro:hover::after,
.card-pro:focus-within::after{
  opacity:.9;
  animation: proShine 1.8s ease-out forwards;
}
@keyframes proShine{
  from { background-position: -180% 0; }
  to   { background-position:  180% 0; }
}

/* Ícono e interacciones sutiles */
.card-head .ico{ transition: filter .25s ease; }
.card-pro:hover .card-head .ico,
.card-pro:focus-within .card-head .ico{
  filter: drop-shadow(0 0 10px rgba(100,170,255,.55)) brightness(1.1);
}

/* Botón: tacto premium */
.btn-pro{
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  will-change: transform;
}
.btn-pro:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.btn-pro:active{ transform: translateY(0); box-shadow: 0 4px 14px rgba(35,120,255,.35); }

/* Móvil / pantallas sin hover: simular tacto */
@media (hover:none){
  .card-pro:active{
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 10px 28px rgba(40,120,255,.35);
  }
  .card-pro:active::after{
    opacity:.7;
    animation: proShine 1.2s ease-out forwards;
  }
}

/* Accesibilidad: reducir animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .card-pro,
  .btn-pro{
    transition: none !important;
  }
  .card-pro::after{
    animation: none !important;
    opacity: 0 !important;
  }
}



/* Fix espacio lateral solo en móvil */
@media (max-width: 600px){
  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;       /* bloquea el scroll lateral */
    margin: 0;
    padding: 0;
  }

  /* Cualquier barra/hero/banner que pudiera estar en 100vw */
  header, .topbar, .hero, .banner, .section.full, .panel-full{
    width: 100% !important;   /* NO 100vw en móvil */
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: clip;          /* por si algún hijo se sale */
  }
}

/* ===== HERO PRO ===== */
.hero-pro{
  position: relative;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(0,170,255,.15), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(0,120,255,.10), transparent 60%),
              linear-gradient(180deg, #0e2a42 0%, #0c2236 100%);
  padding: clamp(36px, 6vw, 72px) 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.hero-pro__wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 24px);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}

.hero-pro h1{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 800;
  letter-spacing: .4px;
  font-size: clamp(28px, 4.2vw, 50px);
  line-height: 1.1;
  color: #e9f2ff;
  text-shadow: 0 6px 26px rgba(0,160,255,.18);
  margin: 0 0 14px;
}

.hero-pro__sub{
  color: #b9c9d9;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.6;
  margin: 0 0 20px;
}

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px;
  border-radius: 14px; font-weight: 700; letter-spacing:.2px;
  border: 1px solid transparent; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select: none;
}
.btn--primary{
  background: linear-gradient(180deg,#3db6ff,#0b86ff);
  color:#fff;
  box-shadow: 0 10px 30px rgba(0,140,255,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0,140,255,.45); }

.btn--ghost{
  background: rgba(255,255,255,.06); color:#e8f1ff;
  border-color: rgba(255,255,255,.12);
}
.btn--ghost:hover{ background: rgba(255,255,255,.10); }

.btn--soft{
  background: rgba(16,120,255,.15); color:#cfe7ff;
  border-color: rgba(16,120,255,.35);
}
.btn--soft:hover{ background: rgba(16,120,255,.25); }

.hero-pro__cta{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 8px; }

.hero-pro__badges{
  display:flex; gap:14px; flex-wrap:wrap; margin: 16px 0 0; padding:0; list-style:none;
}
.hero-pro__badges li{
  display:flex; align-items:center; gap:8px;
  color:#c6d6e6; font-size:14px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:8px 12px; border-radius:999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.hero-pro__badges svg{ width:18px; height:18px; color:#79c3ff; }

/* Mini-tarjetas derecha */
.hero-pro__cards{
  display:grid; gap:16px;
}
.mini-card{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 18px 16px 16px;
  text-decoration: none;
  color: #e9f2ff;
  box-shadow: 0 10px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mini-card:hover{
  transform: translateY(-4px);
  border-color: rgba(61,182,255,.5);
  box-shadow: 0 16px 36px rgba(0,128,255,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.mini-card__icon{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(90,180,255,.35), rgba(30,110,255,.15));
  color:#aee2ff; margin-bottom:10px;
  box-shadow: 0 6px 16px rgba(0,110,255,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.mini-card svg{ width:22px; height:22px; }
.mini-card h3{ font-size:18px; margin:0 0 4px; }
.mini-card p{ font-size:14px; color:#c9d6e6; margin:0 0 10px; }
.mini-card__link{
  font-size:14px; color:#8ecaff; font-weight:700;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Responsive */
@media (max-width: 980px){
  .hero-pro__wrap{ grid-template-columns: 1fr; }
  .hero-pro__cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .hero-pro__cards{ grid-template-columns: 1fr; }
}
/* ===== HERO CON LOGO BRILLANTE ===== */
.hero-logo{
  position: relative;
  height: 100vh;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(60,150,255,0.25), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.1), transparent 70%),
    linear-gradient(180deg, #0e2a42 0%, #0b2035 100%);
}

/* capa brillante y ligera animación */
.hero-logo__overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(80% 70% at 50% 40%, rgba(0,180,255,.15), transparent 90%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  overflow:hidden;
}

.hero-logo__overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), transparent 60%);
  mix-blend-mode:screen;
  opacity:.4;
  animation: shineMove 12s ease-in-out infinite alternate;
}
@keyframes shineMove{
  from{ transform:translateY(-10%) scale(1);}
  to{ transform:translateY(8%) scale(1.05);}
}

.hero-logo__content{
  position:relative;
  z-index:2;
  text-align:center;
  color:#e9f2ff;
  padding:0 16px;
  max-width:800px;
}

.hero-logo__img{
  width: clamp(180px, 30vw, 300px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,180,255,.35));
  margin-bottom: clamp(18px, 4vh, 40px);
}

.hero-logo__title{
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 800;
  letter-spacing:.5px;
  margin:0 0 10px;
  text-shadow: 0 4px 22px rgba(0,160,255,.25);
}

.hero-logo__text{
  color:#c0d8f0;
  font-size: clamp(15px, 1.3vw, 18px);
  margin-bottom: 26px;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

.hero-logo__buttons{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

@media(max-width:768px){
  .hero-logo{ height:auto; padding:80px 0 100px; }
  .hero-logo__img{ width: 65%; max-width: 220px; }
}
/* === Ajuste de tamaño del logo en el hero === */
.hero-logo__img {
  width: clamp(240px, 36vw, 420px); /* antes: 180px–300px */
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,180,255,.4));
  margin-bottom: clamp(22px, 5vh, 50px);
  transition: transform .3s ease, filter .3s ease;
}

/* Un sutil efecto al pasar el mouse */
.hero-logo__img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 12px 28px rgba(0,180,255,.5));
}

/* En móvil, sigue siendo grande pero no ocupa toda la pantalla */
@media(max-width:768px){
  .hero-logo__img {
    width: 75%;
    max-width: 320px;
  }
}
/* === Glow premium animado detrás del logo === */
.hero-logo__content{
  position: relative;
  isolation: isolate; /* permite pseudo-elementos detrás sin afectar hijos */
}

/* Halo suave estático (radial) */
.hero-logo__content::before{
  content:"";
  position:absolute;
  left:50%; top: calc(50% - 80px);
  transform: translate(-50%, -50%);
  width: clamp(360px, 52vw, 820px);
  height: clamp(360px, 52vw, 820px);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(60,160,255,.35), rgba(60,160,255,.12) 45%, transparent 70%),
    radial-gradient(closest-side, rgba(255,255,255,.18), transparent 55%);
  filter: blur(18px);
  opacity: .45;
  z-index: 0;            /* queda detrás del logo y los textos */
  pointer-events: none;
}

/* Cinturón de luz giratorio ultra-sutil */
.hero-logo__content::after{
  content:"";
  position:absolute;
  left:50%; top: calc(50% - 80px);
  transform: translate(-50%, -50%);
  width: clamp(420px, 58vw, 920px);
  height: clamp(420px, 58vw, 920px);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0 55%,
      rgba(90,180,255,.20) 60%,
      rgba(180,220,255,.12) 68%,
      transparent 75% 100%);
  mix-blend-mode: screen;
  filter: blur(10px);
  opacity: .28;
  animation: logoHaloSpin 22s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes logoHaloSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Asegura que el logo quede por encima del glow */
.hero-logo__img{ position: relative; z-index: 1; }

/* Móvil: ajusta la posición del halo para no tapar botones */
@media (max-width: 768px){
  .hero-logo__content::before,
  .hero-logo__content::after{
    top: calc(50% - 60px);
    filter: blur(14px);
    opacity: .38;
  }
}

/* Respeta accesibilidad: sin animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .hero-logo__content::after{ animation: none; opacity: .22; }
}
/* === Glow premium animado (versión visible) === */
.hero-logo__content{
  position: relative;
  isolation: isolate;
}

/* Halo radial estático (base) */
.hero-logo__content::before{
  content:"";
  position:absolute;
  left:50%; top: calc(50% - 80px);
  transform: translate(-50%, -50%);
  width: clamp(420px, 60vw, 980px);
  height: clamp(420px, 60vw, 980px);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(60,160,255,.45), rgba(60,160,255,.18) 45%, transparent 70%),
    radial-gradient(closest-side, rgba(255,255,255,.22), transparent 58%);
  filter: blur(14px);
  opacity: .55;                 /* más visible */
  z-index: 0;
  pointer-events: none;
}

/* Corona de luz giratoria (animada) */
.hero-logo__content::after{
  content:"";
  position:absolute;
  left:50%; top: calc(50% - 80px);
  transform: translate(-50%, -50%);
  width: clamp(520px, 70vw, 1150px);   /* más grande para que se vea el giro */
  height: clamp(520px, 70vw, 1150px);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0 55%,
      rgba(90,180,255,.35) 60%,
      rgba(190,230,255,.18) 68%,
      transparent 75% 100%);
  mix-blend-mode: screen;
  filter: blur(10px);
  opacity: .40;                      /* subimos visibilidad */
  animation: logoHaloSpin 14s linear infinite;  /* un poco más rápido */
  will-change: transform;            /* mejora de rendimiento */
  z-index: 0;
  pointer-events: none;
}

@keyframes logoHaloSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* El logo por encima del glow */
.hero-logo__img{ position: relative; z-index: 1; }

/* Móvil: compensar y bajar intensidad para no invadir botones */
@media (max-width: 768px){
  .hero-logo__content::before,
  .hero-logo__content::after{
    top: calc(50% - 60px);
    opacity: .34;
  }
}

/* Respeto a accesibilidad: sin animaciones si el usuario lo solicita */
@media (prefers-reduced-motion: reduce){
  .hero-logo__content::after{ animation: none; opacity: .28; }
}