It looks like this is a web page, not a feed. I looked for a feed associated with this page, but couldn't find one. Please enter the address of your feed to validate.

Source: https://institutohairatelier.cl/

  1. <!DOCTYPE html>
  2. <html lang="es" class="scroll-smooth">
  3.  
  4.  <head>
  5.    <meta charset="UTF-8">
  6.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    <title>Hair Atelier – Instituto de Belleza Profesional</title>
  8.    <meta name="description" content="Formación profesional en peluquería, barbería y estética con técnicas actualizadas y práctica real.">
  9.    <meta name="keywords" content="instituto peluquería, cursos belleza, estilista profesional, colorimetría, barbería, depilación, Hair Atelier, Santiago Chile">
  10.    <meta name="author" content="Instituto Hair Atelier">
  11.    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
  12.    
  13.    <!-- Canonical URL -->
  14.    <link rel="canonical" href="https://institutohairatelier.cl/">
  15.    
  16.    <!-- Favicon -->
  17.    <link rel="icon" type="image/x-icon" href="img/favicon.ico">
  18.    <link rel="apple-touch-icon" href="img/favicon.ico">
  19.    
  20.    <!-- Web App Manifest -->
  21.    <link rel="manifest" href="manifest.json">
  22.    <meta name="theme-color" content="#C5C973">
  23.    
  24.    <!-- Preload Critical Resources -->
  25.    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
  26.    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" as="style">
  27.    <link rel="preload" href="img/Anadir_un_titulo_1.png" as="image">
  28.    
  29.    <!-- Open Graph / Facebook -->
  30.    <meta property="og:type" content="website">
  31.    <meta property="og:url" content="https://institutohairatelier.cl/">
  32.    <meta property="og:title" content="Hair Atelier – Instituto de Belleza Profesional">
  33.    <meta property="og:description" content="Formación profesional en peluquería, barbería y estética con técnicas actualizadas y práctica real. Transforma tu pasión por la belleza en una carrera exitosa.">
  34.    <meta property="og:image" content="https://institutohairatelier.cl/img/Anadir_un_titulo_1.png">
  35.    <meta property="og:image:width" content="1200">
  36.    <meta property="og:image:height" content="630">
  37.    <meta property="og:site_name" content="Instituto Hair Atelier">
  38.    <meta property="og:locale" content="es_CL">
  39.    
  40.    <!-- Twitter -->
  41.    <meta property="twitter:card" content="summary_large_image">
  42.    <meta property="twitter:url" content="https://institutohairatelier.cl/">
  43.    <meta property="twitter:title" content="Hair Atelier – Instituto de Belleza Profesional">
  44.    <meta property="twitter:description" content="Formación profesional en peluquería, barbería y estética con técnicas actualizadas y práctica real.">
  45.    <meta property="twitter:image" content="https://institutohairatelier.cl/img/Anadir_un_titulo_1.png">
  46.    
  47.    <!-- Bootstrap CSS -->
  48.    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  49.    
  50.    <!-- Font Awesome -->
  51.    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  52.    
  53.    <!-- CSS Local -->
  54.    <link rel="stylesheet" href="css/styles.css">
  55.    
  56.    <style>
  57.        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
  58.        body { font-family: 'Poppins', sans-serif; overflow-x: hidden; }
  59.        .botones-curso {
  60.            display: flex !important;
  61.            flex-direction: row !important;
  62.            flex-wrap: nowrap !important;
  63.            gap: 0.5rem;
  64.            width: 100%;
  65.            justify-content: space-between;
  66.            align-items: center;
  67.        }
  68.        .botones-curso > * {
  69.            flex: 1 1 0;
  70.            min-width: 0;
  71.            margin-bottom: 0 !important;
  72.        }
  73.        @media (max-width: 600px) {
  74.            .botones-curso {
  75.                flex-direction: row !important;
  76.                flex-wrap: nowrap !important;
  77.                gap: 0.5rem;
  78.            }
  79.            .botones-curso > * {
  80.                margin-bottom: 0 !important;
  81.            }
  82.        }
  83.        
  84.        /* Estilos básicos para asegurar compatibilidad */
  85.        .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
  86.        .text-center { text-align: center; }
  87.        .flex { display: flex; }
  88.        .items-center { align-items: center; }
  89.        .justify-between { justify-content: space-between; }
  90.        .space-x-3 > * + * { margin-left: 0.75rem; }
  91. .space-x-6 > * + * { margin-left: 1.5rem; }
  92. .hidden { display: none; }
  93. .lg\:flex { display: none; }
  94. @media (min-width: 1024px) { .lg\:flex { display: flex; } .lg\:hidden { display: none; } }
  95. .fixed { position: fixed; }
  96. .top-0 { top: 0; }
  97. .w-full { width: 100%; }
  98. .z-30 { z-index: 30; }
  99. .bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
  100. .backdrop-blur-md { backdrop-filter: blur(12px); }
  101. .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
  102. .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  103. .px-4 { padding-left: 1rem; padding-right: 1rem; }
  104. .h-12 { height: 3rem; }
  105. .md\:h-16 { height: 3rem; }
  106. @media (min-width: 768px) { .md\:h-16 { height: 4rem; } }
  107. .font-bold { font-weight: 700; }
  108. .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  109. .md\:text-2xl { font-size: 1.25rem; line-height: 1.75rem; }
  110. @media (min-width: 768px) { .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; } }
  111. .text-gray-800 { color: #1f2937; }
  112. .sm\:block { display: none; }
  113. @media (min-width: 640px) { .sm\:block { display: block; } }
  114. .p-2 { padding: 0.5rem; }
  115.        
  116.        .hero-bg {
  117.            background: linear-gradient(135deg, #f4f4f4 0%, #e5e5e5 100%);
  118.            min-height: 100vh;
  119.            display: flex;
  120.            align-items: center;
  121.            justify-content: center;
  122.            padding-top: 5rem;
  123.        }
  124.        .card-hover {
  125.            transition: all .4s cubic-bezier(.175,.885,.32,1.275);
  126.        }
  127.        .card-hover:hover {
  128.            transform: translateY(-8px) scale(1.02);
  129.            box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  130.        }
  131.        .btn-primary {
  132.            background: linear-gradient(135deg,#ec4899 0%,#d946ef 100%);
  133.            color: white;
  134.            padding: 0.75rem 2rem;
  135.            border-radius: 9999px;
  136.            text-decoration: none;
  137.            display: inline-block;
  138.            font-weight: 600;
  139.            transition: all 0.3s ease;
  140.            border: none;
  141.            cursor: pointer;
  142.        }
  143.        .btn-primary:hover {
  144.            background: linear-gradient(135deg,#db2777 0%,#c026d3 100%);
  145.            transform: scale(1.05);
  146.            color: white;
  147.            text-decoration: none;
  148.        }
  149.        .grad-border {
  150.            background: linear-gradient(135deg,#ec4899,#d946ef) padding-box,
  151.                        linear-gradient(135deg,#ec4899,#d946ef) border-box;
  152.            border: 2px solid transparent;
  153.        }
  154.        .fade-in {
  155.            opacity: 0;
  156.            transform: translateY(30px);
  157.            transition: all .6s ease;
  158.        }
  159.        .fade-in.visible {
  160.            opacity: 1;
  161.            transform: translateY(0);
  162.        }
  163.        .counter {
  164.            font-variant-numeric: tabular-nums;
  165.        }
  166.        .nav-link {
  167.            position: relative;
  168.            overflow: hidden;
  169.            padding: 0.5rem 0.75rem;
  170.            font-size: 0.875rem;
  171.            font-weight: 500;
  172.            color: #4b5563;
  173.            text-decoration: none;
  174.            transition: color 0.3s ease;
  175.        }
  176.        .nav-link:hover {
  177.            color: #ec4899;
  178.            text-decoration: none;
  179.        }
  180.        .nav-link::after {
  181.            content: '';
  182.            position: absolute;
  183.            bottom: 0;
  184.            left: 0;
  185.            width: 0;
  186.            height: 2px;
  187.            background: #ec4899;
  188.            transition: width .3s ease;
  189.        }
  190.        .nav-link:hover::after {
  191.            width: 100%;
  192.        }
  193.        .mobile-menu {
  194.            transform: translateX(100%);
  195.            transition: transform .3s ease;
  196.            display: none; /* Ocultar completamente el menú móvil */
  197.        }
  198.        .mobile-menu.open {
  199.            transform: translateX(0);
  200.            display: none; /* Mantenerlo oculto incluso cuando esté "abierto" */
  201.        }
  202.  
  203.        /* Fix para sección Nosotros - Layout horizontal */
  204.        #nosotros .grid {
  205.            display: grid !important;
  206.            grid-template-columns: 1fr;
  207.            gap: 3rem;
  208.        }
  209.        
  210.        @media (min-width: 1024px) {
  211.            #nosotros .grid {
  212.                grid-template-columns: 1fr 1fr !important;
  213.                gap: 3rem;
  214.                align-items: center;
  215.            }
  216.        }
  217.        
  218.        #nosotros .grid > div {
  219.            width: 100%;
  220.        }
  221.        
  222.        #nosotros img {
  223.            width: 100%;
  224.            max-width: 100%;
  225.            height: auto;
  226.            border-radius: 1rem;
  227.            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  228.        }
  229.  
  230.        /* Fix para sección Counters - Layout horizontal */
  231.        .counters-section .grid {
  232.            display: grid !important;
  233.            grid-template-columns: repeat(2, 1fr);
  234.            gap: 2rem;
  235.            text-align: center;
  236.        }
  237.        
  238.        @media (min-width: 768px) {
  239.            .counters-section .grid {
  240.                grid-template-columns: repeat(4, 1fr) !important;
  241.            }
  242.        }
  243.        
  244.        .counters-section .grid > div {
  245.            display: flex;
  246.            flex-direction: column;
  247.            align-items: center;
  248.            justify-content: center;
  249.        }
  250.  
  251.        /* Fix para sección Ofrecemos - Layout horizontal */
  252.        .ofrecemos-section .grid {
  253.            display: grid !important;
  254.            grid-template-columns: 1fr;
  255.            gap: 2rem;
  256.        }
  257.        
  258.        @media (min-width: 768px) {
  259.            .ofrecemos-section .grid {
  260.                grid-template-columns: repeat(3, 1fr) !important;
  261.                gap: 2rem;
  262.            }
  263.        }
  264.        
  265.        .ofrecemos-section .grid > div {
  266.            display: flex;
  267.            flex-direction: column;
  268.            align-items: center;
  269.            text-align: center;
  270.        }
  271.  
  272.        /* Footer Styles from blog.html */
  273.        .footer {
  274.            background-color: #2c3e50;
  275.            color: white;
  276.            padding: 3rem 0 1rem;
  277.            margin-top: 4rem;
  278.        }
  279.  
  280.        .footer h5, .footer h6 {
  281.            color: #C5C973;
  282.            margin-bottom: 1rem;
  283.        }
  284.  
  285.        .footer a {
  286.            color: #adb5bd;
  287.            text-decoration: none;
  288.            transition: color 0.3s ease;
  289.        }
  290.  
  291.        .footer a:hover {
  292.            color: #C5C973;
  293.        }
  294.  
  295.        /* Developer Credit Animation */
  296.        .developer-credit {
  297.            background: linear-gradient(135deg, #C5C973 0%, #a8ac5a 100%);
  298.            color: white;
  299.            padding: 8px 16px;
  300.            border-radius: 25px;
  301.            font-weight: 600;
  302.            display: inline-block;
  303.            animation: bounce 2s infinite;
  304.            box-shadow: 0 4px 15px rgba(197, 201, 115, 0.3);
  305.            border: 2px solid rgba(255, 255, 255, 0.2);
  306.        }
  307.  
  308.        @keyframes bounce {
  309.            0%, 20%, 50%, 80%, 100% {
  310.                transform: translateY(0);
  311.            }
  312.            40% {
  313.                transform: translateY(-10px);
  314.            }
  315.            60% {
  316.                transform: translateY(-5px);
  317.            }
  318.        }
  319.        
  320.        /* Estilos adicionales para asegurar diseño */
  321.        .grid { display: grid; }
  322.        .gap-8 { gap: 2rem; }
  323.        .gap-24 { gap: 6rem; }
  324.        .md\:grid-cols-2 { grid-template-columns: 1fr; }
  325.        @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } }
  326.        .lg\:grid-cols-3 { grid-template-columns: 1fr; }
  327.        @media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } }
  328.        
  329.        .bg-white { background-color: white; }
  330.        .rounded-xl { border-radius: 0.75rem; }
  331.        .rounded-2xl { border-radius: 1rem; }
  332.        .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
  333.        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
  334.        .overflow-hidden { overflow: hidden; }
  335.        .relative { position: relative; }
  336.        .absolute { position: absolute; }
  337.        .top-4 { top: 1rem; }
  338.        .left-4 { left: 1rem; }
  339.        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
  340.        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  341.        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  342.        .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  343.        .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  344.        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
  345.        .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  346.        .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  347.        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  348.        .px-8 { padding-left: 2rem; padding-right: 2rem; }
  349.        .mb-2 { margin-bottom: 0.5rem; }
  350.        .mb-4 { margin-bottom: 1rem; }
  351.        .mb-6 { margin-bottom: 1.5rem; }
  352.        .mb-8 { margin-bottom: 2rem; }
  353.        .mb-12 { margin-bottom: 3rem; }
  354.        .mb-16 { margin-bottom: 4rem; }
  355.        .mt-6 { margin-top: 1.5rem; }
  356.        .mt-auto { margin-top: auto; }
  357.        .mx-auto { margin-left: auto; margin-right: auto; }
  358.        .max-w-xl { max-width: 36rem; }
  359.        .max-w-2xl { max-width: 42rem; }
  360.        .max-w-3xl { max-width: 48rem; }
  361.        .max-w-4xl { max-width: 56rem; }
  362.        .w-full { width: 100%; }
  363.        .h-96 { height: 24rem; }
  364.        .object-cover { object-fit: cover; }
  365.        .object-contain { object-fit: contain; }
  366.        .border { border-width: 1px; }
  367.        .border-gray-200 { border-color: #e5e7eb; }
  368.        .text-xs { font-size: 0.75rem; line-height: 1rem; }
  369.        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  370.        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  371.        .text-2xl { font-size: 1.5rem; line-height: 2rem; }
  372.        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  373.        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  374.        .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  375.        .md\:text-4xl { font-size: 1.875rem; line-height: 2.25rem; }
  376.        .md\:text-5xl { font-size: 1.875rem; line-height: 2.25rem; }
  377.        @media (min-width: 768px) {
  378.            .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  379.            .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  380.            .md\:text-5xl { font-size: 3rem; line-height: 1; }
  381.        }
  382.        .font-extrabold { font-weight: 800; }
  383.        .font-semibold { font-weight: 600; }
  384.        .text-gray-600 { color: #4b5563; }
  385.        .text-gray-700 { color: #374151; }
  386.        .text-gray-900 { color: #111827; }
  387.        .text-pink-600 { color: #ec4899; }
  388.        .text-pink-700 { color: #be185d; }
  389.        .text-pink-900 { color: #831843; }
  390.        .text-white { color: white; }
  391.        .text-yellow-400 { color: #fbbf24; }
  392.        .bg-pink-50 { background-color: #fdf2f8; }
  393.        .bg-pink-100 { background-color: #fce7f3; }
  394.        .bg-gray-50 { background-color: #f9fafb; }
  395.        .bg-green-500 { background-color: #10b981; }
  396.        .bg-green-600 { background-color: #059669; }
  397.        .bg-blue-500 { background-color: #3b82f6; }
  398.        .bg-blue-600 { background-color: #2563eb; }
  399.        .line-through { text-decoration: line-through; }
  400.        .text-gray-400 { color: #9ca3af; }
  401.        .mr-1 { margin-right: 0.25rem; }
  402.        .mr-2 { margin-right: 0.5rem; }
  403.        .flex-1 { flex: 1 1 0%; }
  404.        .flex-wrap { flex-wrap: wrap; }
  405.        .gap-2 { gap: 0.5rem; }
  406.        .justify-between { justify-content: space-between; }
  407.        .flex-col { flex-direction: column; }
  408.        .h-\[240px\] { height: 240px; }
  409.        .h-\[409px\] { height: 409px; }
  410.        .max-h-\[700px\] { max-height: 700px; }
  411.        .p-1 { padding: 0.25rem; }
  412.        .leading-tight { line-height: 1.25; }
  413.        .tracking-tight { letter-spacing: -0.025em; }
  414.        .uppercase { text-transform: uppercase; }
  415.        .drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); }
  416.        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
  417.        .transform { transform: translateX(var(--tw-translate-x)) translateY(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)); }
  418.        .hover\:scale-105:hover { transform: scale(1.05); }
  419.        .hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
  420.        .animate-bounce { animation: bounce 1s infinite; }
  421.        .space-y-4 > * + * { margin-top: 1rem; }
  422.        .space-y-6 > * + * { margin-top: 1.5rem; }
  423.        .inline-block { display: inline-block; }
  424.        .rounded-full { border-radius: 9999px; }
  425.        .pt-20 { padding-top: 5rem; }
  426.        .min-h-screen { min-height: 100vh; }
  427.        .justify-center { justify-content: center; }
  428.    </style>
  429.    
  430.    <!-- Structured Data - Organization -->
  431.    <script type="application/ld+json">
  432.    {
  433.      "@context": "https://schema.org",
  434.      "@type": "EducationalOrganization",
  435.      "name": "Instituto Hair Atelier",
  436.      "alternateName": "Hair Atelier",
  437.      "url": "https://institutohairatelier.cl",
  438.      "logo": "https://institutohairatelier.cl/img/Hair_AtelieR_LOGO.png",
  439.      "image": "https://institutohairatelier.cl/img/Anadir_un_titulo_1.png",
  440.      "description": "Instituto Internacional de Peluquería Hair Atelier - Formación profesional en peluquería, barbería y estética con técnicas actualizadas y práctica real",
  441.      "address": {
  442.        "@type": "PostalAddress",
  443.        "streetAddress": "Paseo Estado 57",
  444.        "addressLocality": "Santiago",
  445.        "addressRegion": "Región Metropolitana",
  446.        "postalCode": "8320256",
  447.        "addressCountry": "CL"
  448.      },
  449.      "contactPoint": {
  450.        "@type": "ContactPoint",
  451.        "telephone": "+56948746695",
  452.        "contactType": "customer service",
  453.        "availableLanguage": "Spanish"
  454.      },
  455.      "founder": {
  456.        "@type": "Person",
  457.        "name": "Natalia Castillo"
  458.      },
  459.      "sameAs": [
  460.        "https://www.instagram.com/institutohairatelier.cl/",
  461.        "https://web.facebook.com/nataliaandrea.castillogonzalez.9",
  462.        "https://www.tiktok.com/@educadora_natty"
  463.      ]
  464.    }
  465.    </script>
  466.    
  467.    <!-- Structured Data - Local Business -->
  468.    <script type="application/ld+json">
  469.    {
  470.      "@context": "https://schema.org",
  471.      "@type": "LocalBusiness",
  472.      "name": "Instituto Hair Atelier",
  473.      "image": "https://institutohairatelier.cl/img/Anadir_un_titulo_1.png",
  474.      "address": {
  475.        "@type": "PostalAddress",
  476.        "streetAddress": "Paseo Estado 57",
  477.        "addressLocality": "Santiago",
  478.        "addressRegion": "Región Metropolitana",
  479.        "postalCode": "8320256",
  480.        "addressCountry": "CL"
  481.      },
  482.      "telephone": "+56948746695",
  483.      "email": "cursos@institutohairatelier.cl",
  484.      "url": "https://institutohairatelier.cl",
  485.      "priceRange": "$10,000 - $199,000 CLP",
  486.      "openingHours": "Mo-Fr 09:00-18:00",
  487.      "aggregateRating": {
  488.        "@type": "AggregateRating",
  489.        "ratingValue": "4.9",
  490.        "reviewCount": "127"
  491.      }
  492.    }
  493.    </script>
  494.    
  495.    <!-- Structured Data - Courses -->
  496.    <script type="application/ld+json">
  497.    {
  498.      "@context": "https://schema.org",
  499.      "@type": "ItemList",
  500.      "name": "Cursos Instituto Hair Atelier",
  501.      "itemListElement": [
  502.        {
  503.          "@type": "Course",
  504.          "name": "Curso Estilista Profesional",
  505.          "description": "Aprende de expertos y consigue trabajo como estilista profesional",
  506.          "provider": {
  507.            "@type": "Organization",
  508.            "name": "Instituto Hair Atelier"
  509.          },
  510.          "offers": {
  511.            "@type": "Offer",
  512.            "price": "89000",
  513.            "priceCurrency": "CLP"
  514.          }
  515.        },
  516.        {
  517.          "@type": "Course",
  518.          "name": "Curso Colorimetría",
  519.          "description": "Domina el color perfecto, conviértete en experto en colorimetría",
  520.          "provider": {
  521.            "@type": "Organization",
  522.            "name": "Instituto Hair Atelier"
  523.          },
  524.          "offers": {
  525.            "@type": "Offer",
  526.            "price": "89000",
  527.            "priceCurrency": "CLP"
  528.          }
  529.        },
  530.        {
  531.          "@type": "Course",
  532.          "name": "Curso Alisado y Tratamiento",
  533.          "description": "Domina alisado perfecto y tratamientos con acabado de salón",
  534.          "provider": {
  535.            "@type": "Organization",
  536.            "name": "Instituto Hair Atelier"
  537.          },
  538.          "offers": {
  539.            "@type": "Offer",
  540.            "price": "119000",
  541.            "priceCurrency": "CLP"
  542.          }
  543.        }
  544.      ]
  545.    }
  546.    </script>
  547.  </head>
  548.  
  549.  <body class="bg-gray-50 text-gray-800" style="background-color: #f9fafb; color: #1f2937; font-family: 'Poppins', sans-serif;">
  550.  
  551.    <!-- Header -->
  552.    <header class="fixed top-0 w-full bg-white/95 backdrop-blur-md z-30 shadow-sm">
  553.      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
  554.        <a href="#hero" class="flex items-center space-x-3">
  555.          <img src="img/Hair_AtelieR_LOGO.png" alt="Hair Atelier Logo" class="h-12 md:h-16">
  556.          <span class="font-bold text-xl md:text-2xl text-gray-800 hidden sm:block">Hair Atelier</span>
  557.        </a>
  558.        <nav class="hidden lg:flex space-x-6">
  559.          <a href="#hero" class="nav-link px-3 py-2 text-sm font-medium text-gray-600 hover:text-pink-600">Inicio</a>
  560.          <a href="#cursos" class="nav-link px-3 py-2 text-sm font-medium text-gray-600 hover:text-pink-600">Cursos</a>
  561.          <a href="#blog" class="nav-link px-3 py-2 text-sm font-medium text-gray-600 hover:text-pink-600">Blog</a>
  562.          <a href="#nosotros" class="nav-link px-3 py-2 text-sm font-medium text-gray-600 hover:text-pink-600">Nosotros</a>
  563.          <a href="#contacto" class="nav-link px-3 py-2 text-sm font-medium text-gray-600 hover:text-pink-600">Contacto</a>
  564.        </nav>
  565.        <button id="menuToggle" class="lg:hidden p-2" style="display: none;">
  566.          <i class="fas fa-bars w-6 h-6 text-gray-700"></i>
  567.        </button>
  568.      </div>
  569.  
  570.      <!-- Mobile Menu -->
  571.      <div id="mobileMenu" class="mobile-menu fixed top-0 right-0 w-64 h-full bg-white shadow-xl z-40 flex flex-col p-6">
  572.        <div class="flex justify-between items-center mb-6">
  573.          <span class="font-bold text-lg">Menú</span>
  574.          <button id="closeMenu" class="p-1">
  575.            <i class="fas fa-times w-6 h-6 text-gray-700"></i>
  576.          </button>
  577.        </div>
  578.        <nav class="flex flex-col space-y-4">
  579.          <a href="#hero" class="nav-link py-2 text-gray-600 hover:text-pink-600">Inicio</a>
  580.          <a href="#cursos" class="nav-link py-2 text-gray-600 hover:text-pink-600">Cursos</a>
  581.          <a href="#nosotros" class="nav-link py-2 text-gray-600 hover:text-pink-600">Nosotros</a>
  582.          <a href="#contacto" class="nav-link py-2 text-gray-600 hover:text-pink-600">Contacto</a>
  583.        </nav>
  584.      </div>
  585.    </header>
  586.  
  587.    <!-- Hero Section -->
  588.    <section id="hero" class="hero-bg min-h-screen flex items-center justify-center pt-20">
  589.      <div class="container mx-auto px-4 text-center">
  590.        <img src="img/educador_del_año.jpg" alt="Banner Estilista Profesional" class="w-full max-h-[800px] h-[500px] object-contain rounded-2xl shadow-lg mb-8 fade-in" loading="eager">
  591.        <div class="fade-in max-w-4xl mx-auto">
  592.          <h1 class="text-4xl md:text-5xl font-extrabold text-gray-600 mb-4 leading-tight">
  593.            <span class="titulo-animado">Instituto Internacional de Peluquería Hair Atelier</span>
  594.          </h1>
  595.          <h2 class="text-2xl md:text-3xl font-extrabold text-pink-900 mb-6 text-center tracking-tight uppercase drop-shadow-sm">
  596.            Transforma tu pasión por la <span class="text-pink-600">belleza</span> en una carrera exitosa
  597.          </h2>
  598.          <p class="text-lg md:text-2xl text-gray-600 mb-10 max-w-2xl mx-auto">
  599.            Formación profesional en peluquería, barbería y estética con técnicas actualizadas y práctica real.
  600.          </p>
  601.          <a href="#cursos" class="btn-primary inline-block px-8 py-4 text-white font-semibold rounded-full shadow-lg hover:shadow-2xl transition-all transform hover:scale-105">
  602.            Explora Nuestros Cursos
  603.          </a>
  604.        </div>
  605.      </div>
  606.    <!-- ...existing code... -->
  607.    </section>
  608.    <section id="cursos" class="py-20 bg-white">
  609.    <!-- NUEVOS CURSOS -->
  610.    <section id="nuevos-cursos" class="py-16 bg-pink-50">
  611.      <div class="container mx-auto px-4 max-w-3xl">
  612.        <div class="fade-in text-center mb-12">
  613.          <h2 class="text-2xl md:text-3xl font-bold text-pink-700 mb-4">¡Nuevos Cursos!</h2>
  614.          <div class="inline-block grad-border px-4 py-2 rounded-full text-white font-bold text-sm mb-2 animate-bounce">¡Inscríbete y aprovecha el precio lanzamiento!</div>
  615.        </div>
  616.        
  617.        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
  618.          <div class="fade-in card-hover bg-white rounded-xl shadow-md overflow-hidden relative">
  619.            <img src="img/curso_de_colorimetria_online.jpeg" alt="Colorimetría Online" class="w-full h-96 object-cover" loading="lazy">
  620.            <span class="absolute top-4 left-4 grad-border px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg animate-bounce">NUEVO</span>
  621.            <div class="p-6 flex flex-col h-[240px] justify-between">
  622.              <h3 class="text-xl font-bold text-gray-900 mb-2">Curso de Colorimetría Online</h3>
  623.              <p class="text-gray-600 mb-4 text-sm">Aprende colorimetría desde casa, con clases grabadas y acceso a grupo privado.</p>
  624.              <div class="flex items-center mb-2">
  625.                <span class="text-pink-600 font-bold text-xl mr-2">$9.990</span>
  626.                <span class="line-through text-gray-400 text-sm">$50.000</span>
  627.              </div>
  628.              <div class="flex flex-row flex-wrap gap-2 mb-2 w-full items-center justify-start botones-curso">
  629.                <a href="https://institutohairatelier.cl/colorimetria/" class="btn-primary flex-1 px-2 py-2 text-white text-xs rounded-full text-center">Más detalles</a>
  630.                <a href="https://wa.me/56948746695?text=Hola%2C%20quiero%20informaci%C3%B3n%20del%20Curso%20Colorimetr%C3%ADa%20Online.%20Vi%20el%20curso%20en%20la%20web." target="_blank" rel="noopener" class="flex-1 px-2 py-2 bg-green-500 hover:bg-green-600 text-white text-xs rounded-full shadow transition-all text-center">WhatsApp</a>
  631.                <button type="button" onclick="shareCurso('Curso Colorimetría Online', window.location.href)" class="flex-1 px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-full shadow transition-all text-center">Compartir</button>
  632.              </div>
  633.            </div>
  634.          </div>
  635.          <div class="fade-in card-hover bg-white rounded-xl shadow-md overflow-hidden relative">
  636.            <img src="img/curso_de_peinados.jpeg" alt="Curso de Peinados" class="w-full h-96 object-cover" loading="lazy">
  637.            <span class="absolute top-4 left-4 grad-border px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg animate-bounce">NUEVO</span>
  638.            <div class="p-6 flex flex-col h-[240px] justify-between">
  639.              <h3 class="text-xl font-bold text-gray-900 mb-2">Curso de Peinados Online</h3>
  640.              <p class="text-gray-600 mb-4 text-sm">Domina técnicas modernas de peinado para eventos y salón. Incluye kit de inicio.</p>
  641.              <div class="flex items-center mb-2">
  642.                <span class="text-pink-600 font-bold text-xl mr-2">$9.990</span>
  643.                <span class="line-through text-gray-400 text-sm">$50.000</span>
  644.              </div>
  645.              <div class="flex flex-row flex-wrap gap-2 mb-2 w-full items-center justify-start botones-curso">
  646.                <a href="https://institutohairatelier.cl/formulario.html" class="btn-primary flex-1 px-2 py-2 text-white text-xs rounded-full text-center">Más detalles</a>
  647.                <a href="https://wa.me/56948746695?text=Hola%2C%20quiero%20informaci%C3%B3n%20del%20Curso%20de%20Peinados.%20Vi%20el%20curso%20en%20la%20web." target="_blank" rel="noopener" class="flex-1 px-2 py-2 bg-green-500 hover:bg-green-600 text-white text-xs rounded-full shadow transition-all text-center">WhatsApp</a>
  648.                <button type="button" onclick="shareCurso('Curso de Peinados', window.location.href)" class="flex-1 px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-full shadow transition-all text-center">Compartir</button>
  649.              </div>
  650.            </div>
  651.          </div>
  652.          <div class="fade-in card-hover bg-white rounded-xl shadow-md overflow-hidden relative">
  653.            <img src="img/colorimatria_online.jpg" alt="Colorimetría Online Avanzada" class="w-full h-96 object-cover" loading="lazy">
  654.            <span class="absolute top-4 left-4 grad-border px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg animate-bounce">NUEVO</span>
  655.            <div class="p-6 flex flex-col h-[240px] justify-between">
  656.              <h3 class="text-xl font-bold text-gray-900 mb-2">Colorimetría Online Avanzada</h3>
  657.              <p class="text-gray-600 mb-4 text-sm">Técnicas avanzadas de colorimetría con certificación profesional y material exclusivo.</p>
  658.              <div class="flex items-center mb-2">
  659.                <span class="text-pink-600 font-bold text-xl mr-2">$9.990</span>
  660.                <span class="line-through text-gray-400 text-sm">$75.000</span>
  661.              </div>
  662.              <div class="flex flex-row flex-wrap gap-2 mb-2 w-full items-center justify-start botones-curso">
  663.                <a href="https://institutohairatelier.cl/colorimetria/" class="btn-primary flex-1 px-2 py-2 text-white text-xs rounded-full text-center">Más detalles</a>
  664.                <a href="https://wa.me/56948746695?text=Hola%2C%20quiero%20informaci%C3%B3n%20del%20Curso%20Colorimetr%C3%ADa%20Online%20Avanzada.%20Vi%20el%20curso%20en%20la%20web." target="_blank" rel="noopener" class="flex-1 px-2 py-2 bg-green-500 hover:bg-green-600 text-white text-xs rounded-full shadow transition-all text-center">WhatsApp</a>
  665.                <button type="button" onclick="shareCurso('Colorimetría Online Avanzada', window.location.href)" class="flex-1 px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-full shadow transition-all text-center">Compartir</button>
  666.              </div>
  667.            </div>
  668.          </div>
  669.        </div>
  670.        
  671.      </div>
  672.    </section>
  673.    <!-- Cursos Destacados (solo una vez) -->
  674.    <div class="container mx-auto px-4">
  675.      <div class="fade-in text-center mb-16">
  676.        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Cursos Destacados</h2>
  677.        <div class="inline-block grad-border px-4 py-2 rounded-full text-white font-bold text-sm mb-2 animate-bounce">¡Promociones especiales Fiestas Patrias!</div>
  678.        <p class="text-gray-600 max-w-xl mx-auto">Aprende de expertos y aprovecha los precios especiales.
  679.          <span class="text-pink-600 font-bold">¡Cupos limitados!</span></p>
  680.        <div class="fade-in card-hover bg-pink-100 rounded-2xl shadow-lg overflow-hidden relative mt-6 mb-8 max-w-xl mx-auto">
  681.          <span class="absolute top-4 left-4 grad-border px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg animate-bounce">¡Solo $10.000!</span>
  682.          <div class="p-6">
  683.            <h3 class="text-xl font-bold text-pink-700 mb-2">Cursos Intensivos de 3 días</h3>
  684.            <p class="text-gray-700 mb-4 text-sm">Aprovecha esta oportunidad única: cursos intensivos de 3 días solo a $10.000. ¡Hasta completar cupos, no pierdas la posibilidad de aprender con los mejores!</p>
  685.            <a href="https://institutohairatelier.cl/formulario.html" class="btn-primary inline-block px-6 py-2 text-white text-sm rounded-full">Inscribirme</a>
  686.          </div>
  687.        </div>
  688.      </div>
  689.      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
  690.        <!-- Curso Estilista Profesional -->
  691.        <div class="fade-in card-hover bg-white rounded-xl shadow-md overflow-hidden relative">
  692.          <img src="img/IMG-20250309-WA0125-1024x1024.jpg" alt="Estilista Profesional" class="w-full h-96 object-cover" loading="lazy" decoding="async">
  693.          <span class="absolute top-4 left-4 grad-border px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg animate-bounce">PROMO</span>
  694.          <div class="p-6">
  695.            <div class="flex items-center justify-between mb-2">
  696.              <h3 class="text-xl font-bold text-gray-900">Curso Estilista Profesional</h3>
  697.              <span class="text-pink-600 font-bold text-xl">$89.000</span>
  698.            </div>
  699.            <p class="text-gray-600 mb-2 text-xs">+ $30.000 matrícula</p>
  700.            <div class="flex items-center mb-2">
  701.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  702.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  703.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  704.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  705.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  706.            </div>
  707.            <p class="text-gray-600 mb-4 text-sm">Aprende de expertos, consigue trabajo como estilista profesional.</p>
  708.            <div class="flex flex-row flex-wrap gap-2 mt-auto items-center justify-start botones-curso">
  709.              <a href="https://institutohairatelier.cl/estilista-profesional" class="btn-primary flex-1 px-2 py-2 text-white text-xs rounded-full text-center">Más detalles</a>
  710.              <a href="https://wa.me/56948746695?text=Hola%2C%20quiero%20informaci%C3%B3n%20del%20Curso%20Estilista%20Profesional.%20Vi%20el%20curso%20en%20la%20web." target="_blank" rel="noopener" class="flex-1 px-2 py-2 bg-green-500 hover:bg-green-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-comments inline w-4 h-4 mr-1"></i> WhatsApp</a>
  711.              <button type="button" onclick="shareCurso('Curso Estilista Profesional', window.location.href)" class="flex-1 px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-share-alt inline w-4 h-4 mr-1"></i> Compartir</button>
  712.            </div>
  713.          </div>
  714.        </div>
  715.        <!-- Curso Presencial de Cejas Perfectas -->
  716.        <div class="fade-in card-hover bg-white rounded-xl shadow-md overflow-hidden relative">
  717.          <img src="img/curso_de_cejas.jpg" alt="Curso Presencial de Cejas Perfectas" class="w-full h-96 object-cover" loading="lazy" decoding="async">
  718.          <span class="absolute top-4 left-4 grad-border px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg animate-bounce">NUEVO</span>
  719.          <div class="p-6">
  720.            <div class="flex items-center justify-between mb-2">
  721.              <h3 class="text-xl font-bold text-gray-900">Curso Presencial de Cejas Perfectas</h3>
  722.              <span class="text-pink-600 font-bold text-xl">$50.000</span>
  723.            </div>
  724.            <div class="flex items-center mb-2">
  725.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  726.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  727.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  728.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  729.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  730.            </div>
  731.            <p class="text-gray-600 mb-4 text-sm">Aprende técnicas profesionales de diseño y depilación de cejas. Curso presencial con certificación incluida.</p>
  732.            <div class="flex flex-row flex-wrap gap-2 mt-auto items-center justify-start botones-curso">
  733.              <a href="https://institutohairatelier.cl/formulario.html" class="btn-primary flex-1 px-2 py-2 text-white text-xs rounded-full text-center">Más detalles</a>
  734.              <a href="https://wa.me/56948746695?text=Hola%2C%20quiero%20informaci%C3%B3n%20del%20Curso%20Presencial%20de%20Cejas%20Perfectas.%20Vi%20el%20curso%20en%20la%20web." target="_blank" rel="noopener" class="flex-1 px-2 py-2 bg-green-500 hover:bg-green-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-comments inline w-4 h-4 mr-1"></i> WhatsApp</a>
  735.              <button type="button" onclick="shareCurso('Curso Presencial de Cejas Perfectas', window.location.href)" class="flex-1 px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-share-alt inline w-4 h-4 mr-1"></i> Compartir</button>
  736.            </div>
  737.          </div>
  738.        </div>
  739.        <!-- Curso Alisado y Tratamiento -->
  740.        <div class="fade-in card-hover bg-white rounded-2xl shadow-lg overflow-hidden relative">
  741.          <img src="img/alisado-tratamiento.jpg" alt="Alisado y Tratamiento" class="w-full h-96 object-cover">
  742.          <span class="absolute top-4 left-4 grad-border px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg animate-bounce">PROMO</span>
  743.          <div class="p-6">
  744.            <div class="flex items-center justify-between mb-2">
  745.              <h3 class="text-xl font-bold text-gray-900">Curso Alisado y Tratamiento</h3>
  746.              <span class="text-pink-600 font-bold text-xl mr-2">$119.000</span>
  747.              <span class="line-through text-gray-400 text-sm">$149.000</span>
  748.            </div>
  749.            <p class="text-gray-600 mb-2 text-xs">+ $30.000 matrícula</p>
  750.            <div class="flex items-center mb-2">
  751.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  752.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  753.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  754.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  755.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  756.            </div>
  757.            <p class="text-gray-600 mb-4 text-sm">Domina alisado perfecto y tratamientos con acabado de salón.</p>
  758.            <div class="flex flex-row flex-wrap gap-2 mt-auto items-center justify-start botones-curso">
  759.              <a href="https://institutohairatelier.cl/curso-alisado-y-tratamiento" class="btn-primary flex-1 px-2 py-2 text-white text-xs rounded-full text-center">Más detalles</a>
  760.              <a href="https://wa.me/56948746695?text=Hola%2C%20quiero%20informaci%C3%B3n%20del%20Curso%20Alisado%20y%20Tratamiento.%20Vi%20el%20curso%20en%20la%20web." target="_blank" rel="noopener" class="flex-1 px-2 py-2 bg-green-500 hover:bg-green-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-comments inline w-4 h-4 mr-1"></i> WhatsApp</a>
  761.              <button type="button" onclick="shareCurso('Curso Alisado y Tratamiento', window.location.href)" class="flex-1 px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-share-alt inline w-4 h-4 mr-1"></i> Compartir</button>
  762.            </div>
  763.          </div>
  764.        </div>
  765.        <!-- Curso Colorimetría -->
  766.        <div class="fade-in card-hover bg-white rounded-2xl shadow-lg overflow-hidden relative">
  767.          <img src="img/colorimetria.webp" alt="Colorimetría" class="w-full h-96 object-cover">
  768.          <span class="absolute top-4 left-4 grad-border px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg animate-bounce">PROMO</span>
  769.          <div class="p-6">
  770.            <div class="flex items-center justify-between mb-2">
  771.              <h3 class="text-xl font-bold text-gray-900">Curso Colorimetría</h3>
  772.              <span class="text-pink-600 font-bold text-xl mr-2">$89.000</span>
  773.              <span class="line-through text-gray-400 text-sm">$119.000</span>
  774.            </div>
  775.            <p class="text-gray-600 mb-2 text-xs">+ $30.000 matrícula</p>
  776.            <div class="flex items-center mb-2">
  777.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  778.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  779.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  780.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  781.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  782.            </div>
  783.            <p class="text-gray-600 mb-4 text-sm">Domina el color perfecto, conviértete en experto en colorimetría.</p>
  784.            <div class="flex flex-row flex-wrap gap-2 mt-auto items-center justify-start botones-curso">
  785.              <a href="https://institutohairatelier.cl/colorimetria" class="btn-primary flex-1 px-2 py-2 text-white text-xs rounded-full text-center">Más detalles</a>
  786.              <a href="https://wa.me/56948746695?text=Hola%2C%20quiero%20informaci%C3%B3n%20del%20Curso%20Colorimetr%C3%ADa.%20Vi%20el%20curso%20en%20la%20web." target="_blank" rel="noopener" class="flex-1 px-2 py-2 bg-green-500 hover:bg-green-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-comments inline w-4 h-4 mr-1"></i> WhatsApp</a>
  787.              <button type="button" onclick="shareCurso('Curso Colorimetría', window.location.href)" class="flex-1 px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-share-alt inline w-4 h-4 mr-1"></i> Compartir</button>
  788.            </div>
  789.          </div>
  790.        </div>
  791.        <!-- Curso Educador -->
  792.        <div class="fade-in card-hover bg-white rounded-2xl shadow-lg overflow-hidden relative">
  793.          <img src="img/educador.jpg" alt="Curso de Educador" class="w-full h-96 object-cover">
  794.          <span class="absolute top-4 left-4 grad-border px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg animate-bounce">INICIA EN OCTUBRE</span>
  795.          <div class="p-6">
  796.            <div class="flex items-center justify-between mb-2">
  797.              <h3 class="text-xl font-bold text-gray-900">Curso de Educador</h3>
  798.              <span class="text-pink-600 font-bold text-xl">$99.000</span>
  799.            </div>
  800.            <p class="text-gray-600 mb-2 text-xs">+ $30.000 matrícula</p>
  801.            <div class="flex items-center mb-2">
  802.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  803.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  804.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  805.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  806.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  807.            </div>
  808.            <p class="text-gray-600 mb-4 text-sm">Certifícate como educador en el prestigioso Instituto Hair Atelier.</p>
  809.            <div class="flex flex-row flex-wrap gap-2 mt-auto items-center justify-start botones-curso">
  810.              <a href="https://institutohairatelier.cl/educador" class="btn-primary flex-1 px-2 py-2 text-white text-xs rounded-full text-center">Más detalles</a>
  811.              <a href="https://wa.me/56948746695?text=Hola%2C%20quiero%20informaci%C3%B3n%20del%20Curso%20de%20Educador.%20Vi%20el%20curso%20en%20la%20web." target="_blank" rel="noopener" class="flex-1 px-2 py-2 bg-green-500 hover:bg-green-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-comments inline w-4 h-4 mr-1"></i> WhatsApp</a>
  812.              <button type="button" onclick="shareCurso('Curso de Educador', window.location.href)" class="flex-1 px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-share-alt inline w-4 h-4 mr-1"></i> Compartir</button>
  813.            </div>
  814.          </div>
  815.        </div>
  816.        <!-- Corte Comercial Dama -->
  817.        <div class="fade-in card-hover bg-white rounded-2xl shadow-lg overflow-hidden relative">
  818.          <img src="img/corte-comercial-dama.jpg" alt="Corte Comercial Dama" class="w-full h-96 object-cover">
  819.          <span class="absolute top-4 left-4 grad-border px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg animate-bounce">PROMO</span>
  820.          <div class="p-6">
  821.            <div class="flex items-center justify-between mb-2">
  822.              <h3 class="text-xl font-bold text-gray-900">Curso Corte Comercial Dama</h3>
  823.              <span class="text-pink-600 font-bold text-xl">$119.000</span>
  824.            </div>
  825.            <p class="text-gray-600 mb-2 text-xs">+ $30.000 matrícula</p>
  826.            <div class="flex items-center mb-2">
  827.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  828.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  829.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  830.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  831.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  832.            </div>
  833.            <p class="text-gray-600 mb-4 text-sm">Domina el corte comercial para dama, atrae clientas y aumenta tus ingresos.</p>
  834.            <div class="flex flex-row flex-wrap gap-2 mt-auto items-center justify-start botones-curso">
  835.              <a href="https://institutohairatelier.cl/corte-comercial-dama" class="btn-primary flex-1 px-2 py-2 text-white text-xs rounded-full text-center">Más detalles</a>
  836.              <a href="https://wa.me/56948746695?text=Hola%2C%20quiero%20informaci%C3%B3n%20del%20Curso%20Corte%20Comercial%20Dama.%20Vi%20el%20curso%20en%20la%20web." target="_blank" rel="noopener" class="flex-1 px-2 py-2 bg-green-500 hover:bg-green-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-comments inline w-4 h-4 mr-1"></i> WhatsApp</a>
  837.              <button type="button" onclick="shareCurso('Curso Corte Comercial Dama', window.location.href)" class="flex-1 px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-share-alt inline w-4 h-4 mr-1"></i> Compartir</button>
  838.            </div>
  839.          </div>
  840.        </div>
  841.        <!-- Depilación Femenina -->
  842.        <div class="fade-in card-hover bg-white rounded-2xl shadow-lg overflow-hidden relative">
  843.          <img src="img/depilacion-femenina.jpg" alt="Depilación Femenina" class="w-full h-96 object-cover">
  844.          <span class="absolute top-4 left-4 grad-border px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg animate-bounce">PROMO</span>
  845.          <div class="p-6">
  846.            <div class="flex items-center justify-between mb-2">
  847.              <h3 class="text-xl font-bold text-gray-900">Curso Depilación</h3>
  848.              <span class="text-pink-600 font-bold text-xl mr-2">Damas $149.000</span>
  849.              <span class="text-pink-600 font-bold text-xl">Varones $199.000</span>
  850.            </div>
  851.            <p class="text-gray-600 mb-2 text-xs">+ $30.000 matrícula</p>
  852.            <div class="flex items-center mb-2">
  853.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  854.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  855.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  856.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  857.              <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  858.            </div>
  859.            <p class="text-gray-600 mb-4 text-sm">Aprende depilación profesional, atrae clientas y transforma tu vida.</p>
  860.            <div class="flex flex-row flex-wrap gap-2 mt-auto items-center justify-start botones-curso">
  861.              <a href="https://institutohairatelier.cl/formulario" class="btn-primary flex-1 px-2 py-2 text-white text-xs rounded-full text-center">Más detalles</a>
  862.              <a href="https://wa.me/56948746695?text=Hola%2C%20quiero%20informaci%C3%B3n%20del%20Curso%20Depilaci%C3%B3n.%20Vi%20el%20curso%20en%20la%20web." target="_blank" rel="noopener" class="flex-1 px-2 py-2 bg-green-500 hover:bg-green-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-comments inline w-4 h-4 mr-1"></i> WhatsApp</a>
  863.              <button type="button" onclick="shareCurso('Curso Depilación', window.location.href)" class="flex-1 px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-full shadow transition-all text-center"><i class="fas fa-share-alt inline w-4 h-4 mr-1"></i> Compartir</button>
  864.            </div>
  865.              
  866.            </div>
  867.          </div>
  868.        </div>
  869.      </div>
  870.    </div>
  871.  
  872.  
  873.    <!-- Nosotros Section -->
  874.    <section id="nosotros" class="py-20 bg-gray-50">
  875.      <div class="container mx-auto px-4">
  876.        <div class="grid lg:grid-cols-2 gap-12 items-center">
  877.          <div class="fade-in">
  878.            <img src="img/Natalia_Castillo_.jpg" alt="Natalia Castillo" class="rounded-2xl shadow-xl w-full h-96 object-cover">
  879.          </div>
  880.          <div class="fade-in">
  881.            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Conoce a Natalia Castillo</h2>
  882.            <p class="text-gray-600 mb-4">
  883.              Al frente de nuestro instituto está una apasionada profesional de la belleza, con amplia trayectoria en estilismo y formación académica. Como fundadora y docente principal, mi misión es guiar y transformar a cada alumno en un verdadero profesional.
  884.            </p>
  885.            <p class="text-gray-600 mb-6">
  886.              Gracias a su experiencia y dedicación, Hair Atelier es hoy un referente en educación en belleza. <strong class="text-pink-600">Aquí comienzas tu camino acompañado por una experta que inspira, enseña y transforma.</strong>
  887.            </p>
  888.            <div class="flex space-x-4">
  889.              <div class="bg-white p-4 rounded-xl shadow-md">
  890.                <i class="fas fa-user-check w-8 h-8 mb-2 text-pink-600"></i>
  891.                <p class="text-sm font-semibold">Asesor Experto</p>
  892.              </div>
  893.              <div class="bg-white p-4 rounded-xl shadow-md">
  894.                <i class="fas fa-award w-8 h-8 mb-2 text-pink-600"></i>
  895.                <p class="text-sm font-semibold">Certificados</p>
  896.              </div>
  897.            </div>
  898.          </div>
  899.        </div>
  900.      </div>
  901.    </section>
  902.  
  903.    <!-- Counters Section -->
  904.    <section class="py-16 bg-white counters-section">
  905.      <div class="container mx-auto px-4">
  906.        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
  907.          <div class="fade-in">
  908.            <i class="fas fa-chalkboard-teacher" style="font-size: 3rem; color: #ec4899; margin-bottom: 0.5rem;"></i>
  909.            <div class="counter text-3xl font-bold text-pink-600" data-target="10">0</div>
  910.            <p class="text-gray-600">Profesores</p>
  911.          </div>
  912.          <div class="fade-in">
  913.            <i class="fas fa-graduation-cap" style="font-size: 3rem; color: #ec4899; margin-bottom: 0.5rem;"></i>
  914.            <div class="counter text-3xl font-bold text-pink-600" data-target="3000">0</div>
  915.            <p class="text-gray-600">Graduados</p>
  916.          </div>
  917.          <div class="fade-in">
  918.            <i class="fas fa-trophy" style="font-size: 3rem; color: #ec4899; margin-bottom: 0.5rem;"></i>
  919.            <div class="counter text-3xl font-bold text-pink-600" data-target="1578">0</div>
  920.            <p class="text-gray-600">Premios</p>
  921.          </div>
  922.          <div class="fade-in">
  923.            <i class="fas fa-laptop" style="font-size: 3rem; color: #ec4899; margin-bottom: 0.5rem;"></i>
  924.            <div class="counter text-3xl font-bold text-pink-600" data-target="176">0</div>
  925.            <p class="text-gray-600">Cursos Online</p>
  926.          </div>
  927.        </div>
  928.      </div>
  929.    </section>
  930.  
  931.    <!-- Ofrecemos Section -->
  932.    <section class="py-20 bg-gray-50 ofrecemos-section">
  933.      <div class="container mx-auto px-4">
  934.        <div class="fade-in text-center mb-16">
  935.          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Lo que ofrecemos para el crecimiento de tus estudios</h2>
  936.          <p class="text-gray-600 max-w-2xl mx-auto">Te ofrecemos formación profesional en peluquería, barbería y estética con técnicas actualizadas, práctica real y el respaldo de expertos.</p>
  937.        </div>
  938.  
  939.        <div class="grid md:grid-cols-3 gap-8">
  940.          <div class="fade-in bg-white p-8 rounded-2xl shadow-lg text-center">
  941.            <i class="fas fa-user-tie" style="font-size: 3rem; color: #ec4899; margin-bottom: 1rem;"></i>
  942.            <h3 class="text-xl font-bold text-gray-900 mb-2">Asesores Expertos</h3>
  943.            <p class="text-gray-600 mb-4">Guía constante de instructores altamente calificados y especializados.</p>
  944.            <a href="https://institutohairatelier.cl/formulario.html" class="btn-primary inline-block px-6 py-2 text-white rounded-full">Inscribirme Ahora</a>
  945.          </div>
  946.  
  947.          <div class="fade-in bg-white p-8 rounded-2xl shadow-lg text-center">
  948.            <i class="fas fa-desktop" style="font-size: 3rem; color: #ec4899; margin-bottom: 1rem;"></i>
  949.            <h3 class="text-xl font-bold text-gray-900 mb-2">Recursos Digitales</h3>
  950.            <p class="text-gray-600 mb-4">Videos, manuales, plantillas y guías digitales descargables.</p>
  951.            <a href="https://institutohairatelier.cl/formulario.html" class="btn-primary inline-block px-6 py-2 text-white rounded-full">Inscribirme Ahora</a>
  952.          </div>
  953.  
  954.          <div class="fade-in bg-white p-8 rounded-2xl shadow-lg text-center">
  955.            <i class="fas fa-award" style="font-size: 3rem; color: #ec4899; margin-bottom: 1rem;"></i>
  956.            <h3 class="text-xl font-bold text-gray-900 mb-2">Alcanza Tus Metas</h3>
  957.            <p class="text-gray-600 mb-4">Conviértete en profesional y logra tus sueños.</p>
  958.            <a href="https://institutohairatelier.cl/formulario.html" class="btn-primary inline-block px-6 py-2 text-white rounded-full">Inscribirme Ahora</a>
  959.          </div>
  960.        </div>
  961.      </div>
  962.    </section>
  963.  
  964.    <!-- Cursos Gobierno Section -->
  965.    <section class="py-20 bg-pink-50">
  966.      <div class="container mx-auto px-4">
  967.        <div class="fade-in text-center mb-16">
  968.          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Cursos Gratuitos de Peluquería</h2>
  969.          <p class="text-gray-600 max-w-2xl mx-auto">Aprovecha nuestros cursos gratuitos para iniciarte en el mundo de la peluquería y descubrir tu talento en el área de la belleza.</p>
  970.        </div>
  971.  
  972.        <!-- Carrusel de cursos gratuitos -->
  973.        <div class="max-w-6xl mx-auto">
  974.          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  975.            <!-- Cursos Gratis Instituto Hair Atelier -->
  976.            <div class="fade-in card-hover bg-white rounded-xl shadow-md overflow-hidden relative">
  977.              <img src="img/clases_gratis_instituto_hair_atelier.jpg" alt="Cursos Gratis Instituto Hair Atelier" class="w-full h-96 object-cover" loading="lazy">
  978.              <span class="absolute top-4 left-4 grad-border px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg animate-bounce">GRATIS</span>
  979.              <div class="p-6">
  980.                <div class="flex items-center justify-between mb-2">
  981.                  <h3 class="text-xl font-bold text-gray-900">Cursos Gratis Instituto Hair Atelier</h3>
  982.                  <span class="text-green-600 font-bold text-xl">GRATIS</span>
  983.                </div>
  984.                <div class="flex items-center mb-2">
  985.                  <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  986.                  <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  987.                  <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  988.                  <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  989.                  <i class="fas fa-star w-4 h-4 text-yellow-400"></i>
  990.                </div>
  991.                <p class="text-gray-600 mb-4 text-sm">Accede a cursos gratuitos de peluquería y belleza. Aprende técnicas básicas con nuestros expertos profesionales.</p>
  992.                <div class="flex flex-row flex-wrap gap-2 mt-auto items-center justify-start botones-curso">
  993.                  <a href="https://wa.me/56948746695?text=Hola%2C%20quiero%20más%20información%20de%20los%20cursos%20gratis%20del%20instituto.%20Lo%20vi%20en%20la%20web." target="_blank" rel="noopener" class="btn-primary flex-1 px-2 py-2 text-white text-xs rounded-full text-center">Más detalles</a>
  994.                  <a href="https://wa.me/56948746695?text=Hola%2C%20quiero%20más%20información%20de%20los%20cursos%20gratis%20del%20instituto.%20Lo%20vi%20en%20la%20web." target="_blank" rel="noopener" class="flex-1 px-2 py-2 bg-green-500 hover:bg-green-600 text-white text-xs rounded-full shadow transition-all text-center">WhatsApp</a>
  995.                  <button type="button" onclick="shareCurso('Cursos Gratis Instituto Hair Atelier', window.location.href)" class="flex-1 px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-full shadow transition-all text-center">Compartir</button>
  996.                </div>
  997.              </div>
  998.            </div>
  999.  
  1000.            <!-- Placeholder para futuros cursos del gobierno -->
  1001.            <!-- Solo necesitas duplicar este bloque y cambiar la imagen, título y descripción -->
  1002.            
  1003.          </div>
  1004.        </div>
  1005.      </div>
  1006.    </section>
  1007.  
  1008.    <!-- Contact Section -->
  1009.    <section id="contacto" class="py-20 bg-white">
  1010.      <div class="container mx-auto px-4">
  1011.        <div class="max-w-4xl mx-auto text-center">
  1012.          <div class="fade-in">
  1013.            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">¿Listo para dar el siguiente paso?</h2>
  1014.            <p class="text-gray-600 mb-8 max-w-2xl mx-auto">
  1015.              Completa el formulario y comienza tu camino profesional. Estamos aquí para ayudarte a alcanzar tus metas.
  1016.            </p>
  1017.            <a href="https://institutohairatelier.cl/formulario.html" class="btn-primary inline-block px-8 py-4 text-white font-semibold rounded-full shadow-lg hover:shadow-2xl transition-all transform hover:scale-105">
  1018.              Formulario de Inscripción
  1019.            </a>
  1020.          </div>
  1021.        </div>
  1022.      </div>
  1023.    </section>
  1024.  
  1025.    <!-- Footer -->
  1026.    <!-- Preguntas Frecuentes SEO -->
  1027.    <section id="faq" class="py-12 bg-white">
  1028.      <div class="container mx-auto px-4 max-w-2xl">
  1029.        <h2 class="text-2xl md:text-3xl font-bold text-pink-700 mb-6 text-center">Preguntas frecuentes sobre cursos de peluquería</h2>
  1030.        
  1031.        <!-- Structured Data - FAQ -->
  1032.        <script type="application/ld+json">
  1033.        {
  1034.          "@context": "https://schema.org",
  1035.          "@type": "FAQPage",
  1036.          "mainEntity": [
  1037.            {
  1038.              "@type": "Question",
  1039.              "name": "¿Cuánto cuesta un curso de peluquería?",
  1040.              "acceptedAnswer": {
  1041.                "@type": "Answer",
  1042.                "text": "El valor de los cursos varía según el tipo y duración. En Hair Atelier, los cursos intensivos pueden costar desde $10.000 y los cursos profesionales desde $49.000 a $149.000. Consulta cada curso para detalles actualizados."
  1043.              }
  1044.            },
  1045.            {
  1046.              "@type": "Question",
  1047.              "name": "¿Cuánto tiempo dura un curso de peluquería?",
  1048.              "acceptedAnswer": {
  1049.                "@type": "Answer",
  1050.                "text": "Tenemos cursos intensivos de 3 días, cursos cortos de 1 semana y programas profesionales de varios meses. La duración depende del nivel y modalidad elegida."
  1051.              }
  1052.            },
  1053.            {
  1054.              "@type": "Question",
  1055.              "name": "¿Cuántos años hay que estudiar para ser peluquería?",
  1056.              "acceptedAnswer": {
  1057.                "@type": "Answer",
  1058.                "text": "Para ejercer como peluquero profesional, puedes formarte en cursos de meses o especializarte durante 1 a 2 años según tu objetivo y dedicación. En Hair Atelier ofrecemos opciones flexibles y certificadas."
  1059.              }
  1060.            },
  1061.            {
  1062.              "@type": "Question",
  1063.              "name": "¿Cuánto vale un curso de peluquería en Chile?",
  1064.              "acceptedAnswer": {
  1065.                "@type": "Answer",
  1066.                "text": "El valor de los cursos de peluquería en Chile depende de la institución y el tipo de curso. En Hair Atelier, puedes encontrar opciones desde $10.000 en promociones hasta $149.000 en programas completos, con materiales y certificación incluidos."
  1067.              }
  1068.            }
  1069.          ]
  1070.        }
  1071.        </script>
  1072.        
  1073.        <div class="space-y-6">
  1074.          <div>
  1075.            <h3 class="text-lg font-semibold text-gray-900 mb-2">¿Cuánto cuesta un curso de peluquería?</h3>
  1076.            <p class="text-gray-600 text-sm">El valor de los cursos varía según el tipo y duración. En Hair Atelier, los cursos intensivos pueden costar desde $10.000 y los cursos profesionales desde $49.000 a $149.000. Consulta cada curso para detalles actualizados.</p>
  1077.          </div>
  1078.          <div>
  1079.            <h3 class="text-lg font-semibold text-gray-900 mb-2">¿Cuánto tiempo dura un curso de peluquería?</h3>
  1080.            <p class="text-gray-600 text-sm">Tenemos cursos intensivos de 3 días, cursos cortos de 1 semana y programas profesionales de varios meses. La duración depende del nivel y modalidad elegida.</p>
  1081.          </div>
  1082.          <div>
  1083.            <h3 class="text-lg font-semibold text-gray-900 mb-2">¿Cuántos años hay que estudiar para ser peluquería?</h3>
  1084.            <p class="text-gray-600 text-sm">Para ejercer como peluquero profesional, puedes formarte en cursos de meses o especializarte durante 1 a 2 años según tu objetivo y dedicación. En Hair Atelier ofrecemos opciones flexibles y certificadas.</p>
  1085.          </div>
  1086.          <div>
  1087.            <h3 class="text-lg font-semibold text-gray-900 mb-2">¿Cuánto vale un curso de peluquería en Chile?</h3>
  1088.            <p class="text-gray-600 text-sm">El valor de los cursos de peluquería en Chile depende de la institución y el tipo de curso. En Hair Atelier, puedes encontrar opciones desde $10.000 en promociones hasta $149.000 en programas completos, con materiales y certificación incluidos.</p>
  1089.          </div>
  1090.        </div>
  1091.      </div>
  1092.    </section>
  1093.    
  1094.    <!-- Footer -->
  1095.    <footer class="footer">
  1096.        <div class="container">
  1097.            <div class="row">
  1098.                <div class="col-lg-4 mb-4">
  1099.                    <h5>Instituto Hair Atelier</h5>
  1100.                    <p>Formamos profesionales íntegros, creativos y apasionados por la belleza. Inspírate, capacítate y transforma tu futuro con Hair Atelier.</p>
  1101.                    <div class="d-flex gap-2">
  1102.                        <a href="https://www.tiktok.com/@educadora_natty" class="text-white" target="_blank" rel="noopener nofollow"><i class="fab fa-tiktok"></i></a>
  1103.                        <a href="https://web.facebook.com/nataliaandrea.castillogonzalez.9?_rdc=1&_rdr" class="text-white" target="_blank" rel="noopener nofollow"><i class="fab fa-facebook-f"></i></a>
  1104.                        <a href="https://www.instagram.com/institutohairatelier.cl/" class="text-white" target="_blank" rel="noopener nofollow"><i class="fab fa-instagram"></i></a>
  1105.                    </div>
  1106.                </div>
  1107.                <div class="col-lg-2 mb-4">
  1108.                    <h6>Cursos</h6>
  1109.                    <ul class="list-unstyled">
  1110.                        <li><a href="estilista-profesional.html">Estilista Profesional</a></li>
  1111.                        <li><a href="colorimetria.html">Colorimetría</a></li>
  1112.                        <li><a href="alisado-tratamiento.html">Alisado y Tratamiento</a></li>
  1113.                        <li><a href="educador.html">Curso de Educador</a></li>
  1114.                    </ul>
  1115.                </div>
  1116.                <div class="col-lg-2 mb-4">
  1117.                    <h6>Enlaces</h6>
  1118.                    <ul class="list-unstyled">
  1119.                        <li><a href="index.html">Inicio</a></li>
  1120.                        <li><a href="index.html#about">Nosotros</a></li>
  1121.                        <li><a href="index.html#contact">Contacto</a></li>
  1122.                        <li><a href="blog.html">Blog</a></li>
  1123.                    </ul>
  1124.                </div>
  1125.                <div class="col-lg-4 mb-4">
  1126.                    <h6>Contacto</h6>
  1127.                    <p><i class="fas fa-map-marker-alt me-2"></i>Paseo Estado 57, 8320256 Santiago, Región Metropolitana</p>
  1128.                    <p><i class="fas fa-phone me-2"></i>+56 9 4874 6695</p>
  1129.                    <p><i class="fas fa-envelope me-2"></i>cursos@institutohairatelier.cl</p>
  1130.                </div>
  1131.            </div>
  1132.            <hr class="my-4">
  1133.            <div class="text-center">
  1134.                <p>&copy; 2025 Instituto Hair Atelier. Todos los derechos reservados.</p>
  1135.                <p class="small text-muted">Sitio web desarrollado por <span class="developer-credit">Yosen</span></p>
  1136.            </div>
  1137.        </div>
  1138.    </footer>
  1139.  
  1140.    <!-- Botón flotante para Dashboard SEO -->
  1141.    <div style="position: fixed; bottom: 20px; left: 20px; z-index: 1000;">
  1142.        <a href="seo-dashboard.html" class="btn btn-dark btn-sm rounded-circle" title="Dashboard SEO" style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
  1143.            <i class="fas fa-chart-line"></i>
  1144.        </a>
  1145.    </div>
  1146.  
  1147.    <!-- Performance Monitoring -->
  1148.    <script src="js/performance-monitor.js" defer></script>
  1149.    
  1150.    <!-- Advanced Schemas -->
  1151.    <script src="js/advanced-schemas.js" defer></script>
  1152.    
  1153.    <!-- A/B Testing Framework -->
  1154.    <script src="js/ab-testing.js" defer></script>
  1155.    
  1156.    <!-- Bootstrap JS -->
  1157.    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  1158.  
  1159.    <script>
  1160.        // Mobile menu toggle
  1161.        const menuToggle = document.getElementById('menuToggle');
  1162.        const closeMenu = document.getElementById('closeMenu');
  1163.        const mobileMenu = document.getElementById('mobileMenu');
  1164.  
  1165.        menuToggle.addEventListener('click', () => {
  1166.            mobileMenu.classList.add('open');
  1167.        });
  1168.  
  1169.        closeMenu.addEventListener('click', () => {
  1170.            mobileMenu.classList.remove('open');
  1171.        });
  1172.  
  1173.        // Close menu when clicking outside
  1174.        document.addEventListener('click', (e) => {
  1175.            if (!mobileMenu.contains(e.target) && !menuToggle.contains(e.target)) {
  1176.                mobileMenu.classList.remove('open');
  1177.            }
  1178.        });
  1179.  
  1180.        // Smooth scroll for anchor links
  1181.        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  1182.            anchor.addEventListener('click', function (e) {
  1183.                e.preventDefault();
  1184.                const target = document.querySelector(this.getAttribute('href'));
  1185.                if (target) {
  1186.                    target.scrollIntoView({
  1187.                        behavior: 'smooth',
  1188.                        block: 'start'
  1189.                    });
  1190.                    // Close mobile menu if open
  1191.                    mobileMenu.classList.remove('open');
  1192.                }
  1193.            });
  1194.        });
  1195.  
  1196.        // Fade in animation on scroll
  1197.        const observer = new IntersectionObserver((entries) => {
  1198.            entries.forEach(entry => {
  1199.                if (entry.isIntersecting) {
  1200.                    entry.target.classList.add('visible');
  1201.                }
  1202.            });
  1203.        }, { threshold: 0.1 });
  1204.  
  1205.        document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
  1206.  
  1207.        // Counter animation
  1208.        const counters = document.querySelectorAll('.counter');
  1209.        counters.forEach(counter => {
  1210.            const updateCount = () => {
  1211.                const target = +counter.getAttribute('data-target');
  1212.                const count = +counter.innerText;
  1213.                const increment = target / 100;
  1214.                if (count < target) {
  1215.                  
  1216.                    counter.innerText = Math.ceil(count + increment);
  1217.                    setTimeout(updateCount, 20);
  1218.                } else {
  1219.                    counter.innerText = target + (counter.innerText.includes('+') ? '+' : '');
  1220.                }
  1221.            };
  1222.            const counterObserver = new IntersectionObserver((entries) => {
  1223.                entries.forEach(entry => {
  1224.                    if (entry.isIntersecting) {
  1225.                        updateCount();
  1226.                        counterObserver.unobserve(counter);
  1227.                    }
  1228.                });
  1229.            });
  1230.            counterObserver.observe(counter);
  1231.        });
  1232.  
  1233.        // Initialize icons
  1234.        // Removed feather.replace() as we're using FontAwesome
  1235.        
  1236.        // Share function
  1237.        function shareCurso(titulo, url) {
  1238.            if (navigator.share) {
  1239.                navigator.share({
  1240.                    title: titulo,
  1241.                    text: 'Descubre este curso en Instituto Hair Atelier',
  1242.                    url: url
  1243.                });
  1244.            } else {
  1245.                // Fallback: copy to clipboard
  1246.                if (navigator.clipboard) {
  1247.                    navigator.clipboard.writeText(url).then(function() {
  1248.                        alert('¡Enlace copiado! Puedes compartirlo donde quieras.');
  1249.                    }).catch(function(err) {
  1250.                        console.error('Error al copiar: ', err);
  1251.                        alert('No se pudo copiar el enlace automáticamente.');
  1252.                    });
  1253.                } else {
  1254.                    alert('Función de compartir no disponible.');
  1255.                }
  1256.            }
  1257.        }
  1258.    </script>
  1259.  </body>
  1260.  
  1261. </html>
  1262.  

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda