/* ==========================================================
PLAYESTAC WEB - ESTILOS GENERALES
   ========================================================== */

   :root {
     --color-primario: #174a72; --color-primario-oscuro: #103550;
     --color-fondo: #f2f5f8; --color-superficie: #ffffff;
     --color-texto: #253443; --color-texto-claro: #ffffff;
     --color-borde: #d9e1e8;
     --ancho-maximo: 1440px; --espacio-base: 16px; --radio-borde: 8px;
   }

   /* Configuración general */
   * { box-sizing: border-box; }
   html { scroll-behavior: smooth; }

   body { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
          font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6;
          color: var(--color-texto); background-color: var(--color-fondo); }

   h1, h2, h3, p { margin-top: 0; }
   a { color: inherit; }
   a:focus-visible { outline: 3px solid #e9a23b; outline-offset: 3px; }


/* ==========================================================
   HEADER
   ========================================================== */
   .sitio-header { background-color: var(--color-primario); color: var(--color-texto-claro);
                   padding: 20px var(--espacio-base); }

   .header-contenido { max-width: var(--ancho-maximo); margin: 0 auto;
                       display: flex; align-items: center; gap: 20px; }

   /* Logotipo cuadrado - escritorio y tablet */
   /*.header-logo { display: block; width: 90px; height: 90px; object-fit: contain; flex-shrink: 0; } */
   .header-logo { display: block; width: 90px; height: 90px; object-fit: contain; flex-shrink: 0;
                  background-color: #ffffff; border-radius: 12px; padding: 4px; }

   /* Dentro de la media query de celular */
   @media (max-width: 767px) { .header-logo { width: 68px; height: 68px; } }

   .header-identidad { min-width: 0; }
   .header-identidad h1 { margin-bottom: 4px; font-size: 2rem; }
   .header-identidad p { margin-bottom: 0; }

/* ==========================================================
ADAPTACION CELULAR
   ========================================================== */
   @media (max-width: 767px) {
     .header-contenido { gap: 12px; }
     .header-logo { max-width: 76px; max-height: 70px; }
     .header-identidad h1 { font-size: 1.65rem; }
     .header-identidad p { font-size: 0.9rem; line-height: 1.4; }
   }


/* ==========================================================
NAVEGACION
   ========================================================== */

   .sitio-nav { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px;
                padding: 12px var(--espacio-base); background-color: var(--color-primario-oscuro);
                color: var(--color-texto-claro); }

   .sitio-nav a { padding: 9px 16px; border-radius: var(--radio-borde);
                  font-size: 17px; font-weight: 600; text-decoration: none; }

   .sitio-nav a:hover { background-color: var(--color-primario); }

/* ==========================================================
CONTENEDOR PRINCIPAL
   ========================================================== */
   .sitio-contenedor { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 16px;
                       display: block; flex: 1; }

   .sitio-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
   .sitio-aside { display: none; }

/* ==========================================================
MAIN
   ========================================================== */
   .contenido-seccion { min-width: 0; padding: 24px; border: 1px solid var(--color-borde);
                        border-radius: var(--radio-borde); background-color: var(--color-superficie); }

   .contenido-seccion h2 { color: var(--color-primario); }

   .recursos-contenedor { display: grid;
                         grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
                         gap: 16px; }


/* ==========================================================
PRESENTACION COMERCIAL - INICIO
   ========================================================== */
   .inicio-presentacion h2 { font-size: 1.65rem; line-height: 1.3; margin-bottom: 16px; }
   .inicio-presentacion > p { font-size: 1.05rem; }

   .inicio-producto { margin-top: 24px; padding: 20px; background-color: var(--color-fondo);
                      border: 1px solid var(--color-borde); border-radius: var(--radio-borde); }

   .inicio-producto h3 { font-size: 1.2rem; color: var(--color-primario); margin-bottom: 12px; }

   .boton-principal { display: inline-block; padding: 10px 20px; margin-top: 8px;
                      border-radius: var(--radio-borde); background-color: var(--color-primario);
                      color: #ffffff; font-weight: 600; text-decoration: none; }

   .boton-principal:hover { background-color: var(--color-primario-oscuro); }


/* ==========================================================
PRESENTACION DEL PRODUCTO
   ========================================================== */

   .producto-presentacion > p { font-size: 1.05rem; margin-bottom: 24px; }

   .producto-funciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

   .funcion-tarjeta { min-width: 0; padding: 18px; background-color: var(--color-fondo);
                     border: 1px solid var(--color-borde); border-radius: var(--radio-borde); }

   .funcion-tarjeta h3 { margin-bottom: 10px; font-size: 1.08rem; line-height: 1.35;
                        color: var(--color-primario); }

   .funcion-tarjeta p { margin-bottom: 0; font-size: 0.95rem; }

   /* Adaptación celular */
   @media (max-width: 767px) {
     .producto-funciones { grid-template-columns: minmax(0, 1fr); gap: 12px; }
     .funcion-tarjeta { padding: 16px; }
   }

/* ==========================================================
PRODUCTOS DESPLEGABLES
   ========================================================== */

   .producto-desplegable { margin-top: 20px; border: 1px solid var(--color-borde);
                           border-radius: var(--radio-borde); overflow: hidden; }

   .producto-resumen { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
                       gap: 12px 18px; padding: 18px; cursor: pointer; list-style: none;
                       background-color: var(--color-fondo); color: var(--color-primario); }

   .producto-resumen::-webkit-details-marker { display: none; }

   .producto-resumen:hover { background-color: #e8eff5; }
   .producto-resumen:focus-visible { outline: 3px solid #e9a23b; outline-offset: -3px; }

   .producto-cabecera { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
   .producto-cabecera h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; color: var(--color-primario); }

   .producto-estado { display: inline-block; width: fit-content; padding: 4px 10px; border-radius: 6px;
                      font-size: 0.82rem; font-weight: 600; color: #24583c; background-color: #dcefe3; }

   .producto-accion { display: flex; align-items: center; gap: 10px; flex-shrink: 0;
                      font-size: 0.95rem; font-weight: 600; color: var(--color-primario); }

   .accion-abierto { display: none; }
   .producto-desplegable[open] .accion-cerrado { display: none; }
   .producto-desplegable[open] .accion-abierto { display: inline; }

   .producto-flecha::before { content: "▾"; display: inline-block; font-size: 1rem; }
   .producto-desplegable[open] .producto-flecha::before { content: "▴"; }

   .producto-detalle { padding: 20px; background-color: var(--color-superficie); }
   .producto-detalle > p { margin-bottom: 20px; }

   @media (max-width: 767px) {
     .producto-resumen { padding: 14px; }
     .producto-accion { width: 100%; justify-content: flex-start; }
     .producto-detalle { padding: 14px; }
   }

/* ==========================================================
BIGDPLAY - PRODUCTO COMPLEMENTARIO
   ========================================================== */

   .producto-complemento { margin-top: 22px; padding: 20px; border: 1px solid var(--color-borde);
                           border-left: 4px solid var(--color-primario); border-radius: var(--radio-borde);
                           background-color: var(--color-fondo); }

   .complemento-encabezado { display: flex; justify-content: space-between; align-items: center;
                            flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; }

   .complemento-encabezado h3 { margin: 0; font-size: 1.15rem; color: var(--color-primario); }

   .complemento-gratuito { padding: 5px 10px; border-radius: 6px; font-size: 0.82rem;
                          font-weight: 600; color: #24583c; background-color: #dcefe3; }

   .producto-complemento p { margin-bottom: 12px; }
   .producto-complemento p:last-child { margin-bottom: 0; }

   @media (max-width: 767px) {
     .producto-complemento { padding: 15px; }
   }


/* ==========================================================
DEMOSTRACIONES - VIDEOS
   ========================================================== */

   .demostraciones-presentacion > p { font-size: 1.05rem; margin-bottom: 24px; }

   .video-tarjeta { min-width: 0; overflow: hidden; border: 1px solid var(--color-borde);
                    border-radius: var(--radio-borde); background-color: var(--color-superficie); }

   .video-previa { display: flex; justify-content: center; align-items: center; aspect-ratio: 16 / 9;
                   background-color: var(--color-primario-oscuro); color: #ffffff; }

   .video-simbolo { font-size: 2.6rem; line-height: 1; opacity: 0.85; }

   .video-informacion { padding: 16px; }
   .video-informacion h3 { margin-bottom: 8px; font-size: 1.08rem; color: var(--color-primario); }
   .video-informacion p { margin-bottom: 0; font-size: 0.93rem; }

   /* Adaptacion a pantallas estrechas */
   @media (max-width: 767px) {
     .video-informacion { padding: 14px; }
   }

/* ==========================================================
DESCARGAS Y DOCUMENTACION
   ========================================================== */
   .descargas-presentacion > p { font-size: 1.05rem; margin-bottom: 24px; }

   .descargas-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

   .descarga-panel { min-width: 0; padding: 20px; border: 1px solid var(--color-borde);
                     border-radius: var(--radio-borde); background-color: var(--color-fondo); }

   .descarga-panel h3 { margin-bottom: 12px; font-size: 1.12rem; color: var(--color-primario); }
   .descarga-panel p { margin-bottom: 12px; }
   .descarga-panel p:last-child { margin-bottom: 0; }

   .descarga-apk { grid-column: 1 / -1; background-color: #eaf2f8; }

   .documentos-lista { display: flex; flex-direction: column; gap: 10px; }

   @media (max-width: 767px) {
     .descargas-grupos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
     .descarga-panel { padding: 16px; }
     .descarga-apk { grid-column: auto; }
   }

/* ======= ASIDE  ========================================== 
   .sitio-aside { min-width: 0; padding: 20px; border: 1px solid var(--color-borde);
                  border-radius: var(--radio-borde); background-color: var(--color-superficie); }
   .sitio-aside h2 { font-size: 1.2rem; color: var(--color-primario); }
*/

/* ==========================================================
FOOTER
   ========================================================== */

   .sitio-footer { display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
                   gap: 12px 32px; padding: 20px 16px; background-color: var(--color-primario-oscuro);
                   color: var(--color-texto-claro); text-align: center; }

   .sitio-footer a { color: inherit; text-decoration: none; }
   .sitio-footer a:hover { text-decoration: underline; }


/* ==========================================================
CELULAR - HASTA 767px
   ========================================================== */
   @media (max-width: 767px) {
     .sitio-header { padding: 18px 14px; }
     .header-contenido h1 { font-size: 1.65rem; }
     .sitio-nav { justify-content: center; gap: 4px; padding: 8px; }
     .sitio-nav a { padding: 8px 10px; font-size: 16px; }
     .sitio-contenedor { padding: 14px; }
     .contenido-seccion { padding: 16px; }
     .sitio-footer { padding: 20px 14px; }
   }


/* ==========================================================
DESPLEGABLES REUTILIZABLES
   ========================================================== */
   .seccion-desplegable { width: 100%; }

   .seccion-resumen { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
                      gap: 12px 20px; cursor: pointer; list-style: none; color: var(--color-primario); }

   .seccion-resumen::-webkit-details-marker { display: none; }
   .seccion-resumen h2 { margin: 0; font-size: 1.5rem; line-height: 1.35; }

   .seccion-resumen:hover { color: var(--color-primario-oscuro); }
   .seccion-resumen:focus-visible { outline: 3px solid #e9a23b; outline-offset: 4px; }

   .seccion-accion { display: flex; align-items: center; gap: 10px; flex-shrink: 0;
                     font-size: 0.95rem; font-weight: 600; }

   .seccion-desplegable .accion-abierto { display: none; }
   .seccion-desplegable[open] .accion-cerrado { display: none; }
   .seccion-desplegable[open] .accion-abierto { display: inline; }

   .seccion-flecha::before { content: "▾"; }
   .seccion-desplegable[open] .seccion-flecha::before { content: "▴"; }

   .seccion-detalle { padding-top: 24px; }

   @media (max-width: 767px) {
     .seccion-resumen h2 { font-size: 1.3rem; }
     .seccion-accion { font-size: 0.85rem; }
     .seccion-detalle { padding-top: 16px; }
   }


/* Reproductor de videos */
.video-reproductor { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain;
                     background-color: var(--color-primario-oscuro); }



/* ==========================================================
DOCUMENTOS PDF
   ========================================================== */

   .documento-tarjeta { min-width: 0; padding: 14px; border: 1px solid var(--color-borde);
                        border-radius: var(--radio-borde); background-color: var(--color-superficie); }

   .documento-tarjeta h4 { margin: 0 0 8px; font-size: 1rem; color: var(--color-primario); }
   .documento-tarjeta p { margin-bottom: 10px; font-size: 0.9rem; }

   .documento-enlace { display: inline-block; font-size: 0.93rem; font-weight: 600;
                       color: var(--color-primario); text-decoration: none; }

   .documento-enlace:hover { text-decoration: underline; }
   .documento-enlace:focus-visible { outline: 3px solid #e9a23b; outline-offset: 3px; }


/* ==========================================================
EN DESARROLLO Y PROXIMAS NOVEDADES
   ========================================================== */

   .novedades-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }

   .novedad-tarjeta { min-width: 0; padding: 20px; border: 1px solid var(--color-borde);
                      border-radius: var(--radio-borde); background-color: var(--color-fondo); }

   .novedad-tarjeta h3 { margin-bottom: 10px; font-size: 1.1rem; color: var(--color-primario); }

   .novedad-estado { display: inline-block; margin-bottom: 12px; padding: 4px 9px;
                     border-radius: 6px; font-size: 0.8rem; font-weight: 600;
                     color: #52606d; background-color: #e3e8ee; }

   .novedad-tarjeta p { margin-bottom: 0; font-size: 0.95rem; }


/* == */