:root{
    --guinda:#8d1831;     /* guinda base */
    --guinda-2:#611232;  /* guinda oscuro para header/footer */
    --bg:#f3f3f5;         /* gris página */
    --card:#ffffff;
    --text:#1b1b1b;
    --muted:#5c5c5c;
    --borde:#e6e6ea;
    --shadow: 0 10px 30px rgba(0,0,0,.18);
    --radius: 10px;
    --container: 750px;
  }

  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  body{
    font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
  }

  .container{
    width:min(100% - 32px, var(--container));
    margin-inline:auto;
  }

  /* ===== Hero guinda con imagen superior ===== */
  .hero{
    background:
      linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.00)),
      var(--guinda);
    position: relative;
  }
  /* imagen: héroes + escudo + texto, pegada ARRIBA */
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      url("../img/bg-gob-top.png") top center / cover no-repeat,
      radial-gradient(1200px 400px at 50% -120px, rgba(0,0,0,.06));
    opacity: 1;
    pointer-events:none;
  }
  /* Simula el corte recto inferior del hero como en la captura */
  .hero-cut{
    height: clamp(220px, 30vw, 460px);
    position: relative;
  }
  .hero-cut::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-1px;
    height: 12px; background: var(--bg);
    border-top: 1px solid rgba(0,0,0,.06);
  }

  /* ===== Tarjeta formulario ===== */
  .card{
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(0,0,0,.06);
    overflow: hidden;
    transform: translateY(-120px);/* aqui ajusto la altura de la posición de la tajeta de la tenencia */
    margin-bottom: -80px; /* compensa el translate en flujo */
  }
  .card__head{
    background: var(--guinda-2);
    color:#fff;
    font-weight:800;
    letter-spacing:.02em;
    padding: 16px 22px;
    text-align:center;
    font-size: clamp(14px, 1.5vw, 18px);
  }
  .card__body{
    padding: 22px;
  }

  label{
    display:block;
    font-weight:700;
    font-size: 13px;
    margin-bottom:8px;
    color:#3a3a3a;
  }
  .field{
    margin-bottom:14px;
  }
  input[type="text"], select{
    width:100%;
    padding: 12px 14px;
    font: inherit;
    border:1px solid var(--borde);
    border-radius:6px;
    background:#fff;
    outline:none;
  }
  input[type="text"]:focus, select:focus{
    border-color:#c7a0ac;
    box-shadow: 0 0 0 3px rgba(141,24,49,.12);
  }

  .actions{
    display:flex; gap:12px; justify-content:flex-end; margin-top:10px;
  }
  .btn{
    border-radius:6px; padding: 10px 18px; font-weight:700; cursor:pointer;
    border:1px solid var(--borde); background:#fff;
  }
  .btn--primary{
    background:#fff; color: var(--guinda-2);
    border-color:#caa8b2;
  }
  .btn--primary:hover{ filter:brightness(.96); }
  .btn:hover{ filter:brightness(.98); }

  /* ===== Condiciones ===== */
  .condiciones{
    background:#ffffff;
    border:1px solid var(--borde);
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    border-radius:10px;
    padding: 20px 22px;
    margin: 5px auto 56px;
  }
  .condiciones h3{
    margin:0 0 10px; font-size:16px;
  }
  .condiciones ol{
    margin:10px 0 0 18px; color:#333;
  }
  .condiciones li{ margin: 6px 0; line-height:1.45; }

  /* ===== Footer estilo gob.mx ===== */
:root{
  --footer:#5f0f25;
  --footer-2:#4f0c20;
  
}

.gob-footer{
  background: linear-gradient(0deg, var(--footer), var(--footer-2) 60%, var(--footer));
  color:#fff;
  padding: 36px 16px 48px;
   --footer-container: 1280px; 
}

.gob-footer__container{
  width: min(100% - 32px, var(--footer-container));
  margin-inline: auto;
}

/* Marca: reemplaza el círculo por imagen del escudo+texto */
.gob-footer__brand{ display:flex; align-items:center; margin-bottom:22px; }
.gob-footer__brand-img{
  height: 60px;            /* alto del logo blanco */
  width: auto;
  display:block;
  opacity:.98;
}


/* Columnas */
.gob-footer__cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gob-footer__col{ min-width:0; }
.gob-footer__col--right{ display:flex; flex-direction:column; gap:14px; }

.gob-footer__title{ margin:0 0 10px; font-size:1rem; font-weight:800; }
.gob-footer__subtitle{ margin:0 0 8px; font-weight:500; }

.gob-footer__list{ list-style:none; padding:0; margin:0; }
.gob-footer__list li{ margin: 8px 0; line-height:1.45; color:#e7dbe0;font-size:0.9rem; }
.gob-footer__list a{ color:#fff; text-decoration:none; border-bottom:1px solid transparent; }
.gob-footer__list a:hover{ border-bottom-color: rgba(255,255,255,.6); }

/* Denuncia */
.gob-footer__report{ margin:0 0 6px; }
.gob-footer__report-link{
  color:#fff; font-weight:800; text-decoration: underline; text-underline-offset:3px;
}
/* Logo + lista en línea */
.gob-footer__col--brand{
  display: flex;
  align-items: flex-start;
  gap: 50px;
}
/* Redes sociales con PNGs provistos */
.gob-footer__icons{
  display:flex; gap:14px; align-items:center; list-style:none; padding:0; margin:6px 0 0;
}
.gob-footer__icons img{
  width:28px; height:28px; display:block; object-fit:contain;
  /* elimina filtros si tus PNG ya vienen blancos */
  filter: none;
}
.gob-footer__icons a:hover img{ opacity:.85; }

/* Caja 079 como imagen dentro de contenedor tipo tarjeta */
.gob-footer__hotline-box{
  display:inline-block;
  
  
  padding: 6px 10px;     /* un poco más compacta */
  cursor: default;       /* ya no es clickeable */
}

.gob-footer__hotline-box img{
  display:block;
  height: 46px;        /* ajusta al alto real de tu PNG */
  width: auto;
}
.gob-footer__hotline-box:hover{
  background: rgba(255,255,255,.06); /* sin efecto hover */
}

/* Responsive */
@media (max-width: 900px){
  .gob-footer__cols{ grid-template-columns: 1fr; }
}