/* =========================================
ROOT
========================================= */

:root{

    --vino:#691b32;
    --vino2:#8f2948;

    --dorado:#bc955b;
    --dorado2:#be9f71;

    --white:#ffffff;

    --bg:#f3f6fb;

    --text:#1e293b;

    --muted:#64748b;

    --border:#e2e8f0;

    --shadow:
        0 10px 30px rgba(15,23,42,.08);

    --radius:28px;

    --header-height: 90px;
}

/* =========================================
RESET
========================================= */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:
    linear-gradient(
        180deg,
        #f8fafc 0%,
        #eef3f9 100%
    );

    color:var(--text);

    overflow-x:hidden;
}

/* =========================================
BACKGROUND EFFECTS
========================================= */

.bg-circle{

    position:fixed;

    border-radius:50%;

    filter:blur(100px);

    opacity:.18;

    z-index:-1;
}

.bg1{

    width:350px;
    height:350px;

    background:var(--vino);

    top:-120px;
    right:-120px;
}

.bg2{

    width:280px;
    height:280px;

    background:var(--dorado);

    bottom:-100px;
    left:-100px;
}

/* =========================================
HEADER
========================================= */

header{

    position:fixed;

    width:100%;

    top:0;

    z-index:999;

    backdrop-filter:blur(18px);

    background:rgba(255,255,255,.72);

    border-bottom:1px solid rgba(255,255,255,.3);

    box-shadow:
      0 4px 20px rgba(0,0,0,.04);
}

.navbar{

    width:min(1250px,92%);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 0;
}

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    font-weight:700;

    font-size:1.1rem;

    color:var(--vino);
}

.logo-ayuntamiento{

    max-width:180px;

    width:auto;

    object-fit:contain;

    flex-shrink:0;
}

.logo-icon{

    width:48px;
    height:48px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        var(--vino),
        var(--vino2)
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:1.2rem;

    box-shadow:
      0 10px 25px rgba(105,27,50,.25);
}

.nav-links{

    display:flex;
    gap:30px;
    align-items:center;
}

.nav-links a{

    position:relative;

    text-decoration:none;

    color:#691b32;

    font-weight:600;

    padding:12px 0;

    transition:all .25s ease;
}

/* Hover */
.nav-links a:hover{

    color:var(--dorado);
}

/* Línea inferior */
.nav-links a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:3px;

    background:var(--dorado);

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .25s ease;
}

/* Mostrar línea al hover */
.nav-links a:hover::after{

    transform:scaleX(1);
}

/* =========================================
HERO
========================================= */

.hero{

    position:relative;

    width:min(1250px,92%);

    margin:auto;

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:50px;

    overflow:visible;
}

.hero-watermark{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    pointer-events:none;

    z-index:0;
}

.hero-watermark img{
    max-width:100%;
    opacity:.04;
}

body.dark-theme .hero-watermark img{
    max-width:100%;
    opacity:.04;
    filter:
        brightness(0)
        invert(1)
        contrast(1.1);
}

.hero-left h1{

    font-size:3rem;

    line-height:1.1;

    margin-bottom:24px;

    font-weight:800;
}

.hero-left h1 span{

    color:var(--vino);
}

.hero-left p{

    font-size:1.1rem;

    color:var(--muted);

    margin-bottom:35px;

    max-width:600px;
}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

.btn-primary{

    background:
    linear-gradient(
        135deg,
        var(--vino),
        var(--vino2)
    );

    color:white;

    padding:16px 28px;

    border-radius:18px;

    text-decoration:none;

    font-weight:600;

    display:inline-flex;

    align-items:center;

    gap:10px;

    transition:.3s ease;

    box-shadow:
      0 15px 30px rgba(105,27,50,.25);
}

.btn-primary:hover{

    transform:
      translateY(-3px);
}

.btn-secondary{

    background:white;

    color:var(--text);

    padding:16px 28px;

    border-radius:18px;

    text-decoration:none;

    font-weight:600;

    border:1px solid var(--border);

    transition:.25s ease;
}

.btn-secondary:hover{

    border-color:var(--vino);
}

/* =========================================
HERO CARD
========================================= */

.hero-card{

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.4);

    border-radius:36px;

    padding:34px;

    box-shadow:
      0 20px 60px rgba(15,23,42,.08);

    position:relative;
    z-index:100;
}

.hero-card::before{

    content:'';

    position:absolute;

    inset:0;

    border-radius:36px;

    padding:1px;

    background:
    linear-gradient(
        135deg,
        rgba(188,149,91,.5),
        rgba(105,27,50,.2)
    );

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;
}

.card-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:30px;
}

