:root {
  --navy: #123a5e;
  --navy-hi: #1c5182;
  --navy-lo: #0d2942;
  --buy: #e0393e;
  --buy-hi: #c22b30;
  --free: #0f8a4f;
  --ink: #1b2431;
  --muted: #5a6b7d;
  --line: #dfe5ec;
  --bg: #f4f6f9;
  --card: #ffffff;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 34, 55, .08), 0 6px 18px rgba(16, 34, 55, .07);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

a { color: var(--navy-hi); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

.envoltura { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* ---------- Cabecera ---------- */
.cabera { background: var(--navy-lo); color: #fff; }
.cabera__alta {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 0;
}
.marca { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 19px; letter-spacing: .2px; }
.marca:hover { text-decoration: none; }
.marca__marca-svg { width: 34px; height: 34px; flex: none; }
.marca small { display: block; font-size: 11px; font-weight: 500; color: #a9c4dd; letter-spacing: .4px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; align-items: center; }
.nav a, .nav button {
  color: #dbe8f4; background: none; border: 0; font: inherit; font-size: 15px;
  padding: 9px 13px; border-radius: 7px; cursor: pointer;
}
.nav a:hover, .nav button:hover { background: var(--navy-hi); color: #fff; text-decoration: none; }
.nav__carrito { position: relative; color: #fff; background: var(--navy); font-weight: 600; }
.nav__carrito:hover { background: var(--navy-hi); }
.nav__contador {
  display: inline-block; min-width: 20px; padding: 0 5px; margin-left: 6px;
  background: var(--buy); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center;
}
.nav__contador[hidden] { display: none; }

.baner { background: var(--navy); color: #cfe1f2; font-size: 14px; }
.baner__lista { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 9px 0; }
.baner a { color: #fff; }
.baner span { color: #94b6d3; }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(120deg, var(--navy-lo), var(--navy) 60%, var(--navy-hi)); color: #fff; }
.hero__rejilla { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; padding: 42px 0 46px; }
.hero h1 { font-size: 34px; line-height: 1.2; margin: 0 0 10px; }
.hero p { color: #d6e6f4; font-size: 17px; margin: 0 0 20px; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__tarjeta {
  background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: start;
}
.hero__tarjeta h2 { margin: 0 0 4px; font-size: 21px; }
.hero__tarjeta p { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 7px; padding: 10px 18px;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn--descarga { background: var(--free); color: #fff; }
.btn--descarga:hover { background: #0c7543; }
.btn--comprar { background: var(--buy); color: #fff; }
.btn--comprar:hover { background: var(--buy-hi); }
.btn--mar { background: var(--navy); color: #fff; }
.btn--mar:hover { background: var(--navy-hi); }
.btn--fant { background: #fff; color: var(--navy); border-color: var(--line); }
.btn--fant:hover { border-color: var(--navy-hi); color: var(--navy-hi); }
.btn--fant--claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--fant--claro:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.btn--grande { padding: 13px 26px; font-size: 16px; }
.btn--chica { padding: 7px 12px; font-size: 14px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Secciones ---------- */
.seccion { padding: 40px 0; }
.seccion--blanca { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.seccion__titulo { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 6px; font-size: 25px; }
.seccion__texto { color: var(--muted); margin: 0 0 22px; max-width: 76ch; }
.filtro { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.filtro button {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 6px 15px; font: inherit; font-size: 14px; cursor: pointer;
}
.filtro button:hover { border-color: var(--navy-hi); color: var(--navy-hi); }
.filtro button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

/* ---------- Rejilla de productos ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 18px; }
.ficha {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow);
}
.ficha__cab { display: flex; gap: 12px; align-items: center; }
.ficha__nombre { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.3; }
.ficha__nombre a { color: var(--ink); }
.ficha__cat { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.ficha__resumen { font-size: 14px; color: #40505f; margin: 0; flex: 1; }
.ficha__pie { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-top: 4px; }
.precio { font-weight: 700; font-size: 15px; }
.precio--gratis { color: var(--free); }
.precio--pedir { color: var(--muted); font-weight: 600; font-size: 14px; }
.etiqueta { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: #eef3f8; color: var(--navy); }

.icono {
  width: 54px; height: 54px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: #fff;
}
.icono svg { width: 30px; height: 30px; }
.icono--grande { width: 92px; height: 92px; border-radius: 18px; }
.icono--grande svg { width: 48px; height: 48px; }
.icono--Fiscal { background: linear-gradient(150deg, #1f6fb2, #123a5e); }
.icono--Productividad { background: linear-gradient(150deg, #0f8a4f, #0a5c36); }
.icono--Legal { background: linear-gradient(150deg, #7a4fb2, #4a2c73); }
.icono--Psicologia { background: linear-gradient(150deg, #d9743a, #a4501f); }
.icono--Gestion { background: linear-gradient(150deg, #12a0a8, #0a6c72); }
.icono--default { background: linear-gradient(150deg, #55677c, #2c3948); }

/* ---------- Portales hermanos ---------- */
.portales__grupo { margin-top: 26px; }
.portales__grupo h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: 0 0 12px; }
.rejilla--portales { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.portal {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  display: block; color: inherit;
}
.portal:hover { text-decoration: none; border-color: var(--navy-hi); box-shadow: var(--shadow); }
.portal__nombre { font-weight: 700; font-size: 16px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.portal__dom { font-size: 12px; color: var(--muted); font-family: ui-monospace, Consolas, monospace; }
.portal__desc { font-size: 14px; color: #40505f; margin-top: 5px; }
.portal--fuera .portal__nombre { color: var(--muted); }
.portal--fuera { background: #f7f9fb; border-style: dashed; }

/* ---------- Ficha de producto ---------- */
.miga { font-size: 13px; color: var(--muted); padding: 14px 0 0; }
.producto { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; padding: 22px 0 40px; }
.producto__cab { display: flex; gap: 18px; align-items: center; margin-bottom: 8px; }
.producto__cab h1 { font-size: 30px; margin: 0 0 4px; }
.producto__resumen { color: var(--muted); font-size: 16px; margin: 0; }
.producto__cuerpo h2 { font-size: 21px; margin: 30px 0 10px; }
.producto__cuerpo p { margin: 0 0 14px; }
.lista--rasgos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lista--rasgos li { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 8px; padding: 13px 16px; }
.lista--rasgos strong { display: block; margin-bottom: 3px; }
.lista--rasgos span { color: #40505f; font-size: 15px; }
.recuadro { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.recuadro--aviso { border-left: 4px solid #d9743a; background: #fffaf3; }
.compra { position: sticky; top: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.compra__precio { font-size: 26px; font-weight: 800; margin: 0 0 2px; }
.compra__imp { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.compra__botones { display: grid; gap: 9px; margin-bottom: 16px; }
.compra__datos { list-style: none; margin: 0; padding: 0; font-size: 14px; display: grid; gap: 8px; }
.compra__datos li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.compra__datos span:first-child { color: var(--muted); }
.compra__datos span:last-child { text-align: right; font-weight: 600; }
.medios { display: grid; gap: 16px; margin-top: 8px; }
.medios figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.medios figcaption { font-size: 13px; color: var(--muted); padding: 8px 12px; }
.video { aspect-ratio: 16 / 9; width: 100%; border: 0; }

/* ---------- Carrito ---------- */
.carrito { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start; padding: 26px 0 44px; }
.lineas { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.linea { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); }
.linea:first-child { border-top: 0; }
.linea__nombre { font-weight: 700; }
.linea__meta { font-size: 13px; color: var(--muted); }
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.cantidad button { width: 30px; height: 30px; border: 0; background: #f2f5f9; font-size: 17px; cursor: pointer; color: var(--navy); }
.cantidad button:hover { background: var(--navy); color: #fff; }
.cantidad span { min-width: 34px; text-align: center; font-weight: 700; font-size: 15px; }
.quitar { background: none; border: 0; color: var(--buy); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
.vacio { padding: 40px 20px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }
.total { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #f7f9fb; border-top: 1px solid var(--line); font-size: 17px; font-weight: 700; }

form .campo { margin-bottom: 13px; }
form label { display: block; font-size: 13px; font-weight: 600; color: #34445a; margin-bottom: 4px; }
form input, form select, form textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 15px; color: var(--ink); background: #fff;
}
form input:focus, form select:focus, form textarea:focus { outline: 2px solid var(--navy-hi); outline-offset: 1px; border-color: var(--navy-hi); }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nota { font-size: 13px; color: var(--muted); }
.nota--alerta { background: #fffaf3; border: 1px solid #f0cf9a; border-radius: 8px; padding: 12px 14px; color: #7a4a12; font-size: 14px; }
.nota--ok { background: #eef8f1; border: 1px solid #b6e2c4; color: #15633a; border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.nota--hash code {
  display: block; margin: 5px 0; padding: 8px 10px; background: #f2f5f9; border: 1px solid var(--line);
  border-radius: 6px; font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  word-break: break-all; color: #34445a;
}

/* ---------- Pie ---------- */
.pie { background: var(--navy-lo); color: #b9cfe3; font-size: 14px; margin-top: 30px; }
.pie__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px; padding: 32px 0 22px; }
.pie h4 { color: #fff; font-size: 15px; margin: 0 0 10px; }
.pie a { color: #cfe1f2; }
.pie__base { border-top: 1px solid rgba(255, 255, 255, .12); padding: 14px 0 26px; display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; }

/* ---------- Utilidades ---------- */
.oculto { display: none !important; }
[saliva] { min-height: 20px; }
.centro { text-align: center; }
.marco { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin: 24px 0; max-width: 800px; }
.marco h1 { margin-top: 0; }
dl { margin: 0; }
dt { font-weight: 700; margin-top: 14px; }
dd { margin: 3px 0 0; color: #40505f; }

@media (max-width: 940px) {
  .hero__rejilla, .producto, .carrito { grid-template-columns: 1fr; }
  .compra { position: static; }
  .cabera__alta { flex-wrap: wrap; }
  .nav { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .fila { grid-template-columns: 1fr; }
  .hero h1 { font-size: 27px; }
  .linea { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .linea .quitar { grid-column: 2 / -1; justify-self: start; }
}