/* landing.css
   Reglas específicas para la landing page: hero, idiomas, estudia, objetivos, beneficios,
   examen de suficiencia, CTA conversacion, contact-cards y mapa.
*/

.hero{ background:var(--white); padding:50px 0 30px 0 }
.hero-content{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center }
.hero-title{ display:flex; flex-direction:column }
.hero-subtitle{ font-size:28px; color:var(--dark-gray); font-weight:500; margin-bottom:10px }
.hero-main{ font-size:64px; font-weight:900; color:var(--primary-red); line-height:1.1 }
.hero-image img{ width:100%; height:auto }

/* Layout-specific helpers moved from global style.css */
.hero-spacer{ height:18px }
.hero-image img{ will-change: transform }

/* Idiomas Section */
.idiomas{ padding:50px 0; background:var(--white) }
.section-title{ text-align:center; font-size:42px; font-weight:700; color:var(--dark-gray); margin-bottom:60px }
.idiomas-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; max-width:1000px; margin:0 auto }
.idioma-card{ text-align:center; text-decoration:none; transition:transform .3s; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.idioma-card:hover{ transform:translateY(-10px) }
.idioma-icon{ width:200px; height:200px; margin:0 auto 20px; border-radius:50% 50% 0 0; overflow:hidden }
.idioma-icon img{ width:100%; height:100%; object-fit:cover }
.idioma-name{ font-size:24px; font-weight:700; color:var(--dark-gray); margin-top:12px; display:block }

/* Shine effect (shared) - subtle moving highlight on hover/focus */
.idioma-card, .btn-matricula, .btn-examen, .contact-card{
   position:relative; /* create stacking context for pseudo-element */
   overflow:hidden;
}
.idioma-card::before, .btn-matricula::before, .btn-examen::before, .contact-card::before{
   content:'';
   position:absolute;
   top:0;
   left:-120%;
   width:40%;
   height:100%;
   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
   transform: skewX(-18deg);
   transition: left .6s ease;
   pointer-events:none;
   mix-blend-mode: screen;
   opacity:0.95;
}
.idioma-card:hover::before, .idioma-card:focus::before,
.btn-matricula:hover::before, .btn-matricula:focus::before,
.btn-examen:hover::before, .btn-examen:focus::before,
.contact-card:hover::before, .contact-card:focus::before{
   left:120%;
}


/* Estudia Section */
.estudia{ background:var(--white); padding:60px 0 }
.section-title-center{ font-size:56px; font-weight:900; color:var(--primary-red); text-align:center; margin:0 0 50px 0; line-height:1.2 }
.matricula-cta-box{ background:linear-gradient(135deg,var(--accent-gold) 0%,#c9a300 100%); color:var(--white); padding:60px 80px; border-radius:30px; text-align:center; box-shadow:0 10px 40px rgba(172,138,0,.35); max-width:700px; margin:0 auto; position:relative; overflow:hidden }
.matricula-cta-box::before{ content:''; position:absolute; top:-50%; right:-50%; width:200%; height:200%; background:radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); animation:shimmer 3s infinite }
.matricula-cta-title{ font-size:42px; margin:0 0 15px 0; font-weight:900; position:relative; z-index:1 }
.matricula-cta-fecha{ font-size:24px; font-weight:600; margin:0 0 35px 0; position:relative; z-index:1; opacity:.95 }
.btn-matricula{ display:inline-block; background:var(--white); color:var(--accent-gold); padding:18px 50px; border-radius:50px; font-size:20px; font-weight:700; text-decoration:none; transition:all .3s; position:relative; z-index:1; box-shadow:0 4px 15px rgba(0,0,0,.2) }
.btn-matricula:hover{ background:var(--primary-red); color:var(--white); transform:translateY(-3px) scale(1.05); box-shadow:0 6px 25px rgba(112,25,28,.4) }

/* Objetivos */
.objetivos{ padding:10px 0; background:var(--white) }
.objetivos-content{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center }
.section-title-orange{ font-size:42px; font-weight:700; color:var(--primary-red); margin-bottom:30px }
.objetivos-list{ list-style:none }
.objetivos-list li{ position:relative; padding-left:40px; margin-bottom:25px; font-size:18px; line-height:1.6 }
.objetivos-list li::before{ content:'✓'; position:absolute; left:0; color:var(--primary-red); font-size:24px; font-weight:700 }

/* Beneficios */
.beneficios{ padding:10px 0; background:var(--white) }
.beneficios-content{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center }
.beneficios-list{ list-style:none }
.beneficios-list li{ position:relative; padding-left:40px; margin-bottom:25px; font-size:18px; line-height:1.6 }
.beneficios-list li::before{ content:'✓'; position:absolute; left:0; color:var(--primary-red); font-size:24px; font-weight:700 }

/* Examen de suficiencia */
.examen-suficiencia{ padding:50px 0; background:var(--white) }
.examen-content{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; background:transparent; border-radius:0; overflow:visible; opacity:1; transform:scale(1) }
.examen-left{ background:transparent; padding:0; overflow:visible }
.examen-left img{ width:100%; height:auto; object-fit:contain; transition:transform .3s }
.examen-content:hover .examen-left img{ transform:scale(1.05) }
.examen-right{ padding:60px }
.examen-title{ font-size:64px; font-weight:900; color:var(--dark-gray); line-height:1.1; margin-bottom:20px }
.examen-subtitle{ font-size:24px; color:var(--dark-gray); margin-bottom:30px }
.btn-examen{ display:inline-block; background:var(--primary-red); color:var(--white); padding:15px 40px; border-radius:30px; text-decoration:none; font-size:18px; font-weight:700; transition:background .3s }
.btn-examen:hover{ background:var(--secondary-red) }

/* CTA conversacion */
.cta-conversacion{ background:var(--white); padding:60px 0 }
.cta-content{ display:flex; flex-direction:column; gap:40px; align-items:center }
.cta-image img{ width:100%; max-width:500px; height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.15)) }
.cta-right{ display:flex; flex-direction:column; gap:30px; width:100%; max-width:1200px }
.cta-title{ font-size:48px; font-weight:900; color:var(--primary-red); line-height:1.2; margin:0; text-align:center }

