/* =========================================================
   Godoy Barrero Abogados
   Estilo: Jurídico moderno / Blanco & Negro
   ========================================================= */

/* ---------- Variables base ---------- */
:root {
    --black: #0b0b0b; /* Color principal negro para texto y elementos */
    --white: #ffffff; /* Color blanco para fondos */
    --gray: #6b6b6b; /* Gris para texto secundario */
    --light-gray: #f5f5f5; /* Gris claro para fondos de secciones */
    --accent: #111111; /* Color de acento, similar al negro */

    --font-title: "Georgia", "Times New Roman", serif; /* Fuente serif para títulos */
    --font-body: "Inter", "Segoe UI", Arial, sans-serif; /* Fuente sans-serif para cuerpo de texto */

    --max-width: 1200px; /* Ancho máximo para contenedores principales */
}

/* ---------- Reset básico ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
}

html {
    scroll-behavior: smooth; /* Desplazamiento suave al navegar por anclas */
}

body {
    font-family: var(--font-body); /* Fuente para el texto del cuerpo */
    color: var(--black); /* Color de texto principal */
    background-color: var(--white); /* Fondo blanco */
    line-height: 1.6; /* Altura de línea para mejor legibilidad */
}

/* ---------- Utilidades ---------- */
.container {
    max-width: var(--max-width); /* Limita el ancho máximo */
    margin: 0 auto; /* Centra horizontalmente */
    padding: 4rem 1.5rem; /* Espaciado interno */
}

h1, h2, h3 {
    font-family: var(--font-title); /* Fuente serif para títulos */
    font-weight: 600; /* Peso de fuente seminegrita */
    color: #000; /* Color negro para títulos */
}



h2 {
    font-size: 2rem; /* Tamaño de fuente para subtítulos */
    margin-bottom: 1.5rem; /* Espacio inferior */
}

h3 {
    margin: 2rem 0 1rem; /* Márgenes para títulos de sección */
}

small, label {
    color: #222; /* Color gris oscuro para texto pequeño y etiquetas */
}

p {
    color: #1a1a1a; /* Color gris para párrafos */
    line-height: 1.6; /* Altura de línea para legibilidad */
    max-width: 800px; /* Ancho máximo para evitar líneas muy largas */
}

/* ---------- Header ---------- */
.header {
    position: sticky; /* Fija el header en la parte superior al hacer scroll */
    top: 0;
    background: var(--white); /* Fondo blanco */
    border-bottom: 1px solid #eaeaea; /* Línea inferior gris clara */
    z-index: 100; /* Asegura que esté encima de otros elementos */
}

.header-content {
    max-width: var(--max-width); /* Limita ancho */
    margin: 0 auto; /* Centra */
    padding: 0.5rem 1.5rem; /* Espaciado interno */
    display: flex; /* Flexbox para layout */
    justify-content: space-between; /* Espacia elementos */
    align-items: center; /* Alinea verticalmente */
}

.logo-text {
    font-size: 2rem; /* Tamaño grande para el logo */
    margin-bottom: 1.5rem; /* Espacio inferior */
    font-weight: 600; /* Negrita */
    color: #000; /* Negro */
}

.nav a {
    margin-left: 1.5rem; /* Espacio entre enlaces */
    text-decoration: none; /* Sin subrayado */
    color: var(--black); /* Color negro */
    font-weight: 500; /* Peso medio */
    position: relative; /* Para pseudo-elemento */
}

.nav a::after {
    content: ""; /* Crea una línea debajo */
    position: absolute;
    width: 0; /* Inicialmente invisible */
    height: 2px; /* Grosor de la línea */
    bottom: -4px; /* Posición debajo del texto */
    left: 0;
    background: var(--black); /* Color negro */
    transition: width 0.3s ease; /* Animación suave */
}

.nav a:hover::after {
    width: 100%; /* Expande la línea al hover */
}

/* ---------- Hero ---------- */
.hero {
    background: var(--light-gray); /* Fondo gris claro */
    padding: 6rem 1.5rem; /* Espaciado amplio */
}

.hero-content {
    max-width: var(--max-width); /* Limita ancho */
    margin: 0 auto; /* Centra */
}

.hero h2 {
    font-size: 2.5rem; /* Tamaño grande para el título principal */
    max-width: 700px; /* Limita ancho del texto */
}

