/* =========================================================
   Tarjetero en Red - Estilos para PC / escritorio
   Separado del HTML original sin eliminar funcionalidades.
   ========================================================= */

:root {
      --bg-body: #f1f5f9;
      --bg-card: #ffffff;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --accent: #0ea5a0;
      --accent-dark: #0d9488;
      --accent-gradient: linear-gradient(135deg, #0ea5a0 0%, #0d9488 100%);
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
      --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.08), 0 8px 16px -6px rgba(0,0,0,0.04);
      --font-family: 'Poppins', system-ui, sans-serif;
    }

* { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { 
      scroll-behavior: smooth; 
      overflow-x: hidden;
      width: 100%;
    }

    body {
      font-family: var(--font-family);
      background-color: var(--bg-body);
      color: var(--text-main);
      padding-top: 145px;
      user-select: none; -webkit-user-select: none;
    }

    /* HEADER UNIFICADO */
    header {
      background: #0b1325;
      color: #ffffff;
      position: fixed; 
      top: 0; 
      left: 0; 
      width: 100%; 
      z-index: 1000;
      box-shadow: var(--shadow-md);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .headerTop {
      display: flex; 
      align-items: center; 
      justify-content: space-between;
      padding: 12px 5%;
      height: 70px;
    }

    header h1 {
      font-size: 22px; font-weight: 700; color: #ffffff;
      letter-spacing: -0.5px;
    }
    header h1 span { color: var(--accent); }

    #homeBtn {
      background: var(--accent); border: 0; color: white;
      padding: 10px 20px; border-radius: 10px; cursor: pointer;
      font-weight: 600; font-size: 14px;
      transition: all 0.2s ease;
      box-shadow: var(--shadow-sm);
    }
    #homeBtn:hover { background: var(--accent-dark); transform: translateY(-1px); }

    .countryFlags { display: flex; gap: 12px; align-items: center; }
    .countryFlags img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid rgba(255,255,255,0.2);
      box-shadow: 0 8px 20px rgba(0,0,0,.25);
      transition: transform .3s ease;
      animation: flotar 3s ease-in-out infinite;
    }

    .countryFlags img:hover{ transform: scale(1.15); border-color: var(--accent); }
    .countryFlags img:nth-child(2){ animation-delay: 1.5s; }

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

    .btnRowTarjetero {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px 25px;
      background-color: #0b1325;
      padding: 10px 20px 14px 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      flex-wrap: wrap;
      transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
      max-height: 200px;
      opacity: 1;
      overflow: hidden;
    }

    .btnRowTarjetero.oculto {
      max-height: 0;
      opacity: 0;
      padding-top: 0;
      padding-bottom: 0;
      border-top-color: transparent;
      pointer-events: none;
    }

    .btnRowTarjetero a, 
    .btnRowTarjetero button.navLinkItem {
      color: #a0aec0;
      background: none;
      border: none;
      text-decoration: none;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 4px;
      border-bottom: 2px solid transparent;
      transition: color 0.2s ease, border-color 0.2s ease;
      white-space: nowrap;
      cursor: pointer;
      font-family: var(--font-family);
    }

    .btnRowTarjetero a i,
    .btnRowTarjetero button.navLinkItem i {
      font-size: 14px;
    }

    .btnRowTarjetero a.active,
    .btnRowTarjetero a:hover,
    .btnRowTarjetero button.navLinkItem:hover {
      color: #00b4a7;
      border-bottom-color: #00b4a7;
    }

.logoBox { text-align: center; margin-bottom: 30px; }
    .logoBox img{
      height:110px; object-fit:contain; display:inline-block;
      animation: zoomLogo 3s ease-in-out infinite;
    }

    @keyframes zoomLogo{
      0%{ transform:scale(1); }
      25%{ transform:scale(1.04); }
      50%{ transform:scale(1.08); }
      75%{ transform:scale(1.04); }
      100%{ transform:scale(1); }
    }

    /* LAYOUT DEL HERO CON PROPORCIONES OPTIMIZADAS */
    .heroLayout {
      display: flex; justify-content: center; align-items: center;
      gap: 20px; max-width: 1320px; margin: 0 auto 35px; padding: 0 20px;
    }

    .adsLeft, .adsRight { flex-shrink: 0; width: 250px; }
    .adsLeft img, .adsRight img {
      width: 100%; max-width: 250px; height: auto; max-height: 400px; object-fit: contain; border-radius: 16px; cursor: pointer;
      box-shadow: var(--shadow-md); transition: transform 0.2s; display: block;
    }
    .adsLeft img:hover, .adsRight img:hover { transform: scale(1.02); }

    .heroCenter { flex: 1; min-width: 0; max-width: 780px; }

