/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-bottom-2{bottom:-.5rem}.left-1\/2{left:50%}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.inline-block{display:inline-block}.flex{display:flex}.h-12{height:3rem}.h-16{height:4rem}.h-24{height:6rem}.h-32{height:8rem}.h-8{height:2rem}.h-96{height:24rem}.min-h-64{min-height:16rem}.min-h-screen{min-height:100vh}.w-12{width:3rem}.w-16{width:4rem}.w-24{width:6rem}.w-32{width:8rem}.w-8{width:2rem}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-md{max-width:28rem}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-gray-400{--tw-border-opacity:1;border-color:#9ca3af;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.border-green-400{--tw-border-opacity:1;border-color:#4ade80;border-color:rgb(74 222 128/var(--tw-border-opacity,1))}.border-yellow-400{--tw-border-opacity:1;border-color:#facc15;border-color:rgb(250 204 21/var(--tw-border-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:#3b82f6;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:#f3f4f6;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:#d1d5db;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-500\/20{background-color:#6b728033}.bg-green-500{--tw-bg-opacity:1;background-color:#22c55e;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-green-500\/20{background-color:#22c55e33}.bg-white{--tw-bg-opacity:1;background-color:#fff;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:#ffffff1a}.bg-white\/20{background-color:#fff3}.bg-yellow-500\/20{background-color:#eab30833}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-blue-400{--tw-gradient-from:#60a5fa var(--tw-gradient-from-position);--tw-gradient-to:#60a5fa00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-400{--tw-gradient-from:#4ade80 var(--tw-gradient-from-position);--tw-gradient-to:#4ade8000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:#6366f100 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-400{--tw-gradient-from:#fb923c var(--tw-gradient-from-position);--tw-gradient-to:#fb923c00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-pink-400{--tw-gradient-from:#f472b6 var(--tw-gradient-from-position);--tw-gradient-to:#f472b600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-400{--tw-gradient-from:#c084fc var(--tw-gradient-from-position);--tw-gradient-to:#c084fc00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-purple-500{--tw-gradient-to:#a855f700 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#a855f7 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-purple-600{--tw-gradient-to:#9333ea00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#9333ea var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-blue-600{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.to-green-600{--tw-gradient-to:#16a34a var(--tw-gradient-to-position)}.to-orange-600{--tw-gradient-to:#ea580c var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}.to-pink-600{--tw-gradient-to:#db2777 var(--tw-gradient-to-position)}.to-purple-600{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-6xl{font-size:3.75rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-blue-500{--tw-text-opacity:1;color:#3b82f6;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:#9ca3af;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:#4b5563;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:#374151;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:#1f2937;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:#4ade80;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:#fff;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/70{color:#ffffffb3}.text-white\/80{color:#fffc}.opacity-20{opacity:.2}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #3b82f680}50%{box-shadow:0 0 30px #3b82f6cc}}@keyframes sparkle{0%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(180deg)}to{opacity:0;transform:scale(0) rotate(1turn)}}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.game-title{animation:pulse-glow 2s ease-in-out infinite;text-shadow:0 0 20px #fffc}.world-bubble{animation:float 3s ease-in-out infinite;animation-play-state:paused}.world-bubble:hover{animation-play-state:running;animation:none;transform:scale(1.1)}.world-bubble:first-child{animation-delay:0s}.world-bubble:nth-child(2){animation-delay:.5s}.world-bubble:nth-child(3){animation-delay:1s}.world-bubble:nth-child(4){animation-delay:1.5s}.world-bubble:nth-child(5){animation-delay:2s}.floating-particles{height:100%;overflow:hidden;position:absolute;width:100%}.floating-particles:after,.floating-particles:before{animation:sparkle 3s linear infinite;background:#fff;border-radius:50%;content:"";height:4px;position:absolute;width:4px}.floating-particles:before{animation-delay:0s;left:10%;top:20%}.floating-particles:after{animation-delay:1.5s;right:15%;top:60%}.hover-glow{transition:all .3s ease}.hover-glow:hover{box-shadow:0 0 25px #3b82f699;transform:translateY(-2px)}.progress-bar{background:linear-gradient(90deg,#10b981,#3b82f6);border-radius:9999px;height:8px;transition:width .5s ease}.level-completed{background:linear-gradient(135deg,#fbbf24,#f59e0b);border:2px solid #10b981}.level-active,.level-completed{animation:pulse-glow 2s ease-in-out infinite}.level-active{background:linear-gradient(135deg,#10b981,#059669)}.level-locked{background:linear-gradient(135deg,#6b7280,#4b5563);cursor:not-allowed;opacity:.6}.chat-container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3}@keyframes celebration{0%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1.2) rotate(180deg)}to{opacity:0;transform:scale(0) rotate(1turn)}}.celebration-particle{animation:celebration 1s ease-out;background:#fbbf24;border-radius:50%;height:10px;position:absolute;width:10px}.text-glow{text-shadow:0 0 10px #fffc}.game-button{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border:2px solid #1e40af;border-radius:12px;color:#fff;cursor:pointer;font-weight:700;overflow:hidden;padding:12px 24px;position:relative;transition:all .3s ease}.game-button:before{background:linear-gradient(90deg,#0000,#ffffff4d,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.game-button:hover:before{left:100%}.game-button:hover{box-shadow:0 10px 25px #3b82f666;transform:translateY(-2px)}.game-button:active{box-shadow:0 5px 15px #3b82f64d;transform:translateY(0)}.energy-bar{background:linear-gradient(90deg,#10b981,#059669);border-radius:3px;height:6px;overflow:hidden;position:relative;transition:width .5s ease}.energy-bar:before{animation:shimmer 2s infinite;background:linear-gradient(90deg,#0000,#ffffff4d,#0000);bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.medal{align-items:center;animation:rotate 3s linear infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b);border:2px solid #d97706;border-radius:50%;display:flex;height:40px;justify-content:center;width:40px}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.star{animation:twinkle 2s ease-in-out infinite;color:#fbbf24;filter:drop-shadow(0 0 5px rgba(251,191,36,.8))}@keyframes twinkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@media (max-width:768px){.world-bubble{display:inline-block;margin:1rem;position:relative!important}.game-title{font-size:2.5rem}}.glass-effect{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3}@keyframes radar{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(1)}}.radar-effect{position:relative}.radar-effect:before{animation:radar 2s infinite;border:2px solid #3b82f680;border-radius:50%;content:"";height:100%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.hover\:z-20:hover{z-index:20}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:#2563eb;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-gray-400:hover{--tw-bg-opacity:1;background-color:#9ca3af;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:#16a34a;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.hover\:bg-white\/30:hover{background-color:#ffffff4d}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
/*# sourceMappingURL=main.eb1dec09.css.map */
/* estilos para la tabla de progreso y botón siguiente nivel */
.progreso-ia-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}
.progreso-ia-table th,
.progreso-ia-table td {
  border: 1px solid #ccc;
  padding: 0.5em;
}
#iak-next-btn {
  display: inline-block;
  padding: .6em 1em;
  background: #0073aa;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
  margin-bottom: 1em;
}
#iak-next-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
/* === LANDING IA MON KIDS – /primer-reto === */

