:root {
  --org-primary: #8e9173;
  --org-primary-dark: #676a50;
  --org-green: #2e3a2b;
  --org-gold: #b17a45;
  --org-bg: #f5f3ed;
  --org-soft: #e6e1d6;
  --org-text: #2f3329;
  --org-muted: #6c757d;
  --org-white: #ffffff;
  --org-shadow: 0 14px 35px rgba(46, 58, 43, 0.14);
  --org-shadow-hover: 0 20px 45px rgba(46, 58, 43, 0.22);
  --org-radius: 22px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--org-bg);
  color: var(--org-text);
}

.org-page {
  width: 100%;
  background:
    radial-gradient(circle at top left, rgba(177, 122, 69, 0.14), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, var(--org-bg) 48%, #ffffff 100%);
  overflow: hidden;
}

.org-hero {
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 70px 20px 95px;
  background:
    linear-gradient(120deg, rgba(46, 58, 43, 0.88), rgba(142, 145, 115, 0.70)),
    url('/Pantepec_2024_2027/img/cintillo-1.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.org-hero::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -70px;
  height: 140px;
  background: var(--org-bg);
  transform: rotate(-3deg);
}

.org-hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  color: white;
}

.org-kicker,
.org-heading span,
.org-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.org-kicker {
  padding: 8px 16px;
  background: rgba(177, 122, 69, 0.95);
  font-size: 12px;
  text-transform: uppercase;
}

.org-hero h1 {
  margin: 18px 0 14px;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 900;
  line-height: 1.05;
  text-shadow: 0 4px 18px rgba(0,0,0,0.35);
}

.org-hero p {
  max-width: 760px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
}

.org-section {
  width: 92%;
  max-width: 1280px;
  margin: -38px auto 64px;
  position: relative;
  z-index: 3;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(230,225,214,0.95);
  border-radius: var(--org-radius);
  box-shadow: var(--org-shadow);
  padding: 34px;
  overflow: hidden;
}

.org-section + .org-section {
  margin-top: 0;
}

.org-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--org-primary), var(--org-gold), var(--org-green));
}

.org-heading {
  text-align: center;
  margin-bottom: 34px;
}

.org-heading span {
  padding: 8px 15px;
  background: rgba(142,145,115,0.14);
  color: var(--org-primary-dark);
  font-size: 12px;
  text-transform: uppercase;
}

.org-heading h2 {
  margin: 14px 0 6px;
  color: var(--org-green);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
}

.org-heading p {
  margin: 0;
  color: var(--org-muted);
  font-weight: 700;
}

.org-chart {
  position: relative;
}

.org-level {
  display: grid;
  gap: 18px;
  justify-content: center;
  position: relative;
}

.level-top,
.level-presidencia {
  grid-template-columns: minmax(260px, 430px);
}

.level-regidores {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin: 8px 0;
}

.level-directores {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.level-dif-coords {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.org-card {
  background: linear-gradient(180deg, #ffffff, #fbfaf6);
  border: 1px solid #e7e1d5;
  border-radius: 18px;
  padding: 18px 16px;
  min-height: 118px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(46, 58, 43, 0.08);
  transition: 0.28s ease;
  position: relative;
  overflow: hidden;
}

.org-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--org-primary);
}

.org-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--org-shadow-hover);
}

