/* ============================================
   BLACK SHEEP AGENCY - VERSIÓN BLANCA
   FWeb Standards - CSS Consolidado
   ============================================ */

/* ===== CSS RESET ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

/* ===== CSS VARIABLES ===== */
:root {
  /* Colores */
  --color-primary: #fdfdfd;
  --color-secondary: #050404;
  --color-accent: #B23AEE;
  --color-accent-alt: #a5c530;
  --color-gray: #c8c9c9;
  --color-text: #050404;
  --color-text-light: #666666;
  --color-background: #fdfdfd;
  --color-background-alt: #f5f5f5;

  /* Typography - SYSTEM FONTS */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Transitions (solo transform y opacity) */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
}

/* ===== TYPOGRAPHY ===== */
body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  background-color: var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

/* ===== UTILITIES ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.highlight {
  color: black;
}

/* ===== SVG ICONS SYSTEM ===== */
.icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  transition: transform var(--transition-normal);
}

.icon-whatsapp {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23a5c530"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0 0 12.04 2m.01 1.67c2.2 0 4.26.86 5.82 2.42a8.225 8.225 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23-1.48 0-2.93-.39-4.19-1.15l-.3-.17-3.12.82.83-3.04-.2-.32a8.188 8.188 0 0 1-1.26-4.38c.01-4.54 3.7-8.24 8.25-8.24M8.53 7.33c-.16 0-.43.06-.66.31-.22.25-.87.86-.87 2.07 0 1.22.89 2.39 1 2.56.14.17 1.76 2.67 4.25 3.73.59.27 1.05.42 1.41.53.59.19 1.13.16 1.56.1.48-.07 1.46-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.07-.1-.23-.15-.48-.27-.25-.11-1.47-.74-1.69-.82-.23-.08-.37-.12-.56.12-.16.25-.64.81-.78.97-.15.17-.29.19-.53.07-.26-.13-1.06-.39-2-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.39.11-.5.11-.11.25-.29.37-.44.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.11-.56-1.35-.77-1.84-.2-.48-.4-.42-.56-.43-.14 0-.3-.01-.47-.01z"/></svg>');
}

.icon-whatsapp2 {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0 0 12.04 2m.01 1.67c2.2 0 4.26.86 5.82 2.42a8.225 8.225 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23-1.48 0-2.93-.39-4.19-1.15l-.3-.17-3.12.82.83-3.04-.2-.32a8.188 8.188 0 0 1-1.26-4.38c.01-4.54 3.7-8.24 8.25-8.24M8.53 7.33c-.16 0-.43.06-.66.31-.22.25-.87.86-.87 2.07 0 1.22.89 2.39 1 2.56.14.17 1.76 2.67 4.25 3.73.59.27 1.05.42 1.41.53.59.19 1.13.16 1.56.1.48-.07 1.46-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.07-.1-.23-.15-.48-.27-.25-.11-1.47-.74-1.69-.82-.23-.08-.37-.12-.56.12-.16.25-.64.81-.78.97-.15.17-.29.19-.53.07-.26-.13-1.06-.39-2-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.39.11-.5.11-.11.25-.29.37-.44.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.11-.56-1.35-.77-1.84-.2-.48-.4-.42-.56-.43-.14 0-.3-.01-.47-.01z"/></svg>');
}

.icon-instagram {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23B23AEE"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/></svg>');
}

.icon-link {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23A3E635"><path d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z"/></svg>');
}

.icon-team {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23B23AEE"><path d="M16 17v2H2v-2s0-4 7-4 7 4 7 4m-3.5-9.5A3.5 3.5 0 1 0 9 11a3.5 3.5 0 0 0 3.5-3.5m3.44 5.5A5.32 5.32 0 0 1 18 17v2h4v-2s0-3.63-6.06-4M15 4a3.39 3.39 0 0 0-1.93.59 5 5 0 0 1 0 5.82A3.39 3.39 0 0 0 15 11a3.5 3.5 0 0 0 0-7z"/></svg>');
}

.icon-innovation {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23a5c530"><path d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7M9 21v-1h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1m3-17a5 5 0 0 0-5 5c0 2.05 1.23 3.81 3 4.58V16h4v-2.42c1.77-.77 3-2.53 3-4.58a5 5 0 0 0-5-5z"/></svg>');
}

.icon-custom {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23B23AEE"><path d="M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66z"/></svg>');
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 8px;
  font-weight: var(--font-weight-bold);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  cursor: pointer;
  border: none;
  font-size: 1rem;
  text-align: center;
}

.btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.btn-primary {
  background: var(--color-accent-alt);
  color: white;
}

.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}

/* ===== HEADER ===== */
#header {
  position: sticky;
  top: 0;
  background: var(--color-primary);
  border-bottom: 1px solid var(--color-gray);
  z-index: 100;
  padding: var(--spacing-sm) 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 50px;
  width: auto;
}

.nav-desktop {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.nav-desktop a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  transition: color var(--transition-fast);
}

.nav-desktop a:hover {
  color: var(--color-accent);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background: var(--color-secondary);
  transition: transform var(--transition-normal);
}