.hero p {
    margin: 1rem 0 2rem; /* Márgenes verticales */
    font-size: 1.1rem; /* Tamaño ligeramente mayor */
}

.btn-primary {
    display: inline-block; /* Comportamiento de bloque inline */
    padding: 0.8rem 2rem; /* Espaciado interno */
    border: 2px solid var(--black); /* Borde negro */
    text-decoration: none; /* Sin subrayado */
    color: var(--black); /* Texto negro */
    font-weight: 500; /* Peso medio */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
}

.btn-primary:hover {
    background: var(--black); /* Fondo negro al hover */
    color: var(--white); /* Texto blanco */
}

/* ---------- Porque elegirnos ---------- */
.why-us p {
    margin-bottom: 24px; /* Espacio inferior para párrafos */
}

/* ---------- Servicios ---------- */
.services h3 {
    font-size: 1.3rem; /* Tamaño para subtítulos de servicios */
}

.cards {
    display: grid; /* Layout en grid */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Columnas responsivas */
    gap: 1.5rem; /* Espacio entre tarjetas */
    margin-bottom: 3rem; /* Espacio inferior */
}

.card {
    border: 1px solid #e0e0e0; /* Borde gris claro */
    padding: 1.5rem; /* Espaciado interno */
    transition: all 0.3s ease;
    background: var(--white);
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* ---------- equipo de trabajo quienes somos ---------- */
.about-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.about-text {
  flex: 1;
}

.about-text h2 {
  margin-bottom: 20px;
}

.about-text p {
  margin-bottom: 16px;
  line-height: 1.6;
}

.about-image {
  flex: 0 0 320px;
  text-align: right;
}

.about-image img {
  width: 100%;
  max-width: 320px;
  border-radius: 6px;
  object-fit: cover;
}

.about-image {
  overflow: hidden;
  border-radius: 6px;
}

.about-image img {
  width: 100%;
  max-width: 320px;
  transition: transform 0.6s ease;
}

.about-image:hover img {
  transform: scale(1.05);
}


/* ---------- Contacto ---------- */
.contact-text {
    max-width: 700px;
    margin-bottom: 3rem;
}

.contact-text p {
    margin: 1rem 0;
    color: #1a1a1a;
    line-height: 1.6;
}

.contact-data p {
    display: flex;
    align-items: center;
    margin-top: 0.8rem;
    font-size: 0.95rem;
}

.contact-data i,
.contact-info i {
    font-size: 1.2rem; /* Tamaño de iconos */
    margin-right: 0.6rem; /* Espacio a la derecha */
    color: var(--black); /* Color negro */
}

.contact-info span {
    color: var(--gray); /* Color gris para spans */
}


/* -------- Redes sociales ----------*/

.social-section {
    padding: 1rem 1.5rem; /* Espaciado interno */
    text-align: center; /* Centra el contenido */
}

.social-icons {
    margin-top: 2rem; /* Espacio superior */
}

.social-icons a {
    display: inline-block; /* Bloque inline para márgenes */
    margin: 0 1.2rem; /* Márgenes laterales */
    font-size: 2.2rem; /* Tamaño grande para iconos */
    color: var(--black); /* Color negro */
    transition: transform 0.3s ease; /* Transición para animación */
}

/* Animación tipo ring */
.social-icons a:hover {
    animation: ring 0.8s ease-in-out; /* Aplica animación de rotación al hover */
}

@keyframes ring {
    0% { transform: rotate(0deg); } /* Inicio: sin rotación */
    20% { transform: rotate(8deg); } /* 20%: rota 8 grados */
    40% { transform: rotate(-8deg); } /* 40%: rota -8 grados */
    60% { transform: rotate(6deg); } /* 60%: rota 6 grados */
    80% { transform: rotate(-6deg); } /* 80%: rota -6 grados */
    100% { transform: rotate(0deg); } /* Fin: vuelve a 0 */
}


/* QR placeholder */
/*
.qr img {
    width: 120px;
    margin-top: 1rem;
}
*/

/* ---------- Formulario ---------- */
.contact form input,
.contact form textarea {
  width: 100%; /* Ancho completo */
  padding: 14px; /* Espaciado interno */
  margin-bottom: 16px; /* Margen inferior */
  border: 1px solid #ccc; /* Borde gris */
  border-radius: 4px; /* Bordes redondeados */
}

.contact form button {
  padding: 14px 28px; /* Espaciado interno */
  background-color: #000; /* Fondo negro */
  color: #fff; /* Texto blanco */
  border: none; /* Sin borde */
  cursor: pointer; /* Cursor de puntero */
}


/* ---------- Footer ---------- */
.footer {
    border-top: 1px solid #eaeaea;
    padding: 1.5rem;
}

.footer-inner {
    max-width: var(--max-width); /* Limita ancho */
    margin: 0 auto; /* Centra */
    display: flex; /* Flexbox */
    justify-content: flex-end; /* Alinea a la derecha */
    font-size: 0.85rem; /* Tamaño de fuente pequeño */
}


/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .lawyer-content {
        grid-template-columns: 1fr; /* Una columna en tablets */
    }

    .contact-grid {
        grid-template-columns: 1fr; /* Una columna en tablets */
    }

    .nav {
        display: none; /* Oculta navegación en tablets/móviles */
    }
}