.card-title-icon{

    width:50px;
    height:50px;

    border-radius:16px;

    background:
    linear-gradient(
        135deg,
        var(--vino),
        var(--vino2)
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;
}

/* =========================================
FORM
========================================= */

.form-group{

    margin-bottom:22px;
}

.form-group label{

    display:block;

    margin-bottom:10px;

    font-size:.95rem;

    font-weight:600;
}

input,
select,
textarea{

    width:100%;

    border:none;

    background:#f8fafc;

    border:1px solid transparent;

    padding:18px;

    border-radius:18px;

    font-size:15px;

    font-family:'Poppins',sans-serif;

    transition:.25s ease;

    outline:none;
}

textarea{

    min-height:130px;

    resize:none;
}

input:focus,
select:focus,
textarea:focus{

    background:white;

    border-color:var(--dorado);

    box-shadow:
      0 0 0 5px rgba(188,149,91,.15);
}

/* =========================================
SECTION
========================================= */

.section{

    width:min(1250px,92%);

    margin:80px auto;
}

.section-title{

    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:2.5rem;
    margin-bottom:16px;
}

body.dark-theme .section-title h2{
  color:#ffffff;
}

.section-title p{

    color:var(--muted);
}

.section-title-2{

    text-align:center;
    margin-bottom:50px;
}

.section-title-2 h2{
  font-size:2.5rem;
  margin-bottom:16px;
}

.section-title-2 p {
    text-align: justify;
    text-justify: inter-word;
    margin: 20px 0px 20px 0px;
    line-height: 1.6;
    color:var(--muted);
}

#mnsg {
    text-align: justify;
    text-justify: inter-word;
    margin: 20px 0px 20px 0px;
    line-height: 1.6;
    color:var(--dorado);
}

/* =========================================
MODULES
========================================= */

.modules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* tablets */
@media (max-width: 768px) {
    .modules {
        grid-template-columns: 1fr;
    }
}

/* móviles pequeños (opcional refuerzo) */
@media (max-width: 480px) {
    .modules {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

.module{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    height:auto; /* rectángulo horizontal */

    cursor:pointer;

    transition:.35s ease;

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);
}

.module:hover{

    transform:translateY(-6px);
}

.module img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s ease;
}

.module:hover img{

    transform:scale(1.05);
}

.module-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(181, 148, 90,.05),
        rgba(0, 0, 0,.5)
    );

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:32px;

    color:white;
}

.module-overlay h3{

    font-size:1.7rem;

    margin-bottom:10px;
}

.module-overlay p{

    color:rgba(255,255,255,.85);
}
/* =========================================
BUTTON
========================================= */

.submit-btn{

    width:100%;

    border:none;

    background:
    linear-gradient(
        135deg,
        var(--vino),
        var(--vino2)
    );

    color:white;

    padding:18px;

    border-radius:18px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s ease;

    box-shadow:
      0 15px 30px rgba(105,27,50,.22);
}

.submit-btn:hover{

    transform:
      translateY(-3px);
}

/* =========================================
FOOTER
========================================= */

.footer-modern{

    margin-top:120px;

    background:
    linear-gradient(
        135deg,
        #4d1024,
        #691b32,
        #8f2948
    );

    color:white;

    padding:70px 20px 40px;

    position:relative;

    overflow:hidden;
}

.footer-modern::before{

    content:'';

    position:absolute;

    width:320px;
    height:320px;

    background:rgba(255,255,255,.04);

    border-radius:50%;

    top:-120px;
    right:-120px;
}

.footer-content{

    width:min(1200px,92%);

    margin:auto;

    position:relative;

    z-index:2;
}

.footer-brand{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:35px;
}

.footer-logo{

    width:65px;
    height:65px;

    border-radius:22px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.5rem;
}

.footer-brand h3{

    margin-bottom:5px;
}

.footer-brand p{

    color:rgba(255,255,255,.75);
}

.footer-links{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

    margin-bottom:35px;
}

.footer-links a{

    color:rgba(255,255,255,.88);

    text-decoration:none;

    transition:.25s ease;
}

.footer-links a:hover{

    color:white;
}

.footer-copy{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    border-top:1px solid rgba(255,255,255,.12);

    padding-top:25px;

    color:rgba(255,255,255,.7);

    flex-wrap:wrap;

}

.footer-designed{
    color:#fff;
}

.footer-author{
    color:rgba(188,149,91,.2);
    font-weight:600;
}

.footer-author:hover{
    color:rgba(188,149,91,.5);
    font-weight:600;
}

/* =========================================
RESPONSIVE FOOTER
========================================= */

@media(max-width:600px){

    .footer-brand{

        flex-direction:column;

        align-items:flex-start;
    }

}

/* =========================================
ANIMATION
========================================= */

.fade-up{

    animation:fadeUp .7s ease;
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:980px){

    .hero{
        min-height:100vh;
        min-height:100dvh;

        display:flex;
        flex-direction:column;

        justify-content:flex-start;

        align-items:center;

        padding-top:calc(var(--header-height, 90px) + 20px);
        padding-bottom:40px;
    }

    .hero-left{

        width:100%;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        text-align:center;

        flex:1 0 auto;
    }

    .hero-left p{

        max-width:500px;

        margin:20px auto 35px;
    }

    .hero-buttons{

        justify-content:center;
    }

    .hero-form{
        width:100%;
        max-width:100%;
        padding:0 16px;
        position: relative;
        z-index: 100;
    }

    .hero-card{
        width:100%;
        max-width:none;
        margin:0;
        position: relative;
        z-index: 100;
    }
}