.hero-slider-container {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 20px;
      box-shadow: var(--shadow-md);
      border: 1px solid #e2e8f0;
      background: var(--bg-card);
      touch-action: pan-y;
    }

.hero-slider-track {
      display: flex;
      width: 100%;
    }

    .hero-cta {
      width: 100%;
      flex: 0 0 100%;
      box-sizing: border-box;
      padding: 45px 35px;
      color: var(--text-main);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .hero-cta h2 { font-size: 28px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.5px; text-align: center; width: 100%; }
    .hero-cta p { font-size: 15px; margin-bottom: 25px; color: var(--text-muted); font-weight: 400; text-align: center; width: 100%; }

    .cta-btn{
      position:relative; overflow:hidden;
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      background:linear-gradient(135deg,#00b894,#00a884); color:#fff;
      padding:14px 30px; border-radius:14px; font-size:14px; font-weight:700;
      text-decoration:none; box-shadow: 0 10px 25px rgba(0,170,130,.35);
      transition:.25s;
    }
    .cta-btn::before{
      content:""; position:absolute; top:0; left:-150%; width:70px; height:100%;
      background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.1) 20%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.1) 80%, transparent 100%);
      transform:skewX(-25deg); animation:shine 4s infinite;
    }
    @keyframes shine{
      0%{ left:-150%; }
      20%{ left:130%; }
      100%{ left:130%; }
    }
    .cta-btn:hover{ transform:translateY(-3px); box-shadow: 0 18px 35px rgba(0,170,130,.45); }
    .cta-btn:active{ transform:scale(.97); }
    .hero-cta small { display: block; margin-top: 15px; font-size: 12px; color: var(--text-muted); text-align: center; width: 100%; }

    .hero-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.85);
      color: var(--text-main);
      border: 1px solid #cbd5e1;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 20;
      box-shadow: var(--shadow-md);
      transition: all 0.2s ease;
      font-size: 16px;
    }

.hero-nav-btn:hover {
      background: var(--accent);
      color: #ffffff;
      border-color: var(--accent);
    }
    .hero-nav-btn.prev { left: 12px; }
    .hero-nav-btn.next { right: 12px; }

    .beneficios-pro { 
      max-width: 1320px;
      margin: 35px auto 40px;
      padding: 0 20px;
      width: 100%; 
    }

    .beneficios-pro h2 { 
      font-size: 24px; 
      font-weight: 700; 
      margin-bottom: 25px; 
      text-align: center; 
    }

    .beneficios-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      width: 100%;
    }

.beneficio-card {
      background: var(--bg-card);
      border-radius: 16px;
      padding: 28px 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      text-align: left;
      box-shadow: var(--shadow-sm);
      border: 1px solid #e2e8f0;
      transition: transform 0.25s ease, border-color 0.25s ease;
      width: 100%;
    }

.beneficio-card:hover { 
      border-color: var(--accent); 
      transform: translateY(-4px); 
    }

    .beneficio-card .icon {
      font-size: 28px;
      margin-bottom: 16px;
      color: var(--accent);
    }

    .beneficio-card h3 { 
      font-size: 18px; 
      font-weight: 700; 
      margin-bottom: 12px;
      line-height: 1.3;
      color: var(--text-main);
    }

    .beneficio-card p { 
      font-size: 13.5px; 
      color: var(--text-muted); 
      line-height: 1.5; 
    }

    .container { 
      max-width: 1320px; 
      margin: 0 auto 50px; 
      padding: 0 20px; 
    }

    .filters { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 35px; }
    .filters input, .filters select {
      padding: 12px 16px; border-radius: 12px; border: 1px solid #cbd5e1;
      background: var(--bg-card); color: var(--text-main); font-size: 14px;
      min-width: 240px; flex: 1; max-width: 380px; transition: all 0.2s ease;
    }

.filters input:focus, .filters select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(14,165,160,0.1); }

    #seoLinkContainer {
      display: none;
      max-width: 900px;
      margin: -10px auto 30px;
      padding: 0 20px;
      text-align: center;
    }

    #seoLinkContainer .seo-directory-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 11px 18px;
      border-radius: 12px;
      background: var(--bg-card);
      border: 1px solid rgba(14,165,160,0.25);
      color: var(--accent-dark);
      text-decoration: none;
      font-size: 13px;
      font-weight: 700;
      box-shadow: var(--shadow-sm);
      transition: all 0.2s ease;
    }

    #seoLinkContainer .seo-directory-link:hover {
      transform: translateY(-2px);
      border-color: var(--accent);
      box-shadow: var(--shadow-md);
    }

    #seoLinkContainer .seo-directory-link i { color: var(--accent); }

.gallery { 
      display: grid; 
      grid-template-columns: repeat(2, 1fr); 
      gap: 12px; 
      width: 100%;
    }