@media (max-width: 768px) {
    /* Ajustes para móviles */
    .container {
        padding: 2rem 1rem; /* Reduce padding en móviles */
    }

    .hero h2 {
        font-size: 2rem; /* Reduce tamaño de título en hero */
    }

    .hero p {
        font-size: 1rem; /* Reduce tamaño de párrafo en hero */
    }

    .btn-primary {
        padding: 0.6rem 1.5rem; /* Reduce padding de botones */
        font-size: 0.9rem; /* Reduce fuente de botones */
    }

    .about-content {
        flex-direction: column; /* Columna en móviles */
        text-align: center; /* Centra texto en about */
    }

    .about-image {
        margin-top: 2rem; /* Espacio arriba de imagen */
    }

    /* Animación automática de zoom para imágenes en móviles */
    .about-image img,
    .contact-right img {
        animation: autoZoom 4s ease-in-out infinite; /* Zoom automático suave */
    }

    .services h3 {
        font-size: 1.1rem; /* Reduce tamaño de subtítulos */
    }

    .card {
        padding: 1rem; /* Reduce padding de tarjetas */
    }

    /* Ajustes para métricas en móviles */
    .metrics {
        display: flex;
        flex-direction: column; /* Columna para métricas */
        gap: 1rem; /* Espacio entre métricas */
    }

    .metric-item {
        text-align: center; /* Centra métricas */
    }

    .contact-text {
        text-align: justify; /* Justifica texto para mejor ajuste */
        max-width: none; /* Permite ancho completo */
        hyphens: auto; /* Permite guiones para mejor ajuste */
    }

    .contact-text p {
        font-size: 1rem; /* Reduce fuente para evitar cortes */
        word-wrap: break-word; /* Rompe palabras largas */
    }

    .contact-text h2 {
        font-size: 1.8rem; /* Reduce título de contacto */
        text-align: center; /* Centra título */
    }

    /* Animación automática de ring para iconos en móviles */
    .contact-icon,
    .social-icons a {
        animation: ring 3s ease-in-out infinite; /* Ring automático suave */
    }

    .social-icons a {
        font-size: 1.8rem; /* Reduce iconos sociales */
        margin: 0 0.8rem; /* Reduce márgenes */
    }

    .footer {
        padding: 1rem; /* Reduce padding de footer */
    }
}

/* Keyframes para zoom automático */
@keyframes autoZoom {
    0%, 100% {
        transform: scale(1); /* Tamaño normal */
    }
    50% {
        transform: scale(1.05); /* Zoom sutil */
    }
}



/* ---------- Logo ---------- */
/* Logo y texto juntos */
.logo-text-container {
    display: flex;
    align-items: center;      /* alinea verticalmente logo y texto */
    gap: 5px;                /* espacio entre logo y nombre */
}

/* Ajuste del logo */
.logo {
    height: 40px; /* ajusta según convenga */
    width: auto;
}

/* Texto del logo */
.logo-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000; /* Negro vivo */
    margin: 0;
}

/* Navegación */
.nav a {
    margin-left: 20px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none; /* quita subrayado si aplica */
    color: inherit;        /* mantiene el color del texto original */
}

.logo-link .logo-text {
    margin-left: 0.5rem;   /* separa un poco el texto del logo */
}


/* ===============================
   SERVICIOS – TARJETAS LIMPIAS
================================ */

.services h2 {
  text-align: left;
  margin-bottom: 24px;
}

.services h3 {
  margin: 40px 0 20px;
  font-size: 1.2rem;
}

