/* ============================================================
   CPO Grup — Hoja de estilos principal
   Diseño mobile-first: primero móvil, luego tablet y escritorio.
   ============================================================ */

/* ---------- Variables de diseño ---------- */
:root {
  --oro: #c9a24b;
  --oro-claro: #e0c285;
  --oro-suave: rgba(201, 162, 75, 0.16);
  --marino: #07122a;
  --marino-2: #0a1a3f;
  --marino-3: #0e2449;
  --blanco: #ffffff;
  --texto: #eaf0fb;
  --texto-suave: #a8b4cc;
  --linea: rgba(201, 162, 75, 0.30);
  --linea-suave: rgba(255, 255, 255, 0.09);
  --radio: 14px;
  --sombra: 0 18px 46px rgba(0, 0, 0, 0.38);
  --max: 1180px;
  --fuente-titulos: Georgia, "Times New Roman", "Palatino Linotype", serif;
  --fuente-cuerpo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
body {
  font-family: var(--fuente-cuerpo);
  background: var(--marino);
  color: var(--texto);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--blanco);
  line-height: 1.16;
  letter-spacing: -0.01em;
}

/* Accesibilidad: foco visible */
:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Enlace para saltar al contenido (solo teclado) */
.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--oro);
  color: #1b1200;
  padding: 10px 16px;
  font-weight: 700;
  border-radius: 0 0 10px 0;
  z-index: 200;
}
.salto:focus { left: 0; }

/* ---------- Utilidades ---------- */
.contenedor {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}
.seccion { padding: 64px 0; position: relative; }

/* Encabezado de sección (eyebrow + título + línea) */
.cabecera-seccion { max-width: 760px; margin-bottom: 40px; }
.cabecera-seccion.centrada { margin-left: auto; margin-right: auto; text-align: center; }
.cabecera-seccion.centrada .linea-oro { margin: 14px auto 0; }

.eyebrow {
  display: inline-block;
  color: var(--oro);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
h2 { font-size: clamp(1.65rem, 4.6vw, 2.4rem); margin-bottom: 16px; }
.cabecera-seccion p {
  color: var(--texto-suave);
  font-size: 1.02rem;
  max-width: 62ch;
}
.cabecera-seccion.centrada p { margin-left: auto; margin-right: auto; }

/* Línea dorada decorativa (se anima al aparecer) */
.linea-oro {
  width: 48px;
  height: 2px;
  background: var(--oro);
  margin-top: 14px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s ease 0.15s;
}
.cabecera-seccion.visible .linea-oro { transform: scaleX(1); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border: 0;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn svg { flex: 0 0 auto; }
.btn-oro {
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  color: #1b1200;
  box-shadow: 0 10px 24px rgba(201, 162, 75, 0.22);
}
.btn-oro:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(201, 162, 75, 0.34); }
.btn-borde {
  background: transparent;
  color: var(--texto);
  border: 1px solid rgba(255, 255, 255, 0.26);
}
.btn-borde:hover { border-color: var(--oro); color: var(--oro); transform: translateY(-2px); }
.btn-bloque { width: 100%; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 18, 42, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea-suave);
  transition: box-shadow 0.25s ease;
}
.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
  transition: height 0.25s ease;
}
.cabecera.reducida { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.cabecera.reducida .contenedor { height: 58px; }

.marca { display: inline-flex; align-items: center; }
.marca img { height: 40px; width: auto; }
.cabecera.reducida .marca img { height: 34px; }

/* Navegación escritorio */
.nav { display: none; align-items: center; gap: 24px; }
.nav a {
  color: var(--texto-suave);
  font-size: 15px;
  font-weight: 600;
  transition: color 0.2s ease;
}
.nav a:hover { color: var(--oro); }

/* Acciones de la cabecera (idioma + CTA) */
.cabecera-acciones { display: flex; align-items: center; gap: 16px; }
.btn-cta-cabecera { display: none; }

/* Selector de idioma ES | CA */
.idioma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.idioma a { color: var(--texto-suave); transition: color 0.2s ease; }
.idioma a:hover { color: var(--oro); }
.idioma .activo { color: var(--oro); }
.idioma .sep { color: rgba(255, 255, 255, 0.28); font-weight: 400; }

/* Botón hamburguesa */
.hamburguesa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--texto);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.hamburguesa.abierta span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa.abierta span:nth-child(2) { opacity: 0; }
.hamburguesa.abierta span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil desplegable */
.menu-movil {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(7, 18, 42, 0.99);
  border-bottom: 1px solid var(--linea-suave);
  padding: 10px 20px 22px;
}
.menu-movil.abierto { display: block; }
.menu-movil a {
  display: block;
  padding: 15px 4px;
  color: var(--texto);
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.menu-movil a:hover { color: var(--oro); }
.menu-movil .btn { margin-top: 16px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 64px 0;
}
.hero-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 18, 42, 0.82) 0%, rgba(7, 18, 42, 0.55) 60%, rgba(7, 18, 42, 0.88) 100%),
    linear-gradient(90deg, rgba(7, 18, 42, 0.94) 0%, rgba(7, 18, 42, 0.66) 55%, rgba(7, 18, 42, 0.40) 100%);
}
.hero .contenedor { position: relative; z-index: 1; }
.hero-cuerpo { max-width: 640px; }

