:root {
    --color-fondo-pagina: #F8F9FF;
    --color-blanco: #fff;
    --color-primario: #005571;
    --color-primario-claro: #016F92;
    --color-titulo: #0D1C2E;
    --color-texto: #3F484D;
    --color-borde: #BFC8CE;
    --color-peligro: #BA1A1A;
    --color-peligro-fondo: #FFDAD6;
    --color-badge-fondo: #DCE9FF; /* badge "Entorno Seguro de Prueba" y círculo de icono de las reglas de oro */
    --color-destacado-fondo: #E6EEFF; /* caja visual del hero y cabecera de alerta del email simulado */
    --color-tarjeta-fondo: #EFF4FF; /* tarjetas de explicación de "Anatomía de un engaño" */

    --ancho-contenido: 1200px; /* ancho máximo compartido por header, contenido y footer */

    --radio-base: 12px; /* esquinas de botones, badge, caja del hero, icono de alerta del email, icono de reglas de oro */
    --radio-tarjeta: 8px; /* tarjetas grandes: anatomía del engaño, reglas de oro */
    --radio-detalle: 4px; /* elementos pequeños: mockup del email, tarjeta de explicación */

    --sombra-boton-cta: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    --sombra-mockup-email: 0 1px 2px rgba(0, 0, 0, .05);
    --sombra-tarjeta-hover: 0 12px 24px -8px rgba(0, 0, 0, .15), 0 4px 8px -4px rgba(0, 0, 0, .08); /* tarjetas de "3 Reglas de Oro" al pasar el ratón */

    --bs-border-color: var(--color-borde); /* así los .border de Bootstrap salen ya del color de marca */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-fondo-pagina);
    color: var(--color-texto);
}

img {
    max-width: 100%;
    display: block;
}

a {
    font-family: inherit;
}

/* Cabecera de la página: logo OCU + botón a la web */

.cabecera {
    background: var(--color-fondo-pagina);
    border-bottom: 1px solid var(--color-borde);
}

.cabecera__contenido {
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    padding: 16px 64px;
}

.cabecera__logo {
    width: 56px;
    height: 56px;
}

/* Botones: skin de marca sobre el .btn de Bootstrap, vía sus variables --bs-btn-* */

.boton-marca {
    --bs-btn-bg: var(--color-primario);
    --bs-btn-border-color: var(--color-primario);
    --bs-btn-border-width: 0;
    --bs-btn-color: var(--color-blanco);
    --bs-btn-hover-bg: var(--color-primario-claro);
    --bs-btn-hover-border-color: var(--color-primario-claro);
    --bs-btn-hover-color: var(--color-blanco);
    --bs-btn-active-bg: var(--color-primario-claro);
    --bs-btn-active-border-color: var(--color-primario-claro);
    --bs-btn-active-color: var(--color-blanco);
    --bs-btn-border-radius: var(--radio-base);
    --bs-btn-padding-y: 8px;
    --bs-btn-padding-x: 24px;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
}

/* Botón grande y destacado: el CTA final de "Quiero seguir aprendiendo" */

.boton-marca--destacado {
    --bs-btn-padding-y: 24px;
    --bs-btn-padding-x: 32px;
    --bs-btn-font-size: 1.125rem;
    box-shadow: var(--sombra-boton-cta);
}

.boton__flecha {
    font-size: 1.25rem;
}

/* Estructura general de la página: ancho máximo y separación entre secciones */

.pagina {
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    padding: 32px 64px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Imagen grande de portada, arriba del todo */

.banner {
    border-radius: var(--radio-base);
}

/* Bloque de presentación: titular, texto de intro e imagen del escudo */

.presentacion {
    gap: 32px;
}

.presentacion__texto {
    flex: 1 1 420px;
}

/* Etiqueta pequeña "Entorno Seguro de Prueba" */

.etiqueta-marca {
    background: var(--color-badge-fondo);
    color: var(--color-primario);
    font-size: .9rem;
}

.etiqueta-marca__icono {
    /* icono del escudo: proporción alargada real del SVG, no un recorte accidental */
    width: 12px;
    height: 15px;
}

.presentacion h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-titulo);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.presentacion__texto p {
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0;
}

/* Bloque de vídeo del hero: iframe de YouTube + enlace al podcast completo debajo */

.presentacion__video-bloque {
    flex: 1 1 320px;
    max-width: 535px;
}

.presentacion__video {
    aspect-ratio: 16 / 9;
    background: var(--color-destacado-fondo);
    border-radius: var(--radio-base);
    overflow: hidden;
}

.presentacion__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.presentacion__enlace-podcast {
    align-self: center;
    color: var(--color-primario);
    font-weight: 600;
    text-decoration: none;
}

.presentacion__enlace-podcast:hover {
    text-decoration: underline;
}

/* Títulos de cada sección de la página */

.titulo-seccion {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-titulo);
    letter-spacing: -0.01em;
    margin: 0;
}

.titulo-seccion img {
    width: 22px;
    height: 15px;
}

/* Sección "Anatomía de un engaño": correo simulado + explicaciones al lado */

.anatomia-engano__tarjeta {
    border-radius: var(--radio-tarjeta);
    gap: 32px;
}

.anatomia-engano__correo {
    flex: 1 1 420px;
    border-radius: var(--radio-detalle);
    box-shadow: var(--sombra-mockup-email);
    align-self: flex-start;
}

/* Correo falso de ejemplo (el "mockup" del email de phishing) */

.correo-simulado__alerta {
    background: var(--color-destacado-fondo);
    border-bottom: 1px solid var(--color-borde);
}

