/* =========================================================
   ESTILO ÚNICO — Tema claro (fondo blanco)
   Color principal: #38629f
   ========================================================= */
:root{
  --bg:#ffffff;
  --text:#0f1b2d;
  --muted:#667085;
  --border:#e3e8ef;
  --shadow: 0 8px 20px rgba(16,24,40,.06);
  --brand:#38629f;
  --brand-2:#2c4f80;
  --ring: rgba(56,98,159,.22);
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}

/* ----------------- NAVBAR ----------------- */
.cc-navbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border);backdrop-filter:blur(6px)}
.cc-navbar-content{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.cc-navbar-logo{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none;font-weight:700}
.cc-logo-img{height:36px;width:auto}
.cc-logo-text{letter-spacing:.3px}
.cc-nav-menu{display:flex;gap:20px;flex-wrap:wrap}
.cc-nav-menu a{color:#22324d;text-decoration:none;font-weight:500}
.cc-nav-menu a:hover{color:var(--brand)}

/* ----------------- HERO ----------------- */
.cc-hero{position:relative;background:#fff;border-bottom:1px solid var(--border)}
.cc-hero-bg{position:absolute;inset:0;opacity:.08;background:var(--bg);pointer-events:none}
.cc-hero-inner{position:relative;max-width:1160px;margin:0 auto;padding:56px 20px}
.cc-kicker{color:var(--brand);font-weight:700;letter-spacing:.08em;margin:0 0 8px}
.cc-hero-title{font-family:"Playfair Display",serif;font-size:clamp(32px,5.2vw,50px);line-height:1.1;margin:0 0 10px;color:#0b1728}
.cc-hero-sub{max-width:820px;color:#475467;margin:0 0 18px}
.cc-hero .with-image{
  position:absolute; inset:0;
  background-image: var(--hero);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:.35; pointer-events:none;
}
.cc-hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ----------------- BOTONES ----------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:12px 18px;border-radius:12px;border:1px solid transparent;text-decoration:none;font-weight:600}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:#fff;border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

/* ----------------- CARDS GENERALES ----------------- */
.cc-grid-3{max-width:1160px;margin:28px auto;display:grid;gap:16px;padding:0 20px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cc-grid-3{grid-template-columns:1fr}}
.cc-card{background:#fff;padding:22px;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.cc-card h3{margin:0 0 6px;font-size:1.18rem}
.cc-card p{margin:0;color:#475467}

/* ----------------- SECCIONES Y RECURSOS ----------------- */
.cc-section{max-width:1160px;margin:36px auto 0;padding:0 20px}
.cc-section-head h2{font-size:clamp(22px,4vw,32px);margin:.2rem 0;color:#0b1728}
.cc-section-head p{color:#475467;margin:0 0 14px}
.cc-resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.cc-resources{grid-template-columns:1fr}}
.cc-res{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;text-decoration:none;color:#var(--text);transition:transform .15s,border-color .15s;box-shadow:var(--shadow)}
.cc-res:hover{transform:translateY(-2px);border-color:var(--brand)}
.cc-res-title{display:block;font-weight:700;margin-bottom:4px;color:#0f1b2d}
.cc-res-desc{color:#667085;font-size:.95rem}

/* ----------------- FAQ ----------------- */
.cc-faq{max-width:900px;margin:40px auto;padding:0 20px}
.cc-faq details{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:10px 0;box-shadow:var(--shadow)}
.cc-faq summary{cursor:pointer;font-weight:600}

/* ----------------- FORMULARIOS ----------------- */
.cc-contact{max-width:880px;margin:40px auto 70px;padding:0 20px}
.cc-alert{padding:12px 14px;border-radius:10px;margin-bottom:10px}
.cc-alert-error{background:#fff4f4;border:1px solid #ffd1d1;color:#7a1a1a}
.cc-form .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cc-form label{display:flex;flex-direction:column;gap:6px}
.cc-form label.full{grid-column:1/-1}
.cc-form input,.cc-form textarea,.cc-form select{
  background:#fff;border:1px solid #d0d5dd;color:var(--text);border-radius:12px;
  padding:12px 14px;outline:none
}
.cc-form input:focus,.cc-form textarea:focus,.cc-form select:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)
}
.cc-form-actions{display:flex;gap:10px;margin-top:10px}
.cc-legal{color:#98a2b3;font-size:.9rem}

/* ----------------- WIZARD/ETICA: TARJETAS ----------------- */
.wizard-step{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.cc-tiles{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.cc-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.cc-tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cc-tiles{grid-template-columns:1fr}}

.cc-radio{position:absolute;opacity:0;inset:0;pointer-events:none}

.cc-tile{
  position:relative; display:block; cursor:pointer; user-select:none;
  border:1.5px solid #bfcbe2; border-radius:12px;
  padding:18px 16px; min-height:110px; background:#fff; color:var(--text);
  font-weight:600; line-height:1.35;
  transition:background .15s,border-color .15s,transform .15s,color .15s;
  box-shadow:var(--shadow);
}
.cc-tile:hover{
  background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-2px);
}
.cc-radio:checked + .cc-tile{
  background:var(--brand); color:#fff; border-color:var(--brand);
}
.cc-radio:checked + .cc-tile::after{
  content:"✓"; position:absolute; right:12px; bottom:10px; font-weight:800; opacity:.95;
}
.cc-radio:focus + .cc-tile,
.cc-tile:focus-visible{ outline:3px solid var(--ring); }

/* input extra en "Otras actividades" */
.tile-other .tile-other-box{ margin-top:10px; }
.tile-other input[type="text"]{
  width:100%; border:1px solid #d0d5dd; border-radius:10px; padding:10px 12px;
  font-weight:500; background:#fff; color:var(--text);
}
.tile-other input[type="text"]::placeholder{ color:#98a2b3; }

/* ----------------- PÁGINA DE GRACIAS ----------------- */
.cc-thanks{max-width:780px;margin:80px auto;padding:0 20px;text-align:center}

/* ----------------- FOOTER ----------------- */
.cc-footer{border-top:1px solid var(--border);background:#fff}
.cc-footer-inner{max-width:1160px;margin:0 auto;padding:28px 20px;display:grid;gap:20px;grid-template-columns:2fr 1fr 1fr}
@media (max-width:900px){.cc-footer-inner{grid-template-columns:1fr}}
.cc-footer-title{font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:.6rem}
.cc-footer-logo{height:26px;width:auto}
.cc-footer a{color:var(--brand);text-decoration:none}
.cc-footer a:hover{text-decoration:underline}
.cc-subfooter{border-top:1px solid var(--border);color:#667085;font-size:.95rem;padding:12px 20px;display:flex;gap:10px;justify-content:center}


/* =======================
   CERTIFICACIONES (home)
   ======================= */
.cc-certs-title{
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #3f3f46; /* gris elegante similar al mockup */
  margin: 0 0 6px;
}
.cc-certs-dots{
  color: #e11d2d; /* rojo de los tres puntos */
  margin-left: 10px;
  letter-spacing: 6px;
}

.cc-certs .cc-section-head p{
  max-width: 1100px;
  color: #4b5563;
}

.cc-certs-grid{
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 26px;
  align-items: start;
}

.cc-cert{
  text-align: center;
}

.cc-cert img{
  width: min(220px, 70%);
  height: auto;
  display: inline-block;
  filter: grayscale(0);            /* deja el sello tal cual */
  transition: transform .2s ease;
}
.cc-cert img:hover{
  transform: translateY(-3px) scale(1.02);
}

.cc-cert-link{
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  color: #374151;                  /* gris fuerte */
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.cc-cert-link:hover{
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* Responsive */
@media (max-width: 1024px){
  .cc-certs-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .cc-certs-grid{ grid-template-columns: 1fr; }
  .cc-cert img{ width: 220px; max-width: 80%; }
}