:root{
  --bg: #f6f8fb;
  --bg-accent: linear-gradient(180deg,#f6f8fb 0%, #eef2f7 100%);
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #4b5563;
  --brand: #1e88e5;
  --brand-600:#1565c0;
  --border:#e5e7eb;
  --panel:#ffffffcc;
  --focus:#ffab00;
  --shadow: 0 4px 20px rgba(0,0,0,.06);
  --leading: 1.65;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-accent);
  color:var(--text);
  line-height: var(--leading);
}
/* Estilo de las cajas de texto*/
.container{
  max-width:1100px; 
  margin-inline:auto; 
  padding:1rem;
}
.site-header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(120%) blur(6px); background:rgba(255,255,255,.8); border-bottom:1px solid var(--border)}
/*Aquí comienza lo nuevo puesto*/
/* Estilo de la caja primera de cabecera*/
.header-grid{display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center}
.header-logo img{max-width: 180px; height: auto;}
/* Estilo de títulos*/
.header-titles h1 {font-size: 1.9rem; margin: 0;}
.header-titles p {margin: 0.2rem 0 0; font-size: 1rem; color: #555;}
.lang-toggle {padding: 0.35rem 0.75rem; border-radius: 6px; background: #e8f0fe; color: #1e40af; text-decoration: none; font-weight: 500;}
/* Menú */
.header-nav .menu {list-style: none; padding: 0; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap;}
.header-nav .menu a {text-decoration: none; padding: .4rem .7rem; border-radius: 6px; color: #1e88e5;}
.header-nav .menu a:hover {background: rgba(30,136,229,0.15);}
/*Hasta qquí lo nuevo puesto*/
.brand img{width:350px; height:250px; border-radius:50%; display:block}
.titles{min-width:0}
.site-title{margin:0; font-size:clamp(1.6rem,1.1rem + 1.8vw,2.2rem); font-family:"Poppins","Inter",system-ui,sans-serif; font-weight:600}
.site-subtitle{margin:.25rem 0 0; color:var(--muted); font-size:.95rem}
.site-nav{display:flex; align-items:center; gap:1rem}
.menu{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.25rem}
.menu a{display:block; padding:.45rem .7rem; border-radius:.5rem; text-decoration:none; color:var(--brand)}
.menu a:hover{background:rgba(30,136,229,.10)}
.menu a:focus{outline:3px solid var(--focus); outline-offset:2px}
.menu-toggle{display:none}
.lang-toggle{display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border:1px solid var(--border); border-radius:.6rem; text-decoration:none; color:var(--brand); background:#fff}
.lang-toggle:hover{background:#f4f7fb}
.lang-toggle svg{width:18px; height:18px}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1.25rem; margin:1rem 0; box-shadow:var(--shadow)}
.panel h2{margin-top:0; font-family:"Poppins","Inter",system-ui,sans-serif; font-weight:600; font-size:clamp(1.25rem,1rem + 1.2vw,1.7rem)}
.panel h3{font-family:"Poppins","Inter",system-ui,sans-serif; font-weight:600; font-size:clamp(1.05rem,.95rem + .8vw,1.3rem)}
.panel-grid{display:grid; grid-template-columns:1.5fr .9fr; gap:1.25rem; align-items:center}
.avatar img{width:256px; height:256px; border-radius:50%; object-fit:cover; border:5px solid #fff; box-shadow:0 6px 24px rgba(0,0,0,.08)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:0; list-style:none}
.card{background:#fff; border:1px solid var(--border); border-radius:.9rem; padding:1rem; box-shadow:var(--shadow)}
.links-list{list-style:disc; padding-left:1.2rem}
.list{padding-left:1.2rem}
/* Título interactivo: al pasar el ratón se despliega el texto interior */
    .card-title-trigger {
      padding: 1rem 1.2rem 0.5rem 1.2rem;
      cursor: pointer;
      transition: background 0.2s;
      border-left: 3px solid transparent;
      
      display: flex;
      justify-content: center;  /* centra horizontalmente */
      align-items: center;      /* centra verticalmente */
      white-space: nowrap;
    }
    .card-title-trigger h3 {
      font-size: 1.1rem;
      font-weight: 600;
      color: #111111;
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: -0.2px;
    }
    .card-title-trigger h3::after {
      content: "";
      font-size: 1.4rem;
      opacity: 0.6;
      transition: 0.2s;
    }
    .card-title-trigger:hover {
      background: #f4fafd;
      border-left-color: var(--secondary-accent);
    }
    .card-title-trigger:hover h3::after {
      content: "";
      opacity: 1;
    }
    /* texto desplegable */
    .card-expandable {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1);
      background: #fefefc;
      margin: 0 1rem 1rem 1rem;
      border-radius: 1rem;
    }
    /* Al hacer hover sobre el título (o sobre el contenido expandido) se mantiene abierto */
    .card-title-trigger:hover + .card-expandable,
    .card-expandable:hover {
      max-height: 265px;
    }
    .expandable-inner {
      padding: 0.9rem 1rem 1.2rem;
      font-size: 0.9rem;
      color: #111111;
      border-top: 1px solid #e2edf0;
    }
    .expandable-inner p {
      margin-bottom: 0.7rem;
    }
.btn{display:inline-block; background:var(--brand); color:#fff; padding:.6rem .95rem; border-radius:.6rem; text-decoration:none}
.btn:hover{background:var(--brand-600)}
.btn:focus{outline:3px solid var(--focus); outline-offset:2px}
.btn-secondary{background:#e8f0fe; color:var(--brand)}
.cta-row{display:flex; gap:.6rem; flex-wrap:wrap; justify-content: center}
.site-footer{border-top:1px solid var(--border); background:rgba(255,255,255,.8); padding:.8rem 0}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--focus); color:#000; z-index:1000; border-radius:.4rem}
.loader{display:inline-flex; align-items:center; gap:.6rem; color:var(--muted)}
.loader::before{content:""; width:12px; height:12px; border-radius:50%; border:3px solid #cbd5e1; border-top-color:var(--brand); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pubs-auto h1,.pubs-auto h2,.pubs-auto h3{margin-top:1rem}
.pubs-auto table{width:100%; border-collapse:collapse}
.pubs-auto td, .pubs-auto th{border:1px solid var(--border); padding:.5rem}
@media (max-width: 900px){ .panel-grid{grid-template-columns:1fr} .cards{grid-template-columns:1fr 1fr} }
@media (max-width: 680px){ .menu{display:none; flex-direction:column; background:#fff; border:1px solid var(--border); padding:.5rem; border-radius:.5rem} .menu.show{display:flex} .menu-toggle{display:inline-block; border:1px solid var(--border); background:#fff; padding:.4rem .7rem; border-radius:.4rem} .cards{grid-template-columns:1fr} }