/* Contact cards */
.contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:25px }
.contact-card{ background:var(--white); padding:30px 25px; border-radius:20px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; box-shadow:0 3px 15px rgba(0,0,0,.1); transition:all .3s; text-decoration:none; cursor:pointer; border-top:4px solid transparent; position:relative }
.contact-card:hover{ transform:translateY(-8px); box-shadow:0 10px 35px rgba(0,0,0,.15) }
.whatsapp-card:hover{ border-top-color:#25D366; background:linear-gradient(to bottom, rgba(37,211,102,.05) 0%, var(--white) 100%) }
.email-card:hover{ border-top-color:#EA4335; background:linear-gradient(to bottom, rgba(234,67,53,.05) 0%, var(--white) 100%) }
.schedule-card{ cursor:default; pointer-events:auto }
.schedule-card:hover{ transform:translateY(-4px); border-top-color:var(--accent-gold); background:linear-gradient(to bottom, rgba(172,138,0,.05) 0%, var(--white) 100%) }
.schedule-card:hover .contact-icon{ transform:scale(1.1) }
.schedule-card .contact-info{ pointer-events:auto }
.schedule-card .contact-info h3{ pointer-events:none }
.schedule-card .contact-value{ cursor:pointer; transition:color .2s ease, transform .2s ease; color:var(--dark-gray) }
.schedule-card .contact-value:hover{ color:var(--accent-gold); transform:scale(1.02) }
.contact-icon{ flex-shrink:0; width:70px; height:70px; display:flex; align-items:center; justify-content:center; background:#f8f9fa; border-radius:18px; transition:all .3s }
.contact-card:hover .contact-icon{ transform:scale(1.1) }
.contact-icon img{ width:40px; height:40px; object-fit:contain }
.contact-info{ flex:1 }
.contact-info h3{ font-size:20px; font-weight:700; color:var(--dark-gray); margin:0 0 10px 0 }
.contact-info p{ font-size:16px; color:var(--dark-gray); margin:0; opacity:.85; font-weight:600 }
.contact-value{ user-select:text !important; cursor:text !important; pointer-events:auto !important }

/* Small helper for inline contact row (text + small copy button) */
.contact-row{ display:inline-flex; align-items:center; gap:8px; justify-content:center }

/* Copy button (small, icon-only) */
.copy-btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:36px;
   height:36px;
   padding:6px;
   border-radius:8px;
   border:1px solid rgba(0,0,0,0.06);
   background:transparent;
   cursor:pointer;
   transition:background .15s, transform .12s;
   pointer-events:auto;
}
.copy-btn:hover{ background:rgba(0,0,0,0.04) }
.copy-btn img{ width:18px; height:18px; display:block }
.copy-btn:active{ transform:translateY(1px); background:rgba(0,0,0,0.08) }

/* Press effect for anchors that act like buttons (visual "press") */
.btn-matricula, .btn-examen, .whatsapp-card, .email-card { will-change: transform, box-shadow; transition: transform .12s ease, box-shadow .12s ease }
.btn-matricula:active, .btn-examen:active, .whatsapp-card:active, .email-card:active { transform: translateY(2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08) }
.btn-matricula:focus-visible, .btn-examen:focus-visible, .contact-card:focus-visible { outline: 3px solid rgba(112,25,28,0.12); outline-offset:4px }

/* Mapa */
.mapa-section{ padding:50px 0; background:var(--white) }
.mapa{ border-radius:20px; overflow:hidden; box-shadow:0 4px 25px rgba(0,0,0,.1); margin-top:40px; position:relative; width:100%; height:500px; opacity:0; transform:translateY(40px); transition:opacity .8s, transform .8s, box-shadow .3s }
.mapa.animate-in{ opacity:1; transform:translateY(0) }
.mapa:hover{ box-shadow:0 8px 35px rgba(0,0,0,.15) }
.mapa iframe{ width:100%; height:100%; display:block; border:none }
.mapa::before{ content:'Cargando mapa...'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:18px; color:var(--dark-gray); opacity:.5; z-index:-1 }

/* End landing.css */

/* Responsive adjustments: stack image/text and convert button rows to columns */
@media (max-width: 900px) {
   .hero-content{ grid-template-columns: 1fr; }
   .hero-text{ order:1; text-align:center }
   .hero-image{ order:2 }
   .hero-image img{ max-width:80%; margin:0 auto; display:block }

   /* Stack examen, objetivos, beneficios into single column */
   .examen-content, .objetivos-content, .beneficios-content{ grid-template-columns: 1fr; gap:30px }
   .examen-right, .examen-left, .objetivos-image, .beneficios-image{ width:100% }
   /* Ajustes para que 'Logra tu certificación' se acomode bien en pantallas estrechas */
   .examen-right{ padding:20px; text-align:center }
   .examen-title{ font-size:40px }
   .btn-examen{ display:inline-block; width:100%; max-width:360px; box-sizing:border-box; padding:14px 20px }

   /* Contact cards and language cards -> single column */
   .contact-cards{ grid-template-columns: 1fr; gap:18px }
   .idiomas-grid{ grid-template-columns: repeat(2,1fr); max-width:640px; margin:0 auto }

   /* Make inline contact rows stack vertically (buttons under text) */
   .contact-row{ flex-direction:column; align-items:center; gap:8px }
   .contact-row .contact-value{ text-align:center }
   .contact-row .copy-btn{ width:44px; height:44px }

   /* CTA box spacing for narrow screens */
   .matricula-cta-box{ padding:36px 24px }
}

@media (max-width: 480px) {
   .idiomas-grid{ grid-template-columns: 1fr }
   .hero-main{ font-size:36px }
   .hero-subtitle{ font-size:20px }
}
/* ---------- HABILIDADES ---------- */
.habilidades{
  background:var(--white);
  padding:36px 0 36px;
}
.habilidades__wrapper{
  padding-top: 24px;
}
.habilidades__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:22px;
  max-width:1000px;
  margin:0 auto;
  transition:transform 0.3s ease;
}
@media (max-width:768px){
  .habilidades__wrapper{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .habilidades__wrapper::-webkit-scrollbar{
    display:none;
  }
  .habilidades__grid{
    grid-template-columns:repeat(4, minmax(280px, 1fr));
    scroll-snap-align:start;
    padding:0 20px;
  }
  .habilidad{
    scroll-snap-align:center;
  }
}
@media (max-width:640px){
  .habilidades__grid{
    grid-template-columns:repeat(4, minmax(260px, 1fr));
    gap:16px;
  }
}
.habilidad{
  text-align:center;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 6px 22px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-top-color .3s ease, background .3s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  border-top:3px solid transparent;
}
.habilidad::before{
  content:'';
  position:absolute;
  top:0;
  left:-120%;
  width:40%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:0.95;
}
.habilidad:hover{ 
  transform:translateY(-4px); 
  box-shadow:0 12px 28px rgba(0,0,0,.1);
  background: linear-gradient(to bottom, rgba(var(--secondary-red), .05) 0%, var(--white) 100%);
  border-top-color:var(--secondary-red);
}
.habilidad:hover::before{ left:120% }
.habilidad:active{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.12) }
.habilidad__icon{
  width:150px; height:150px;
  margin:4px auto 10px auto;
}
.habilidad__icon img{ width:100%; height:100%; object-fit:contain }
.habilidad__title{
  margin:0;
  font-size:1.05rem;
  font-weight:800;
  color:var(--dark-gray);
}

/* ---------- Habilidades: iconos dentro de un círculo ---------- */
.habilidad{
  padding:22px 16px 18px;
  border-radius:18px;
}
.habilidad__icon{
  width:150px;
  height:150px;
  margin:6px auto 12px;
  border-radius:50%;
  background: radial-gradient(60% 60% at 50% 40%, #fff 0%, #f8f8f8 100%);
  box-shadow:
    0 0 0 6px #fff inset,               /* borde blanco interno */
    0 6px 18px rgba(0,0,0,.08);         /* halo exterior */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.habilidad__icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;                      /* por si la imagen es cuadrada */
}
.habilidad:hover .habilidad__icon{
  box-shadow:
    0 0 0 6px #fff inset,
    0 10px 26px rgba(0,0,0,.12);
  transform:translateY(-1px);
}
.habilidad__title{
  font-size:1.06rem;
  font-weight:900;
}

/* Grid de habilidades con respiración visual en pantallas medias */
@media (max-width: 1100px){
  .habilidades__grid{ gap:18px }
}
@media (max-width: 640px){
  .habilidad__icon{ width:132px; height:132px; padding:14px }
}