/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://elementor.com/hello-theme/
 Description:  Tema hijo de Hello Elementor para Arquitecto Madrid
 Author:       Tu Nombre
 Author URI:   https://tudominio.com
 Template:     hello-elementor
 Version:      1.1.0
 Text Domain:  hello-elementor-child
*/

/*
 PALETA ACCESIBLE — Ratios de contraste WCAG AA
 ─────────────────────────────────────────────
 #111111 sobre #FFFFFF  → ratio 19:1  ✅ AAA
 #111111 sobre #F7F7F7  → ratio 17:1  ✅ AAA
 #444444 sobre #FFFFFF  → ratio  9:1  ✅ AA
 #666666 sobre #FFFFFF  → ratio  5:7  ✅ AA
 #FFFFFF sobre #111111  → ratio 19:1  ✅ AAA
 #F0F0F0 sobre #111111  → ratio 16:1  ✅ AAA
*/

/* ───────────────────────────────────────────
   VARIABLES GLOBALES
─────────────────────────────────────────── */
:root {
  --negro:        #111111;   /* texto principal */
  --negro-suave:  #1f1f1f;   /* fondos oscuros de tarjetas */
  --gris-oscuro:  #444444;   /* texto secundario */
  --gris-medio:   #666666;   /* texto terciario / labels */
  --gris-claro:   #d4d4d4;   /* bordes */
  --gris-fondo:   #f7f7f7;   /* fondo alternativo secciones */
  --blanco:       #ffffff;   /* fondo principal */
  --fuente:       'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ───────────────────────────────────────────
   RESET Y BASE
─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: var(--fuente);
  background: var(--blanco);
  color: var(--negro);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--negro); text-decoration: none; transition: opacity 0.3s; }
a:hover { opacity: 0.65; }
img { max-width: 100%; height: auto; display: block; }

/* ───────────────────────────────────────────
   TIPOGRAFÍA
─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente);
  font-weight: 200;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--negro);
}

h1 { font-size: clamp(44px, 5.5vw, 88px); }
h2 { font-size: clamp(32px, 4vw, 60px); }
h3 { font-size: 22px; font-weight: 300; }
h4 { font-size: 14px; font-weight: 600; letter-spacing: 1px; }

p { font-size: 16px; line-height: 1.9; color: var(--gris-oscuro); }

/* ───────────────────────────────────────────
   HAMBURGER Y MENÚ MÓVIL
─────────────────────────────────────────── */
.ham-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.ham-btn span {
  width: 22px;
  height: 1.5px;
  background: var(--negro);
  display: block;
  transition: all 0.3s;
}

.ham-btn.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.ham-btn.open span:nth-child(2) { opacity: 0; }
.ham-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 74px 0 0 0;
  background: var(--blanco);
  z-index: 198;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mobile-nav.open { display: flex; }

.hamburger-wrapper { display: none; }

@media (max-width: 900px) {
  .hamburger-wrapper { display: flex !important; }
  .elementor-nav-menu--main { display: none !important; }
}

/* ───────────────────────────────────────────
   HEADER / NAV
─────────────────────────────────────────── */
.site-header, header.e-header {
  position: fixed !important;
  top: 0; left: 0; right: 0; z-index: 999;
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gris-claro);
  padding: 20px 60px !important;
}

.e-header .elementor-nav-menu a,
.main-navigation a {
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--negro) !important;
  padding-bottom: 4px;
  position: relative;
}

.e-header .elementor-nav-menu a::after,
.main-navigation a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: var(--negro);
  transition: width 0.3s;
}

.e-header .elementor-nav-menu a:hover::after,
.main-navigation a:hover::after { width: 100%; }

/* ───────────────────────────────────────────
   BOTONES
─────────────────────────────────────────── */
.elementor-button,
.e-con .elementor-button {
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  padding: 16px 40px !important;
  transition: all 0.3s !important;
}

.elementor-button.btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--negro) !important;
  color: var(--negro) !important;
}
.elementor-button.btn-outline:hover {
  background: var(--negro) !important;
  color: var(--blanco) !important;
}

.elementor-button.btn-filled {
  background: var(--negro) !important;
  border: 1.5px solid var(--negro) !important;
  color: var(--blanco) !important;
}
.elementor-button.btn-filled:hover {
  background: transparent !important;
  color: var(--negro) !important;
}

