@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap");
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Poppins,Arial,sans-serif;background:#f4f0e8;color:#202020}.site-header{position:absolute;z-index:10;top:0;left:0;width:100%;padding:18px 5vw;display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:11px;font-weight:600}.brand{color:#fff;text-decoration:none;display:flex;gap:7px;align-items:baseline}.brand span{font-size:7px;font-weight:500}nav{display:flex;gap:18px}nav a{color:#fff;text-decoration:none}.hero{min-height:680px;position:relative;overflow:hidden;color:#fff;display:flex;align-items:center}.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.05))}.hero-content{position:relative;z-index:1;margin-left:7vw;margin-top:30px}.eyebrow{font-size:44px;font-weight:700;line-height:.95;margin:0}.hero h1{font-size:55px;line-height:.9;margin:0 0 18px;font-weight:800}.hero-copy{font-size:21px;line-height:1.15;font-weight:600;margin:0 0 22px}.hero-actions{display:flex;gap:10px}.pill,.more-button{display:inline-block;text-decoration:none;border-radius:999px;padding:8px 17px;font-size:11px;font-weight:800;letter-spacing:.5px}.green{background:#8aae36;color:#111}.blue{background:#4567d4;color:#fff}.light{background:#fff;color:#4567d4}.section{max-width:1120px;margin:auto;padding:75px 5vw}.section-title{display:flex;align-items:center;justify-content:center;gap:18px}.section h2{font-size:40px;line-height:1;margin:0 0 34px;font-weight:800}.stroke{font-size:85px;line-height:.5;color:#8aae36;transform:rotate(18deg)}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.project-card{background:#fff;border-radius:22px;overflow:hidden;text-decoration:none;color:#222;box-shadow:0 2px 8px rgba(0,0,0,.04);transition:transform .2s}.project-card:hover{transform:translateY(-4px)}.project-card img{display:block;width:100%;aspect-ratio:1.1/1;object-fit:cover}.project-card div{padding:12px 15px 15px}.project-card b{display:block;font-size:12px;margin-bottom:5px}.project-card small{font-size:10px;line-height:1.35}.more-button{margin:30px auto 0;display:table;background:#8aae36;color:#111}.services{max-width:1120px}.services h2{text-align:center}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.service{min-height:125px;padding:22px 20px;color:#fff;position:relative;overflow:hidden}.service:after{content:"";position:absolute;width:190px;height:190px;border:25px solid rgba(255,255,255,.08);border-radius:50%;right:-70px;bottom:-105px}.green-bg{background:#8aae36}.blue-bg{background:#4567d4}.service h3{margin:0 0 7px;font-size:16px}.service p{margin:0;max-width:260px;font-size:12px;line-height:1.35}.about{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.about-photo img{width:100%;border-radius:28px;display:block;filter:grayscale(1)}.about-copy h2{margin-bottom:12px}.about-copy p{font-size:20px;line-height:1.1;font-weight:600;max-width:520px}.about-copy small{font-size:11px;font-weight:700}.contact{background:#4567d4;color:#fff;padding:70px 8vw;display:flex;justify-content:space-between;align-items:center;gap:40px}.contact h2{font-size:42px;line-height:.95;margin:0 0 25px}.contact-data{display:flex;flex-direction:column;gap:10px;font-size:16px;font-weight:600}.contact-data a{color:#fff;text-decoration:none}footer{background:#f4f0e8;color:#777;display:flex;justify-content:space-between;padding:20px 5vw;font-size:10px}footer span{font-size:8px}@media(max-width:800px){.site-header{position:absolute;padding:14px 5vw}.brand{font-size:14px}nav{gap:8px;font-size:8px}.hero{min-height:650px}.hero-content{margin-left:8vw}.eyebrow{font-size:34px}.hero h1{font-size:45px}.hero-copy{font-size:17px}.section{padding:55px 6vw}.section h2{font-size:32px}.project-grid,.service-grid{grid-template-columns:1fr 1fr;gap:12px}.project-card{border-radius:16px}.project-card div{padding:9px}.about{grid-template-columns:1fr;gap:30px}.about-copy p{font-size:18px}.contact{padding:55px 8vw;flex-direction:column;align-items:flex-start}.contact h2{font-size:36px}footer{font-size:8px}}@media(max-width:520px){nav a:first-child{display:none}.project-grid,.service-grid{grid-template-columns:1fr}.hero{min-height:610px}.hero-bg{object-position:58% center}.hero-copy{font-size:16px}.contact-data{font-size:14px}}


/* =========================
   V2 — Header + Hero
   ========================= */
body{font-family:'Josefin Sans',sans-serif}

.site-header{
  padding:18px 4.5vw;
  align-items:flex-start;
}
.site-header .brand{
  order:2;
  display:block;
  width:311px;
  flex:0 0 311px;
  font-family:'Josefin Sans',sans-serif;
  font-size:34px;
  font-weight:700;
  line-height:1;
  text-align:right;
}
.site-header .brand span{
  display:block;
  font-size:9px;
  font-weight:400;
  letter-spacing:.4px;
  margin-top:3px;
}
.site-header nav{
  order:1;
  margin-top:3px;
  display:flex;
  gap:22px;
  font-family:'Josefin Sans',sans-serif;
  font-size:32px; /* 24 pt ≈ 32 px */
  font-weight:400;
  line-height:1;
}
.site-header nav a{
  font-family:'Josefin Sans',sans-serif;
  font-weight:400;
}

