/* =========================================================
   EDIFICADAS FRONTERA, S.A. de C.V.
   Sistema de diseño derivado del isotipo (picos superpuestos)
   ========================================================= */

:root{
  /* --- Paleta extraída del logotipo --- */
  --rojo:        #D32024;   /* pico frontal, color de marca */
  --rojo-oscuro: #A81A1D;
  --vino:        #7A2E33;   /* pico intermedio */
  --vino-oscuro: #5C2226;
  --terracota:   #F39DA0;   /* pico posterior, acento suave */
  --terracota-tinta: #FBE6E7;

  --carbon:      #211D1B;   /* texto / wordmark del logo */
  --carbon-80:   #3A3532;
  --acero:       #6B6560;   /* texto secundario */
  --acero-claro: #A39C95;

  --piedra:      #ECE6DC;   /* fondo cálido, tipo concreto claro */
  --piedra-100:  #F5F1E9;
  --piedra-50:   #FAF8F3;
  --blanco:      #FFFFFF;

  /* --- Tipografía --- */
  --f-display: 'Fraunces', 'Georgia', serif;
  --f-body: 'Work Sans', -apple-system, Helvetica, Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* --- Otros --- */
  --radio: 3px;
  --sombra: 0 20px 50px -20px rgba(33, 29, 27, 0.35);
  --sombra-sm: 0 8px 24px -12px rgba(33, 29, 27, 0.25);
  --transicion: 0.45s cubic-bezier(.22,.61,.36,1);
  --header-h: 88px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--f-body);
  color: var(--carbon-80);
  background: var(--piedra-50);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--f-display); color: var(--carbon); margin: 0; font-weight: 600; }
p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--rojo); outline-offset: 3px; }

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

section{ position: relative; }

/* ---------- Utilidades tipográficas ---------- */
.eyebrow{
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rojo);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-weight: 500;
}
.eyebrow::before{
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid var(--rojo);
}
.eyebrow.light{ color: var(--terracota); }
.eyebrow.light::before{ border-bottom-color: var(--terracota); }

h2.titulo-seccion{
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 780px;
}
.lead{
  font-size: 1.08rem;
  color: var(--acero);
  max-width: 620px;
  margin-top: 18px;
}

/* pico decorativo reutilizable (motivo del isotipo) */
.pico{
  display: inline-block;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid currentColor;
}