.page-header {
  background: linear-gradient(90deg, #e0f7f5 0%, #ffffff 100%);
  padding: 40px 0 20px;
  text-align: center;
  border-bottom: 2px dashed #9fd5d1;
}

.titulo-reto {
  font-size: 2.3rem;
  font-weight: 800;
  color: #002b45;
  margin-bottom: 0.5rem;
}

.subtitulo-reto {
  font-size: 1.2rem;
  color: #555;
}

/* === HERO IA MON KIDS AJUSTADO === */
.hero-iamonkids {
  background: linear-gradient(135deg, #d1f2f0 0%, #fef9f7 100%);
  padding: 80px 20px;
  border-radius: 20px;
  margin-bottom: 48px;
}

.hero-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: auto;
}

.hero-texto {
  flex: 1 1 50%;
  min-width: 300px;
  max-width: 550px;
}

.hero-texto h1 {
  font-size: 46px;
  line-height: 1.2;
  color: #0a2540;
  font-weight: 800;
  margin-bottom: 20px;
}

.hero-texto p {
  font-size: 20px;
  color: #444;
  margin-bottom: 30px;
}

.cta-boton {
  background-color: #f48888;
  color: white;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.cta-boton:hover {
  background-color: #e06666;
  transform: scale(1.05);
}
/* === HERO IA MON KIDS (clases reales) === */
section.hero-kids {
  background: linear-gradient(135deg, #d1f2f0 0%, #fef9f7 100%);
  padding: 80px 20px;
  border-radius: 20px;
  margin-bottom: 40px;
}

section.hero-kids .hero-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

section.hero-kids .hero-texto {
  flex: 1 1 45%;
  min-width: 320px;
  max-width: 560px;
}

section.hero-kids .hero-texto h2 {
  font-size: 46px;
  line-height: 1.2;
  color: #0a2540;
  font-weight: 800;
  margin-bottom: 20px;
}

section.hero-kids .hero-texto p {
  font-size: 20px;
  color: #444;
  margin-bottom: 30px;
}

section.hero-kids .boton-empezar {
  background-color: #f48888;
  color: #fff;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: transform .2s ease, background-color .2s ease;
}
section.hero-kids .boton-empezar:hover { background-color: #e06666; transform: scale(1.05); }

/* Columna de la imagen */
section.hero-kids .hero-robot img {
  width: 100%;
  max-width: 600px; /* 🔧 equilibrio entre impacto y proporción */
  height: auto;
  display: block;
  margin: auto;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.05));
}


/* 🔥 Tamaño grande de la imagen */
section.hero-kids .hero-robot img {
  width: 100%;
  max-width: 820px;   /* súbelo a 900–1000px si quieres aún más grande */
  height: auto;
  display: block;
  /* opcional: un poco de glow para destacar en el degradado */
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.08));
}

/* Responsive */
@media (max-width: 992px) {
  section.hero-kids .hero-robot img { max-width: 720px; }
}
@media (max-width: 768px) {
  section.hero-kids .hero-robot img {
    max-width: 92%;
  }
}



/* === ¿Qué es IA MON KIDS? === */
.info-kids {
  padding: 60px 20px;
  text-align: center;
}

.info-kids h2 {
  font-size: 32px;
  font-weight: 800;
  color: #0a2540;
  margin-bottom: 40px;
}

.tarjetas-kids {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1000px;
  margin: auto;
}

.tarjeta-kid {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 18px;
  width: 220px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
}

.tarjeta-kid:hover {
  transform: scale(1.03);
}

.tarjeta-kid img {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}

.tarjeta-kid p {
  font-size: 16px;
  color: #444;
  font-weight: 500;
  line-height: 1.4;
}
/* === BLOQUE RETO AVATAR === */
.bloque-reto {
  background: #fff5e6; /* Fondo amarillo suave */
  padding: 60px 20px;
  border-radius: 20px;
  margin-top: 40px;
}

.contenido-reto {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: auto;
}

.texto-reto {
  flex: 1 1 50%;
  min-width: 300px;
}

.texto-reto h2 {
  font-size: 30px;
  color: #0a2540;
  font-weight: 800;
  margin-bottom: 20px;
}

.texto-reto h2 span {
  color: #f48888;
  font-weight: 900;
}

.texto-reto p {
  font-size: 18px;
  color: #444;
  margin-bottom: 20px;
}

.texto-reto ol {
  list-style: decimal inside;
  padding-left: 0;
  margin: 0;
}

.texto-reto ol li {
  font-size: 17px;
  margin-bottom: 10px;
  color: #333;
}