@media(max-width:980px){

    .hero-left{
        position:relative;
        overflow:visible;
        padding-top:0px;
    }

    .hero-watermark{

        position:absolute;
        top:-520px;
        left:50%;
        transform:translateX(-50%);
        width:auto;
        height:auto;
        display:flex;
        justify-content:center;
        align-items:center;
        z-index:0 !important;
    }

    .hero-watermark img{
        width:300px !important;
        max-width:none;
        display:block;
        opacity: .2 !important;
    }

    .hero-left > *:not(.hero-watermark){
        position:relative;
        z-index:2;
    }

}

@media(max-width:600px){

    .hero-left h1{

        font-size:2.2rem;
    }

    .section-title h2{

        font-size:2rem;
    }

    .hero-card{

        padding:24px;
    }
}

/* =========================================
TYPEWRITER HERO
========================================= */

.typewriter-color{

    position:relative;

    display:block;

    max-width:620px;

    font-size:5rem;

    line-height:.95;

    font-weight:800;

    letter-spacing:-3px;

    margin-bottom:34px;

    overflow:hidden;

    border-right:4px solid #bc955b;

    padding-right:10px;

    animation:
    blinkCursor .8s infinite;
}

/* LETRAS */

.typewriter-color span{

    display:inline-block;

    opacity:0;

    animation:
    revealLetter .08s forwards,
    colorShift 3s ease-in-out infinite;

    animation-delay:
    calc(var(--i) * 0.05s);
}

/* ANIMACION ENTRADA */

@keyframes revealLetter{

    from{

        opacity:0;

        transform:
        translateY(20px);

        filter:blur(6px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);

        filter:blur(0);
    }
}

/* COLOR */

@keyframes colorShift{

    0%{

        color:#691b32;
    }

    45%{

        color:#bc955b;
    }

    100%{

        color:#691b32;
    }
}

/* CURSOR */

@keyframes blinkCursor{

    50%{

        border-color:transparent;
    }
}

/* RESPONSIVE */

@media(max-width:1200px){

    .typewriter-color{

        font-size:4rem;
    }
}

@media(max-width:980px){

    .typewriter-color{

        font-size:3.2rem;

        max-width:100%;

        text-align:center;

        margin:auto auto 30px;

        line-height:1;
    }

    .hero-left{

        align-items:center;
    }
}

@media(max-width:600px){

    .typewriter-color{

        font-size:2.3rem !important;

        letter-spacing:-1px;

        border-right:2px solid #bc955b;
    }
}

@media (max-width: 393px) and (max-width: 450px) {

  .typewriter-color{

      font-size:2rem !important;

      letter-spacing:-1px;

      border-right:2px solid #bc955b;
  }

  .hero-watermark{

      position:absolute;
      top:-525px;
      left:50%;
      transform:translateX(-50%);
      width:auto;
      height:auto;
      display:flex;
      justify-content:center;
      align-items:center;
      z-index:0 !important;
  }

  .hero-watermark img{
      width:250px !important;
      max-width:none;
      display:block;
      opacity: .2 !important;
  }

  .hero-left > *:not(.hero-watermark){
      position:relative;
      z-index:2;
  }
}

/* ===========================
MENU HAMBURGUESA
=========================== */

.menu-toggle{

    display:none;

    font-size:1.5rem;

    color:var(--vino);

    cursor:pointer;

    position:relative;

    z-index:1100;
}

/* ===========================
RESPONSIVE NAVBAR
=========================== */

@media(max-width:900px){

    .menu-toggle{

        display:block;

        cursor:pointer;

        font-size:1.8rem;

        z-index:1001;
    }

    /* Cuando el menú está abierto */
    .nav-links.active ~ .menu-toggle{
        color: #fff;
    }

    .nav-links{

        position:fixed;

        top:0;
        left:0;

        width:100vw;
        height:100vh;

        background:
        linear-gradient(
            135deg,
            var(--vino),
            var(--vino2)
        );

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:30px;

        transform:translateX(100%);

        transition:transform .4s ease;

        z-index:1000;
    }

    .nav-links.active{

        transform:translateX(0);
    }

    .nav-links a{

        color:white;

        font-size:1.4rem;

        font-weight:600;

        padding:15px 20px;
    }

    .nav-links a i{

        margin-right:10px;
    }

    .nav-links a::after{

        background:var(--dorado);
    }
}

#datosContacto{

    overflow:hidden;

    transition:.3s ease;
}

.checkbox-container{

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    gap:15px;

    cursor:pointer;

    padding:15px 18px;

    border-radius:18px;

    background:#fff;

    border:1px solid #e2e8f0;

    transition:.3s ease;
}

.checkbox-container:hover{

    border-color:var(--vino);

    box-shadow:
        0 8px 20px rgba(105,27,50,.08);
}

