/* =============================================
   tramitessat.com.mx — CSS Global
   Identidad: Rojo SAT institucional + azul complementario
   Tipografía: DM Serif Display + Plus Jakarta Sans
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* --- Variables --- */
:root {
  --rojo:          #B91C1C;
  --rojo-oscuro:   #7F1D1D;
  --rojo-palido:   #FEF2F2;
  --rojo-sutil:    #FFF5F5;
  --azul:          #1E3A8A;
  --azul-palido:   #EFF6FF;
  --verde:         #065F46;
  --verde-palido:  #ECFDF5;
  --ambar:         #92400E;
  --ambar-palido:  #FEF3C7;
  --texto:         #111827;
  --texto-muted:   #4B5563;
  --borde:         #E5E7EB;
  --fondo-alt:     #F9FAFB;
  --fondo:         #FFFFFF;
  --max-w:         1200px;
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --sombra-sm: 0 1px 3px rgba(185,28,28,.07);
  --sombra-md: 0 4px 12px rgba(185,28,28,.13);
}

/* --- Reset + Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--texto); background: var(--fondo); line-height: 1.8; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; } a:hover { text-decoration: underline; }
p { margin-bottom: 1rem; }
h1, h2, h3, h4, h5, h6 { line-height: 1.3; }

/* --- Layout + Container --- */
.contenedor { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(16px,4vw,40px); }
.seccion { padding: clamp(40px,7vw,80px) 0; }
.seccion-alt { background: var(--fondo-alt); }
.seccion-roja { background: var(--rojo); color: #fff; }
.layout-art { display: grid; grid-template-columns: 1fr 290px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .layout-art { grid-template-columns: 1fr; } }

/* --- Disclaimer Bar --- */
.barra-aviso { background: var(--rojo-palido); border-bottom: 1px solid rgba(185,28,28,.2); padding: 9px 16px; font-size: .8rem; color: var(--rojo-oscuro); text-align: center; }
.barra-aviso a { color: var(--rojo); font-weight: 600; }

/* --- Header --- */
.site-header { background: var(--fondo); border-bottom: 3px solid var(--rojo); position: sticky; top: 0; z-index: 100; box-shadow: var(--sombra-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 clamp(16px,4vw,40px); max-width: var(--max-w); margin: 0 auto; }
.logo-texto { font-size: 1.1rem; font-weight: 700; color: var(--rojo); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.logo-texto span { color: var(--azul); }
.logo-texto:hover { text-decoration: none; }
.logo-img { height: 28px; width: auto; border-radius: var(--r-sm); object-fit: contain; }
.nav-principal ul { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0; }
.nav-principal a { color: var(--texto); font-size: .875rem; font-weight: 600; padding: 7px 13px; border-radius: var(--r-sm); transition: all .18s; }
.nav-principal a:hover { background: var(--rojo-palido); color: var(--rojo); text-decoration: none; }
.btn-cta-nav { background: var(--rojo) !important; color: #fff !important; border-radius: var(--r-md) !important; }
.btn-cta-nav:hover { background: var(--rojo-oscuro) !important; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--texto); margin: 5px 0; border-radius: 2px; transition: all .3s; }
.nav-toggle.activo span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.activo span:nth-child(2) { opacity: 0; }
.nav-toggle.activo span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width:767px) {
  .nav-principal { display:none; position:absolute; top:64px; left:0; right:0; background:var(--fondo); padding:16px; border-top:1px solid var(--borde); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
  .nav-principal.abierto { display:block; }
  .nav-principal ul { flex-direction:column; gap: 2px; }
  .nav-principal li { width: 100%; }
  .nav-principal a { display: block; padding: 12px 16px; border-radius: var(--r-sm); }
  .nav-toggle { display:block; }
}

/* --- Hero --- */
.hero { background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-oscuro) 100%); color: #fff; padding: clamp(40px,6vw,64px) 0; position: relative; overflow: hidden; }
.hero::before { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; background:rgba(255,255,255,.03); border-radius:50%; pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-40px; right:-50px; width:300px; height:300px; background:rgba(255,255,255,.04); border-radius:50%; pointer-events:none; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; }
.hero-texto { z-index: 2; }
.hero h1 { font-family:'DM Serif Display',serif; font-size:clamp(1.8rem,4.2vw,2.7rem); color:#fff; line-height:1.2; margin-bottom:16px; }
.hero h1 em { font-style:italic; color:#FCD34D; }
.hero-desc { font-size:clamp(.95rem,2vw,1.05rem); color:rgba(255,255,255,.88); max-width:640px; margin-bottom:32px; line-height:1.75; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
.hero-imagen { display: flex; justify-content: center; align-items: center; z-index: 2; }
.hero-imagen img { max-width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: 0 20px 40px rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); transform: perspective(1000px) rotateY(-8deg) rotateX(4deg); transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .6s ease; }
.hero-imagen img:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); box-shadow: 0 25px 50px rgba(0,0,0,.4); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 32px; }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-btns { justify-content: center; }
  .hero-imagen img { max-width: 70%; transform: none !important; }
}
@media (max-width: 520px) {
  .hero-imagen img { max-width: 95%; }
}
.btn { display:inline-flex; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.9rem; padding:12px 24px; border-radius:var(--r-md); border:none; cursor:pointer; text-decoration:none; transition:all .2s; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-blanco { background:#fff; color:var(--rojo); }
.btn-blanco:hover { background:rgba(255,255,255,.9); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.btn-outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.4); }
.btn-outline:hover { border-color:#fff; background:rgba(255,255,255,.1); }
.btn-rojo { background:var(--rojo); color:#fff; }
.btn-rojo:hover { background:var(--rojo-oscuro); box-shadow: 0 4px 16px rgba(185,28,28,.3); }

/* --- Hero interno (pilares y apoyo) --- */
.hero-interno { background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-oscuro) 100%); color: #fff; padding: clamp(32px,5vw,56px) 0; position: relative; overflow: hidden; }
.hero-interno::after { content:''; position:absolute; bottom:-30px; right:-40px; width:250px; height:250px; background:rgba(255,255,255,.04); border-radius:50%; pointer-events:none; }
.hero-interno h1 { font-family:'DM Serif Display',serif; font-size:clamp(1.5rem,3.5vw,2.3rem); color:#fff; line-height:1.25; margin-bottom:8px; }
.hero-interno h1 em { font-style:italic; color:#FCD34D; }
.hero-interno p { color:rgba(255,255,255,.85); font-size:clamp(.9rem,1.8vw,1.05rem); max-width:650px; margin:0; line-height:1.7; }

/* --- Headings del artículo --- */
.art-contenido h2 { font-family:'DM Serif Display',serif; font-size:clamp(1.3rem,2.5vw,1.7rem); color:var(--texto); margin:clamp(28px,4vw,40px) 0 16px; padding-bottom:10px; border-bottom:2px solid var(--rojo-palido); }
.art-contenido h3 { font-size:1.1rem; font-weight:700; color:var(--rojo-oscuro); margin:24px 0 10px; }
.art-contenido ul, .art-contenido ol { margin: 0 0 1rem 1.5rem; }
.art-contenido li { margin-bottom: .4rem; line-height: 1.7; }
.art-contenido strong { font-weight: 700; color: var(--texto); }

/* --- TOC (Table of Contents) --- */
.toc { background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 20px 24px; margin-bottom: 28px; }
.toc h4 { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-muted); margin-bottom: 12px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc li a { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .9rem; color: var(--texto); border-bottom: 1px solid var(--borde); transition: color .15s; }
.toc li:last-child a { border-bottom: none; }
.toc li a::before { content: counter(toc) "."; color: var(--rojo); font-weight: 700; font-size: .82rem; min-width: 20px; }
.toc li a:hover { color: var(--rojo); text-decoration: none; }

/* --- Steps HowTo --- */
.steps-lista { display:flex; flex-direction:column; gap:0; margin:24px 0; }
.step { display:flex; gap:18px; align-items:flex-start; padding:22px 0; border-bottom:1px solid var(--borde); }
.step:last-child { border-bottom:none; }
.step-num { width:40px; height:40px; min-width:40px; border-radius:50%; background:var(--rojo); color:#fff; font-size:1rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:2px; font-family:'Plus Jakarta Sans',sans-serif; }
.step-contenido h3 { font-size:1rem; font-weight:600; color:var(--rojo); margin-bottom:6px; border-bottom: none; padding: 0; }
.step-contenido p { font-size:.9rem; color:var(--texto-muted); margin:0; line-height:1.65; }
.step-nota { font-size:.82rem; background:var(--rojo-sutil); border-left:3px solid var(--rojo); padding:6px 10px; border-radius:0 var(--r-sm) var(--r-sm) 0; margin-top:8px; color:var(--rojo-oscuro); }

/* --- Alert boxes --- */
.alert { border-radius:var(--r-md); padding:14px 18px; font-size:.9rem; margin:20px 0; display:flex; gap:12px; align-items:flex-start; line-height:1.65; }
.alert-icono { font-size: 1.2rem; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.alert-rojo  { background:var(--rojo-palido); border-left:4px solid var(--rojo);  color:var(--rojo-oscuro); border-radius:0 var(--r-md) var(--r-md) 0; }
.alert-verde { background:var(--verde-palido); border-left:4px solid var(--verde); color:#064E3B; border-radius:0 var(--r-md) var(--r-md) 0; }
.alert-ambar { background:var(--ambar-palido); border-left:4px solid #D97706;     color:var(--ambar); border-radius:0 var(--r-md) var(--r-md) 0; }
.alert-azul  { background:var(--azul-palido);  border-left:4px solid var(--azul);  color:var(--azul); border-radius:0 var(--r-md) var(--r-md) 0; }

/* --- FAQ --- */
.faq-lista { display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid var(--borde); }
.faq-item:first-child { border-top:1px solid var(--borde); }
.faq-btn { width:100%; background:none; border:none; text-align:left; padding:17px 0; font-family:'Plus Jakarta Sans',sans-serif; font-size:.97rem; font-weight:600; color:var(--texto); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; line-height:1.4; }
.faq-btn::after { content:'+'; font-size:1.4rem; color:var(--rojo); font-weight:300; flex-shrink:0; transition: transform .2s; }
.faq-item.abierto .faq-btn::after { content:'−'; }
.faq-respuesta { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-respuesta-inner { padding:0 0 17px; font-size:.92rem; color:var(--texto-muted); line-height:1.8; }
.faq-item.abierto .faq-respuesta { max-height: 600px; }

/* --- Cards + Silo cards --- */
.card { background:var(--fondo); border:1px solid var(--borde); border-radius:var(--r-lg); padding:20px; box-shadow:var(--sombra-sm); transition:all .2s; display: block; text-decoration: none; color: var(--texto); }
.card:hover { box-shadow:var(--sombra-md); transform:translateY(-2px); border-color:var(--rojo); text-decoration: none; }
.card h3 { font-size: 1rem; font-weight: 700; color: var(--texto); margin-bottom: 6px; }
.card p { font-size: .88rem; color: var(--texto-muted); margin: 0; line-height: 1.6; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); gap:20px; }
.card-etiqueta { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rojo); margin-bottom: 8px; }
.card-flecha { color: var(--rojo); font-size: .85rem; margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }

.silo-card { background:var(--fondo); border:1px solid var(--borde); border-radius:var(--r-lg); padding:18px 20px; text-decoration:none; display:block; transition:all .2s; color: var(--texto); }
.silo-card:hover { border-color:var(--rojo); background:var(--rojo-palido); text-decoration:none; transform: translateY(-2px); box-shadow: var(--sombra-md); }
.silo-icono { width:44px; height:44px; border-radius:var(--r-md); background:var(--rojo-palido); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:12px; }
.silo-titulo { font-size:1rem; font-weight:700; color:var(--texto); margin-bottom:4px; }
.silo-desc { font-size:.82rem; color:var(--texto-muted); line-height:1.5; margin-bottom:8px; }
.silo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; }

/* --- Breadcrumb --- */
.breadcrumb { display:flex; gap:6px; align-items:center; font-size:.82rem; color:var(--texto-muted); margin-bottom:24px; flex-wrap:wrap; padding-top: 20px; }
.breadcrumb a { color:var(--texto-muted); } .breadcrumb a:hover { color:var(--rojo); text-decoration: none; }
.breadcrumb-sep { color:var(--borde); }

/* --- Sidebar --- */
.sticky-sidebar { position:sticky; top:80px; display:flex; flex-direction:column; gap:18px; }
.sidebar-box { background:var(--fondo-alt); border:1px solid var(--borde); border-radius:var(--r-lg); padding:18px 20px; }
.sidebar-box.roja { background:var(--rojo); border-color:transparent; }
.sidebar-box h4 { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-muted); margin-bottom:12px; }
.sidebar-box.roja h4 { color:rgba(255,255,255,.6); }
.sidebar-box.roja p { color: rgba(255,255,255,.9); font-size: .88rem; margin-bottom: 12px; }
.sidebar-links { list-style:none; padding:0; display:flex; flex-direction:column; gap:5px; }
.sidebar-links a { font-size:.875rem; color:var(--texto); display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--r-sm); transition:all .15s; }
.sidebar-links a:hover { background:var(--rojo-palido); color:var(--rojo); text-decoration:none; }
.sidebar-links a::before { content:'→'; color:var(--rojo); font-size:.8rem; }
.sidebar-box.roja .sidebar-links a { color:rgba(255,255,255,.8); }
.sidebar-box.roja .sidebar-links a:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration: none; }
.sidebar-box.roja .sidebar-links a::before { color: rgba(255,255,255,.5); }
.sidebar-box .btn { width: 100%; justify-content: center; font-size: .85rem; padding: 10px 16px; }

/* --- Destacados / Feature section --- */
.destacados-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.destacado-card { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--r-lg); overflow: hidden; transition: all .2s; text-decoration: none; color: var(--texto); display: block; }
.destacado-card:hover { box-shadow: var(--sombra-md); transform: translateY(-3px); border-color: var(--rojo); text-decoration: none; }
.destacado-body { padding: 20px; }
.destacado-body h3 { font-family: 'DM Serif Display', serif; font-size: 1.15rem; margin-bottom: 8px; color: var(--texto); }
.destacado-body p { font-size: .88rem; color: var(--texto-muted); margin: 0; line-height: 1.6; }
.destacado-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rojo); margin-bottom: 8px; display: inline-block; }

/* --- Section headings --- */
.seccion-titulo { font-family: 'DM Serif Display', serif; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--texto); margin-bottom: 8px; text-align: center; }
.seccion-titulo em { color: var(--rojo); font-style: italic; }
.seccion-subtitulo { font-size: .95rem; color: var(--texto-muted); text-align: center; max-width: 600px; margin: 0 auto 32px; line-height: 1.7; }