.imagen-reto img {
  max-width: 280px;
  height: auto;
  display: block;
  margin: auto;
}
/* === BLOQUE TESTIMONIO === */
.bloque-testimonio {
  background-color: #fef4f6;
  padding: 2rem;
  border-radius: 20px;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.artbot-img {
  width: 120px;
  height: auto;
  flex-shrink: 0;
}

.bloque-texto {
  max-width: 600px;
}

.testimonio-cita {
  font-size: 1.1rem;
  font-style: italic;
  color: #444;
  margin: 0;
}

.testimonio-autor {
  font-weight: bold;
  margin-top: 0.5rem;
}
/* === BLOQUE FORMULARIO === */
.registro-ia-mon {
  background: linear-gradient(to bottom, #eafafc 0%, #ffffff 100%);
  padding: 4rem 1rem;
  display: flex;
  justify-content: center;
}

.contenedor-registro {
  background-color: #e3f2fd;
  border-radius: 16px;
  padding: 3rem 2rem;
  max-width: 700px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
}

.contenedor-registro h2,
.contenedor-registro h3 {
  font-family: 'Montserrat', sans-serif;
  color: #0d294d;
  margin-bottom: 1rem;
}

.contenedor-registro h2 {
  font-size: 1.8rem;
}

.contenedor-registro h3 {
  font-size: 1.6rem;
  font-weight: 700;
}

.contenedor-registro p {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 2rem;
}

.boton-registro {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #00a9e0;
  color: white;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.boton-registro:hover {
  background-color: #007bb5;
}


/* === BLOQUE REGISTRO === */
.bloque-registro {
  background: linear-gradient(to bottom right, #eaf9f9, #fefaf7);
  border-radius: 12px;
  padding: 40px 20px;
  max-width: 900px;
  margin: 40px auto;
  text-align: left;
}

.bloque-registro h3 {
  font-size: 1.6rem;
  color: #01243a;
  font-weight: 800;
  margin-bottom: 15px;
}

.bloque-registro p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
}

.bloque-registro a {
  display: inline-block;
  color: #01243a;
  font-weight: bold;
  text-decoration: underline;
  font-size: 1.05rem;
}
/* H1 oculto para SEO */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* PAGINA INICIO Hero IA MON KIDS */
.hero-kids {
  background: linear-gradient(120deg, #9fd5d1 0%, #f48888 100%);
  padding: 6rem 2rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hero-content {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
}

.hero-texto h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-family: 'Montserrat', sans-serif;
}

.hero-texto p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 2rem;
  font-family: 'Lato', sans-serif;
}

.boton-empezar {
  background-color: #ffffff;
  color: #333;
  font-weight: bold;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-size: 1.1rem;
  text-decoration: none;
  transition: transform 0.3s ease;
  display: inline-block;
}

.boton-empezar:hover {
  transform: scale(1.05);
  background-color: #ffe0e0;
}

.hero-robot img {
  width: 420px;
  max-width: 100%;
  margin-bottom: 2rem;
  animation: float 3s ease-in-out infinite, fadeIn 1.2s ease-in-out;
  filter: drop-shadow(0 0 8px rgba(0, 174, 255, 0.4)) drop-shadow(0 0 15px rgba(255, 188, 255, 0.3));
}



@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Responsive para tablet y PC */
@media(min-width: 768px) {
  .hero-content {
    flex-direction: row;
    text-align: left;
  }

  .hero-texto {
    flex: 1;
    padding-right: 2rem;
  }

  .hero-robot {
    flex: 1;
    display: flex;
    justify-content: center;
  }
}

.que-es-iamonkids {
  background-color: #fff;
  padding: 5rem 2rem;
  text-align: center;
}

.que-es-iamonkids h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.3rem;
  color: #222;
  margin-bottom: 1rem;
}

.que-es-iamonkids .intro {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 3rem;
  font-family: 'Lato', sans-serif;
  color: #444;
}

/* Grid 3 columnas */
.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* Tarjetas */
.beneficio {
  background: #fefefe;
  border: 2px solid #9fd5d1;
  border-radius: 30px;
  padding: 2rem 1rem;
  box-shadow: 0 5px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeInUp 0.8s ease-in-out both;
}

/* Animación de entrada */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Delay en cascada */
.beneficio:nth-child(1) { animation-delay: 0.1s; }
.beneficio:nth-child(2) { animation-delay: 0.2s; }
.beneficio:nth-child(3) { animation-delay: 0.3s; }
.beneficio:nth-child(4) { animation-delay: 0.4s; }
.beneficio:nth-child(5) { animation-delay: 0.5s; }
.beneficio:nth-child(6) { animation-delay: 0.6s; }

/* Hover mágico */
.beneficio:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 174, 255, 0.15);
}

/* Icono */
.beneficio img {
  width: 70px;
  height: auto;
  margin-bottom: 1rem;
}

/* Texto */
.beneficio p {
  font-size: 1rem;
  color: #222;
  font-weight: bold;
  margin: 0;
  text-align: center;
  font-family: 'Lato', sans-serif;
}

/* Responsive tablet: 2 columnas */
@media (max-width: 768px) {
  .beneficios-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Móvil: 1 columna */
@media (max-width: 480px) {
  .beneficios-grid {
    grid-template-columns: 1fr;
  }
}
.como-funciona {
  background-color: #f9f9f9;
  padding: 5rem 2rem;
  text-align: center;
}

.como-funciona h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.3rem;
  color: #222;
  margin-bottom: 1rem;
}

.como-funciona .intro {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 3rem;
  font-family: 'Lato', sans-serif;
  color: #444;
}

.pasos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.paso {
  background: #fff;
  border: 2px solid #f48888;
  border-radius: 20px;
  padding: 2rem 1rem;
  box-shadow: 0 5px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInUp 0.9s ease both;
}

.paso:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(244, 136, 136, 0.2);
}

.paso img {
  width: 64px;
  margin-bottom: 1rem;
}

.paso h3 {
  font-size: 1.1rem;
  font-family: 'Montserrat', sans-serif;
  color: #333;
  margin-bottom: 0.5rem;
}

.paso p {
  font-size: 0.95rem;
  color: #555;
  font-family: 'Lato', sans-serif;
}

/* Animación de entrada */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cascada animada */
.paso:nth-child(1) { animation-delay: 0.1s; }
.paso:nth-child(2) { animation-delay: 0.2s; }
.paso:nth-child(3) { animation-delay: 0.3s; }
.paso:nth-child(4) { animation-delay: 0.4s; }

.reto-destacado {
  background: linear-gradient(120deg, #fef6f6, #ffffff);
  padding: 5rem 2rem;
  text-align: center;
}

.reto-destacado h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.3rem;
  color: #333;
  margin-bottom: 2rem;
}

.reto-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.reto-texto {
  flex: 1;
  font-family: 'Lato', sans-serif;
  color: #444;
  max-width: 500px;
}

.reto-texto p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.boton-reto {
  background-color: #f48888;
  color: white;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: bold;
  font-size: 1.1rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.boton-reto:hover {
  background-color: #e17272;
}

.reto-imagen {
  flex: 1;
}

.reto-imagen img {
  width: 260px;
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (min-width: 768px) {
  .reto-contenido {
    flex-direction: row;
    align-items: center;
  }

  .reto-texto {
    text-align: left;
  }
}
.que-aprenderan {
  background-color: #fff;
  padding: 5rem 2rem;
  text-align: center;
}

.que-aprenderan h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.3rem;
  color: #222;
  margin-bottom: 1rem;
}

.que-aprenderan .intro {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 3rem;
  font-family: 'Lato', sans-serif;
  color: #444;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.skill {
  background: #f8f8f8;
  border: 2px solid #9fd5d1;
  border-radius: 20px;
  padding: 2rem 1rem;
  box-shadow: 0 5px 10px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
  animation: fadeInUp 0.9s ease both;
}

.skill:hover {
  transform: translateY(-5px);
}

.skill img {
  width: 60px;
  margin-bottom: 1rem;
}

.skill p {
  font-size: 1rem;
  font-weight: bold;
  color: #222;
  font-family: 'Lato', sans-serif;
  text-align: center;
}

/* Animación en cascada opcional */
.skill:nth-child(1) { animation-delay: 0.1s; }
.skill:nth-child(2) { animation-delay: 0.2s; }
.skill:nth-child(3) { animation-delay: 0.3s; }
.skill:nth-child(4) { animation-delay: 0.4s; }
.skill:nth-child(5) { animation-delay: 0.5s; }
.skill:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive: 2 columnas en tablet */
@media (max-width: 768px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Móvil: 1 columna */
@media (max-width: 480px) {
  .skills-grid {
    grid-template-columns: 1fr;
  }
}
.beneficios-familia {
  background-color: #fefefe;
  padding: 5rem 2rem;
  text-align: center;
}

.beneficios-familia h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.3rem;
  color: #222;
  margin-bottom: 1rem;
}

.beneficios-familia .intro {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 3rem;
  font-family: 'Lato', sans-serif;
  color: #444;
}

.familia-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.item-familia {
  background: #ffffff;
  border: 2px solid #f48888;
  border-radius: 25px;
  padding: 2rem 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
  animation: fadeInUp 0.9s ease both;
}

.item-familia:hover {
  transform: translateY(-5px);
}

.item-familia img {
  width: 60px;
  margin-bottom: 1rem;
}

.item-familia p {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  font-family: 'Lato', sans-serif;
  text-align: center;
}

/* Animación de entrada */
.item-familia:nth-child(1) { animation-delay: 0.1s; }
.item-familia:nth-child(2) { animation-delay: 0.2s; }
.item-familia:nth-child(3) { animation-delay: 0.3s; }
.item-familia:nth-child(4) { animation-delay: 0.4s; }
.item-familia:nth-child(5) { animation-delay: 0.5s; }
.item-familia:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .familia-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .familia-grid {
    grid-template-columns: 1fr;
  }
}
.quien-hay-detras {
  background-color: #f9f9f9;
  padding: 5rem 2rem;
  text-align: center;
}