/* ocultar checkbox real */

.checkbox-container input{

    display:none;
}

/* cuadro */

.custom-check{

    width:36px;

    height:36px;

    min-width:36px;

    flex-shrink:0;

    border:2px solid var(--vino);

    border-radius:12px;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s ease;
}

/* icono */

.custom-check i{

    font-size:16px;

    color:#fff;

    opacity:0;

    transform:scale(.4);

    transition:.25s ease;
}

/* seleccionado */

.checkbox-container input:checked + .custom-check{

    background:
        linear-gradient(
            135deg,
            var(--vino),
            var(--vino2)
        );

    border-color:transparent;

    box-shadow:
        0 8px 20px rgba(105,27,50,.25);
}

.checkbox-container input:checked + .custom-check i{

    opacity:1;

    transform:scale(1);
}

/* texto */

.check-text{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    height:36px;

    margin:0;

    padding:0;

    font-weight:600;

    color:var(--text);

    line-height:1;

    flex:1;
}


.checkbox-container input:checked + .custom-check{

    background:
        linear-gradient(
            135deg,
            var(--vino),
            var(--vino2)
        );

    border-color:transparent;

    box-shadow:
        0 8px 20px rgba(201,161,95,.25);
}

 .checkbox-container input:checked + .custom-check{

    background:
        linear-gradient(
            135deg,
            var(--dorado),
            #d8b06c
        );

    border-color:transparent;

    box-shadow:
        0 8px 20px rgba(201,161,95,.25);

}


.reset-form-btn{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            var(--vino),
            var(--vino2)
        );

    color:#fff;

    overflow:hidden;

    cursor:pointer;

    transition:.35s ease;
}

.reset-form-btn:hover{

    width:240px;

    justify-content:flex-start;

    padding-left:18px;
}

/* ambos iconos */

.reset-form-btn i{

    position:absolute;

    transition:.3s ease;
}

/* lápiz visible por defecto */

.icon-default{

    opacity:1;

    transform:scale(1);
}

/* flecha oculta */

.icon-hover{

    opacity:0;

    transform:scale(.5) rotate(-180deg);
}

/* al hover */

.reset-form-btn:hover .icon-default{

    opacity:0;

    transform:scale(.5);
}

.reset-form-btn:hover .icon-hover{

    opacity:1;

    transform:scale(1) rotate(0deg);
}

/* texto */

.tooltip-text{

    position:absolute;

    left:55px;

    white-space:nowrap;

    opacity:0;

    transition:.3s ease;
}

.reset-form-btn:hover .tooltip-text{

    opacity:1;
}

/* =========================
        ALERT BOX
========================== */

.alert-box{

    display:flex;
    align-items:center;
    gap:10px;

    width:max-content;
    max-width:400px;

    margin:auto;
    padding:14px 18px;

    border-radius:14px;

    background:#bc955b;
    color:#ffffff;

    font-family:Arial, sans-serif;
    font-size:14px;
    line-height:1.4;

    box-shadow:0 8px 20px rgba(0,0,0,.25);

    opacity:0;
    transform:translateY(-15px);

    transition:all .35s ease;

    z-index:9999;
    pointer-events:none;

    position:relative;
}

/* ICONO */
.alert-box i{

    font-size:22px;
    flex-shrink:0;
}

/* PIQUITO TIPO GLOBO */
.alert-box::after{

    content:'';

    position:absolute;

    bottom:-10px;
    left:25px;

    width:0;
    height:0;

    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid #bc955b;
}

/* MOSTRAR */
.alert-box.show{

    opacity:1;
    transform:translateY(0);
}

/* TIPOS */
.alert-box.success{
    background:#16a34a;
}

.alert-box.success::after{
    border-top-color:#16a34a;
}

.alert-box.error{
    background:#dc2626;
}

.alert-box.error::after{
    border-top-color:#dc2626;
}

.alert-box.warning{
    background:#d97706;
}

.alert-box.warning::after{
    border-top-color:#d97706;
}

.alert-box.info{
    background:#2563eb;
}

.alert-box.info::after{
    border-top-color:#2563eb;
}


.tabla-planeacion {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
}

.tabla-planeacion th {
    background: #691b32;
    color: white;
    padding: 14px;
    text-align: left;
}

.tabla-planeacion .checkbox-container{
    width:auto;
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
    justify-content: center;
    align-items: center;
}

/* filas */
.row-selectable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.row-selectable td {
    padding: 14px;
    border-bottom: 1px solid #e6e6e6;
    vertical-align: middle;
}

.row-selectable-th {
    text-align: center !important;
}

/* hover */
.row-selectable:hover {
    background: rgba(105, 27, 50, 0.1);
}

/* texto activo */
.row-selectable:has(input:checked) {
    background: rgba(187, 149, 91, 0.05);
}

.row-selectable:has(input:checked) .text-cell {
    font-weight: 600;
    color: #691b32;
}

/* =========================================
DARK THEME (OVERRIDES ONLY)
========================================= */

