@charset "UTF-8"; /*LENGUAJE DE ESTILOS DEL SITIO*/


/*FUNCIONES DE PHP - REDES SOCIALES*/
/*Ejemplo PHP: 
    <?php echo HTMLsocialMedia();  ?>
*/

/* ==========================================================
       0) RESET + TOKENS (CSS Custom Properties)
       ========================================================== */
    :root{
      /* Colores de marca — ajusta según identidad */
      --bg: #ffffff;
      --ink: #151515;
      --muted: #6b7280;          /* gris texto secundario */
      --accent: #d90429;         /* rojo acento */
      --accent-2: #ffd100;       /* amarillo PT */
      --surface: #f3f4f6;        /* gris tarjetas */
      --line: #e5e7eb;           /* gris bordes */
      --ok: #0e7490;             /* turquesa suave de fondos */

      /* Tipografía */
      --ff-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Ubuntu, Cantarell, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      --ff-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

      /* Escalas */
      --radius: 16px;            /* radio estándar de tarjetas */
      --radius-lg: 28px;
      --shadow-md: 0 6px 20px rgba(0,0,0,.08);
      --shadow-lg: 0 10px 30px rgba(0,0,0,.12);
      --container: 1200px;       /* ancho máx. */
      --gap: 20px;               /* gap base */
    }

    /* Reset mínimo y legibilidad */
    
    html{scroll-behavior:smooth}
    /*body{ font-family:var(--ff-sans); color:var(--ink); background:var(--bg); line-height:1.5}*/
    img{max-width:100%; display:block}
    a{color:inherit}
    button{font:inherit}

    /* ==========================================================
       1) UTILIDADES (reutilizables en cualquier página)
       ========================================================== */
    .container{max-width:var(--container); margin-inline:auto; padding-inline: clamp(16px, 4vw, 32px)}
    .stack{display:grid; gap: clamp(16px, 2.8vw, 28px)}
    .cluster{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
    .grid{display:grid; gap:clamp(16px,2vw,24px)}
    .grid-2{grid-template-columns: 1fr}
    .grid-3{grid-template-columns: 1fr}
    .center{text-align:center}
    .muted{color:var(--muted)}
    .hide-sm{display:none}
    .sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
    /*.pill{display:inline-flex; align-items:center; gap:.5ch; font-weight:600; padding:.35rem .7rem; border-radius:999px; background:#FEE2E2; color:#991B1B}*/

    /* RWD breakpoints */
    @media (min-width: 700px){
      .grid-2{grid-template-columns: 1fr 1fr}
      .grid-3{grid-template-columns: repeat(3, 1fr)}
      .hide-sm{display:revert}
    }
    @media (min-width: 1024px){
      .grid-3-lg{grid-template-columns: 1.2fr 1fr 1fr}
    }

    /* Botón utilitario */
    .btn{appearance:none; border:1px solid var(--b); background:var(--bg); color:#111; border-radius:999px; padding:.6rem 1rem; font-weight:600; text-decoration:none; display:inline-flex; gap:.6rem; align-items:center;
        transition:0.17s Ease-in-out;}
    .btn[aria-current="page"], .btn.primary{--b:transparent; --bg:var(--ink); color:#fff}
    .btn:hover{filter:brightness(.90)}

    /* Avatares e íconos */
    .dot{width:12px;height:12px;border-radius:50%;background:currentColor;display:inline-block}

    /* ==========================================================
       2) COMPONENTES
       ========================================================== */
    /* Header */
    header.site{position:relative; z-index:10; background:linear-gradient(180deg,#fff,rgba(255,255,255,.92)); border-bottom:1px solid var(--line)}
    .site__top{display:flex; align-items:center; justify-content:space-between; padding-block:14px}
    .brand{display:flex; align-items:center; gap:12px}
    .brand__mark{height: 70px; width: 70px;}
    .brand__text{line-height:1.1}
    .brand__name{font-weight:800; font-size:clamp(1.05rem, 1.6vw + .8rem, 1.5rem)}
    .brand__role{font-size:.9rem; color:var(--muted)}
    nav.site__nav{display:flex; gap:10px; flex-wrap:wrap}

    /* Hero */
    .hero{position:relative; padding-block: clamp(24px, 5vw, 48px);
        background-image: url(../simg/head_background.png);
        background-repeat: no-repeat;    /* No repetir la imagen */
        background-position: top center;     /* Centrar la imagen */
        background-size: auto;           /* No escalar, mantiene tamaño real */}
    .hero__wrap{display:grid; gap:24px; align-items:center}
    @media (min-width:900px){
      .hero__wrap{grid-template-columns: 1.1fr .9fr}
    }
    .hero__media{position:relative;}
    .hero__portrait{}
    /*.hero__portrait .ph{display:block; aspect-ratio: 4 / 3; background:conic-gradient(from 200deg at 30% 30%, #cfd9df, #e2ebf0, #cfd9df); opacity:.9}
    .hero__badge{position:absolute; top:-10px; left:-10px; inline-size:70px; aspect-ratio:1; border-radius:12px; background:var(--accent-2); display:grid; place-items:center; font-weight:900; box-shadow:var(--shadow-lg)}*/

    .hero__title{font-size:clamp(2rem, 5vw, 5rem); line-height:1; margin:0;}
    .hero__meta{max-width:42ch; color:var(--muted)}

    /* Cita / lema */
    .quote{position:relative; padding-block: 100px/*clamp(16px, 4vw, 28px);*/}
    .quote blockquote{font-family:var(--ff-serif); font-size:clamp(2rem, 3.2vw, 3.2rem); font-style:italic; text-align:center; margin:0; color:#1f2937}

    /**/
    .section_description{font-family: bold; font-size: 0.7rem;}
    .section_title{font-family: regular; font-size: 2rem; margin: 0px;}

    /* Cards de Trabajo Legislativo */
    #trabajo{margin-bottom: 70px;}
    .cards .card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden}
    .card__media{aspect-ratio: 4 / 3; overflow: hidden;}
    .card__body{padding:16px 16px 18px;
              display: flex;
              flex-direction: column;
              align-items: center; /* centra horizontalmente */
              text-align: center;  /* centra el texto también */}
    .card__eyebrow{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
    .card__text{color:var(--muted); font-size:.96rem}

    /* CTA big */
    .cta-wide{grid-column:1/-1}
    .cta{display:grid; height: 350px; grid-template-columns: 1fr; color:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
        background-image: url(../simg/legislativo_back.jpg); padding: 15px;}
    .cta__media{aspect-ratio: 1/-1; opacity:.9;}
    .cta__body{padding:18px}
    .cta__title{margin:10px 0 6px; font-size:1.3rem; color:#e5f4ff;}
    .cta__text{margin:0 0 12px; color:#e5f4ff}
    @media (min-width:900px){
      .cta{grid-template-columns: 1fr .8fr}
      .cta__body{padding:24px}
    }

    /* Ficha personal + Listas */
    .profile{ margin-bottom: 80px;}
    .profile__grid{display:grid; gap:clamp(18px, 2.6vw, 28px)}
    @media (min-width: 980px){
      .profile__grid{grid-template-columns: minmax(280px, .9fr) 1.1fr}
    }
    .panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md)}
    .panel__body{padding:18px}
    .dl{display:grid; grid-template-columns: auto 1fr; gap:8px 14px}
    .dl dt{font-weight:700; margin-top: 15px;}
    .dl dd{margin:0; color:var(--muted); margin-top: 15px;}

    .list{margin:0; padding:0; list-style:none}
    .list li{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow-md)}
    .list li+li{margin-top:10px}
    .list__title{font-weight:800; margin-bottom:6px}

    /* Footer */
    footer.site{margin-top:0px; padding: 20px 0 0px 0; border-top:1px solid var(--line);}
    .footer__grid{display:grid; gap:18px}
    @media (min-width:800px){
      .footer__grid{grid-template-columns: 1fr 1fr}
    }
    .badge{display:inline-flex; align-items:center; gap:10px; padding:12px 14px; }
    

    /* Decor: filete PT al final */
    .pt-strip{height:48px; background:var(--accent); width:min(100%, var(--container)); margin:24px auto 0}