/*
============================================================
CATÁLOGO DE DISEÑOS AUTOCAD — CSS
Productos de Acero E.I.R.L.
00. Cursos personalizado
01. Variables y tema
02. Base / reset
03. Encabezado y navegación
04. Hero / portada
05. Botones y elementos del hero
06. Secciones generales
07. Catálogo / tarjetas
08. Secciones alternativas y CTA
09. Footer
10. Responsive
============================================================
*/


/*============================================================
   00. CURSOS PERSONALIZADO
   /* ============ Cursor personalizado: punto azul ============ */
body, a, button, input, textarea, select, label, [role="button"] {
    cursor: none;
}

/* tamaño del cursor y  reactividad con elementos */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 14px 4px rgba(22, 104, 168, .55);
    transition: width .2s ease, height .2s ease, box-shadow .2s ease;
    animation: dotColorCycle 6s ease-in-out infinite;
}

.cursor-dot.is-hover {
    width: 32px;
    height: 32px;
    box-shadow: 0 0 24px 8px rgba(255, 255, 255, .5);
}

@keyframes dotColorCycle {
    0%   { background-color: #b7c2cc; } /* gris */
    33%  { background-color: #ffffff; } /* blanco */
    66%  { background-color: var(--steel-blue); } /* azul */
    100% { background-color: #b7c2cc; }
}

@media (hover: none), (pointer: coarse) {
    .cursor-dot { display: none; }
    body, a, button, input, textarea, select, label, [role="button"] { cursor: auto; }
}

/* ==========================================================
   01. VARIABLES Y TEMA
   Colores globales, superficies, textos y variables usadas
   también por los dibujos SVG.
   ========================================================== */
/* Variables principales */
:root{
   --bg:#eaf1f5;
   --surface:#fff;
   --text:#17212b;
   --muted:#475569;
   --line:#e2e8f0;
   --blue:#1668a8;
   --head:#0f1720;
   --grid:rgba(22,104,168,.12);
   --draw:#17212b;
   --thumb:#f4f8fb;
   box-sizing:border-box;
   padding-top:env(safe-area-inset-top,0px);
   padding-bottom:env(safe-area-inset-bottom,0px)
}
/* Tema oscuro automático según el sistema */
@media (prefers-color-scheme:dark)
{
   :root:not([data-theme="light"])
   {
      --bg:#111a24;
      --surface:#0f1720;
      --text:#fff;
      --muted:#cbd5e1;
      --line:rgba(255,255,255,.1);
      --grid:rgba(120,190,255,.1);
      --draw:#e2e8f0;
      --thumb:#0b121a
   }
}
/* Tema oscuro manual: JavaScript cambia data-theme */
:root[data-theme="dark"]
{
   --bg:#111a24;
   --surface:#0f1720;
   --text:#fff;
   --muted:#cbd5e1;
   --line:rgba(255,255,255,.1);
   --grid:rgba(120,190,255,.1);
   --draw:#e2e8f0;
   --thumb:#0b121a
}
/* ==========================================================
   02. BASE / RESET
   Dimensiones, scroll, tipografía y comportamiento general.
   ========================================================== */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;
   scroll-padding-top:90px}
body{
   font-family:'Inter',system-ui,sans-serif;
   background:var(--bg);
   color:var(--text);
   overflow-x:hidden
}
.wrap{
   max-width:80rem;
   margin:auto;
   padding:0 1.5rem
}
/* ==========================================================
   03. ENCABEZADO Y NAVEGACIÓN
   Logo, menú y botón de cambio de tema.
   ========================================================== */
header{
   position:sticky;
   top:0;z-index:50;
   background:#0f1720;
   border-bottom:1px solid rgba(255,255,255,.1);
   padding-top:env(safe-area-inset-top,0px)
}
header 
.wrap{
   display:flex;align-items:center;
   justify-content:space-between;
   height:78px;gap:1rem
}
.logo{
   display:flex;align-items:center;
   gap:.75rem;color:#fff;
   font-weight:800;
   font-size:.95rem;
   line-height:1.25;
   text-decoration:none
}
.logo b{
   display:grid;
   place-items:center;
   width:42px;
   height:42px;
   border-radius:8px;
   background:linear-gradient(135deg,#3b3a9e,#1668a8);
   font-size:1.3rem
}
nav{
   display:flex;
   align-items:center;
   gap:1.5rem
}
nav a{color:#e2e8f0;font-size:.85rem;font-weight:600;text-decoration:none}
nav a:hover{color:#66cdff}
#tg{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:#fff;cursor:pointer;font-size:1rem}
@media(max-width:860px){nav a{display:none}}
/* ==========================================================
   04. HERO / PORTADA
   Primera pantalla del catálogo.
   ========================================================== */
.hero{
   color:#fff;
   background-color:#17212b;
   background-image: radial-gradient(1.5px 1.5px at 8% 20%,#fff9,transparent),
   radial-gradient(1px 1px at 22% 70%,#fff8,transparent),radial-gradient(1.5px 1.5px at 41% 35%,#fff8,transparent),
   radial-gradient(1px 1px at 63% 12%,#fff9,transparent),radial-gradient(1.5px 1.5px at 78% 80%,#fff8,transparent),
   radial-gradient(1px 1px at 92% 40%,#fff9,transparent),radial-gradient(1px 1px at 52% 88%,#fff8,transparent),
   linear-gradient(135deg,#14243a,#1c4a73 60%,#245a80)
}
.hero .wrap{
   display:grid;
   grid-template-columns:1.1fr 1fr;
   gap:3rem;align-items:center;
   padding-top:5rem;
   padding-bottom:5rem
}
@media(max-width:900px){
   .hero .wrap{
      grid-template-columns:1fr;
      padding-top:3rem;
      padding-bottom:3rem
   }
}
/* Textos del hero */
.eyebrow{
   font-size:.75rem;
   font-weight:800;
   letter-spacing:.14em;text-transform:uppercase;
   color:#66cdff
}
h1{
   font-size:clamp(2.2rem,5vw,3.6rem);
   line-height:1.05;
   font-weight:800;
   letter-spacing:-.03em;
   margin:1rem 0
}
h1 span{
   font-weight:400;
   opacity:.9
}
.hero p{
   max-width:34rem;
   line-height:1.7;
   color:#dbe6ee
}
/* ==========================================================
   05. BOTONES Y ELEMENTOS DEL HERO
   Botones y panel visual tipo glass.
   ========================================================== */
.btns{
   display:flex;
   flex-wrap:wrap;
   gap:1rem;
   margin-top:2rem
}
.btn{
   display:inline-flex;
   align-items:center;
   padding:.8rem 1.5rem;
   border-radius:.4rem;
   font-weight:700;
   font-size:.95rem;
   text-decoration:none;
   border:1px solid transparent;
   cursor:pointer;
   font-family:inherit
}
.b1{
   background:var(--blue);
   color:#fff
}
.b2{
   border-color:rgba(255,255,255,.4);
   color:#fff
}
.b3{
   background:#fff;
   color:#17212b
}
.glass{
   border:1px solid rgba(255,255,255,.2);
   background:rgba(15,23,42,.6);
   padding:.5rem;
   border-radius:1rem;
   box-shadow:0 25px 50px -12px rgba(0,0,0,.4)
}
.glass svg{
   display:block;
   width:100%;
   height:auto;
   border-radius:.75rem;
   background:#0b121a
}
/* ==========================================================
   06. SECCIONES GENERALES
   Etiquetas, títulos, descripciones y chips.
   ========================================================== */
section{
   padding:4.5rem 0
}
.tag{
   font-size:.75rem;
   font-weight:800;
   letter-spacing:.14em;
   text-transform:uppercase;
   color:var(--blue)
}
h2{
   font-size:1.9rem;
   font-weight:800;
   letter-spacing:-.02em;
   margin-top:.6rem
}
.lead{
   max-width:42rem;
   line-height:1.75;
   color:var(--muted);
   margin-top:1rem
}
.chips{
   display:flex;
   flex-wrap:wrap;
   gap:.6rem;
   margin-top:1.2rem
}
.chips span{
   border:1px solid var(--line);
   background:var(--surface);
   border-radius:99px;
   padding:.35rem .9rem;
   font-size:.78rem;
   font-weight:600;
   color:var(--muted)
}
/* ==========================================================
   07. CATÁLOGO / TARJETAS
   Las tarjetas .card son generadas por JavaScript dentro
   de cada contenedor .grid.
   ========================================================== */
.grid{
   display:grid;
   grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
   gap:1.5rem;margin-top:2.2rem
}
.card{
   background:var(--surface);
   border:1px solid var(--line);
   border-radius:.75rem;
   overflow:hidden;
   border-top:3px solid var(--ac);
   transition:transform .25s,box-shadow .25s
}
.card:hover{
   transform:translateY(-4px);
   box-shadow:0 18px 30px -12px rgba(0,0,0,.35)
}
.thumb{
   background:var(--thumb);
   background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
   background-size:16px 16px
}
.thumb svg{
   display:block;
   width:100%;
   height:auto
}
.info{
   padding:1.1rem 1.2rem 1.3rem
}
.info small{
   font-size:.7rem;
   font-weight:800;
   letter-spacing:.1em;
   color:var(--ac)
}
.info h3{
   font-size:1.05rem;
   margin:.3rem 0 .4rem}
.info p{
   font-size:.85rem;
   color:var(--muted);
   line-height:1.5
}
.info a{
   display:inline-block;
   margin-top:.8rem;
   font-size:.85rem;
   font-weight:700;
   color:var(--blue);
   text-decoration:none
}
/* ==========================================================
   08. SECCIONES ALTERNATIVAS Y CTA
   Fondos alternados y bloque de cotización.
   ========================================================== */
.alt{
   background:color-mix(in srgb,var(--surface) 70%,var(--bg))}
.cta{
   background:#17212b;
   color:#fff;
   text-align:center}
.cta p{color:#cbd5e1;margin:1rem auto 2rem;
   max-width:34rem;line-height:1.7}
/* ==========================================================
   09. FOOTER
   ========================================================== */
footer{
   background:#0f1720;
   color:#94a3b8;
   text-align:center;
   padding:1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom,0px));
   font-size:.85rem}
/* Color específico de la etiqueta dentro del CTA */
.cta .tag{color:#66cdff}
/* ==========================================================
   10. RESPONSIVE
   Las reglas @media originales permanecen junto al componente
   que modifican para no alterar el comportamiento actual.
   ========================================================== */