.card {
      background: var(--bg-card); border-radius: 12px; overflow: hidden;
      box-shadow: var(--shadow-sm); cursor: pointer; display: flex; flex-direction: column;
      border: 1px solid #e2e8f0; transition: all 0.2s ease;
    }

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }

    .card-img-wrapper {
      width: 100%; height: 130px; background: #ffffff; overflow: hidden; display: flex; align-items: center; justify-content: center;
    }

.card img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; }
    
    .card .info { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; background: var(--bg-card); border-top: 1px solid #f1f5f9; }

.card h3 { font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card p { color: var(--text-muted); font-size: 11px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.testimonios { max-width: 1200px; margin: 70px auto 40px; text-align: center; }
    .tag {
      display: inline-block; margin-bottom: 12px; padding: 6px 14px;
      background: rgba(14, 165, 160, 0.08); color: var(--accent);
      border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    }
    .testimonios h2 { font-size: 26px; font-weight: 700; margin-bottom: 35px; }

    .testimonios-wrapper { position: relative; display: flex; align-items: center; }
    .testimonios-row {
      display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth;
      padding: 10px 40px; scrollbar-width: none; width: 100%; box-sizing: border-box;
    }
    .testimonios-row::-webkit-scrollbar { display: none; }

    .testimonio {
      min-width: 300px; background: var(--bg-card); padding: 25px;
      border-radius: 16px; text-align: left; box-shadow: var(--shadow-sm);
      border: 1px solid #e2e8f0; flex: 1;
    }

.testimonio .nombre { font-weight: 600; color: var(--accent-dark); margin-bottom: 6px; font-size: 14.5px; }
    .testimonio .texto { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 15px; }
    .stars { color: #f59e0b; font-size: 14px; }

    .scroll-btn {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: var(--bg-card); border: 1px solid #cbd5e1;
      font-size: 16px; width: 36px; height: 36px; border-radius: 50%;
      cursor: pointer; box-shadow: var(--shadow-md);
      display: flex; align-items: center; justify-content: center; z-index: 10;
    }

.scroll-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }
    .scroll-btn.left { left: 0; }
    .scroll-btn.right { right: 0; }

    .ads { text-align: center; margin-top: 45px; color: var(--text-main); font-size: 14px; }
    .banner-slider {
      width: 100%; height: 120px; overflow: hidden; position: relative;
      border-radius: 14px; margin-top: 15px; box-shadow: var(--shadow-sm);
    }
    .banner-slide {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out;
    }
    .banner-slide.active { opacity: 1; }

    .modal {
      display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6);
      align-items: center; justify-content: center; padding: 20px; z-index: 2000;
      backdrop-filter: blur(4px); overflow-y: auto;
    }
    .modal-inner {
      width: 100%; max-width: 880px; background: var(--bg-card);
      border-radius: 20px; display: grid; grid-template-columns: 45fr 55fr;
      overflow: hidden; box-shadow: var(--shadow-lg); 
      max-height: 85vh; 
      position: relative;
    }

.card-scan { background: #ffffff; display: flex; align-items: center; justify-content: center; padding: 20px; border-right: 1px solid #f1f5f9; }

.card-scan img { width: 100%; height: auto; max-height: 75vh; object-fit: contain; }

    .details { 
      padding: 35px 35px 60px 35px; 
      overflow-y: auto; 
      max-height: 85vh; 
      box-sizing: border-box;
    }

.close-x {
      position: absolute; right: 20px; top: 20px;
      background: #f1f5f9; border: 0; color: #64748b;
      font-size: 15px; width: 32px; height: 32px; border-radius: 50%;
      cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5;
    }

.close-x:hover { background: #e2e8f0; color: #0f172a; }

    .details h2 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
    .meta { color: var(--accent); font-weight: 600; font-size: 14px; margin-bottom: 18px; }
    #detDesc { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 25px; }

    .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; }
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 16px; border-radius: 10px;
      text-decoration: none; color: #fff; font-weight: 600; font-size: 13px;
      transition: all 0.2s ease;
    }
    .btn.call { background: #16a34a; }
    .btn.wa { background: #25D366; color: #022; }
    .btn.web { background: #7c3aed; }
    .btn.fb { background: #1877F2; }
    .btn:hover { transform: translateY(-1px); opacity: 0.95; }

    .map-wrap { 
      border-radius: 12px; 
      overflow: hidden; 
      height: 220px; 
      border: 1px solid #e2e8f0; 
      margin-bottom: 40px; 
      width: 100%;
    }

iframe.map { width: 100%; height: 100%; border: 0; }

    /* ESTILOS ESPECÍFICOS PARA EL MODAL DE "QUIÉNES SOMOS" Y "PLANES Y TARIFAS" */
    .about-modal-content {
      background-color: var(--bg-card);
      color: var(--text-main);
      width: 100%;
      max-width: 650px;
      padding: 35px;
      border-radius: 20px;
      position: relative;
      box-shadow: var(--shadow-lg);
      border: 1px solid #e2e8f0;
      animation: modalFadeIn 0.3s ease;
      max-height: 90vh;
      overflow-y: auto;
    }

.about-modal-content h2 {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 20px;
      color: var(--text-main);
      text-align: center;
    }

    .about-modal-body h3 {
      font-size: 16px;
      font-weight: 700;
      color: var(--accent-dark);
      margin-top: 18px;
      margin-bottom: 8px;
    }

    .about-modal-body p, 
    .about-modal-body ul {
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 12px;
    }

    .about-modal-body ul {
      list-style-type: disc;
      padding-left: 20px;
    }

    .about-modal-body li {
      margin-bottom: 4px;
    }

    @keyframes modalFadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .flyerModal {
      display: none; position: fixed; z-index: 3000; inset: 0;
      background: rgba(0, 0, 0, 0.85); justify-content: center; align-items: center;
    }
    .flyerModal img { max-width: 90%; max-height: 90%; border-radius: 16px; }
    .flyerClose { position: absolute; top: 25px; right: 35px; font-size: 35px; color: white; cursor: pointer; }

    #installBox { text-align: center; margin: 25px 0 10px; }
    #installBtn {
      background: var(--accent); color: white; border: none;
      padding: 12px 24px; font-size: 14px; font-weight: 600;
      border-radius: 10px; cursor: pointer; box-shadow: var(--shadow-sm);
    }
    #installBtn:hover { background: var(--accent-dark); }

    footer {
      text-align: center; padding: 30px 15px;
      color: var(--text-muted); font-size: 12px; line-height: 1.6;
      border-top: 1px solid #e2e8f0; max-width: 1320px; margin: 0 auto;
    }

.popup-publicidad{
      position:fixed; top:0; left:0; width:100%; height:100%;
      background:rgba(0,0,0,.75); display:none; justify-content:center; align-items:center; z-index:999999;
    }
    .popup-publicidad img{ width:60%; max-width:700px; border-radius:15px; box-shadow:0 0 30px rgba(0,0,0,.5); }
    #cerrarPublicidad{
      position:absolute; top:20px; right:20px; width:40px; height:40px;
      border:none; border-radius:50%; background:red; color:#fff; font-size:20px; cursor:pointer;
    }
    .contador{ color:#fff; text-align:center; margin-top:15px; font-size:18px; }

@media (prefers-color-scheme: dark) {
      :root {
        --bg-body: #0f172a;
        --bg-card: #1e293b;
        --text-main: #f1f5f9;
        --text-muted: #94a3b8;
      }
    }

@media (prefers-color-scheme: dark) { .hero-slider-container { border-color: #334155; } }

@media (prefers-color-scheme: dark) {
      .hero-nav-btn {
        background: rgba(30, 41, 59, 0.85);
        color: #ffffff;
        border-color: #475569;
      }
    }

@media (prefers-color-scheme: dark) { 
      .beneficio-card { border-color: #334155; } 
    }

@media (prefers-color-scheme: dark) { .filters input, .filters select { border-color: #475569; } }

@media (prefers-color-scheme: dark) {
      #seoLinkContainer .seo-directory-link {
        border-color: rgba(45,212,191,0.25);
      }
    }

@media (min-width: 768px) {
      .gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
    }

@media (prefers-color-scheme: dark) { .card { border-color: #334155; } }

@media (min-width: 768px) {
      .card-img-wrapper { height: 180px; }
    }

@media (min-width: 768px) {
      .card .info { padding: 16px; }
    }

@media (prefers-color-scheme: dark) { .card .info { border-top-color: #334155; } }

@media (min-width: 768px) {
      .card h3 { font-size: 15px; white-space: normal; }
    }

@media (min-width: 768px) {
      .card p { font-size: 13px; white-space: normal; }
    }

@media (prefers-color-scheme: dark) { .testimonio { border-color: #334155; } }

@media (prefers-color-scheme: dark) { .scroll-btn { border-color: #475569; } }

@media (prefers-color-scheme: dark) { .card-scan { background: #1e293b; border-right-color: #334155; } }

@media (prefers-color-scheme: dark) { .close-x { background: #334155; color: #cbd5e1; } }

@media (prefers-color-scheme: dark) { .map-wrap { border-color: #334155; } }

@media (prefers-color-scheme: dark) { .about-modal-content { border-color: #334155; } }

@media (prefers-color-scheme: dark) { footer { border-top-color: #334155; } }