html {
  font-size: 18px;
  /* scroll-behavior: smooth; Al pulsar una opción del menú, la página se desliza de forma suave */
}
body {
   background-color: rebeccapurple;
   margin: 0;
}
main { 
   color: #e0e0e0; /* Cambio el "white" original por sugerencia de Gémini: "se lee mucho mejor" */
   font-family: Verdana;
   font-size: 1.2rem; /* El "rem" (root em) toma como base el "font-size" de html {...} */
   line-height: 1.5;
   padding: 1% 5%; /* Arriba abajo, izqda dcha */
}
h1 { font-family: Arial; font-size: 1.8rem; margin-top: 4% }
h2 { background-color: black; font-size: 1.4rem; margin-top: 4%; padding: 0.25em }
h3 { backgro-und-color: indigo; font-family: Helvetica; font-size: 1.2rem; padding: 0 0.25em }
/* p.inverso, h3.inverso { background-color: white; color: indigo } */
p, ul { margin-left: 3%; width: 85% }
ul { list-style-type: none; padding: 0 }
li { margin-bottom: 1% }
p img { vertical-align: middle }
span.item { color: lightgray; font-size: larger; font-weight: bold }
/*div.afiliacion { border: 10px solid black; border-radius: 1%; margin: 3% 0%}*/
/************************************************************************************************/
nav.menu {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(26, 15, 46, 0.98); /* Violeta ultra profundo */
    border-bottom: 2px solid #ffcc00;
    padding: 12px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Para que en el móvil se adapte en varias líneas si hace falta */
}
.menu-item {
    margin: 0 15px;
    display: inline-block;
}
nav.menu a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85em;
    text-transform: uppercase;
    transition: 0.3s;
}
nav.menu a:hover {
   color: #ffcc00; /* Brilla en oro al pasar el ratón */
   text-shadow: 0 0 8px rgba(255, 204, 0, 0.6); /* Un sutil resplandor neón */
   /* letter-spacing: 1px; /* Las letras se separan un pelín, dándole un toque muy premium */
}
/* Estilo para la barra diagonal */
.separador {
    color: #ffcc00;
    margin: 0 5px;
    font-weight: 300;
}
/* Estilo para el link en inglés (un poco más discreto) */
.en-link {
    font-style: italic;
    font-weight: 400 !important;
    opacity: 0.8;
}

