/* Estudio Rovira — static site styles */
:root {
  --background: #ffffff;
  --foreground: #1a1a24;
  --primary-deep: #1f2540;
  --gold: #b6935a;
  --gold-soft: #d9c39a;
  --paper: #f7f6f4;
  --muted: #f2f1ee;
  --muted-fg: #6a6a72;
  --border: #e2e1dd;
  --white: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--foreground);
  background: var(--background);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.serif, h1, h2, h3, h4 {
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- Layout ---------- */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 640px) {
  .container { padding: 0 40px; } 
}

.section { padding: 112px 0; border-bottom: 1px solid var(--border); }
@media (min-width: 640px) { .section { padding: 160px 0; } }
.section.paper { background: var(--paper); border-bottom: 0; }
.section.dark { background: var(--primary-deep); color: #fff; border-bottom: 0; }
.section.no-border { border-bottom: 0; }
.section.tight { padding-top: 144px; padding-bottom: 64px; }
@media (min-width: 640px) { .section.tight { padding-top: 176px; padding-bottom: 96px; } }

/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color .3s, border-color .3s;
}
.header.transparent { background: transparent; }
.header.scrolled { background: var(--background); border-bottom: 1px solid var(--border); }
.header-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
@media (min-width: 640px) { .header-inner { padding: 20px 40px; } }
.brand {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px; letter-spacing: 0.18em; color: #fff;
}
@media (min-width: 640px) { .brand { font-size: 20px; } }
.header.scrolled .brand { color: var(--primary-deep); }

.nav { display: none; gap: 40px; }
@media (min-width: 1024px) { .nav { display: flex; align-items: center; } }
.nav a {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em;
  color: rgba(255,255,255,.85); transition: color .2s;
}
.nav a:hover { color: #fff; }
.header.scrolled .nav a { color: rgba(26,26,36,.8); }
.header.scrolled .nav a:hover { color: var(--primary-deep); }

.header-right { display: flex; align-items: center; gap: 12px; }
.lang-switch { display: none; align-items: center; font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,.8); }
@media (min-width: 640px) { .lang-switch { display: flex; } }
.header.scrolled .lang-switch { color: rgba(26,26,36,.7); }
.lang-switch a { padding: 0 8px; transition: opacity .2s; opacity: .6; }
.lang-switch a.active { opacity: 1; color: #fff; }
.header.scrolled .lang-switch a.active { color: var(--primary-deep); }
.lang-switch a + a { border-left: 1px solid currentColor; }
.lang-switch a:hover { opacity: 1; }

.menu-toggle {
  display: inline-flex; background: none; border: 0; color: #fff; cursor: pointer;
}
.header.scrolled .menu-toggle { color: var(--foreground); }
@media (min-width: 1024px) { .menu-toggle { display: none; } }

.mobile-menu { display: none; background: var(--background); border-top: 1px solid var(--border); }
.mobile-menu.open { display: block; }
.mobile-menu .container { padding-top: 16px; padding-bottom: 16px; display: flex; flex-direction: column; }
.mobile-menu a {
  padding: 16px 0;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--foreground); border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: 0; }

/* ---------- Kicker ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
}
.kicker::before {
  content: ""; display: inline-block; width: 32px; height: 1px; background: var(--gold);
}
.kicker.on-dark { color: var(--gold-soft); }
.kicker.on-dark::before { background: var(--gold-soft); }

/* ---------- Hero (CORREGIDO) ---------- */
.hero {
  position: relative; height: 100vh; min-height: 640px; width: 100%; overflow: hidden;
  color: #fff;
}
.hero img.bg {
  position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover;
}
.hero .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(31,37,64,.85), rgba(31,37,64,.55) 45%, rgba(31,37,64,.4));
}
.hero-content {
  position: relative; z-index: 2;
  height: 100%; display: flex; align-items: flex-end;
  padding-bottom: 96px;
}
@media (min-width: 640px) { .hero-content { padding-bottom: 128px; } }

/* Se eliminó la regla rota que cambiaba los márgenes laterales */
.hero-content .container {
  width: 100%;
}

.hero h1 {
  margin-top: 32px;
  font-size: 2.5rem; font-weight: 300; line-height: 1.05;
  max-width: 900px;
}
@media (min-width: 640px) { .hero h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 4.5rem; } }

