:root{
      --bg:#ffffff;
      --section:#f8fafc;
      --primary:#0f766e;
      --text:#1e293b;
      --muted:#64748b;
      --line:#dbe4ea;
      --accent:#14b8a6;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: Arial, Helvetica, sans-serif;
      color:var(--text);
      background:
        linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23000000' fill-opacity='0.035'%3E%3Ccircle cx='15' cy='20' r='1'/%3E%3Ccircle cx='60' cy='45' r='1'/%3E%3Ccircle cx='120' cy='70' r='1'/%3E%3Ccircle cx='155' cy='130' r='1'/%3E%3Ccircle cx='30' cy='120' r='1'/%3E%3Ccircle cx='95' cy='150' r='1'/%3E%3Crect x='80' y='20' width='1' height='1'/%3E%3Crect x='140' y='35' width='1' height='1'/%3E%3Crect x='50' y='90' width='1' height='1'/%3E%3Crect x='10' y='160' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
      background-color:var(--bg);
    }
    a{text-decoration:none;color:inherit}
    .site-wrap{
      max-width: 1440px;
      margin: 0 auto;
      padding: 18px;
    }
    .brutal-box{
      background:var(--section);
      border:2px solid var(--text);
      box-shadow:8px 8px 0 var(--primary);
    }
    .topbar{
      position:sticky;
      top:12px;
      z-index:1050;
      margin-bottom:24px;
    }
    .nav-shell{
      background:var(--bg);
      border:2px solid var(--text);
      box-shadow:8px 8px 0 var(--primary);
      padding:12px 14px;
    }
    .brand{
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
      font-size:1rem;
    }
    .brand-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:42px;
      height:42px;
      border:2px solid var(--text);
      background:var(--section);
      margin-right:10px;
      transform:rotate(-4deg);
      font-weight:900;
      color:var(--primary);
    }
    .hamburger-btn{
      border:2px solid var(--text);
      background:var(--section);
      border-radius:999px;
      padding:10px 14px;
      color:var(--text);
      font-weight:700;
      transition:.25s ease;
    }
    .hamburger-btn:hover{
      transform:translate(-2px,-2px);
      box-shadow:4px 4px 0 var(--primary);
      color:var(--text);
    }
    .mobile-menu{
      border:2px solid var(--text);
      border-top:none;
      background:var(--section);
      box-shadow:8px 8px 0 var(--primary);
    }
    .mobile-menu a{
      display:block;
      padding:14px 18px;
      border-top:2px solid var(--line);
      font-weight:700;
      transition:.2s ease;
    }
    .mobile-menu a:hover{
      background:#ecfeff;
      color:var(--primary);
      padding-left:26px;
    }
    .hero{
      display:flex;
      flex-wrap:wrap;
      gap:24px;
      align-items:stretch;
      margin-bottom:28px;
    }
    .hero-copy{
      flex:1 1 420px;
      min-width:300px;
      padding:32px;
      background:var(--section);
      border:2px solid var(--text);
      box-shadow:10px 10px 0 var(--primary);
      position:relative;
      overflow:hidden;
    }
    .hero-copy::before{
      content:"BLOG FISCAL";
      position:absolute;
      right:-18px;
      top:18px;
      background:#ccfbf1;
      border:2px solid var(--text);
      padding:6px 14px;
      transform:rotate(8deg);
      font-size:.78rem;
      font-weight:800;
    }
    .gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--accent),#38bdf8);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero-title{
      font-size:clamp(2.4rem,5vw,5rem);
      line-height:.95;
      font-weight:900;
      text-transform:uppercase;
      margin-bottom:16px;
    }
    .hero-sub{
      font-size:1.08rem;
      color:var(--text);
      max-width:52ch;
      margin-bottom:24px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
    }
    .btn-brutal{
      border:2px solid var(--text);
      border-radius:999px;
      padding:12px 20px;
      font-weight:800;
      transition:.25s ease;
      display:inline-flex;
      align-items:center;
      gap:10px;
    }
    .btn-primary-brutal{
      background:var(--primary);
      color:#fff;
    }
    .btn-light-brutal{
      background:#ffffff;
      color:var(--text);
    }
    .btn-brutal:hover{
      transform:translate(-3px,-3px);
      box-shadow:6px 6px 0 var(--text);
      color:inherit;
    }
    .hero-image-wrap{
      flex:1 1 340px;
      min-width:300px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
      background:linear-gradient(135deg,#f0fdfa 0%, #f8fafc 55%, #ecfeff 100%);
      border:2px solid var(--text);
      box-shadow:10px 10px 0 var(--text);
      position:relative;
    }
    .hero-image-wrap::after{
      content:"IMPUESTOS EN CLAVE SIMPLE";
      position:absolute;
      left:18px;
      bottom:16px;
      background:#fff;
      border:2px solid var(--text);
      padding:8px 12px;
      font-size:.78rem;
      font-weight:800;
      transform:rotate(-3deg);
    }
    .polaroid{
      background:#fff;
      border:2px solid var(--text);
      padding:14px 14px 56px;
      box-shadow:10px 10px 0 rgba(15,118,110,.22);
      transform:rotate(-5deg);
      width:min(100%,430px);
      transition:.3s ease;
    }
    .polaroid:hover{
      transform:rotate(-2deg) translateY(-4px);
    }
    .polaroid img{
      width:100%;
      height:340px;
      object-fit:cover;
      border:2px solid var(--text);
      display:block;
      background:#e2e8f0;
    }
    .polaroid span{
      display:block;
      margin-top:14px;
      text-align:center;
      font-weight:800;
      color:var(--text);
      letter-spacing:.05em;
    }
    .feature-band{
      margin:20px 0 30px;
      display:flex;
      flex-wrap:wrap;
      gap:18px;
    }
    .feature-card{
      flex:1 1 220px;
      padding:24px 22px;
      background:var(--section);
      border:2px solid var(--text);
      position:relative;
      transition:.25s ease;
    }
    .feature-card:nth-child(1){box-shadow:7px 7px 0 #99f6e4}
    .feature-card:nth-child(2){box-shadow:7px 7px 0 #bfdbfe}
    .feature-card:nth-child(3){box-shadow:7px 7px 0 #fde68a}
    .feature-card:hover{
      transform:translate(-4px,-4px);
    }
    .feature-n{
      font-size:.8rem;
      font-weight:900;
      color:var(--primary);
      margin-bottom:10px;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .feature-card h3{
      font-size:1.2rem;
      font-weight:900;
      margin-bottom:10px;
    }
    .feature-card p{
      margin:0;
      color:var(--muted);
    }
    .content-shell{
      background:var(--section);
      border:2px solid var(--text);
      box-shadow:10px 10px 0 var(--primary);
      padding:24px;
      margin-bottom:30px;
    }
    .content-head{
      display:flex;
      flex-wrap:wrap;
      gap:16px;
      justify-content:space-between;
      align-items:end;
      margin-bottom:22px;
      padding-bottom:16px;
      border-bottom:2px dashed var(--text);
    }
    .content-head h2{
      margin:0;
      font-size:clamp(1.7rem,3vw,3rem);
      font-weight:900;
      text-transform:uppercase;
    }
    .content-head p{
      margin:0;
      max-width:58ch;
      color:var(--muted);
      font-weight:600;
    }
    .post-list{
      display:flex;
      flex-direction:column;
      gap:18px;
    }
    .post-item{
      display:flex;
      flex-wrap:wrap;
      gap:18px;
      align-items:stretch;
      background:#fff;
      border:2px solid var(--text);
      padding:14px;
      transition:.25s ease;
      position:relative;
    }
    .post-item:nth-child(odd){
      box-shadow:8px 8px 0 #ccfbf1;
    }
    .post-item:nth-child(even){
      box-shadow:8px 8px 0 #dbeafe;
    }
    .post-item:hover{
      transform:translate(-4px,-4px);
    }
    .post-media{
      flex:0 0 170px;
      max-width:170px;
    }
    .post-polaroid{
      background:#fff;
      border:2px solid var(--text);
      padding:8px 8px 28px;
      transform:rotate(-2deg);
      height:100%;
    }
    .post-polaroid img{
      width:100%;
      height:130px;
      object-fit:cover;
      border:2px solid var(--text);
      display:block;
      background:#e2e8f0;
    }
    .post-polaroid small{
      display:block;
      margin-top:8px;
      text-align:center;
      font-weight:800;
      color:var(--primary);
    }
    .post-body{
      flex:1 1 320px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:12px;
      min-width:260px;
    }
    .post-index{
      display:inline-block;
      border:2px solid var(--text);
      background:#ecfeff;
      padding:4px 10px;
      font-size:.78rem;
      font-weight:900;
      width:max-content;
    }
    .post-body h3{
      font-size:1.35rem;
      font-weight:900;
      margin:0;
      line-height:1.15;
    }
    .post-body p{
      margin:0;
      color:var(--muted);
      font-size:1rem;
    }
    .post-link{
      align-self:flex-start;
      border:2px solid var(--text);
      border-radius:999px;
      padding:10px 16px;
      font-weight:800;
      background:var(--primary);
      color:#fff;
      transition:.25s ease;
    }
    .post-link:hover{
      transform:translate(-3px,-3px);
      box-shadow:5px 5px 0 var(--text);
      color:#fff;
    }
    .footer-min{
      background:var(--section);
      border:2px solid var(--text);
      box-shadow:8px 8px 0 var(--text);
      padding:18px 20px;
      margin-bottom:18px;
    }
    .footer-min a{
      font-weight:800;
      transition:.2s ease;
    }
    .footer-min a:hover{
      color:var(--primary);
    }
    .footer-note{
      color:var(--muted);
      font-size:.95rem;
    }
    @media (max-width: 991.98px){
      .hero-copy,.hero-image-wrap,.content-shell,.footer-min,.nav-shell{box-shadow:6px 6px 0 var(--primary)}
      .hero-image-wrap{box-shadow:6px 6px 0 var(--text)}
    }
    @media (max-width: 767.98px){
      .site-wrap{padding:12px}
      .hero-copy{padding:24px}
      .content-shell{padding:18px}
      .post-media{
        flex:1 1 100%;
        max-width:100%;
      }
      .post-polaroid img{
        height:180px;
      }
      .hero-title{
        font-size:2.2rem;
      }
    }