/* ===================================================================== */
/* [00] HEADER / TOKENS Y ESCALAS — variables, sombras, radios, z-index  */
/* ===================================================================== */
:root{
  --c-primary:#ff4081;          /* rosa principal */
  --c-primary-700:#d63384;
  --c-secondary:#6a11cb;        /* morado footer */
  --c-secondary-2:#2575fc;      /* azul footer */
  --c-accent:#03a9f4;           /* azul barra al scrollear */
  --c-success:#25D366;          /* WhatsApp */
  --c-bg:#ffffff;
  --c-text:#444;
  --c-text-dark:#333;

  --shadow-1:0 4px 10px rgba(0,0,0,.10);
  --shadow-2:0 6px 15px rgba(0,0,0,.20);

  --radius:10px;
  --radius-lg:12px;

  --z-translate:9999;
  --z-fixed-ui:1000;
  --z-header:1030;

  --btn-size:48px;   /* back-to-top */
  --fab-size:56px;   /* WhatsApp */
  --gap-fabs:12px;   /* separación entre FABs */
}

/* ===================================================================== */
/* [01] BASE / RESET / UTILIDADES GENERALES                              */
/* ===================================================================== */
*{ box-sizing:border-box; }
html{ scroll-padding-top:110px; }
body{
  font-family:'Poppins',sans-serif;
  color:var(--c-text);
  background:var(--c-bg);
  padding-top:100px; /* espacio para top-bar + navbar fijas */
}
img{ max-width:100%; display:block; }
section{ padding:60px 0; }
a{ text-decoration:none; }
.container{ max-width:1200px; margin:auto; padding:15px; }
.footer-column ul{ list-style:none; margin:0; padding:0; }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }
@media (max-width:860px){ .contacto_navbar{ display:none !important; } }

/* ===================================================================== */
/* [02] TOPBAR — cinta superior fija (contacto, carrito)                  */
/* ===================================================================== */

