:root{
      --text:#ffffff;
      --text-dim:rgba(255,255,255,.85);
      --btn:#9ec8ff;
      --btn-text:#0b1b31;
      --btn-hover:#b6d6ff;
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      background:#0f172a;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }

    /* ===== Header ===== */
    header{
      position:fixed; inset-inline:0; top:0; z-index:10;
      padding:22px clamp(18px, 4vw, 48px);
      display:flex; align-items:center; justify-content:space-between;
      background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0));
    }
    .brand{font-family:"Playfair Display", serif; font-weight:700; letter-spacing:.5px; font-size:28px; text-shadow:0 2px 10px rgba(0,0,0,.5)}
    nav ul{list-style:none; margin:0; padding:0; display:flex; gap:36px}
    nav a{color:var(--text); text-decoration:none; font-weight:500; letter-spacing:.2px}
    nav a:hover, nav a:focus{opacity:.85; text-decoration:underline}

    /* ===== Hero ===== */
    .hero{
      position:relative; min-height:100vh; width:100%; display:grid; place-items:center; text-align:center;
      overflow:hidden;
      background: 
        linear-gradient(rgba(4, 9, 20, .62), rgba(4, 9, 20, .62)),
        url('/Img/ChatGPT\ Image\ 17\ ago\ 2025\,\ 22_45_09.png') center/cover no-repeat fixed;
    }
    .hero__content{padding:140px 18px 96px; max-width:min(980px, 92vw)}
    .title{
      font-family:"Playfair Display", serif; font-weight:800; font-size:clamp(50px, 7vw, 96px); line-height:1.02; margin:0 0 10px;
      text-shadow:0 10px 35px rgba(0,0,0,.6);
    }
    .subtitle{font-size:clamp(18px, 2.1vw, 24px); color:var(--text-dim); line-height:1.6; margin:0 auto 36px; text-wrap:balance}

    .cta{
      display:inline-block; border:0; border-radius:999px; padding:18px 36px; font-size:20px; font-weight:700;
      background:var(--btn); color:var(--btn-text); cursor:pointer; box-shadow:var(--shadow);
      transition:transform .16s ease, background .2s ease, box-shadow .2s ease;
    }
    .cta:hover{transform:translateY(-1px); background:var(--btn-hover); box-shadow:0 16px 40px rgba(0,0,0,.38)}
    .cta:active{transform:translateY(0)}

    /* Reset de secciones genéricas removido para no interferir con Descargas */

    /* ===== Responsive ===== */
    @media (max-width: 840px){
      header{gap:10px}
      nav ul{gap:20px}
    }
      /* ===== Descargas ===== */
    .downloads{padding:0; background:#e9ebf2; color:#0b1b31; scroll-margin-top:96px} 
    .downloads .grid{display:grid; grid-template-columns:1.05fr 1fr; min-height:88vh}
    .downloads .left{padding:clamp(40px,6vw,72px); display:flex; flex-direction:column; gap:18px}
    .downloads h2{font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(36px,4.8vw,56px); margin:0}
    .downloads p.lead{color:#3a4a64; margin:.4rem 0 1.2rem; max-width:60ch}

    .accordion{display:flex; flex-direction:column; gap:16px; margin-top:8px}
    .downloads details{border-top:1px solid #0b1b31; padding-top:16px}
    .downloads details:last-child{border-bottom:1px solid #0b1b31; padding-bottom:16px}
    .downloads summary{list-style:none; cursor:pointer; font-weight:600; letter-spacing:.2px; display:flex; align-items:center; justify-content:space-between}
    .downloads summary::-webkit-details-marker{display:none}
    .downloads summary .indicator::after{content:'+'; font-size:22px; line-height:1}
    .downloads details[open] summary .indicator::after{content:'−'}

    .linklist{display:grid; gap:10px; margin:12px 0 0 22px}
    .dlink{color:#0b1b31; text-decoration:none; font-weight:700; width:fit-content; border-bottom:1px dotted #0b1b31}
    .dlink:hover{opacity:.85}

    .cta-light{display:inline-block; background:#0b1b31; color:#fff; border:0; border-radius:999px; padding:16px 34px; font-weight:700; box-shadow:var(--shadow); width:fit-content; margin-top:28px}

    .downloads .right{min-height:520px; background:url('Img/si.jpg') center/cover no-repeat}

    .downloads summary span:first-child{font-family:"Playfair Display",serif; font-size:clamp(20px,2.2vw,26px);}
@media (max-width: 980px){
      .downloads .grid{grid-template-columns:1fr}
      .downloads .right{min-height:42vh}
    }
      /* ===== Manuales ===== */
    .manuals{background:#f1f3f8; color:#0b1b31; padding:clamp(40px,6vw,72px) clamp(18px,4vw,48px)}
    .manuals h2{font-family:"Playfair Display",serif; font-size:clamp(36px,4.2vw,56px); margin:0 0 18px}
    .manuals .inner{max-width:1100px; margin:0 auto}
    .manuals-list{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
    .manual-item{display:flex; align-items:center; gap:12px; text-decoration:none; padding:14px 16px; border:1px solid #cdd5e1; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.06); transition:transform .15s ease, box-shadow .2s ease}
    .manual-item:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08)}
    .manual-item img{width:56px; height:56px; object-fit:cover; border-radius:10px; flex:0 0 auto}
    .manual-item span{font-weight:700; color:#0b1b31}
    @media (max-width:1000px){.manuals-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media (max-width:560px){.manuals-list{grid-template-columns:1fr}.manual-item img{width:48px;height:48px}}
      /* ===== Contacto ===== */
    .contact{padding:0; background:#e9ebf2; color:#0b1b31; scroll-margin-top:96px}
    .contact .grid{display:grid; grid-template-columns:1.05fr 1fr; min-height:88vh}
    .contact .left{padding:clamp(40px,6vw,72px)}
    .contact h2{font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(36px,4.8vw,56px); margin:0 0 16px}
    .contact p.lead{color:#3a4a64; margin:0 0 18px; max-width:62ch}
    .contact .coords{margin:12px 0 28px; line-height:1.6}
    .contact .coords a{color:#0b1b31; text-decoration:underline dotted}
    .form{max-width:760px}
    .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
    .label{font-size:12px; opacity:.85; margin:14px 0 6px}
    .input, .textarea{width:100%; padding:12px 18px; border:1px solid #0b1b31; border-radius:28px; background:#fff; color:#0b1b31; outline:none}
    .textarea{min-height:120px; border-radius:16px; resize:vertical}
    .button{display:inline-block; margin-top:16px; background:#0b1b31; color:#fff; border:0; border-radius:999px; padding:12px 22px; font-weight:700; box-shadow:var(--shadow); cursor:pointer}
   /* Reemplazo en CONTACTO */
.contact .right{
  height: 100%;
  background: #e9ebf2 url('Img/logo-sinfondo-1920.png') center/cover no-repeat; /* usa cover para llenar toda la columna */
}
@media (max-width:980px){
  .contact .right{ min-height:42vh; }
}

    @media (max-width:980px){.contact .grid{grid-template-columns:1fr}.contact .right{min-height:42vh}.field-row{grid-template-columns:1fr}}


/* ===== Características ===== */
.features{
  padding:clamp(40px,6vw,72px) clamp(18px,4vw,48px);
  background:#f1f3f8; color:#0b1b31; scroll-margin-top:96px;
}
.features .grid{display:grid; grid-template-columns:1.4fr .9fr; gap:28px; align-items:start}
.features h2{
  font-family:"Playfair Display",serif; font-size:clamp(36px,4.2vw,56px); margin:0 0 8px
}
.features p.lead{color:#3a4a64; margin:0 0 18px}

/* Iconos en fila */
.icons{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px}
.fitem{
  flex:1 1 240px; display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid #cdd5e1; border-radius:12px;
  padding:14px 16px; box-shadow:0 6px 18px rgba(0,0,0,.06)
}
.fitem .icowrap{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:#9ec8ff33; color:#0b1b31; flex:0 0 auto
}
.fitem svg{width:22px; height:22px; fill:currentColor}
.fitem span{font-weight:700}

/* Tarjeta de precio + CTAs */
.price-card{
  background:#fff; border:1px solid #cdd5e1; border-radius:16px; padding:22px;
  box-shadow:0 10px 26px rgba(0,0,0,.07); position:sticky; top:92px
}
.price-title{font-size:14px; opacity:.75; margin-bottom:4px}
.price-value{font-family:"Playfair Display",serif; font-size:clamp(30px,4vw,48px); margin:0 0 8px}
.price-note{font-size:13px; color:#3a4a64; margin:6px 0 14px}
.btn{display:block; text-align:center; text-decoration:none; font-weight:700;
     padding:12px 18px; border-radius:999px; margin-top:10px; box-shadow:0 10px 30px rgba(0,0,0,.12)}
.btn--ml{background:var(--btn); color:var(--btn-text)}
.btn--ml:hover{filter:brightness(1.06)}
.btn--wa{background:#25D366; color:#0b1b31}
.btn--wa:hover{filter:brightness(1.05)}

@media (max-width:1000px){
  .features .grid{grid-template-columns:1fr}
}
