/* css/index.css
   La portada: hero, la idea, los pilares, la frase, los pasos, quienes somos y como nacio. */
.cc-portada { background:var(--ocre); overflow:hidden; }
.cc-portada-caja { max-width:1200px; margin:0 auto; padding:72px 32px 88px; display:flex; flex-wrap:wrap; align-items:center; gap:48px; }
.cc-portada-texto { flex:1 1 460px; min-width:0; display:flex; flex-direction:column; gap:24px; }
.cc-portada-texto h1 { font-size:60px; line-height:1.05; }
.cc-bajada { margin:0; font-size:20px; max-width:560px; color:var(--tinta2); }
.cc-portada-botones { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }
.cc-portada-taza { flex:1 1 420px; min-width:0; display:flex; justify-content:center; }
.cc-idea { padding:96px 32px 72px; display:flex; flex-wrap:wrap; gap:48px; align-items:flex-start; }
.cc-idea-titulo { flex:1 1 380px; min-width:0; }
.cc-idea-titulo h2 { font-size:44px; }
.cc-idea-texto { flex:1 1 520px; min-width:0; display:flex; flex-direction:column; gap:18px; font-size:18px; }
.cc-idea-texto p { margin:0; }
.cc-pilares { padding-bottom:96px; }
.cc-pilares-grilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.cc-pilares-grilla .cc-tarjeta { display:flex; flex-direction:column; gap:12px; }
.cc-pilares-grilla h3 { font-size:22px; }
.cc-pilares-grilla p { margin:0; font-size:16px; }
.cc-frase { background:var(--celeste); color:var(--tinta); }
.cc-frase-caja { max-width:1000px; margin:0 auto; padding:80px 32px; text-align:center; display:flex; flex-direction:column; gap:20px; align-items:center; }
.cc-frase-caja p { margin:0; font-family:var(--serif); font-weight:700; font-size:34px; line-height:1.25; }
.cc-pasos { padding-top:72px; padding-bottom:96px; }
.cc-pasos-titulo { margin:0 0 40px; font-size:44px; }
.cc-pasos-grilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; }
.cc-paso { display:flex; flex-direction:column; gap:10px; padding-top:20px; }
/* El color del filete de cada paso sale del disenio: ocre, bermellon y petroleo. */
.cc-paso-1 { border-top:6px solid var(--boton); }
.cc-paso-2 { border-top:6px solid var(--bermellon); }
.cc-paso-3 { border-top:6px solid var(--petroleo); }
.cc-paso-n { font-family:var(--serif); font-weight:700; font-size:40px; color:var(--oxido); }
.cc-paso h3 { font-size:22px; }
.cc-paso p { margin:0; font-size:16px; }
.cc-nosotros { background:var(--ocre); padding:96px 0; }
.cc-nosotros-titulo { margin:0 0 40px; font-size:44px; }
.cc-nosotros-grilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; }
.cc-persona { background:var(--papel); border:1.5px solid var(--borde); border-radius:16px; padding:32px; display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.cc-persona-foto { width:140px; height:140px; border-radius:50%; object-fit:cover; flex:none; }
/* El encuadre de cada foto esta medido sobre la foto: no son intercambiables. */
.cc-foto-ariel { border:6px solid var(--boton); object-position:center 30%; background:var(--cab); }
.cc-foto-maria { border:6px solid var(--bermellon); object-position:center 25%; background:var(--petroleo); }
.cc-persona-texto { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:8px; }
.cc-persona-texto h3 { font-size:26px; }
.cc-persona-texto p { margin:0; font-size:16px; }
.cc-persona-signos { font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--petroleo2); font-weight:700; }
.cc-persona-qr { display:flex; align-items:center; gap:16px; margin-top:8px; }
.cc-persona-qr img { width:88px; height:88px; border:2px solid var(--tinta); flex:none; }
.cc-persona-qr a { color:var(--oxido); font-weight:700; font-size:15px; display:inline-flex; align-items:center; min-height:44px; }
.cc-nacio { padding-top:96px; padding-bottom:96px; display:flex; flex-wrap:wrap; gap:40px; align-items:center; }
.cc-nacio-texto { flex:1 1 520px; min-width:0; display:flex; flex-direction:column; gap:16px; }
.cc-nacio-texto h2 { font-size:40px; }
.cc-nacio-texto p { margin:0; font-size:18px; }
.cc-nacio-caja { flex:1 1 340px; min-width:0; display:flex; flex-direction:column; gap:14px; background:var(--cab); padding:32px; border-radius:14px; align-items:flex-start; }
.cc-nacio-titulo { margin:0; font-family:var(--serif); font-size:24px; font-weight:700; }
.cc-nacio-bajada { margin:0; font-size:16px; color:var(--tinta2); }
/* EL TITULO DE 60px NO ENTRA EN UN TELEFONO: a 390px parte palabras y empuja la pagina a
   lo ancho. Las medidas de abajo estan probadas a 390. */
@media (max-width:640px) {
  .cc-portada-caja { padding:40px 18px 48px; gap:32px; }
  .cc-portada-texto h1 { font-size:34px; }
  .cc-bajada { font-size:17px; }
  .cc-idea { padding:48px 18px 40px; gap:24px; }
  .cc-idea-titulo h2, .cc-pasos-titulo, .cc-nosotros-titulo { font-size:30px; }
  .cc-frase-caja { padding:48px 18px; }
  .cc-frase-caja p { font-size:23px; }
  .cc-pilares, .cc-pasos { padding-bottom:48px; }
  .cc-pasos { padding-top:40px; }
  .cc-nosotros { padding:48px 0; }
  .cc-persona { padding:22px; gap:16px; }
  .cc-nacio { padding-top:48px; padding-bottom:48px; }
  .cc-nacio-texto h2 { font-size:28px; }
}