/* GRID */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Más ancho para acomodar más texto */
  gap: 24px;
  margin-bottom: 48px;
}

/* TARJETA */
.servicio-card {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  padding: 28px 26px;
  min-height: 100px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* HOVER SUAVE */
.servicio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

/* TEXTO */
.servicio-card h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.servicio-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #333;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .servicio-card {
    min-height: auto;
  }
}

  /* TARJETA PYMES */
.servicio-card-pymes {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  padding: 28px 26px;
  min-height: 200px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* HOVER SUAVE */
.servicio-card-pymes:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

/* TEXTO */
.servicio-card-pymes h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.servicio-card-pymes p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #333;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .servicio-card-pymes {
    min-height: auto;
  }
}




/* ===============================
   METRICS SECTION */

.metrics {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 60px;
}

.metric-item {
  text-align: center;
  flex: 1;
}

.metric-number {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin-bottom: 8px;
}

.metric-text {
  font-size: 14px;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* Justificar texto en secciones específicas */
.about-text p,
.why-us p
{
  text-align: justify;
  text-justify: inter-word;
}


/* Ajuste de scroll para secciones ancladas */
section {
    scroll-margin-top: 40px; /* igual a la nueva altura del header */
}


/* Estilo personalizado para la lista en "Por qué elegirnos" */
.why-us-list {
    list-style: none; /* quita los bullets originales */
    padding-left: 0;
    margin: 1rem 0;
}

.why-us-list li {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
    font-size: 1rem;
    color: var(--black);
}

.why-us-list li i {
    color: var(--black);  /* color del martillo */
    margin-right: 0.8rem; /* espacio entre ícono y texto */
    font-size: 1.1rem;    /* tamaño del ícono */
    width: 20px;          /* para alinear los íconos en columna */
    text-align: center;
}


/* ===============================
   HERO SECTION ADJUSTMENTS */

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem; /* espacio entre texto y la imagen */
    flex-wrap: wrap; /* permite que en móviles se acomoden */
}

.hero-text {
    flex: 1 1 500px; /* ocupa el espacio restante, mínimo 500px */
}

.hero-image {
    flex: 0 0 300px; /* tamaño fijo para la imagen */
    display: flex;
    justify-content: flex-end; /* alinea la imagen a la derecha */
}

.hero-image img {
    max-width: 100%;
    height: auto;
}

/* Video de fondo en Hero */
.hero {
    position: relative;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.3; /* ajusta para legibilidad del texto */
}


.hero-content {
    position: relative; /* sobre el video */
    z-index: 1;
}


/* ===============================
   CONTACT SECTION SOCIAL ICONS */
.contact-data p {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* espacio entre icono y texto */
}


.contact-content {
  display: flex;
  gap: 3rem; /* más espacio entre columnas */
  align-items: center;
  flex-wrap: wrap;
}

.contact-left {
  flex: 1 1 500px;
}

.contact-right {
  flex: 0 0 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-right img {
  max-width: 100%;
  height: auto;
  transition: transform 0.6s ease; /* Transición suave para zoom */
}

.contact-right:hover img {
  transform: scale(1.05); /* Zoom al pasar el mouse */
}

/* TEXTO E ICONOS MÁS GRANDES */
.contact-text h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.contact-text p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.contact-invite {
  font-weight: 600;
  margin-top: 1.5rem;
  font-size: 1.2rem;
}

.contact-data p {
  margin-bottom: 1rem; /* Espacio reducido entre elementos de contacto */
  display: flex;
  align-items: center;
  gap: 1rem; /* más espacio entre icono y texto */
  font-size: 1.2rem; /* texto más grande */
}

.contact-icon {
  font-size: 3rem; /* Iconos más grandes */
  text-decoration: none; /* Sin subrayado */
  transition: transform 0.2s ease; /* Transición para animación */
  cursor: pointer; /* Cursor de puntero */
}

.contact-icon i {
  font-size: 3rem; /* Asegura que el icono sea grande */
}

.contact-icon.whatsapp { color: var(--black); } /* Color negro para WhatsApp */
.contact-icon.email    { color: var(--black); } /* Color negro para email */

.contact-icon:hover {
  animation: ring 0.8s ease-in-out; /* Animación de rotación al hover */
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .contact-content {
    flex-direction: column;
    text-align: center;
  }

  .contact-right {
    margin-top: 2rem;
  }
}