.hero{
  min-height:560px;
  height:560px;
}
.hero-content{
  margin-left:7vw;
  margin-top:25px;
  max-width:920px;
}
.hero h1{
  margin:0 0 18px;
  font-family:'Josefin Sans',sans-serif;
  font-size:116px; /* 87 pt ≈ 116 px */
  font-weight:700;
  line-height:.92;
  letter-spacing:-1.5px;
}
.hero-copy{
  margin:0 0 24px;
  max-width:820px;
  font-family:'Josefin Sans',sans-serif;
  font-size:27px;
  font-weight:400;
  line-height:1.2;
}
.hero-bg{
  height:100%;
  object-fit:cover;
  object-position:center 55%;
}

@media(max-width:1100px){
  .site-header nav{font-size:25px;gap:14px}
  .site-header .brand{width:260px;flex-basis:260px;font-size:28px}
  .hero h1{font-size:82px}
  .hero-copy{font-size:22px}
}
@media(max-width:800px){
  .site-header{padding:14px 5vw}
  .site-header .brand{width:190px;flex-basis:190px;font-size:22px}
  .site-header .brand span{font-size:7px}
  .site-header nav{font-size:14px;gap:9px;flex-wrap:wrap}
  .hero{min-height:520px;height:520px}
  .hero-content{margin-left:7vw;margin-right:7vw;margin-top:30px}
  .hero h1{font-size:58px;letter-spacing:-.5px}
  .hero-copy{font-size:18px}
}
@media(max-width:520px){
  .site-header .brand{width:145px;flex-basis:145px;font-size:17px}
  .site-header .brand span{font-size:6px}
  .site-header nav{font-size:11px;gap:6px;max-width:210px}
  .hero{min-height:500px;height:500px}
  .hero-bg{object-position:58% center}
  .hero h1{font-size:44px;line-height:.95}
  .hero-copy{font-size:16px}
}


/* ===== V3 — HEADER + HERO ===== */
.site-header{padding:18px 5vw;align-items:flex-start}
.site-header nav{order:1;margin-top:5px;gap:22px}
.site-header nav a{font-family:'Josefin Sans',sans-serif;font-size:24pt;font-weight:700;line-height:1}
.site-header .brand{order:2;width:311px;flex:0 0 311px;text-align:right}
.site-header .brand img{width:311px;max-width:31vw;height:auto}

.hero{min-height:500px;height:500px}
.hero-bg{height:100%;object-fit:cover;object-position:center 55%}
.hero-content{margin-left:7vw;margin-top:25px;max-width:920px}
.hero h1{font-family:'Josefin Sans',sans-serif;font-size:87pt;font-weight:700;line-height:.9;letter-spacing:0;margin:0 0 18px}
.hero-copy{font-family:'Josefin Sans',sans-serif;font-size:24pt;font-weight:400;line-height:1.15;max-width:850px;margin:0 0 24px}

@media(max-width:1100px){
  .site-header nav a{font-size:18pt}
  .site-header .brand{width:250px;flex-basis:250px}
  .site-header .brand img{width:250px;max-width:30vw}
  .hero{min-height:470px;height:470px}
  .hero h1{font-size:68pt}
  .hero-copy{font-size:19pt}
}
@media(max-width:800px){
  .site-header{padding:14px 5vw}
  .site-header nav{gap:9px}
  .site-header nav a{font-size:11pt}
  .site-header .brand{width:190px;flex-basis:190px}
  .site-header .brand img{width:190px;max-width:38vw}
  .hero{min-height:440px;height:440px}
  .hero-content{margin-left:7vw;margin-right:7vw;margin-top:25px}
  .hero h1{font-size:47pt}
  .hero-copy{font-size:15pt}
}
@media(max-width:520px){
  .site-header .brand{width:145px;flex-basis:145px}
  .site-header .brand img{width:145px;max-width:38vw}
  .site-header nav{gap:6px;max-width:230px}
  .site-header nav a{font-size:8pt}
  .hero{min-height:410px;height:410px}
  .hero h1{font-size:37pt}
  .hero-copy{font-size:12pt}
}


/* ===== V4 — Header + Hero: segunda corrección ===== */

/* Menú: más pequeño y compacto */
.site-header{
  padding:18px 6vw;
}
.site-header nav{
  gap:12px;
  margin-top:4px;
}
.site-header nav a{
  font-family:'Josefin Sans',sans-serif;
  font-size:13pt;
  font-weight:700;
  line-height:1;
}

/* Logo: mantiene 311 px, pero separado del borde */
.site-header .brand{
  width:311px;
  flex:0 0 311px;
  margin-right:4vw;
}
.site-header .brand img{
  width:311px;
  max-width:none;
}

/* Mar: más corto */
.hero{
  min-height:380px;
  height:380px;
}
.hero-bg{
  height:100%;
  object-fit:cover;
  object-position:center 58%;
}

/* Título: aproximadamente la mitad de 87 pt */
.hero h1{
  font-family:'Josefin Sans',sans-serif;
  font-size:44pt;
  font-weight:700;
  line-height:.92;
  margin:0 0 14px;
}

/* Bajada: aproximadamente la mitad de 24 pt */
.hero-copy{
  font-family:'Josefin Sans',sans-serif;
  font-size:12pt;
  font-weight:400;
  line-height:1.2;
  max-width:520px;
  margin:0 0 20px;
}