/* INFOPRODUCTOS */
.menu-item.infoproducto a:not(.en-link) {
    color: #00d4ff !important; /* Texto en cian para destacar */
}
.menu-item.infoproducto a.en-link {
    color: #e0b0ff !important; /* El lila para la opción inglesa */
}
/* Efecto Hover */
.menu-item.infoproducto a:hover {
    color: #ffffff !important; /* Al pasar el ratón, cambian a blanco puro */
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.8); /* Resplandor cian eléctrico */
}
/***************************************************************************************/
/* Encabezado (h1 + image) de las secciones */
.seccion-header {
    height: 200px; /* Altura fija para que la foto luzca */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 15px;
    margin: 50px 0 30px 0;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border: 3px solid #ffffff22;
    /* Al hacer clic se detiene 70px antes para que el menú flotante
    no oculte parte del h1 con el que empieza cada sección */
    scroll-margin-top: 70px; 
}
/* Efecto oscurecedor para que el título se lea bien sobre la foto */
.seccion-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Sombra sobre la imagen */
}
.seccion-header h1 {
    position: relative;
    font-size: 3.5em;
    color: white;
    text-shadow: 3px 3px 10px rgba(0,0,0,0.8);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 5px;
    text-transform: uppercase;
}
@media (max-width: 600px) {  /* CSS optimizado para el móvil */
    .seccion-header {
        height: auto;  /* Eliminamos la altura fija restrictiva */
        min-height: 160px;  /* Le damos una altura mínima para que luzca la foto */
        padding: 30px 15px; /* Margen interno para que el texto no toque los bordes del móvil */
        scroll-margin-top: 160px;
    }
    .seccion-header h1 {
        font-size: 1.4em; /* Reducimos el texto para que no se corte */
        letter-spacing: 1px;   /* Reducimos el espacio entre letras para ganar ancho */
        line-height: 1.2;      /* Separación perfecta entre las líneas que se generen */
        /* --- EL BLINDAJE ANTICORTES --- */
        overflow-wrap: break-word; /* Si una palabra no cabe, la obliga a saltar abajo entera */
        word-wrap: break-word;     /* Compatibilidad con navegadores antiguos */
        hyphens: auto;             /* Si hace falta, añade un guion de corte correcto (opcional) */        
    }
}
/************************************************************************************************/
p.intro-seccion {
    font-size: 1.1em;
    line-height: 1.6;
    color: #e0e0e0;
    max-width: 50%; /* Para que no se estire demasiado en pantallas anchas */
    margin: 30px auto; /* Centrado y con aire respecto al H1 y las tarjetas */
    text-align: center;
    font-style: italic;
}
/**************************************************************************************************/
/* Contenedor de reseñas, según Gémini (may26) */
/* El contenedor principal: menos borde, más elegancia */
/* RESEÑAS EN ESPAÑOL */
div.afiliacion { 
   background-color: #3b226b; /* Un violeta un poco más claro que rebeccapurple */
   border: 1px solid #ffffff1a; /* Borde general más fino para que no compita (1a: opacidad) */
   border-left: 6px solid #00d4ff; /* AZUL ELÉCTRICO: Marca la sección española */    
   border-radius: 12px; 
   margin: 1% 0;
   overflow: hidden; /* Importante para que el fondo llegue a las esquinas */
   padding: 20px;
   cursor: pointer; /* El ratón se vuelve la mano de "hacer clic" en toda la tarjeta */
   transition: transform 0.2s; /* Se desliza suavem un poco al pasar el ratón */
}
div.afiliacion:hover { /* El "acelerador": qué pasa cuando el usuario pone el ratón encima */
    transform: translateX(10px); /* Se desplaza 10 píxeles a la derecha */
    background-color: #452a7a; /* Se ilumina un pelín (opcional, para dar feedback) */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* Una sombra elegante para que parezca que flota */
}
div.afiliacion h3 { color: #00d4ff; margin-top: 0; } /* Azul cyan para que brille en la oscuridad */
div.afiliacion ol li { margin: 0 0 0 5% }

/* RESEÑAS EN INGLÉS */
/* Bloque de inglés: El "Vídeo Inverso" llevado a todo el bloque */
div.afiliacion.ingles {
   background-color: #211140; /* Un violeta mucho más oscuro para dar contraste */
   border-left: 6px solid #e0b0ff; /* LILA/ÍNDIGO: Marca la sección inglesa */
}
/* Títulos. Un lila suave para el inglés */
div.afiliacion.ingles h3 { color: #e0b0ff; margin-top: 0 }

/* Los links: muy importantes que se vean bien */
div.afiliacion a:link {
    color: #ffcc00; /* El link normal. Color oro para que el link de Amazon destaque muchísimo */
    font-weight: bold;
    text-decoration: underline; /* Siempre mejor con subrayado para accesibilidad */
}
/* El link cuando ya se ha clicado (Dorado mate/bronce) */
div.afiliacion a:visited {
    color: #b89b3d; /* Un tono más oscuro y menos saturado */
}
/* El toque pro: cuando pasas el ratón por encima */
div.afiliacion a:hover {
    color: #ffffff; /* Brilla en blanco al pasar el cursor */
    text-decoration: none;
}
/**************************************************************************************************/
/* Clase para tarjetas (reseñas) de infoproductos (al principio de la página) y PDF (al final) */
div.afiliacion.infoproducto {
    border: 1px solid rgba(0, 212, 255, 0.5); /* Borde cian sutil */
    background: linear-gradient(145deg, #1a1a1a, #252525); /* Un degradado sutil para dar volumen */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 212, 255, 0.1); /* Sombra profunda + resplandor cian */
    position: relative;
    overflow: hidden;
}
div.afiliacion.infoproducto h3 {
    letter-spacing: 1px;
    text-transform: uppercase;
}
div.afiliacion.infoproducto.ingles {
    border: 1px solid rgba(224, 176, 255, 0.3); /* Borde lila/índigo sutil */
    background: linear-gradient(145deg, #150b28, #211140); /* Degradado más oscuro que el español */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(224, 176, 255, 0.1); /* Resplandor lila suave */
    position: relative;
    overflow: hidden;
}
/**************************************************************************************************/
/* Botón de descarga del PDF gratis, al final de la página */
.boton-descarga {
    display: inline-block;
    padding: 15px 25px;
    background-color: #00d4ff; /* El azul cyan que usamos para los títulos */
    color: #000000 !important; /* Texto negro para máximo contraste */
    font-weight: bold;
    border-radius: 50px;
    text-decoration: none !important;
    margin: 20px 0;
    transition: transform 0.2s;
}
.boton-descarga.ingles {
    background-color: #e0b0ff;
}
.boton-descarga:hover {
    transform: scale(1.05); /* El botón crece un poquito al tocarlo */
    background-color: #ffffff;
}
/**************************************************************************************************/
/************************************************************************************************
/* ChatGPT */
/* QUÉ CONSIGUE ESTO
- En escritorio: 1) El vídeo puede llegar hasta 560px (como ahora [anchura correcta 
para los vídeos de sesiones en PC pero demasiado ancha para el móvil, la miniatura no cabe, 
 se corta por la dcha]). 2) No se estira más de lo que quieres.
- En móvil: 1) Se adapta automáticamente al ancho de pantalla. 2) Nunca se corta. 
3) Mantiene proporción perfecta (Los iframes de YouTube tienen proporción 16:9 fija).
Y ya no dependes de width="560" ni height="315". De hecho, puedes eliminarlos del HTML. */
.video-wrapper {
   position: relative;
   width: 100%;
   max-width: 560px; /* Tamaño máximo en escritorio, cambiar a voluntad */
   aspect-ratio: 16 / 9;
   /*margin-bottom: 1.5rem;*/
}
.video-wrapper iframe {
   width: 100%;
   height: 100%;
   border: 0;
}

footer a:hover { text-decoration: underline }
/* Alterntativa ChatGPT para banner, "Versión premium (estilo landing moderna)":
En vez de usar <img>, conviértelo en fondo CSS:
<header class="banner"></header>
.banner {
   width: 100%;
   height: 560px; /* Altura de la cabecera
   background-image: url("Cabecera.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
} 
¿Por qué es mejor?
Se adapta SIEMPRE. No deforma. No depende del tamaño real. En monitores ultraanchos no se ve raro.
Queda más “marca profesional�. Es el sistema que usan las landing pages serias.

Aquí está la diferencia real
* Con cover: Si la ventana es muy ancha → Se recortan los lados.
Si la ventana es muy estrecha → Se recorta arriba/abajo.
* Con <img>: Nunca se recorta nada. Solo escala.


Pero yo prefiero su "Solución correcta (simple y limpia)":

Original:
<img style="max-width: 100%; object-fit: fill" src="Cabecera.jpg" alt="..." title="...">

ChatGPT:
<img src="Cabecera.jpg" alt="..." title="..." class="banner">
.banner {
   width: 100%;
   height: auto;
   display: block;
}
¿Qué cambia?

width: 100% → siempre ocupa todo el ancho disponible.
height: auto → mantiene proporción.
display: block → elimina el pequeño espacio inferior que a veces dejan las imágenes inline.

Ahora: 
En móvil → se encoge ✔
En monitor grande → se estira ✔
Sin huecos laterales ✔

Con max-width: 100% le estabas diciendo: “Nunca seas más grande que el contenedor�.
Pero no le estabas diciendo: “Crece siempre hasta ocupar todo el ancho disponible�.
Por eso: Si la pantalla es menor → se encoge. Si la pantalla es mayor → se queda en 1663px.

¿Por qué tú no ves diferencia? 
Porque tu imagen: Es bastante horizontal. Está pensada como banner. Y la estás viendo 
en tamaños normales. En condiciones normales ambas soluciones parecen idénticas.
La diferencia aparece en: Pantallas ultraanchas. Pantallas 4K. Tablets horizontales.

La versión “premium landing� tiene sentido cuando: Pones texto encima del banner.
Quieres efecto visual tipo portada de Netflix. Quieres una altura siempre idéntica.
Pero tú ahora mismo no necesitas eso.
*/