/* ===== HERO ===== */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: var(--spacing-xl) 0;
  text-align: center;
  position: relative;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/images/EquipoTrabajando.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: grayscale(100%);
  opacity: 0.15;
  z-index: -1;
}


.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-logo {
  margin-bottom: var(--spacing-md);
}

.hero-logo img {
  max-width: 200px;
  margin: 0 auto;
  filter: grayscale(100%);
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
  filter: grayscale(100%);
  color: var(--color-text-light);
  filter: grayscale(100%);
}

.hero-subtitle {
  font-size: 1.25rem;
  color: black;
  margin-bottom: var(--spacing-lg);
}

.hero-ctas {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.hero-ctas .btn-primary {
  position: relative;
  filter: none;
  background: var(--color-accent);
  color: white;
  isolation: isolate;
}

.hero-ctas .btn-secondary {
  position: relative;
  filter: none;
  background: var(--color-accent);
  color: white;
  isolation: isolate;
  filter: grayscale(100%);
}

/* ===== SOBRE ===== */
.sobre {
  padding: var(--spacing-xl) 0;
  background: var(--color-background-alt);
}

.sobre-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.sobre-icon {
  margin: 0 auto var(--spacing-sm);
  display: block;
  color: var(--color-accent);
}

.sobre-content {
  margin-top: var(--spacing-md);
}

.sobre-principal {
  margin-bottom: var(--spacing-lg);
}

.sobre-intro {
  font-size: 1.2rem;
  line-height: 1.8;
  text-align: center;
  max-width: 900px;
  margin: 0 auto var(--spacing-lg);
  color: var(--color-text);
}

.sobre-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.sobre-card {
  background: white;
  padding: var(--spacing-md);
  border-radius: 8px;
  border-left: 4px solid var(--color-accent-alt);
}

.card-icon {
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
}

.sobre-card h3 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-xs);
  color: var(--color-secondary);
}

.sobre-card p {
  line-height: 1.6;
  color: var(--color-text-light);
}

.sobre-servicios {
  background: white;
  padding: var(--spacing-lg);
  border-radius: 8px;
  margin-top: var(--spacing-lg);
}

.sobre-servicios h3 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
  text-align: center;
  color: var(--color-secondary);
}

/* Especialidades Grid */
.especialidades-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.especialidad-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-md);
  background: var(--color-background-alt);
  border-radius: 12px;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  cursor: pointer;
}

.especialidad-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(178, 58, 238, 0.15);
}

.especialidad-icon {
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
  flex-shrink: 0;
}

.especialidad-card h4 {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
}


/* ===== BENEFICIOS ===== */
.beneficios {
  padding: var(--spacing-xl) 0;
  position: relative;
  isolation: isolate;
}

.beneficios::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/images/TormentaIdeas.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: grayscale(100%);
  opacity: 0.12;
  z-index: -1;
}

.section-intro {
  text-align: center;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
}

.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.beneficio-card {
  background: white;
  padding: var(--spacing-md);
  border-radius: 8px;
  border: 2px solid var(--color-gray);
  text-align: center;
  transition: transform var(--transition-normal);
}

.beneficio-card:hover {
  transform: translateY(-4px);
}

.beneficio-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
}

.beneficios .container>h2,
.beneficios .section-intro {
  text-align: center;
}

.beneficio-card h3 {
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
}

/* ===== SERVICIOS ===== */
.servicios {
  padding: var(--spacing-xl) 0;
  background: var(--color-background-alt);
}

.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.servicio-item {
  background: white;
  padding: var(--spacing-md);
  border-radius: 12px;
  border-top: 4px solid var(--color-accent-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.servicio-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(178, 58, 238, 0.2);
}

.servicio-icon {
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
  flex-shrink: 0;
}

.servicio-item h3 {
  color: var(--color-secondary);
  margin-bottom: var(--spacing-xs);
  font-size: 1.15rem;
  font-weight: var(--font-weight-bold);
}

.servicio-item p {
  color: var(--color-text-light);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ===== DIFERENCIACIÓN ===== */
.diferenciacion {
  padding: var(--spacing-xl) 0;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-alt) 100%);
  color: white;
}

.diferenciacion h2 {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
}

.diferenciacion-texto p {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: var(--spacing-sm);
}

.diferenciacion-cierre {
  font-size: 1.4rem !important;
  margin-top: var(--spacing-md);
}

.diferenciacion-content {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ===== CONTACTO ===== */
.contacto {
  padding: var(--spacing-xl) 0;
  background: var(--color-background-alt);
}

.contacto h2 {
  text-align: center;
  margin-bottom: var(--spacing-sm);
}

.section-subtitle {
  text-align: center;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
}

.contacto-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.contacto-form-container,
.contacto-directo {
  background: var(--color-primary);
  padding: var(--spacing-lg);
  border-radius: 12px;
  border: 2px solid var(--color-gray);
}

.contacto-form-container h3,
.contacto-directo h3 {
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

/* === FORMULARIO === */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-sm);
  border: 2px solid var(--color-gray);
  border-radius: 8px;
  font-family: var(--font-primary);
  font-size: 1rem;
  background: var(--color-primary);
  color: var(--color-text);
  transition: border-color var(--transition-normal);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Estados de error */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: #e74c3c;
}