body.dark-theme{

    --bg:#0f0f10;
    --card:#181818;
    --input:#1e1e1f;

    --text:#e5e5e5;
    --muted:#a1a1aa;

    --border:#2a2a2d;

    --shadow:0 15px 40px rgba(0,0,0,.45);

    background:
        linear-gradient(
            180deg,
            #0f0f10 0%,
            #131313 100%
        );

    color:var(--text);

}

/* =========================================
BODY
========================================= */

body.dark-theme{

    background-color:#0f0f10;

}

body.dark-theme p,
body.dark-theme span,
body.dark-theme li{

    color:var(--text);

}

/* =========================================
NAVBAR
========================================= */

body.dark-theme header{

    background:var(--vino);

}

body.dark-theme .nav-links a{

    color:#ffffff;

}

body.dark-theme .nav-links a:hover{

    color:var(--dorado);

}

body.dark-theme .logo span{

    color:#ffffff;

}

/* =========================================
HEADER
========================================= */

body.dark-theme header{

    background:#0f0f10;

    border-bottom:1px solid var(--border);

}

/* =========================================
HERO
========================================= */

body.dark-theme .hero{

    background:#0f0f10;

}

body.dark-theme .hero-card{

    background:
        linear-gradient(
            135deg,
            #181818,
            #1d1d1f
        );

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

/* =========================================
TEXT
========================================= */

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6{

    color:var(--dorado);

}

body.dark-theme .hero-card p,
body.dark-theme .section-subtitle{

    color:var(--muted);

}

/* =========================================
FORMS
========================================= */

body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea{

    background:var(--input);

    border:1px solid var(--border);

    color:var(--text);

}

body.dark-theme input:focus,
body.dark-theme select:focus,
body.dark-theme textarea:focus{

    border-color:var(--dorado);

    box-shadow:
        0 0 0 3px rgba(201,161,95,.15);

}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder{

    color:#8d8d92;

}

/* =========================================
LABELS
========================================= */

body.dark-theme label,
body.dark-theme .form-label{

    color:#f0f0f0;

}


/* =========================================
DARK THEME - CHECKBOXES
========================================= */

body.dark-theme .checkbox-anonima{
    border:1px solid #2a2a2d !important;
}

body.dark-theme .checkbox-container{
    background:rgb(29, 29, 31, 0.01);
    border:0px solid #2a2a2d;
    color:#e5e5e5;
}

body.dark-theme .checkbox-container input{

    display:none;

}

body.dark-theme .checkbox-container:hover{
    border-color:var(--dorado);
    box-shadow:
        0 8px 20px rgba(201,161,95,.12);
}

body.dark-theme .custom-check{
    background:#232326;
    border:2px solid #4a4a4f;
    box-shadow:none;
}

body.dark-theme .checkbox-container:hover .custom-check{

    border-color:var(--dorado);

}

/* seleccionado */

body.dark-theme .checkbox-container:has(input:checked){

    background:
        linear-gradient(
            135deg,
            rgba(201,161,95,.01),
            rgba(201,161,95,.01)
        );

    border-color:var(--dorado);

}

body.dark-theme .checkbox-container input:checked + .custom-check{
    background:var(--dorado);
    border-color:var(--dorado);
    box-shadow:none;
}

body.dark-theme .checkbox-container input:checked + .custom-check i{
    color:#fff;
    opacity:1;
}

/* texto seleccionado */

body.dark-theme .row-selectable:has(input:checked) .text-cell,
body.dark-theme .checkbox-container:has(input:checked) .check-text{
    color:#ffffff;
    font-weight:600;
}

/* =========================================
TABLES
========================================= */

body.dark-theme .tabla-planeacion{

    background:#181818;

}

body.dark-theme .tabla-planeacion th{

    background:#202022;

    color:var(--dorado);

}

body.dark-theme .tabla-planeacion td{

    color:var(--text);

}

body.dark-theme .row-selectable td{

    border-bottom:1px solid var(--border);

}

body.dark-theme .row-selectable:hover{

    background:rgba(201,161,95,.05);

}

body.dark-theme .row-selectable:has(input:checked){

    background:rgba(201,161,95,.12);

}

/* =========================================
MODULES
========================================= */

body.dark-theme .module{

    background:#181818;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

body.dark-theme .module-overlay{

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85),
            rgba(0,0,0,.15)
        );

}

/* =========================================
STEPPER / WIZARD
========================================= */

body.dark-theme .step{

    background:#1d1d1f;

    border:2px solid #6b7280;

    color:#9ca3af;

}

body.dark-theme .step.active{

    border-color:var(--dorado);

    color:var(--dorado);

}

body.dark-theme .step.completed{

    border-color:var(--dorado);

    background:rgba(201,161,95,.12);

    color:var(--dorado);

}

body.dark-theme .step-line{

    background:#3f3f46;

}

body.dark-theme .step-line-active{

    background:var(--dorado);

}

/* =========================================
BUTTONS
========================================= */