/* Botón formulario */
.elementor-button-wrapper .elementor-button[type="submit"] {
  background: var(--negro) !important;
  color: var(--blanco) !important;
  border-radius: 0 !important;
  width: 100% !important;
  letter-spacing: 3px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 20px !important;
  border: none !important;
  transition: background 0.3s !important;
}
.elementor-button-wrapper .elementor-button[type="submit"]:hover {
  background: var(--negro-suave) !important;
}

/* ───────────────────────────────────────────
   ETIQUETA DE SECCIÓN
─────────────────────────────────────────── */
.section-label {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gris-medio);   /* ratio 5.7:1 ✅ */
  font-weight: 500;
  display: block;
  margin-bottom: 20px;
}

/* ───────────────────────────────────────────
   HERO
─────────────────────────────────────────── */
.seccion-hero {
  min-height: 100vh;
  padding-top: 120px;
  background: var(--blanco);
}

.seccion-hero h1 strong { font-weight: 700; }

/* ───────────────────────────────────────────
   ESTADÍSTICAS
─────────────────────────────────────────── */
.seccion-stats {
  border-top: 1px solid var(--gris-claro);
  border-left: 1px solid var(--gris-claro);
  background: var(--blanco);
}

.stat-item {
  border-right: 1px solid var(--gris-claro);
  border-bottom: 1px solid var(--gris-claro);
  padding: 40px;
}

.stat-item .stat-numero {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--negro);        /* 19:1 ✅ */
}

.stat-item .stat-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gris-medio);   /* 5.7:1 ✅ */
  font-weight: 500;
  margin-top: 8px;
}

/* ───────────────────────────────────────────
   SECCIÓN QUIÉNES SOMOS — fondo gris muy claro
─────────────────────────────────────────── */
.seccion-quienes {
  background: var(--gris-fondo) !important;
}

.seccion-quienes h2,
.seccion-quienes h3,
.seccion-quienes h4 { color: var(--negro) !important; }

.seccion-quienes p { color: var(--gris-oscuro) !important; }

.seccion-quienes .section-label { color: var(--gris-medio) !important; }

/* Imagen quiénes somos */
.quienes-img { position: relative; height: 600px; }
.quienes-img img { width: 100%; height: 100%; object-fit: cover; }
.quienes-img-tag {
  position: absolute; bottom: -24px; right: -24px;
  background: var(--negro); color: var(--blanco);
  padding: 28px 32px; font-size: 13px; line-height: 1.7;
}
.quienes-img-tag strong {
  font-size: 22px; font-weight: 700; display: block; letter-spacing: -1px;
}



/* ───────────────────────────────────────────
   VALORES
─────────────────────────────────────────── */
.valor-item {
  border-top: 1px solid var(--gris-claro);
  padding-top: 20px;
}

.valor-item h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--negro) !important;  /* 19:1 ✅ */
  margin-bottom: 8px;
}

.valor-item p {
  font-size: 13px;
  color: var(--gris-oscuro) !important;  /* 9:1 ✅ */
  line-height: 1.7;
}

/* ───────────────────────────────────────────
   TARJETAS DE SERVICIOS
─────────────────────────────────────────── */
.tarjeta-servicio {
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  padding: 48px 36px;
  position: relative;
  overflow: hidden;
  transition: color 0.3s;
}

.tarjeta-servicio::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--negro);
  transform: translateY(100%);
  transition: transform 0.4s ease;
  z-index: 0;
}

.tarjeta-servicio:hover::before { transform: translateY(0); }
.tarjeta-servicio > * { position: relative; z-index: 1; }

.tarjeta-servicio .servicio-numero {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gris-medio);
  font-weight: 500;
  margin-bottom: 32px;
  display: block;
  transition: color 0.3s;
}

.tarjeta-servicio h3 { color: var(--negro); transition: color 0.3s; }
.tarjeta-servicio p  { color: var(--gris-oscuro); transition: color 0.3s; }

/* En hover: texto blanco sobre negro — ratio 19:1 ✅ */
.tarjeta-servicio:hover .servicio-numero { color: #aaaaaa !important; }
.tarjeta-servicio:hover h3 { color: var(--blanco) !important; }
.tarjeta-servicio:hover p  { color: #e0e0e0 !important; }

.servicio-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }

.servicio-tag {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--gris-claro);
  padding: 6px 12px;
  color: var(--gris-medio);
  font-weight: 500;
  transition: all 0.3s;
}

.tarjeta-servicio:hover .servicio-tag {
  border-color: rgba(255,255,255,0.25);
  color: #dddddd !important;  /* ratio ~10:1 sobre negro ✅ */
}

