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

html { scroll-behavior: smooth; font-size: 100%; font: inherit; vertical-align: baseline; font-synthesis:none; -moz-font-feature-settings: 'kern'; }
 
:root { 
--c-dest:#ffc017;
--c-blue:#5b8eab;
--c-texto:#FFF;
--c-background:#353F49;
--f-norm:'Vend Sans', sans-serif;
--f-dest:'Cal Sans', sans-serif;
--top-offset:80px;
--a-ease:cubic-bezier(.97,.06,.65,.9);
}

html { scroll-behavior: smooth; }

body { background:var(--c-background); font-family:var(--f-norm); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size:17px; padding-top:var(--top-offset); transition:background .4s var(--a-ease); overflow-x:hidden; }

header { position:fixed; width:100%; top:0; left:0; transition: background 0.3s ease; z-index:99999; }
.header-cnt { width:min(100%,1500px); margin-inline:auto; padding:12px 10px; display:flex; gap:20px; align-items:center; }
.header-cnt nav { flex-basis:40%; }
.header-cnt ul { list-style:none; display:flex; gap:2rem; font-size:.96rem; }
.header-cnt ul a { color:#FFF; text-decoration:none; position:relative; }
.header-cnt ul a::before { content:''; position:absolute; width:100%; height:3px; border-radius:3px; background-color:var(--c-dest); bottom:0; left:0; transform-origin:right; transform:scaleX(0); transition:transform .3s var(--a-ease); }
.header-cnt ul a:hover::before { transform-origin: left; transform: scaleX(1); }
.header-cnt .laosa { flex-basis:20%; display:flex; justify-content:center; position:relative; }
.header-cnt .laosa:after { content:''; width:250px; height:70px; background:url('../images/laosa.svg') center no-repeat; background-size:contain; display:block; }
.header-cnt .laosa span { display:none; }
.header-cnt .laosa a { display:block; width:250px; height: 70px; position:absolute; top:0; left:0; }
.header-cnt .work { flex-basis:40%; text-align:right; }
.header-cnt .work a { background:#ffc017; color:#000; font-size:.98rem; border-radius:50px; padding:14px 30px; text-decoration:none; font-weight:600; }

.wrapper { width:min(100%,1500px); margin-inline:auto; padding-inline:10px; position:relative; z-index:2; }
.wrapper.thin { width:min(100%,1000px); }

.mouse-blur {
  position: fixed;
  width: 30vh;
  height: 30vh;
  background: #9EA4AB;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: blur(250px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.mouse-blur.active {
  opacity: 1;
}

.footer-cnt { width:min(100%,1500px); margin-inline:auto; padding-inline:10px; position:relative; z-index:2; padding-top:18rem; padding-bottom:26rem; }
.footer-cnt video { width:600px; height:auto; margin-inline:auto; display:block; }
.footer-cnt .socials { list-style:none; margin-top:8rem; display:flex; gap:30px; justify-content:center; }
.footer-cnt .socials a { border:1px solid #555; border-radius:14px; width:75px; height:75px; display:flex; align-items:center; justify-content:center; transition:border .3s var(--a-ease); }
.footer-cnt .socials a span { display:none; }
.footer-cnt .socials .x a::before { content:''; width:35px; height:35px; background:url('../images/x.svg') center no-repeat; background-size:contain; filter:invert(1); opacity:.85; transition:opacity .3s var(--a-ease); }
.footer-cnt .socials .ig a::before { content:''; width:35px; height:35px; background:url('../images/ig.svg') center no-repeat; background-size:contain; filter:invert(1); opacity:.85; transition:opacity .3s var(--a-ease); }
.footer-cnt .socials .in a::before { content:''; width:35px; height:35px; background:url('../images/in.svg') center no-repeat; background-size:contain; filter:invert(1); opacity:.85; transition:opacity .3s var(--a-ease); }
.footer-cnt .socials a:hover { border:1px solid var(--c-dest); }
.footer-cnt .socials a:hover::before { opacity:1; }

.footer-links { list-style:none; margin-top:12rem; display:flex; gap:30px; justify-content:center; font-size:.88em; }
.footer-links a { color:#FFF; text-decoration:none; position:relative; }
.footer-links a::before { content:''; position:absolute; width:100%; height:2px; border-radius:2px; background-color:#999; bottom:0; left:0; transform-origin:right; transform:scaleX(0); transition:transform .3s var(--a-ease); }
.footer-links a:hover::before { transform-origin: left; transform: scaleX(1); }

.superclaim { text-align:center; font-family: var(--f-dest); font-size:5rem; color:#FFF; line-height:1.1; padding-top:6rem; padding-bottom:3rem; }

@keyframes typing {
  /* INGENIOSOS — 0% → 24% */
  0%, 24% { content: ""; }
  0.9600%, 23.0400% { content: "i"; }
  1.9200%, 22.0800% { content: "in"; }
  2.8800%, 21.1200% { content: "ing"; }
  3.8400%, 20.1600% { content: "inge"; }
  4.8000%, 19.2000% { content: "ingen"; }
  5.7600%, 18.2400% { content: "ingeni"; }
  6.7200%, 17.2800% { content: "ingenio"; }
  7.6800%, 16.3200% { content: "ingenios"; }
  8.6400%, 15.3600% { content: "ingenioso"; }
  9.6000%, 14.4000% { content: "ingeniosos"; }

  /* FUERTES — 24% → 49% */
  24%, 49% { content: ""; }
  25.4286%, 47.5714% { content: "f"; }
  26.8571%, 46.1429% { content: "fu"; }
  28.2857%, 44.7143% { content: "fue"; }
  29.7143%, 43.2857% { content: "fuer"; }
  31.1429%, 41.8571% { content: "fuerte"; }
  32.5714%, 40.4286% { content: "fuertes"; }

  /* APASIONADOS — 49% → 74% */
  49%, 74% { content: ""; }
  49.9091%, 73.0909% { content: "a"; }
  50.8182%, 72.1818% { content: "ap"; }
  51.7273%, 71.2727% { content: "apa"; }
  52.6364%, 70.3636% { content: "apas"; }
  53.5455%, 69.4545% { content: "apasi"; }
  54.4545%, 68.5455% { content: "apasion"; }
  55.3636%, 67.6364% { content: "apasiona"; }
  56.2727%, 66.7273% { content: "apasionad"; }
  57.1818%, 65.8182% { content: "apasionado"; }
  58.0909%, 64.9091% { content: "apasionados"; }
  59.0000%, 64.0000% { content: "apasionados"; }

  /* CREATIVOS — 74% → 100% */
  74%, 100% { content: ""; }
  75.1556%, 98.8444% { content: "c"; }
  76.3111%, 97.6889% { content: "cr"; }
  77.4667%, 96.5333% { content: "cre"; }
  78.6222%, 95.3778% { content: "crea"; }
  79.7778%, 94.2222% { content: "creat"; }
  80.9333%, 93.0667% { content: "creati"; }
  82.0889%, 91.9111% { content: "creativ"; }
  83.2444%, 90.7556% { content: "creativo"; }
  84.4000%, 89.6000% { content: "creativos"; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typewriter {
  --caret: currentcolor;
}

.typewriter::before {
  content: "";
  animation: typing 13.5s infinite;
}

.typewriter::after {
  content: "";
  border-right: 4px solid var(--c-dest);
  animation: blink 0.5s linear infinite;
}

.claim { display:flex; justify-content:center; font-weight:550; font-size:1.17rem; color:#FFF; }
.claim p { text-align:center; max-width:60ch; text-wrap:balance; line-height:1.35; }

.mainphoto { margin-top:9rem; margin-bottom:20rem; width:48%; height:600px; border-radius:20px; overflow:hidden; position:relative; margin-inline:auto; animation: ensancha var(--a-ease) forwards; animation-timeline: view(); animation-range: 0% 60%; }
.mainphoto img { width: 100%; height:100%; object-fit:cover; display:block; transform:scale(1.2); transform-origin:top center; will-change:transform; animation: crece var(--a-ease) forwards; animation-timeline: view(); animation-range:0% 60%; }

.textclaim { margin-bottom:30rem; font-size:3.7rem; font-family: var(--f-dest); width:80%; }
.textclaim span { background: linear-gradient(90deg, rgba(255,255,255,1) 0 0)  0/ 197ch no-repeat rgba(255,255,255,.4);  -webkit-background-clip: text; color: transparent; animation: text 0.03s var(--a-ease) forwards;
  animation-timeline: view(); animation-range: 0% 85%; }
h2 { font-family:var(--f-dest); font-size:4.5rem; overflow:clip; color:var(--c-texto); margin-bottom:1.6rem; transition:color .4s var(--a-ease); }
h2 .word { display: inline-block; margin-right:.18em; transform: translateY(70px) scale(0.98); transition: opacity 0.8s var(--a-ease), transform 0.8s var(--a-ease); }

@keyframes wordReveal {
    0% {
        opacity: .4;
        transform: translateY(70px) scale(0.98);
    }
    85% {
      opacity:1;
      transform: translateY(-8px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animation delays for each word */
.word:nth-child(1) { animation-delay: 0.2s; }
.word:nth-child(2) { animation-delay: 0.4s; }
.word:nth-child(3) { animation-delay: 0.6s; }
.word:nth-child(4) { animation-delay: 0.4s; }
.word:nth-child(5) { animation-delay: 0.5s; }
.word:nth-child(6) { animation-delay: 0.6s; }
.word:nth-child(7) { animation-delay: 0.7s; }
.word:nth-child(8) { animation-delay: 0.8s; }
.word:nth-child(9) { animation-delay: 0.9s; }
.word:nth-child(10) { animation-delay: 1.0s; }

@keyframes text {
    0% {
        background-position: -197ch 0;
    }
    100% {
        background-position: 0 0;
    }
}

@keyframes ensancha {
  from {
	width:48%;
  }
  to {
	width:86%;
  }
}

@keyframes crece {
  from {
	transform:scale(1.2);
  }
  to {
	transform:scale(1.3);
  }
}

#nosotros { padding-top:5rem; margin-bottom:32vh; }
.nosotros-wrapper { display:flex; gap:30px; overflow:clip; }
.nosotros-txt { flex-grow:1; }
.nosotros-txt p { color:var(--c-texto); transition:color .4s var(--a-ease); font-size:1.27rem; font-weight:500; line-height:1.4; margin-bottom:1.6rem; }
.nosotros-imagen { flex:0 0 350px; overflow:clip; border-radius:20px; }
.nosotros-imagen img { width:100%; height:auto; transform:translateX(350px); border-radius:20px; animation: introimg var(--a-ease) forwards; animation-timeline: view(); animation-range:10% 60%; }

@keyframes introimg {
  0% {
  transform:translateX(350px) scale(1);
  }
  50% {
  transform:translateX(0) scale(1);
  }
  100% {
  transform:translateX(0) scale(1.4);
  }
}

#programas { padding-top:5rem; margin-bottom:32vh; }
.programas-txt p { color:var(--c-texto); transition:color .4s var(--a-ease); font-size:1.27rem; font-weight:500; line-height:1.4; margin-bottom:1.6rem; }
.programas-slider-container { height:480px; width:min(100%,1500px); margin-inline:auto; padding-inline:10px; position:relative; z-index:2; overflow:visible; }
.programas-slider { display:flex; gap:30px; transition: transform 0.3s ease; }
.programas-item { flex:0 0 330px; position:relative; overflow:visible; }
.programas-item img { width:330px; height:480px; border-radius:20px; object-fit:cover; margin-bottom:10px; cursor:pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.programas-item video { border-radius: 20px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; object-fit: cover; cursor: pointer; }
.programas-item h3 { font-family: var(--f-dest); font-size:1.42rem; margin-bottom:8px; }
.programas-item p { font-size:.9rem; line-height:1.5; }
.programas-item:last-of-type { margin-right:300px; }

.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  z-index: 10;ww
  transition: all 0.3s ease;
  opacity: 0.8;
}

.slider-nav:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.9);
  transform: translateY(-50%) scale(1.1);
}

.slider-nav.prev { left: 20px; }
.slider-nav.next { right: 20px; }

.slider-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.3);
}

/* Arrow icons using CSS */
.slider-nav::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
}

.slider-nav.prev::after {
  border-width: 8px 12px 8px 0;
  border-color: transparent white transparent transparent;
  margin-left: -2px;
}

.slider-nav.next::after {
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent white;
  margin-right: -2px;
}

#contacto { padding-top:5rem; margin-bottom:45vh; }
.contacto-txt p { color:var(--c-texto); transition:color .4s var(--a-ease); font-size:1.27rem; font-weight:500; line-height:1.4; margin-bottom:1.6rem; }

.contacto-form form { max-width:550px; display:flex; flex-direction:column; gap:24px; }
.form-button button { background:var(--c-blue); color:#FFF; font-size:.98rem; border-radius:50px; padding:14px 30px; text-decoration:none; font-weight:600; cursor:pointer; }
.form-item { border-bottom:1px solid #AAA; display:flex; position:relative; transition:border .25s var(--a-ease); color:var(--c-texto); }
.form-item input { width:100%; background:none; height:48px; outline:none; font-family:var(--f-norm); font-size:1.02rem; padding-top:14px; font-weight:500; }
.form-item label { position:absolute; top:0; left:0; font-size:.98rem; transition:all .25s var(--a-ease); color:var(--c-texto); }
.form-item:focus-within { border-bottom:1px solid #333; }
.form-item:focus-within label { font-size:.84rem; font-weight:650; color:#666;}
.form-item:has(input:valid) label, .form-item:has(input:valid) .text, .form-item:has(select:valid) label { font-size:.84rem; font-weight:650; color:green;}
.form-upload { display:flex; flex-direction:column; }
.form-upload .upload { display:block; width:100%; background:rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; height:60px; font-size:.98rem; letter-spacing:1px; color:var(--c-texto); }

.form-checkbox { display:flex; gap:8px; align-items:center; font-size:.98rem; color:var(--c-texto); }
.form-checkbox input { width:20px; height:20px; position: relative; display: inline-block; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; }
.form-checkbox input:before { content:''; width:20px; height:20px; border:2px solid #777; border-radius:4px; display:block; }
.form-checkbox input:checked:after { content:'\2713'; width:28px; height:28px; font-size:1.25rem; font-weight:bold; color:#580; position:absolute; top:-2px; left:1px; display:block; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; }
.form-checkbox input:checked:before { border-color:#333; }

.form-item select { margin:10px 0 2px 100px; width:100%; 
  &, &::picker(select) {
    appearance: base-select;    
  }
}

.txt { color:var(--c-texto); font-family:var(--f-norm); font-size:.98rem; line-height:1.7; }
.txt p { margin-bottom:1.7rem; }
.txt ul, .txt ol { margin-bottom:1.7rem; margin-left:1.2rem; }
.txt li { margin-bottom:.4rem; }
.txt li::marker { color:var(--c-dest); }
.txt h3 { font-size:1.5rem; line-height:1.2; margin-bottom:.8rem; }
.txt h4 { font-size:1.15rem; line-height:1.2; margin-bottom:.6rem; }
.txt a { color: var(--c-texto); text-decoration:underline; text-decoration-color:#a3dcf6; text-decoration-thickness:2px; }
.txt a:hover { text-decoration-color:var(--c-dest); }

@media (min-width: 769px) {
    .programas-item:hover video {
        width: 850px;
        height: 480px;
        object-fit: cover;
        border-radius:20px;
    }
}

@media (max-width: 1500px) {
  html { max-width:100vw; overflow-x:hidden;}
}

@media (max-width: 1050px) {
.header-cnt nav, .header-cnt .work { display:none; }
.header-cnt .laosa { width:250px; margin-inline:auto; }
.superclaim { font-size:4rem; }
.textclaim { font-size:2.9rem; }
h2 { font-size:3.5rem; }
}

@media (max-width: 768px) {
  .slider-nav { display: none; }
}

@media (max-width: 600px) {
.superclaim { font-size:2.6rem; }
.claim { font-size:1.07rem; }
.claim p { max-width:45ch; }
.mainphoto { height:300px; margin-bottom:12rem; }
#nosotros { margin-bottom:12vh; }
#programas { margin-bottom:12vh; }
#contacto { margin-bottom:15vh; }
@keyframes ensancha {
  from {
  width:48%;
  }
  to {
  width:97%;
  }
}
.textclaim { font-size:1.8rem; width:100%; margin-bottom:14rem; }
h2 { font-size:2.2rem; }
.nosotros-wrapper { flex-direction:column-reverse; }
.nosotros-txt p { font-size:1.00rem; margin-bottom:1.6rem; }
.nosotros-imagen { height:300px; flex-basis:auto; }
.nosotros-imagen img { width:100%; height:300px; border-radius:20px; transform:translateX(0); object-fit:cover; animation: introimg var(--a-ease) forwards; animation-timeline: view(); animation-range:10% 60%; }
@keyframes introimg {
  0% {
  transform:translateX(0) scale(1);
  }
  50% {
  transform:translateX(0) scale(1.1);
  }
  100% {
  transform:translateX(0) scale(1.32);
  }
}
.programas-txt p, .contacto-txt p { font-size:1rem; }
.footer-links { flex-wrap: wrap; }
.footer-cnt video { width:280px; }

.programas-slider { overflow-x:scroll; }
.programas-item:last-of-type { margin-right:0; display:none;}
.programas-item { flex:0 0 280px; }
.programas-item img { width: 280px; height: 407px; }
}