/*
  =========================================================
  Rotary Club Belgrano — Sitio institucional (CSS)
  ---------------------------------------------------------
  Objetivo de este archivo:
  - Estilos centralizados (sin <style> inline en el HTML).
  - Layout responsivo con breakpoints claros.
  - Navbar con logo de 100px y menú hamburguesa en mobile.
  - Comentarios para que puedas modificar con confianza.
  =========================================================
*/

/* -----------------------------
   Variables de diseño (tokens)
   ----------------------------- */
:root{
  /* Paleta oficial de campaña */
  --royal-blue: #17458f;  /* Azul Rotary (principal) */
  --azure: #005daa;       /* Azul secundario */
  --gold: #f7a81b;        /* Amarillo / acento */
  --charcoal: #58585a;    /* Gris para textos */
  --black: #000000;       /* Negro */
  --white: #ffffff;       /* Blanco */

  /* Tipografías (ver HTML: Google Fonts) */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif; /* Aproxima Sentinel */
  --font-marker: 'Permanent Marker', cursive;

  /* Layout */
  --container: 1120px;      /* Ancho máximo del contenido */
  --gutter: clamp(16px, 4vw, 24px); /* Margen lateral consistente (mobile → desktop) */

  /* Radio / sombras */
  --radius-xl: 24px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,.08);

  /* Navbar */
  --nav-height: 96px;       /* Altura para acomodar logo de 100px */
  --logo-height: 100px;     /* Logo pedido: 100px */
}

/* -----------------------------
   Reset y base
   ----------------------------- */
*{ box-sizing:border-box; }          /* Incluye padding/border en el cálculo del ancho/alto */

html, body{
  margin:0;                            /* Elimina margen por defecto del navegador */
  padding:0;                           /* Elimina padding por defecto del navegador */
  background:#fff;                     /* Fondo general */
  color:var(--charcoal);               /* Color base de texto */
}

body{
  font-family:var(--font-sans);        /* Fuente principal */
  line-height:1.6;                     /* Altura de línea para legibilidad */
  font-size:18px;                      /* Tamaño base */
}

/* Accesibilidad: texto solo para lectores de pantalla */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Contenedor central con márgenes controlados */
.wrap{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* Utilitarios de espaciado (para evitar inline styles) */
.mt-12{ margin-top:12px; }
.mt-48{ margin-top:48px; }
.mb-15{ margin-bottom:15px; }
.mb-24{ margin-bottom:24px; }

/* -----------------------------
   Botones
   ----------------------------- */
.btn{
  display:inline-flex;                 /* Permite alinear ícono + texto si lo necesitás */
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:999px;                 /* Botón “pill” */
  border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(180deg, #ffffff, #f3f6fb);
  color:#0b2850;
  text-decoration:none;
  font-weight:700;
  box-shadow:var(--shadow-soft);
}

/* Variante primaria (azules) */
.btn.primary{
  background:linear-gradient(180deg, var(--azure), var(--royal-blue));
  color:#fff;
  border:none;
}

/* Botón a ancho completo (form) */
.btn-full{
  width:100%;
  justify-content:center;
}

/* -----------------------------
   Navbar
   ----------------------------- */
.nav{
  position:sticky;                      /* Se queda pegada arriba al scrollear */
  top:0;
  z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* Contenedor interno de la navbar */
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:var(--nav-height);         /* Asegura lugar para el logo más grande */
  gap:16px;
}

/* Link de marca */
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}

/* Logo (pedido: 100px) */
.brand-logo{
  height:var(--logo-height);            /* 100px */
  width:auto;
  display:block;                        /* Evita espacios “fantasma” debajo de img */
}

/* Links de navegación (desktop) */
.nav-links{
  display:flex;
  align-items:center;
  gap:22px;
}

/* Links del menú */
.nav-links a{
  color:#1d2a44;
  text-decoration:none;
  font-weight:600;
}

/* Botón hamburguesa (por defecto oculto en desktop) */
.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}

/* Barras del ícono hamburguesa */
.nav-toggle-bar{
  display:block;
  width:22px;
  height:2px;
  background:#1d2a44;
  margin:5px 0;
  border-radius:999px;
}

/* -----------------------------
   Hero
   ----------------------------- */
.hero{
  background:linear-gradient(180deg, #0c2444 0%, #0e2b4f 40%, #0f315a 100%);
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
  box-shadow:0 20px 60px rgba(0,0,0,.12);
  margin-top:24px;
}

/* Grid del hero (2 columnas en desktop) */
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:32px;
  padding:72px 0;
}

