/* sobremi.css
   Estilos específicos para sobremi.html
   Importa la hoja global (styles.css) y añade reglas propias.
*/

/* Importar estilos globales (asegúrate de que exista styles.css) */
@import url('styles.css');

/* ---------- Ajustes de la página "Sobre mí" ---------- */

/* About hero grid: foto a la izquierda en escritorio */
.about-hero{
  padding:40px 0 18px;
  background: linear-gradient(180deg, rgba(240,139,175,0.02), rgba(255,255,255,0.0));
}
.about-hero-grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:28px;
  align-items:center;
}

/* Marco de retrato */
.portrait-frame{
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(16,24,32,0.08);
  background: linear-gradient(180deg, rgba(240,139,175,0.06), rgba(108,158,214,0.03));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
}
.portrait-frame img{width:100%;height:auto;border-radius:10px}

/* Biografía */
.bio-copy h1{margin:0 0 10px;font-size:1.9rem}
.bio-highlights{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.bio-highlights li{background:#fff;padding:10px;border-radius:10px;box-shadow:0 8px 20px rgba(16,24,32,0.04)}

/* Certificados / grid */
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.cert-grid .card{padding:16px}

/* Fotos de certificados */
.cert-photos{display:flex;gap:12px;margin-top:14px}
.cert-photos img{width:160px;height:auto;border-radius:8px;box-shadow:0 8px 20px rgba(16,24,32,0.06)}

/* FAQ / details */
.faq-list details{background:#fff;padding:12px;border-radius:10px;margin-bottom:10px;box-shadow:0 8px 20px rgba(16,24,32,0.04)}
.faq-list summary{font-weight:700;cursor:pointer}

/* Grid 2 columnas para enfoque */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}

/* pequeño ajuste al CTA strip para esta página */
.cta-strip-inner{align-items:center;justify-content:space-between}
.cta-strip-inner .btn-primary{min-width:160px}

/* Responsive */
@media (max-width:1000px){
  .about-hero-grid{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:repeat(2,1fr)}
  .portrait-frame{margin-bottom:12px}
  .grid-2{grid-template-columns:1fr}
  .cert-photos{flex-wrap:wrap}
}

@media (max-width:700px){
  .cert-grid{grid-template-columns:1fr}
  .portrait-frame{width:100%}
  .bio-copy h1{font-size:1.4rem}
}