/* ===== JC Puertas Automáticas — CSS global (tokens, reset, animaciones, responsive) ===== */
:root{
  --naranja:#ff8a1e; --naranja-osc:#c25a00; --naranja-soft:#ffcd9a;
  --grafito:#15171c; --grafito2:#101216; --panel:#1c1f27; --panel2:#1d2027;
  --bd-osc:#23262e; --bd-osc2:#2a2e37; --bd-osc3:#353a45;
  --claro:#f5f3ef; --blanco:#fff; --bd-claro:#ece8e0; --bd-claro2:#e6e1d8;
  --txt-sec:#5a5f69; --txt-sec2:#8a8d94; --txt-osc:#c3c7cf; --txt-osc2:#9aa0ab;
  --max:1280px; --max-sec:1180px;
  --display:'Saira Condensed',system-ui,sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--body);background:var(--claro);color:var(--grafito);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--naranja);color:var(--grafito)}
a{text-decoration:none;color:inherit;background:transparent}
/* blindaje: botones CTA naranjas frente a CSS de core/plugins (que pisan con !important) */
#jcroot a[data-cta]{background:#ff8a1e!important;color:#15171c!important;border:none!important;text-decoration:none!important}
#jcroot a[data-fab]{background:#ff8a1e!important;color:#15171c!important}
/* enlaces dentro del contenido del diseño: respetar el color inline, sin subrayado forzado */
#jcroot main a{text-decoration:none}
img{max-width:100%;display:block}
input,textarea,button,select{font-family:inherit}
input:focus,textarea:focus,select:focus{outline:none}

/* contenedores reutilizables */
.jc-wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.jc-sec{max-width:var(--max-sec);margin:0 auto;padding:0 24px}

/* animaciones */
@keyframes slatOpen{0%{transform:scaleY(1)}8%{transform:scaleY(1)}48%{transform:scaleY(.015)}66%{transform:scaleY(.015)}96%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(255,138,30,.55)}70%{box-shadow:0 0 0 16px rgba(255,138,30,0)}100%{box-shadow:0 0 0 0 rgba(255,138,30,0)}}
@keyframes gridDrift{0%{background-position:0 0}100%{background-position:0 56px}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes jcSpin{to{transform:rotate(360deg)}}
@keyframes jcSpinR{to{transform:rotate(-360deg)}}

/* reveal (lo activa jc.js) */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}

/* dropdowns del header */
.jc-drop{position:relative}
.jc-drop-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:#fff;border:1px solid var(--bd-claro);border-radius:13px;box-shadow:0 24px 44px -26px rgba(21,23,28,.45);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
.jc-drop:hover .jc-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.jc-drop-menu a{display:block;padding:10px 13px;border-radius:9px;font-size:14.5px;color:#3a3e46;transition:background .15s,color .15s}
.jc-drop-menu a:hover{background:#fff3e8;color:var(--naranja-osc)}

/* responsive */
@media (max-width:1080px){
  [data-desknav]{display:none!important}
  [data-burger]{display:flex!important}
  [data-herogrid]{grid-template-columns:1fr!important;gap:38px!important}
  [data-calcgrid]{grid-template-columns:minmax(0,1fr)!important}
  [data-contact]{grid-template-columns:1fr!important}
  [data-cards-auto]{grid-template-columns:repeat(3,1fr)!important}
  [data-zonas]{grid-template-columns:1fr!important}
}
@media (max-width:820px){
  [data-cards-puertas]{grid-template-columns:repeat(2,1fr)!important}
  [data-advs]{grid-template-columns:repeat(2,1fr)!important}
  [data-stats]{grid-template-columns:repeat(2,1fr)!important}
  [data-cards-auto]{grid-template-columns:repeat(2,1fr)!important}
  .jc-foot-grid{grid-template-columns:1fr 1fr!important}
}
@media (max-width:560px){
  [data-cards-puertas]{grid-template-columns:1fr!important}
  [data-cards-auto]{grid-template-columns:1fr!important}
  .jc-foot-grid{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- Blog / Artículo ---- */
.jc-prose{font-size:17px;line-height:1.78;color:#34383f}
.jc-prose > *:first-child{margin-top:0}
.jc-prose p{margin:0 0 18px}
.jc-prose h2{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.1;text-transform:uppercase;letter-spacing:-.01em;margin:36px 0 14px;color:#15171c}
.jc-prose h3{font-family:var(--display);font-weight:700;font-size:23px;line-height:1.15;margin:28px 0 10px;color:#15171c}
.jc-prose h4{font-family:var(--display);font-weight:700;font-size:19px;margin:22px 0 8px;color:#15171c}
.jc-prose ul,.jc-prose ol{margin:0 0 18px;padding-left:22px}
.jc-prose li{margin:0 0 8px}
.jc-prose a{color:#c25a00;text-decoration:underline;text-underline-offset:2px}
.jc-prose a:hover{color:#ff8a1e}
.jc-prose img{max-width:100%;height:auto;border-radius:12px;margin:18px 0}
.jc-prose figure{margin:18px 0}
.jc-prose strong{color:#15171c}
.jc-prose blockquote{margin:32px 0;padding:22px 26px;background:#fff;border-left:4px solid #ff8a1e;border-radius:0 12px 12px 0;font-family:var(--display);font-weight:600;font-size:22px;line-height:1.3;color:#15171c}
.jc-prose blockquote p{margin:0}
.jc-prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.jc-prose th,.jc-prose td{border:1px solid #e7e3db;padding:10px 12px;text-align:left}
.jc-prose th{background:#f5f3ef;font-weight:700}
.jc-aside{position:sticky;top:96px}
.jc-pag .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.jc-pag .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid #e7e3db;border-radius:10px;background:#fff;color:#15171c;font-weight:600;font-family:var(--mono);font-size:14px;text-decoration:none}
.jc-pag .page-numbers.current{background:#ff8a1e;border-color:#ff8a1e;color:#15171c}
.jc-pag a.page-numbers:hover{border-color:#ff8a1e}
@media (max-width:900px){
  .jc-artgrid{grid-template-columns:1fr!important}
  .jc-aside{position:static!important;order:2}
}