/* Bloque de texto del hero */
.hero-copy{ min-width:0; } /* Evita overflow por textos largos en grid */

/* Caja JUNTOS (patrón campaña) */
.juntos-wrap{ position:relative; }
.juntos-box{
  display:inline-block;
  border-radius:12px; /* Pedido: menos cuadrado */
  font-family:var(--font-serif);
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(0,0,0,.13);
  padding:12px 18px;
  border:1px solid #fff;
}

/* Texto interno de JUNTOS */
.juntos-box span{
  font-size:13px;
  letter-spacing:.2em;
}

/* Verbo destacado */
.verb{
  font-family:var(--font-marker);
  color:#fff;
  font-size:64px;
  line-height:1;
  margin:14px 0 8px;
  text-shadow:0 0 24px rgba(0,0,0,.35), 0 0 2px rgba(255,255,255,.6);
}

/* Título del hero */
.hero-title{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:48px;
  color:#fff;
  margin:12px 0 16px;
}

/* Párrafo lead */
.hero-lead{
  max-width:56ch;
  color:#cfd9ff;
  margin:0;
}

/* CTAs en línea */
.hero-ctas{
  display:flex;
  gap:12px;
  margin-top:24px;
  flex-wrap:wrap; /* Evita que se corten en pantallas medianas */
}

/* Contenedor de la pill */
.hero-pill{ margin-top:24px; }

/* Pill (estadística) */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:#fff;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:999px;
  padding:8px 14px;
}

/* Arte del hero */
.hero-art{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:360px; /* Mantiene altura para la imagen circular */
}

/* Imagen circular “planeta” */
.planet{
  width:360px;
  height:360px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:inset 0 0 40px rgba(255,255,255,.3), 0 30px 60px rgba(0,0,0,.3);
}