body.dark-theme .btn-secondary{

    background:#1d1d1f;

    border-color:var(--border);

    color:var(--text);

}

body.dark-theme .btn-secondary:hover{

    border-color:var(--dorado);

}

/* =========================================
ALERTS
========================================= */

body.dark-theme .alert-box{

    background:#181818;

    border:1px solid var(--border);

    color:var(--text);

    box-shadow:
        0 8px 20px rgba(0,0,0,.5);

}

/* =========================================
DARK THEME - FORMULARIOS
========================================= */

body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea{
    border:1px solid #2a2a2d !important;
}

body.dark-theme .logo-ayuntamiento{

    filter:
        brightness(0)
        invert(1)
        contrast(1.1);

}



/* =========================================
CARDS
========================================= */

body.dark-theme .card{

    background:#181818;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

/* =========================================
MODALS
========================================= */

body.dark-theme .modal-content{

    background:#181818;

    border:1px solid var(--border);

    color:var(--text);

}

body.dark-theme .modal-content h2{

    color:var(--dorado);

}

/* =========================================
FOOTER
========================================= */

body.dark-theme footer{

    background:#111111;

    border-top:1px solid var(--border);

}

body.dark-theme .footer-copy{

    border-top:1px solid var(--border);

    color:#bdbdbd;

}

body.dark-theme .footer-designed{

    color:#ffffff;

}

body.dark-theme .footer-author{
    color:rgba(188,149,91,.2);
}

body.dark-theme .footer-author:hover{
    color:rgba(188,149,91,.5);
}

/* =========================================
SCROLLBAR
========================================= */

body.dark-theme::-webkit-scrollbar{

    width:10px;

}

body.dark-theme::-webkit-scrollbar-track{

    background:#121212;

}

body.dark-theme::-webkit-scrollbar-thumb{

    background:#3f3f46;

    border-radius:20px;

}

body.dark-theme::-webkit-scrollbar-thumb:hover{

    background:var(--dorado);

}

.hero-intro{
    min-height:100vh;
    min-height:100dvh;

    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-form{
    padding: calc(var(--header-height) + 30px) 0px 0px 0px;
    position: relative;
    z-index: 100;
}

@media(max-width:980px){

    .hero-form{
        padding: 0px 0px 0px 0px;
    }

    .hero-intro{
      min-height:80vh;
    }

}

#section-0,
#section-1,
#section-2,
#gEspecifico{
    display:none;
}


/* BOTON DE PRUEBA */

.preview-btn{

    margin:80px auto;

    display:flex;

    align-items:center;
    gap:10px;

    border:none;

    padding:16px 24px;

    border-radius:18px;

    cursor:pointer;

    color:#fff;

    font-size:16px;
    font-weight:600;

    background:
    linear-gradient(
        135deg,
        var(--vino),
        var(--vino2)
    );

    box-shadow:
        0 15px 30px rgba(105,27,50,.25);
}

/* =====================================
MODAL
===================================== */

.participacion-modal-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(8px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:10000;

    animation:
        participacionFadeIn .25s ease;
}

.participacion-modal-overlay.show{

    display:flex;
}

.participacion-modal{

    width:min(92%,550px);

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.5);

    border-radius:36px;

    padding:40px;

    position:relative;

    text-align:center;

    box-shadow:
        0 25px 60px rgba(15,23,42,.18);

    animation:
        participacionSlideUp .3s ease;
}

/* BORDE DECORATIVO */

.participacion-modal::before{

    content:'';

    position:absolute;

    inset:0;

    border-radius:36px;

    padding:1px;

    background:
    linear-gradient(
        135deg,
        rgba(188,149,91,.5),
        rgba(105,27,50,.25)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;
}

/* CERRAR */

.participacion-close{

    position:absolute;

    top:18px;
    right:18px;

    width:42px;
    height:42px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    background:#f8fafc;

    color:#64748b;

    transition:.25s;
}

.participacion-close:hover{

    background:#eef2f7;
}

/* ICONO */

.participacion-success{

    width:95px;
    height:95px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            rgba(22,163,74,.12),
            rgba(22,163,74,.2)
        );

    color:#16a34a;

    font-size:3rem;

    margin-bottom:22px;
}

body.dark-theme .participacion-success{
  background:
      linear-gradient(
          135deg,
          rgba(187, 149, 91, 0.12),
          rgba(158, 130, 86, 0.2)
      );

  color:#bc955b;
}

.participacion-error{

    width:95px;
    height:95px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            rgba(220,38,38,.12),
            rgba(220,38,38,.2)
        );

    color:#dc2626;

    font-size:3rem;

    margin-bottom:22px;
}

body.dark-theme .participacion-error{
  background:
      linear-gradient(
          135deg,
          rgba(228, 48, 101, 0.12),
          rgba(209, 76, 115, 0.2)
      );

  color:#e43065;
}

.participacion-modal h2{

    font-size:2rem;

    margin-bottom:10px;

    color:var(--text);
}

.participacion-modal p{

    color:var(--muted);

    line-height:1.7;

    margin-bottom:28px;
}