.correo-simulado__alerta-icono {
    flex: none;
    width: 40px;
    height: 40px;
    background: var(--color-peligro-fondo);
    border-radius: var(--radio-base);
}

.correo-simulado__alerta-icono img {
    /* icono de exclamación: barra + punto, proporción real del SVG (no un error de tamaño) */
    width: 4px;
    height: 18px;
}

.correo-simulado__alerta-texto {
    gap: 2px;
}

.correo-simulado__alerta-texto strong {
    color: var(--color-titulo);
    font-weight: 400;
    font-size: 1rem;
}

.correo-simulado__alerta-texto span {
    color: var(--color-texto);
    font-size: .875rem;
}

.correo-simulado__hora {
    margin-left: auto;
    flex: none;
    color: var(--color-texto);
    font-size: .875rem;
    align-self: flex-start;
}

.correo-simulado__remitente {
    margin: 0;
    color: var(--color-peligro);
    font-weight: 700;
    font-size: 1rem;
}

.correo-simulado__cuerpo h3 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-titulo);
}

.correo-simulado__cuerpo p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--color-texto);
}

.correo-simulado__cuerpo strong {
    color: var(--color-peligro);
    font-weight: 700;
}

.correo-simulado__boton {
    align-self: flex-start;
    background: var(--color-primario-claro);
    color: var(--color-blanco);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .02em;
    padding: 14px 24px;
    border-radius: 2px; /* botón del mockup de email: esquina casi recta a propósito, distinta de --radio-base */
}

.anatomia-engano__explicaciones {
    flex: 1 1 320px;
}

/* Parte del correo simulado que se resalta (vía JS) al pasar el ratón, o tocar en móvil, su tarjeta de explicación */

[data-parte-email] {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    border-radius: var(--radio-detalle);
}

/* Los spans de texto suelto (urgencia, ubicación) necesitan una caja propia para poder escalarse */
span[data-parte-email] {
    display: inline-block;
}

.correo-simulado__parte--resaltada {
    position: relative;
    z-index: 1;
    transform: scale(1.06);
    box-shadow: 0 0 0 2px var(--color-peligro);
}

/* El pie del correo va pegado al borde redondeado de la tarjeta (recortado con overflow-hidden):
   el zoom se vería cortado, así que aquí el resalte es solo un reborde. Un box-shadow inset no
   sirve porque una <img> pinta sus píxeles por encima y lo tapa por completo: hace falta un
   border real (con hueco reservado siempre, para que no dé un salto de layout al aparecer) */
img[data-parte-email] {
    border: 2px solid transparent;
}

img[data-parte-email].correo-simulado__parte--resaltada {
    transform: none;
    box-shadow: none;
    border-color: var(--color-peligro);
}

/* Cada tarjeta que explica una señal de alarma del correo (remitente, urgencia, etc.) */

.tarjeta-explicacion {
    background: var(--color-tarjeta-fondo);
    border-left: 4px solid var(--color-primario);
    border-radius: var(--radio-detalle);
    cursor: pointer;
    transition: background-color .2s ease, border-left-color .2s ease;
}

/* Estado "activo": hover en PC o tap en móvil (donde no hay :hover real) */
.tarjeta-explicacion--activa {
    background: var(--color-peligro-fondo);
    border-left-color: var(--color-peligro);
}

.tarjeta-explicacion__titulo {
    font-size: 1rem;
    color: var(--color-titulo);
    margin-bottom: 4px;
}

.tarjeta-explicacion__titulo img {
    width: 20px;
    height: 20px;
}

.tarjeta-explicacion p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.4;
}

/* Sección "3 Reglas de Oro para el Futuro" */

.reglas-oro {
    gap: 32px;
    padding: 32px 0;
}

.reglas-oro__cabecera {
    max-width: 576px;
}

.reglas-oro__cabecera p {
    margin: 0;
    font-size: 1rem;
}

/* Cada una de las 3 tarjetas de consejo (detente y piensa, verifica el remitente...) */

.tarjeta-regla {
    flex: 1 1 280px;
    max-width: 341px;
    border-radius: var(--radio-tarjeta);
    padding: 32px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tarjeta-regla:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-tarjeta-hover);
    border-color: var(--color-primario-claro);
}

.tarjeta-regla__icono {
    width: 64px;
    height: 64px;
    background: var(--color-badge-fondo);
    border-radius: var(--radio-base);
    transition: transform .2s ease;
}

.tarjeta-regla:hover .tarjeta-regla__icono {
    transform: scale(1.08);
}

.tarjeta-regla h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-titulo);
    margin: 0;
}

.tarjeta-regla p {
    font-size: 1rem;
    margin: 0;
}

/* Pie de página: aviso legal + enlaces de privacidad y ayuda */

.pie-pagina {
    border-top: 1px solid var(--color-borde);
    max-width: var(--ancho-contenido);
    margin-left: auto;
    margin-right: auto;
    padding: 24px 64px 48px;
    font-size: .875rem;
}

.pie-pagina p {
    margin: 0;
}

.pie-pagina__enlaces a {
    color: var(--color-texto);
    text-decoration: none;
}

.pie-pagina__enlaces a:hover {
    text-decoration: underline;
}

/* Ajustes para pantallas más pequeñas (tablet y móvil) */

@media (max-width: 900px) {
    .cabecera__contenido,
    .pagina,
    .pie-pagina {
        padding-left: 24px;
        padding-right: 24px;
    }

    .presentacion h1 {
        font-size: 1.85rem;
    }

    .titulo-seccion {
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {
    .cabecera__contenido,
    .pagina,
    .pie-pagina {
        padding-left: 16px;
        padding-right: 16px;
    }

    .boton-marca--destacado {
        width: 100%;
        padding: 16px 24px;
    }
}