/* ============================================================
   InstruProductos — landing
   Paleta tomada del logo y de la pieza original de precios.
   ============================================================ */

:root{
  /* Marca */
  --blue:        #0068a6;
  --green:       #7bab0a;
  --green-hi:    #8dc41a;
  --cyan:        #c6faf8;
  --cyan-mid:    #a4efec;
  --cyan-deep:   #7fdfdb;

  /* Fondos oscuros */
  --abyss:       #04242e;
  --navy:        #083341;
  --navy-hi:     #0d4657;
  --ink:         #02414d;

  /* Superficies claras */
  --paper:       #ffffff;
  --tile:        #d8d8d8;

  /* Texto */
  --on-dark:     #ffffff;
  --on-dark-mut: #b7d5dc;
  --on-cyan:     #063a45;
  --on-cyan-mut: #0f4a56;
  --on-paper:    #0d2b33;
  --on-paper-mut:#4a6b74;

  /* Sistema */
  --wa:          #3fc161;
  --wa-hi:       #34ac53;
  --danger:      #c0392b;

  --shell:       1080px;
  --radius:      10px;
  --radius-lg:   14px;

  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);

  --shadow-sm:   0 2px 6px rgba(2,32,42,.10);
  --shadow-md:   0 10px 26px -10px rgba(2,32,42,.35);
  --shadow-lg:   0 28px 60px -24px rgba(0,0,0,.55);

  --font-body:   'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:'Montserrat', 'Source Sans 3', system-ui, sans-serif;
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.72;
  color:var(--on-dark);
  background:var(--navy);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; height:auto; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.18; letter-spacing:-.015em; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; }
strong{ font-weight:700; }
button,input,textarea{ font:inherit; color:inherit; }

/* Superficies del navegador */
::selection{ background:var(--cyan-deep); color:var(--ink); }
:focus-visible{ outline:2px solid var(--cyan-deep); outline-offset:3px; border-radius:4px; }
html{ scrollbar-color:var(--navy-hi) var(--abyss); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--abyss); }
::-webkit-scrollbar-thumb{ background:var(--navy-hi); border-radius:99px; border:3px solid var(--abyss); }
::-webkit-scrollbar-thumb:hover{ background:#17677d; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; top:10px; left:50%; z-index:200;
  transform:translate(-50%,-160%);
  background:var(--ink); color:#fff; text-decoration:none;
  padding:.7rem 1.2rem; border-radius:99px; font-weight:600; font-size:.9rem;
  transition:transform .25s var(--ease-out);
}
.skip-link:focus-visible{ transform:translate(-50%,0); }

.shell{ width:min(100% - 2.5rem, var(--shell)); margin-inline:auto; }
.shell--tight{ width:min(100% - 2.5rem, 820px); }

/* ── Reveal ───────────────────────────────────────────────── */
.reveal{ opacity:1; }
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  filter:blur(6px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out);
  will-change:opacity, transform;
}
.js .reveal.is-in{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ── Masthead ─────────────────────────────────────────────── */
.masthead{
  position:relative; z-index:20;
  background:var(--paper);
  display:flex; justify-content:center; align-items:center;
  padding:1.55rem 1.25rem;
}
.masthead__brand{ display:block; line-height:0; border-radius:6px; }
.masthead__brand img{ width:188px; height:auto; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero{
  position:relative;
  background:var(--abyss);
  padding-block:6rem 7rem;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 42px), 0 100%);
}
.hero__media{
  position:absolute; inset:0;
  overflow:hidden;
  background:#0a2b3a;
}
.hero__poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 38%;
  filter:saturate(1.42) contrast(1.05);
}
.hero__frame{
  position:absolute; top:50%; left:50%;
  width:max(100%, calc(var(--hero-h, 480px) * 16 / 9));
  height:max(100%, calc(var(--hero-w, 1440px) * 9 / 16));
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity 1.4s var(--ease-out);
  pointer-events:none;
}
.hero__frame.is-playing{ opacity:1; }
.hero__frame iframe{ width:100%; height:100%; border:0; display:block; }

.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(2,26,36,.34) 0%, rgba(3,32,42,.50) 44%, rgba(4,34,44,.92) 100%),
    radial-gradient(125% 92% at 50% 38%, rgba(2,74,90,.06), rgba(2,26,34,.52) 100%);
}