@media(max-width:1100px){
  .site-header nav a{font-size:11pt}
  .site-header .brand{width:240px;flex-basis:240px;margin-right:3vw}
  .site-header .brand img{width:240px}
  .hero{min-height:360px;height:360px}
  .hero h1{font-size:38pt}
  .hero-copy{font-size:11pt}
}
@media(max-width:800px){
  .site-header{padding:14px 5vw}
  .site-header nav{gap:7px}
  .site-header nav a{font-size:9pt}
  .site-header .brand{width:175px;flex-basis:175px;margin-right:1vw}
  .site-header .brand img{width:175px}
  .hero{min-height:350px;height:350px}
  .hero-content{margin-left:7vw;margin-right:7vw;margin-top:15px}
  .hero h1{font-size:32pt}
  .hero-copy{font-size:11pt}
}
@media(max-width:520px){
  .site-header .brand{width:135px;flex-basis:135px}
  .site-header .brand img{width:135px}
  .site-header nav{gap:5px}
  .site-header nav a{font-size:7pt}
  .hero{min-height:330px;height:330px}
  .hero h1{font-size:28pt}
  .hero-copy{font-size:10pt}
}


/* ===== V5 — Header + Hero: tercera corrección ===== */

/* Menú: un poco más pequeño */
.site-header nav a{
  font-size:11pt;
}

/* Primera pantalla: el hero ocupa el viewport inicial,
   y al hacer scroll aparece inmediatamente Proyectos. */