.hero-etiqueta {
  display: inline-block;
  border: 1px solid var(--linea);
  background: rgba(201, 162, 75, 0.12);
  color: var(--oro);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
  line-height: 1.55;
  max-width: 100%;
}
.hero-etiqueta::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.22);
  margin-right: 9px;
  vertical-align: middle;
  margin-bottom: 2px;
}
.hero h1 {
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  margin-bottom: 20px;
}
.hero h1 em { font-style: normal; color: var(--oro); }
.hero .entradilla {
  color: var(--texto-suave);
  font-size: 1.05rem;
  max-width: 56ch;
  margin-bottom: 30px;
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-confianza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--texto-suave);
  font-size: 14px;
}
.hero-confianza .punto { color: var(--oro); }

/* ---------- Sección experiencia ---------- */
.experiencia .contenedor {
  display: grid;
  gap: 28px;
  align-items: center;
}
.experiencia .cifra {
  font-family: var(--fuente-titulos);
  font-size: clamp(3rem, 10vw, 4.6rem);
  color: var(--oro);
  line-height: 1;
}
.experiencia .cifra small {
  display: block;
  font-family: var(--fuente-cuerpo);
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-top: 10px;
}
.experiencia .texto p { color: var(--texto-suave); max-width: 62ch; }
.experiencia .texto p + p { margin-top: 14px; }

/* ---------- Sección problema / solución ---------- */
.problema { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005)); border-top: 1px solid var(--linea-suave); border-bottom: 1px solid var(--linea-suave); }
.problema p { color: var(--texto-suave); font-size: 1.03rem; max-width: 72ch; }

/* ---------- Tarjetas de servicios ---------- */
.servicios-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.servicio {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 28px 24px;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}
.servicio:hover {
  transform: translateY(-5px);
  border-color: var(--oro);
  box-shadow: var(--sombra);
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.09), rgba(255, 255, 255, 0.02));
}
.servicio .icono {
  width: 54px;
  height: 54px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  color: var(--oro);
  background: var(--oro-suave);
  border: 1px solid var(--linea);
}
.servicio h3 { font-size: 1.12rem; margin-bottom: 8px; }
.servicio p { color: var(--texto-suave); font-size: 14.7px; }

/* ---------- Sectores (chips) ---------- */
.sectores-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.sector-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--texto);
  font-size: 14.5px;
  font-weight: 600;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.sector-chip svg { color: var(--oro); flex: 0 0 auto; }
.sector-chip:hover { border-color: var(--oro); color: var(--oro); background: var(--oro-suave); }

/* ---------- Por qué CPO Grup ---------- */
.ventajas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 26px;
}
.ventaja { padding-top: 20px; border-top: 1px solid var(--linea-suave); }
.ventaja .num {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 1.1rem;
  color: var(--oro);
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.ventaja h3 { font-size: 1.08rem; margin-bottom: 8px; }
.ventaja p { color: var(--texto-suave); font-size: 14.7px; }

/* ---------- Cómo trabajamos (pasos) ---------- */
.pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.paso {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio);
  padding: 26px 24px;
}
.paso .num {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 2.2rem;
  color: rgba(201, 162, 75, 0.55);
  line-height: 1;
  margin-bottom: 14px;
}
.paso h3 { font-size: 1.08rem; margin-bottom: 8px; }
.paso p { color: var(--texto-suave); font-size: 14.7px; }

