@charset "utf-8";

/* =========================
   1. FONT FACE
========================= */

@font-face {
    font-family: 'Poppins';
    src:url("../fonts/Poppins-Regular.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* =========================
   2. RESET
========================= */

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

/* =========================
   3. BASE
========================= */

body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

:root {
    --site-gutter: 40px;
}

h1, h2, h3 {
    font-family: 'Sitka Text', Georgia, serif;

}



        /* ============================================
           SUPER SALE BAR
           ============================================ */
        .super-sale-bar {
            background-color: #2D2D2D;
            color: #fff;
            padding: 10px 0;
        }
        .super-sale-container {
            width: 100%;
            margin: 0 auto;
            padding: 0 var(--site-gutter);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .super-sale-text { font-size: 12px; letter-spacing: 1.5px; font-weight: 400; }
        .super-sale-countdown { display: flex; align-items: center; gap: 6px; }
        .countdown-item { display: flex; flex-direction: column; align-items: center; min-width: 42px; }
        .countdown-number { font-size: 18px; font-weight: 600; line-height: 1; margin-bottom: 2px; }
        .countdown-label { font-size: 8px; letter-spacing: 1px; opacity: 0.75; }
        .countdown-separator { font-size: 18px; font-weight: 300; margin: 0 2px; align-self: flex-start; line-height: 1.1; }

        /* ============================================
           HEADER
           ============================================ */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px var(--site-gutter);
            background: #fff;
            position: relative;
            z-index: 100;
            border-bottom: 1px solid #e8e8e8;
        }

        /* NAV IZQUIERDA */
        .header-nav-left { 
			display: flex;
			align-items: center;
			flex: 1;
			padding-left: 0;
			padding-top: 10px;
			padding-bottom: 10px;
}
        .header-nav-left a {
			text-decoration: none;
            color: #222;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            padding: 8px 12px;
            transition: color 0.25s;
            white-space: nowrap;
            position: relative;
        }
        .header-nav-left a:first-child { padding-left: 0; }
        .header-nav-left a:hover { color: #C0C0C0; }
        .header-nav-left a.sale-link { color: #C0C0C0; }
        .header-nav-left a.mega-trigger.active { color: #000; font-weight: 600; }
        .header-nav-left a.mega-trigger.active::after {
            content: '';
            position: absolute;
            bottom: -22px;
            left: 0; right: 0;
            height: 2px;
            background: #000;
        }

        /* LOGO CENTRADO */
        .logo {
            position: absolute;
            left: 50%;
			background-image:url("../img/logob.jpg");
            transform: translateX(-50%);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            z-index: 999;
			width: 400px;
			height: 76px;
        }

        /*.logo-circle {
            width: 52px;
            height: 52px;
            border: 1.5px solid #222;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }*/

.logo-circle {
    width: 320px;
	height: 88px;
    background-image:url("../img/logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	display: flex;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
	gap: 5px;
    z-index: 101;
	flex-direction: column;
}

     

        /* ICONOS DERECHA */
        .header-icons-right {
            display: flex;
            align-items: center;
            gap: 4px;
            justify-content: flex-end;
            flex: 1;
        }
        .currency-selector {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            letter-spacing: 0.5px;
            color: #333;
            cursor: pointer;
            padding: 5px 8px;
            border: none;
            background: none;
        }
        .flag-spain { width: 22px; height: 15px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
        .chevron-down { width: 10px; height: 10px; stroke: #333; fill: none; stroke-width: 2; }

        /* SELECTORES IDIOMA / MONEDA */
        .sb-switcher { position: relative; }
        .sb-switcher .sb-flag { width: 22px; height: 15px; border-radius: 2px; object-fit: cover; flex-shrink: 0; }
        .sb-switcher .globe { width: 15px; height: 15px; flex-shrink: 0; }
        .sb-switcher-menu {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 155px;
            background: #fff;
            border: 1px solid #e8e8e8;
            box-shadow: 0 10px 30px rgba(0,0,0,0.10);
            z-index: 1050;
            padding: 6px 0;
        }
        .sb-switcher-menu.open { display: block; }
        .sb-switcher-menu a {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            text-decoration: none;
            color: #333;
            font-size: 11.5px;
            letter-spacing: 0.4px;
            white-space: nowrap;
        }
        .sb-switcher-menu a:hover { background: #f5f5f5; }
        .sb-switcher-menu a.active { font-weight: 600; }
        .sb-switcher-menu .sb-flag { width: 22px; height: 15px; }
        .sb-switcher-menu .sb-flag-text {
            width: 22px; height: 15px;
            border-radius: 2px;
            border: 1px solid #e2e2e2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            letter-spacing: 0.5px;
            font-weight: 700;
            color: #555;
            flex-shrink: 0;
        }
        .icon-btn {
            background: none;
            border: none;
            cursor: pointer;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.2s;
        }
        .icon-btn:hover { background: #f5f5f5; }
        .icon-btn svg { width: 20px; height: 20px; stroke: #333; fill: none; stroke-width: 1.4; }

        /* ============================================
           MEGA MENU
           ============================================ */
        .mega-menu-wrapper { position: relative; z-index: 99; }

        .mega-menu {
            position: absolute;
            top: 0; left: 0; right: 0;
            background: #fff;
            border-top: 1px solid #e8e8e8;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            display: none;
        }
        .mega-menu.active { display: block; }

        .mega-menu-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 48px 60px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
        }
        .mega-img-col3 { grid-column: 3; grid-row: 1; }
        .mega-img-col4 { grid-column: 4; grid-row: 1; }
        .mega-section h3 {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 22px;
            color: #111;
        }
        .mega-section ul { list-style: none; }
        .mega-section li { margin-bottom: 11px; }
        .mega-section a {
            color: #666;
            text-decoration: none;
            font-size: 12.5px;
            letter-spacing: 0.3px;
            transition: color 0.2s;
        }
        .mega-section a:hover { color: #000; }

        .mega-image { position: relative; overflow: hidden; aspect-ratio: 3/4; background: #f0f0f0; }
        .mega-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .mega-image:hover img { transform: scale(1.05); }
        .mega-image-label {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            background: rgba(255,255,255,0.95);
            padding: 14px;
            text-align: center;
        }
        .mega-image-label h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 4px; color: #111; }
        .mega-image-label a { color: #555; font-size: 11px; text-decoration: underline; }

        /* ============================================
           HAMBURGER (solo mobile)
           ============================================ */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
            flex-direction: column;
            gap: 5px;
            flex-shrink: 0;
        }
        .mobile-menu-btn span { display: block; width: 22px; height: 1.5px; background: #333; transition: 0.3s; }

        /* ============================================
           MOBILE MENU
           ============================================ */
        .mobile-menu {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #fff;
            z-index: 300;
            overflow-y: auto;
        }
        .mobile-menu.active { display: block; }
        .mobile-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid #e8e8e8;
        }
        .mobile-close { background: none; border: none; font-size: 28px; cursor: pointer; color: #333; line-height: 1; }
        .mobile-nav { padding: 10px 0; }
        .mobile-nav a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 24px;
            border-bottom: 1px solid #f0f0f0;
            text-decoration: none;
            color: #222;
            font-size: 11.5px;
            font-weight: 500;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            transition: background 0.2s;
        }
        .mobile-nav a:hover { background: #fafafa; }
        .mobile-nav a.sale-link { color: #c00; }
        .mobile-submenu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; background: #fafafa; }
        .mobile-submenu.active { max-height: 700px; }
        .mobile-submenu a { padding: 12px 24px 12px 36px; font-size: 11px; color: #555; letter-spacing: 0.8px; border-bottom: 1px solid #f0f0f0; }
        .mobile-subsection { padding: 0; }
        .mobile-subsection .mobile-heading { display: block; padding: 12px 24px 6px 36px; font-size: 10px; color: #222; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
        .mobile-subsection a { padding: 8px 24px 8px 36px; font-size: 11px; color: #555; letter-spacing: 0.8px; display: block; border-bottom: 1px solid #f0f0f0; text-decoration: none; }
        .submenu-arrow { width: 14px; height: 14px; stroke: #999; fill: none; stroke-width: 2; transition: transform 0.3s; flex-shrink: 0; }
        .submenu-arrow.open { transform: rotate(180deg); }
        .mobile-footer-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
            padding: 24px;
            border-top: 1px solid #e8e8e8;
            margin-top: 10px;
        }
        .mobile-footer-icons .icon-btn { width: 42px; height: 42px; }

        /* ============================================
           RESPONSIVE
           ============================================ */
        @media (max-width: 1100px) {
            :root {
                --site-gutter: 24px;
            }
            .header-nav-left a { padding: 8px 9px; font-size: 10px; letter-spacing: 0.7px; }
        }
        @media (max-width: 900px) {
            .header-nav-left { display: none; }
            .mobile-menu-btn { display: flex; }
            header { padding: 16px 20px; }
            .logo-circle { width: 44px; height: 44px; }
            .logo-name { font-size: 9px; letter-spacing: 2.5px; }
            .mega-menu { display: none !important; }
            .currency-selector span { display: none; }
        }
        @media (max-width: 480px) {
            :root {
                --site-gutter: 20px;
            }
            .super-sale-bar { padding: 10px 0; }
            .super-sale-container { flex-direction: column; gap: 10px; text-align: center; }
            .super-sale-text { font-size: 10px; letter-spacing: 1px; }
            .countdown-number { font-size: 15px; }
            .countdown-label { font-size: 7px; }
            .countdown-separator { font-size: 15px; }
        }

        /* Demo Hero */
        .hero-demo {
            height: 70vh;
            min-height: 400px;
			background: url("../img/banner_port1.png");
            
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .hero-demo-text { color: #fff; font-family: Poppins; font-size: 21px; letter-spacing: 0px; text-transform: uppercase; margin-bottom: 16px; opacity: 0.9; }

        .hero-demo h1 { color: #fff; font-size: clamp(28px,5vw,52px); font-weight: 300; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 32px;
font-family: 'Sitka Text', Georgia, serif;}

        .shop-btn { background: #F2F1EF; color: #2D2D2D; border: none; padding: 14px 42px; font-size: 17px; font-weight: 300; letter-spacing: 0px; text-transform: uppercase; cursor: pointer; transition: all 0.25s; font-family: Poppins; }

        .shop-btn:hover { background: #2D2D2D; color: #fff; }






.divisor {
  width: 90%;
  height: 1px;
  background-color: #B2B2B2;
  margin: 48px auto;
}



/* Instag */

.instag-section {
      /*background: var(--looks-bg);*/
		background-color: none;
      padding: 60px 20px 80px;
      font-family: 'Jost', sans-serif;
    }
    .instag-header {
      text-align: center;
      margin-bottom: 48px;
    }
    .instag-header__eyebrow {
      font-family: 'Poppins';
      font-size: 21px;
      font-weight: 400;
      letter-spacing: 0;
      color: #2D2D2D;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .instag-header__title {
      font-family: 'Sitka Text', Georgia, serif;
      font-size: 42px;
      font-weight: 400;
      color: #2D2D2D;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      line-height: 1;
    }



/* Instagram fotos */
.instagram-row {
  display: flex;
  gap: 20px;           /* Espacio entre las fotos */
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  overflow-x: auto;    /* Por si la pantalla es muy chica, permite scroll */
}

.instagram-row .instagram-media {
  flex: 1 1 0px;       /* Obliga a que todas midan lo mismo */
  min-width: 200px;    /* Evita que se aplasten demasiado en móviles */
  margin: 0 !important; /* Quita márgenes extra de Instagram */
}