.hero{
  min-height:100vh;
  height:100vh;
  max-height:900px;
}
.hero-bg{
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* Bajada: 16 pt aprox. */
.hero-copy{
  font-size:16pt;
}

@media(max-width:1100px){
  .site-header nav a{font-size:10pt}
  .hero-copy{font-size:14pt}
}
@media(max-width:800px){
  .site-header nav a{font-size:8pt}
  .hero{
    min-height:100svh;
    height:100svh;
    max-height:none;
  }
  .hero-copy{font-size:13pt}
}
@media(max-width:520px){
  .site-header nav a{font-size:7pt}
  .hero-copy{font-size:12pt}
}


/* ===== V7 — Header + Hero: tercera ronda final de ajustes ===== */
.site-header nav a{
  font-family:'Josefin Sans',sans-serif;
  font-weight:400;
  font-size:11pt;
}
.site-header nav a.active{
  font-weight:700;
}

/* Three-line hero subtitle, slightly larger */
.hero-copy{
  font-family:'Josefin Sans',sans-serif;
  font-size:17pt;
  font-weight:400;
  line-height:1.15;
  max-width:430px;
}

@media(max-width:800px){
  .hero::after{
    bottom:-42px;
    height:90px;
    border-top-width:2px;
  }
}


/* ===== V8 — Header + Hero: remove provisional curve ===== */
.hero::after{
  content:none;
}

/* Navigation */
.site-header nav a{
  font-family:'Josefin Sans',sans-serif;
  font-weight:400;
}
.site-header nav a.active{
  font-weight:700;
}

/* Exact three-line subtitle */
.hero-copy{
  font-family:'Josefin Sans',sans-serif;
  font-size:17pt;
  font-weight:400;
  line-height:1.15;
  max-width:430px;
}

/* ===== V9 — Header logo PNG ===== */
.site-header .brand{
  width:311px;
  flex:0 0 311px;
  margin-right:4vw;
  display:block;
}
.site-header .brand img{
  display:block;
  width:311px;
  height:auto;
  max-width:none;
}
@media(max-width:1100px){
  .site-header .brand{width:240px;flex-basis:240px}
  .site-header .brand img{width:240px}
}
@media(max-width:800px){
  .site-header .brand{width:175px;flex-basis:175px}
  .site-header .brand img{width:175px}
}
@media(max-width:520px){
  .site-header .brand{width:135px;flex-basis:135px}
  .site-header .brand img{width:135px}
}

/* ===== V10 — LOGO PNG FROM UPLOAD ===== */
.site-header .brand{
  width:311px !important;
  flex:0 0 311px !important;
  margin-right:4vw;
  display:block;
}
.site-header .brand img{
  display:block;
  width:311px !important;
  height:auto !important;
  max-width:none !important;
}
@media(max-width:1100px){
  .site-header .brand{width:240px !important;flex-basis:240px !important}
  .site-header .brand img{width:240px !important}
}
@media(max-width:800px){
  .site-header .brand{width:175px !important;flex-basis:175px !important}
  .site-header .brand img{width:175px !important}
}
@media(max-width:520px){
  .site-header .brand{width:135px !important;flex-basis:135px !important}
  .site-header .brand img{width:135px !important}
}

/* ===== V11 — Logo: 311 px de ancho proporcional ===== */
.site-header .brand{
  width:311px !important;
  flex:0 0 311px !important;
  margin-right:4vw;
  display:block;
}
.site-header .brand img{
  width:311px !important;
  height:auto !important;
  max-width:none !important;
  display:block;
  object-fit:contain;
}

/* ===== V12 — Header spacing + logo visual scale ===== */
.site-header{
  padding-top:28px !important;
}
.site-header .brand{
  width:156px !important;
  flex:0 0 156px !important;
}
.site-header .brand img{
  width:156px !important;
  height:auto !important;
  max-width:none !important;
}
@media(max-width:800px){
  .site-header{
    padding-top:22px !important;
  }
  .site-header .brand{
    width:140px !important;
    flex-basis:140px !important;
  }
  .site-header .brand img{
    width:140px !important;
  }
}
@media(max-width:520px){
  .site-header{
    padding-top:18px !important;
  }
  .site-header .brand{
    width:120px !important;
    flex-basis:120px !important;
  }
  .site-header .brand img{
    width:120px !important;
  }
}

/* ===== V14 — Proyectos: restauración de layout original ===== */

/* Same 3-column grid as the original version */
.project-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

/* Center only the title */
.projects .section-title{
  justify-content:center;
}
.projects .section-title h2{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* Keep cards visually identical to original; only retain hover movement */
.project-card{
  cursor:default;
  transition:transform .2s ease;
}
.project-card:hover{
  transform:translateY(-4px);
}

/* Larger project information and higher within the white area */
.project-card div{
  padding:18px 15px 15px;
}
.project-card b{
  display:block;
  font-size:15px;
  line-height:1.15;
  margin-bottom:7px;
}
.project-card small{
  font-size:12px;
  line-height:1.4;
}

@media(max-width:800px){
  .project-grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .project-card div{
    padding:13px 10px 12px;
  }
  .project-card b{font-size:14px}
  .project-card small{font-size:11px}
}

@media(max-width:520px){
  .project-grid{
    grid-template-columns:1fr;
  }
}

/* ===== V15 — Proyectos: imagen centrada + texto arriba ===== */

/* Image area follows the reference proportions and keeps the artwork centered */
.project-card img{
  width:100%;
  aspect-ratio:1.38 / 1;
  height:auto;
  object-fit:cover;
  object-position:center center;
  display:block;
}

/* White information area: compact, with the same visual breathing room as the reference */
.project-card > div{
  padding:20px 22px 22px !important;
  min-height:0 !important;
}

/* More readable text, aligned near the top of the white area */
.project-card b{
  display:block;
  font-size:18px !important;
  line-height:1.15;
  margin:0 0 12px !important;
}
.project-card small{
  display:block;
  font-size:14px !important;
  line-height:1.3;
}

/* Keep the approved 3-column desktop layout */
.project-grid{
  grid-template-columns:repeat(3,1fr) !important;
  gap:22px !important;
}

/* No navigation: preserve only the subtle hover movement */
.project-card{
  cursor:default;
  text-decoration:none;
  transition:transform .22s ease;
}
.project-card:hover{
  transform:translateY(-4px);
}

@media(max-width:800px){
  .project-card > div{
    padding:16px 16px 18px !important;
  }
  .project-card b{font-size:16px !important}
  .project-card small{font-size:13px !important}
}

/* ===== V16 — Proyectos: centrado real de imagen + info alineada arriba ===== */

/* Cada tarjeta mantiene dos bloques: imagen arriba / información blanca abajo */
.project-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Imagen centrada vertical y horizontalmente dentro de su área */
.project-card img{
  width:100%;
  height:300px !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block;
  flex:0 0 300px;
}

/* Bloque blanco: información pegada arriba con aire uniforme */
.project-card > div{
  flex:1 1 auto;
  padding:20px 22px 22px !important;
  min-height:150px !important;
  display:flex;
  flex-direction:column;
  justify-content:flex-start !important;
  align-items:flex-start;
}

/* Jerarquía y tamaño */
.project-card b{
  display:block;
  font-size:18px !important;
  line-height:1.15;
  margin:0 0 12px !important;
}
.project-card small{
  display:block;
  font-size:14px !important;
  line-height:1.35;
  margin:0;
}

@media(max-width:800px){
  .project-card img{
    height:240px !important;
    flex-basis:240px;
  }
  .project-card > div{
    min-height:125px !important;
    padding:16px 16px 18px !important;
  }
  .project-card b{font-size:16px !important}
  .project-card small{font-size:13px !important}
}

/* ===== V17 — Proyectos: eliminar aire superior del bloque de información ===== */

/* The card remains strictly two blocks: image + white information. */
.project-card{
  display:block !important;
}

/* Image: centered within the upper block, without vertical stretching/cropping. */
.project-card > img{
  display:block !important;
  width:100% !important;
  height:300px !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* White block starts immediately after the image. No flexible height or
   reserved space before the text. */
.project-card > div{
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  padding:18px 22px 20px !important;
  margin:0 !important;
}

/* Prevent any accidental image/placeholder inside the information block. */
.project-card > div img{
  display:none !important;
}

/* Text starts close to the top edge of the white block. */
.project-card > div b{
  display:block !important;
  margin:0 0 10px !important;
  font-size:18px !important;
  line-height:1.15 !important;
}
.project-card > div small{
  display:block !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.35 !important;
}

@media(max-width:800px){
  .project-card > img{
    height:240px !important;
  }
  .project-card > div{
    padding:15px 16px 17px !important;
  }
  .project-card > div b{font-size:16px !important}
  .project-card > div small{font-size:13px !important}
}

/* ===== V18 — PROYECTOS: RESET REAL DE ALTURAS ===== */

/* The card must NOT stretch to the grid row height. */
.projects .project-grid{
  align-items:start !important;
  grid-auto-rows:max-content !important;
}

.projects .project-card{
  height:auto !important;
  min-height:0 !important;
  align-self:start !important;
  display:block !important;
}

/* Upper block: fixed visual area. The image itself is centered in it. */
.projects .project-card > img{
  display:block !important;
  width:100% !important;
  height:300px !important;
  min-height:300px !important;
  max-height:300px !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
}

/* Lower block: ONLY the actual text. Absolutely no flexible height. */
.projects .project-card > div{
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:18px 22px 22px !important;
  overflow:visible !important;
}

/* Remove any inherited spacing that could push the content downward. */
.projects .project-card > div > *{
  margin-top:0 !important;
}

.projects .project-card > div b{
  display:block !important;
  font-size:18px !important;
  line-height:1.15 !important;
  margin:0 0 10px !important;
}

.projects .project-card > div small{
  display:block !important;
  font-size:14px !important;
  line-height:1.35 !important;
  margin:0 !important;
}

/* The cards do not need to have equal heights. */
.projects .project-grid .project-card{
  grid-row:auto !important;
}

@media(max-width:800px){
  .projects .project-card > img{
    height:240px !important;
    min-height:240px !important;
    max-height:240px !important;
  }
  .projects .project-card > div{
    padding:15px 16px 17px !important;
  }
}

/* V20 — rebuilt projects */
.projects-rebuild .project-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;align-items:start!important;grid-auto-rows:auto!important}
.projects-rebuild .project-card{display:block!important;width:100%!important;height:auto!important;min-height:0!important;align-self:start!important;overflow:hidden!important;background:#fff!important;border-radius:22px!important;box-shadow:0 2px 8px rgba(0,0,0,.04)!important;cursor:default!important;transition:transform .22s ease!important}
.projects-rebuild .project-card:hover{transform:translateY(-4px)!important}
.projects-rebuild .project-image{display:block!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;line-height:0!important;background:#fff!important}
.projects-rebuild .project-image img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;margin:0!important;padding:0!important}
.projects-rebuild .project-info{display:block!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:18px 22px 22px!important;box-sizing:border-box!important;background:#fff!important}
.projects-rebuild .project-info h3{display:block!important;margin:0 0 10px!important;padding:0!important;font-size:18px!important;line-height:1.15!important;font-weight:700!important}
.projects-rebuild .project-info p{display:block!important;margin:0!important;padding:0!important;font-size:14px!important;line-height:1.35!important;font-weight:400!important}
@media(max-width:800px){.projects-rebuild .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}.projects-rebuild .project-info{padding:16px!important}.projects-rebuild .project-info h3{font-size:16px!important}.projects-rebuild .project-info p{font-size:13px!important}}
@media(max-width:520px){.projects-rebuild .project-grid{grid-template-columns:1fr!important}}


/* V21 — Botón VER MÁS de proyectos */
.projects-more{display:flex!important;justify-content:center!important;align-items:center!important;margin:34px 0 0!important;width:100%!important}
.projects-more-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;font-weight:700!important}

/* V2: ajuste de ritmo entre Proyectos y Servicios + textos de bajada */
#servicios{
  padding-top: 48px !important;
}
#servicios .service p{
  font-size: 16px !important;
}
@media(max-width:800px){
  #servicios{
    padding-top: 40px !important;
  }
  #servicios .service p{
    font-size: 16px !important;
  }
}

