*{box-sizing:border-box}html{scroll-padding-top:100px}body{margin:0;font:16px/1.55 "Segoe UI",Arial,sans-serif;color:#142033;background:#fbfaf9}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}a:focus-visible{outline:3px solid #ee3451;outline-offset:3px}.wrap{width:min(1100px,90%);margin:auto}header{position:sticky;top:0;background:#101319;color:white;z-index:2;border-bottom:1px solid #393a40}.bar,nav{display:flex;align-items:center;justify-content:space-between;gap:24px}.bar{padding:14px 0}.brand{font-weight:700}.brand b{color:#ff3451;letter-spacing:-3px;font-size:26px;margin-right:8px}nav{font-size:14px}.hero{background:linear-gradient(90deg,#111215 26%,#111215e8 40%,transparent 75%),url(escritorio.jpg) right center/62% auto no-repeat,#111215;color:white;padding:clamp(42px,6vw,86px) 0}.hero h1,.reading h1{font:500 clamp(36px,4.5vw,66px)/1.04 Georgia,serif;letter-spacing:-.035em;margin:0}.hero p{max-width:420px;color:#ece7e3;margin:18px 0 25px}.button{background:#bd1730;padding:11px 18px;color:white;border-radius:6px;display:inline-block;font-weight:600}.content{padding:32px 0 56px}.feature,.card{background:white;display:grid;border:1px solid #e5e0df;border-radius:12px;overflow:hidden}.feature{grid-template-columns:1fr 1fr;align-items:center}.feature img{width:100%;height:100%;min-height:240px;object-fit:cover}.feature div{padding:26px}.feature h2,.reading h2{line-height:1.15}.feature a,.back{color:#aa1730;font-weight:650}small{font-size:12px;color:#aa1730;font-weight:700;letter-spacing:.045em}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.filters a{padding:5px 13px;border:1px solid #d9d6d6;border-radius:20px}.filters a[aria-current]{background:#182435;color:white}.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.card{display:block}.card div{padding:16px}.card h3{line-height:1.2;margin:6px 0}.card p{font-size:14px;margin:0}.reading{max-width:730px;margin:40px auto;padding:0 5% 50px;box-sizing:content-box}.reading h1{margin:12px 0 22px}.reading p{font-size:18px}.reading .back{display:block;margin-top:28px}[hidden]{display:none}@media(max-width:720px){.bar{flex-wrap:wrap;gap:3px}nav{font-size:13px;gap:14px}.hero{background-size:auto,cover;background-image:linear-gradient(90deg,#101318f5,#101318c9 65%,#1013189e),url(escritorio.jpg)}.feature,.cards{grid-template-columns:1fr}.feature img{min-height:0;max-height:200px}.feature div{padding:18px}}
header.cabecera {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px max(5vw,calc((100vw - 1240px)/2));background:white;color:#101d30;border-bottom:1px solid #eee;z-index:10}
.cabecera .brand {display:flex;align-items:center;gap:12px;font-weight:750;line-height:1.2}
.brand strong {font:bold 38px Arial;letter-spacing:-6px;color:#ff2639;padding-right:5px}
.brand small {display:block;color:inherit;font-size:10px;letter-spacing:.1em}
.cabecera nav {gap:20px}
.cabecera nav a:is(:hover,:focus-visible){text-decoration:underline;text-decoration-color:#e91e33;text-underline-offset:4px}
.cabecera .btn {background:#e91e33;color:white;padding:12px 21px;border-radius:5px;font-size:14px;font-weight:650;white-space:nowrap}
.menu-movil{display:none}
.hero {background:white linear-gradient(90deg,white 36%,transparent 61%);position:relative;isolation:isolate;color:#101d30}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,white 38%,transparent 61%),url(escritorio.jpg) right center/58% 100% no-repeat}
.hero h1,.reading h1 {font-family:"Segoe UI",Arial,sans-serif;font-weight:720}
.hero small{display:block;letter-spacing:.22em;margin-bottom:10px;color:#344054}
.hero p{color:#344054;max-width:min(42vw,435px)}
.secondary{background:white;color:#142033;border:1px solid #b4bcc7}
.temas{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:36px 0}
.temas a{padding:26px;border-radius:12px;background:linear-gradient(135deg,#fffaf6,#f0e7df)}
.temas a+a{background:linear-gradient(135deg,#f5faff,#dfe8f1)}
.temas span,.temas b{color:#b81630}.temas span{font-size:28px}.temas h2{margin:4px 0}
@media(max-width:860px){
 header.cabecera{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:6px;padding:8px 3%}
 .menu-movil{display:grid;place-content:center;gap:4px;width:44px;height:44px;background:white;border:0}
 .menu-movil span{display:block;width:21px;height:2px;background:#101d30}
 .cabecera .brand{justify-self:center;gap:6px;font-size:clamp(13px,3.5vw,16px)}
 .brand strong{font-size:28px;letter-spacing:-4px}.brand small{font-size:8px}
 .cabecera .btn{grid-area:1/3;padding:10px;font-size:13px}
 .cabecera nav{display:none;grid-column:1/-1}
 .cabecera:has([aria-expanded="true"]) nav{display:grid;gap:0;justify-content:stretch;max-height:65vh;overflow:auto}
 .cabecera nav a{padding:10px 12px;border-top:1px solid #eee}
}
@media(max-width:720px){.hero{padding:32px 0 0}.hero::before{display:none}.hero::after{content:"";display:block;height:190px;margin-top:18px;background:white url(escritorio.jpg) center 65%/cover no-repeat}.hero p{max-width:100%}.temas{grid-template-columns:1fr}}

.card h3::before, .reading h1::before {
  content:"";
  display:block;
  width:28px;
  height:3px;
  margin:10px 0;
  background:#e91e33;
}.cabecera .brand:is(:hover,:focus-visible) {text-decoration:none}
.cabecera .brand:is(:hover,:focus-visible) span {text-decoration:underline}
.cabecera .brand strong {position:relative}
.cabecera .brand:is(:hover,:focus-visible) strong::after {
  content:""; position:absolute; left:0; right:0; bottom:0; border-bottom:3px solid #000;
}

.temas a:is(:hover, :focus-visible), .card:is(:hover, :focus-visible) {
  text-decoration: none;
}
.temas a:is(:hover, :focus-visible) h2, .card:is(:hover, :focus-visible) h3 {
  text-decoration: underline;
  text-underline-offset: 4px;
}.articulo-sql p { text-align: justify; hyphens: auto; }
.articulo-sql p code {
  font-family:Consolas,"Courier New",monospace;
  font-size:.92em;
  color:#243952;
  background:#f2f3f6;
  padding:.06em .22em;
  border-radius:3px;
}
.articulo-sql p code b { color:#96223d; }

.descarga-sql {
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  margin:8px 0;
  padding:12px 16px;
  border-radius:6px;
  background:#bd1730;
  color:white;
  font-weight:650;
  overflow-wrap:anywhere;
}
.descarga-sql svg { flex-shrink:0; }
.descarga-sql:is(:hover,:focus-visible) { background:#991329; text-decoration:none; }