/* ---------- Botones ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radio);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  transition: transform var(--transicion), background var(--transicion), color var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
  white-space: nowrap;
}
.btn-primario{
  background: var(--rojo);
  color: var(--blanco);
  box-shadow: 0 10px 24px -10px rgba(211,32,36,0.55);
}
.btn-primario:hover{ background: var(--rojo-oscuro); transform: translateY(-2px); }
.btn-secundario{
  background: transparent;
  color: var(--carbon);
  border-color: rgba(33,29,27,0.25);
}
.btn-secundario:hover{ border-color: var(--carbon); background: rgba(33,29,27,0.05); transform: translateY(-2px); }
.btn-claro{
  background: var(--blanco);
  color: var(--carbon);
}
.btn-claro:hover{ background: var(--terracota-tinta); transform: translateY(-2px); }
.btn-outline-claro{
  background: transparent;
  color: var(--blanco);
  border-color: rgba(255,255,255,0.5);
}
.btn-outline-claro:hover{ border-color: var(--blanco); background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* ================= HEADER ================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--transicion), height var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  border-bottom: 1px solid transparent;
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-header.scrolled{
  height: 72px;
  background: rgba(250,248,243,0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra-sm);
  border-bottom-color: rgba(33,29,27,0.06);
}
.brand{
  display: flex;
  align-items: center;
}
.brand img{ height: 46px; width: auto; transition: height var(--transicion); }
.site-header.scrolled .brand img{ height: 38px; }

.nav-desktop{
  display: flex;
  align-items: center;
  gap: 38px;
}
.nav-desktop a{
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--carbon);
  position: relative;
  padding: 6px 0;
}
body.tema-oscuro-nav .site-header:not(.scrolled) .nav-desktop a,
body.tema-oscuro-nav .site-header:not(.scrolled) .brand-text,
body.tema-oscuro-nav .site-header:not(.scrolled) .nav-tel{ color: var(--blanco); }

.nav-desktop a::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--rojo);
  transition: width var(--transicion);
}
.nav-desktop a:hover::after,
.nav-desktop a.activo::after{ width: 100%; }
.nav-desktop a.activo{ color: var(--rojo); }

.nav-derecha{ display: flex; align-items: center; gap: 22px; }
.nav-tel{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--carbon);
}
.nav-tel svg{ flex-shrink: 0; }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  padding: 0;
}
.nav-toggle span{
  display: block;
  height: 2px;
  background: var(--carbon);
  border-radius: 2px;
  transition: all 0.3s ease;
}
body.tema-oscuro-nav .site-header:not(.scrolled) .nav-toggle span{ background: var(--blanco); }

.nav-movil{
  position: fixed;
  inset: 0;
  background: var(--carbon);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  padding: 100px 32px 40px;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
}
.nav-movil.abierto{ transform: translateX(0); }
.nav-movil a{
  font-family: var(--f-display);
  font-size: 1.9rem;
  color: var(--piedra-50);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-movil-cerrar{
  position: absolute;
  top: 30px; right: 28px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: none;
  color: var(--blanco);
  font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
}
.nav-movil-info{
  margin-top: auto;
  padding-top: 24px;
  color: var(--acero-claro);
  font-family: var(--f-mono);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-movil-info a{ color: var(--terracota); border: none; padding: 2px 0; font-family: var(--f-mono); font-size: 0.85rem; }

/* ================= HERO ================= */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--carbon);
  padding-top: var(--header-h);
}
.hero-textura{
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
}
.hero-degradado{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33,29,27,0.2) 0%, rgba(33,29,27,0.55) 65%, var(--carbon) 100%);
}
.hero-picos{
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 78%;
  pointer-events: none;
}
.pico-capa{
  position: absolute;
  bottom: -10%;
  width: 46%;
  height: 100%;
  clip-path: polygon(0% 100%, 0% 38%, 50% 0%, 100% 38%, 100% 100%);
  will-change: transform;
}
.pico-capa.c1{ background: var(--terracota); opacity: 0.35; left: -6%; height: 72%; bottom: -5%; }
.pico-capa.c2{ background: var(--vino); opacity: 0.55; left: 16%; height: 88%; bottom: -8%; }
.pico-capa.c3{ background: var(--rojo); opacity: 0.85; left: 40%; height: 104%; bottom: -10%; }
.pico-capa.c4{ background: var(--vino-oscuro); opacity: 0.4; left: 62%; height: 66%; bottom: -4%; }

.hero-contenido{
  position: relative;
  z-index: 3;
  padding: 90px 0 140px;
}
.hero-marcas{
  display: flex;
  gap: 4px;
  margin-bottom: 26px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
}
.hero .eyebrow{ color: var(--terracota); }
.hero .eyebrow::before{ border-bottom-color: var(--terracota); }

.hero h1{
  color: var(--piedra-50);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  max-width: 900px;
}
.hero h1 em{
  font-style: italic;
  color: var(--terracota);
  font-weight: 500;
}
.hero-sub{
  margin-top: 26px;
  max-width: 560px;
  color: rgba(245,241,233,0.78);
  font-size: 1.08rem;
}
.hero-acciones{
  display: flex;
  gap: 16px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.hero-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(245,241,233,0.16);
  max-width: 720px;
}
.hero-tag{
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: rgba(245,241,233,0.85);
  letter-spacing: 0.02em;
}
.hero-tag .pico{ color: var(--terracota); transform: scale(0.8); }