/* BOTONES */

.participacion-actions{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.participacion-btn{

    border:none;

    cursor:pointer;

    border-radius:18px;

    padding:16px 20px;

    font-size:15px;

    font-weight:600;

    transition:.25s;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;
}

.participacion-btn-primary{

    color:#fff;

    background:
    linear-gradient(
        135deg,
        var(--vino),
        var(--vino2)
    );

    box-shadow:
        0 12px 25px rgba(105,27,50,.25);
}

body.dark-theme .participacion-btn-primary{

    color:#fff;

    background:
    linear-gradient(
        135deg,
        var(--dorado),
        var(--dorado2)
    );

    box-shadow:
        0 12px 25px rgba(187, 149, 91, 0.25);
}

.participacion-btn-primary:hover{

    transform:translateY(-2px);
}

.participacion-btn-secondary{

    background:#f8fafc;

    color:var(--text);

    border:1px solid var(--border);
}

.participacion-btn-secondary:hover{

    border-color:var(--vino);
}

.participacion-btn-outline{

    background:transparent;

    color:var(--muted);

    border:1px solid var(--border);
}

.participacion-btn-outline:hover{

    color:var(--vino);

    border-color:var(--vino);
}

/* DARK THEME */

body.dark-theme .participacion-modal{

    background:#121212;

    border:1px solid rgba(255,255,255,.08);
}

body.dark-theme .participacion-modal h2{

    color:#e2e8f0;
}

body.dark-theme .participacion-modal p{

    color:#94a3b8;
}

body.dark-theme .participacion-btn-secondary{

    background:#0b1220;

    border-color:#1e293b;

    color:#e2e8f0;
}

body.dark-theme .participacion-btn-outline{

    border-color:#334155;

    color:#cbd5e1;
}

body.dark-theme .participacion-close{

    background:#0b1220;

    color:#cbd5e1;
}

/* ANIMACIONES */

@keyframes participacionFadeIn{

    from{opacity:0;}
    to{opacity:1;}
}

@keyframes participacionSlideUp{

    from{

        opacity:0;

        transform:
            translateY(25px)
            scale(.98);
    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

    will-change:opacity, transform;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* =========================
 IOS SWITCH ICONS
========================= */

.theme-switch{
  position: relative;
  display: inline-block;
  width: 64px;
  height: 32px;
}

.theme-switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-ios{
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: #691b32;
  transition: .4s;
  border-radius: 34px;
  overflow: hidden;
}

/* círculo */

.slider-ios:before{
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  top: 4px;
  background: #ffffff;
  transition: .4s;
  border-radius: 50%;
  z-index: 2;
}

.theme-switch input:checked + .slider-ios:before{
  background: #ffffff;
}

/* iconos */

.slider-ios .icon{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  z-index: 1;
  transition: .4s;
}

.slider-ios .sun{
  left: 10px;
  color: #ffffff;
  opacity: 0;
}

.slider-ios .moon{
  right: 10px;
  color: #ffffff;
  opacity: 1;
}

/* ACTIVADO */

.theme-switch input:checked + .slider-ios{
  background: #bc955b;
}

.theme-switch input:checked + .slider-ios:before{
  transform: translateX(32px);
}

.theme-switch input:checked + .slider-ios .sun{
  opacity: 1;
}

.theme-switch input:checked + .slider-ios .moon{
  opacity: 0;
}

.swiper-slide{
cursor: pointer;
transition: .3s ease;
}

.swiper-slide:hover{
transform: scale(0.9);
opacity: .9;
}

@media (max-width:768px){

    .slider-ios .moon{
      right:0px;
    }

}

/* ==============================
   CONTENEDOR DEL FORMULARIO
============================== */

.hero-card-wrapper{
    position: relative;
    display: inline-block;
    width: 100%;
}

.hero-card-wrapper .hero-card{
    position: relative;
    z-index: 100;
}


/* ==============================
   DECORACIÓN GENERAL
============================== */

.decoracion-orbitas{
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}


/* ==============================
   ANILLOS GIRATORIOS
============================== */

.anillo{
    position: absolute;

    width: 1020px;
    height: 1020px;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    border: 2px solid transparent;

    border-top: 2px solid rgba(188,149,91,.25);     /* vino */
    border-bottom: 2px solid rgba(105, 27, 50, .05);  /* tenue */
    border-right: 2px solid rgba(188,149,91,.45);     /* dorado */
    border-left: 2px solid rgba(105, 27, 50, .05);      /* tenue */

    animation: girar 45s linear infinite;
}

.anillo2{
    position: absolute;

    width: 720px;
    height: 720px;

    top: 50%;
    left: 50%;

    border-radius: 50%;
    border-top: 2px solid rgba(188,149,91,.45);     /* vino */
    border-bottom: 2px solid rgba(105, 27, 50, .05);  /* tenue */
    border-right: 2px solid rgba(188,149,91,.35);     /* dorado */
    border-left: 2px solid rgba(105, 27, 50, .05);      /* tenue */

    animation: girar-reversa 60s linear infinite;
}


/* ==============================
   ÓRBITA DE PARTÍCULAS
============================== */

.orbita{
    position: absolute;

    width: 580px;
    height: 580px;

    top: 50%;
    left: 50%;

    animation: girar 200s linear infinite;
}

.particula{
    position: absolute;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: rgba(187, 149, 91, 0.5);

    box-shadow: 0 6px 15px rgba(105, 27, 50,.35);
}

.particula1{
    position: absolute;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: rgba(187, 149, 91, 0.5);

    box-shadow: 0 6px 15px rgba(105, 27, 50,.35);
}

.particula:nth-child(1){
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.particula:nth-child(2){
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.particula:nth-child(3){
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.particula:nth-child(4){
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}


/* ==============================
   CÍRCULOS DECORATIVOS
============================== */

.circulo{
    position: absolute;

    border-radius: 50%;

    background: #bc955b;

    box-shadow: 0 12px 25px rgba(105, 27, 50,.35);

    animation: flotar 8s ease-in-out infinite;
}

.c1{
    width:84px;
    height:84px;

    top:50px;
    left:-40px;

    animation: rebote-c1 12s ease-in-out infinite alternate;
}

.c2{
    width:18px;
    height:18px;

    top:85px;
    right:65px;

    animation: rebote-c2 9s ease-in-out infinite alternate;
}

.c3{
    width:42px;
    height:42px;

    bottom:-30px;
    left:-25px;

    animation: rebote-c3 11s ease-in-out infinite alternate;
}

.c4{
    width:14px;
    height:14px;

    bottom:35px;
    right:-45px;

    animation: rebote-c4 8s ease-in-out infinite alternate;
}

.circulo2{
    position:absolute;
    border-radius:50%;
    background:#691b32;
    box-shadow:0 12px 25px rgba(105, 27, 50, 0.35);
    z-index:2;
    pointer-events:none;
}

.ci1{
    width:84px;
    height:84px;
}

.ci2{
    width:18px;
    height:18px;
}

.ci3{
    width:42px;
    height:42px;
}

.ci4{
    width:14px;
    height:14px;
}


/* ==============================
   CÍRCULOS TRANSLÚCIDOS
============================== */

.circulo-suave{
    position: absolute;

    border-radius: 50%;

    border: 2px solid rgba(187, 149, 91, 0.12);
}

.s1{
    width: 70px;
    height: 70px;

    top: 0;
    right: -25px;
}

.s2{
    width: 110px;
    height: 110px;

    bottom: -35px;
    left: -55px;
}


/* ==============================
   EFECTO DE BRILLO
============================== */

.brillo{
    position: absolute;

    width: 120px;
    height: 120px;

    bottom: -40px;
    right: -40px;

    border-radius: 50%;

    background: rgba(187, 149, 91,.25);

    filter: blur(35px);

    animation: flotar 9s ease-in-out infinite;
}


/* ==============================
   ANIMACIONES
============================== */

@keyframes girar{

    from{
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to{
        transform: translate(-50%, -50%) rotate(360deg);
    }

}

@keyframes girar-reversa{

    from{
        transform: translate(-50%, -50%) rotate(360deg);
    }

    to{
        transform: translate(-50%, -50%) rotate(0deg);
    }

}

@keyframes flotar{

    0%,
    100%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-12px);
    }

}

@keyframes rebote-c1{
    0%{
        transform: translate(0,0);
    }

    50%{
        transform: translate(35px,20px);
    }

    100%{
        transform: translate(0,40px);
    }
}

@keyframes rebote-c2{
    0%{
        transform: translate(0,0);
    }

    50%{
        transform: translate(-30px,25px);
    }

    100%{
        transform: translate(-15px,-20px);
    }
}

@keyframes rebote-c3{
    0%{
        transform: translate(0,0);
    }

    50%{
        transform: translate(40px,-35px);
    }

    100%{
        transform: translate(15px,-10px);
    }
}

@keyframes rebote-c4{
    0%{
        transform: translate(0,0);
    }

    50%{
        transform: translate(-25px,-30px);
    }

    100%{
        transform: translate(-40px,10px);
    }
}



/* ==============================
   RESPONSIVE
============================== */

@media (max-width: 768px){

    .anillo{
        width: 420px;
        height: 420px;
    }

    .anillo2{
        width: 320px;
        height: 320px;
    }

    .orbita{
        width: 470px;
        height: 470px;
    }

    .c1{
        left: -15px;
    }

    .c2{
        right: -20px;
    }

    .c3{
        left: -10px;
    }

    .c4{
        right: -10px;
    }

}

@media (max-width: 480px){

    .anillo{
        width: 320px;
        height: 320px;
    }

    .anillo2{
        width: 250px;
        height: 250px;
    }

    .orbita{
        width: 360px;
        height: 360px;
    }

    .particula{
        width: 14px;
        height: 14px;
    }

    .brillo{
        width: 80px;
        height: 80px;
    }

}