.org-card span,
.org-card .org-role {
  display: block;
  color: var(--org-primary-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 10px;
}

.org-card h3 {
  margin: 0;
  color: var(--org-green);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.org-card p {
  margin: 8px 0 0;
  color: var(--org-muted);
  font-size: 13px;
  font-weight: 700;
}

.org-card-main {
  background: linear-gradient(135deg, var(--org-green), var(--org-primary-dark));
  color: white;
  min-height: 145px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.org-card-main::before {
  background: var(--org-gold);
}

.org-card-main span,
.org-card-main h3,
.org-card-main p {
  color: white;
}

.org-card-president {
  background: linear-gradient(135deg, var(--org-primary), var(--org-green));
  color: white;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.org-card-president::before {
  background: var(--org-gold);
}

.org-card-president span,
.org-card-president h3 {
  color: white;
}

.org-card-cabildo {
  border-color: rgba(177,122,69,0.35);
}

.org-card-cabildo::before {
  background: var(--org-gold);
}

.connector.vertical {
  width: 3px;
  height: 34px;
  background: linear-gradient(180deg, var(--org-primary), var(--org-gold));
  margin: 10px auto;
  border-radius: 999px;
}

.org-subtitle {
  margin: 6px auto 20px;
  padding: 10px 18px;
  background: rgba(177,122,69,0.13);
  color: var(--org-green);
  font-size: 13px;
  text-transform: uppercase;
  justify-content: center;
  width: fit-content;
}

.dif-section {
  margin-bottom: 50px;
}

@media (max-width: 900px) {
  .org-section { padding: 26px 18px; width: 94%; }
  .level-regidores,
  .level-directores,
  .level-dif-coords { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .org-hero { min-height: 300px; padding: 50px 18px 80px; }
  .org-hero p { font-size: 15px; }
  .level-regidores,
  .level-directores,
  .level-dif-coords,
  .level-top,
  .level-presidencia { grid-template-columns: 1fr; }
  .org-card { min-height: auto; }
}
/* ATENCIÓN CIUDADANA */
.citizen-help-section{
    margin-top:60px;
    background:linear-gradient(135deg,var(--org-green),#43534b);
    padding:60px 7%;
    color:white;
}

.citizen-help-container{
    max-width:1280px;
    margin:0 auto;
}

.citizen-help-section h2{
    text-align:center;
    font-size:clamp(30px,4vw,46px);
    margin:0 0 45px;
    font-weight:900;
    color:white;
}

.citizen-help-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
}

.citizen-help-card{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:22px 18px;
    border-radius:22px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    transition:.35s ease;
    backdrop-filter:blur(4px);
}

.citizen-help-card:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.10);
}

.citizen-help-icon{
    min-width:58px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:white;
    color:var(--org-gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    box-shadow:0 8px 18px rgba(0,0,0,.16);
}

.citizen-help-content h3{
    margin:0 0 8px;
    color:white;
    font-size:20px;
    font-weight:900;
}

.citizen-help-content p{
    margin:0 0 14px;
    color:rgba(255,255,255,.82);
    font-size:13px;
    line-height:1.6;
}

.citizen-help-content a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#f5d0a1;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
    transition:.3s ease;
}

.citizen-help-content a:hover{
    color:white;
    transform:translateX(4px);
}

@media(max-width:1050px){
    .citizen-help-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:720px){
    .citizen-help-grid{
        grid-template-columns:1fr;
    }

    .citizen-help-section{
        padding:50px 22px;
    }

    .citizen-help-card{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }
}
@media(max-width:720px){
    .gabinete-hero{
        min-height:330px;
        padding:55px 18px;
    }

    .presidenta-card{
        grid-template-columns:1fr;
        padding:22px;
    }

    .presidenta-photo{
        height:340px;
    }

    .gabinete-section{
        padding:26px 18px;
    }

    .gabinete-grid{
        grid-template-columns:1fr;
    }

    .gabinete-photo{
        height:320px;
    }

    .gabinete-page .modern-footer{
        padding:28px 22px;
    }

    .gabinete-page .footer-links{
        grid-template-columns:1fr;
    }
   .footer-menu{
    grid-template-columns:1fr;
    text-align:center;
}

.gabinete-page .pantepec-footer{
    padding:38px 24px 30px;
}
}


/* FOOTER PANTEPEC */
.pantepec-footer{
    width:100%;
    margin:60px auto 0;
    background:#eee9dd;
    color:var(--org-green);
    padding:46px 8% 34px;
    text-align:center;
}

.footer-logo-area img{
    max-width:250px;
    width:100%;
    height:auto;
    margin:0 auto 14px;
    display:block;
    filter:drop-shadow(0 7px 16px rgba(0,0,0,.14));
}

.footer-social{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:10px;
}

.footer-social a{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--org-green);
    color:white;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    transition:.3s ease;
}

.footer-social a:hover{
    background:var(--org-gold);
    transform:translateY(-3px);
    color:white;
}

.footer-divider{
    max-width:860px;
    height:1px;
    background:#c9c1aa;
    margin:26px auto;
    position:relative;
}

.footer-divider span{
    width:14px;
    height:14px;
    background:#c9c1aa;
    display:block;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(45deg);
}

.footer-menu{
    max-width:860px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
    text-align:left;
}

.footer-menu h4{
    color:var(--org-green);
    font-size:14px;
    font-weight:900;
    margin:0 0 14px;
}

.footer-menu a{
    display:block;
    color:#3f4a3b;
    font-size:13px;
    margin-bottom:8px;
    text-decoration:none;
    transition:.3s ease;
}

.footer-menu a:hover{
    color:var(--org-gold);
    transform:translateX(4px);
}

.footer-address{
    max-width:860px;
    margin:28px auto 0;
    padding-top:22px;
    border-top:1px solid #c9c1aa;
    font-size:13px;
    line-height:1.7;
}

.footer-address strong{
    color:var(--org-green);
    font-weight:900;
}

.footer-address p{
    margin:3px 0;
}

.footer-strip{
    width:100%;
    background:var(--org-primary);
    color:white;
    text-align:center;
    font-size:12px;
    font-weight:700;
    padding:12px 20px;
}

@media(max-width:720px){
    .footer-menu{
        grid-template-columns:1fr;
        text-align:center;
    }

    .pantepec-footer{
        padding:38px 24px 30px;
    }
}