.scroll-cue{
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(245,241,233,0.55);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.scroll-cue .linea{
  width: 1px;
  height: 46px;
  background: rgba(245,241,233,0.4);
  position: relative;
  overflow: hidden;
}
.scroll-cue .linea::after{
  content:"";
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--terracota);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue{
  0%{ top: -100%; }
  50%{ top: 0%; }
  100%{ top: 100%; }
}
@media (max-width: 767px){ .scroll-cue{ display: none; } }

/* ================= REVEAL ================= */
/* Por defecto SIEMPRE visible: el fade-in es una mejora progresiva.
   Sólo se oculta si el JS confirma que puede animarlo (clase .js-ready). */
.reveal{ opacity: 1; transform: none; }
.js-ready .reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1);
}
.js-ready .reveal.visible{ opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *{ transition-delay: calc(var(--i, 0) * 0.09s); }

/* ================= SOBRE NOSOTROS ================= */
.seccion{ padding: 120px 0; }
.seccion-piedra{ background: var(--piedra); }
.seccion-carbon{ background: var(--carbon); color: var(--piedra-100); }
.seccion-carbon .titulo-seccion{ color: var(--blanco); }

.nosotros-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}
.nosotros-texto p{ color: var(--acero); margin-top: 20px; font-size: 1rem; }
.nosotros-texto p:first-of-type{ margin-top: 24px; }

.nosotros-grafico{
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nosotros-marco{
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(33,29,27,0.14);
  border-radius: var(--radio);
}
.nosotros-marco::before, .nosotros-marco::after{
  content:"";
  position: absolute;
  width: 26px; height: 26px;
  border-color: var(--rojo);
  border-style: solid;
}
.nosotros-marco::before{ top: -1.5px; left: -1.5px; border-width: 2px 0 0 2px; }
.nosotros-marco::after{ bottom: -1.5px; right: -1.5px; border-width: 0 2px 2px 0; }

.nosotros-svg{ width: 78%; height: 78%; }

/* ================= MISION / VISION ================= */
.mv-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 60px;
}
.mv-card{
  background: var(--blanco);
  padding: 48px 42px;
  border-radius: var(--radio);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}
.mv-card::before{
  content:"";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-left: 46px solid var(--rojo);
  border-bottom: 46px solid transparent;
  opacity: 0.9;
}
.mv-card.vino::before{ border-left-color: var(--vino); }
.mv-icono{
  width: 54px; height: 54px;
  margin-bottom: 26px;
  color: var(--rojo);
}
.mv-card.vino .mv-icono{ color: var(--vino); }
.mv-card h3{ font-size: 1.55rem; margin-bottom: 16px; }
.mv-card p{ color: var(--acero); font-size: 0.98rem; }

/* ================= VALORES ================= */
.valores-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 60px;
  background: rgba(33,29,27,0.1);
  border: 1px solid rgba(33,29,27,0.1);
}
.valor-card{
  background: var(--piedra);
  padding: 40px 26px;
  transition: background var(--transicion);
}
.valor-card:hover{ background: var(--piedra-100); }
.valor-num{
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--rojo);
  margin-bottom: 22px;
  display: block;
}
.valor-icono{ width: 34px; height: 34px; color: var(--carbon); margin-bottom: 20px; }
.valor-card h4{ font-size: 1.08rem; margin-bottom: 10px; }
.valor-card p{ color: var(--acero); font-size: 0.88rem; line-height: 1.6; }

@media (max-width: 1000px){
  .valores-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .valores-grid{ grid-template-columns: 1fr; }
}