/* ---------- Bloque CTA principal ---------- */
.cta-final {
  background: linear-gradient(180deg, var(--marino-2), var(--marino));
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  text-align: center;
  padding: 70px 0;
}
.cta-final h2 { max-width: 22ch; margin: 0 auto 16px; }
.cta-final p { color: var(--texto-suave); max-width: 52ch; margin: 0 auto 28px; }

/* ---------- Nosotros ---------- */
.nosotros .contenedor { display: grid; gap: 28px; align-items: start; }
.nosotros p { color: var(--texto-suave); max-width: 66ch; }
.nosotros p + p { margin-top: 14px; }
.nosotros-panel {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--oro-suave);
  padding: 24px;
}
.nosotros-panel h3 { font-size: 1.05rem; margin-bottom: 10px; }
.nosotros-panel ul { display: grid; gap: 10px; }
.nosotros-panel li { display: flex; gap: 10px; align-items: flex-start; color: var(--texto-suave); font-size: 14.5px; }
.nosotros-panel .tick { color: var(--oro); flex: 0 0 auto; margin-top: 3px; }

/* ---------- Contacto ---------- */
.contacto .contenedor { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
.contacto-datos { display: grid; gap: 12px; margin-top: 24px; }
.dato-contacto {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.dato-contacto:hover { border-color: var(--linea); transform: translateX(3px); }
.dato-contacto .ic {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--oro-suave);
  color: var(--oro);
}
.dato-contacto small { display: block; color: var(--texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; }
.dato-contacto strong { font-size: 15.5px; word-break: break-word; }

/* Formulario */
.formulario {
  background: linear-gradient(180deg, rgba(14, 36, 73, 0.7), rgba(10, 26, 63, 0.7));
  border: 1px solid var(--linea-suave);
  border-radius: 18px;
  padding: 28px 22px;
}
.formulario h3 { font-size: 1.25rem; margin-bottom: 6px; }
.formulario .intro { color: var(--texto-suave); font-size: 14.5px; margin-bottom: 22px; }

.campo { margin-bottom: 16px; }
.fila { display: grid; grid-template-columns: 1fr; gap: 16px; }
label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--texto); }
label .req { color: var(--oro); }

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%;
  background: rgba(7, 18, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 13px 14px;
  color: var(--texto);
  font-size: 15.5px;
  font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.16);
}
textarea { resize: vertical; min-height: 120px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--oro) 50%), linear-gradient(135deg, var(--oro) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
select option { background: var(--marino-2); color: var(--texto); }

.privacidad { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--texto-suave); margin: 6px 0 20px; cursor: pointer; }
.privacidad input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--oro); margin-top: 2px; }
.privacidad a { color: var(--oro); text-decoration: underline; }
.privacidad a:hover { color: var(--oro-claro); }

/* Honeypot (campo trampa invisible para robots) */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* Mensajes de estado del formulario */
.form-estado { display: none; margin-top: 16px; padding: 16px; border-radius: 10px; font-size: 14.5px; line-height: 1.55; }
.form-estado.visible { display: block; }
.form-estado.ok { background: rgba(46, 160, 96, 0.13); border: 1px solid rgba(46, 160, 96, 0.42); color: #c8ecd6; }
.form-estado.error { background: rgba(214, 69, 69, 0.12); border: 1px solid rgba(214, 69, 69, 0.4); color: #ffd0d0; }
.form-estado .titulo-estado { display: block; font-weight: 700; font-size: 15.5px; margin-bottom: 4px; color: var(--blanco); }
.form-estado a { color: var(--oro); text-decoration: underline; }
.formulario .btn:disabled { opacity: 0.7; cursor: wait; }

/* ---------- Pie de página ---------- */
.pie {
  border-top: 1px solid var(--linea-suave);
  background: rgba(5, 14, 33, 0.7);
  padding: 52px 0 30px;
}
.pie-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
.pie .marca img { height: 38px; width: auto; }
.pie .descripcion { color: var(--texto-suave); font-size: 14px; max-width: 44ch; margin-top: 14px; }
.pie-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--oro); margin-bottom: 14px; }
.pie-col a { display: block; color: var(--texto-suave); font-size: 14.7px; margin-bottom: 10px; transition: color 0.2s ease; }
.pie-col a:hover { color: var(--oro); }
.pie-final {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--linea-suave);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  color: var(--texto-suave);
  font-size: 13px;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); }

