/* ======================================================
   main.css — Estilos para la plantilla de Servicios
   Ruta: assets/css/main.css
   ====================================================== */

/* ==============
   VARIABLES
============== */
:root{
  --color-primary: #0059ff;
  --color-primary-dark: #003bb3;
  --color-muted: #6b7280;
  --color-bg-light: #f7f9fc;
  --color-text: #111827;
  --radius: 10px;
  --max-width: 1200px;
}

/* ==============
   BASE & LAYOUT
============== */
*{box-sizing:border-box}
html,body{height:100%}
body {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--color-text);
  background: #ffffff;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrap{
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ==============
   BOTONES
============== */
.btn{
  display:inline-block;
  background:var(--color-primary);
  color:#fff;
  padding:12px 22px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  transition:all .20s ease;
  border: none;
  cursor: pointer;
}
.btn:focus{outline:3px solid rgba(0,89,255,.15); outline-offset:2px}
.btn:hover{transform:translateY(-3px); background:var(--color-primary-dark)}

/* ==============
   HERO
============== */
.hero--services{
  background: var(--color-bg-light);
  padding: 80px 0 60px;
  text-align:center;
}
.hero__title{
  font-size:2.4rem;
  margin:0 0 10px;
  line-height:1.04;
}
.hero__lead{
  font-size:1.05rem;
  color:var(--color-muted);
  max-width:740px;
  margin:0 auto 20px;
}

/* ==============
   SECCIONES GENERALES
============== */
.section{padding:70px 0}
.section--intro .content{max-width:900px; margin:0 auto; color:var(--color-muted)}
.section__title{
  text-align:center;
  font-size:2rem;
  margin:0 0 24px;
  position:relative;
}
.section__title::after{
  content:"";
  display:block;
  width:64px;
  height:4px;
  background:var(--color-primary);
  margin:12px auto 0;
  border-radius:3px;
}

/* ==============
   GRID DE SERVICIOS
============== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  align-items:start;
}

.service{
  background:#fff;
  padding:28px 22px;
  border-radius:var(--radius);
  text-align:center;
  box-shadow:0 6px 18px rgba(15,23,42,0.06);
  transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:10px;
}
.service:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 42px rgba(15,23,42,0.12);
}

.service__icon{display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; margin:0 auto 8px; font-size:28px; border-radius:12px}
.service__icon svg{width:48px;height:48px;color:var(--color-primary)}
.service__title{font-size:1.12rem; margin:6px 0; font-weight:700}
.service__desc{color:var(--color-muted); font-size:0.95rem; margin:0; flex:1}

/* ==============
   POR QUÉ ELEGIRNOS
============== */
.section--why{background:var(--color-bg-light)}
.why-list{
  list-style:none;
  padding:0;
  margin:0 auto;
  max-width:780px;
}
.why-list li{
  padding:16px 14px;
  border-bottom:1px solid rgba(15,23,42,0.04);
  color:var(--color-muted);
  display:flex;
  gap:12px;
  align-items:center;
}
.why-list li::before{
  content:"✔";
  color:var(--color-primary);
  font-weight:700;
  display:inline-block;
  min-width:22px;
}

/* ==============
   CONTACTO / FORMULARIO
============== */
.section--contact .lead{color:var(--color-muted); text-align:center; margin-bottom:18px}
.contact-form-wrap{display:block; margin-top:18px}
.contact-form-wrap form.mi-contacto,
.contact-form-wrap form {max-width:620px; margin:0 auto; background: #fff; padding:20px; border-radius:10px; box-shadow:0 6px 20px rgba(2,6,23,0.04)}
.contact-form-wrap label{display:block; font-weight:600; margin-top:12px; font-size:0.95rem}
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap textarea,
.contact-form-wrap input,
.wpcf7 input, .wpcf7 textarea {
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:8px;
  margin-top:8px;
  font-size:0.98rem;
  color:var(--color-text);
}
.contact-form-wrap textarea{min-height:140px; resize:vertical}
.contact-form-wrap .btn{display:inline-block; margin-top:14px}

/* ==============
   TIPOGRAFÍA MÓVIL / RESPONSIVE
============== */
@media (max-width:900px){
  .hero--services{padding:60px 0 40px}
  .hero__title{font-size:2rem}
  .section{padding:50px 0}
}
@media (max-width:600px){
  .hero__title{font-size:1.6rem}
  .services-grid{gap:18px}
  .service{padding:20px}
  .wrap{width:94%}
}

/* ==============
   ACCESIBILIDAD Y FOCO
============== */
a:focus, button:focus, input:focus, textarea:focus{
  outline:3px solid rgba(0,89,255,0.12);
  outline-offset:2px;
}

/* ==============
   UTILIDADES
============== */
.text-center{text-align:center}
.lead{font-size:1.05rem; color:var(--color-muted)}

/* End of main.css */