.top-bar{
  position:fixed; inset:0 auto auto 0; width:100%;
  background:var(--c-primary); color:#fff; font-size:14px; padding:0;
  z-index:var(--z-header); transition:background .3s ease-in-out;
}
.top-bar .container{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
}
.top-bar a{ color:#fff; margin:0 10px; }
.phone-icon,.email-icon,.cart-icon{ color:#fff; margin-right:5px; font-size:16px; }
@media (max-width:768px){
  .top-navbar-contenedor{ padding: 8px!important;}
  .top-bar .container{ flex-wrap:wrap; justify-content:center; }
  .top-bar a{ margin:5px; }
}

/* ===================================================================== */
/* [03] NAVBAR — menú fijo + estados scrolled                             */
/* ===================================================================== */
.navbar{
  position:fixed; top:50px; left:0; width:100%;
  background:#fff; padding:0; z-index:calc(var(--z-header) - 10);
  transition:background .3s ease, padding .3s ease;
}
.navbar-brand img{ height:100px; transition:height .3s ease; }
.nav-link{ color:#444 !important; font-weight:bold; margin:0 15px; }
.nav-link:hover{ color:var(--c-primary) !important; }

.top-bar.scrolled{ background:var(--c-accent) !important; }
.scrolled .navbar{ padding:5px 0; background:#f8f9fa; box-shadow:var(--shadow-1); }
.scrolled .navbar-brand img{ height:60px; }
.scrolled .navbar .nav-link{ color:#000 !important; }

@media (max-width:768px){
  .navbar{ top:44px; }
  body{ padding-top:96px; }
}

/* ===================================================================== */
/* [04] HERO — portada con imagen + waves                                 */
/* ===================================================================== */
.hero{
  position:relative; overflow:hidden; text-align:center; color:#fff;
  padding:150px 0;
  background:
    linear-gradient(to right, rgba(255,64,129,.8), rgba(123,31,162,.8)),
    url('https://gianninavaldivia.com/ima/familia-caminando-en-un-muelle-scaled-1.jpg') center/cover no-repeat;
}
.hero h1{ font-size:3.5rem; font-weight:700; text-shadow:2px 2px 10px rgba(0,0,0,.3); }
.hero p{ font-size:1.3rem; max-width:800px; margin:10px auto; }

/* Botones del HERO (scopados para no pisar estilos globales) */
.hero .btn{ font-size:1.2rem; padding:12px 30px; border-radius:50px; margin:10px; border:2px solid #fff; }
.hero .btn-primary{ background:#fff; color:var(--c-primary); border-color:#fff; }
.hero .btn-primary:hover{ background:#fff; opacity:.9; }
.hero .btn-secondary{ background:transparent; color:#fff; }

.wave-container{ position:absolute; bottom:0; width:100%; line-height:0; }
.wave-container svg{ width:calc(100% + 1.3px); height:100px; display:block; }
.wave-container .wave-primary{ fill:#fff; }
.wave-container .wave-secondary{ fill:rgba(255,255,255,.4); }

@media (max-width:768px){
  .hero{ padding:100px 0; }
  .hero h1{ font-size:2rem; }
  .hero p{ font-size:1rem; }
}

/* ===================================================================== */
/* [05] ACERCA DE MÍ — layout y foto                                      */
/* ===================================================================== */
#acerca h2{ color:var(--c-primary); font-weight:700; }
.acerca-img{ border-radius:var(--radius); height:auto; object-fit:cover; }
#acerca p{ font-size:18px; color:var(--c-text); max-width:90%; margin:10px auto; }

.img-container{
  width:400px; height:300px; margin:auto; overflow:hidden; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:768px){
  #acerca .row{ flex-direction:column-reverse; }
  #acerca p{ font-size:16px; }
  .acerca-img{ max-width:80%; margin:0 auto; }
  .img-container{ max-width:300px; width:100%; }
}

/* ===================================================================== */
/* [06] VALORES — tarjetas (cards)                                        */
/* ===================================================================== */
#valores{ background:#fff; }
.valor-box{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:20px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-1); width:100%;
}
.valor-img{ width:150px; height:150px; object-fit:contain; margin-bottom:15px; }
#valores h4{ color:var(--c-primary); font-weight:700; font-size:20px; margin-top:10px; }
#valores p{ font-size:16px; color:var(--c-text); max-width:90%; margin:0 auto; }
@media (max-width:768px){
  .valor-img{ width:120px; height:120px; }
  #valores p{ font-size:14px; }
}

/* ===================================================================== */
/* [07] PROMOCIÓN — imagen, badge “Sale!”, CTA                            */
/* ===================================================================== */
#promocion{ background:#d0b3ff; padding:50px 0; }
.promo-image-container{ position:relative; display:inline-block; }
.promo-img{ max-width:max-content; border-radius:var(--radius); transition:transform .3s ease; cursor:pointer; }
.promo-image-container:hover .promo-img{ transform:scale(1.05); }
.sale-badge{
  position:absolute; top:10px; left:10px; background:#ff7043; color:#fff; font-weight:700;
  font-size:14px; padding:5px 12px; border-radius:5px; transition:transform .3s ease; z-index:10;
}
.promo-image-container:hover .sale-badge{ transform:scale(1.2); }
.promo-text{ text-align:center; padding:20px; }
.promo-title{ font-size:28px; font-weight:700; color:#fff; }
.promo-subtitle{ font-size:18px; color:#d32f2f; font-weight:700; }
.btn-outline-danger{
  font-size:18px; padding:12px 24px; border:2px solid var(--c-primary); color:var(--c-primary);
  border-radius:8px; transition:all .3s ease; display:inline-block;
}
.btn-outline-danger:hover{ background:var(--c-primary); color:#fff; }
@media (max-width:768px){
  .promo-img{ /*max-width:250px;*/ }
  .promo-title{ font-size:24px; }
  .promo-subtitle{ font-size:16px; }
}

/* ===================================================================== */
/* [08] MASTERCLASS — cards + rating + slick                              */
/* ===================================================================== */
#masterclass{ background:#fff; }
.course-card{
  background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1);
  text-align:center; padding-bottom:20px; margin:15px;
}
.course-image{ position:relative; }
.course-image img{ border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }
.bookmark-icon{
  position:absolute; top:10px; right:10px; background:rgba(255,255,255,.8);
  padding:5px 8px; border-radius:5px; font-size:18px; color:var(--c-primary);
}
.course-info{ padding:15px; }
.course-rating{ font-size:18px; color:gold; margin-bottom:5px; }
.course-info h4{ font-size:18px; font-weight:700; margin-bottom:5px; }
.course-info p{ font-size:14px; color:#666; }
@media (max-width:768px){
  .course-info h4{ font-size:16px; }
  .btn-outline-danger{ font-size:14px; }
}

/* ===================================================================== */
/* [09] HERO SLIDER — 3 slides, separador, slick                          */
/* ===================================================================== */
#hero-slider{ background:#f9f9f9; padding:80px 0; text-align:center; }
.hero-carousel{ max-width:1400px; margin:auto; }
.slide{
  display:flex; align-items:center; justify-content:center;
  height:800px; overflow:hidden; border-radius:15px; padding:50px;
}
.slide-content{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.slide-1{ background:linear-gradient(to right,#ffafbd,#ffc3a0); }
.slide-2{ background:linear-gradient(to right,#2193b0,#6dd5ed); }
.slide-3{ background:linear-gradient(to right,#cc2b5e,#753a88); }
.slide-img{ width:35%; max-height:700px; object-fit:cover; border-radius:15px; }
.separator{ width:5px; height:80%; background:rgba(255,255,255,.6); border-radius:5px; }
.slide-text{ width:55%; padding:50px; color:#fff; font-size:32px; font-weight:700; text-align:left; }
.slide-text_all{ width:100% !important; color:#fff !important; }
.slide-quote{ font-size:40px; font-style:italic; color:#fff; }
.slide-question{ font-size:42px; font-weight:700; color:#fff; }
.slide-answer{ font-size:36px; color:#fff; }
.slide-info{ font-size:36px; }
.btn-highlight{
  font-size:22px; padding:14px 30px; border:2px solid #fff; color:#fff; background:transparent;
  border-radius:8px; transition:all .3s ease; display:inline-block; margin-top:20px;
}
.btn-highlight:hover{ background:#fff; color:#753a88; }
.slick-track{ display:flex !important; }
.slick-slide{ display:flex !important; align-items:center; justify-content:center; }
.slick-prev,.slick-next{ display:none !important; }

@media (max-width:1024px){
  .slide{ height:auto; padding:30px; }
  .slide-content{ flex-direction:column; }
  .slide-img{ width:100%; max-height:400px; }
  .separator{ width:80%; height:4px; margin:20px 0; }
  .slide-text{ width:100%; text-align:center; padding:30px; font-size:28px; }
  .btn-highlight{ font-size:18px; }
}
@media (max-width:768px){
  .slide-img{ max-width:70%; object-fit:contain; }
  .slide-text,.slide-text_all,.slide-info{ font-size:14px; }
  .slide-quote{ font-size:18px; }
  .slide-question,.slide-answer{ font-size:16px; }
  .btn-highlight{ font-size:14px; padding:10px 20px; }
}

/* ===================================================================== */
/* [10] ACADEMY (TUANA) — layout y CTA                                    */
/* ===================================================================== */
#academy{ background:#fff; padding:60px 0; }
.academy-img{ width:80%; max-width:450px; border-radius:var(--radius); }
.btn-primary{
  background:var(--c-primary-700);
  border-color:var(--c-primary-700);
  color:#fff; padding:12px 24px; font-size:18px; border-radius:8px;
}
.btn-primary:hover{ background:#b0256b; border-color:#b0256b; }
.btn_TUANA{ color:#fff; margin-bottom: 10px;}
@media (max-width:768px){
  #academy .row{ flex-direction:column-reverse; text-align:center; }
  .academy-img{ width:100%; max-width:300px; margin-top:20px; text-align: center; display: inline;}
}

/* ===================================================================== */
/* [11] PRÓXIMOS TALLERES — bloque magenta, clip-path                     */
/* ===================================================================== */
.taller_text{margin-top: 10px;}
.nuevos-talleres{
  background:linear-gradient(135deg,#8e2de2,#ff3d77);
  padding:80px 0; position:relative; border-radius:0 0 80px 80px;
  clip-path:polygon(0% 5%,100% 0%,100% 95%,0% 100%);
}
.taller-img{ display:inline; width:220px; border-radius:var(--radius); box-shadow:0 4px 10px rgba(0,0,0,.3); }
.btn-taller{margin-bottom: 25px;
  background:var(--c-primary); color:#fff; padding:12px 24px; border-radius:8px;
  display:inline-block; font-weight:700; transition:all .3s ease;
}
.btn-taller:hover{ background:#fff; color:var(--c-primary); }

/* ===================================================================== */
/* [12] FAQ — acordeón                                                     */
/* ===================================================================== */
#faq{ background:#fff; padding:80px 0; }
#faq h2{ font-size:28px; color:var(--c-primary); margin-bottom:20px; }
.accordion-item{ border-radius:var(--radius); margin-bottom:10px; box-shadow:var(--shadow-1); transition:all .3s ease; }
.accordion-button{ background:#f8f9fa; font-size:18px; font-weight:700; color:#333; transition:all .3s ease; }
.accordion-button:hover{ background:var(--c-primary); color:#fff; }
.accordion-body{ font-size:16px; color:#555; }
.faq-img{ max-width:400px; margin-top:20px; }
@media (max-width:768px){
  #faq img{ max-width:250px; }
  .accordion-button{ font-size:16px; }
  .accordion-body{ font-size:14px; }
}

/* ===================================================================== */
/* [13] TESTIMONIOS — fondo blur + caja centrada                          */
/* ===================================================================== */
#testimonios{
  background:linear-gradient(135deg,#7B1FA2,#E91E63);
  padding:100px 0; text-align:center; position:relative;
  clip-path:polygon(0 5%,100% 0,100% 95%,0% 100%);
}
.testimonial-container{ position:relative; max-width:800px; margin:auto; }
.testimonial-bg img{
  width:100%; height:400px; object-fit:cover;
  filter:blur(5px) brightness(.5); border-radius:var(--radius-lg);
}
.testimonial-box{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#fff; padding:25px; border-radius:var(--radius-lg); box-shadow:var(--shadow-2);
  width:550px; max-width:600px;
}
.testimonial-avatar{ width:60px; height:60px; border-radius:50%; margin-bottom:10px; }
.testimonial-quote{ font-size:18px; color:#333; font-style:italic; margin-bottom:15px; }
.testimonial-name{ font-size:16px; font-weight:700; color:#555; }
@media (max-width:768px){
  .testimonial-box{ max-width:90%; padding:20px; }
}

/* ===================================================================== */
/* [14] FOOTER — grid, partners, redes, botón WhatsApp grande             */
/* ===================================================================== */
.footer-bg{
  background:linear-gradient(135deg,var(--c-secondary),var(--c-secondary-2));
  color:#fff; padding:70px 30px; text-align:center; width:100%;
}
.footer-grid{ display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; gap:50px; }
.footer-column{ flex:1; min-width:260px; }
.footer-column h2{
  font-size:1.8em; margin-bottom:20px; font-weight:700; text-transform:uppercase;
  text-shadow:1px 1px 5px rgba(0,0,0,.2);
}
.footer-column a{ color:#fff; font-weight:700; font-size:1.1em; transition:color .3s ease; }
.footer-column a:hover{ color:#ffeb3b; }
.btn-whatsapp{
  display:inline-block; background:var(--c-success); color:#fff;
  padding:14px 30px; border-radius:50px; font-size:1.2em; font-weight:700;
  transition:background .3s, transform .2s;
}
.btn-whatsapp:hover{ background:#1EBE52; transform:scale(1.05); }
.partners{ display:flex; justify-content:center; gap:20px; }
.partners img{
  width:100px; height:100px; object-fit:cover; border-radius:50%;
  border:4px solid #fff; transition:transform .3s ease;
}
.partners img:hover{ transform:scale(1.1); }
.social-icons{ display:flex; justify-content:center; gap:20px; margin-top:15px; }
.icon{
  width:55px; height:55px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.2); color:#fff; transition:transform .3s, background .3s; font-size:30px;
}
.icon:hover{ transform:scale(1.2); background:rgba(255,255,255,.5); }
.instagram{ background:#E4405F; } .tiktok{ background:#000; } .youtube{ background:#FF0000; }
.linkedin{ background:#0077B5; } .whatsapp{ background:#25D366; } .facebook{ background:#1877F2; }

@media (max-width:992px){
  .footer-grid{ flex-direction:column; text-align:center; }
  .footer-column{ width:100%; padding:15px 0; }
}

/* ===================================================================== */
/* [15] FABs / WIDGETS — back-to-top + WhatsApp flotante                  */
/* ===================================================================== */
.back-to-top{
  position:fixed; right:20px;
  bottom:calc(20px + var(--fab-size) + var(--gap-fabs));
  width:var(--btn-size); height:var(--btn-size); border-radius:50%;
  background:var(--c-primary); color:#fff; box-shadow:var(--shadow-1);
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; opacity:0; visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, background .2s ease;
  transform:translateY(8px); z-index:calc(var(--z-fixed-ui) - 1);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--c-primary-700); }
.back-to-top i{ font-size:20px; line-height:1; display:inline-block; vertical-align:middle; }

.whatsapp{
  position:fixed; bottom:20px; right:20px; z-index:var(--z-fixed-ui);
  display:flex; align-items:center; justify-content:center;
  width:var(--fab-size); height:var(--fab-size); border-radius:50%;
  background-color:var(--c-success); color:#fff; font-size:32px; text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.25); transition:all .3s ease;
}
.whatsapp:hover{ background-color:#1ebe5b; transform:scale(1.1); }
@keyframes pulse{ 0%{transform:scale(1);} 50%{transform:scale(1.1);} 100%{transform:scale(1);} }
.whatsapp.pulse{ animation:pulse 2s infinite; }

@media (max-width:576px){
  .whatsapp{ right:12px; bottom:12px; }
  .back-to-top{ right:12px; bottom:calc(12px + var(--fab-size) + 10px); }
}

/* ===================================================================== */
/* [16] POPUP PROMOCIONAL — overlay, contenido, info-box, CTA             */
/* ===================================================================== */
.popup{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.65); z-index:3000;
}
.popup.show{ display:flex; }
.popup-content{
  position:relative; width:min(92vw,560px);
  background:#fff; border-radius:16px; padding:24px 20px 18px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.popup-close{
  position:absolute; top:8px; right:10px;
  width:36px; height:36px; border-radius:50%;
  border:none; background:#f1f1f1; color:#333; font-size:22px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.popup-close:hover{ background:#e8e8e8; }
.promo-header{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.promo-logo{ width:64px; height:auto; }
.promo-title-h1{ margin:0; font-size:24px; font-weight:800; color:#d63384; letter-spacing:.3px; }

.info-box{
  display:block; background:linear-gradient(135deg,#fff,#f8a8c5);
  padding:12px 14px; border-radius:10px; margin-bottom:12px;
  box-shadow:0 2px 5px rgba(0,0,0,.10);
  transition:transform .25s, box-shadow .25s; text-decoration:none; color:#333;
}
.info-box:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.18); }
.info-box .info-title{ font-weight:700; color:#d63384; font-size:16px; margin-bottom:4px; }
.info-box .info-subtitle{ font-style:italic; color:#555; font-size:14px; }
.info-box *{ color:inherit; }

.cta{
  display:block; text-align:center; text-decoration:none;
  background:#d63384; color:#fff; font-weight:800; font-size:18px;
  padding:12px 0; border-radius:10px; margin-top:6px;
  transition:background .2s, transform .2s;
}
.cta:hover{ background:#c12b73; transform:translateY(-1px); }

@media (max-width:576px){
  .popup-content{ width:min(94vw,480px); padding:20px 16px 14px; }
  .promo-title-h1{ font-size:20px; }
  .promo-logo{ width:56px; }
}

/* ===================================================================== */
/* [17] GOOGLE TRANSLATE — botón píldora fijo y bloqueo de barra azul     */
/* ===================================================================== */
#google_translate_element{
  position:fixed; right:90px !important; bottom:22px !important;
  z-index:var(--z-translate); margin:0 !important; line-height:1;
}
#google_translate_element .skiptranslate,
#google_translate_element .goog-te-gadget{ margin:0 !important; font-size:0; }

/* Botón píldora compacto */
#google_translate_element .goog-te-gadget-simple{
  position:relative; display:inline-block; min-width:156px;
  padding:8px 12px 8px 28px; border-radius:18px;
  background:#e91e63 !important; border:2px solid #fff !important;
  box-shadow:0 4px 10px rgba(0,0,0,.25); cursor:pointer; overflow:hidden;
}
#google_translate_element .goog-te-gadget-simple::after{
  content:"Traducir página";
  font:600 13px/1.1 Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#fff;
}
#google_translate_element .goog-te-gadget-simple::before{
  content:"🌐"; position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:14px;
}
#google_translate_element .goog-te-gadget-simple a{ position:absolute; inset:0; opacity:0; cursor:pointer; }
#google_translate_element .goog-te-gadget-simple:hover{ filter:brightness(1.1); }

/* Ocultar “G” e iconos internos */
#google_translate_element img.goog-te-gadget-icon,
#google_translate_element .goog-te-gadget-simple img,
#google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed > img,
#google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed > span{ display:none !important; }

@media (max-width:576px){
  #google_translate_element{right:80px !important; bottom:15px !important; }
  #google_translate_element .goog-te-gadget-simple{
    min-width:142px; padding:7px 10px 7px 26px; border-radius:16px;
  }
  #google_translate_element .goog-te-gadget-simple::after{ font-size:12px; }
  #google_translate_element .goog-te-gadget-simple::before{ font-size:13px; left:9px; }
}

/* Bloqueo de la barra superior y resaltados */
html body iframe.goog-te-banner-frame,
html body .goog-te-banner-frame.skiptranslate,
html body .VIpgJd-ZVi9od-ORHb-OEVmcd,
html body #goog-gt-tt,
html body .goog-te-balloon-frame{
  display:none !important; visibility:hidden !important; height:0 !important;
}
html{ margin-top:0 !important; }
body{ position:static !important; top:0 !important; margin-top:0 !important; transform:none !important; }
.goog-text-highlight{ background:transparent !important; box-shadow:none !important; }