/* ================= SERVICIOS (preview + página) ================= */
.servicios-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.servicio-card{
  background: var(--blanco);
  border: 1px solid rgba(33,29,27,0.08);
  padding: 36px 28px;
  border-radius: var(--radio);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.servicio-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--sombra);
  border-color: transparent;
}
.servicio-marca{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.servicio-marca .pico{ color: var(--rojo); }
.servicio-card .servicio-icono{ width: 40px; height: 40px; color: var(--rojo); margin-bottom: 22px; }
.servicio-card h3{ font-size: 1.18rem; margin-bottom: 12px; line-height: 1.3; }
.servicio-card p{ color: var(--acero); font-size: 0.92rem; margin-bottom: 20px; }
.servicio-lista{ margin-top: 4px; }
.servicio-lista li{
  font-size: 0.88rem;
  color: var(--acero);
  padding: 7px 0 7px 20px;
  position: relative;
  border-top: 1px solid rgba(33,29,27,0.07);
}
.servicio-lista li:first-child{ border-top: none; }
.servicio-lista li::before{
  content: "";
  position: absolute;
  left: 0; top: 15px;
  width: 6px; height: 6px;
  background: var(--rojo);
  transform: rotate(45deg);
}
.servicio-enlace{
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--carbon);
  border-bottom: 1px solid var(--carbon);
  padding-bottom: 2px;
}
.servicio-card:hover .servicio-enlace{ color: var(--rojo); border-color: var(--rojo); }

@media (max-width: 1000px){ .servicios-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .servicios-grid{ grid-template-columns: 1fr; } }

/* Página de servicios detallada */
.pagina-hero{
  position: relative;
  background: var(--carbon);
  padding: calc(var(--header-h) + 90px) 0 100px;
  overflow: hidden;
  color: var(--piedra-50);
}
.pagina-hero .hero-textura{ opacity: 0.4; }
.pagina-hero-contenido{ position: relative; z-index: 2; max-width: 760px; }
.pagina-hero h1{ color: var(--blanco); font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.1; }
.pagina-hero .lead{ color: rgba(245,241,233,0.78); }
.pagina-hero-picos{ position: absolute; right: -10%; bottom: -30%; width: 55%; height: 130%; opacity: 0.5; }

.servicios-detalle{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  background: rgba(33,29,27,0.1);
}
.servicio-bloque{
  background: var(--piedra-50);
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 50px;
  padding: 60px 0;
}
.servicio-bloque:nth-child(even){ background: var(--piedra); }
.servicio-bloque .container{ display: contents; }
.sb-marca{ display: flex; flex-direction: column; gap: 22px; }
.sb-marca .sb-icono{ width: 52px; height: 52px; color: var(--rojo); }
.sb-marca .eyebrow{ margin-bottom: 0; }
.sb-marca h2{ font-size: 1.7rem; line-height: 1.2; }
.sb-lista{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; align-content: start; }
.sb-lista .sb-item{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid rgba(33,29,27,0.1);
}
.sb-lista .sb-item .pico{ color: var(--rojo); margin-top: 6px; flex-shrink: 0; }
.sb-item h4{ font-size: 1rem; margin-bottom: 6px; }
.sb-item p{ font-size: 0.88rem; color: var(--acero); }

@media (max-width: 900px){
  .servicio-bloque{ grid-template-columns: 1fr; gap: 26px; padding: 50px 0; }
  .sb-lista{ grid-template-columns: 1fr; }
}

/* ================= CTA BANNER ================= */
.cta-banner{
  background: var(--rojo);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  color: var(--blanco);
}
.cta-banner::after{
  content:"";
  position: absolute;
  right: -8%; top: -60%;
  width: 480px; height: 480px;
  border: 1px solid rgba(255,255,255,0.18);
  transform: rotate(45deg);
}
.cta-inner{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-inner h2{ color: var(--blanco); font-size: clamp(1.7rem, 3vw, 2.3rem); max-width: 560px; }
.cta-acciones{ display: flex; gap: 16px; flex-wrap: wrap; }

/* ================= FOOTER ================= */
.site-footer{
  background: var(--carbon);
  color: var(--acero-claro);
  padding: 90px 0 0;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 50px;
  padding-bottom: 70px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand img{ height: 40px; margin-bottom: 22px; }
.footer-brand p{ font-size: 0.9rem; line-height: 1.75; max-width: 300px; color: var(--acero-claro); }
.footer-col h5{
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 22px;
  font-weight: 500;
}
.footer-col a, .footer-col li{
  display: block;
  font-size: 0.92rem;
  color: var(--piedra-100);
  margin-bottom: 13px;
  transition: color 0.3s;
}
.footer-col a:hover{ color: var(--terracota); }
.footer-col address{ font-style: normal; color: var(--piedra-100); font-size: 0.92rem; line-height: 1.7; }
.footer-baja{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 0;
  font-size: 0.8rem;
  color: var(--acero);
  flex-wrap: wrap;
  gap: 10px;
}
.footer-baja .picos-mini{ display:flex; gap: 3px; }
.footer-baja .picos-mini span{
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--rojo);
}
.footer-baja .picos-mini span:nth-child(1){ border-bottom-color: var(--terracota); opacity: .6; }
.footer-baja .picos-mini span:nth-child(2){ border-bottom-color: var(--vino); opacity: .8;}

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ================= BACK TO TOP ================= */
.volver-arriba{
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--carbon);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.4s ease;
  box-shadow: var(--sombra-sm);
}
.volver-arriba.visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.volver-arriba:hover{ background: var(--rojo); }

