* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Quicksand', sans-serif;
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="%23ff4d6d"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') 10 10, auto !important;
    }

    body {
      color-scheme: light;
      margin: 0;
      overflow: hidden;
      /* Prevent double scrollbars */
      background: url('../assets/Fotos/background_clouds_v2.webp') no-repeat center center fixed;
      background-size: cover;
      /* Fallback */
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="%23ff4d6d"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') 10 10, auto;
    }

    /* --- Custom Selection --- */
    ::selection {
      background: #ff4d6d;
      color: #fff;
      text-shadow: 0 0 5px #fff;
    }

    /* --- Iframe Background --- */
    .background-frame {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      border: none;
      z-index: 0;
      filter: blur(10px);
      /* Heavy blur as requested */
      transform: scale(1.02);
      /* Remove blurred edges */
      pointer-events: none;
      /* Non-interactive background */
    }

    /* --- Header --- */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(255, 154, 158, 0.8);
      /* Slightly more transparent to blend with blur */
      backdrop-filter: blur(5px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 50px;
      z-index: 3002;
      box-shadow: 0 4px 15px rgba(255, 105, 180, 0.2);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid #ff4d6d;
      box-shadow: 0 0 10px #ff4d6d;
      animation: heartbeat 1.5s infinite;
    }

    @keyframes heartbeat {
      0% {
        transform: scale(1);
      }

      15% {
        transform: scale(1.15);
        box-shadow: 0 0 20px #ff4d6d;
      }

      30% {
        transform: scale(1);
      }

      45% {
        transform: scale(1.15);
        box-shadow: 0 0 20px #ff4d6d;
      }

      60% {
        transform: scale(1);
      }

      100% {
        transform: scale(1);
      }
    }

    .beating-heart {
      display: inline-block;
      animation: heartbeat-text 1.5s infinite;
    }

    @keyframes heartbeat-text {
      0% {
        transform: scale(1);
      }

      15% {
        transform: scale(1.25);
      }

      30% {
        transform: scale(1);
      }

      45% {
        transform: scale(1.25);
      }

      60% {
        transform: scale(1);
      }

      100% {
        transform: scale(1);
      }
    }

    .logo span {
      font-family: 'Poppins', sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* --- Navigation --- */
    nav ul {
      list-style: none;
      display: flex;
      gap: 20px;
      align-items: center;
    }

    nav ul li {
      position: relative;
      /* Fixed: Submenu alignment */
    }

    nav ul li a {
      text-decoration: none;
      color: #fff;
      font-weight: 600;
      font-size: 1rem;
      padding: 6px 12px;
      border-radius: 20px;
      transition: all 0.3s ease;
    }

    nav ul li a:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-2px);
    }

    /* --- Submenu Interaction (Robust Mouse/Touch) --- */
    nav ul li.parent-active>a,
    nav ul li a.active-page {
      background: #fff;
      color: #ff4d6d !important;
      font-weight: 700;
      box-shadow: 0 4px 10px rgba(255, 77, 109, 0.3);
    }

    /* Submenu adapted for Pink Theme */
    .submenu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: rgba(255, 255, 255, 0.95);
      padding: 10px 0;
      border-radius: 12px;
      min-width: 200px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      z-index: 25;
    }

    .submenu li a {
      color: #ff4d6d !important;
      /* Pink text for dropdown */
      display: block;
      border-radius: 0;
      white-space: nowrap;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      /* Match consistent style */
    }

    .submenu li a:hover {
      background: #ffe6e9;
    }

    /* Only allow CSS hover on devices with a fine pointer (Mouse/Trackpad) */
    @media (hover: hover) and (pointer: fine) {
      nav ul li:hover .submenu {
        display: block;
      }
    }

    /* For touch devices, we toggle this class via JS */
    nav ul li.touch-open .submenu {
      display: block;
    }


    /* --- Mobile Menu Styles (Ported from casting.html & Pink Themed) --- */
    .menu-toggle {
      display: none;
      font-size: 1.8rem;
      color: #fff;
      cursor: pointer;
      z-index: 3003;
      transition: transform .3s
    }

    .menu-toggle:hover {
      transform: scale(1.1);
      color: #ff4d6d;
    }

    /* Important: Override nav display for mobile and Tablet Portrait */
    @media (max-width: 900px),
    (max-width: 1025px) and (orientation: portrait) {
      nav {
        display: none;
        /* Hide default nav */
      }

      .menu-toggle {
        display: block;
      }

      .logo img {
        width: 35px;
        height: 35px
      }

      .logo span {
        font-size: 1.1rem
      }

      header {
        padding: 15px 20px;
        z-index: 3002;
        /* Ensure header is above menu */
      }
    }

    .nav-mobile {
      position: fixed;
      top: 0;
      right: -300px;
      width: 280px;
      height: 100%;
      background: rgba(255, 182, 193, 0.98);
      /* Pink Background */
      box-shadow: -5px 0 15px rgba(255, 105, 180, 0.3);
      padding-top: 80px;
      padding-top: 80px;
      z-index: 3000;
      transition: right .4s ease-out;
      display: flex;
      flex-direction: column;
      overflow-y: auto
    }

    .nav-mobile.open {
      right: 0
    }

    .nav-mobile ul {
      list-style: none;
      padding: 0;
      display: block
    }

    .nav-mobile li a {
      display: block;
      padding: 15px 25px;
      color: #fff;
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      font-weight: 600;
      transition: background .2s
    }

    .nav-mobile li.parent-active>a {
      color: #ff4d6d;
      /* Bright Starmark Red/Pink */
      text-shadow: 1px 1px 0 #fff;
      /* White outline for contrast */
      font-weight: 800;
    }

    @media (hover: hover) {
      .nav-mobile li a:hover {
        background: rgba(255, 255, 255, 0.25);
        color: #ff4d6d;
        text-shadow: 1px 1px 0 #fff;
      }
    }

    .nav-mobile li a.active-page {
      color: #ff4d6d;
      /* Bright Starmark Red/Pink */
      text-shadow: 1px 1px 0 #fff;
      font-weight: 800;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      background: transparent;
      box-shadow: none;
      border-radius: 0;
      border-left: none;
      margin: 0;
    }

    .nav-mobile .submenu {
      display: none;
      /* Hidden by default */
      position: static;
      background: rgba(255, 255, 255, 0.15);
      box-shadow: none;
      min-width: auto;
      padding: 0;
    }

    .nav-mobile .submenu li a {
      color: #fff !important;
      padding-left: 40px;
      font-size: 0.95rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Submenu item active style */
    .nav-mobile .submenu li a.active-page {
      background: #db3a5a;
      /* Deep Pink/Red */
      color: #fff !important;
      border-radius: 10px;
      border-left: 5px solid #d4af37;
      border-bottom: none;
      margin: 5px 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    /* --- Mobile Portrait Optimization (Card Fix) --- */
    @media (max-width: 900px) and (orientation: portrait) {
      .overlay-message {
        width: 85%;
        /* Slightly narrower to be safe */
        max-width: 360px;
        padding: 30px 15px;
        /* Less side padding */
        border-radius: 30px;
      }

      .overlay-message h2 {
        font-size: 8vw;
        /* Responsive size: Scales with screen width */
        font-size: min(2.5rem, 9vw);
        /* Modern support: cap at 2.5rem but shrink if needed */
        line-height: 1.2;
        word-wrap: normal;
      }

      .overlay-message p {
        font-size: 1rem;
        margin-top: 10px;
      }
    }

    /* --- Landscape Mode Optimization (Phones) --- */
    @media (max-width: 900px) and (orientation: landscape) {
      .nav-mobile {
        padding-top: 60px;
      }

      .nav-mobile li a {
        padding: 8px 25px;
        font-size: 0.9rem;
      }

      .logo img {
        width: 35px;
        height: 35px;
      }

      header {
        padding: 5px 20px;
      }

      /* Overlay adjustment for landscape */
      .overlay-message {
        padding: 20px 40px;
      }

      .overlay-message h2 {
        font-size: 2rem;
      }

      .overlay-message p {
        font-size: 1rem;
        margin-top: 5px;
      }
    }

    /* --- Tablet/Desktop Landscape Optimization (iPad and Pro Max) --- */
    /* --- Tablet/Desktop Compact Mode (Landscape/Laptops) --- */
    /* SMART SCALING: Uses viewport units to auto-adjust for Pixel 7 (915px) up to Laptops (1400px) */
    @media (min-width: 901px) and (max-width: 1400px) {
      header {
        padding: 5px 1.5vw;
        /* Dynamic side padding */
        justify-content: space-between;
        /* Ensure maximal spread */
      }

      .logo {
        white-space: nowrap;
        margin-right: auto;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .logo img {
        width: clamp(25px, 3vw, 32px);
        /* Scale logo icon */
        height: clamp(25px, 3vw, 32px);
      }

      .logo span {
        font-size: clamp(0.7rem, 1.2vw, 1rem);
        /* Scale logo text, allowing it to get smaller but remain visible */
      }

      /* Logo text restored per user request - dynamic scaling handles the fit */

      nav ul {
        gap: clamp(2px, 0.5vw, 8px);
        /* Dynamic gap: shrinks on small screens */
      }

      nav ul li a {
        font-size: clamp(0.7rem, 1.1vw, 0.85rem);
        /* Smart font size */
        padding: 5px clamp(5px, 0.8vw, 10px);
        /* Dynamic padding */
        white-space: nowrap;
      }

      /* COMPACT PILL STYLE (Smart Scaled) */
      nav ul li a.active-page {
        background: #fff !important;
        color: #ff4d6d !important;
        border-radius: 15px;
        padding: 5px clamp(8px, 1.2vw, 14px) !important;
        /* Pill padding also scales */
        box-shadow: 0 2px 5px rgba(255, 77, 109, 0.2) !important;
        border-bottom: none;
      }
    }

    /* --- Centered Overlay --- */
    .overlay-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 50;
      /* Above iframe, below header */
      pointer-events: none;
      /* Let clicks pass if needed, though background is blurred */
    }

    .overlay-message {
      background: rgba(255, 255, 255, 0.9);
      padding: 50px 80px;
      border-radius: 50px;
      box-shadow: 0 20px 60px rgba(255, 77, 109, 0.5);
      /* Strong pink glow */
      border: 4px solid #ff4d6d;
      text-align: center;
      animation: pulseFloat 3s ease-in-out infinite;
      pointer-events: auto;
    }

    @keyframes pulseFloat {

      0%,
      100% {
        transform: scale(1);
        box-shadow: 0 20px 60px rgba(255, 77, 109, 0.5);
      }

      50% {
        transform: scale(1.03);
        box-shadow: 0 30px 80px rgba(255, 77, 109, 0.7);
      }
    }

    .overlay-message h2 {
      font-family: 'Dancing Script', cursive;
      font-size: 4rem;
      background: -webkit-linear-gradient(#ff4d6d, #ff8fa3);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .overlay-message p {
      font-size: 1.3rem;
      color: #7a2048;
      font-weight: 600;
      margin-top: 15px;
      font-family: 'Quicksand', sans-serif;
    }

    /* Footer (Hidden or Minimal since it's an overlay page) - User requested only the box */
    /* We can keep the footer in the iframe visible (blurred), no need to add another one here */