.error-message {
  color: #e74c3c;
  font-size: 0.875rem;
  margin-top: var(--spacing-xs);
  display: block;
}

/* === CONTACTO DIRECTO === */
.contacto-directo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.contacto-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-primary);
  border: 2px solid var(--color-gray);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.contacto-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
}

.contacto-card .icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.contacto-info {
  flex: 1;
}

.contacto-info h4 {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.contacto-info p {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.contacto-value {
  color: var(--color-accent-alt);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
}

.contacto-value-instagram {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--color-secondary);
  color: white;
  padding: var(--spacing-lg) 0 var(--spacing-md);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.footer-logo {
  max-width: 150px;
  margin-bottom: var(--spacing-sm);
  filter: invert(1) grayscale(1);
}

.footer-info p {
  margin-bottom: var(--spacing-xs);
  opacity: 0.8;
}

.footer-links h4,
.footer-social h4 {
  margin-bottom: var(--spacing-sm);
  color: var(--color-accent-alt);
}

.social-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.social-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: white;
  text-decoration: none;
  opacity: 0.8;
}

.social-link svg {
  fill: currentColor;
  flex-shrink: 0;
}

.social-link:hover {
  opacity: 1;
}

.footer-links a {
  display: block;
  color: white;
  text-decoration: none;
  margin-bottom: var(--spacing-xs);
  opacity: 0.8;
}

.footer-links a:hover {
  opacity: 1;
}

.footer-bottom {
  text-align: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
  margin-bottom: var(--spacing-xs);
  opacity: 0.6;
  font-size: 0.9rem;
}

.footer-bottom a {
  color: var(--color-accent);
  text-decoration: none;
}

/* ===== WHATSAPP FLOAT ===== */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: var(--color-accent-alt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 999;
  transition: transform var(--transition-normal);
}

.whatsapp-float:hover {
  transform: scale(1.1);
}


/* ============================================
   RESPONSIVE DESIGN
   Breakpoints:
   - Tablet: max-width 1024px
   - Mobile: max-width 768px
   ============================================ */

/* ===== TABLET (hasta 1024px) ===== */
@media (max-width: 1024px) {

  /* HEADER - Menú Hamburguesa */
  .nav-desktop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-primary);
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-lg);
    z-index: 999;
  }

  .nav-desktop.active {
    display: flex;
  }

  .nav-desktop a {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-gray);
    text-align: center;
    font-size: 1.2rem;
  }

  .menu-toggle {
    display: flex;
    z-index: 1000;
    position: relative;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }

  /* HERO */
  .hero {
    min-height: 70vh;
  }

  .hero h1 {
    font-size: 2.25rem;
  }

  .hero-subtitle {
    font-size: 1.1rem;
  }

  /* SOBRE - Grid 2 columnas en tablet */
  .sobre-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .especialidades-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* BENEFICIOS - 2 columnas en tablet */
  .beneficios-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* SERVICIOS - 2 columnas en tablet */
  .servicios-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CONTACTO - 2 columnas en tablet (IGUAL QUE SOBRE-GRID) */
  .contacto-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

/* ===== MOBILE (hasta 768px) ===== */
@media (max-width: 768px) {

  /* TYPOGRAPHY */
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: 1.1rem;
  }

  /* CONTAINER */
  .container {
    padding: 0 var(--spacing-sm);
  }

  /* SPACING */
  :root {
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
  }

  /* HEADER */
  .logo img {
    height: 40px;
  }

  /* HERO */
  .hero {
    min-height: 60vh;
    padding: var(--spacing-lg) 0;
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-ctas {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .hero-ctas .btn {
    width: 100%;
  }

  /* DIFERENCIACION - mobile */
  .diferenciacion h2 {
    font-size: 1.75rem;
  }

  .diferenciacion-texto p {
    font-size: 1rem;
  }

  .diferenciacion-cierre {
    font-size: 1.2rem !important;
  }

  /* SOBRE - 1 columna en mobile (IGUAL QUE CONTACTO) */
  .sobre-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .especialidades-grid {
    grid-template-columns: 1fr;
  }

  .sobre-intro {
    font-size: 1rem;
  }

  /* BENEFICIOS - 1 columna en mobile */
  .beneficios-grid {
    grid-template-columns: 1fr;
  }

  .beneficio-card {
    padding: var(--spacing-md);
  }

  /* SERVICIOS - 1 columna en mobile */
  .servicios-grid {
    grid-template-columns: 1fr;
  }

  /* CONTACTO - 1 columna en mobile (IGUAL QUE SOBRE-GRID) */
  .contacto-wrapper {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .contacto-form-container,
  .contacto-directo {
    padding: var(--spacing-sm);
  }
  
  .form-group {
    margin-bottom: var(--spacing-sm);
  }

  /* FOOTER */
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
  }

  .social-links {
    align-items: center;
  }

  /* WHATSAPP FLOAT */
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
    font-size: 1.5rem;
  }
}