/* =========================================================
   Beresa Ingeniería — hoja de estilos única
   ========================================================= */

:root{
  --teal:        #00b9aa;
  --teal-hero:   #0bb9a8;
  --teal-claro:  #91e1da;
  --amarillo:    #fbd43b;
  --amarillo-2:  #f5c400;
  --oscuro:      #3d3d3d;
  --negro:       #1d1d1b;
  --gris-texto:  #4a4a4a;
  --gris-fondo:  #f7f7f7;
  --gris-form:   #e1e2e2;
  --verde-osc:   #294338;
  --ancho:       1160px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Barlow', 'Segoe UI', Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--gris-texto);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Títulos y detalles comunes ---------- */
.titulo{
  font-family:'Oswald', 'Barlow', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--negro);
  font-size:clamp(1.75rem, 3.5vw, 2.35rem);
  line-height:1.15;
  margin:0;
}
.titulo--claro{ color:#fff; }
.titulo--centrado{ text-align:center; }

.subrayado{
  display:block;
  width:86px;
  height:3px;
  margin:14px 0 0;
  background:linear-gradient(to right, var(--teal) 0 40%, #d9d9d9 40% 100%);
}
.subrayado--centrado{ margin-left:auto; margin-right:auto; }

.seccion{ padding:78px 0; }
.seccion--gris{ background:var(--gris-fondo); }

.seccion__intro{
  margin:26px 0 0;
  font-size:1.05rem;
  font-weight:500;
  color:var(--negro);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  padding:13px 34px;
  font-family:'Barlow', sans-serif;
  font-weight:700;
  font-size:1.05rem;
  border:0;
  cursor:pointer;
  transition:filter .18s ease, transform .18s ease;
}
.btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn--oscuro{ background:var(--oscuro); color:var(--amarillo); }
.btn--amarillo{ background:var(--amarillo); color:var(--negro); }
.btn--bloque{ display:block; width:100%; text-align:center; padding:15px; font-size:1.15rem; }

/* ---------- Icono cuadrado teal ---------- */
.ico-cuadro{
  flex:0 0 auto;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--teal);
  color:#fff;
}
.ico-cuadro svg{ width:22px; height:22px; }

/* =========================================================
   HEADER
   ========================================================= */
.header{ background:#fff; }
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:104px;
  padding-top:10px;
  padding-bottom:10px;
}
.header__logo img{ width:180px; height:auto; }
.header__tel{
  display:flex; align-items:center; gap:14px;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:1.4rem;
  color:var(--teal);
}
.header__tel:hover{ opacity:.85; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:url('../img/hero.jpg') center 30%/cover no-repeat #0d1b1e;
  min-height:596px;
  display:flex;
  align-items:center;
}
.hero__panel{
  width:100%;
  /* opaco: la foto asoma arriba y abajo del panel, como en el diseño */
  background:var(--teal-hero);
  padding:60px 0;
}
.hero__contenido{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 24px;
}
.hero h1{
  margin:0;
  max-width:930px;
  color:#fff;
  font-family:'Barlow', sans-serif;
  font-weight:500;
  font-size:clamp(1.9rem, 4.2vw, 3rem);
  line-height:1.15;
}
.hero__bajada{
  margin:12px 0 0;
  max-width:930px;
  color:#fff;
  text-transform:uppercase;
  font-size:clamp(.95rem, 1.6vw, 1.2rem);
  letter-spacing:.2px;
}
.hero__botones{
  margin-top:30px;
  display:flex;
  flex-wrap:wrap;
  gap:22px;
}

/* =========================================================
   SERVICIOS
   ========================================================= */
.grilla-servicios{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:38px;
}
.tarjeta{
  background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.07);
  display:flex;
  flex-direction:column;
}
.tarjeta__img{
  width:100%;
  height:246px;
  object-fit:cover;
}
.tarjeta__cuerpo{ padding:34px 30px 40px; }
.tarjeta__titulo{
  margin:0;
  font-family:'Barlow', sans-serif;
  font-weight:400;
  font-size:1.5rem;
  color:var(--negro);
  line-height:1.25;
}
.tarjeta__texto{
  margin:0;
  padding-top:26px;
  border-top:1px solid #cfcfcf;
  margin-top:26px;
  text-align:center;
  font-size:.98rem;
}

/* =========================================================
   BENEFICIOS
   ========================================================= */
.grilla-beneficios{
  margin-top:46px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:42px 60px;
}
.beneficio{
  display:flex;
  align-items:flex-start;
  gap:20px;
}
.beneficio img{ width:74px; height:74px; flex:0 0 auto; object-fit:contain; }
.beneficio p{ margin:0; font-size:1.02rem; }

/* =========================================================
   QUIENES SOMOS
   ========================================================= */