/* V3: bajadas de Servicios +2 px */
#servicios .service p{
  font-size: 18px !important;
}
@media(max-width:800px){
  #servicios .service p{
    font-size: 18px !important;
  }
}

/* V4: bajadas de Servicios a 20 px */
#servicios .service p{
  font-size: 20px !important;
}
@media(max-width:800px){
  #servicios .service p{
    font-size: 20px !important;
  }
}

/* V5: tamaño definitivo solicitado para la bajada de Servicios */
#servicios .service p {
  font-size: 16px !important;
}

/* FINAL SERVICE DESCRIPTION SIZE */
section#servicios .service-grid .service p,
#servicios .service p,
.service p {
  font-size: 16px !important;
  line-height: 1.35 !important;
}

/* V7 - corrección definitiva: bajada de cada Servicio a 16px */
#servicios .service-content p {
  font-size: 16px !important;
}

/* SOBRE MÍ — primera versión con fotografía entregada por Rosario */
#sobre-mi.about{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:65px !important;
  align-items:start !important;
}
#sobre-mi .about-photo{
  width:100% !important;
  margin:0 !important;
}
#sobre-mi .about-photo img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  border-radius:28px !important;
  filter:none !important;
}
#sobre-mi .about-copy{
  padding-top:0 !important;
  align-self:start !important;
}
#sobre-mi .about-copy h2{
  margin:0 0 16px !important;
  font-size:32px !important;
  line-height:1 !important;
}
#sobre-mi .about-copy p{
  margin:0 0 18px !important;
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  max-width:520px !important;
}
#sobre-mi .about-highlight{
  background:#8aae36 !important;
  padding:0 3px !important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
#sobre-mi .about-copy small{
  font-size:11px !important;
  font-weight:700 !important;
}
@media(max-width:800px){
  #sobre-mi.about{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  #sobre-mi .about-copy h2{
    font-size:30px !important;
  }
  #sobre-mi .about-copy p{
    font-size:16px !important;
  }
}

