/* --- Reset --- */
    * {margin:0;padding:0;box-sizing:border-box;}
    body {
      margin:0;
      font-family: "Inter", sans-serif;
      color: #fff;
      background:#1A181B;}
.desktop-only { display: flex; }
/* --- Barra superior --- */
    .top-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background:#f06292;
      color:#fff;
      text-align:center;
      padding:9px 0;
      font-size:14px;
      z-index: 1100;
      transition: transform 0.3s ease;}
    .top-bar.hide {
      transform: translateY(-100%);}
/* --- Header principal --- */
    header {
      position:fixed;
      top:30px; /* espacio cuando la top-bar está visible */
      width:100%;
      background:#000000;
      z-index:1000;
      box-shadow:0 2px 5px rgba(0,0,0,0.1);
      transition: top 0.1s ease, padding 0.3s ease;}
    .header-inner {
      display: flex;
      justify-content: space-between; /* Distribuye espacio entre las 3 columnas */
      align-items: center; /* Centra verticalmente todos los elementos */
      padding: 15px 20px; /* Añade un poco de padding lateral */
      transition: padding 0.3s ease;}
/* Las tres "columnas" principales */
    .header-left,
    .logo-container,
    .language-selector {
      flex: 1; /* Cada columna ocupa 1/3 del espacio disponible */
      display: flex;
      justify-content: center; /* Centra el contenido dentro de cada columna */
      align-items: center;} /* Centra verticalmente el contenido */
/* Alineaciones específicas para cada columna */
    .header-left {
      justify-content: flex-start;} /* Contenido a la izquierda */
    .language-selector {
      justify-content: flex-end;}
/* --- Estilos del Selector de Idiomas (Se mantienen igual) --- */
    .language-selector {
      position: relative; /* Cambiado de absolute a relative */
      z-index: 1001;}
    .lang-current {
      background: transparent;
      color: #ffffff;
      border: none;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      padding: 5px 10px;
      text-transform: uppercase;
      transition: color 0.3s;}
    .lang-current:hover {
      color: #ff6b6b;}
    .lang-dropdown {
      display: none;
      position: absolute;
      right: 0;
      top: 100%;
      background: #1a1a1a;
      list-style: none;
      padding: 10px 0;
      margin: 0;
      min-width: 100px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.5);
      border-radius: 4px;}
    .lang-dropdown.show-lang {
        display: block !important;}
/* Opcional: añade un pequeño indicador visual de que es un botón activo */
    .lang-current {
      outline: none;}
    .lang-dropdown li a {
      display: block;
      padding: 8px 15px;
      color: #ffffff;
      text-decoration: none;
      font-size: 12px;
      transition: background 0.2s;}
    .lang-dropdown li a:hover {
      background: #333;
      color: #ff6b6b;}
/* El logo se mantiene en su contenedor central */
    .logo {
      max-width: 180px;
      transition: all 0.3s ease;}
/* --- Nav --- */
    nav {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin: 10px 0;}
    nav a {
      text-decoration: none;
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      position: relative;}
    nav a.active {
      font-weight: bold;}
    nav a.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: #ff6b6b; /* Tu color coral/rojo */
      bottom: -6px;} /* Espacio entre el texto y la línea */
/* --- Scroll efecto --- */
    .shrink .header-inner {
      padding:5px 0;}
    .shrink .logo {
      max-width:120px;}

    .slider {
      margin-top: 145px;
      position: relative;
      width: 100%;
      height: 600px; /* altura fija */
      overflow: hidden;}
    .slides {
      display: flex;
      width: 100%; /* 4 imágenes */
      height: 100%;
      transition: transform 0.8s ease-in-out;}
    .slides img {
      width: 100%;
      height: 600px;
      object-fit: cover; /* se ajusta bien */
      flex-shrink: 0;}
    .slider button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      border: none;
      color: #fff;
      font-size: 30px;
      width: 50px;
      height: 50px;
      padding: 10px;
      cursor: pointer;
      border-radius: 50%;
      z-index: 10;
      display: flex;
      justify-content: center;
      align-items: center;}
    .prev {left: 20px;}
    .next {right: 20px;}
    .main-container {
      max-width: 1400px; /* Ancho máximo para el contenido */
      margin: 0 auto;    /* Centra el contenedor horizontalmente */
      padding: 0 10px;} /* Agrega un espacio de 50px a los lados */
    .contenedores {
      display: flex;
      gap: 20px; /* separación entre contenedores */
      margin: 20px 0;}
    .contenedor-1 {
      flex: 1;
      border: 1px solid #ccc;
      border-radius: 10px;
      position: relative;
      padding: 10px;
      overflow: hidden;}
    .contenedor-2 {
      flex: 2; /* Ocupa 2 partes del espacio (el doble que el contenedor 1) */
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 10px;
      margin-right: -30px;
      text-align: center;
      position: relative;
      overflow: hidden;}
    .contenedor-1 img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 0;}
    .contenedor-2 img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 0;
      margin-bottom: 0;}

    .contenedor-2 .info-overlay {
        position: absolute;
        bottom: 10px; 
        left: 10px;
        width: calc(100% - 20px); 
        padding: 40px 15px 15px 15px; 
        box-sizing: border-box;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
        text-align: left;
        border-radius: 0; 
        pointer-events: none;}
    .link-perfil-completo {
      text-decoration: none;
      display: block;
      position: relative;
      width: 100%;
      height: 100%;}

