:root{
    --bg:#f6f6f6;
    --ink:#2d3a2c;
    --moss:#5a6346;
    --sage:#a0a984;
    --clay:#a0541c;
    --sand:#e0a460;
    --teal:#1f5f68;
    --aqua:#6cb8bb;
    --slate:#2f3f44;
}
*{
    box-sizing: border-box;
    margin:0
}

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

html, body {
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 1.05rem/1.65 "Open Sans",system-ui,sans-serif}
h1,h2,h3{font-family:"Source Sans 3","Segoe UI",sans-serif;line-height:1.1;letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px}

.intro{position:relative;min-height:100svh;display:grid;place-items:center;align-content:center;gap:1.2rem;overflow:hidden;text-align:center;padding:2rem}
#fx{position:absolute;inset:0;width:100%;height:100%}
.stage{position:relative;width:min(56vmin,460px);aspect-ratio:1.26;display:grid;place-items:center}
.logo{width:100%;mix-blend-mode:multiply;filter:blur(38px);opacity:0;transform:scale(1.25);animation:enfoca 3.4s cubic-bezier(.2,.7,.1,1) .4s forwards}
@keyframes enfoca{40%{opacity:.6;filter:blur(18px)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
.geo{position:absolute;border:1.5px solid var(--teal);opacity:0;animation:aparece 2s 1s forwards,gira 24s linear infinite}
.g1{inset:-18%;border-radius:50%;border-style:dashed;border-color:var(--moss)}
.g2{inset:-6% -2%;transform:rotate(45deg);border-color:var(--clay);animation-duration:2s,40s;animation-direction:normal,reverse}
.g3{inset:-30% -22%;clip-path:polygon(50% 0,100% 100%,0 100%);border:0;box-shadow:inset 0 0 0 2px var(--aqua)}
@keyframes aparece{to{opacity:.55}}
@keyframes gira{to{rotate:360deg}}
.lema{position:relative;max-width:22ch;font-size:clamp(1.4rem,3.4vw,2.4rem);font-weight:600;opacity:0;animation:sube 1.4s 3s forwards}
.entrar{position:relative;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--clay);padding-bottom:.2rem;opacity:0;animation:sube 1.2s 3.6s forwards}
@keyframes sube{from{translate:0 14px}to{opacity:1;translate:0 0}}

.nav{position:sticky;top:0;z-index:20;display:flex;gap:1.6rem;align-items:center;justify-content:center;flex-wrap:wrap;padding:.7rem 1rem;background:rgba(246,246,246,.88);backdrop-filter:blur(10px);border-bottom:1px solid #0001}
.nav a{color:var(--ink);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--clay)}
.nav-logo img{height:38px;mix-blend-mode:multiply;display:block}

.sec{padding:clamp(3rem,9vw,7rem) clamp(1.2rem,6vw,6rem)}
.sec h2{font-size:clamp(1.8rem,4.4vw,3.4rem);max-width:30ch;margin-bottom:2.5rem;font-weight:800}
.alt{background:#ebece6}
.vm{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10rem;max-width:1500px}
.vm article{border-left:5px solid var(--clay);padding-left:1.4rem}
.vm article:last-child{border-color:var(--teal)}
.vm h3{font-size:1.90em;margin-bottom:.5rem}
.vm p{font-size:1.246rem}
.serv{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.2rem 3rem}
.serv li{border-top:2px solid var(--moss);padding-top:1rem}
.serv h3{font-size:1.25rem;margin-bottom:.4rem}

.sectores{background:var(--bg)}
.sect{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1.4rem;max-width:1500px;counter-reset:sector}
.sect>li{--c:var(--teal);counter-increment:sector;position:relative;display:grid;grid-template-columns:1fr;align-content:start;background:#fff;border:1px solid #0001;border-top:3px solid var(--c);border-radius:4px;padding:1.6rem 1.6rem 1.7rem;transition:transform .35s cubic-bezier(.2,.7,.1,1),box-shadow .35s}
.sect>li:nth-child(even){--c:var(--clay)}
.sect>li::after{content:counter(sector,decimal-leading-zero);position:absolute;top:.9rem;right:1.1rem;font:600 .8rem/1 "Source Sans 3",sans-serif;letter-spacing:.08em;color:var(--c);opacity:.55}
.sect>li:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px #0005}
.sect-img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;margin:.2rem 0 1.1rem;transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.sect>li:hover .sect-img{transform:scale(1.04)}
.sect h3{font-size:1.3rem;padding-right:1.6rem}

/* Sub ramas: árbol con nodos tipo plano estructural */
.ramas{grid-column:1/-1;list-style:none;margin:1.3rem 0 0;padding:1.1rem 0 0 .35rem;border-top:1px dashed #0002;display:grid;gap:0}
.ramas li{position:relative;padding-left:1.9rem;font-size:.98rem;line-height:1.45;color:var(--slate)}
.ramas li::before{content:"";position:absolute;left:0;top:.72em;width:1.15rem;border-top:1.5px solid var(--c)}
.ramas li::after{content:"";position:absolute;left:1.05rem;top:calc(.72em - 4px);width:7px;height:7px;background:#fff;border:1.5px solid var(--c);transform:rotate(45deg)}
.ramas li:not(:last-child){padding-bottom:.55rem;box-shadow:inset 1.5px 0 0 0 color-mix(in srgb,var(--c) 35%,transparent)}
.ramas li:last-child::before{top:0;height:.72em;border-top:0;border-bottom:1.5px solid var(--c);border-left:1.5px solid color-mix(in srgb,var(--c) 35%,transparent)}
.sect>li:hover .ramas li::after{background:var(--c)}
.ramas li::after{transition:background .3s}

.afil{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:center}
.afil figure{margin:0;width:min(100%,320px);height:160px;display:grid;place-items:center;padding:1.5rem;background:#fff;border:1px solid #0001;border-radius:4px;color:var(--moss);font-weight:500}
.afil img{max-width:100%;max-height:100%;object-fit:contain}

.cf{position:relative;height:clamp(380px,60vw,560px);perspective:1400px;touch-action:pan-y;cursor:grab}
.cf figure{position:absolute;left:50%;top:0;width:min(62vw,380px);height:100%;margin-left:calc(min(62vw,380px)/-2);border-radius:4px;overflow:hidden;background:linear-gradient(160deg,var(--moss),var(--teal));transition:transform .8s cubic-bezier(.2,.7,.1,1),opacity .8s,filter .8s;box-shadow:0 30px 60px -20px #0006}
.cf img{width:100%;height:100%;object-fit:cover;display:block}
.cf figcaption{position:absolute;inset:auto 0 0;padding:2.5rem 1.2rem 1rem;color:#fff;background:linear-gradient(transparent,#000a);display:grid}
.ctl{display:flex;gap:1rem;justify-content:center;margin-top:2rem}
.ctl button{width:4rem;height:4rem;border-radius:50%;border:2px solid var(--ink);background:none;font-size:1.6rem;color:var(--ink);cursor:pointer;transition:.2s}
.ctl button:hover{background:var(--ink);color:var(--bg)}

.marq{overflow:hidden;margin-bottom:1.2rem;mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:1.2rem;width:max-content;animation:cinta 40s linear infinite}
.rev .track{animation-direction:reverse;animation-duration:52s}
.marq:hover .track{animation-play-state:paused}
.track div{width:190px;height:96px;display:grid;place-items:center;background:var(--bg);border:1px solid #0002;border-radius:4px;font-weight:500;color:var(--moss)}
.track img {
  max-width: 70%;
  max-height: 60%;
  transition: .3s;
}
.track div:hover img{filter:none}
@keyframes cinta{to{translate:-50% 0}}

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

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

.dark { background: var(--slate); color: #fff; }
.dark h2 { color: #fff; }

.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  max-width: 860px;
}

.form label {
  display: grid;
  gap: .35rem;
  font-weight: 500;
}

.form .full {
  grid-column: 1 / -1;
}

.form input, .form select, .form textarea {
  width: 100%;
  font: inherit;
  padding: .8rem;
  border: 1px solid #fff5;
  border-radius: 3px;
  background: #ffffff14;
  color: #fff;
}

.form option { color: #000; }

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

.chk {
  display: flex !important;
  gap: .6rem;
  align-items: center;
  font-weight: 400 !important;
}

.form button {
  justify-self: start;
  padding: .9rem 2.2rem;
  border: 0;
  border-radius: 3px;
  background: var(--sand);
  color: var(--ink);
  font: 600 1rem "Source Sans 3", sans-serif;
  cursor: pointer;
}

.form button:hover {
  background: var(--aqua);
}

footer {
  padding: 1.5rem;
  text-align: center;
  font-size: .9rem;
  background: var(--ink);
  color: #fffc;
}

@media (max-width: 768px) {
  .contacto-wrapper .form,
  .form {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .contacto-wrapper {
    gap: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01s !important;
    animation-delay: 0s !important;
    transition: none !important;
  }
}

.texto-destacado {
  color: #4B764C;

}

.info-contacto {
  background-color: #ffffff;
  color: #333333;
  padding: 40px;
  border-radius: 15px;
  width: 100%;
  max-width: 450px;
  height: fit-content;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 25px;

}

.info-contacto h3 {
  color: #111;
  margin: 0 0 10px 0;
  font-size: 1.8rem;
}

.correo-item p {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  color: #555;
}

.info-contacto a {
  color: var(--aqua, #0088cc);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.info-contacto a:hover {
  color: #005580;
  text-decoration: underline;
}

.tooltip-container {

  --pos-facebook: -64px;
  --pos-linkedin: -124px;
  --pos-whatsapp: -184px;

  position: fixed;
  right: 20px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(138deg, #03a9f4 15%, #3fb4e9 65%);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .25);
  z-index: 2147483000;
  isolation: isolate;
  cursor: pointer;
}

.tooltip-container .text {
  display: flex;
  fill: #fff;
}

.tooltip1,
.tooltip2,
.tooltip3 {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0) scale(.5);

  transition: transform .35s cubic-bezier(.2, .8, .2, 1),
              opacity .25s .15s,
              visibility .25s .15s,
              background .2s;
  z-index: 1;
}

.tooltip1 { fill: #1877F2; }
.tooltip2 { fill: #0072b1; }
.tooltip3 { fill: #25d366; }

.tooltip1:hover { background: #1877F2; fill: #fff; z-index: 2; }
.tooltip2:hover { background: #0072b1; fill: #fff; z-index: 2; }
.tooltip3:hover { background: #25d366; fill: #fff; z-index: 2; }

.tooltip9 {
  display: none;
  position: absolute;
  left: -12px;
  bottom: 0;
  width: calc(100% + 24px);
  height: 270px;
  z-index: -1;
}

.tooltip-container.abierto .tooltip1,
.tooltip-container.abierto .tooltip2,
.tooltip-container.abierto .tooltip3 {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.tooltip-container.abierto .tooltip1 { transform: translate(-50%, var(--pos-facebook)) scale(1); }
.tooltip-container.abierto .tooltip2 { transform: translate(-50%, var(--pos-linkedin)) scale(1); }
.tooltip-container.abierto .tooltip3 { transform: translate(-50%, var(--pos-whatsapp)) scale(1); }
.tooltip-container.abierto .tooltip9 { display: block; }

@media (hover: hover) {
  .tooltip-container:hover .tooltip1,
  .tooltip-container:hover .tooltip2,
  .tooltip-container:hover .tooltip3 {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .tooltip-container:hover .tooltip1 { transform: translate(-50%, var(--pos-facebook)) scale(1); }
  .tooltip-container:hover .tooltip2 { transform: translate(-50%, var(--pos-linkedin)) scale(1); }
  .tooltip-container:hover .tooltip3 { transform: translate(-50%, var(--pos-whatsapp)) scale(1); }
  .tooltip-container:hover .tooltip9 { display: block; }
}

@media (max-width: 768px) {
  .tooltip-container {
    right: 16px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

.contacto-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  margin-top: 20px;
  flex-wrap: wrap;
}
.columna-derecha {
  flex: 1 1 320px;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.contacto-wrapper .form {
  flex: 1 1 min(650px, 100%);
  width: 100%;
  max-width: 820px;
  min-width: 0;
}

.card {
  width: fit-content;
  height: fit-content;
  background-color: #2f3f44;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 15px 40px;
  gap: 25px;
  border-radius: 50px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);
  margin: 30px 0 0 0;

}

.card a {
  width: 60px;
  height: 60px;
  background-color: rgba(117, 117, 117, 0);
  display: flex;
  align-items: center;
  border-radius: 10px;
  justify-content: center;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.card a:hover {
  transform: scale(1.2);
  border-radius: 15px;
}

.card a:active {
  transform: scale(1.1);
  transition-duration: 0.3s;
}

.card a:nth-child(1):hover {
  background-color: #1877F2;
}

.card a:nth-child(2):hover {
  background-color: #0072b1;
}

.card a:nth-child(3):hover {
  background-color: #25d366;
}

.card a svg:first-child {
  display: flex;
  scale: 1.3;
  position: absolute;
  width: 22px;
  opacity: 1;
  transform: translateY(0px);
  transition: all 0.4s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.card a svg:first-child path {
  fill: rgb(255, 255, 255);
}

.card a:hover svg:first-child {
  transform: translateY(-40px);
  opacity: 0;
}

.card a svg:last-child {
  display: flex;
  position: absolute;
  width: 22px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.card a svg:last-child path {
  fill: rgb(255, 255, 255);
}

.card a:hover svg:last-child {
  opacity: 1;
  transform: translateY(0px);
}

.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.chk input{width:auto;flex:none;margin:0}