/* --- Info block (Cómo funciona el SAT, etc) --- */
.info-block { max-width: 800px; margin: 0 auto; }
.info-block h2 { font-family: 'DM Serif Display', serif; font-size: clamp(1.3rem, 2.5vw, 1.7rem); color: var(--texto); margin-bottom: 16px; }
.info-block p { color: var(--texto-muted); line-height: 1.8; }

/* --- CTA Section --- */
.cta-section { text-align: center; }
.cta-section h2 { font-family: 'DM Serif Display', serif; font-size: clamp(1.3rem, 3vw, 1.8rem); color: #fff; margin-bottom: 12px; }
.cta-section p { color: rgba(255,255,255,.85); margin-bottom: 24px; font-size: .95rem; }

/* --- Footer --- */
.site-footer { background:#111827; color:rgba(255,255,255,.65); padding:56px 0 32px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-col h5 { font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--rojo); margin-bottom:16px; }
.footer-col ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; }
.footer-col li a { font-size:.87rem; color:rgba(255,255,255,.65); transition:color .15s; }
.footer-col li a:hover { color:#fff; text-decoration:none; }
.footer-col p { font-size: .85rem; line-height: 1.7; margin-bottom: 12px; }
.footer-col .logo-texto { font-size: 1.2rem; margin-bottom: 12px; display: inline-block; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.8rem; color:rgba(255,255,255,.35); }
.footer-disclaimer { font-size: .78rem; color: rgba(255,255,255,.35); margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); line-height: 1.6; }

/* --- Legal pages --- */
.legal-contenido { max-width: 800px; margin: 0 auto; }
.legal-contenido h2 { font-family: 'DM Serif Display', serif; font-size: 1.4rem; color: var(--texto); margin: 32px 0 12px; }
.legal-contenido h3 { font-size: 1.1rem; font-weight: 700; color: var(--rojo-oscuro); margin: 24px 0 8px; }
.legal-contenido p { color: var(--texto-muted); line-height: 1.8; }
.legal-contenido ul { margin: 0 0 1rem 1.5rem; }
.legal-contenido li { margin-bottom: .4rem; color: var(--texto-muted); line-height: 1.7; }
.legal-fecha { font-size: .85rem; color: var(--texto-muted); margin-bottom: 24px; }

/* --- 404 page --- */
.error-404 { text-align: center; padding: clamp(60px, 10vw, 120px) 20px; }
.error-404 h1 { font-family: 'DM Serif Display', serif; font-size: clamp(3rem, 8vw, 6rem); color: var(--rojo); margin-bottom: 16px; }
.error-404 h2 { font-family: 'DM Serif Display', serif; font-size: clamp(1.2rem, 3vw, 1.6rem); color: var(--texto); margin-bottom: 12px; }
.error-404 p { color: var(--texto-muted); margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto; }

/* --- Utility classes --- */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: clamp(24px, 4vw, 40px); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* --- Print --- */
@media print {
  .barra-aviso, .site-header, .site-footer, .sticky-sidebar, .nav-toggle { display: none !important; }
  .layout-art { grid-template-columns: 1fr; }
  body { font-size: 12pt; }
}