/*
Theme Name: Pequeño Cottolengo
Description: Child theme de Hello Elementor para Fundación Pequeño Cottolengo Chile. Paleta e identidad tomadas de COLORES.png y los logos oficiales; maquetación heredada de outputs/style.css.
Template: hello-elementor
Version: 1.0.0
Text Domain: pequeno-cottolengo
*/

:root{
  --azul: #996699;        /* secundario (COLORES.png) */
  --azul-osc: #663366;    /* primario morado (COLORES.png) */
  --donar: #FF6666;       /* acento (COLORES.png) — botón Donar / CTA */
  --donar-osc: #e04d4d;
  --crema: #faf6ef;
  --crema-2: #f1e9d8;
  --texto: #3a3a3a;
  --gris: #6b7280;
  --blanco: #ffffff;
  --radio: 16px;
  --sombra: 0 10px 30px rgba(102,51,102,.12);
  --font: 'Roboto', -apple-system, sans-serif;
}

/* Forzar color primario de Elementor */
.elementor-kit-4 {
  --e-global-color-primary: #663366 !important;
}

body{
  font-family: var(--font);
  color: var(--texto);
  line-height: 1.7;
  font-weight:300;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

.contenedor{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.contenedor-ancho{ width:100%; max-width:1440px; margin:0 auto; padding:0 24px; }

h1,h2,h3,h4{
  font-family: var(--font);
  font-weight:500;
  line-height:1.25;
  color: var(--azul-osc);
}

.etiqueta{
  display:inline-block;
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--azul);
  margin-bottom:14px;
}

/* ---------- Barra superior de utilidad ---------- */
.barra-top{ background: var(--azul-osc); color: rgba(255,255,255,.85); font-size:13px; }
.barra-top .contenedor{ display:flex; justify-content:space-between; align-items:center; padding:8px 24px; flex-wrap:wrap; gap:8px; max-width:1200px; margin:0 auto;}
.barra-top .redes{ display:flex; gap:12px; }
.barra-top .redes a{
  width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; transition:.2s; color: rgba(255,255,255,.85);
}
.barra-top .redes a:hover{ background:#fff; color:var(--azul-osc); }

/* ---------- Header ---------- */
header.site{ background: var(--blanco); position:sticky; top:0; z-index:50; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; max-width:1200px; margin:0 auto; padding-left:24px; padding-right:24px; }
.logo{ display:flex; align-items:center; gap:12px; }
.logo img.logo-img{ height:67px; width:auto; flex-shrink:0; }
nav.menu-principal ul{ list-style:none; display:flex; gap:30px; align-items:center; }
nav.menu-principal a{
  font-size:14.5px; font-weight:400; color: var(--texto);
  padding:6px 2px; border-bottom:2px solid transparent; transition:.2s;
}
nav.menu-principal a:hover, nav.menu-principal a.activo{ border-bottom-color: var(--azul); color: var(--azul); }
.btn-donar{
  background: var(--donar); color:#fff !important; font-weight:500;
  padding:13px 46px; border-radius:999px; font-size:14px; letter-spacing:.02em;
  transition:.2s; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:100px;
}
.btn-donar:hover{ background: var(--donar-osc); }
.menu-toggle{ display:none; background:none; border:none; font-size:26px; color:var(--azul-osc); cursor:pointer; }

/* ---------- Hero: imagen completa, sin overlay pesado ---------- */
.hero-img{ width:100%; overflow:hidden; background:var(--crema-2); position:relative; }
.hero-img img{ width:100%; height:auto; max-height:560px; object-fit:cover; }
.hero-img .hero-caption{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(0deg, rgba(102,51,102,.8), transparent);
  color:#fff; padding:40px 0 28px;
}
.hero-img .hero-caption .contenedor{ max-width:1200px; }
.hero-img .hero-caption h1{ color:#fff; font-size:34px; margin-bottom:8px; }
.hero-img .hero-caption p{ color:rgba(255,255,255,.85); max-width:560px; font-size:15.5px; font-weight: 400; }

/* banda simple de título de página (subpáginas) */
.titulo-pagina{ padding:56px 0 10px; text-align:left; }
.titulo-pagina h1{ font-size:36px; margin-bottom:10px; }
.titulo-pagina p.lead{ color:var(--gris); font-size:16px; max-width:640px; }

/* ---------- Secciones ---------- */
.seccion{ padding:76px 0; }
.seccion.crema{ background: var(--crema); }
.seccion.angosta{ padding:56px 0; }

.encabezado-seccion{ max-width:680px; margin:0 auto 46px; text-align:center; }
.encabezado-seccion.izq{ text-align:left; margin:0 0 40px; }
.encabezado-seccion h2{ font-size:30px; }
.encabezado-seccion p{ color:var(--gris); margin-top:12px; font-size:15.5px; }

/* ---------- Cards estilo "producto" (imagen + texto, sin caja) ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:44px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

.card-producto{ text-align:center; }
.card-producto .foto{ border-radius:var(--radio); overflow:hidden; aspect-ratio:4/3; margin-bottom:20px; box-shadow:var(--sombra); }
.card-producto .foto img{ width:100%; height:100%; object-fit:cover; }
.card-producto h3{ font-size:19px; margin-bottom:6px; }
.card-producto p{ color:var(--gris); font-size:14.5px; margin-bottom:14px; }
.card-producto a.ver-mas{ font-size:13.5px; font-weight:500; color:var(--azul); border-bottom:1px solid var(--azul); padding-bottom:2px; }

/* ---------- Filas alternadas imagen / texto ---------- */
.fila-alterna{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.fila-alterna.invertida{ direction:rtl; }
.fila-alterna.invertida > *{ direction:ltr; }
.fila-alterna .foto{ border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.fila-alterna .foto img{ width:100%; height:100%; object-fit:cover; display:block; min-height:320px; }
.fila-alterna .texto .etiqueta{ margin-bottom:10px; }
.fila-alterna .texto h2{ font-size:28px; margin-bottom:16px; }
.fila-alterna .texto p{ color:var(--gris); font-size:15.5px; margin-bottom:14px; }
.fila-alterna .texto p strong{ color:var(--texto); font-weight:500; }

/* imagen simple contenedor (organigrama, mapa, etc) */
.foto-simple{ border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.foto-simple img{ width:100%; display:block; }

/* ---------- Stats grandes, sin caja ---------- */
.stats-plano{ display:grid; grid-template-columns:repeat(4,1fr); text-align:center; gap:30px; }
.stats-plano .item h3{ font-size:44px; font-weight:300; color: var(--azul); }
.stats-plano .item span{ display:block; font-size:13.5px; color:var(--gris); margin-top:6px; letter-spacing:.03em; text-transform:uppercase; }

/* ---------- Galería ---------- */
.galeria{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.galeria .foto{ border-radius:var(--radio); overflow:hidden; aspect-ratio:1/1; }
.galeria .foto img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Colaboradores / logos: tira plana, sin cajas ---------- */
.logos-tira{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:48px; padding:10px 0;
}
.logos-tira img{
  max-height:56px; max-width:150px; width:auto; object-fit:contain;
  filter:grayscale(100%); opacity:.65; transition:.25s;
}
.logos-tira img:hover{ filter:grayscale(0%); opacity:1; }

/* ---------- Lista de contacto (sin cajas pesadas) ---------- */
.lista-contacto{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid #eee; }
.item-contacto{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:26px 4px; border-bottom:1px solid #eee;
}
.item-contacto:nth-child(odd){ padding-right:30px; }
.item-contacto:nth-child(even){ padding-left:30px; }
.item-contacto h3{ font-size:17px; margin-bottom:4px; }
.item-contacto p{ color:var(--gris); font-size:14px; }
.item-contacto a.escribir{
  flex-shrink:0; font-size:13.5px; font-weight:500; color:#fff; background:var(--azul);
  padding:9px 18px; border-radius:999px; white-space:nowrap;
}
.item-contacto a.escribir:hover{ background:var(--azul-osc); }

/* ---------- CTA simple (banda de color plano, sin gradiente) ---------- */
.cta-banda{ background: var(--azul-osc); border-radius: var(--radio); padding:56px 40px; text-align:center; color:#fff; }
.cta-banda h2{ color:#fff; font-size:28px; margin-bottom:12px; }
.cta-banda p{ color:rgba(255,255,255,.85); margin-bottom:26px; }
.btn-blanco{ background:#fff; color:var(--azul-osc) !important; padding:13px 30px; border-radius:999px; font-weight:500; display:inline-block; }
.btn-blanco:hover{ background:var(--crema); }

/* tabla sedes */
.tabla-sedes{ width:100%; border-collapse:collapse; }
.tabla-sedes th, .tabla-sedes td{ padding:16px 10px; text-align:left; border-bottom:1px solid #e6e6e6; font-size:14.5px;}
.tabla-sedes th{ color:var(--azul); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:500; }

/* form contacto */
.form-fila{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.form-contacto label{ font-size:13px; font-weight:500; color:var(--azul-osc); display:block; margin-bottom:6px;}
.form-contacto input, .form-contacto select, .form-contacto textarea{
  width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:8px; font-family:var(--font); font-size:14px; background:#fff;
}
.form-contacto textarea{ min-height:120px; resize:vertical; }
.form-contacto button, .form-contacto input[type="submit"]{
  background: var(--azul-osc); color:#fff; border:none; padding:13px 28px; border-radius:999px; font-weight:500; cursor:pointer; font-size:14px;
}
.form-contacto button:hover, .form-contacto input[type="submit"]:hover{ background:var(--azul); }

.wpcf7-form p{ margin-bottom:18px; }
.wpcf7-form label{ font-size:13px; font-weight:500; color:var(--azul-osc); display:block; margin-bottom:6px; }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"],
.wpcf7-form select, .wpcf7-form textarea{
  width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:8px; font-family:var(--font); font-size:14px; background:#fff;
}
.wpcf7-form textarea{ min-height:120px; resize:vertical; }
.wpcf7-form input[type="submit"]{
  background: var(--azul-osc); color:#fff; border:none; padding:13px 28px; border-radius:999px; font-weight:500; cursor:pointer; font-size:14px;
}
.wpcf7-form input[type="submit"]:hover{ background:var(--azul); }
.wpcf7-not-valid-tip{ font-size:12.5px; margin-top:4px; color:var(--donar); }
.wpcf7-response-output{ border-radius:8px; margin-top:20px !important; }

/* ---------- Footer ---------- */
footer.site{ background: var(--azul-osc); color: rgba(255,255,255,.75); padding:60px 0 22px; font-size:14px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px;}
footer.site h4{ color:#fff; font-size:14px; margin-bottom:16px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
footer.site ul{ list-style:none; }
footer.site ul li{ margin-bottom:9px; }
footer.site a:hover{ color: #fff; }
.footer-marca img{ height:64px; width:auto; margin-bottom:16px; }
.footer-marca p{ font-size:13.5px; line-height:1.7; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px;
}
.footer-redes{ display:flex; gap:12px; }
.footer-redes a{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:12px;}
.footer-redes a:hover{ background:#fff; color:var(--azul-osc); }

/* botón flotante donar */
.flotante-donar{
  position:fixed; right:22px; bottom:22px; z-index:600;
  background:var(--donar); color:#fff; font-weight:500;
  padding:14px 22px; border-radius:999px; box-shadow:0 10px 26px rgba(255,102,102,.45);
  font-size:14px; display:flex; align-items:center; gap:8px;
}
.flotante-donar:hover{ background:var(--donar-osc); }

/* -------- responsive -------- */
@media (max-width: 980px){
  .hero-img img{ max-height:400px; }
  .stats-plano{ grid-template-columns:repeat(2,1fr); gap:30px; }
  .grid-3, .grid-2, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .galeria{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .form-fila{ grid-template-columns:1fr; }
  .fila-alterna{ grid-template-columns:1fr; gap:30px; }
  .fila-alterna.invertida{ direction:ltr; }
  .lista-contacto{ grid-template-columns:1fr; }
  .item-contacto:nth-child(odd){ padding-right:4px; }
  .item-contacto:nth-child(even){ padding-left:4px; }
}
@media (max-width: 720px){
  nav.menu-principal{ display:none; }
  nav.menu-principal.mostrar{
    display:block; position:absolute; top:100%; left:0; right:0;
    background:#fff; box-shadow:0 14px 24px rgba(0,0,0,.1); padding:18px 24px 26px; z-index:49;
  }
  nav.menu-principal.mostrar ul{ flex-direction:column; align-items:flex-start; gap:16px; }
  .menu-toggle{ display:block; }
  .barra-top .contenedor{ justify-content:center; text-align:center; }
  .grid-3, .grid-2, .grid-4, .galeria{ grid-template-columns:1fr; }
  .logos-tira{ gap:28px; }
  .footer-grid{ grid-template-columns:1fr; }
  .seccion{ padding:52px 0; }
  
  /* Ajustes Hero Mobile */
  .hero-img .hero-caption h1{ font-size: 26px; }
  .hero-img .hero-caption p{ font-size: 14.5px; }
  .hero-img img{ max-height: 320px; }
  header.site { position: relative; } /* Evita que el menu sticky tape el inicio de la foto en mobile */
}