.hero__body{ position:relative; text-align:center; }
.hero__title{
  font-size:clamp(1.75rem, 1.05rem + 2.2vw, 2.6rem);
  font-weight:800;
  margin-bottom:1.5rem;
  text-shadow:0 2px 18px rgba(0,20,28,.5);
}
.hero__body p{
  max-width:78ch;
  margin-inline:auto;
  font-size:1rem;
  color:#e3eef1;
  text-shadow:0 1px 10px rgba(0,20,28,.55);
}
.hero__body p + p{ margin-top:1.6rem; }
.hero__body strong{ color:#fff; }

/* ── Intro ────────────────────────────────────────────────── */
.intro{
  background:var(--navy);
  padding-block:4.5rem 2.75rem;
  text-align:center;
}
.intro__title{
  font-size:clamp(1.35rem, .95rem + 1.3vw, 1.8rem);
  font-weight:700;
  margin-bottom:1.1rem;
}
.intro__lead{
  max-width:64ch; margin-inline:auto;
  font-size:.94rem; color:var(--on-dark-mut);
}

/* ── Precios ──────────────────────────────────────────────── */
.prices{ background:var(--navy); padding-block:2.5rem 3.75rem; }

.pricecard{
  background:var(--paper);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  color:var(--on-paper);
}
.pricecard__head{
  background:var(--ink);
  color:#fff;
  font-size:clamp(1.15rem, .8rem + 1.15vw, 1.65rem);
  font-weight:800;
  text-align:center;
  letter-spacing:-.02em;
  padding:1.5rem 1.5rem;
  margin:0;
}
.pricecard__viewport{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pricecard__viewport:focus-visible{ outline-offset:-3px; }

.ptable{
  width:100%;
  border-collapse:collapse;
  font-size:.875rem;
  font-variant-numeric:tabular-nums;
}
.ptable thead th{
  background:var(--cyan);
  color:var(--on-cyan);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.925rem;
  letter-spacing:-.005em;
  padding:1.15rem 1rem;
  text-align:center;
  position:sticky; top:0;
}
.ptable thead th + th{ box-shadow:inset 1px 0 0 rgba(6,58,69,.22); }
.ptable thead th.ptable__desc{ text-align:center; }

.ptable tbody th,
.ptable tbody td{
  padding:.62rem 1rem;
  border-bottom:1px dashed #d5dfe2;
  vertical-align:middle;
}
.ptable tbody tr:last-child th,
.ptable tbody tr:last-child td{ border-bottom:0; }
.ptable tbody th{
  font-weight:400; text-align:left; color:var(--on-paper);
  padding-left:1.5rem;
}
.ptable tbody td{
  text-align:center; font-weight:700; white-space:nowrap;
  font-family:var(--font-display); font-size:.95rem;
}
.ptable tbody tr:hover th,
.ptable tbody tr:hover td{ background:#f0fbfa; }
.ptable__note{
  color:var(--blue);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ptable__desc{ min-width:20rem; }

.pricecard__foot{
  display:flex; align-items:stretch; gap:1.25rem;
  padding:.9rem 1.25rem 1rem;
  border-top:4px solid var(--green);
  background:
    linear-gradient(180deg, transparent calc(100% - 14px), var(--green) calc(100% - 14px));
}
.pricecard__cta{
  flex:1 1 auto;
  display:flex; align-items:center;
  background:var(--green);
  color:#fff; text-decoration:none;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(.9rem, .62rem + .85vw, 1.32rem);
  letter-spacing:-.01em; text-transform:uppercase;
  padding:.7rem 1.35rem;
  border-radius:4px;
  transition:background .22s var(--ease), transform .22s var(--ease);
}
.pricecard__cta:hover{ background:var(--green-hi); transform:translateY(-1px); }
.pricecard__cta:active{ transform:translateY(0); }
.pricecard__logo{
  align-self:center;
  width:clamp(104px, 12vw, 150px);
  flex:0 0 auto;
}

/* ── Categorías ───────────────────────────────────────────── */
.cats{
  background:var(--navy);
  padding-block:1.5rem 4.5rem;
}
.cats__row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
  align-items:stretch;
}
.cats__row + .cats__row,
.cats__row + .cats__panel{ margin-top:1rem; }

.tile{
  margin:0;
  background:var(--tile);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:.5rem;
}
.tile img{
  width:100%; height:100%;
  object-fit:contain;
}
.tile--tall{ min-height:340px; }
.tile--wide img{ max-height:230px; }

.card{
  background:var(--cyan);
  color:var(--on-cyan);
  border-radius:var(--radius);
  padding:2rem 1.6rem;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 40px -22px rgba(0,0,0,.65);
}
.card__mark{ display:block; width:22px; height:22px; color:var(--on-cyan); }
.card__mark svg{ width:100%; height:100%; display:block; }
.card__title{
  font-size:1rem; font-weight:700; letter-spacing:-.005em;
  max-width:22ch;
}
.card__text{
  font-size:.845rem; line-height:1.68;
  color:var(--on-cyan-mut);
  max-width:34ch;
}
.card__text strong{ color:var(--on-cyan); }

.cats__panel{
  background:var(--cyan);
  border-radius:var(--radius);
  padding:1.75rem;
  display:grid; gap:1.5rem;
}

/* ── Cotización ───────────────────────────────────────────── */
.quote{
  position:relative;
  padding-block:5rem;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(19,105,127,.55), transparent 68%),
    linear-gradient(180deg, var(--navy) 0%, #0b4254 45%, #0a3243 100%);
}
.quotecard{
  width:min(100%, 960px);
  margin-inline:auto;
  background:var(--paper);
  color:var(--on-paper);
  border-radius:var(--radius);
  padding:clamp(1.6rem, .9rem + 2.6vw, 2.9rem) clamp(1.25rem, .4rem + 3.4vw, 3.5rem);
  box-shadow:var(--shadow-lg);
}
.quotecard__title{
  font-size:clamp(1.02rem, .86rem + .5vw, 1.2rem);
  font-weight:700;
  text-align:center;
  color:var(--on-paper);
  margin-bottom:1.9rem;
  max-width:46ch; margin-inline:auto;
}

/* Botones */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bg-hi:#04525f;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%;
  padding:.92rem 1.25rem;
  border:0; border-radius:6px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--font-display); font-weight:600; font-size:.9rem;
  letter-spacing:-.005em; text-decoration:none; text-align:center;
  cursor:pointer;
  transition:background .22s var(--ease), transform .18s var(--ease), box-shadow .22s var(--ease);
}
.btn:hover{ background:var(--btn-bg-hi); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn__icon{ width:18px; height:18px; flex:0 0 auto; }
.btn__icon--end{ order:2; }

.btn--ink{ --btn-bg:#0e1f26; --btn-bg-hi:#183440; }
.btn--cyan{ --btn-bg:var(--cyan); --btn-fg:var(--on-cyan); --btn-bg-hi:var(--cyan-mid); }
.btn--cyan-soft{
  --btn-bg:#eafcfb; --btn-fg:var(--on-cyan); --btn-bg-hi:var(--cyan);
  box-shadow:inset 0 0 0 1px var(--cyan-mid);
}
.btn--wa{ --btn-bg:var(--wa); --btn-fg:#fff; --btn-bg-hi:var(--wa-hi); }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:#fff; --btn-bg-hi:rgba(255,255,255,.12);
  width:auto; display:inline-flex;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  padding:.8rem 1.5rem;
}

/* Campos */
.qform{ margin-top:1.5rem; display:grid; gap:.35rem; }
.field{ position:relative; padding-top:1.05rem; }
.field__input{
  width:100%;
  border:0; border-bottom:1px solid #d3dee1;
  background:transparent;
  padding:.45rem 0 .55rem;
  font-size:.9rem;
  color:var(--on-paper);
  border-radius:0;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.field__input:focus{
  outline:none;
  border-bottom-color:var(--blue);
  box-shadow:0 1px 0 0 var(--blue);
}
.field--area .field__input{ resize:vertical; min-height:4.6rem; line-height:1.6; }

.field__label{
  position:absolute; left:0; top:1.5rem;
  font-size:.9rem; color:#5b7880;
  pointer-events:none;
  transform-origin:0 0;
  transition:transform .2s var(--ease-out), color .2s var(--ease);
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label{
  transform:translateY(-1.5rem) scale(.78);
  color:var(--blue);
  font-weight:600;
}
.field--area .field__label{ top:1.5rem; }

.field__error{
  margin-top:.3rem;
  font-size:.76rem; font-weight:500;
  color:var(--danger);
}
.field.is-bad .field__input{ border-bottom-color:var(--danger); box-shadow:0 1px 0 0 var(--danger); }
.field.is-bad .field__label{ color:var(--danger); }

.qform__actions{ display:grid; gap:.6rem; margin-top:1.6rem; }
.qform__status{
  margin-top:.9rem; text-align:center;
  font-size:.82rem; font-weight:500; color:var(--on-paper-mut);
  min-height:1.2rem;
}
.qform__status.is-ok{ color:#1c7a45; }
.qform__status.is-bad{ color:var(--danger); }

/* ── Cierre ───────────────────────────────────────────────── */
.closing{
  position:relative;
  background:linear-gradient(100deg, #0a2c39 0%, #0c3b4b 52%, #0a3040 100%);
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  overflow:hidden;
  min-height:400px;
}
.closing__photo{
  position:absolute; inset:0 auto 0 0;
  width:56%;
  background:url('../img/cierre.jpg') center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 100%);
}
.closing__body{
  grid-column:2;
  position:relative; z-index:1;
  padding:4.5rem clamp(1.25rem,4vw,3rem) 4.5rem 1rem;
  max-width:34rem;
}
.closing__title{
  font-size:clamp(1.4rem, 1rem + 1.35vw, 1.95rem);
  font-weight:700;
  margin-bottom:1rem;
}
.closing__text{
  font-size:.9rem;
  color:var(--on-dark-mut);
  margin-bottom:1.8rem;
  max-width:46ch;
}
.closing__text strong{ color:#fff; }

/* ── Footer ───────────────────────────────────────────────── */
.siteend{
  background:var(--cyan);
  color:var(--on-cyan-mut);
  text-align:center;
  padding:2.5rem 1.25rem 2.75rem;
}
.siteend__logo{ width:150px; margin:0 auto 1rem; }
.siteend__line{ font-size:.76rem; letter-spacing:.01em; }

/* ── WhatsApp flotante ────────────────────────────────────── */
.wafloat{
  position:fixed; right:clamp(.9rem,2.5vw,1.6rem); bottom:clamp(.9rem,2.5vw,1.6rem);
  z-index:120;
  width:58px; height:58px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--wa); color:#fff;
  text-decoration:none;
  box-shadow:0 12px 28px -8px rgba(6,80,40,.6);
  transition:background .22s var(--ease), transform .25s var(--ease-out), box-shadow .25s var(--ease);
}
.wafloat svg{ width:29px; height:29px; }
.wafloat__label{
  position:absolute; right:calc(100% + .65rem); top:50%;
  transform:translateY(-50%) translateX(.5rem);
  opacity:0; pointer-events:none;
  background:#0e1f26; color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:.8rem;
  padding:.5rem .8rem; border-radius:7px; white-space:nowrap;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
  transition:opacity .24s var(--ease), transform .32s var(--ease-out);
}
.wafloat:hover{ background:var(--wa-hi); transform:translateY(-2px) scale(1.04); box-shadow:0 16px 34px -8px rgba(6,80,40,.7); }
.wafloat:hover .wafloat__label,
.wafloat:focus-visible .wafloat__label{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px){
  .cats__row--a{ grid-template-columns:1fr 1fr; }
  .cats__row--a .card{ grid-column:1 / -1; order:-1; }
  .cats__row--b{ grid-template-columns:1fr 1fr; }
  .cats__row--b .card:last-child{ grid-column:1 / -1; }
  .tile--tall{ min-height:300px; }

  .closing{ grid-template-columns:1fr; min-height:0; }
  .closing__photo{ position:relative; inset:auto; width:100%; height:240px;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%); }
  .closing__body{ grid-column:1; padding:2.5rem clamp(1.25rem,5vw,2.5rem) 4rem; max-width:none; }
}

@media (max-width: 700px){
  body{ font-size:15px; }
  .hero{ padding-block:3.5rem 4.5rem; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%); }
  .masthead{ padding:1.1rem; }
  .masthead__brand img{ width:158px; }

  .cats__row--a,
  .cats__row--b{ grid-template-columns:1fr; }
  .cats__row--a .card,
  .cats__row--b .card:last-child{ grid-column:auto; }
  .cats__row--a .card{ order:0; }
  .tile--tall{ min-height:0; }
  .tile--tall img{ max-height:420px; }

  /* Tabla → tarjetas */
  .pricecard__viewport{ overflow-x:visible; }
  .ptable, .ptable tbody, .ptable tr, .ptable tbody th, .ptable tbody td{ display:block; width:100%; }
  .ptable thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .ptable tbody tr{
    border-bottom:1px dashed #d5dfe2;
    padding:.9rem 1.15rem 1rem;
  }
  .ptable tbody tr:hover th,
  .ptable tbody tr:hover td{ background:transparent; }
  .ptable tbody th{
    padding:0 0 .55rem; border:0; font-weight:500; min-width:0;
    font-size:.9rem; line-height:1.5;
  }
  .ptable__note{ display:block; margin-top:.15rem; }
  .ptable tbody td{
    width:auto; padding:0; border:0; text-align:left;
    display:inline-flex; align-items:baseline; gap:.4rem;
    font-size:.95rem;
  }
  .ptable tbody td + td{ margin-left:1.5rem; }
  .ptable tbody td::before{
    content:attr(data-label);
    font-family:var(--font-body);
    font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--on-paper-mut);
  }
  .ptable tbody tr:last-child{ border-bottom:0; }

  .pricecard__foot{ flex-direction:column; align-items:stretch; gap:.9rem; padding-bottom:1.35rem; }
  .pricecard__cta{ justify-content:center; text-align:center; }
  .pricecard__logo{ width:130px; }

  .cats__panel{ padding:1rem; gap:1rem; }
  .btn{ font-size:.83rem; padding:.9rem 1rem; gap:.5rem; }
  .btn__icon{ width:16px; height:16px; }
  .wafloat{ width:54px; height:54px; }
  .wafloat svg{ width:27px; height:27px; }
  .wafloat__label{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media print{
  .wafloat, .hero__media, .hero__veil{ display:none; }
  body{ background:#fff; color:#000; }
}