.hero p.lead {
  margin-top: 32px; max-width: 560px;
  font-size: 17px; font-weight: 300; color: rgba(255,255,255,.85); line-height: 1.7;
}
.hero-cta { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Buttons ---------- */
.btn-ghost {
  display: inline-flex; align-items: center;
  padding: 16px 28px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em;
  border: 1px solid var(--primary-deep); color: var(--primary-deep);
  transition: background-color .3s, color .3s, border-color .3s;
  cursor: pointer; background: transparent;
}
.btn-ghost:hover { background: var(--primary-deep); color: #fff; }
.btn-ghost.on-dark { border-color: #fff; color: #fff; }
.btn-ghost.on-dark:hover { background: #fff; color: var(--primary-deep); }
.btn-ghost.on-dark-muted { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.8); }
.btn-ghost.on-dark-muted:hover { border-color: #fff; color: #fff; }
.btn-ghost .arrow { margin-left: 8px; }

/* ---------- Grid helpers ---------- */
.grid-12 { 
  display: grid; 
  gap: 24px; 
  grid-template-columns: 1fr; 
}

@media (min-width: 1024px) { 
  .grid-12 { 
    grid-template-columns: repeat(12, 1fr); 
    gap: 64px; 
  } 
}

.col-4, .col-5, .col-7, .col-8 { 
  grid-column: span 12; 
}

@media (min-width: 1024px) {
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
}

.section h2 {
  color: var(--primary-deep);
  font-size: 1.75rem; 
  font-weight: 300; 
  margin-top: 24px;
}
@media (min-width: 640px) { 
  .section h2 { 
    font-size: 3rem; 
    margin-top: 32px;
  } 
}

.section.dark h2 { color: #fff; }

.section .intro {
  margin-top: 24px; 
  font-size: 15px;  
  font-weight: 300; 
  line-height: 1.6;
  color: rgba(26,26,36,.8); 
  max-width: 100%;  
}
@media (min-width: 640px) {
  .section .intro {
    margin-top: 40px;
    font-size: 17px;
    line-height: 1.7;
    max-width: 780px; 
  }
}

.section.dark .intro { color: rgba(255,255,255,.75); }

.section .subtitle {
  margin-top: 24px; 
  max-width: 100%; 
  font-size: 15px; 
  font-weight: 300; 
  color: rgba(26,26,36,.7); 
  line-height: 1.7;
}
@media (min-width: 640px) {
  .section .subtitle {
    margin-top: 32px;
    max-width: 420px;
  }
}

/* Profile 3-block editorial */
.editorial {
  margin-top: 40px; 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 1px;
  background: var(--border); 
  border: 1px solid var(--border);
}
@media (min-width: 640px) { 
  .editorial { 
    grid-template-columns: repeat(3, 1fr); 
    margin-top: 80px;
  } 
}

.editorial-block { 
  background: var(--background); 
  padding: 24px; 
}
@media (min-width: 640px) { 
  .editorial-block { 
    padding: 40px; 
  } 
}

.editorial-block h3 { color: var(--primary-deep); font-size: 20px; }
@media (min-width: 640px) { .editorial-block h3 { font-size: 24px; } }
.editorial-block .rule { height: 1px; width: 32px; background: var(--gold); margin: 16px 0 20px; }
.editorial-block p { font-size: 14px; font-weight: 300; color: rgba(26,26,36,.7); line-height: 1.7; }

/* Areas */
.areas-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border); }
@media (min-width: 640px) { .areas-grid { grid-template-columns: 1fr 1fr; } }
.area-item {
  padding: 24px 0; 
  border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) {
  .area-item { padding: 40px 32px; }
  .area-item:nth-child(odd) { border-right: 1px solid var(--border); }
}
.area-num { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; color: var(--gold); }
.area-item h3 { margin-top: 16px; color: var(--primary-deep); font-size: 20px; }
@media (min-width: 640px) { .area-item h3 { font-size: 24px; } }
.area-item p { margin-top: 12px; font-size: 14px; font-weight: 300; color: rgba(26,26,36,.7); line-height: 1.7; }

/* Founder card on home */
.founder-grid { display: grid; gap: 56px; grid-template-columns: 1fr; align-items: flex-start; }
@media (min-width: 1024px) { .founder-grid { grid-template-columns: 5fr 7fr; } }
.founder-photo img { aspect-ratio: 4/5; object-fit: cover; filter: grayscale(1) contrast(1.05); width: 100%; }
.founder-body .role { margin-top: 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.founder-body .divider { margin-top: 32px; height: 1px; width: 48px; background: var(--gold); }
.founder-body p.summary { margin-top: 32px; font-size: 17px; font-weight: 300; line-height: 1.7; color: rgba(26,26,36,.8); }
.founder-body ul.highlights {
  margin-top: 40px; border-top: 1px solid var(--border); padding-top: 32px;
  display: flex; flex-direction: column; gap: 16px;
  font-size: 14px; color: rgba(26,26,36,.75);
}
.founder-body ul.highlights li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.founder-body ul.highlights li::before {
  content: ""; display: block; width: 16px; height: 1px; background: var(--gold); margin-top: 12px;
}
.founder-body .cta { margin-top: 48px; }

/* Partners cards on home */
.partners-grid { margin-top: 64px; display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .partners-grid { grid-template-columns: 1fr 1fr; } }
.partner-card { display: block; }
.partner-card .photo {
  aspect-ratio: 4/5; overflow: hidden; background: var(--muted);
}
.partner-card .photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  filter: grayscale(1) contrast(1.05); transition: filter .7s;
}
.partner-card:hover .photo img { filter: none; }
.partner-card .meta { padding-top: 24px; border-top: 1px solid var(--border); margin-top: 24px; }
.partner-card .meta h3 { color: var(--primary-deep); font-size: 24px; }
.partner-card .meta .role { margin-top: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.partner-card .meta .langs { margin-top: 16px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(26,26,36,.55); }
.partner-card .meta .link { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary-deep); transition: color .2s; }
.partner-card:hover .meta .link { color: var(--gold); }

/* Contact */
.contact-list { margin-top: 48px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 32px; display: flex; flex-direction: column; gap: 24px; font-size: 14px; }
.contact-row { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; color: rgba(255,255,255,.95); }
.contact-row .label { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.contact-row .value { margin-top: 4px; }
.contact-row a { color: inherit; }
.contact-row a:hover { color: var(--gold-soft); }

.contact-form {
  background: #fff; color: var(--foreground); padding: 32px;
}
@media (min-width: 640px) { .contact-form { padding: 48px; } }
.contact-form label {
  display: block; margin-bottom: 24px;
}
.contact-form .field-label { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(26,26,36,.55); margin-bottom: 4px; }
.contact-form input, .contact-form textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; padding: 12px 0; font: inherit; font-size: 14px;
  transition: border-color .2s;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary-deep); }
.contact-form textarea { resize: none; }
.contact-form .sent { color: var(--gold); font-size: 14px; margin-top: 12px; }

/* Footer */
.footer { background: var(--primary-deep); color: #fff; }
.footer-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 64px 24px;
  display: grid; gap: 48px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .footer-inner { padding: 64px 40px; } }
@media (min-width: 768px) { .footer-inner { grid-template-columns: 4fr 5fr 3fr; align-items: start; } }
.footer .brand-line { font-family: "Source Serif 4", Georgia, serif; font-size: 15px; letter-spacing: 0.18em; }
.footer .rule { margin-top: 16px; height: 1px; width: 40px; background: var(--gold); }
.footer .place { margin-top: 24px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.footer .contact-block { font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.7; }
.footer .contact-block div { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.footer .contact-block .icon { color: var(--gold); flex-shrink: 0; }
.footer .contact-block a:hover { color: var(--gold); }
.footer .social { text-align: left; }
@media (min-width: 768px) { .footer .social { text-align: right; } }
.footer .social a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.8);
}
.footer .social a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
}
/* .footer-bottom .container {
  padding-top: 24px; padding-bottom: 24px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.55);
} */

/* ==========================================
   FOOTER BOTTOM (CORREGIDO PARA FLEXBOX)
   ========================================== */
   .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.15);
  }
  
  .footer-bottom .container {
    padding-top: 24px; 
    padding-bottom: 24px;
    font-size: 11px; 
    letter-spacing: 0.18em; 
    text-transform: uppercase; 
    color: rgba(255,255,255,.55);
    
    /* Flexbox robusto */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Evitamos que salte de línea en pantallas de escritorio */
    flex-wrap: nowrap; 
    width: 100%;
  }
  
  /* Forzamos a que los bloques internos no se encojan ni colapsen */
  .footer-bottom .copyright,
  .footer-bottom .powered-by {
    white-space: nowrap; /* Evita que el propio texto salte de línea internamente */
  }
  
  /* Estilos elegantes para el enlace de Microcomputers */
  .footer-bottom .powered-by a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
  }
  
  .footer-bottom .powered-by a:hover {
    color: var(--gold);
  }
  
  /* RESPONSIVE: Solo si la pantalla es realmente chica (celulares) permitimos el apilado */
  @media (max-width: 768px) {
    .footer-bottom .container {
      flex-wrap: wrap; /* Permitimos el salto de línea solo en celulares */
      flex-direction: column;
      justify-content: center;
      text-align: center;
      gap: 12px; /* Espacio vertical entre ambos textos en celular */
    }
  }