/* Tarjeta flotante sobre el planeta */
.hero-card{
  position:absolute;
  right:12%;
  top:18%;
  background:#0e2b4f;
  border-radius:16px;
  padding:16px;
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* -----------------------------
   Secciones y tipografía
   ----------------------------- */
/* Estilo general de H3 (para títulos fuera de cards, ej. “Compromiso Permanente”) */
h3{
  font-family:var(--font-serif);
  color:#0b2850;
}

section{ padding:72px 0; } /* Padding vertical base para secciones */

.section-title{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:36px;
  color:#0b2850;
  text-align:center;
  margin:0 0 8px;
}

.section-title--light{ color:#fff; }
.section-title--brand{ color:var(--royal-blue); }

.section-sub{
  color:#3b4a68;
  text-align:center;
  max-width:70ch;
  margin:0 auto 32px;
}

.section-sub--light{ color:#fff; opacity:.95; }
.section-sub--dark{ color:#33415c; }

/* Subtítulo/kicker (Proyectos emblemáticos) */
.section-kicker{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:24px;
  color:#0b2850;
  text-align:center;
  margin:48px 0 24px;
}

/* Sección con fondo suave */
.section-muted{ background:#f6f8fc; }

/* Sección en azul */
.section-blue{ background:var(--royal-blue); color:#fff; }

/* En sección azul, aseguramos contraste alto en tarjetas */
.section-blue .serve--transparent{
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.35);
}
.section-blue .serve--transparent h4,
.section-blue .serve--transparent p{
  color:#fff !important;
}


/* -----------------------------
   Layouts de contenido
   ----------------------------- */
.feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
}

/* Variante: alinear arriba (para cards largas) */
.feature-top{
  align-items:flex-start;
  gap:48px;
}

/* Card base */
.card{
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow-soft);
  padding:24px;
}

/* Tipografía de títulos dentro de cards (serifa + azul como en el original) */
.card h3{
  font-family:var(--font-serif);
  font-weight:900;
  color:#0b2850;
  margin-top:0;
}

/* En cards azules, el título debe ser blanco */
.card-blue h3{ color:#fff; }

/* Card centrada (para imágenes) */
.card-center{ text-align:center; }

/* Borde suave */
.card-bordered{
  box-shadow:none;
  border:1px solid #e0e0e0;
}

/* Card azul (para bloque “Prueba Cuádruple”) */
.card-blue{
  background:var(--royal-blue);
  color:#fff;
}

/* Sombra más marcada */
.card-shadow{
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* H3 claro dentro de card azul */
.h3-light{
  color:#fff;
  margin:0 0 16px;
}

/* Imagen dentro de cards */
.card-image{
  width:100%;
  height:auto;
  border-radius:16px;
  object-fit:cover;
}

/* Listas */
.quad-list{
  list-style:none;
  padding:0;
  margin:0;
  font-size:1.1em;
}

.quad-list li{ margin-bottom:8px; }

.disc-list{
  list-style:disc;
  padding-left:20px;
  margin-top:12px;
  color:#3b4a68;
}

/* Texto de “Impacto” */
.impact{
  margin-top:12px;
  font-style:italic;
  color:var(--royal-blue);
}

/* -----------------------------
   Grids (cards tipo “serve”)
   ----------------------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
}

.serve{
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

/* Variante transparente para secciones azules */
.serve--transparent{
  background:rgba(255,255,255,0.1);
  color:#fff;
  box-shadow:none;
  border:1px solid rgba(255,255,255,0.25);
}

/* Asegura color de títulos/textos dentro de tarjetas transparentes */
.serve--transparent h4,
.serve--transparent p{
  color:#fff;
}

/* Mini “thumb” superior */
.thumb{
  height:180px;
  background:linear-gradient(135deg, #0b3c7d, #17458f);
}

/* Thumbs con imágenes (separados del HTML para evitar inline styles) */
.thumb-communities{
  background:url('https://rotarybelgrano.org/noticias/wp-content/webp-express/webp-images/uploads/2020/01/RC05.jpg.webp') center center / cover no-repeat;
}
.thumb-companies{
  background:url('https://rotarybelgrano.org/noticias/wp-content/webp-express/webp-images/uploads/2020/01/RC08-1536x1023.jpg.webp') center center / cover no-repeat;
}
.thumb-leaders{
  background:url('https://rotarybelgrano.org/noticias/wp-content/webp-express/webp-images/uploads/2020/01/RC12.jpg.webp') center center / cover no-repeat;
}

/* Contenido de las tarjetas */
.serve .content{ padding:20px; }

.serve h4{
  margin:0 0 8px;
  color:#0b2850;
  font-family:var(--font-serif);
  font-size:1.2em;
}

.serve p{
  margin:0 0 8px;
  color:#3b4a68;
}

/* -----------------------------
   CTA ancho
   ----------------------------- */
.cta-wide{
  background:var(--royal-blue);
  color:#fff;
  border-radius:24px;
  padding:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.cta-wide h3{
  font-family:var(--font-serif);
  font-size:28px;
  margin:0;
}

.cta-wide p{
  margin:6px 0 0;
  opacity:.9;
}

/* -----------------------------
   Formulario (Hazte Socio)
   ----------------------------- */
.contact-blue-section{
  background:var(--royal-blue);
  color:var(--white);
}

/* Card en sección azul: fondo semitransparente */
.contact-card{
  background:rgba(255, 255, 255, 0.1);
  border:1px solid rgba(255, 255, 255, 0.3);
  box-shadow:none;
  color:#fff;
}

/* Textos en sección azul */
.contact-blue-section .section-title,
.contact-blue-section .section-sub,
.contact-blue-section h3,
.contact-blue-section p,
.contact-blue-section label,
.contact-blue-section strong{
  color:#fff;
}

/* Grupo de inputs */
.form-group{ margin-bottom:15px; }

.form-group label{
  display:block;
  margin-bottom:5px;
  font-weight:600;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea{
  width:100%;
  padding:10px;
  border-radius:5px;
  box-sizing:border-box;
  background:rgba(255, 255, 255, 0.92);
  color:var(--charcoal);
  border:1px solid rgba(0,0,0,0.12);
}

.form-group textarea{ resize:vertical; }

/* Imagen lateral del contacto */
.club-belgrano-img{
  width:100%;
  height:auto;
  border-radius:16px;
  object-fit:cover;
}

/* Logo de Rotary Foundation */
.rotary-foundation-logo{
  max-width:100%;
  height:auto;
  margin:15px 0;
}

.separator{ margin:20px 0; }

/* Columna derecha del bloque de contacto (imagen + card) */
.contact-side{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* -----------------------------
   Footer
   ----------------------------- */
.footer{
  background:var(--royal-blue);
  padding:48px 0 72px;
  color:#cfd9ff;
}

.foot{
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  align-items:center;
}

.footer-brand{ text-decoration:none; }

/* Logo del footer (más chico que el de la navbar) */
.footer-logo{
  height:40px;
  width:auto;
  display:block;
}

/* Social icons */
.foot-social{
  display:flex;
  gap:15px;
  font-size:24px;
}

.foot-social a{
  color:#cfd9ff;
  text-decoration:none;
}

/* -----------------------------
   Responsive (breakpoints)
   ----------------------------- */

/* 980px: pasa hero y feature a una columna */
@media (max-width: 980px){
  /* El gutter ya es responsivo por clamp(), no hace falta override */
  .wrap{ padding:0 var(--gutter); }

  /* Hero a una columna */
  .hero-inner{
    grid-template-columns:1fr;
    padding:56px 0;
  }

  /* Ajustes de tamaños */
  .verb{ font-size:48px; }
  .hero-title{ font-size:36px; }
  .section-title{ font-size:30px; }

  /* Feature a una columna */
  .feature{ grid-template-columns:1fr; }

  /* Planeta más chico */
  .planet{ width:280px; height:280px; }

  /* Card flotante reubica para no tapar */
  .hero-card{ right:10%; top:10%; }
}

/*
  860px: activa menú hamburguesa antes de que el texto del menú se superponga.
  (Este breakpoint apunta directamente al problema que mencionaste.)
*/
@media (max-width: 860px){
  /* Muestra el botón hamburguesa */
  .nav-toggle{ display:inline-block; }

  /* Oculta el menú horizontal en mobile (lo mostramos como panel) */
  .nav-links{
    position:absolute;
    top:var(--nav-height);            /* Aparece debajo de la navbar */
    right:0;
    left:0;
    display:none;                      /* Cerrado por defecto */
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:16px var(--gutter) 18px;
    background:rgba(255,255,255,.98);
    border-bottom:1px solid rgba(0,0,0,.06);
    box-shadow:0 10px 30px rgba(0,0,0,.10);
  }

  /* Links con padding para “hit area” cómodo */
  .nav-links a{
    width:100%;
    padding:10px 6px;
  }

  /* En mobile, el botón "Contáctenos" ocupa el ancho */
  .nav-links .btn{
    width:100%;
    justify-content:center;
  }

  /* Estado “abierto”: se activa con clase en el body (JS) */
  body.nav-open .nav-links{ display:flex; }

  /* Para que el panel posicionado funcione, el contenedor debe ser relativo */
  .nav-inner{ position:relative; }
}

/* 520px: ajuste fino de CTA y cards */
@media (max-width: 520px){
  /* CTA ancho apila contenido */
  .cta-wide{
    flex-direction:column;
    align-items:flex-start;
  }

  /* Logo: mantiene 100px, pero asegura que no rompa layout */
  .brand-logo{ max-width:160px; } /* “auto” en altura, esto solo limita ancho extremo */

  /* Hero card se centra más */
  .hero-card{
    right:50%;
    transform:translateX(50%);
    top:8%;
  }

  /* Planeta más chico */
  .planet{ width:240px; height:240px; }

  /* Reduce padding vertical para densidad */
  section{ padding:56px 0; }
}


/* =========================================================
   AJUSTES FINALES – MÁRGENES, COLORES Y TIPOGRAFÍA
   (PEGAR AL FINAL DEL CSS)
   ========================================================= */

/* 1) HERO: mismos márgenes laterales que la NAVBAR
   -------------------------------------------------
   El margen lateral lo maneja .wrap.
   Acá aseguramos que el hero solo tenga padding vertical.
*/
.hero{
  padding-left: 0;
  padding-right: 0;
}

.hero-inner{
  padding: 72px 0; /* solo vertical */
}

/* 2) CTA "¿Listo para actuar con nosotros?" en blanco
   ------------------------------------------------- */
.cta-wide h3,
.cta-wide p{
  color: #ffffff !important;
}

/* 3) La Prueba Cuádruple en tipografía SERIFA
   -------------------------------------------------
   Aplica a todo el bloque de preguntas
*/
.quad-list,
.quad-list li{
  font-family: var(--font-serif);
  font-weight: 700;
}

/* =========================================================
   FIX DEFINITIVO HERO MOBILE – MÁRGENES LATERALES
   ========================================================= */

/* En mobile y tablet, forzamos padding lateral real */
@media (max-width: 980px){

  /* El hero completo respeta el mismo gutter que la navbar */
  .hero{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* El grid interno NO agrega márgenes extra */
  .hero-inner{
    padding: 56px 0; /* solo vertical */
  }

  /* Evita que textos/grids se estiren al 100vw */
  .hero-copy,
  .hero-art{
    width: 100%;
    max-width: 100%;
  }
}

/* Mobile chico: un poco más de aire visual */
@media (max-width: 520px){
  .hero{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .hero-inner{
    padding: 48px 0;
  }
}