/* --- ESTILOS PARA LOS DESTACADOS --- */
    .info-overlay {
        position: absolute;
        /* Ajustamos al padding del contenedor para que no se salga */
        bottom: 13px; 
        left: 10px;
        /* Calculamos el ancho exacto: 100% menos los 20px de padding (10 izq + 10 der) */
        width: calc(100% - 20px); 
        padding: 40px 15px 15px 15px; 
        box-sizing: border-box;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
        text-align: left;
        /* Esto asegura que el degradado termine justo donde termina la foto */
        border-radius: 0;}
    .pildora {
      background-color: #eb5885;
      color: white;
      padding: 4px 12px;
      border-radius: 20px;
      font-weight: bold;
      font-size: 13px;
      display: inline-block;
      margin-bottom: 6px;
      text-transform: uppercase;
      text-shadow: none;}
    .nombre-edad {
      margin: 0;
      color: white;
      font-size: 18px;
      font-weight: 600;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);}
    .ubicacion {
      margin: 0;
      color: white;
      font-size: 15px;
      opacity: 0.9;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);}

/* --- ESTILOS PARA PUBLICAR-ANUNCIO --- */
    .hero-promo {
        position: relative;
        height: 100vh; /* Ocupa toda la pantalla */
        width: 100%;
        background-image: url('https://www.onyce.net/img/thumbs/bg-04.webp'); 
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
        font-family: 'Arial', sans-serif; /* HBO usa una fuente similar a Gilmer o Montserrat */
        overflow: hidden;}
/* Capa de oscurecimiento y viñeta */
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Gradiente que oscurece el centro y mucho más los bordes inferior y superior */
        background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%),
                    linear-gradient(to bottom, black 0%, transparent 15%, transparent 85%, black 100%);
        z-index: 1;}
/* Bloque de texto */
    .content {
        position: relative;
        z-index: 2;
        max-width: 800px;
        padding: 20px;}
    .eyebrow {
        font-size: 1.2rem;
        letter-spacing: 4px;
        font-weight: bold;
        margin-bottom: 10px;
        text-transform: uppercase;}
    .main-offer {
        font-size: 4rem;
        font-weight: 800;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;}
    .percentage {
        font-size: 8rem; /* El 50% es mucho más grande */
        margin-left: 15px;}
    .asterisk {
        font-size: 2rem;
        vertical-align: top;
        margin-top: -40px;}
    .subtitle {
        font-size: 1.1rem;
        letter-spacing: 2px;
        font-weight: bold;
        margin-top: -10px;
        margin-bottom: 30px;
        text-transform: uppercase;}
/* Botón */
    .btn-subscribe {
        display: inline-block;
        background-color: white;
        color: black;
        text-decoration: none;
        padding: 15px 40px;
        border-radius: 50px;
        font-weight: bold;
        font-size: 0.9rem;
        text-transform: uppercase;
        transition: transform 0.2s ease;
        text-decoration: none;
        cursor: pointer;}
    .btn-subscribe:hover {
        transform: scale(1.05);
        background-color: #f0f0f0;}
/* Texto legal pequeño */
    .disclaimer {
        margin-top: 40px;
        font-size: 0.75rem;
        opacity: 0.8;}

    .pricing-section {
        background-color: #000000;
        color: white;
        margin-top: -150px;
        position: relative;
        z-index: 10;
        padding-top: 40px;
        padding: 60px 20px;
        text-align: center;
        font-family: 'Arial', sans-serif;}
    .pricing-section h2 {
        font-size: 2rem;
        letter-spacing: 1px;
        margin-bottom: 10px;}
    .promo-text {
        font-size: 0.8rem;
        font-weight: bold;
        letter-spacing: 2px;
        margin-bottom: 25px;}
/* Cards PLANES*/
    .plans-container {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        max-width: 1200px;
        margin: 0 auto;}
    .plan-card {
        background: #ffffff;;
        color: black;
        border-radius: 8px;
        padding: 30px;
        width: 320px;
        display: flex;
        flex-direction: column;
        text-align: left;
        min-height: 400px;}
    .card-header h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;}
    hr {
        border: 0;
        border-top: 1px solid #eee;
        margin-bottom: 25px;}