.quien-hay-detras h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.3rem;
  color: #222;
  margin-bottom: 2rem;
}

.perfil-fundadora {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.bio-foto img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.bio-texto {
  font-family: 'Lato', sans-serif;
  font-size: 1.05rem;
  color: #444;
  max-width: 600px;
  text-align: left;
}

.bio-texto strong {
  color: #f48888;
  font-weight: 700;
}

/* Responsive: lado a lado en desktop */
@media (min-width: 768px) {
  .perfil-fundadora {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .bio-texto {
    padding-left: 2rem;
  }
}
.llamada-accion {
  background: linear-gradient(120deg, #9fd5d1, #f48888);
  padding: 5rem 2rem;
  text-align: center;
  color: white;
}

.llamada-accion h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.llamada-accion .subtexto {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 2rem;
  font-family: 'Lato', sans-serif;
}

.boton-accion {
  background-color: #ffffff;
  color: #333;
  font-weight: bold;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  font-size: 1.1rem;
  text-decoration: none;
  transition: transform 0.3s ease, background-color 0.3s ease;
  display: inline-block;
}

.boton-accion:hover {
  transform: scale(1.05);
  background-color: #ffe0e0;
}
.nota-aclaracion {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #fff;
  opacity: 0.85;
  font-family: 'Lato', sans-serif;
}
/* === Estilos globales y de progresión === */
.progreso-ia-table,
.progreso-ia-table th,
.progreso-ia-table td {
  border-collapse: collapse;
  margin: 1em 0;
}
.progreso-ia-table th,
.progreso-ia-table td {
  border: 1px solid #ccc;
  padding: 0.5em;
}

/* Botón siguiente IA */
#iak-next-btn {
  display: inline-block;
  padding: 0.6em 1em;
  background: #0073aa;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
  margin-bottom: 1em;
}
#iak-next-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === LANDING IA MON KIDS – primer reto === */
.page-header {
  background: linear-gradient(90deg, #e0f7f5 0%, #ffffff 100%);
  padding: 40px 20px;
  text-align: center;
  border-bottom: 2px dashed #9fd5d1;
}
.titulo-reto {
  font-size: 2.3rem;
  font-weight: 800;
  color: #002b45;
  margin-bottom: 0.5rem;
}
.subtitulo-reto {
  font-size: 1.2rem;
  color: #555;
}

/* === HERO IA MON KIDS AJUSTADO === */
.hero-iamonkids {
  background: linear-gradient(135deg, #d1f2f0 0%, #fef9f7 100%);
  padding: 80px 20px;
  border-radius: 20px;
  margin-bottom: 48px;
}
.hero-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.hero-content img {
  max-width: 45%;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.hero-text {
  max-width: 50%;
}
.hero-text h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.hero-text p {
  font-size: 1rem;
  line-height: 1.6;
}

/* === Evita cualquier scroll horizontal en toda la página === */
html, body {
  overflow-x: hidden;
}

/* === Contenedor Botpress Webchat === */
.webchat-box {
  position: relative;       /* imprescindible para que el iframe se ajuste */
  width: 100%;
  max-width: 900px;
  height: 80vh;
  min-height: 500px;
  margin: 2rem auto;        /* separación arriba/abajo + centrado */
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  overflow: hidden;         /* recorta TODO lo que sobresalga */
  box-sizing: border-box;
}

/* === Forzar al iframe interno a ajustarse EXACTAMENTE === */
.webchat-box iframe {
  position: absolute;       /* ocupa TODO el .webchat-box */
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  box-sizing: border-box;
}

/* ===== DEMO Mundos IA ===== */
:root{
  --brand-aqua:#9fd5d1;
  --brand-rose:#f48888;
  --ink:#1f2937;         /* gris oscuro legible */
  --muted:#6b7280;       /* gris medio */
  --card:#ffffff;
  --shadow:0 12px 28px rgba(0,0,0,.08);
}

.oculto{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

.mundos-demo{padding:3.5rem 1.25rem;max-width:1200px;margin:0 auto;}

.hero-mundos{
  background: linear-gradient(135deg, var(--brand-aqua) 0%, #c9ece9 60%, #ffffff 100%);
  border-radius:28px; padding:2.5rem; text-align:center; box-shadow: var(--shadow);
}
.hero-mundos h2{font-size:2.1rem; margin:0 0 .5rem; color:var(--ink);}
.hero-mundos p{color:var(--muted); font-size:1.1rem; margin:0 0 1.25rem;}

.btn{
  display:inline-block; padding:.9rem 1.4rem; border-radius:999px; text-decoration:none; font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.08);}
.btn-primary{background:#5b21b6; color:#fff;}      /* lila botones menú */
.btn-secondary{background:var(--brand-rose); color:#fff;}

.mundos-grid{
  margin:2.5rem auto 0; display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}

.mundo-card{
  background:var(--card); border-radius:22px; padding:1.25rem; box-shadow:var(--shadow);
  text-align:center; position:relative; transition:transform .2s ease, box-shadow .2s ease;
  text-decoration:none; color:var(--ink); min-height:170px; display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.mundo-card:hover{transform:translateY(-3px); box-shadow:0 16px 30px rgba(0,0,0,.12);}
.mundo-card h3{margin:.35rem 0 .25rem; font-size:1.15rem;}
.mundo-icon{font-size:2rem;}

.mundo-card.unlocked{outline:3px solid var(--brand-aqua);}
.mundo-card.unlocked .tag{background:var(--brand-aqua); color:#0f172a;}

.mundo-card.locked{filter:saturate(.2) brightness(.96);}
.mundo-card.locked .tag{background:#e5e7eb; color:#6b7280;}
.mundo-card.locked::after{
  content:attr(data-tip);
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  background:#111827; color:#fff; font-size:.75rem; padding:.35rem .6rem; border-radius:10px; opacity:0;
  pointer-events:none; transition:opacity .2s ease;
}
.mundo-card.locked:hover::after{opacity:.95;}

.tag{
  margin-top:.35rem; display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.78rem; font-weight:700;
}
.tag-locked{border:1px dashed #cbd5e1;}

/* CTA final */
.cta-mundos{
  margin:3rem 0 0; text-align:center; background:#fdf2f2; border:2px dashed var(--brand-rose);
  padding:1.75rem; border-radius:20px;
}
.cta-mundos h3{margin:0 0 .4rem;}
.cta-mundos p{margin:0 0 .9rem; color:var(--muted);}

/* HERO dos columnas */
.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.hero-text {
  flex: 1 1 300px;
  text-align: left;
}

.hero-img {
  flex: 1 1 280px;
  text-align: center;
}

.hero-img img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Ajuste para móviles */
@media (max-width: 768px) {
  .hero-text { text-align: center; }
  .hero-text a { margin-top: 1rem; display: inline-block; }
}

/* Avatar del Monix dentro de las tarjetas */
.monix-avatar {
  max-height: 200px;
  width: auto;
  margin-top: 0.8rem;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
/* === METODO IA MON KIDS – Estilos personalizados para el banner de portada === */
.banner-iamon {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
}

.banner-img-container {
  position: relative;
  width: 100%;
  height: auto;
}

.banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.banner-boton-wrapper {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.boton-banner {
  background-color: #6c63ff;
  color: white;
  font-weight: bold;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  transition: all 0.3s ease;
}

.boton-banner:hover {
  background: linear-gradient(90deg, #6c63ff, #8f77ff);
  transform: scale(1.05);
}

/* Ocultar h1 y h2 visualmente pero mantener para SEO */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
/* === Sección ¿Qué es IA MON Kids? === */
.que-es-iamon {
  background-color: #f9f9ff;
  padding: 4rem 2rem;
  display: flex;
  justify-content: center;
}

.contenedor-quees {
  max-width: 900px;
  text-align: center;
  color: #333;
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.7;
  font-size: 1.15rem;
}

.contenedor-quees h2 {
  font-size: 2.2rem;
  color: #6c63ff;
  margin-bottom: 2rem;
}

.contenedor-quees p {
  margin-bottom: 1.5rem;
}
.bloque-para-quien {
  background-color: #fdfdfd;
  padding: 4rem 2rem;
  display: flex;
  justify-content: center;
}

.contenido-para-quien {
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  text-align: center;
}

.img-para-quien {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}

.texto-para-quien h3 {
  font-size: 2rem;
  color: #512da8;
  margin-bottom: 1rem;
}

.texto-para-quien p {
  font-size: 1.15rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: 1rem;
}

@media (min-width: 900px) {
  .contenido-para-quien {
    flex-direction: row;
    text-align: left;
  }

  .img-para-quien {
    width: 50%;
  }

  .texto-para-quien {
    width: 50%;
    padding-left: 2rem;
  }
}

.oculto {
  display: none;
}
.bloque-como-funciona {
  background-color: #fffaf4;
  padding: 4rem 2rem;
  display: flex;
  justify-content: center;
}

.contenido-como-funciona {
  max-width: 900px;
  text-align: center;
}

.contenido-como-funciona h3 {
  font-size: 2rem;
  color: #d15d00;
  margin-bottom: 1.5rem;
}

.contenido-como-funciona p {
  font-size: 1.15rem;
  color: #333;
  line-height: 1.75;
  margin-bottom: 1.2rem;
}

@media (min-width: 900px) {
  .contenido-como-funciona {
    text-align: left;
  }
}

/* === Bloque IA MON Kids - Diseño limpio y alineado === */
.bloque-funciona-pulido {
  padding: 4rem 1rem;
  background-color: #ffffff;
  max-width: 1300px;
  margin: auto;
}

.contenedor-superior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-start;
}

.texto {
  flex: 1 1 55%;
}

.texto h2 {
  font-size: 2rem;
  color: #d46f00;
  margin-bottom: 1.2rem;
}

.texto h2 span {
  color: #000;
}

.texto p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 1rem;
}

.imagen-derecha {
  flex: 1 1 40%;
  text-align: center;
}

.imagen-derecha img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Imagen inferior ilustrada */
.imagen-inferior {
  margin-top: 2.5rem;
  background-color: #fff3c4;
  padding: 2rem;
  border-radius: 12px;
  display: flex;
  justify-content: center;
}

.imagen-inferior img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Responsive */
@media (max-width: 768px) {
  .contenedor-superior {
    flex-direction: column;
    align-items: center;
  }

  .texto, .imagen-derecha {
    flex: 1 1 100%;
    text-align: left;
  }

  .texto h2 {
    font-size: 1.6rem;
  }

  .texto p {
    font-size: 1rem;
  }

  .imagen-inferior img {
    width: 90%;
  }
}
/* === Bloque: Qué se aprende de verdad === */

.bloque-aprendizaje {
  padding: 4rem 1rem;
  background-color: #f6f6ff;
  max-width: 1300px;
  margin: auto;
}

.contenedor-aprendizaje {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.texto-aprendizaje {
  flex: 1 1 55%;
}

.texto-aprendizaje h2 {
  font-size: 2rem;
  color: #000;
  margin-bottom: 1.2rem;
}

.texto-aprendizaje h2 span {
  color: #6c63ff;
}

.texto-aprendizaje p {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.texto-aprendizaje ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.texto-aprendizaje li {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
  color: #444;
}

.imagen-aprendizaje {
  flex: 1 1 40%;
  text-align: center;
}

.imagen-aprendizaje img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .contenedor-aprendizaje {
    flex-direction: column;
  }

  .texto-aprendizaje, .imagen-aprendizaje {
    flex: 1 1 100%;
  }

  .texto-aprendizaje h2 {
    font-size: 1.6rem;
  }
}
/* === Bloque: Presentación Mundos IA === */

.bloque-mundosia {
  background: linear-gradient(to bottom, #ffffff, #f2f0ff);
  padding: 4rem 1rem;
  text-align: center;
}

.contenido-mundosia {
  max-width: 900px;
  margin: 0 auto;
  color: #333;
}

.bloque-mundosia h2 {
  font-size: 2.2rem;
  color: #6c63ff;
  margin-bottom: 1.5rem;
}

.bloque-mundosia p {
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

.btn-mundosia {
  display: inline-block;
  margin-top: 2rem;
  background-color: #6c63ff;
  color: white;
  padding: 0.9rem 1.8rem;
  font-size: 1.05rem;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s ease;
}

.btn-mundosia:hover {
  background-color: #574dd4;
}
/* === Bloque "Lo que se lleva a casa" === */
.bloque-proyecto-final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  background: #fff6e0;
  padding: 4rem 2rem;
  border-radius: 20px;
  margin: 3rem auto;
  max-width: 1200px;
}

.contenido-proyecto {
  flex: 1 1 400px;
  min-width: 300px;
}

.contenido-proyecto h2 {
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
  color: #f08c00;
}

.contenido-proyecto p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  color: #333;
}

.imagen-proyecto {
  flex: 1 1 400px;
  min-width: 300px;
  max-width: 500px;
}

.imagen-proyecto img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
/* === Bloque: Confianza en Ana === */

.bloque-confianza-ana {
  background-color: #f5f5ff;
  padding: 4rem 1.5rem;
}

.contenedor-confianza {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}

.texto-confianza {
  flex: 1 1 60%;
}

.texto-confianza h2 {
  font-size: 2rem;
  color: #6c63ff;
  margin-bottom: 1.5rem;
}

.texto-confianza p {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.texto-confianza .firma {
  margin-top: 2rem;
  font-weight: bold;
  font-style: italic;
  color: #555;
}

.foto-ana {
  flex: 1 1 35%;
  text-align: center;
}

.foto-ana img {
  width: 100%;
  max-width: 300px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .contenedor-confianza {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .texto-confianza, .foto-ana {
    flex: 1 1 100%;
  }

  .texto-confianza h2 {
    font-size: 1.6rem;
  }

  .texto-confianza p {
    font-size: 1rem;
  }
}
.mundo-familia {
  background: #fef9f3;
  padding: 4rem 2rem;
  border-radius: 16px;
  margin-top: 3rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.familia-contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;
  max-width: 1200px;
  margin: auto;
}

.familia-imagen {
  flex: 1 1 400px;
  min-width: 280px;
}

.familia-imagen img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.familia-texto {
  flex: 1 1 500px;
  min-width: 300px;
}

.familia-texto h2 {
  font-size: 1.9rem;
  color: #e27c20;
  margin-bottom: 1rem;
}

.familia-texto span {
  font-size: 1.5rem;
  margin-right: 0.4rem;
}

.familia-texto p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  color: #333;
}

.familia-texto strong {
  color: #222;
}
.bloque-final-cta {
  background: linear-gradient(135deg, #fef6ec, #fff);
  padding: 4rem 2rem;
  text-align: center;
  border-top: 4px solid #ffd88d;
  border-radius: 24px;
  margin-top: 4rem;
}

.cta-contenido {
  max-width: 800px;
  margin: 0 auto;
}

.bloque-final-cta h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #e27c20;
}

.bloque-final-cta p {
  font-size: 1.15rem;
  color: #333;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.bloque-final-cta .btn-principal {
  background-color: #ff9900;
  color: #fff;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  display: inline-block;
}

.bloque-final-cta .btn-principal:hover {
  background-color: #e27c20;
}
/***** === ASTRA · MENÚ MÓVIL === *****/
.ast-mobile-header-wrap .main-header-menu { background:#fff; }
.ast-mobile-header-wrap .main-header-menu a { font-size:18px; padding:12px; }
.ast-button-wrap .menu-toggle { color:#6c63ff; }

/***** === RESET SEGURO MÓVIL ===*****/
*{ box-sizing: border-box; }
html, body, .site, .site-content, .ast-container { max-width:100% !important; overflow-x:hidden !important; }
img{ max-width:100% !important; height:auto !important; display:block; }

/***** === .oculto (ÚNICA VERSIÓN, NO display:none) ===*****/
.oculto{
  position:absolute !important; width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important;
}

/***** === TITULARES (sin cortes raros) ===*****/
h1,h2,.entry-content h1,.entry-content h2{
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  white-space: normal !important;
}
@media (max-width:480px){
  h1,.hero-texto h1{ font-size:clamp(1.8rem,8vw,2.2rem) !important; line-height:1.15 !important; }
  h2{ font-size:clamp(1.6rem,7vw,2rem) !important; line-height:1.15 !important; }
}
/* Caso que se resistía */
.beneficios-familia h2{
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/***** === HÉROES · columna en móvil y sin mínimos problemáticos ===*****/
@media (max-width:768px){
  section.hero-kids .hero-content,
  .hero-iamonkids .hero-content,
  .mundos-demo .hero-mundos .hero-content,
  .hero-content{ /* fallback */
    flex-direction: column !important;
    align-items: center !important;
    gap:16px !important;
    width:100% !important;
  }
  section.hero-kids .hero-texto,
  .hero-iamonkids .hero-texto,
  .mundos-demo .hero-mundos .hero-text,
  section.hero-kids .hero-robot,
  .hero-iamonkids .hero-img,
  .hero-text, .hero-img{
    min-width:0 !important; max-width:100% !important; flex:1 1 100% !important;
  }
  section.hero-kids, .hero-iamonkids{ padding-left:16px !important; padding-right:16px !important; }
  section.hero-kids .hero-robot img, .hero-iamonkids .hero-img img{ max-width:100% !important; height:auto !important; }
}

/***** === GRIDS · sin overflow en móvil ===*****/
@media (max-width:480px){
  .pasos-grid, .beneficios-grid, .skills-grid, .familia-grid{
    grid-template-columns:1fr !important; gap:1rem !important;
  }
  .paso, .beneficio, .skill, .item-familia{
    min-width:0 !important; max-width:100% !important;
  }
}

/***** === BOTONES / IFRAMES FLUIDOS ===*****/
.boton-accion,.boton-empezar,.boton-banner,.cta-boton,.boton-registro{ max-width:100%; }
.webchat-box, .webchat-box iframe{ width:100% !important; max-width:100% !important; left:0 !important; }

/***** === PADDING SEGURO EN SECCIONES CLAVE ===*****/
@media (max-width:768px){
  .hero-iamonkids, section.hero-kids, .mundos-demo,
  .bloque-reto, .bloque-proyecto-final, .bloque-confianza-ana,
  .mundo-familia, .bloque-final-cta{
    padding-left:clamp(16px,4vw,24px) !important;
    padding-right:clamp(16px,4vw,24px) !important;
  }
}
/* MÉTODO IA MON – Banner móvil (botón debajo, sin solapar) */
@media (max-width: 768px){
  .banner-iamon{ padding: 0 16px 24px; }
  .banner-img-container{ border-radius: 14px; overflow: hidden; }
  .banner-img{ width: 100%; height: auto; display: block; }

  /* Clave: el wrapper deja de ser absolute */
  .banner-boton-wrapper{
    position: static;
    left: auto; bottom: auto; transform: none;
    text-align: center;
    margin-top: 12px;
    width: 100%;
  }
  .boton-banner{
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: .9rem 1.1rem;
    font-size: 1rem;
    border-radius: 14px;
  }
}
/* 1) BOTÓN DEL BANNER – texto bien encajado y sin corte raro */
@media (max-width: 768px){
  .banner-img-container{ position: relative; overflow: hidden; border-radius: 14px; }
  .banner-boton-wrapper{
    position: static;           /* si prefieres overlay, cambia a absolute y ajusta bottom */
    transform: none;
    width: 100%;
    text-align: center;
    margin-top: 12px;
  }
  .boton-banner{
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: .9rem 1.1rem;
    font-size: 1rem;
    line-height: 1.2;
    border-radius: 14px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;         /* mejora el reparto de líneas */
  }
}

/* 2) “LO QUE SE LLEVA A CASA” – columnas a 1, sin min-width que rompa */
@media (max-width: 768px){
  .bloque-proyecto-final{
    padding: 24px 16px;         /* respira a los lados */
    border-radius: 16px;
  }
  .contenido-proyecto,
  .imagen-proyecto{
    flex: 1 1 100% !important;
    min-width: 0 !important;    /* clave para evitar desbordes */
    max-width: 100% !important;
  }
  .contenido-proyecto h2{ font-size: 1.6rem; line-height: 1.2; }
  .contenido-proyecto p{ font-size: 1rem; line-height: 1.6; }
  .imagen-proyecto{ max-width: 520px; margin: 0 auto; }
  .imagen-proyecto img{ width: 100%; height: auto; border-radius: 14px; }
}

/* 3) “MUNDO FAMILIA” – alinea, quita mínimos y ajusta tipografías */
@media (max-width: 768px){
  .mundo-familia{ padding: 24px 16px; border-radius: 16px; }
  .familia-contenido{
    gap: 1.5rem;
    align-items: flex-start;     /* evita que el texto “suba” raro */
  }
  .familia-imagen,
  .familia-texto{
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .familia-texto h2{ font-size: 1.6rem; line-height: 1.2; }
  .familia-texto p{ font-size: 1rem; line-height: 1.7; }
}

/* Seguridad extra: cualquier bloque tipo “tarjeta grande” no desborda */
@media (max-width: 480px){
  .bloque-proyecto-final,
  .mundo-familia{
    margin-left: 16px; margin-right: 16px; /* por si el contenedor padre es full-width */
  }
}
/* ====== PRIMER RETO — mejoras de landing ====== */
.primer-reto-hero .contenedor{ max-width: 1100px; margin: 0 auto; }
.primer-reto-hero .hero-reto-wrap{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  margin-top: 12px;
}
.primer-reto-hero .bullets-valor{
  display:flex; flex-wrap:wrap; gap:.75rem 1rem; padding:0; margin:0;
}
.primer-reto-hero .bullets-valor li{
  background:#fff; color:#0a2540; border:1px solid #e5eef1; border-radius:999px;
  padding:.5rem .8rem; font-weight:600; font-size:.95rem;
}
.muestras-proyecto{ display:flex; gap:10px; margin-top:16px; }
.muestras-proyecto img{ width:100%; max-width:220px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.06); }

/* Bloque resumen del reto */
.bloque-reto{ border-radius:20px; }
.contenido-reto{ gap:32px; }
.texto-reto ol{ margin:0 0 14px 0; }
.texto-reto p{ margin-bottom: 16px; }

/* FAQs limpias */
.bloque-faqs{ padding:3rem 1rem; }
.contenedor-faq{ max-width:900px; margin:0 auto; }
.bloque-faqs details{ background:#ffffff; border:1px solid #e8ecf0; border-radius:12px; padding:12px 16px; margin:10px 0; }
.bloque-faqs summary{ cursor:pointer; font-weight:700; }

/* Responsive */
@media (max-width: 768px){
  .primer-reto-hero .hero-reto-wrap{ flex-direction:column; align-items:flex-start; }
  .primer-reto-hero .bullets-valor{ width:100%; }
  .muestras-proyecto{ overflow-x:auto; gap:12px; }
  .muestras-proyecto img{ max-width: 70%; flex: 0 0 auto; }
  .texto-reto h2{ font-size: 1.4rem; }
}
/* ===== PRIMER RETO: galería con proporción constante ===== */
/* Opción A — TODAS IGUALES (recorte suave) */
.muestras-proyecto{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.muestras-proyecto img{
  width:100%;
  height:100%;
  aspect-ratio: 3 / 4;     /* retrato vertical */
  object-fit: cover;        /* rellena sin deformar, recorta lo que sobra */
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

/* Responsive */
@media (max-width: 768px){
  .muestras-proyecto{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px){
  .muestras-proyecto{ grid-template-columns: 1fr; }
}

/* Seguridad: ninguna imagen del reto lleva alturas fijas que deformen */
.primer-reto-hero img,
.bloque-reto img,
.reto-imagen img,
.wp-block-image img{
  max-width:100%;
  height:auto;
}

/* Opción B — SIN RECORTE (si la quisieras) */
/*
.muestras-proyecto img{
  width:100%;
  height:auto;
  border-radius:12px;
  object-fit: contain;
  aspect-ratio: auto;        // respeta el original, verás alturas distintas
}
*/
/* ===== PRIMER RETO — alineación general ===== */

/* HERO: centra badges + botón y la tira de imágenes */
.primer-reto-hero { text-align: center; }
.primer-reto-hero .contenedor{ max-width:1100px; margin:0 auto; }
.primer-reto-hero .hero-reto-wrap{ justify-content:center; gap:.75rem 1rem; }
.primer-reto-hero .hero-reto-wrap .boton-empezar{
  display:inline-flex; margin:8px auto 0; align-items:center; justify-content:center;
}
.muestras-proyecto{ margin:16px auto 0; justify-content:center; }

/* BLOQUE ¿Qué hará tu hijo…? — 2 col (desk) / 1 col (móvil) y todo centrado limpio */
.bloque-reto{ padding:28px 20px; }
.bloque-reto .contenido-reto{ max-width:1100px; margin:0 auto; }
.bloque-reto .texto-reto{ max-width:640px; }
.bloque-reto .texto-reto ol{ margin-left:1.1rem; }
.bloque-reto .texto-reto .boton-accion{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:12px;
}
.bloque-reto .imagen-reto{ text-align:center; }
.bloque-reto .imagen-reto img{
  width:100%; max-width:540px; height:auto; margin:0 auto; border-radius:16px;
}

/* Desktop: dos columnas bien alineadas */
@media (min-width: 992px){
  .bloque-reto .contenido-reto{
    display:grid; grid-template-columns:1.1fr .9fr; column-gap:40px; align-items:center;
  }
}

/* Móvil: una columna y CTA centrado */
@media (max-width: 991px){
  .bloque-reto .contenido-reto{ display:block; }
  .bloque-reto .texto-reto{ margin:0 auto 18px; }
  .bloque-reto .texto-reto .boton-accion{ display:block; margin:12px auto 0; }
}

/* Galería de muestras: mismas proporciones, sin deformar */
.muestras-proyecto{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;
}
.muestras-proyecto img{
  width:100%; height:100%;
  aspect-ratio:3/4; object-fit:cover; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.06);
}
@media (max-width: 768px){ .muestras-proyecto{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 480px){ .muestras-proyecto{ grid-template-columns:1fr; } }

/* Para que el botón verde quede centrado solo en la página con ID 97 */
.page-id-97 {
  text-align: center;
}

.page-id-97 .boton-flotante-verde {
  position: static !important;   /* deja de flotar */
  display: inline-flex !important;
  margin: 20px auto !important;  /* centrado horizontal */
}
/* ===== Limitar el ancho del bloque de registro (#formulario-reto) ===== */
#formulario-reto{
  /* el fondo puede seguir a todo lo ancho; limitamos el contenido interno */
}

#formulario-reto .wp-block-group__inner-container,
#formulario-reto .ast-container,
#formulario-reto .uagb-container-inner,
#formulario-reto .container,
#formulario-reto .elementor-container,
#formulario-reto > div {               /* tu wrapper interior */
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* El FORMULARIO en sí, más estrecho y centrado */
#formulario-reto form{
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Inputs a 100% dentro de esos 520px */
#formulario-reto input,
#formulario-reto button{
  width: 100%;
  box-sizing: border-box;
}
/* ===== Apretón final: formulario estrecho sí o sí ===== */
#formulario-reto { text-align: center; }

/* Limita el ancho REAL del <form> si existe ese id */
#formulario-reto #registro-form {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Etiquetas alineadas y con el mismo ancho que los inputs */
#formulario-reto label {
  display: block;
  max-width: 520px !important;
  margin: 0 auto 6px !important;
  text-align: left;
}

/* Todos los inputs y el botón: centrados y con tope 520px */
#formulario-reto input[type="text"],
#formulario-reto input[type="email"],
#formulario-reto input[type="number"],
#formulario-reto input[type="tel"],
#formulario-reto button {
  display: block;
  width: 100%;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Un poco de aire entre campos */
#formulario-reto input { margin-bottom: 1rem !important; }

/* Por si algún bloque padre usa alignfull o columnas que estiran el contenido */
.entry-content #formulario-reto,
.entry-content .wp-block-group:has(#formulario-reto),
.entry-content .wp-block-column:has(#formulario-reto) {
  --form-container-max: 900px;
}
.entry-content .wp-block-group:has(#formulario-reto) > .wp-block-group__inner-container,
.entry-content .wp-block-column:has(#formulario-reto) > * {
  max-width: var(--form-container-max);
  margin-left: auto;
  margin-right: auto;
}

/* ===== 7 DIF (MONIX) ===== */
.m7{--c1:#10d7c6;--c2:#9a6aff;--ink:#0c2a33;--muted:#5c7180}
.m7 *{box-sizing:border-box}
.m7 .bar{
  background:linear-gradient(135deg,var(--c1),var(--c2));
  color:#fff;border-radius:14px;padding:18px 18px 12px;margin-bottom:16px
}
.m7 .top{display:grid;gap:10px;grid-template-columns:1fr 1fr auto auto}
.m7 h2{margin:0 0 10px;font-size:clamp(22px,2.6vw,30px)}
.m7 label{font-size:12px;opacity:.95;display:block;margin-bottom:6px}
.m7 .ctrl{background:#fff;border-radius:10px;padding:8px 10px;border:1px solid #e9eef0;width:100%}
.m7 .btn{background:#fff;border:0;padding:10px 14px;border-radius:12px;font-weight:700;color:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.06);cursor:pointer}
.m7 .btn.primary{color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
.m7 .btn[disabled]{opacity:.55;cursor:not-allowed}
.m7 .stat{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.22);margin-left:8px;color:#fff;font-weight:600}
.m7 .wrap{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.m7 .panel{background:#fff;border:1px solid #e9eef0;border-radius:14px;padding:12px}
.m7 .panel h3{margin:0 0 10px;font-size:18px;color:var(--ink)}
.m7 figure{position:relative;margin:0;overflow:hidden;border-radius:10px;border:1px solid #eef3f5;background:#f6fafb}
.m7 img{display:block;width:100%;height:auto}
.m7 canvas.overlay{position:absolute;left:0;top:0;pointer-events:auto}
.m7 .tags{margin-top:10px;color:var(--muted);font-size:13px}
.m7 .rank{background:#fff;border:1px solid #e9eef0;border-radius:14px;margin-top:16px}
.m7 .rank h3{margin:0;padding:14px 16px;border-bottom:1px solid #eef3f5}
.m7 table{width:100%;border-collapse:collapse}
.m7 th,.m7 td{padding:10px 12px;border-top:1px solid #eef3f5;font-size:14px}
.m7 .right{justify-self:end}
.m7 .small{font-size:12px;color:var(--muted)}
.m7 .modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;place-items:center;z-index:9999}
.m7 .modal.show{display:grid}
.m7 .modal .box{background:#fff;max-width:min(1000px,92vw);max-height:88vh;overflow:auto;border-radius:12px}
.m7 .modal header{padding:12px 14px;border-bottom:1px solid #eef3f5;display:flex;justify-content:space-between;align-items:center}
.m7 .modal .body{padding:12px}
.m7 .modal img{display:block;max-width:100%;height:auto;border-radius:8px;border:1px solid #eef3f5}
.m7 .toast{
  position:fixed;left:50%;top:20px;transform:translateX(-50%);
  background:linear-gradient(135deg,#12d6c5,#9a6aff);
  color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);
  z-index:99999;display:none;font-weight:700
}
.m7 .toast.show{display:block}

/* Estado bloqueado + POPUP */
.m7.locked .bar, .m7.locked .wrap, .m7.locked .rank{
  filter: blur(1px) brightness(0.7);
  pointer-events: none;
}
.m7 .gate{position:fixed; inset:0; z-index:99999; display:none; place-items:center; background:rgba(10,18,22,.55); backdrop-filter:blur(2px)}
.m7 .gate.show{display:grid}
.m7 .gate .card{width:min(660px,92vw); background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); padding:22px}
.m7 .gate h3{margin:0 0 8px; font-size:20px; color:var(--ink)}
.m7 .gate p{margin:0 0 14px; color:var(--muted); line-height:1.45}
.m7 .gate .row{display:flex; gap:10px; margin-top:6px}
.m7 .gate .btn{box-shadow:none}

/* Lista de imágenes dentro del popup */
.m7 .gate .list{display:grid; gap:8px; margin-top:10px}
.m7 .gate .opt{display:flex; align-items:center; justify-content:space-between; border:1px solid #e6edf0; border-radius:10px; padding:10px 12px; cursor:pointer; background:#fafcfd}
.m7 .gate .opt strong{color:var(--ink); font-weight:700}
.m7 .gate .opt small{color:var(--muted)}
.m7 .gate .opt:hover{border-color:#cfe2e7; background:#f5fbfb}
.m7 .gate .opt.active{border-color:#10d7c6; box-shadow:0 0 0 3px rgba(16,215,198,.15)}

@media (max-width:980px){
  .m7 .top{grid-template-columns:1fr 1fr}
  .m7 .wrap{grid-template-columns:1fr}
}