/* ================= CONTACTO ================= */
.contacto-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  box-shadow: var(--sombra);
}
.contacto-info{
  background: var(--carbon);
  color: var(--piedra-100);
  padding: 64px 52px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.contacto-info h3{ color: var(--blanco); font-size: 1.5rem; margin-bottom: 6px;}
.contacto-info > p.lead{ color: var(--acero-claro); margin-top: 0; font-size: 0.96rem; }
.ci-item{ display: flex; gap: 16px; align-items: flex-start; }
.ci-item svg{ width: 22px; height: 22px; color: var(--terracota); flex-shrink: 0; margin-top: 3px; }
.ci-item h5{ font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracota); margin-bottom: 8px; font-weight: 500;}
.ci-item p, .ci-item a{ font-size: 0.96rem; color: var(--piedra-100); line-height: 1.6; }
.ci-item a:hover{ color: var(--terracota); }
.ci-social{ display: flex; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }

.contacto-form-wrap{ background: var(--blanco); padding: 64px 56px; }
.form-fila{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.campo{ margin-bottom: 22px; position: relative; }
.campo label{
  display: block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acero);
  margin-bottom: 9px;
}
.campo input, .campo textarea{
  width: 100%;
  border: none;
  border-bottom: 1.5px solid rgba(33,29,27,0.2);
  background: transparent;
  padding: 10px 2px;
  font-size: 1rem;
  color: var(--carbon);
  transition: border-color 0.3s;
  resize: vertical;
}
.campo input:focus, .campo textarea:focus{ border-color: var(--rojo); outline: none; }
.campo textarea{ min-height: 110px; }
.form-nota{ font-size: 0.82rem; color: var(--acero-claro); margin-top: 18px; }

.mapa-wrap{
  height: 460px;
  filter: grayscale(0.35) contrast(1.05);
  position: relative;
}
.mapa-wrap iframe{ width: 100%; height: 100%; border: 0; }

@media (max-width: 960px){
  .contacto-grid{ grid-template-columns: 1fr; }
  .contacto-info, .contacto-form-wrap{ padding: 48px 30px; }
  .form-fila{ grid-template-columns: 1fr; }
}

/* ================= RESPONSIVE GENERAL ================= */
@media (max-width: 900px){
  .nosotros-grid{ grid-template-columns: 1fr; gap: 40px; }
  .nosotros-grafico{ order: -1; max-width: 340px; margin: 0 auto; }
  .mv-grid{ grid-template-columns: 1fr; }
  .footer-baja{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px){
  .nav-desktop, .nav-derecha .nav-tel{ display: none; }
  .nav-toggle{ display: flex; }
  .seccion{ padding: 80px 0; }
  .hero-contenido{ padding: 60px 0 100px; }
  .cta-inner{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px){
  .container{ padding: 0 20px; }
  .contacto-info, .contacto-form-wrap{ padding: 40px 22px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .pico-capa{ transform: none !important; }
}