/* Lista de Beneficios */
    .features {
        list-style: none;
        padding: 0;
        margin: 0;
        flex-grow: 1;}
    .features li {
        font-size: 0.9rem;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        color: #333;}
    .icon {
        margin-right: 12px;
        width: 20px;
        text-align: center;}
/* Botón de la Card */
    .btn-select {
        background-color: #000000;
        color: white;
        border: none;
        padding: 15px;
        border-radius: 50px;
        font-weight: bold;
        cursor: pointer;
        text-transform: uppercase;
        transition: background 0.3s;}
    .btn-select:hover {
        background-color: #c81d4a;}
    .btn-select.whatsapp-link {
        display: inline-block; /* Permite que respete paddings y márgenes */
        text-decoration: none; /* Quita el subrayado azul por defecto de los enlaces */
        text-align: center;} /* Los demás estilos (colores, bordes, etc.) ya los tienes en tu clase previa */
    .legal-footer {
        max-width: 1000px;
        margin: 40px auto 0;
        font-size: 0.7rem;
        color: #e6e6e6;
        line-height: 1.4;}
    .legal-footer a { color: #e2e2e2; text-decoration: underline; }

/* PUBLICIDAD banner */
    .banner-container {
        width: 100%;
        max-width: 1300px; /* Ajusta este valor al ancho máximo de tu 'contenedor-anuncios' */
        margin: 20px auto; /* Lo centra horizontalmente y da espacio arriba/abajo */
        padding: 0 15px;   /* Evita que toque los bordes en móviles */
        display: flex;
        justify-content: center;}
    .banner-container-top {
        width: 100%;
        max-width: 1300px; /* Ajusta este valor al ancho máximo de tu 'contenedor-anuncios' */
        margin: 20px auto; /* Lo centra horizontalmente y da espacio arriba/abajo */
        margin-top: 170px;
        padding: 0 15px;   /* Evita que toque los bordes en móviles */
        display: flex;
        justify-content: center;}
/* La imagen del banner */
    .banner-img {
        width: 100%;       /* Ocupa todo el ancho de su contenedor */
        height: auto;      /* Mantiene la proporción 1920x240 */
        display: block;    /* Elimina espacios fantasma abajo */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Opcional: le da profundidad */
        transition: transform 0.3s ease;}

    .sticky-banner {
        position: fixed;
        bottom: -100px; /* Empieza fuera de la pantalla para el efecto */
        left: 0;
        width: 100%;
        background-color: #031525; /* Azul muy oscuro tipo HBO */
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 5%;
        height: 80px;
        z-index: 9999;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
        transition: all 0.6s ease-in-out; /* Controla la suavidad del fade e ingreso */
        opacity: 0;
        visibility: hidden;}
/* Clase que activará el JavaScript */
    .sticky-banner.active {
        bottom: 0;
        opacity: 1;
        visibility: visible;}
    .banner-message { display: flex; align-items: center; gap: 30px; font-family: 'Inter', sans-serif; }
    .eye-brow { font-size: 0.7rem; letter-spacing: 2px; color: #aaa; font-weight: 700; }
    .title { font-size: 1.1rem; font-weight: 900; }
    .percent-age { font-size: 2.8rem; font-weight: 900; line-height: 1; }
    .prefix { font-size: 0.7rem; font-weight: 800; margin-right: 8px; }
    .btn-subscribe-banner {
        background: white;
        color: black;
        text-decoration: none;
        padding: 12px 25px;
        border-radius: 4px;
        font-weight: 800;
        font-size: 0.85rem;
        transition: 0.3s;}
    .banner-logo-container {
        height: 100%;
        display: flex;
        align-items: center; /* Centrado vertical perfecto */
        padding-left: 20px;} /* Espacio desde el borde izquierdo */
    /* La imagen del logo */
    .banner-logo-img {
        height: 35px;       /* Tamaño reducido para que no sature el banner */
        width: auto;        /* Mantiene la proporción original */
        object-fit: contain;
        opacity: 0.9;       /* Un toque sutil para que no brille más que la oferta */
        transition: opacity 0.3s;}

    .newsletter-section {
      display: flex;
      align-items: stretch;
      margin: 40px 0;}
    .newsletter-text {
      flex: 0.3;
      background: #000;
      color: #fff;
      display: flex;
      border-radius: 10px 0 0 10px;
      flex-direction: column;
      justify-content: center;
      padding: 40px;}
    .newsletter-text h2 {
      font-size: 1.8rem;
      margin-bottom: 10px;}
    .newsletter-text p {
      font-size: 1rem;
      margin-bottom: 20px;}
    .newsletter-btn {
      background: transparent;
      border: 2px solid #fff;
      color: #fff;
      max-width: 200px;
      text-decoration: none;
      text-align: center;
      padding: 10px 20px;
      cursor: pointer;
      font-size: 1rem;
      border-radius: 30px;
      transition: all 0.3s ease;}
    .newsletter-btn:hover {
      background: #fff;
      color: #000;}
    .newsletter-image {
      flex: 1.7;
      display: flex;
      max-width: 883px;}
    .newsletter-image img {
      width: 100%;
      border-radius: 0 10px 10px 0;
      object-fit: cover;}

    .seccion-titulo {
      display: flex;
      align-items: center;
      font-family: 'Arial', sans-serif;
      font-weight: bold;
      font-size: 1.1rem;
      color: #ffffff;
      max-width: 1380px;
      margin: auto;
      border-bottom: 1px solid #ccc; /* línea gris inferior */
      padding-bottom: 4px;
      margin-top: 30px;
      margin-bottom: 30px;}
    .seccion-titulo .punto {
      width: 16px;
      height: 16px;
      background-color: #ee4679; /* rojo */
      border-radius: 50%;
      display: inline-block;
      margin-right: 10px;}
    .anuncios-premium{
      margin-top: 170px;}
    .anuncios-masajistas{
      margin-top: 20px;
      margin-bottom: 20px;}

/* CARDS */
    .contenedor-anuncios {
      max-width: 1400px; 
      margin: 0 auto;    /* Centra el contenedor horizontalmente */
      display: flex;
      flex-wrap: wrap;        /* Permite que pasen a otra fila si no entran */
      justify-content: center; /* Centra las cards en el contenedor */
      gap: 20px;}              /* Espacio entre cards */

    .anuncio-publicitario {
      position: relative;
      flex: 1 1 calc(25% - 20px); /* 3 por fila en desktop */
      max-width: 260px;               /* límite de ancho */
      min-width: 250px;               /* evita que se achiquen demasiado */
      box-sizing: border-box;}
      /* Reset pequeño (opcional) */
    .profile-card { text-decoration: none; color: inherit; }
    /* Contenedor */
    .profile-card{
      display: block;
      width: 100%;
      max-width: 340px; /* ajustar según diseño */
      border: 1px solid #e1e1e1;
      border-radius: 10px;
      overflow: hidden;
      background: black;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      transition: transform .12s ease, box-shadow .12s ease;
      margin: 0 auto;}
    .profile-link {
      text-decoration: none !important; /* Elimina el subrayado */
      color: inherit;                  /* Hereda el color blanco del contenedor */
      display: block;}
    /* Badge (arriba izquierda) */
    .tag{
      position: absolute;
      z-index: 5;
      background: #eb5885;
      color: #fff;
      font-weight:700;
      font-size: 11px;
      padding: 6px 10px;
      border-radius: 20px;
      margin: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);}
    .badge-back{
      position: absolute;
      z-index: 5;
      background: #000000;
      color: #fff;
      font-weight:700;
      font-size: 11px;
      padding: 6px 10px;
      border-radius: 20px;
      margin: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);}
    .badge-recent{
      position: absolute;
      z-index: 5;
      background: #c81d4a;
      color: #fff;
      font-weight:700;
      font-size: 11px;
      padding: 6px 10px;
      border-radius: 20px;
      margin: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);}
    .badge-refresh{
      position: absolute;
      z-index: 5;
      background: #25fc76;
      color: #050505;
      font-weight:700;
      font-size: 11px;
      padding: 6px 10px;
      border-radius: 20px;
      margin: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);}
    .badge-refresh i{
      color: #050505;}
    /* imagen como background para mantener proporción y cropping */
    .image-wrap{
      width: 100%;
      height: 420px; /* ajustar para ratio similar a la imagen */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: block;
      position: relative;}
    .image-wrap::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 45%;
      background: linear-gradient(to top, rgba(0,0,0,1.5), transparent);
      pointer-events: none;}
    /* cuerpo del card */
    .card-body{
      padding: 18px 16px 20px;
      text-align: center;
      padding-bottom: 5px; /* Reducimos el padding inferior para acercar el botón */}
    /* título / nombre */
    .name, .card-location {
      text-decoration: none;
      color: #ffffff; /* Asegura que el texto sea blanco */
      margin: 0;      /* Elimina márgenes que empujan el botón hacia abajo */
      padding: 2px 0;} /* Espacio mínimo entre líneas */
    .name{
      color: #fff;
      font-weight: 700;
      font-size: 20px;
      margin-bottom: 5px;}
    .card-location{
      color: #fff;
      font-weight: 300;
      font-size: 11px;
      margin-bottom: 5px;}
    .offer{
      color: #fff;
      font-weight: 700;
      font-size: 20px;
      margin-bottom: 10px;}
    .offer-text{
      color: #fff;
      font-weight: 600;
      font-size: 10px;
      margin-bottom: 10px;}
    /* Caja contacto */
    .contact-button-premium {
      display: block;
      background-color: #eb5885;
      color: #ffffff;
      text-align: center;
      text-decoration: none !important;
      font-weight: bold;
      padding: 8px 0;
      border: 2px solid #ffffff; 
      border-radius: 50px;       
      margin: 0 20px 15px 20px; /* 0 arriba para que suba lo máximo posible */
      transition: all 0.3s ease;}
    .contact-button-premium:hover {
      background-color: #c81d4a;}
    .contact-button {
      display: block;
      background-color: #050505;
      color: #ffffff;
      text-align: center;
      text-decoration: none !important;
      font-weight: bold;
      padding: 8px 0;
      border: 2px solid #ffffff; 
      border-radius: 50px;       
      margin: 0 20px 15px 20px; /* 0 arriba para que suba lo máximo posible */
      transition: all 0.3s ease;}
    .contact-button:hover {
      background-color: #ffffff;
      color: #000000;}
    .contact-text {
      font-family: Arial, sans-serif;
      font-size: 15px;
      letter-spacing: 1px;}
    .video-float {
      position: absolute;
      bottom: 120px;   /* distancia desde abajo */
      right: 15px;    /* distancia desde la derecha */
      width: 42px;
      height: 42px;
      border: 2px solid #fff;
      border-radius: 50%;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;
      text-decoration: none;
      background: rgba(0, 0, 0, 0.4); /* fondo sutil para contraste */
      z-index: 10;}
    .video-float:hover {
      color: #fff;
      background: #e6336b;}
    .video-float a,i {
      color: #fff;
          text-decoration: none;}
/* Estilos globales para la sección de FAQ */
    .faq-section {
        background-color: #000; /* Fondo negro como la imagen */
        color: #fff;
        padding: 60px 20px;
        font-family: inherit;}  /* Hereda 'Inter' del body */
    .faq-container {
        max-width: 800px; /* Centra y limita el ancho */
        margin: 0 auto;}
    .faq-item {
        border-bottom: 1px solid #333; /* Línea divisoria gris oscuro */
        margin-bottom: 20px;}
    .faq-logo-header {
        text-align: center; /* Centrado horizontal */
        margin-bottom: 50px; /* Espacio generoso hacia las preguntas */
        padding-top: 20px;}
    .faq-logo-img {
        height: 110px; /* Tamaño del logo (ajusta según prefieras) */
        width: auto;  /* Mantiene la proporción */
        object-fit: contain;
        opacity: 0.95;}

/* El botón que contiene la pregunta */
    .faq-question {
        width: 100%;
        background: none;
        border: none;
        color: #fff;
        text-align: left;
        font-size: 1.1rem;
        padding: 15px 0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: color 0.3s;}
    .faq-question:hover {
        color: #999;}
/* El icono de la flecha */
    .faq-icon svg {
        width: 20px;
        height: 20px;
        transition: transform 0.3s ease-in-out;}
/* El contenedor de la respuesta (inicialmente oculto) */
    .faq-answer {
        max-height: 0; /* Oculta el contenido */
        overflow: hidden; /* Oculta lo que sobresale */
        transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; /* Animación suave */
        opacity: 0;}
/* Estilos de texto dentro de la respuesta */
    .faq-answer p {
        margin: 0 0 15px 0;
        line-height: 1.6;
        font-size: 0.95rem;
        color: #ccc;}
    .faq-answer a {
        color: #50a2ff; /* Color para los enlaces */
        text-decoration: none;}
    .faq-answer a:hover {
        text-decoration: underline;}
/* Rota la flecha hacia arriba */
    .faq-question[aria-expanded="true"] .faq-icon svg {
        transform: rotate(180deg);}
/* Muestra el contenido de la respuesta */
    .faq-question[aria-expanded="true"] + .faq-answer {
        max-height: 1000px; /* Un valor alto para permitir que crezca */
        padding-top: 15px;
        padding-bottom: 15px;
        opacity: 1;}
    /* Contenedor Principal de MARQUESINA */
    .lanzamientos-marquee {
        background-color: #ee4679;
        padding: 0;
        overflow: hidden;
        width: 100%;}
        /* Cintas de Texto Infinito */
    .ticker-wrap {
        background: #000;
        overflow: hidden;
        white-space: nowrap;
        padding: 12px 0; /* Un poco más alto como en MPH */
        display: flex;}
    .ticker {
        display: inline-block;
        white-space: nowrap;}
    .ticker span {
        display: inline-block;
        color: #fff;
        font-family: 'Inter', sans-serif;
        font-weight: 900;
        font-size: 1.1rem;
        letter-spacing: 3px;
        padding-right: 50px; }
/* Animación MPH: Derecha a Izquierda */
    .ticker-wrap:not(.bottom) .ticker {
        animation: mph-left 30s linear infinite;}
/* Animación MPH: Izquierda a Derecha (Bottom) */
    .ticker-wrap.bottom .ticker {
        animation: mph-right 30s linear infinite;}
    @keyframes mph-left {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); } /* El truco del 50% para loop perfecto */
    }
    @keyframes mph-right {
        0% { transform: translateX(-50%); }
        100% { transform: translateX(0); }
    }
 /* Slider */
    .lanzamientos-container {
        padding: 60px 0; /* Un poco más de aire vertical */
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;}
    .lanzamientos-slider {
        display: flex;
        gap: 40px;
        justify-content: center;
        align-items: center;}
/* Tarjetas */
    .lan-card {
        width: 350px;       /* Aumentado de 320px a 350px */
        height: 420px;      /* Ajustamos el alto proporcionalmente */
        background-color: #000;
        border: 6px solid #fff;
        color: inherit;       /* Mantiene los colores que ya definiste */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        text-align: center;
        position: relative;
        background-size: cover;      /* La imagen cubre toda la tarjeta sin deformarse */
        background-position: center; /* La imagen se centra */
        background-repeat: no-repeat;
        text-decoration: none; /* Quita el subrayado */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        flex-shrink: 0; }
/* Efecto Hover en Escritorio */
    .lan-card:hover {
        transform: scale(1.02);
        box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
    .lan-content {
        background: rgba(0, 0, 0, 0.5); /* Overlay para que el texto se lea sobre la foto */
        padding: 20px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: background 0.3s ease; }
    .lan-card:hover .lan-content {
    background: rgba(0, 0, 0, 0.3); }
    .lan-content h3 {
        color: #fff;
        font-size: 2.5rem;
        margin: 10px 0;
        line-height: 1;}
    .lan-tag { color: #fff; font-size: 0.7rem; border-bottom: 1px solid #fff; }
    .lan-content p { color: #ccc; font-size: 0.9rem; font-family: sans-serif; }
    .arrow-btn {
        background: #000;
        border: 3px solid #fff;
        color: #fff;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        z-index: 10;
        transition: all 0.2s ease;}
    .arrow-btn:hover {
    background: #fff;
    color: #e6007e;}

    .legal-section {
        margin-top: 150px;
        padding-top: 200px;
        padding: 40px 20px 60px;}
    .legal-container {
        max-width: 1190px;
        margin: 0 auto;}
    .legal-title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 30px;}
    .legal-content {
        line-height: 1.8;
        text-align: justify;
        font-size: 15px;}
    .legal-content h2 {
        font-size: 20px;
        font-weight: 600;
        margin-top: 35px;
        margin-bottom: 12px;}
    .legal-content h3 {
        font-size: 17px;
        font-weight: 600;
        margin-top: 25px;
        margin-bottom: 10px;}
    .legal-content p {
        margin-bottom: 16px;}
    .legal-content ul,
    .legal-content ol {
        padding-left: 20px;
        margin-bottom: 16px;}
    .legal-content li {
        margin-bottom: 8px;}

    .footer {
      background-color: #0b0b0b;
      color: #e5e5e5;
      font-family: "Inter", sans-serif;
      font-size: 14px;}
    .footer a {
      color: #cfcfcf;
      text-decoration: none;
      transition: color 0.3s ease;}
    .footer a:hover {
      color: #ffffff;}
    .footer-top {
      display: flex;
      flex-wrap: wrap;
      padding: 40px 10%;
      justify-content: space-between;
      border-bottom: 1px solid #222;}
    .footer-col {
      flex: 1 1 220px;
      margin: 20px;}
    .footer-col h4 {
      color: #ee4679;
      font-size: 16px;
      margin-bottom: 15px;
      text-transform: uppercase;
      letter-spacing: 0.5px;}
    .footer-col ul {
      list-style: none;
      padding: 0;
      margin: 0;}
    .footer-col ul li {
      margin-bottom: 8px;}
    .footer-social a {
      display: inline-block;
      margin-right: 12px;}
    .footer-payments img {
      height: 28px;
      margin-right: 8px;
      opacity: 0.9;
      vertical-align: middle;}
    .footer-payments img:hover {
      opacity: 1;}
    .footer-bottom {
      text-align: center;
      padding: 20px 10%;
      background: #0a0a0a;
      border-top: 1px solid #222;}
    .footer-bottom p {
      margin: 4px 0;
      font-size: 13px;
      color: #bdbdbd;}
    .newsletter-form {
      display: flex;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.15);
      border-radius: 25px;
      overflow: hidden;
      margin-top: 8px;
      max-width: 240px;}
    .newsletter-form input {
      flex: 1;
      border: none;
      padding: 8px 12px;
      color: #fff;
      background: transparent;
      outline: none;
      font-size: 14px;}
    .newsletter-form::placeholder {
      color: #fff;}
    .newsletter-form button {
      background: none;
      border: none;
      padding: 8px;
      margin-right: 10px;
      cursor: pointer;}
    .newsletter-form button img {
      width: 18px;
      height: 18px;
      filter: brightness(0) invert(1);}
    .footer-col ul li img{
      margin-right: 8px;}
    .footer-social {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 10px;}
    .footer-social .social-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 2px solid #e1e1e1;
      background-color: black;
      color: #ee4679; 
      font-size: 20px;
      transition: all 0.3s ease;
      text-decoration: none;}
    .footer-social .social-btn:hover {
      background-color: #ee4679;
      color: #e1e1e1; 
      transform: scale(1.1);}
    /* --- Responsive --- */
    .menu-toggle {
      display:none;
      background:linear-gradient(90deg, #344962, #19232E);
      color:#fff;
      border:none;
      padding:10px 20px;
      border-radius:25px;
      font-weight:bold;
      cursor:pointer;}
    /* Menú lateral */
    .side-menu {
      position:fixed;
      top:0;
      right:-100%;
      width:75%;
      height:100%;
      background:linear-gradient(180deg, #2c3e50, #34495e);
      color:#fff;
      padding:20px;
      transition: right 0.3s ease;
      z-index:2000;}
    .side-menu.open {
      right:0;}
    .side-menu .close-btn {
      font-weight:bold;
      cursor:pointer;
      margin-bottom:20px;}
    .side-menu input {
      width:100%;
      padding:8px;
      border-radius:20px;
      border:none;
      outline:none;
      margin-bottom:20px;}
    .side-menu a {
      display:block;
      margin:10px 0;
      color:#fff;
      text-decoration:none;
      font-size:18px;}

/* ============================================================
   ESTILOS RESPONSIVE UNIFICADOS (Onyce Prototipo) 
   ============================================================ */

/* 1. MÓVIL (Hasta 768px) */
@media (max-width: 768px) {
    nav {
      display:none;}
    .desktop-only { display: none !important; }
    .menu-toggle { display: block; background: transparent; color: #fff; border: 1px solid #333; padding: 5px 10px; cursor: pointer; }
    .header-inner {
        display: flex;
        justify-content: space-between; /* En móvil: Logo a un lado, Menú al otro */
        padding: 10px 15px;}
    .header-left { display: none; } /* Eliminamos el contrapeso en móvil */
    .close-btn {
      display:block;
      background:linear-gradient(90deg, #344962, #19232E);
      padding:10px 10px;
      border-radius:25px;
      width:110px;
      margin-left:auto;
      text-align:center;}
    .top-bar {
      font-size: 12px;
      padding: 8px 0;}
    .logo-container {
        flex: 0; /* Ya no ocupa 1/3, se ajusta a su tamaño */
        justify-content: flex-start;}
    /* El logo se vuelve demasiado pequeño con la regla .shrink.logo: ajustamos su tamaño en móvil */
    .logo {
        max-width: 120px;}
    .shrink .logo { /* Se mantiene igual que en .logo en móvil */
        max-width: 120px;}
    /* --- Slider --- */
    .slider {
      /* Ajustar el margen superior después de la reducción del header */
      margin-top: 60px; /* Ya que el header se encoge, 70px puede ser demasiado, 60px es más seguro. */
      height: 300px;}
    .slides img {
      height: 300px;}
    .prev, .next {
        /* Reducir el tamaño de los botones de navegación del slider */
        width: 40px;
        height: 40px;
        font-size: 20px;}
    /* --- Contenedores Promocionales --- */
    .contenedores {
      flex-direction: column;
      margin: 20px 10px;
      gap: 15px;}
    .contenedor-1, .contenedor-2 {
        flex: 1 100%; 
        margin-right: 0;
        position: relative; /* CRUCIAL: para que la info no se salga de la imagen */
        overflow: hidden;   /* Para que el degradado no se salga de las esquinas */
        border-radius: 8px;}
.info-overlay {
          bottom: 10px; }
        
    .contenedor-1 p, .contenedor-2 p {
        font-size: 18px;}

    .anuncios-premium{
      margin-top: 100px;}
    .anuncios-masajistas{
      margin-top: 30px;}
    /* --- Secciones de Anuncios (Premium y Estándar) --- */
    .contenedor-anuncios {
        padding: 0 15px; 
        gap: 12px; 
        justify-content: center;
        display: flex;
        flex-wrap: wrap;}
    .anuncio-publicitario {
        flex: 0 0 calc(50% - 6px); 
        max-width: calc(50% - 6px);
        min-width: 0; /* Importante para que el flex-basis funcione correctamente */
        margin: 0;}
    /* El card individual debe ser responsivo dentro de su espacio asignado */
    .profile-card { 
        max-width: 100%;} /* Asegura que la card no exceda el ancho de su contenedor */
    .name {
        font-size: 15px;
        margin-bottom: 5px;}
    .location {
        width: 90%; /* Un poco más ancho en móvil para que quepa el texto */
        padding: 3px 1px;}
    .location-text{
      font-size: 10px;
      margin-bottom: 3px;}
    .offer-text{
      font-size: 11px;
      margin-bottom: 3px;}
    .image-wrap{ 
        height: 240px;} /* Reducimos la altura de la imagen para que no sea demasiado larga */
    .whatsapp-float, .video-float {
        width: 32px;
        height: 32px;
        font-size: 16px;
        right: 8px;}
    .whatsapp-float { bottom: 75px; }
    .video-float { bottom: 115px; }
    .seccion-titulo {
        font-size: 1rem;
        padding-left: 10px;} /* Añadir padding para que no se pegue a los bordes */
/* --- Newsletter --- */
    .newsletter-section {
      flex-direction: column;
      margin: 20px 10px;}
    .newsletter-text {
      flex: 1; /* Ocupa el ancho completo */
      padding: 20px;
      text-align: center;
      /* Centrar el botón en vista móvil */
      align-items: center;}
    .newsletter-image {
      order: -1; 
      flex: 1; /* Ocupa el ancho completo */
      /* Aseguramos que la imagen se vea bien en el ancho completo */
      max-width: 100%;}
    .newsletter-btn {
        max-width: 250px;} /* Limitamos el ancho del botón para que no se vea desproporcionado */
    .newsletter-image img {
      border-radius: 10px 10px 0 0;}
    .newsletter-text{
      border-radius: 0 0 10px 10px;}
    .banner-container {
        padding: 0 10px;
        margin: 15px auto;}
    .banner-container-top{
      padding: 0 10px;
      margin-top: 100px;}
/* --- Seccion Publicar --- */
    .hero-promo {
        height: auto; /* Permite que la sección crezca si el contenido es largo */
        min-height: 100vh;
        padding: 40px 20px;} /* Un poco de aire a los costados */
    .eyebrow {
        font-size: 0.9rem; /* Un poco más pequeño */
        letter-spacing: 2px;}
    .main-offer {
        flex-direction: column; /* Apilamos "AHORRA" y "50%" verticalmente */
        font-size: 2.5rem;
        line-height: 1;}
    .percentage {
        font-size: 5.5rem; /* Reducimos de 8rem a 5.5rem para que no desborde */
        margin-left: 0;
        margin-top: 10px;}
    .asterisk {
        font-size: 1.5rem;
        margin-top: -20px; /* Ajustamos la posición del asterisco */
        position: relative;
        top: -60px;
        right: -110px;}
    .subtitle {
        font-size: 1rem;
        margin-top: 10px;
        margin-bottom: 40px;}
    .btn-subscribe {
        width: 100%; /* El botón ocupa todo el ancho para facilitar el clic con el pulgar */
        max-width: 300px; /* Pero que no sea gigante en tablets */
        padding: 18px 20px;
        font-size: 1rem;}
    .disclaimer {
        font-size: 0.65rem;
        margin-top: 30px;
        line-height: 1.4;}
/* --- Planes Responsive --- */
    .pricing-section {
        padding: 40px 15px;}  /* Reducimos el padding lateral para ganar espacio */
    .pricing-section h2 {
        font-size: 1.6rem; /* Título un poco más pequeño en móvil */
        padding: 0 10px;}
    .plans-container {
        flex-direction: column; /* Las tarjetas se apilan una debajo de otra */
        align-items: center;    /* Las centramos */
        gap: 25px;}             /* Espacio entre cada tarjeta */
    .plan-card {
        width: 100%;       /* Ocupan todo el ancho disponible */
        max-width: 350px;  /* Pero con un límite para que no se vean gigantes */
        min-height: auto;  /* En móvil el contenido dicta la altura */
        padding: 25px;}
    /* Ajuste de la lista de beneficios */
    .features li {
        font-size: 0.95rem; /* Texto un poco más grande para lectura táctil */
        margin-bottom: 15px;}
    /* El botón de WhatsApp en móvil */
    .btn-select.whatsapp-link {
        padding: 18px; /* Más alto para facilitar el clic con el pulgar */
        font-size: 1rem;}
    /* Texto legal al pie */
    .legal-footer {
        font-size: 0.75rem;
        line-height: 1.5;
        text-align: left; /* En móvil se lee mejor alineado a la izquierda */
        padding: 0 10px;}
    .sticky-banner {
        height: auto; /* Permite que el banner crezca verticalmente si es necesario */
        padding: 12px 15px;
        flex-direction: row; /* Mantenemos fila, pero ajustamos tamaños */
        justify-content: space-around;
        gap: 10px;}
    /* Ocultamos el logo en móviles para ganar espacio para el mensaje */
    .banner-logo-container {
        display: none;}
    .banner-message {
        gap: 10px;
        flex-direction: column; /* Apilamos el texto del descuento */
        align-items: flex-start;}
    /* Ajustamos el bloque de "OFERTA POR TIEMPO" */
    .block-left {
        display: none;}/* En celulares muy pequeños, menos es más */
    .message-block.block-center {
        align-items: flex-start;}
    .percent-age {
        font-size: 1.8rem;} /* Reducimos el tamaño del 50% */
    .aste-risk {
        font-size: 0.6rem;}
    .prefix {
        font-size: 0.6rem;}
    .legal {
        font-size: 0.55rem;
        white-space: nowrap;} /* Evita que el texto legal se rompa en dos líneas */
    /* Botón más compacto pero alto para el pulgar */
    .btn-subscribe-banner {
        padding: 10px 15px;
        font-size: 0.75rem;
        white-space: nowrap;
        min-width: fit-content;}
    /* Logo FAQ */
    .faq-logo-header {
        margin-bottom: 30px;}
    .faq-logo-img {
        height: 50px;}
    /* Estilos del traductor dentro del Menú Lateral */
    .side-menu-lang {
        margin-top: 40px;
        padding: 20px;
        border-top: 1px solid #333;
        text-align: left;}
    .side-menu-lang p {
        font-size: 11px;
        color: #888;
        margin-bottom: 15px;
        letter-spacing: 1px;}
    .lang-options-mobile {
        display: flex;
        gap: 10px;}
    .lang-mobile-btn {
        flex: 1;
        background: #1a1a1a;
        color: #fff;
        padding: 12px;
        text-align: center;
        text-decoration: none;
        border-radius: 8px;
        border: 1px solid #333;
        font-size: 12px;}
    .lang-mobile-btn.active {
        border-color: #ff2d55;
        color: #ff2d55;}
/* Marquesina y Slider */
    .lanzamientos-slider {
        width: 100%;
        position: relative;
        gap: 0; }
    .lan-card {
        display: none !important;
        width: 85vw; /* Casi todo el ancho para impacto */
        height: 380px;
        margin: 0 auto; }
    .lan-card.active {
        display: flex !important; }
    .lan-content h3 { 
        font-size: 1.8rem;  }
    /* Botones Flotantes */
    .arrow-btn {
        display: flex !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        background: rgba(0, 0, 0, 0.8);
        border: 2px solid #fff;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        color: #fff;
        align-items: center;
        justify-content: center; }
    .arrow-btn.left { left: 10px; }
    .arrow-btn.right { right: 10px; }

    .legal-section {
        margin-top: 120px;
        padding: 24px 16px 40px;}
    .legal-title {
        font-size: 22px;}
    .legal-content {
        font-size: 14px;}
    .legal-content p {
        text-align: justify;}
    .legal-content h2 {
        font-size: 18px;}
    /* Footer Responsive */
    .footer-top {
        flex-direction: column;
        padding: 20px 10px; }
    .footer-col {
        flex: 1 1 100%;
        margin: 15px 0; }
    .footer-col h4 {
        margin-bottom: 8px; }
    .footer-bottom {
        padding: 15px 10px;
        font-size: 12px; }
}

/* 2. TABLETS (De 769px a 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .lan-card {
        display: none !important;
        width: 70vw;
        height: 400px; }
    .lan-card.active {
        display: flex !important; }
    .arrow-btn {
        display: flex !important; }
}

/* 3. ESCRITORIO (Desde 1025px en adelante) */
@media (min-width: 1025px) {
    .arrow-btn { 
        display: none !important; }
    .lanzamientos-slider {
        display: flex !important;
        gap: 40px; /* Recuperamos el espacio entre cards */
        transform: none !important; }
    .lan-card {
        display: flex !important; /* Mostramos las 3 fijas */
        width: 350px; 
        height: 420px; }
}