/* Back link (interior pages) */
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 40px; transition: color .2s;
}
.back-link:hover { color: #fff; }

/* Interior page hero */
.page-hero { padding: 144px 0 64px; background: var(--primary-deep); color: #fff; }
@media (min-width: 640px) { .page-hero { padding: 176px 0 96px; } }
.page-hero h1 { font-size: 2.25rem; font-weight: 300; line-height: 1.1; margin-top: 32px; }
@media (min-width: 640px) { .page-hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .page-hero h1 { font-size: 3.75rem; } }

.founder-hero-grid { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 1024px) { .founder-hero-grid { grid-template-columns: 4fr 8fr; } }
.founder-hero-grid img { aspect-ratio: 4/5; object-fit: cover; filter: grayscale(1) contrast(1.05); width: 100%; }
.founder-hero-grid .role { margin-top: 16px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft); }
.founder-hero-grid p.summary { margin-top: 32px; font-size: 17px; color: rgba(255,255,255,.8); line-height: 1.7; font-weight: 300; max-width: 720px; }
.founder-hero-grid a.contact-direct {
  margin-top: 40px; display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft);
}
.founder-hero-grid a.contact-direct:hover { color: #fff; }

/* Founder body sections */
.founder-body-section { max-width: 900px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 640px) { .founder-body-section { padding: 0 40px; } }
.founder-body-section .block { margin-bottom: 64px; }
.founder-body-section .block .rule { height: 1px; width: 40px; background: var(--gold); margin-bottom: 20px; }
.founder-body-section .block h2 { color: var(--primary-deep); font-size: 24px; font-weight: 300; line-height: 1.2; margin-top: 0; }
@media (min-width: 640px) { .founder-body-section .block h2 { font-size: 28px; } }
.founder-body-section .block .content { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; color: rgba(26,26,36,.8); line-height: 1.75; font-weight: 300; }
.founder-body-section .block .content ul { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

/* Founder accordion (details) */
.founder-body-section .details { border-top: 1px solid var(--border); }
.founder-body-section details { border-bottom: 1px solid var(--border); }
.founder-body-section summary {
  list-style: none; cursor: pointer;
  padding: 24px 0; display: flex; align-items: baseline; gap: 20px;
}
.founder-body-section summary::-webkit-details-marker { display: none; }
.founder-body-section summary::after {
  content: "+"; margin-left: auto; font-size: 20px; color: var(--gold); transition: transform .2s;
}
.founder-body-section details[open] summary::after { content: "−"; }
.founder-body-section summary .num { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.founder-body-section summary .title { font-family: "Source Serif 4", Georgia, serif; font-size: 20px; font-weight: 300; color: var(--primary-deep); }
@media (min-width: 640px) { .founder-body-section summary .title { font-size: 24px; } }
.founder-body-section details .content { padding: 0 0 32px; display: flex; flex-direction: column; gap: 16px; font-size: 15px; color: rgba(26,26,36,.75); line-height: 1.75; font-weight: 300; max-width: 780px; }
.founder-body-section details .content ul { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

/* Partner profile pages */
.partner-section { padding: 80px 0; }
@media (min-width: 640px) { .partner-section { padding: 112px 0; } }
.partner-section.paper { background: var(--paper); border-top: 1px solid var(--border); }
.partner-grid { display: grid; gap: 56px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .partner-grid { grid-template-columns: 4fr 8fr; } }
.partner-side img { aspect-ratio: 4/5; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.05); width: 100%; }
.partner-side h2 { margin-top: 32px; color: var(--primary-deep); font-size: 28px; font-weight: 300; }
.partner-side .role { margin-top: 12px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.partner-side .links { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.partner-side .links a { display: inline-flex; align-items: center; gap: 12px; color: var(--primary-deep); transition: color .2s; }
.partner-side .links a:hover { color: var(--gold); }
.partner-body { display: flex; flex-direction: column; gap: 48px; }
.partner-body .block .rule { height: 1px; width: 40px; background: var(--gold); margin-bottom: 20px; }
.partner-body .block h3 { color: var(--primary-deep); font-size: 20px; font-weight: 300; }
@media (min-width: 640px) { .partner-body .block h3 { font-size: 24px; } }
.partner-body .block ul { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 24px; display: flex; flex-direction: column; gap: 16px; color: rgba(26,26,36,.75); line-height: 1.75; font-weight: 300; }
.partner-body .block li { display: grid; grid-template-columns: auto 1fr; gap: 16px; }
.partner-body .block li .n { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; color: var(--gold); padding-top: 4px; }
.partner-body .block .langs { margin-top: 16px; color: rgba(26,26,36,.75); font-weight: 300; }
/* Utility icons via inline SVG sizing */
.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; }
.icon-xs { width: 12px; height: 12px; }

/* Scroll targets accounting for fixed header */
[id] { scroll-margin-top: 80px; }