/* ——— Fuentes (las del contenido de producto) ——— */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Outfit:wght@300;400&display=swap');

/* ——— Paleta y base ——— */
:root{
  --deep:#0a1220; --text:#eef6ff; --muted:#cdd9e8;
  --aqua:#06b6d4; --gold:#d4af37;
  --glass:rgba(10,20,30,.42);
  /* Imagen del hero por defecto (puedes sobreescribirla por página) */
  --hero-image: url('/img/Productos3.webp');
  /* Altura aproximada del header fijo, para empujar el panel */
  --header-h: 96px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{
  height:100%;
  background:var(--deep);
  color:var(--text);
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ——— HERO: imagen arriba + blur desde el tope + degradé al fondo ——— */
.hero{
  position:relative;
  min-height:84vh;
  display:grid;
  align-items:center;
  z-index:0;
  background: var(--hero-image) center top / cover no-repeat;
}

/* Capa de BLUR que arranca en el tope (se ve debajo del header fijo) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(10,18,32,.04); /* leve tinte para que el blur “agarre” */
  z-index:0;
  pointer-events:none;
}

/* Capa de degradé hacia el fondo sólido */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:45vh;
  background:linear-gradient(
    to bottom,
    rgba(10,18,32,0) 0%,
    rgba(10,18,32,.55) 55%,
    #0a1220 100%
  );
  z-index:0;
  pointer-events:none;
}

/* Panel del hero por encima de las capas */
.hero-panel{
  width:min(1200px,92%);
  margin:0 auto;
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  grid-template-rows: 1fr 1fr; /* 2 filas a la derecha */
  gap:0;
  padding:18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(0,32,43,.28);
  backdrop-filter:blur(10px);
  box-shadow:0 20px 50px rgba(0,0,0,.25);

  /* Empuja el contenido del panel para no quedar debajo del header fijo,
     sin mover el fondo/blur del hero */
  margin-top: var(--header-h);
}

/* Columna izquierda ocupa ambas filas */
.hp-left{
  grid-column:1;
  grid-row:1 / span 2;
  padding:22px 24px;
  border-right:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; justify-content:center;
}

/* Tipografías del titular y lead */
.eyebrow{
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.75rem;
  color:rgba(255,255,255,.55);
}
h1{
  font-family:'Playfair Display',serif;
  margin:.25rem 0 1rem;
  font-size:clamp(32px,4.4vw,56px);
  line-height:1.05;
}
.lead{ color:#d7e7ff; opacity:.9; line-height:1.8 }

/* Derecha arriba (lata) */
.hp-can{
  grid-column:2; grid-row:1;
  padding:18px; display:grid; place-items:center;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.hp-can img{
  max-width:68%; height:auto;
  filter:drop-shadow(0 22px 36px rgba(0,0,0,.35));
}

/* Derecha abajo (pescado) */
.hp-fish{
  grid-column:2; grid-row:2;
  padding:18px; display:grid; align-content:center; gap:8px;
}
.hp-fish img{
  max-width:80%; height:auto; justify-self:center;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.35))
}
.hp-fish small{ color:#cfe0f4 }

/* ——— MAIN sólido ——— */
.main{ position:relative; z-index:0; background:#0a1220; }

/* Secciones comunes */
.section{
  width:min(1200px,92%);
  margin:0 auto;
  padding:48px 0 26px;
}
.section h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(26px,3.2vw,38px);
  margin:0 0 10px;
  background:linear-gradient(120deg,var(--aqua),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section .muted{ color:#d7e7ff; opacity:.85 }

/* Pasos */
.steps{
  display:grid;
  grid-template-columns: repeat(6,1fr);
  gap:14px;
  margin-top:14px;
}
.step{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:14px;
  border-radius:12px;
  text-align:center;
}
.step b{ display:block; margin-top:.35rem; font-weight:600 }
.step p{ margin:.35rem 0 0; font-size:.9rem; color:#cfe0f4; opacity:.9 }

/* Tarjetas resumen */
.cards{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:14px;
  margin-top:18px;
}
.card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:16px;
  border-radius:12px
}
.card h3{ margin:.25rem 0 .5rem; font-weight:700; letter-spacing:.5px }
.card p, .card ul{
  color:#d7e7ff; opacity:.9; font-size:.98rem; line-height:1.7; margin:.25rem 0 0
}
.card ul{ padding-left:1.1rem }
.tagrow{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem }
.tag{
  font-size:.68rem; letter-spacing:.1em;
  border:1px solid rgba(255,255,255,.25);
  padding:.25rem .5rem; text-transform:uppercase;
  color:#cfe0f4; border-radius:999px
}

/* Tabla de especificaciones */
.specs{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  border-radius:12px;
  overflow:hidden;
}
table{ width:100%; border-collapse:collapse; font-size:.98rem }
th,td{ padding:14px; border-bottom:1px solid rgba(255,255,255,.10) }
th{ text-align:left; font-weight:600; color:#cfe0f4; opacity:.9 }
tbody tr:hover{ background:rgba(255,255,255,.04) }

/* CTA */
.btn{
  display:inline-block;
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  color:#eaf2f9;
  letter-spacing:.12em; text-transform:uppercase; font-size:.75rem;
  padding:.7rem 1.05rem; cursor:pointer; border-radius:999px;
}
.btn:hover{ background:rgba(255,255,255,.10) }
.cta-final{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px }

/* Footer */
.footer{ text-align:center; padding:28px 14px; color:#cfe0f4; opacity:.7 }

/* ——— Iconografía (pasos) ——— */
.h2{
  font-family:'Playfair Display',serif; font-weight:700;
  font-size:clamp(1.8rem,3.5vw,2.6rem); line-height:1.1; margin:0 0 .6rem;
  background:linear-gradient(120deg,#06b6d4,#d4af37);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.icon-wrap{
  width:58px; height:58px; margin:6px auto 8px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(120% 120% at 30% 25%, rgba(6,182,212,.18), rgba(212,175,55,.08));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.25);
}
.icon{
  width:26px; height:26px; stroke:#75d7e7; fill:none; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(6,182,212,.25));
}

/* ——— Responsive ——— */
@media (max-width:1100px){
  .hero-panel{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
  }
  .hp-left{ border-right:none; border-bottom:1px solid rgba(255,255,255,.12) }
  .hp-can{ border-bottom:1px solid rgba(255,255,255,.12) }
  .hp-can img{ max-width:56% }
  .hp-fish img{ max-width:72% }
  .steps{ grid-template-columns:repeat(3, minmax(180px,1fr)); }
}
@media (max-width:720px){
  .steps{ grid-template-columns:repeat(2, minmax(160px,1fr)); }
}
@media (max-width:480px){
  .steps{ grid-template-columns:1fr; }
}