/* =========================================================
   María Mercedes Díaz Torres — Abogada | Neiva, Huila
   Hoja de estilos base — paleta verde botella / gris carbón / blanco
   ========================================================= */

:root {
  --verde-botella: #0d3b2e;
  --verde-botella-oscuro: #082821;
  --verde-botella-claro: #145c41;
  --gris-carbon: #2a2a2c;
  --gris-carbon-suave: #52524f;
  --blanco: #ffffff;
  --hueso: #f6f4ef;
  --linea: #e2ded4;
  --texto: #23231f;
  --exito-whatsapp: #1f6b4a;
  --alerta: #7a2e2e;

  --fuente-titulos: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fuente-texto: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;

  --radio: 4px;
  --sombra: 0 8px 30px rgba(13, 59, 46, 0.12);
  --transicion: 0.25s ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  color: var(--verde-botella-oscuro);
  line-height: 1.25;
  margin: 0 0 0.6em;
  font-weight: 700;
}

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

.contenedor {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 88px 0; }

.etiqueta {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-botella-claro);
  font-weight: 600;
  margin-bottom: 14px;
}

.subtitulo {
  color: var(--gris-carbon-suave);
  font-size: 1.08rem;
  max-width: 640px;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radio);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion), color var(--transicion);
  white-space: nowrap;
}
.boton:hover { transform: translateY(-1px); }

.boton-primario {
  background: var(--verde-botella);
  color: var(--blanco);
}
.boton-primario:hover { background: var(--verde-botella-claro); box-shadow: var(--sombra); }

.boton-secundario {
  background: transparent;
  border-color: var(--blanco);
  color: var(--blanco);
}
.boton-secundario:hover { background: rgba(255,255,255,0.12); }

.boton-oscuro {
  background: transparent;
  border-color: var(--verde-botella);
  color: var(--verde-botella);
}
.boton-oscuro:hover { background: var(--verde-botella); color: var(--blanco); }

