/*
Theme Name: Site Agent Blocks
Theme URI: https://example.test/site-agent-blocks
Author: Site Agent OS
Description: Tema de bloques reutilizable para sitios gobernados por agentes.
Version: 0.2.0
Requires at least: 6.9
Requires PHP: 8.1
Text Domain: site-agent-blocks
*/

:root { text-rendering: optimizeLegibility; --sa-shadow: 0 24px 70px rgba(6,17,31,.11); --sa-border: rgba(25,70,99,.13); }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.site-agent-hero-image { margin-top:3rem; }
.site-agent-hero-image img { width:100%; height:auto; border-radius:1.5rem; }
.site-agent-hero h1 { font-size:clamp(2.5rem,5vw,4.5rem); }
a, .wp-element-button { transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
:focus-visible { outline: 3px solid #16c7e8; outline-offset: 4px; }
.site-agent-header { position: relative; z-index: 10; border-bottom: 1px solid rgba(6,17,31,.08); backdrop-filter: blur(16px); }
.site-agent-header .wp-block-site-title a { text-decoration: none; }
.site-agent-section { padding-block: clamp(4.5rem,9vw,8rem); }
.site-agent-section-title { max-width: 16ch; text-wrap: balance; }
.site-agent-section-lead { max-width: 62ch; color: var(--wp--preset--color--muted); }
.site-agent-eyebrow { display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1rem; color:#087c98; font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.site-agent-eyebrow::before { content:""; width:1.5rem; height:2px; background:#16c7e8; }
.site-agent-hero { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(circle at 82% 18%,rgba(22,199,232,.23),transparent 24rem),radial-gradient(circle at 8% 95%,rgba(23,119,229,.18),transparent 30rem),linear-gradient(140deg,#06111f 0%,#0a2038 62%,#0b3047 100%); color:#f8fbfd; padding-block:clamp(5rem,11vw,9rem); }
.site-agent-hero::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.13; background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 90%); }
.site-agent-hero h1 { max-width:18ch; text-wrap:balance; }
.site-agent-hero .site-agent-hero-copy { color:#bfd0df; max-width:57ch; }
.site-agent-hero .is-style-outline .wp-block-button__link { border-color:rgba(255,255,255,.35); color:#fff; }
.site-agent-visual { position:relative; min-height:29rem; border:1px solid rgba(132,227,244,.25); border-radius:2rem; background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035)); box-shadow:0 30px 90px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.17); overflow:hidden; }
.site-agent-visual::before,.site-agent-visual::after { content:""; position:absolute; border-radius:999px; border:1px solid rgba(89,220,244,.28); }
.site-agent-visual::before { width:25rem; height:25rem; top:2rem; left:3rem; }
.site-agent-visual::after { width:16rem; height:16rem; top:6.5rem; left:7.5rem; }
.site-agent-node { position:absolute; z-index:2; width:7.5rem; margin:0; padding:.75rem 1rem; border:1px solid rgba(255,255,255,.16); border-radius:.85rem; background:rgba(5,19,34,.74); box-shadow:0 12px 30px rgba(0,0,0,.2); color:#d9f8ff; font-size:.78rem; font-weight:700; text-align:center; }
.site-agent-node:nth-child(1) { top:3rem; left:2rem; }.site-agent-node:nth-child(2) { top:7rem; right:1.5rem; }.site-agent-node:nth-child(3) { bottom:3.5rem; right:3rem; }.site-agent-node:nth-child(4) { bottom:5rem; left:1.5rem; }
.site-agent-node.is-core { width:9rem; top:50%; left:50%; transform:translate(-50%,-50%); background:linear-gradient(135deg,#16c7e8,#1777e5); color:#06111f; border:0; box-shadow:0 0 50px rgba(22,199,232,.4); }
.site-agent-card { height:100%; padding:clamp(1.5rem,3vw,2.25rem); border:1px solid var(--sa-border); border-radius:1.35rem; background:#fff; box-shadow:0 10px 35px rgba(6,17,31,.045); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.site-agent-card:hover { transform:translateY(-4px); box-shadow:var(--sa-shadow); border-color:rgba(22,199,232,.45); }
.site-agent-card-number { color:#0ba8c8; font-size:.8rem; font-weight:800; letter-spacing:.12em; }
.site-agent-card h3 { margin-top:2rem; }
.site-agent-dark-panel { border-radius:clamp(1.5rem,4vw,2.75rem); background:linear-gradient(135deg,#06111f,#0c2946); box-shadow:var(--sa-shadow); overflow:hidden; }
.site-agent-steps { counter-reset:sa-step; }
.site-agent-step { position:relative; padding-left:4.25rem; counter-increment:sa-step; }
.site-agent-step::before { content:"0" counter(sa-step); position:absolute; left:0; top:-.15rem; display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:50%; border:1px solid rgba(22,199,232,.5); background:rgba(22,199,232,.1); color:#6fe8ff; font-size:.8rem; font-weight:800; }
.site-agent-checklist { padding:0; list-style:none; }.site-agent-checklist li { position:relative; padding-left:1.8rem; margin-bottom:.85rem; }.site-agent-checklist li::before { content:"✓"; position:absolute; left:0; color:#0ba8c8; font-weight:900; }
.site-agent-cta { position:relative; overflow:hidden; border-radius:clamp(1.5rem,4vw,2.75rem); background:linear-gradient(135deg,#e8faff,#f7fbff); box-shadow:inset 0 0 0 1px rgba(22,199,232,.17); padding:clamp(2.5rem,6vw,5rem); }
.site-agent-cta::after { content:""; position:absolute; width:20rem; height:20rem; right:-8rem; top:-10rem; border-radius:50%; background:rgba(22,199,232,.16); filter:blur(2px); }
@media (max-width:781px) {
  .site-agent-hero { padding-block:4.5rem; }.site-agent-visual { min-height:23rem; margin-top:2rem; }.site-agent-visual::before { left:50%; transform:translateX(-50%); width:21rem; height:21rem; }.site-agent-visual::after { left:50%; transform:translateX(-50%); width:13rem; height:13rem; }.site-agent-node { width:6.5rem; padding:.6rem; font-size:.7rem; }.site-agent-node.is-core { width:8rem; }.site-agent-header .wp-block-buttons { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; } }