/* =====================================================
   MICROSITIOS 2026
   Modern Enterprise / SaaS / Brand-safe overlay
   ===================================================== */

:root{
  --page-max: 1180px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;

  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 24px;

  --shadow-soft: 0 10px 25px rgba(0,0,0,.08);
  --shadow-float: 0 28px 60px rgba(0,0,0,.14);

  --glass: rgba(255,255,255,.82);
  --glass-dark: rgba(0,0,0,.35);
}

/* ===== Global polish ===== */
html { scroll-behavior: smooth; }

body{
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

/* ===== Container gets more “enterprise width” ===== */
.margenes{
  max-width: var(--page-max);
}

/* =====================================================
   HEADER 2026 (Glass + sticky)
   ===================================================== */
header{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}

header::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.45),
    rgba(0,0,0,.15)
  );
  pointer-events:none;
}

header .margenes{
  position: relative;
  z-index: 1;
}

/* Menu feels lighter */
.menu2 li a{
  letter-spacing:.3px;
}

/* =====================================================
   HERO PRODUCT SECTION (core upgrade)
   ===================================================== */

#producto{
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}

/* Real grid – Bootstrap floats disabled when possible */
@media (min-width: 992px){
  #producto .row{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: var(--space-5);
  }

  #producto .col-md-7,
  #producto .col-md-5{
    float:none;
    width:auto;
  }
}

/* ===== Image area as Product Card ===== */
#slideshow1{
  border-radius: var(--radius-l);
  background: linear-gradient(180deg,#fff,#f4f6f8);
  box-shadow: var(--shadow-float);
  overflow:hidden;
  position:relative;
}

#slideshow1::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:60px;
  background: linear-gradient(to top,rgba(0,0,0,.15),transparent);
}

/* ===== Product title hierarchy ===== */
#producto h1{
  margin:0;
}

#producto h1 .titulo{
  font-size:12px;
  opacity:.7;
  letter-spacing:.4px;
  text-transform:uppercase;
}

#producto h1 .subtitulo{
  font-size:clamp(24px,3vw,38px);
  font-weight:600;
  margin-top: var(--space-2);
  line-height:1.15;
}

/* Short description – readable, executive */
#producto h2{
  font-size:16px;
  opacity:.9;
  max-width:52ch;
  margin: var(--space-3) 0;
}

/* =====================================================
   IMAGE THUMBNAILS → MICRO-CARDS
   ===================================================== */

.slideshow1_thumbs{
  display:flex;
  gap: var(--space-2);
}

.slideshow1_thumbs li{
  width:auto !important;
}

.imagen-thumb{
  width:72px;
  height:72px;
  border-radius: var(--radius-s);
  background:#fff;
  box-shadow: var(--shadow-soft);
  transition: all .25s ease;
}

.imagen-thumb:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-float);
}

/* =====================================================
   PRICE / CTA ZONE (conversion-driven)
   ===================================================== */

.producto1{
  margin-top: var(--space-4);
}

.producto1 h2{
  font-size:15px;
}

.producto1 h2 a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:999px;
  border:2px solid currentColor;
  background: transparent;
  letter-spacing:.3px;
  box-shadow: var(--shadow-soft);
  transition: all .25s ease;
}

.producto1 h2 a::after{
  content:"→";
  font-size:18px;
  transform: translateX(0);
  transition: transform .25s ease;
}

.producto1 h2 a:hover{
  background: currentColor;
  color:#fff !important;
}

.producto1 h2 a:hover::after{
  transform: translateX(4px);
}

/* =====================================================
   LONG CONTENT = READING COMFORT
   ===================================================== */

#descripcion p,
#dinamico p{
  max-width: 68ch;
  margin-left:auto;
  margin-right:auto;
}

/* =====================================================
   BANNER PRODUCT → FEATURE STRIP
   ===================================================== */

.banner-producto{
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-float);
  padding: clamp(32px,4vw,64px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* =====================================================
   CONTACT FORM = GLASS CARD
   ===================================================== */

#proyecto{
  position:relative;
  isolation:isolate;
}

#form_contacto{
  background: var(--glass);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(20px);
}

/* Inputs modern feel */
#proyecto input,
#proyecto textarea,
#proyecto select{
  border-radius:14px;
  padding-left:14px;
}

/* CTA button in form */
#proyecto input[type="button"]{
  border-radius:999px;
  padding:14px 24px;
  width:auto;
  font-weight:500;
}

/* =====================================================
   RELATED PRODUCTS = SaaS CARDS
   ===================================================== */

#relacionados .producto{
  border-radius: var(--radius-m);
  background:#fff;
  box-shadow: var(--shadow-soft);
  transition: all .3s ease;
}

#relacionados .producto:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-float);
}

/* Responsive grid cleanup */
@media(max-width:767px){
  .col-xs-3{ width:50% !important; }
}
@media(max-width:420px){
  .col-xs-3{ width:100% !important; }
}

/* =====================================================
   FOOTER CLEANUP
   ===================================================== */

#footer .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
``