/* Ficha técnica: pensada para el papel, y que en pantalla se vea igual.
   Hoja A4, tipografías del sitio y nada de adornos que gasten tinta. */

:root{
  --ink:#14103A; --graphite:#413D66; --steel:#66637F; --line:#DEDCEC;
  --paper:#FFFFFF; --paper-2:#F4F3FA; --brand:#261DB6; --cyan:#6EF4FF;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Public Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper-2);color:var(--ink);
  font-family:var(--body);font-size:13px;line-height:1.55;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}

.hoja{max-width:210mm;margin:0 auto;background:var(--paper);padding:16mm 15mm 12mm;
  box-shadow:0 2px 24px rgba(20,16,58,.1)}

/* ── encabezado ── */
.fh{display:flex;justify-content:space-between;align-items:flex-start;
  padding-bottom:9px;border-bottom:2px solid var(--ink)}
.fh-logo{height:34px;width:auto}
.fh-k{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);font-weight:600}

/* ── producto ── */
.fhero{display:grid;grid-template-columns:1fr 62mm;gap:9mm;align-items:start;
  padding:8mm 0 6mm}
/* Sin esto, una palabra larga en la descripción empuja la columna de la foto. */
.fhero-t{min-width:0}
.fmeta{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel)}
.fhero h1{margin:3px 0 0;font-family:var(--display);font-size:30px;line-height:1.1;
  letter-spacing:-.02em}
.ftag{margin:5px 0 0;font-size:14px;color:var(--brand);font-weight:600}
.fdesc{margin-top:8px;color:var(--graphite)}
.fdesc p{margin:0 0 .5em}
.fdesc p:last-child{margin-bottom:0}
.fhero-i{border:1px solid var(--line);background:var(--paper-2);padding:5px}
.fhero-i img{width:100%;height:auto;display:block}

/* ── destacados ── */
.fdest{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:0 0 7mm;padding:0}
.fdest li{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;
  border:1px solid var(--line);border-radius:2px;padding:4px 9px;color:var(--graphite)}

/* ── títulos de sección ── */
.frule{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);font-weight:600;margin:0 0 4mm;padding-bottom:4px;
  border-bottom:1px solid var(--line)}

/* ── características ── */
.fcar{display:grid;grid-template-columns:1fr 1fr;gap:5mm 7mm;margin-bottom:7mm}
.fcar-i{display:grid;grid-template-columns:auto 1fr;gap:7px;break-inside:avoid}
.fcar-n{font-family:var(--mono);font-size:10px;color:var(--cyan);
  background:var(--ink);border-radius:2px;padding:2px 5px;height:fit-content}
.fcar-i h3{margin:0 0 2px;font-family:var(--display);font-size:13px;letter-spacing:-.01em}
.fcar-i p{margin:0;font-size:12px;color:var(--graphite)}

/* ── tabla técnica ── */
.fspecs{width:100%;border-collapse:collapse;margin-bottom:7mm;font-size:12px}
.fspecs tr{break-inside:avoid}
.fspecs tr:nth-child(odd){background:var(--paper-2)}
.fspecs th{width:52mm;text-align:left;vertical-align:top;padding:5px 9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--steel);font-weight:500}
.fspecs td{padding:5px 9px;vertical-align:top;color:var(--ink)}

/* ── imágenes ── */
.ffotos{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm;margin-bottom:7mm}
.ffotos img{width:100%;height:auto;border:1px solid var(--line);background:var(--paper-2);
  display:block;break-inside:avoid}

/* ── pie ── */
.ff{display:flex;justify-content:space-between;gap:8mm;align-items:flex-end;
  border-top:2px solid var(--ink);padding-top:7px;font-size:11px;color:var(--steel)}
.ff p{margin:0}
.ff-t{font-family:var(--display);font-weight:700;color:var(--ink);font-size:13px}
.ff-n{max-width:78mm;text-align:right;font-size:10px}

/* ── barra de pantalla, no sale impresa ── */
.fbar{position:sticky;bottom:0;display:flex;gap:14px;justify-content:center;
  align-items:center;padding:12px;background:var(--ink)}
.fbar button{background:var(--cyan);color:var(--ink);border:0;border-radius:3px;
  padding:9px 18px;font:inherit;font-weight:600;cursor:pointer}
.fbar button:hover{background:#fff}
.fbar a{color:rgba(255,255,255,.8);font-size:13px}

@media print{
  /* Los márgenes los pone la hoja, no el navegador: así no se duplican. */
  @page{size:A4;margin:10mm}
  body{background:#fff;font-size:11.5px}
  .hoja{max-width:none;margin:0;padding:0;box-shadow:none}
  .fbar{display:none}
  .frule{break-after:avoid}
  .fhero{break-inside:avoid}
  a{color:inherit;text-decoration:none}
}

@media (max-width:640px){
  .hoja{padding:22px 18px}
  .fhero{grid-template-columns:1fr;gap:16px}
  .fcar{grid-template-columns:1fr}
  .ffotos{grid-template-columns:repeat(2,1fr)}
  .ff{flex-direction:column;align-items:flex-start;gap:10px}
  .ff-n{text-align:left;max-width:none}
  .fspecs th{width:38%}
}