/* SOBRE MÍ V2 — foto más contenida + bajada regular en cuatro líneas */
#sobre-mi.about{
  grid-template-columns:minmax(0, 0.78fr) minmax(0, 1fr) !important;
  gap:65px !important;
}
#sobre-mi .about-photo{
  max-width:520px !important;
  justify-self:start !important;
}
#sobre-mi .about-copy p{
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:400 !important;
  max-width:560px !important;
}
@media(max-width:800px){
  #sobre-mi.about{
    grid-template-columns:1fr !important;
  }
  #sobre-mi .about-photo{
    max-width:520px !important;
  }
}

/* SOBRE MÍ V4 — retomamos la estructura anterior y ajustamos escala/centrado */
#sobre-mi.about{
  width:1100px !important;
  max-width:88vw !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:grid !important;
  grid-template-columns:416px 520px !important;
  gap:65px !important;
  justify-content:center !important;
  align-items:start !important;
}
#sobre-mi .about-photo{
  width:416px !important;
  max-width:416px !important;
  justify-self:start !important;
}
#sobre-mi .about-photo img{
  width:416px !important;
  max-width:100% !important;
  height:auto !important;
  display:block !important;
}
#sobre-mi .about-copy{
  width:520px !important;
  max-width:520px !important;
  justify-self:start !important;
  padding-top:0 !important;
}
#sobre-mi .about-copy h2{
  margin:0 0 16px !important;
  font-size:32px !important;
  line-height:1 !important;
}
#sobre-mi .about-copy p{
  margin:0 0 18px !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:400 !important;
  max-width:520px !important;
}
#sobre-mi .about-highlight{
  background:#8aae36 !important;
  padding:0 3px !important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
#sobre-mi .about-copy small{
  display:block !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}
@media(max-width:1150px){
  #sobre-mi.about{
    grid-template-columns:minmax(0, 416px) minmax(0, 520px) !important;
  }
  #sobre-mi .about-photo,
  #sobre-mi .about-photo img{
    width:100% !important;
  }
  #sobre-mi .about-copy{
    width:100% !important;
  }
}
@media(max-width:800px){
  #sobre-mi.about{
    width:88vw !important;
    max-width:88vw !important;
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  #sobre-mi .about-photo{
    width:min(416px,100%) !important;
    max-width:416px !important;
    justify-self:center !important;
  }
  #sobre-mi .about-copy{
    width:100% !important;
    max-width:520px !important;
    justify-self:center !important;
  }
}

/* CONTACTO V1 — información alineada arriba + iconos sociales entregados */
#contacto .contact-data{
  align-self:flex-start !important;
  margin-top:0 !important;
  padding-top:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:18px !important;
}
#contacto .contact-data .contact-email{
  display:block !important;
  margin:0 0 2px !important;
}
#contacto .contact-data .contact-social{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  color:#fff !important;
  text-decoration:none !important;
  font-size:32px !important;
  line-height:1 !important;
  font-weight:700 !important;
}
#contacto .contact-data .contact-social img{
  display:block !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
}
#contacto .contact-data .contact-whatsapp img{
  width:60px !important;
  height:auto !important;
}
#contacto .contact-data .contact-instagram img{
  width:60px !important;
  height:auto !important;
}
#contacto .contact-data .contact-linkedin img{
  width:50px !important;
  height:auto !important;
}
#contacto .contact-data .contact-social:hover{
  opacity:.85 !important;
}
@media(max-width:800px){
  #contacto .contact-data{
    gap:16px !important;
  }
  #contacto .contact-data .contact-social{
    font-size:26px !important;
    gap:14px !important;
  }
}

/* CONTACTO V2 — tipografía y alineación según referencia */
#contacto .contact-data{
  align-self:flex-start !important;
  margin-top:0 !important;
  padding-top:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:10px !important;
  font-size:16px !important;
  font-weight:600 !important;
}
#contacto .contact-data .contact-email{
  display:block !important;
  margin:0 0 4px !important;
  padding-left:58px !important;
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
}
#contacto .contact-data .contact-social{
  display:grid !important;
  grid-template-columns:40px auto !important;
  align-items:center !important;
  column-gap:18px !important;
  color:#fff !important;
  text-decoration:none !important;
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
}
#contacto .contact-data .contact-social img{
  display:block !important;
  object-fit:contain !important;
  justify-self:start !important;
  flex:0 0 auto !important;
}
#contacto .contact-data .contact-whatsapp img{
  width:40px !important;
  height:auto !important;
}
#contacto .contact-data .contact-instagram img{
  width:40px !important;
  height:auto !important;
}
#contacto .contact-data .contact-linkedin img{
  width:35px !important;
  height:auto !important;
}
#contacto .contact-data .contact-social:hover{
  opacity:.85 !important;
}
@media(max-width:800px){
  #contacto .contact-data .contact-email{
    padding-left:54px !important;
    font-size:16px !important;
  }
  #contacto .contact-data .contact-social{
    grid-template-columns:40px auto !important;
    column-gap:14px !important;
    font-size:16px !important;
  }
}