.quienes{
  background:#1f1f1f;
  display:grid;
  grid-template-columns:38% 1fr;
  align-items:center;
  overflow:hidden;
}
.quienes__foto{
  position:relative;
  aspect-ratio:492 / 647;
}
/* foto recortada en diagonal */
.quienes__foto::before{
  content:'';
  position:absolute; inset:0;
  background:url('../img/equipo.jpg') center/cover no-repeat;
  clip-path:polygon(0 0, 69% 0, 92% 41%, 45% 100%, 0 100%);
}
/* franja amarilla decorativa paralela a la diagonal */
.quienes__foto::after{
  content:'';
  position:absolute; inset:0;
  background:var(--amarillo-2);
  clip-path:polygon(70.5% 0, 75.5% 0, 99% 41%, 94% 41%);
}
.quienes__texto{
  padding:70px max(24px, calc((100vw - 1160px) / 2 + 24px)) 70px 20px;
  color:#e9e9e9;
}
.quienes__kicker{
  margin:0 0 6px;
  color:var(--teal);
  font-family:'Oswald', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.quienes__texto p{ font-size:1.02rem; }
.quienes__texto .subrayado + p{ margin-top:28px; }

/* =========================================================
   COMO TRABAJAMOS
   ========================================================= */
.proceso{
  margin-top:52px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:6px;
}
.paso{
  position:relative;
  min-height:200px;
  padding:34px 30px 30px 46px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%, 30px 50%);
}
.paso:first-child{
  padding-left:34px;
  clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
}
.paso--1{ background:#91e1da; }
.paso--2{ background:#6bd7ce; }
.paso--3{ background:#45cdc2; }
.paso--4{ background:#22c3b6; }
.paso--5{ background:#00b9aa; }
.paso__ico{ width:34px; height:34px; }
.paso__txt{
  font-family:'Oswald', sans-serif;
  font-weight:500;
  text-transform:uppercase;
  font-size:.95rem;
  line-height:1.35;
  letter-spacing:.3px;
}

/* =========================================================
   CLIENTES
   ========================================================= */
.clientes{
  background:#f5f7f7;
  padding:70px 0 76px;
}
.clientes__grilla{
  margin-top:46px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:30px 46px;
}
.clientes__grilla img{
  height:70px;
  width:auto;
  object-fit:contain;
  transition:transform .2s ease;
}
.clientes__grilla img:hover{ transform:scale(1.05); }

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto{
  display:grid;
  grid-template-columns:47% 1fr;
}
.contacto__datos{
  background:linear-gradient(160deg, var(--verde-osc) 0%, #1f5c4d 45%, #13b0a1 100%);
  color:#fff;
  display:flex;
  padding:70px 40px 70px max(24px, calc((100vw - 1160px) / 2 + 24px));
}
.contacto__datos-inner{ width:100%; }
.datos{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.datos li{
  display:flex;
  align-items:flex-start;
  gap:18px;
  font-size:1.08rem;
}
.datos li > a{ padding-top:7px; }
.datos li > a:hover{ text-decoration:underline; }
.datos__dir p{ margin:0 0 10px; line-height:1.35; }
.datos__dir p:last-child{ margin-bottom:0; }

.contacto__form{
  background:var(--gris-form);
  display:flex;
  align-items:center;
  padding:70px max(24px, calc((100vw - 1160px) / 2 + 24px)) 70px 40px;
}
.formulario{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.formulario input,
.formulario textarea{
  width:100%;
  border:0;
  background:#fff;
  padding:16px 20px;
  font-family:inherit;
  font-size:1.02rem;
  color:var(--negro);
}
.formulario textarea{ resize:vertical; min-height:180px; }
.formulario input::placeholder,
.formulario textarea::placeholder{ color:#6f6f6f; }
.formulario input:focus,
.formulario textarea:focus{ outline:2px solid var(--teal); outline-offset:0; }
.formulario .btn{ margin-top:6px; }
.campo-trampa{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* =========================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================================= */
.wsp{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:60;
  width:60px; height:60px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.wsp:hover,
.wsp:focus-visible{
  transform:scale(1.08);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.wsp svg{ width:34px; height:34px; }

/* etiqueta que aparece al pasar el mouse (solo escritorio) */
.wsp__label{
  position:absolute;
  right:74px;
  white-space:nowrap;
  background:#fff;
  color:var(--negro);
  font-size:.92rem;
  font-weight:600;
  padding:8px 14px;
  border-radius:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  opacity:0;
  transform:translateX(8px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.wsp:hover .wsp__label,
.wsp:focus-visible .wsp__label{ opacity:1; transform:translateX(0); }

@media (hover: none){
  .wsp__label{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wsp, .wsp__label{ transition:none; }
  .wsp:hover, .wsp:focus-visible{ transform:none; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:#5a5a5a;
  color:#eaeaea;
  padding:22px 0;
  font-size:.9rem;
}
.footer__inner{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  justify-content:space-between;
}
.footer p{ margin:0; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .grilla-servicios{ grid-template-columns:repeat(2, 1fr); gap:28px; }
  .grilla-beneficios{ grid-template-columns:repeat(2, 1fr); gap:34px 40px; }
  .proceso{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .paso, .paso:first-child{
    min-height:auto;
    padding:26px 44px 26px 26px;
    clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
  }
  .quienes{ grid-template-columns:1fr; }
  .quienes__foto{ max-width:420px; }
  .quienes__texto{ padding:44px 24px 60px; }
  .contacto{ grid-template-columns:1fr; }
  .contacto__datos, .contacto__form{ padding:56px 24px; }
}

@media (max-width: 700px){
  .header__inner{ min-height:auto; flex-wrap:wrap; gap:12px; }
  .header__logo img{ width:150px; }
  .header__tel{ font-size:1.2rem; }

  .hero{ min-height:auto; }
  .hero__panel{ padding:40px 0; }

  .seccion{ padding:56px 0; }
  .grilla-servicios{ grid-template-columns:1fr; }
  .grilla-beneficios{ grid-template-columns:1fr; }
  .proceso{ grid-template-columns:1fr; }
  .clientes__grilla{ gap:24px 32px; }
  .clientes__grilla img{ height:56px; }
  .hero__botones .btn{ flex:1 1 auto; text-align:center; }
  .wsp{ width:54px; height:54px; right:16px; bottom:16px; }
  .wsp svg{ width:30px; height:30px; }
}