/* ===== La Casa Universitaria de Córdoba — estilos base ===== */
:root{
  --pink: #D6407D;
  --pink-dark: #B02F65;
  --pink-soft: #FBE9F1;
  --green: #62A97F;
  --green-dark: #4C8A65;
  --green-soft: #E9F5EE;
  --ink: #2B2B2E;
  --ink-soft: #5B5B60;
  --cream: #FFFDFB;
  --line: #EFE4EA;
  --shadow: 0 12px 30px rgba(43,26,36,.08);
  --radius: 18px;
  --maxw: 1180px;
  font-size: 16px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: clip; }
body{
  margin:0;
  overflow-x: clip;
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0 0 .5em; font-family:'Poppins', sans-serif; font-weight:700; line-height:1.2; }
p{ margin:0 0 1em; }
.container{ max-width: var(--maxw); margin:0 auto; padding: 0 24px; }

/* Scroll-in entrance animation, applied site-wide from assets/js/main.js
   (not hand-added per page) to cards/pillars/photos/etc. .reveal starts
   hidden; JS adds .in-view once the element scrolls into the viewport. If
   JS never runs, elements never get .reveal in the first place, so they
   render normally instead of staying invisible. */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}
.section{ padding: 88px 0; }
.section--tight{ padding: 56px 0; }
.section--soft-pink{ background: var(--pink-soft); }
.section--soft-green{ background: var(--green-soft); }

.eyebrow{
  display:inline-block;
  font-size: .78rem;
  font-weight:700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink-dark);
  background: var(--pink-soft);
  border: 1px solid #F3CADF;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow--green{ color: var(--green-dark); background: var(--green-soft); border-color:#CDE8D9; }