/* CONTACTO V3 — compactar el bloque sin apretar los iconos */
#contacto .contact-data{
  gap:5px !important;
}
#contacto .contact-data .contact-email{
  margin-bottom:6px !important;
}
#contacto .contact-data .contact-social{
  margin:0 !important;
  min-height:40px !important;
}
#contacto .contact-data .contact-whatsapp,
#contacto .contact-data .contact-instagram,
#contacto .contact-data .contact-linkedin{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* CONTACTO V4 — reducir escala del bloque derecho */
#contacto .contact-data .contact-email{
  font-size:14px !important;
}
#contacto .contact-data .contact-social{
  font-size:14px !important;
  grid-template-columns:34px auto !important;
  column-gap:14px !important;
  min-height:34px !important;
}
#contacto .contact-data .contact-whatsapp img{
  width:34px !important;
}
#contacto .contact-data .contact-instagram img{
  width:34px !important;
}
#contacto .contact-data .contact-linkedin img{
  width:30px !important;
}
@media(max-width:800px){
  #contacto .contact-data .contact-email,
  #contacto .contact-data .contact-social{
    font-size:14px !important;
  }
  #contacto .contact-data .contact-social{
    grid-template-columns:34px auto !important;
  }
}

/* MENÚ V1 — regular, bold al pasar y bold en sección activa */
.site-header nav{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
}
.site-header nav a{
  font-family:'Josefin Sans', sans-serif !important;
  font-weight:400 !important;
  text-decoration:none !important;
}
.site-header nav a:hover{
  font-weight:700 !important;
}
.site-header nav a.active{
  font-weight:700 !important;
}
.site-header .nav-divider{
  display:block !important;
  width:2px !important;
  height:1.15em !important;
  background:currentColor !important;
  flex:0 0 2px !important;
}

/* MENÚ V2 — separadores más cortos, a la altura exacta del texto */
.site-header .nav-divider{
  width:2px !important;
  height:0.9em !important;
  background:currentColor !important;
  flex:0 0 2px !important;
}

/* LÍNEA RMDV V4
   La línea es un elemento absoluto de toda la página:
   pegada al borde derecho, por encima de los fondos y por debajo del contenido.
*/
html, body{
  overflow-x:hidden !important;
}
body{
  position:relative !important;
}
.site-line{
  position:absolute !important;
  top:0 !important;
  right:-150px !important;
  width:760px !important;
  height:auto !important;
  min-height:0 !important;
  max-width:none !important;
  z-index:4 !important;
  pointer-events:none !important;
  display:block !important;
}
.site-header{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  background:transparent !important;
  z-index:10 !important;
}
.hero{
  margin-top:0 !important;
  position:relative !important;
  z-index:1 !important;
}
main, footer{
  position:relative !important;
  z-index:1 !important;
}
.hero-content,
.section-title,
.project-grid,
.projects-more,
.service-grid,
.about-photo,
.about-copy,
.contact > *,
footer > *{
  position:relative !important;
  z-index:5 !important;
}
/* La foto queda completamente dentro de Sobre mí; nunca invade Contacto. */
#sobre-mi{
  overflow:visible !important;
}
#sobre-mi .about-photo{
  position:relative !important;
  z-index:5 !important;
  margin-bottom:0 !important;
}
#contacto{
  clear:both !important;
  position:relative !important;
  z-index:6 !important;
}
@media(max-width:800px){
  .site-line{
    right:-210px !important;
    width:700px !important;
  }
}

/* LÍNEA RMDV V5 — ligeramente más hacia adentro */
.site-line{
  right:-105px !important;
}
@media(max-width:800px){
  .site-line{
    right:-165px !important;
  }
}

/* LÍNEA RMDV V6 — un poco más hacia adentro + recorrido ligeramente más largo */
.site-line{
  right:-70px !important;
  height:102% !important;
}
@media(max-width:800px){
  .site-line{
    right:-130px !important;
    height:102% !important;
  }
}

/* LÍNEA RMDV V7 — ajuste final de recorrido según referencia */
.site-line{
  top:-60px !important;
  right:-45px !important;
  height:112% !important;
}
@media(max-width:800px){
  .site-line{
    top:-40px !important;
    right:-105px !important;
    height:112% !important;
  }
}

/* SOBRE MÍ V8 — separar visualmente la foto del bloque de Contacto */
#sobre-mi.about{
  padding-bottom:90px !important;
}
#sobre-mi .about-photo{
  margin-bottom:0 !important;
}
@media(max-width:800px){
  #sobre-mi.about{
    padding-bottom:60px !important;
  }
}

/* LÍNEA RMDV V9 — queda detrás del contenido de Proyectos/Servicios y desaparece bajo Contacto */
.site-line{
  z-index:2 !important;
}

/* Todo el contenido de estas secciones se mantiene por encima del trazo */
#proyectos .section-title,
#proyectos .project-grid,
#proyectos .projects-more,
#servicios > h2,
#servicios .service-grid,
#sobre-mi .about-photo,
#sobre-mi .about-copy{
  position:relative !important;
  z-index:6 !important;
}

/* Las tarjetas son opacas para que el trazo nunca se vea atravesándolas */
#proyectos .project-card,
#proyectos .project-image,
#proyectos .project-info,
#servicios .service{
  position:relative !important;
  z-index:7 !important;
}

/* La franja azul de Contacto tapa completamente el trazo */
#contacto{
  position:relative !important;
  z-index:8 !important;
  isolation:isolate !important;
}
#contacto::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:inherit !important;
  z-index:-1 !important;
}

/* El footer queda limpio: la línea no continúa por debajo */
footer{
  position:relative !important;
  z-index:9 !important;
  background:#f5f0e8 !important;
}