/* ───────────────────────────────────────────
   PROCESO
─────────────────────────────────────────── */
.seccion-proceso {
  border-top: 1px solid var(--gris-claro);
  padding-top: 60px;
  margin-top: 80px;
  background: var(--blanco);
}

.paso-proceso {
  padding: 24px;
  border-left: 1px solid var(--gris-claro);
}
.paso-proceso:last-child { border-right: 1px solid var(--gris-claro); }

.paso-numero {
  font-size: 32px;
  font-weight: 700;
  color: var(--gris-claro);   /* decorativo, no es texto funcional */
  margin-bottom: 12px;
  line-height: 1;
}

.paso-proceso h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--negro);        /* 19:1 ✅ */
  margin-bottom: 8px;
}

.paso-proceso p {
  font-size: 12px;
  color: var(--gris-oscuro);  /* 9:1 ✅ */
  line-height: 1.6;
}

/* ───────────────────────────────────────────
   SECCIÓN CONTACTO — fondo gris muy claro
─────────────────────────────────────────── */
.seccion-contacto {
  background: var(--gris-fondo) !important;
}

.seccion-contacto h2 { color: var(--negro) !important; }
.seccion-contacto p  { color: var(--gris-oscuro) !important; }
.seccion-contacto .section-label { color: var(--gris-medio) !important; }

/* Info de contacto */
.contacto-item {
  padding: 20px 0;
  border-top: 1px solid var(--gris-claro);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contacto-item:last-child { border-bottom: 1px solid var(--gris-claro); }

.contacto-item .label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gris-medio);   /* 5.7:1 ✅ */
  font-weight: 600;
}

.contacto-item .valor {
  font-size: 14px;
  font-weight: 500;
  color: var(--negro);        /* 19:1 ✅ */
}

/* ───────────────────────────────────────────
   FORMULARIO
─────────────────────────────────────────── */
.elementor-form .elementor-field-group { margin-bottom: 2px !important; }

.elementor-form input,
.elementor-form textarea,
.elementor-form select {
  background: var(--blanco) !important;
  border: none !important;
  border-bottom: 1.5px solid var(--gris-claro) !important;
  border-radius: 0 !important;
  color: var(--negro) !important;       /* 19:1 ✅ */
  font-family: var(--fuente) !important;
  font-size: 15px !important;
  padding: 18px 16px !important;
  transition: border-color 0.3s !important;
}

.elementor-form input:focus,
.elementor-form textarea:focus,
.elementor-form select:focus {
  border-bottom-color: var(--negro) !important;
  outline: none !important;
  box-shadow: none !important;
}

.elementor-form input::placeholder,
.elementor-form textarea::placeholder {
  color: var(--gris-medio) !important;  /* 5.7:1 ✅ */
}

.elementor-form label {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--gris-oscuro) !important; /* 9:1 ✅ */
  font-weight: 600 !important;
}

/* ───────────────────────────────────────────
   FOOTER
─────────────────────────────────────────── */
.site-footer, footer.e-footer {
  background: var(--negro) !important;
  border-top: 1px solid #2a2a2a;
  padding: 40px 60px !important;
}

/* Texto blanco sobre negro → 19:1 ✅ */
.site-footer p, footer.e-footer p {
  font-size: 12px;
  letter-spacing: 1px;
  color: #aaaaaa !important;  /* ratio 4.5:1 ✅ justo AA */
}

.site-footer a, footer.e-footer a {
  color: #aaaaaa !important;
  font-size: 12px;
  letter-spacing: 1px;
  transition: color 0.3s;
}

.site-footer a:hover, footer.e-footer a:hover {
  color: var(--blanco) !important;
}

/* ───────────────────────────────────────────
   OVERLAY PROYECTOS
─────────────────────────────────────────── */
.e-con { position: relative; }

.proj-overlay-box {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 2;
}

.e-con:hover .proj-overlay-box {
  opacity: 1;
  transform: translateY(0);
}

.proj-overlay-box h3 {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 4px;
}

.proj-overlay-box span {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* ───────────────────────────────────────────
   RESPONSIVE
─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-header, header.e-header { padding: 16px 24px !important; }
}

@media (max-width: 768px) {
  .seccion-hero { padding-top: 100px; }
  .stat-item { padding: 24px; }
  .tarjeta-servicio { padding: 32px 24px; }
  .site-footer, footer.e-footer { padding: 32px 24px !important; text-align: center; }
}
</style>