h1.hero-title{
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  letter-spacing: -.01em;
}
h2.section-title{
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.lead{
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 640px;
}
.two-col{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items:center;
}
@media (max-width: 880px){
  .two-col{ grid-template-columns: 1fr; }
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight:600;
  font-size: .98rem;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--pink); color:#fff; box-shadow: 0 10px 22px rgba(214,64,125,.28); }
.btn-primary:hover{ background: var(--pink-dark); }
.btn-outline{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color:#fff; }
.btn-outline-light{ background: transparent; border-color:#fff; color:#fff; }
.btn-outline-light:hover{ background:#fff; color: var(--pink-dark); }
.btn-green{ background: var(--green); color:#fff; box-shadow: 0 10px 22px rgba(98,169,127,.28); }
.btn-green:hover{ background: var(--green-dark); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 100;
  border-bottom: 1px solid var(--line);
}
/* The blur lives on this pseudo-element (not on .site-header itself) so the
   header never becomes a `position:fixed` containing block for its children —
   a backdrop-filter on an ancestor does that, and #mobile-drawer is fixed. */
.site-header::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background: rgba(255,253,251,.92);
  backdrop-filter: saturate(140%) blur(8px);
}
/* Full-bleed bar (no max-width container): the logo sits flush at the
   real left edge of the viewport and the Ingresar/Reservar buttons flush
   at the real right edge, instead of both being pulled inward by the
   same centered max-width container the rest of the page content uses.
   No justify-content:space-between here on purpose — with 3 flex
   children (brand/nav-links/nav-cta) that splits the free space evenly
   into both gaps, leaving a big gap before "Inicio" instead of grouping
   the logo+nav-links tight on the left like the Bo reference bar. Using
   a plain gap + margin-left:auto on .nav-cta instead groups brand+links
   on the left and pushes only the Ingresar/Reservar group to the right. */
.nav-wrap{
  display:flex; align-items:center; gap: 48px;
  padding: 10px 32px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
/* 72px, measured directly off the live Bo WeWorking header (same logo
   file, rendered there at height:72px with ~10px top/bottom padding —
   bo.lacasauniversitaria.com.ar's .header__fundacion-logo) so the two
   sites show the exact same logo size, not just a similar-looking one.
   ~93px bar total. Mobile drawer offsets (.nav-overlay/.nav-links top)
   are tied to this height below. */
.brand img{ height: 72px; width:auto; }
.nav-links{ display:flex; align-items:center; }
.nav-links-scroll{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-weight:600; font-size:.95rem; color: var(--ink-soft);
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a.active{ color: var(--pink-dark); border-color: var(--pink); }
.nav-cta{ display:flex; align-items:center; gap:14px; margin-left:auto; }
/* Smaller than the site-wide .btn so the "Reservar espacio" pill doesn't
   end up taller than the shrunk logo and blow the bar height back up. */
.nav-cta .btn{ padding: 10px 22px; font-size: .92rem; }
.nav-login-link{ font-weight:600; font-size:.95rem; color: var(--ink-soft); white-space:nowrap; }
.nav-login-link:hover{ color: var(--pink-dark); }
.nav-login-mobile{ display:none; }
.nav-toggle{
  display:none; background:none; border:none; font-size: 1.6rem; cursor:pointer; color: var(--ink);
}
.nav-drawer-footer{ display:none; }
.nav-overlay{ display:none; }

/* "Institucional" dropdown (desktop) / accordion (mobile) — same DOM+JS, different CSS per breakpoint */
.nav-dropdown{ position:relative; }
.nav-dropdown-toggle{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; padding:6px 2px; font:inherit;
  font-weight:600; font-size:.95rem; color:var(--ink-soft);
  border-bottom:2px solid transparent; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle[aria-expanded="true"],
.nav-dropdown-toggle.active{ color:var(--pink-dark); border-color:var(--pink); }
.nav-dropdown-toggle .chevron{ transition:transform .15s ease; }
.nav-dropdown-toggle[aria-expanded="true"] .chevron{ transform:rotate(180deg); }

.nav-dropdown-menu{
  display:none; position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:10px; min-width:200px;
  flex-direction:column; gap:2px; z-index:110;
}
.nav-dropdown-menu.open{ display:flex; }
.nav-dropdown-menu a{
  padding:10px 14px; border-radius:10px; font-weight:600; font-size:.92rem;
  color:var(--ink-soft); border-bottom:none; white-space:nowrap;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active{ background:var(--pink-soft); color:var(--pink-dark); }
/* The one actual action mixed into an otherwise-informational submenu
   (e.g. "Sumate a La Casa" under "Institucional") — a separator plus
   permanent (not just on-hover) pink/bold sets it apart as the CTA. */
.nav-dropdown-menu a.cta{
  color:var(--pink-dark); font-weight:700;
  border-top:1px solid var(--line); margin-top:6px; padding-top:14px;
}

/* "Actividades" variant: label (real link) + caret button (opens the
   submenu), sharing one underline/hover/active look so they read as a
   single control instead of two glued-together ones. */
.nav-dropdown-link-group{
  display:flex; align-items:center; gap:4px;
  padding:6px 2px; font-weight:600; font-size:.95rem; color:var(--ink-soft);
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-dropdown-link-group:hover,
.nav-dropdown-link-group.active{ color:var(--pink-dark); border-color:var(--pink); }
.nav-dropdown-link-group a{
  color:inherit; padding:0; border-bottom:none;
}
.nav-dropdown-link-group .nav-dropdown-toggle{
  padding:2px; border-bottom:none; color:inherit;
}

@media (max-width: 900px){
  .nav-cta .btn span.long{ display:none; }
  .nav-login-link{ display:none; }
  .nav-toggle{ display:block; }

  .nav-overlay{
    display:block; position:fixed; top:93px; left:0; right:0; bottom:0;
    background:rgba(43,26,36,.4); opacity:0; visibility:hidden;
    transition:opacity .2s ease, visibility 0s linear .2s; z-index:205;
  }
  .nav-overlay.open{ opacity:1; visibility:visible; transition:opacity .2s ease; }

  .nav-links{
    position:fixed; top:93px; right:0; bottom:0; width:min(84vw, 340px);
    background:var(--cream); border-left:1px solid var(--line); box-shadow:var(--shadow);
    flex-direction:column; align-items:stretch; padding:24px;
    transform:translateX(100%); visibility:hidden;
    transition:transform .25s ease, visibility 0s linear .25s;
    z-index:210;
  }
  .nav-links.open{ transform:translateX(0); visibility:visible; transition:transform .25s ease; }

  .nav-links-scroll{ display:flex; flex-direction:column; gap:0; overflow-y:auto; flex:1; }
  .nav-links-scroll > a{ padding:14px 4px; border-bottom:1px solid var(--line); }
  .nav-login-mobile{ display:block; padding:14px 4px; font-weight:600; color:var(--pink-dark); }

  .nav-dropdown{ display:flex; flex-direction:column; }
  .nav-dropdown-toggle{ justify-content:space-between; width:100%; padding:14px 4px; border-bottom:1px solid var(--line); }

  .nav-dropdown-link-group{
    width:100%; justify-content:space-between;
    padding:14px 4px; border-bottom:1px solid var(--line);
  }
  .nav-dropdown-link-group .nav-dropdown-toggle{
    width:auto; padding:6px; border-bottom:none;
  }

  .nav-dropdown-menu{
    position:static; display:none; transform:none; box-shadow:none; border:none;
    background:transparent; padding:0 0 0 14px; min-width:0;
  }
  .nav-dropdown-menu.open{ display:flex; }
  .nav-dropdown-menu a{ padding:12px 4px; border-radius:0; }

  .nav-drawer-footer{ display:block; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
  .nav-drawer-footer .btn{ width:100%; justify-content:center; }
}

/* ===== Hero =====
   Full-bleed background photo + color overlay + white text on top,
   matching the Bo WeWorking reference bar/hero instead of the previous
   light-background two-column layout (text left, photos stacked right).
   encuentro-estudiantes.jpg is used here specifically because it's a
   real high-res photo (3024×3024, unlike the rest of assets/img/ which
   is a modest 640×426). Even so, a wide hero on a retina/high-DPI screen
   can ask for more physical pixels than 3024 provides (e.g. ~3810px on a
   1905px-wide hero at devicePixelRatio 2) — a mild upscale that read as
   pixelated in testing, especially across the photo's flatter-colored
   wall areas. The 1px blur below (with the bg scaled up slightly so the
   blur doesn't reveal the element's edge) smooths that over; it's a
   fraction of the gradient overlay's own blur-like softening and isn't
   meant to look like a "blurred photo" on its own. The gradient overlay
   (brand pink→green, multiply-blended) both ties it to the brand palette
   and darkens it enough for white text contrast, the same trick the Bo
   reference uses with its green tint. */
.hero{ position:relative; overflow:hidden; color:#fff; }
.hero-photo-bg, .hero-photo-overlay{ position:absolute; inset:0; z-index:0; }
.hero-photo-bg{
  background-size:cover; background-position:center 62%;
  filter: blur(1px);
  transform: scale(1.015);
}
.hero-photo-overlay{
  background:
    linear-gradient(180deg, rgba(31,20,26,.15) 0%, rgba(31,20,26,.55) 100%),
    linear-gradient(120deg, rgba(176,47,101,.72) 0%, rgba(76,138,101,.72) 100%);
  mix-blend-mode: multiply;
}
.hero-photo-inner{ position:relative; z-index:1; padding: 120px 24px 72px; }
@media (max-width: 640px){ .hero-photo-inner{ padding: 88px 20px 56px; } }
.hero .wave-divider{ position:relative; z-index:1; }
.eyebrow--onphoto{
  background: rgba(255,255,255,.16); color:#fff; border-color: rgba(255,255,255,.35);
}
.hero-title--onphoto{ color:#fff; }
.hl-pink{ color:#FF9BC8; }
.hl-green{ color:#9FEFC2; }
.lead--onphoto{ color: rgba(255,255,255,.88); }
.wave-divider{ display:block; width:100%; line-height:0; }
.wave-divider svg{ width:100%; height: 70px; display:block; }

/* ===== Cards ===== */
.grid{ display:grid; gap: 28px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-3{ grid-template-columns: 1fr 1fr; } .grid-4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid-3, .grid-2, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background:#fff; border-radius: var(--radius); padding: 30px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.card .icon{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.5rem; margin-bottom: 18px;
  background: var(--pink-soft); color: var(--pink-dark);
}
.card .icon.green{ background: var(--green-soft); color: var(--green-dark); }
.card h3{ font-size: 1.2rem; }
.card p{ color: var(--ink-soft); margin-bottom:0; font-size: .97rem; }

.photo-card{
  border-radius: var(--radius); overflow:hidden; position:relative;
  box-shadow: var(--shadow);
  background:#fff;
}
.photo-card img{ height: 220px; width:100%; object-fit:cover; }
.photo-card .cap{
  padding: 14px 18px; font-weight:600; font-size: .95rem;
  display:flex; align-items:center; justify-content:space-between;
}

/* Pillars */
.pillar{
  display:grid; grid-template-columns: 64px 1fr; gap:22px;
  padding: 28px 0; border-bottom: 1px solid var(--line);
}
.pillar:last-child{ border-bottom:none; }
.pillar .num{
  width:64px; height:64px; border-radius:18px;
  background: var(--pink); color:#fff; font-weight:700; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
}
.pillar:nth-child(2n) .num{ background: var(--green); }

/* Hero stats — compact pill badges floating over the hero photo (like
   the Bo reference's "20+ ESPACIOS / 3 PISOS / 100% EQUIPADO" row),
   sized to their own content instead of stretched into even columns. */
.hero-stats{ display:flex; flex-wrap:wrap; gap:16px; margin-top: 48px; }
.hero-stats .stat{
  background: rgba(20,14,18,.45);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
  padding: 14px 22px;
  min-width: 112px;
}
.stat .n{ font-size:1.5rem; font-weight:800; color:#fff; line-height:1.1; }
.stat .l{
  color: rgba(255,255,255,.75); font-size:.76rem; margin-top:2px;
  text-transform:uppercase; letter-spacing:.05em; font-weight:600;
}

/* Timeline / floors */
.floor-block{ margin-bottom: 64px; }
.floor-block h3{ font-size:1.4rem; margin-bottom: 4px; }
.floor-block .floor-tag{ color: var(--green-dark); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }

/* CTA band */
.cta-band{
  background: linear-gradient(120deg, var(--pink) 0%, var(--pink-dark) 100%);
  color:#fff; border-radius: 28px; padding: 56px; text-align:center;
  position:relative; overflow:hidden;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color: rgba(255,255,255,.9); max-width:640px; margin-inline:auto; }

/* Footer */
.site-footer{
  background: #241820; color: #F4E9EE; padding: 64px 0 28px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } }
.site-footer h4{ color:#fff; font-size:1rem; margin-bottom: 16px; }
.site-footer a{ color:#D9C4CE; }
.site-footer a:hover{ color:#fff; }
.footer-brand img{ height:60px; margin-bottom:14px; filter: brightness(0) invert(1); opacity:.92; }
.footer-links li{ margin-bottom:10px; font-size:.94rem; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:20px;
  font-size:.85rem; color:#B99CA9; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* Form embed wrapper */
.form-embed-wrap{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--line);
  padding: 8px;
  height: 900px;
  display:flex;
}
.form-embed-wrap iframe{ border-radius: 12px; width:100%; height:100%; flex:1; }
@media (max-width: 880px){
  .form-embed-wrap{ height: 1000px; }
}

/* Compact variant: formularios de inscripción dentro del modal (.enroll-modal).
   height:auto (no un alto fijo adivinado) porque form_embed.js redimensiona el
   iframe a su alto real de contenido vía postMessage — el wrapper, sin alto
   explícito, se ajusta solo a eso. min-height es sólo para el instante inicial
   antes de que llegue ese primer resize (si no, se ve un salto/flash feo). */
.form-embed-wrap.form-embed-wrap--compact{ height:auto; min-height:400px; }

/* Modal de inscripción: el botón "Inscribirte" de cada curso/taller abre el
   formulario acá en vez de embeberlo directo en la tarjeta de Inversión.
   Genérico y reusable — ver [data-modal-target]/[data-modal-close] en main.js.
   z-index 220: por encima del cajón mobile (210) y el WhatsApp float (200). */
.enroll-modal{
  position:fixed; inset:0; z-index:220;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.enroll-modal[hidden]{ display:none; }
.enroll-modal-overlay{ position:absolute; inset:0; background:rgba(26,15,20,.55); }
.enroll-modal-panel{
  position:relative; background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  width:100%; max-width:560px; max-height:90vh; overflow:auto;
  padding:20px 16px 16px; animation: enroll-modal-in .22s ease-out;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge legacy */
}
.enroll-modal-panel::-webkit-scrollbar{ display:none; } /* Chrome/Safari — sigue andando el scroll, solo se oculta la barra */
.enroll-modal-close{
  position:absolute; top:10px; right:10px; width:36px; height:36px; z-index:1;
  border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:1.1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.enroll-modal-close:hover{ background: var(--pink-soft); }
@keyframes enroll-modal-in{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .enroll-modal-panel{ animation:none; }
}
body.modal-open{ overflow:hidden; }

/* Breadcrumb / page hero small */
.page-hero{
  background: linear-gradient(180deg, #fff 0%, var(--green-soft) 100%);
  padding: 64px 0 56px;
}

/* Contact info list */
.info-list li{
  display:flex; gap:14px; align-items:flex-start; margin-bottom: 20px;
}
.info-list .ic{
  width:42px; height:42px; border-radius:12px; flex:none;
  background: var(--pink-soft); color: var(--pink-dark);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}

.badge-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding: 8px 16px; font-size:.85rem; font-weight:600; color: var(--ink-soft);
  box-shadow: var(--shadow);
}

/* "Próximamente" badge — cursos/talleres sin inscripción real todavía */
.badge-proximamente{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--green-soft); color: var(--green-dark);
  border: 1px solid #CDE8D9; border-radius:999px;
  padding: 4px 12px; margin-bottom:14px;
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.card .badge-proximamente{ display:inline-flex; }

.btn-disabled{
  background: var(--line); color: var(--ink-soft);
  cursor:default; pointer-events:none; box-shadow:none;
}
.btn-disabled:hover{ background: var(--line); transform:none; }

/* Course pricing */
.price-tag{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding: 14px 18px; border-radius: 14px;
  background: var(--pink-soft); border: 1px solid #F3CADF;
  margin-bottom: 10px;
}
.price-tag .label{ font-size:.92rem; color: var(--ink-soft); }
.price-tag .amount{ font-size:1.25rem; font-weight:800; color: var(--pink-dark); white-space:nowrap; }

/* Simple bullet list (course syllabus topics) */
.bullet-list{ list-style:disc; padding-left:20px; color:var(--ink-soft); }
.bullet-list li{ margin-bottom:6px; }

/* Checklist (benefits/offerings included in something, e.g. membership) */
.check-list{ list-style:none; padding:0; }
.check-list li{
  position:relative; padding-left:38px; margin-bottom:14px;
}
.check-list li:last-child{ margin-bottom:0; }
.check-list li::before{
  content:"✓";
  position:absolute; left:0; top:-1px;
  width:24px; height:24px; border-radius:50%;
  background:var(--green-soft); color:var(--green-dark);
  font-size:.8rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* Team cards. .topic-card shares the same look for non-photo topic cards
   (e.g. the "Oportunidades de articulación" carousel below) — kept as a
   separate class so it isn't picked up by main.js's site-wide reveal
   selector, which targets .team-card for the real team roster in
   equipo.html and would otherwise double-fade cards already animated by
   the marquee loop. */
.team-card, .topic-card{
  background:#fff; border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line);
  text-align:center;
}
.team-card img{ width:100%; height:280px; object-fit:cover; display:block; }
.team-card .team-body, .topic-card .team-body{ padding:24px 22px 28px; }
.team-card h3, .topic-card h3{ font-size:1.15rem; margin:10px 0 6px; }
.team-card p, .topic-card p{ color: var(--ink-soft); font-size:.92rem; margin-bottom:0; }

/* Horizontal auto-scrolling card carousel ("Oportunidades de articulación").
   The track's HTML content is duplicated once so translateX(-50%) loops
   seamlessly; the duplicate copy is aria-hidden since it's a visual-only
   repeat. Pauses on hover/focus so a visitor can stop it to read a card. */
.card-marquee{
  overflow:hidden; width:100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.card-marquee-track{
  display:flex; width:max-content; gap:24px;
  animation: card-marquee-scroll 36s linear infinite;
}
.card-marquee:hover .card-marquee-track,
.card-marquee:focus-within .card-marquee-track{
  animation-play-state: paused;
}
.card-marquee-track .topic-card{ flex:0 0 300px; width:300px; }
@keyframes card-marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .card-marquee-track{ animation:none; }
  .card-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}

/* Social icons (footer) */
.social-icons{ display:flex; gap:10px; margin-top:18px; }
.social-icons a{
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, transform .15s ease;
}
.social-icons a:hover{ background: var(--pink); transform: translateY(-2px); }
.social-icons svg{ width:18px; height:18px; fill:#F4E9EE; }

/* WhatsApp floating button */
.whatsapp-float{
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px rgba(37,211,102,.4);
  transition: transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px rgba(37,211,102,.5); }
.whatsapp-float svg{ width:32px; height:32px; fill:#fff; }
@media (max-width: 600px){
  .whatsapp-float{ right:16px; bottom:16px; width:54px; height:54px; }
  .whatsapp-float svg{ width:28px; height:28px; }
}