/* LÍNEA RMDV V10 — dos capas:
   1) Header: la línea pasa POR ENCIMA del hero.
   2) Resto: la misma línea pasa POR DETRÁS de proyectos, servicios y Sobre mí.
   Contacto tapa completamente la línea y el footer queda limpio.
*/
.site-line-layer{
  position:absolute !important;
  left:0 !important;
  width:100% !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.site-line-layer img{
  position:absolute !important;
  top:0 !important;
  right:-70px !important;
  width:760px !important;
  height:auto !important;
  max-width:none !important;
  display:block !important;
  pointer-events:none !important;
}
.site-line-header{
  top:0 !important;
  height:100vh !important;
  z-index:11 !important;
}
.site-line-body{
  top:100vh !important;
  height:calc(100vh) !important;
  z-index:2 !important;
}
.site-line-body img{
  top:-100vh !important;
}
.site-header{
  z-index:12 !important;
}
.hero-content{
  z-index:13 !important;
}
#proyectos,
#servicios,
#sobre-mi{
  position:relative !important;
  z-index:3 !important;
}
#proyectos .section-title,
#proyectos .project-grid,
#proyectos .projects-more,
#servicios > h2,
#servicios .service-grid,
#sobre-mi .about-photo,
#sobre-mi .about-copy{
  position:relative !important;
  z-index:5 !important;
}
#proyectos .project-card,
#proyectos .project-image,
#proyectos .project-info,
#servicios .service{
  position:relative !important;
  z-index:6 !important;
}
#contacto{
  position:relative !important;
  z-index:20 !important;
}
footer{
  position:relative !important;
  z-index:21 !important;
}
@media(max-width:800px){
  .site-line-layer img{
    right:-130px !important;
    width:700px !important;
  }
}

/* LÍNEA RMDV V11 — más visible en el fondo, ligeramente hacia adentro */
.site-line-layer img{
  right:-15px !important;
}
@media(max-width:800px){
  .site-line-layer img{
    right:-75px !important;
  }
}

/* ===== V12 — MENÚ MÓVIL ===== */
.mobile-menu-toggle,
.mobile-nav{
  display:none !important;
}

@media(max-width:800px){
  /* En móvil se elimina por completo la línea decorativa. */
  .site-line-layer{
    display:none !important;
  }

  .site-header{
    padding:18px 6vw !important;
    align-items:flex-start !important;
    z-index:30 !important;
  }

  .site-header .brand{
    order:2 !important;
    width:145px !important;
    flex:0 0 145px !important;
    margin-right:0 !important;
  }
  .site-header .brand img{
    width:145px !important;
    max-width:none !important;
  }

  .site-header .desktop-nav{
    display:none !important;
  }

  .mobile-menu-toggle{
    order:1;
    display:flex !important;
    width:46px;
    height:40px;
    padding:7px 5px;
    margin:0;
    border:0;
    background:transparent;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-start;
    cursor:pointer;
    z-index:32;
  }
  .mobile-menu-toggle span{
    display:block;
    width:36px;
    height:4px;
    border-radius:4px;
    background:#fff;
    transition:transform .2s ease, opacity .2s ease;
  }
  .mobile-menu-toggle.open span:nth-child(1){
    transform:translateY(12px) rotate(45deg);
  }
  .mobile-menu-toggle.open span:nth-child(2){
    opacity:0;
  }
  .mobile-menu-toggle.open span:nth-child(3){
    transform:translateY(-12px) rotate(-45deg);
  }

  .mobile-nav{
    position:absolute !important;
    display:flex !important;
    top:70px;
    left:6vw;
    right:6vw;
    flex-direction:column !important;
    gap:0 !important;
    padding:8px 0 !important;
    background:rgba(3,55,91,.97);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index:31 !important;
  }
  .mobile-nav.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .mobile-nav a{
    display:block;
    padding:15px 22px !important;
    color:#fff !important;
    font-family:'Josefin Sans',sans-serif !important;
    font-size:16px !important;
    font-weight:400 !important;
    line-height:1.1 !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(255,255,255,.28);
  }
  .mobile-nav a:last-child{
    border-bottom:0;
  }
  .mobile-nav a:hover,
  .mobile-nav a.active{
    font-weight:700 !important;
  }
}

@media(max-width:520px){
  .site-header{
    padding:16px 6vw !important;
  }
  .site-header .brand,
  .site-header .brand img{
    width:135px !important;
  }
  .mobile-menu-toggle{
    width:42px;
    height:36px;
  }
  .mobile-menu-toggle span{
    width:33px;
    height:3.5px;
  }
  .mobile-nav{
    top:62px;
    left:6vw;
    right:6vw;
  }
}

/* V13 — corregir duplicación del menú en desktop */
.mobile-nav{display:none !important;}
.mobile-menu-toggle{display:none !important;}
@media(max-width:800px){
  .desktop-nav{display:none !important;}
  .mobile-menu-toggle{display:flex !important;}
  .mobile-nav{display:flex !important;}
}

/* V14 — ocultar realmente el menú móvil en desktop */
.site-header .mobile-nav{display:none !important;}
.site-header .mobile-menu-toggle{display:none !important;}
@media(max-width:800px){
  .site-header .desktop-nav{display:none !important;}
  .site-header .mobile-menu-toggle{display:flex !important;}
  .site-header .mobile-nav{display:flex !important;}
}