:root{
  --brand:#2ecc71;
  --text:#000;
  --bg:#fff;
  --muted:#666;
  --border:#fff;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
a{color:#0066cc;text-decoration:none}
a:hover{text-decoration:underline}
/* Header */
header{background:#fff;padding:8px 30px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px}
nav{display:flex;gap:25px;align-items:center}
.btn{background:var(--brand);color:#fff;padding:4px 15px;border-radius:6px;font-weight:bold;display:inline-block}
.btn:hover{opacity:.9}
/* Dropdown */
.menu{position:relative}
.dropdown{display:none;position:absolute;background:#fff;border:1px solid var(--border);padding:10px;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.08);min-width:220px;top:140%}
.dropdown a{display:block;margin:6px 0;color:var(--text)}
.menu[aria-expanded="true"] .dropdown{display:block}
/* Layout */
.container{max-width:1100px;margin:0 auto;padding:20px}
.toc{position:fixed;top:100px;right:30px;width:270px;background:#fff;padding:20px;border-radius:16px;border:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.06);z-index:900}
.lead{display:flex;flex-direction:column;align-items:flex-start;padding:30px 20px 0 20px}
.lead img{max-width:420px;width:100%;height:auto;border-radius:12px}
main{min-height:60vh;padding:20px}
.block{max-width:800px;padding:10px 20px;margin:0 auto}
figure{margin:20px 0}
figure img{width:100%;max-width:800px;border-radius:12px;height:auto}
/* Right form card */
.contact-card{position:fixed;top:420px;right:30px;width:270px;background:#fff;padding:16px;border-radius:12px;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06);z-index:900}
.contact-card label{display:block;font-size:14px;margin:0 0 8px}
.contact-card input,.contact-card select{width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;margin-top:4px}
.contact-card button{width:100%;border:none;border-radius:8px;padding:10px;background:var(--brand);color:#fff;font-weight:bold;cursor:pointer}
.contact-card button:hover{opacity:.95}
/* Footer */
footer{background:#000;color:var(--text);padding:30px 20px}
footer .cols{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-start;max-width:1100px;margin:0 auto}
footer h4{color:var(--brand);margin:0 0 8px}
footer .legal a{color:#fff}
footer .social{display:flex;gap:15px;margin-top:10px}
footer .copy{border-top:1px solid #ccc;text-align:center;padding-top:15px;margin-top:20px;color:var(--muted);font-size:13px}
/* Small screens */
@media (max-width: 1024px){
  .toc,.contact-card{display:none}
  header{position:static}
  .lead img{max-width:100%}
}

/* === Overrides v2.1 === */
/* Left-aligned reading column */
.container{max-width:1100px;margin-left:0;margin-right:0;padding-left:30px;padding-right:20px}
.block{max-width:900px;margin-left:0;margin-right:0}
.lead{align-items:flex-start}
figure{margin-left:0}

/* Dropdown: better positioning & z-index */
.menu{position:relative}
.menu .dropdown{top:calc(100% + 8px); z-index: 1500}
.menu.open .dropdown{display:block}

/* Increase click target */
.menu > a[role="button"]{padding:6px 8px; display:inline-block; border-radius:6px}
.menu > a[role="button"]:focus{outline:2px solid var(--brand); outline-offset:2px}

/* --- LOOK CLÁSICO (como la imagen de la izquierda) --- */

/* Tarjeta de la Tabla de contenido */
.toc{
  position:fixed; top:100px; right:30px;
  width:270px;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:16px;
  box-shadow:0 2px 0 rgba(0,0,0,.02), 0 8px 24px rgba(0,0,0,.05);
  padding:18px;
  z-index:999;
}
.toc h3{ margin:0 0 8px; font-weight:700; color:#3a3a3a; }
.toc ol{ margin:0; padding-left:22px; }
.toc a{ color:#1e66d0; text-decoration:none; }
.toc a:hover{ text-decoration:underline; }

/* Tarjeta del formulario lateral */
.contact-card{
  position:fixed; top:400px; right:30px;
  width:270px;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:16px;
  box-shadow:0 2px 0 rgba(0,0,0,.02), 0 8px 24px rgba(0,0,0,.05);
  padding:18px;
  z-index:999;
}
.contact-card p{ margin:0 0 10px; color:#333; }
.contact-card label{ display:block; font-size:14px; color:#000; margin:0 0 10px; }
.contact-card input,
.contact-card select{
  width:100%; height:36px;
  border:1px solid #d0d0d0; border-radius:6px;
  padding:6px 10px; background:#fff; box-sizing:border-box; outline:none;
}
.contact-card button{
  width:100%; height:40px; margin-top:8px;
  border:1px solid #26b862; border-radius:6px;
  background:#2ecc71; color:#fff; font-weight:600; cursor:pointer;
}
.contact-card button:hover{ filter:brightness(.97); }

/* Lectura alineada a la izquierda (no centrada) */
.container{ max-width:1100px; margin:0; padding:20px 20px 20px 40px; }
.block{ max-width:800px; margin:0; padding:10px 0; }

/* Menú Servicios: que no se cierre al mover el mouse (sin JS extra) */
.menu .dropdown{ display:none; }
.menu:hover .dropdown,
.menu:focus-within .dropdown{ display:block; }

/* === Forzar look clásico y tamaño más chico (pisa inline) === */
.toc{
  position:fixed !important;
  top:100px !important;
  right:30px !important;
  width:240px !important;
  background:#fff !important;
  border:1px solid #e6e6e6 !important;
  border-radius:12px !important;
  box-shadow:0 2px 0 rgba(0,0,0,.02), 0 8px 18px rgba(0,0,0,.05) !important;
  padding:14px !important;
  z-index:999 !important;
}
.toc h3{ margin:0 0 8px !important; font-weight:700 !important; color:#3a3a3a !important; }
.toc ol{ margin:0 !important; padding-left:20px !important; }
.toc a{ color:#1e66d0 !important; text-decoration:none !important; }
.toc a:hover{ text-decoration:underline !important; }

.contact-card{
  position:fixed !important;
  top:360px !important;    /* un poco más arriba */
  right:30px !important;
  width:240px !important;  /* más pequeña */
  background:#fff !important;
  border:1px solid #e6e6e6 !important;
  border-radius:12px !important;
  box-shadow:0 2px 0 rgba(0,0,0,.02), 0 8px 18px rgba(0,0,0,.05) !important;
  padding:14px !important;
  z-index:999 !important;
}
.contact-card p{ margin:0 0 10px !important; color:#333 !important; }
.contact-card label{ display:block !important; font-size:14px !important; color:#333 !important; margin:0 0 10px !important; }
.contact-card input,
.contact-card select{
  width:100% !important; height:34px !important;
  border:1px solid #d0d0d0 !important; border-radius:6px !important;
  padding:6px 10px !important; background:#fff !important; box-sizing:border-box !important;
}
.contact-card button{
  width:100% !important; height:38px !important; margin-top:8px !important;
  border:1px solid #26b862 !important; border-radius:6px !important;
  background:#2ecc71 !important; color:#fff !important; font-weight:600 !important; cursor:pointer !important;
}
.contact-card button:hover{ filter:brightness(.97) !important; }

/* Lectura a la izquierda (por si algo la centra) */
main, .container, .block{ text-align:left !important; }
.container{ max-width:1100px !important; margin:0 !important; padding:20px 20px 20px 40px !important; }
.block{ max-width:800px !important; margin:0 !important; padding:10px 0 !important; }

/* Dropdown visible al pasar/clicar (sin JS) */
.menu .dropdown{ display:none !important; }
.menu:hover .dropdown,
.menu:focus-within .dropdown{ display:block !important; }

/* Tarjeta de la Tabla de contenido */
.toc {
  position: fixed;
  top: 100px;
  right: 30px;
  width: 220px; /* antes 270px */
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px; /* antes 16px */
  box-shadow: 0 2px 0 rgba(0, 0, 0, .02), 0 8px 24px rgba(0, 0, 0, .05);
  padding: 14px; /* antes 18px */
  z-index: 999;
}

.toc h3 {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 14px; /* más chico */
  color: #3a3a3a;
}

.toc a {
  color: #1e66d6;
  font-size: 13px;
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

/* Tarjeta del formulario lateral */
.contact-card {
  position: fixed;
  top: 400px;
  right: 30px;
  width: 220px; /* antes 270px */
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px; /* antes 16px */
  box-shadow: 0 2px 0 rgba(0, 0, 0, .02), 0 8px 24px rgba(0, 0, 0, .05);
  padding: 14px; /* antes 18px */
  z-index: 999;
}

.contact-card label {
  font-size: 13px; /* más chico */
}

.contact-card input,
.contact-card select {
  font-size: 13px;
  height: 32px; /* antes 36px */
}

.contact-card button {
  height: 36px; /* antes 40px */
  font-size: 13px;
}

#titulo-uni {
  color: #fff; /* informacion y correo pies de pagina  Python */
}

button:focus,
a:focus,
input:focus,
textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ———  desde aqui pegue otro linia de css para Reset para móviles: sin scroll lateral ——— */
html, body { width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; }

/* ——— Medios responsivos ——— */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; display: block; }

/* ——— Contenedores y secciones ——— */
.container, .wrap, main, section, header, footer { max-width: 100%; }
section, .hero, .banner { max-width: 100vw; overflow-x: hidden; }

/* ——— Grids y columnas ——— */
.row { display: flex; flex-wrap: wrap; }
.col { flex: 1 1 0; min-width: 0; } /* evita desbordes */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 1024px){ .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){  .grid { grid-template-columns: 1fr; } }

/* ——— Tablas y textos largos ——— */
table { width: 100%; display: block; overflow-x: auto; }
pre, code { white-space: pre-wrap; word-wrap: break-word; }
.long-text, a { word-break: break-word; }

/* ——— Iframes responsivos (YouTube, mapas) ——— */
.embed { position: relative; width: 100%; aspect-ratio: 16/9; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ——— “Culpables” comunes de scroll horizontal ——— */
/* Si tienes algo con width fijo, neutralízalo: */
[class*="container"], .container, .content, .hero, .banner {
  width: 100%; /* NO width:1200px */
  max-width: 1200px; /* si quieres límite */
  margin-inline: auto;
  padding-inline: 16px;
}
/* Evita márgenes negativos que empujan el layout */
[class*="row"], .row { margin-inline: 0 !important; }

.logo-pequeno {
  max-width: 40px; 
  height: auto;
  display: inline-block;
}

.video-mini {
  width: 558px;
  height: 272px;
  max-width: 100%; /* así no rompe en pantallas pequeñas */
  display: block;
  margin: 0 auto; /* centrado si quieres */
}

/* Botón hamburguesa (oculto en desktop) sssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/
.xa-burger{
  display:none; width:44px; height:38px; padding:6px 8px;
  border:1px solid #e5e5e5; border-radius:10px; background:#fff; cursor:pointer;
}
.xa-burger span{display:block;height:2px;background:#333;margin:6px 0;border-radius:2px}

/* Drawer móvil (menú lateral) */
.xa-drawer{
  position:fixed; inset:0 40% 0 0; /* ~60% ancho */
  background:#fff; transform:translateX(-100%); transition:.25s ease;
  border-right:1px solid #e9e9e9; z-index:1001; overflow-y:auto;
}
.xa-drawer[aria-hidden="false"]{ transform:translateX(0); }
.xa-drawer__nav{ display:flex; flex-direction:column; gap:8px; padding:18px; }
.xa-drawer__nav a{ text-decoration:none; padding:10px 12px; border-radius:8px; }
.xa-drawer__nav details>summary{ cursor:pointer; padding:10px 12px; border-radius:8px; list-style:none; }
.xa-drawer__nav details[open] > summary{ background:#f5f5f7; }

/* Backdrop */
.xa-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1000; }

/* Responsive: esconder tu menú horizontal en móvil y mostrar hamburguesa */
@media (max-width: 992px){
  /* Ajusta el selector a TU menú horizontal actual si es distinto: */
  .xa-burger{ display:inline-block; }
  /* Si tu menú de escritorio tiene otra clase/ID, reemplázalo aquí: */
  nav.primary, .main-nav, .navbar, .menu-superior { display:none !important; }
}

/* Imagen principal (si quieres asegurar full-width en móvil)
   Aplica solo si tu héroe usa una clase concreta */
@media (max-width: 992px){
  .hero img, .portada img, .banner img, img.hero, img.portada {
    width:100% !important; height:auto !important; border-radius:12px;
  }
}