.boton-whatsapp {
  background: var(--exito-whatsapp);
  color: var(--blanco);
}
.boton-whatsapp:hover { background: #17593c; box-shadow: var(--sombra); }

/* ---------- Header ---------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.barra-superior {
  background: var(--gris-carbon);
  color: #d9d7cf;
  font-size: 0.82rem;
}
.barra-superior .contenedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.barra-superior a { color: #d9d7cf; }
.barra-superior a:hover { color: var(--blanco); }
.barra-superior .contacto-rapido { display: flex; gap: 20px; flex-wrap: wrap; }

.nav-principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.marca {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.marca .nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--verde-botella-oscuro);
}
.marca .rol {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-carbon-suave);
}

.menu {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gris-carbon);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transicion), border-color var(--transicion);
}
.menu a:hover,
.menu a.activo { color: var(--verde-botella); border-color: var(--verde-botella); }

.menu .cta-menu {
  background: var(--verde-botella);
  color: var(--blanco);
  padding: 10px 20px;
  border-radius: var(--radio);
  border-bottom: none !important;
}
.menu .cta-menu:hover { background: var(--verde-botella-claro); }

.boton-menu-movil {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.boton-menu-movil span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--gris-carbon);
  margin: 5px 0;
  transition: var(--transicion);
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--verde-botella-oscuro) 0%, var(--verde-botella) 60%);
  color: var(--blanco);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.hero .contenedor {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.hero h1 { color: var(--blanco); font-size: 2.6rem; }
.hero .destaque { color: #cfe3d8; }
.hero p.intro {
  font-size: 1.12rem;
  color: #e3ece6;
  max-width: 520px;
}
.hero .acciones {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.hero .confianza {
  margin-top: 40px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 24px;
}
.hero .confianza div strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  color: var(--blanco);
}
.hero .confianza div span {
  font-size: 0.82rem;
  color: #c7d8cd;
}

.hero-foto {
  border-radius: var(--radio);
  aspect-ratio: 4/5;
  overflow: hidden;
}
.hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Franja aviso / línea 155 ---------- */
.franja-aviso {
  background: var(--hueso);
  border-bottom: 1px solid var(--linea);
  padding: 14px 0;
  font-size: 0.9rem;
  text-align: center;
  color: var(--gris-carbon);
}
.franja-aviso strong { color: var(--alerta); }
.franja-aviso a { text-decoration: underline; font-weight: 600; }

/* ---------- Sobre mí ---------- */
.sobre-mi { background: var(--blanco); }
.sobre-mi .contenedor {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.sobre-mi .foto-marco {
  border-radius: var(--radio);
  aspect-ratio: 4/5;
  overflow: hidden;
}
.sobre-mi .foto-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sobre-mi .credenciales {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sobre-mi .credenciales li {
  padding-left: 26px;
  position: relative;
  font-size: 0.95rem;
  color: var(--gris-carbon);
}
.sobre-mi .credenciales li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--verde-botella);
  font-weight: 700;
}

/* ---------- Diferencial ---------- */
.diferencial {
  background: var(--gris-carbon);
  color: var(--hueso);
}
.diferencial .contenedor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.diferencial h2 { color: var(--blanco); }
.diferencial .etiqueta { color: #9fd6b8; }
.diferencial p { color: #d7d5cd; }
.diferencial .tarjeta {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radio);
  padding: 32px;
}
.diferencial .tarjeta h3 { color: var(--blanco); font-size: 1.15rem; }
.diferencial .tarjeta p { font-size: 0.95rem; margin-bottom: 0; }

/* ---------- Áreas de práctica ---------- */
.areas { background: var(--hueso); }
.areas .encabezado-seccion {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.areas .encabezado-seccion .subtitulo { margin: 0 auto; }
.tarjetas-areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.tarjeta-area {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta-area:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.tarjeta-area .num {
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  color: var(--verde-botella-claro);
  margin-bottom: 12px;
  letter-spacing: 0.08em;
}
.tarjeta-area h3 { font-size: 1.25rem; }
.tarjeta-area p { color: var(--gris-carbon-suave); font-size: 0.95rem; flex-grow: 1; }
.tarjeta-area .enlace {
  margin-top: 18px;
  font-weight: 700;
  color: var(--verde-botella);
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tarjeta-area.acento { border-top: 3px solid var(--verde-botella); }

/* ---------- CTA final ---------- */
.cta-final {
  background: var(--verde-botella-oscuro);
  color: var(--blanco);
  text-align: center;
}
.cta-final h2 { color: var(--blanco); }
.cta-final .subtitulo { color: #d7e6dd; margin: 0 auto 32px; }
.cta-final .acciones {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cta-final .discrecion {
  margin-top: 28px;
  font-size: 0.85rem;
  color: #b7ccc0;
}

/* ---------- Guía por tema (páginas de área) ---------- */
.guia {
  background: var(--blanco);
}
.guia-item {
  padding: 44px 0;
  border-bottom: 1px solid var(--linea);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
}
.guia-item:first-child { padding-top: 0; }
.guia-item:last-child { border-bottom: none; }
.guia-item .guia-num {
  font-family: var(--fuente-titulos);
  font-size: 2.6rem;
  color: var(--linea);
  line-height: 1;
}
.guia-item h2 { font-size: 1.4rem; margin-bottom: 0.5em; }
.guia-item .lista-check {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guia-item .lista-check li {
  padding-left: 26px;
  position: relative;
  font-size: 0.94rem;
  color: var(--gris-carbon);
}
.guia-item .lista-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--verde-botella);
  font-weight: 700;
}

/* ---------- Proceso / timeline (divorcio contencioso) ---------- */
.proceso {
  background: var(--gris-carbon);
  color: var(--hueso);
}
.proceso h2 { color: var(--blanco); }
.proceso .etiqueta { color: #9fd6b8; }
.proceso .intro-proceso { color: #d7d5cd; max-width: 640px; margin-bottom: 48px; }
.pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.paso {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radio);
  padding: 28px 22px;
  position: relative;
}
.paso .paso-num {
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  color: var(--blanco);
  background: var(--verde-botella-claro);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.paso h3 { color: var(--blanco); font-size: 1rem; margin-bottom: 8px; }
.paso p { color: #c7c5bd; font-size: 0.88rem; margin: 0; }

/* ---------- FAQ ---------- */
.faq { background: var(--hueso); }
.faq details {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 20px 24px;
  margin-bottom: 14px;
}
.faq summary {
  cursor: pointer;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--verde-botella-oscuro);
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 1.3rem;
  color: var(--verde-botella);
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  margin: 14px 0 0;
  color: var(--gris-carbon-suave);
  font-size: 0.95rem;
}

/* ---------- Caja de seguridad / señales de alerta ---------- */
.caja-seguridad {
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde-botella);
  border-radius: var(--radio);
  padding: 24px 28px;
  margin: 40px 0 0;
}
.caja-seguridad h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.caja-seguridad ul {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--gris-carbon-suave);
  font-size: 0.92rem;
}
.caja-seguridad li { margin-bottom: 6px; }

.senales {
  background: var(--gris-carbon);
  color: var(--hueso);
}
.senales h2 { color: var(--blanco); }
.senales .etiqueta { color: #9fd6b8; }
.senales .intro-senales { color: #d7d5cd; max-width: 680px; margin-bottom: 40px; }
.senales-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.senal {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radio);
  padding: 20px 22px;
  font-size: 0.94rem;
  color: #d7d5cd;
}
.senal strong { color: var(--blanco); display: block; margin-bottom: 4px; }

/* ---------- Footer ---------- */
.pie {
  background: var(--gris-carbon);
  color: #c9c7bf;
  padding: 56px 0 28px;
  font-size: 0.92rem;
}
.pie .contenedor {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
}
.pie h4 {
  color: var(--blanco);
  font-size: 1rem;
  margin-bottom: 16px;
}
.pie .marca-pie {
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  color: var(--blanco);
  margin-bottom: 10px;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 10px; }
.pie a:hover { color: var(--blanco); }
.pie .linea-155 {
  display: block;
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: 36px;
  padding-top: 24px;
  font-size: 0.85rem;
  text-align: center;
  color: #b7ccc0;
}
.pie .copy {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 0.8rem;
  color: #8b8a83;
}

/* ---------- Botón flotante WhatsApp ---------- */
.whatsapp-flotante {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 600;
  background: var(--exito-whatsapp);
  color: var(--blanco);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  font-size: 1.6rem;
  transition: transform var(--transicion);
}
.whatsapp-flotante:hover { transform: scale(1.07); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero .contenedor,
  .sobre-mi .contenedor,
  .diferencial .contenedor { grid-template-columns: 1fr; }
  .hero-foto, .sobre-mi .foto-marco { max-width: 360px; margin: 0 auto; }
  .tarjetas-areas { grid-template-columns: 1fr; }
  .pie .contenedor { grid-template-columns: 1fr 1fr; }
  .guia-item { grid-template-columns: 1fr; gap: 12px; }
  .guia-item .guia-num { font-size: 1.6rem; }
  .pasos { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  section { padding: 60px 0; }
  .hero { padding: 56px 0; }
  .hero h1 { font-size: 2rem; }
  .menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 78%;
    max-width: 320px;
    background: var(--blanco);
    flex-direction: column;
    align-items: flex-start;
    padding: 96px 32px 32px;
    gap: 24px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .menu.abierto { transform: translateX(0); }
  .boton-menu-movil { display: block; }
  .barra-superior .contacto-rapido { justify-content: center; width: 100%; }
  .pie .contenedor { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .senales-grid { grid-template-columns: 1fr; }
}