/* ---------- Páginas legales ---------- */
.pagina-legal { padding: 48px 0 72px; }
.pagina-legal .titular { padding: 36px 0 28px; border-bottom: 1px solid var(--linea-suave); margin-bottom: 34px; }
.pagina-legal h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin-bottom: 10px; }
.pagina-legal .subtitulo { color: var(--texto-suave); }
.prosa { max-width: 760px; }
.prosa h2 { font-size: 1.35rem; margin: 34px 0 12px; }
.prosa h3 { font-size: 1.1rem; margin: 24px 0 8px; }
.prosa p { color: var(--texto-suave); margin-bottom: 14px; }
.prosa ul { list-style: disc; padding-left: 22px; color: var(--texto-suave); margin: 0 0 14px; }
.prosa ul li { margin-bottom: 6px; }
.prosa a { color: var(--oro); text-decoration: underline; }
.prosa a:hover { color: var(--oro-claro); }
.prosa .pendiente {
  display: inline-block;
  background: var(--oro-suave);
  color: var(--oro);
  border: 1px dashed var(--oro);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 0.9em;
}
.prosa .aviso-actualizado { color: var(--texto-suave); font-size: 13.5px; margin-bottom: 22px; }

/* ---------- Animación de aparición al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.06s; }
.d2 { transition-delay: 0.12s; }
.d3 { transition-delay: 0.18s; }
.d4 { transition-delay: 0.24s; }
.d5 { transition-delay: 0.30s; }
.d6 { transition-delay: 0.36s; }

/* Respeta la preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .linea-oro { transform: scaleX(1); }
}

/* ============================================================
   TABLET (a partir de 640px)
   ============================================================ */
@media (min-width: 640px) {
  .contenedor { padding: 0 24px; }
  .seccion { padding: 84px 0; }
  .servicios-rejilla { grid-template-columns: 1fr 1fr; }
  .pasos { grid-template-columns: 1fr 1fr; }
  .fila { grid-template-columns: 1fr 1fr; }
  .formulario { padding: 34px 30px; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .experiencia .contenedor { grid-template-columns: auto 1fr; gap: 44px; }
  .nosotros .contenedor { grid-template-columns: 1.4fr 1fr; }
}

/* ============================================================
   ESCRITORIO (a partir de 900px)
   ============================================================ */
@media (min-width: 900px) {
  .contenedor { padding: 0 28px; }
  .seccion { padding: 104px 0; }
  .hamburguesa, .menu-movil { display: none !important; }
  .nav { display: flex; }
  .cabecera .btn-cta-cabecera { display: inline-flex; }
  .servicios-rejilla { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .ventajas { grid-template-columns: repeat(4, 1fr); }
  .pasos { grid-template-columns: repeat(4, 1fr); }
  .contacto .contenedor { grid-template-columns: 0.9fr 1.1fr; gap: 52px; }
  .pie-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .hero h1 { letter-spacing: -0.015em; }
}

/* Ajuste para pantallas muy pequeñas (evitar desbordes) */
@media (max-width: 359px) {
  .contenedor { padding: 0 16px; }
  .btn { padding: 11px 18px; font-size: 14px; }
}



/* ============================================================
   Ajustes WordPress
   ============================================================ */

/* Menús generados por WordPress */
.nav > ul,
.menu-movil > ul,
.pie-col > ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; align-items: center; gap: 24px; }
.nav > ul li a { color: var(--texto-suave); font-size: 15px; font-weight: 600; transition: color 0.2s ease; }
.nav > ul li a:hover { color: var(--oro); }
.menu-movil > ul li a { display: block; padding: 15px 4px; color: var(--texto); font-size: 16px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.06); }
.menu-movil > ul li a:hover { color: var(--oro); }
.pie-col > ul li a { display: block; color: var(--texto-suave); font-size: 14.7px; margin-bottom: 10px; transition: color 0.2s ease; }
.pie-col > ul li a:hover { color: var(--oro); }

/* Paginación */
.nav-links { display: flex; gap: 12px; margin-top: 30px; }
.nav-links a, .nav-links span { padding: 8px 14px; border: 1px solid var(--linea-suave); border-radius: 8px; color: var(--texto-suave); }
.nav-links .current { color: var(--oro); border-color: var(--oro); }

/* Contenido de página (bloques de Gutenberg) */
.prosa h2.wp-block-heading { font-family: var(--fuente-titulos); color: var(--blanco); font-size: 1.35rem; margin: 34px 0 12px; }
.prosa h3.wp-block-heading { font-family: var(--fuente-titulos); color: var(--blanco); font-size: 1.1rem; margin: 24px 0 8px; }
.prosa p { color: var(--texto-suave); margin-bottom: 14px; }
.prosa ul { list-style: disc; padding-left: 22px; color: var(--texto-suave); margin: 0 0 14px; }
.prosa ol { list-style: decimal; padding-left: 22px; color: var(--texto-suave); margin: 0 0 14px; }
.prosa li { margin-bottom: 6px; }
.prosa a { color: var(--oro); text-decoration: underline; }
.prosa figure { margin: 0 0 16px; }

/* Formulario creado con plugin (WPForms / Contact Form 7) */
.formulario .wpforms-container { margin: 0; }
.formulario .wpforms-field,
.formulario .wpcf7-form p { margin-bottom: 16px; }
.formulario .wpforms-field-label,
.formulario .wpcf7-form label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--texto); }
.formulario .wpforms-required-label,
.formulario .wpcf7-form .required { color: var(--oro); }
.formulario input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--oro); }
.formulario button.wpforms-submit,
.formulario input.wpcf7-submit,
.formulario button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: 46px; border-radius: 999px; padding: 12px 24px; font-weight: 700; font-size: 15px; line-height: 1;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro)); color: #1b1200; border: 0; cursor: pointer;
  box-shadow: 0 10px 24px rgba(201,162,75,.22); transition: transform .18s ease, box-shadow .18s ease; font-family: inherit;
}
.formulario button.wpforms-submit:hover,
.formulario input.wpcf7-submit:hover,
.formulario button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(201,162,75,.34); }
.formulario .wpforms-confirmation-container-full,
.formulario .wpcf7-response-output {
  margin: 16px 0 0; padding: 16px; border-radius: 10px; font-size: 14.5px; line-height: 1.55;
  background: rgba(46,160,96,.13); border: 1px solid rgba(46,160,96,.42); color: #c8ecd6;
}
.formulario .wpcf7 .screen-reader-response { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }



/* ============================================================
   Pie de pagina v3: 3 columnas + barra inferior
   ============================================================ */
@media (min-width: 900px) {
  .pie-grid { grid-template-columns: 1.6fr 1fr 1fr; }
}
.pie-legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie-legal li { margin: 0; }
.pie-legal a { color: var(--texto-suave); font-size: 13px; transition: color 0.2s ease; }
.pie-legal a:hover { color: var(--oro); }
.pie-col .dato { display: block; color: var(--texto-suave); font-size: 14.7px; margin-bottom: 10px; }


/* ============================================================
   Ajustes V6
   ============================================================ */

/* 1. Logo de cabecera más grande */
.marca img { height: 48px; }
.cabecera.reducida .marca img { height: 40px; }

/* 2. Botón dorado de cabecera: texto negro y centrado */
.cabecera .btn-cta-cabecera {
  color: #000000;
  text-align: center;
  justify-content: center;
}

/* 8. Enlace de Instagram en el pie */
.pie-col a.instagram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 9. Hero en móvil: altura contenida y foco en la persona */
@media (max-width: 640px) {
  .hero { min-height: 520px; }
  .hero-fondo img { object-position: center 30%; }
}


/* ============================================================
   Ajustes V7
   ============================================================ */

/* 1. Botón del menú móvil: texto negro y centrado */
.menu-movil .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000000;
}

/* 2. Experiencia a una columna tras quitar el bloque "25+" */
.experiencia .contenedor { grid-template-columns: 1fr; }
.experiencia .texto { max-width: 760px; }

/* 3. Hero móvil: persona visible, no cortada por la derecha */
@media (max-width: 640px) {
  .hero-fondo img { object-position: 80% 30%; }
}

/* 4. Separadores dorados entre secciones */
#servicios { border-top: 1px solid var(--linea); }
#por-que { border-top: 1px solid var(--linea); }


/* ============================================================
   Ajustes V8
   ============================================================ */

/* 1. Más espacio superior del hero en móvil */
@media (max-width: 640px) {
  .hero { padding-top: 96px; }
}

/* 2. Separador dorado entre Nosotros y Contacto */
#contacto { border-top: 1px solid var(--linea); }