/* =====================================================================
   ESTILOS DEL SITIO CIEMEX
   ---------------------------------------------------------------------
   Organizado por secciones. Para cambiar un color en todo el sitio,
   cámbialo solo en la sección 1 (variables).

   1. Variables (colores, tipografías, medidas)
   2. Base
   3. Botones y utilidades
   4. Encabezado y menú
   5. Traductor
   6. Banner de cada página (hero)
   7. Home
   8. Productos (CC, CD, SM, SP)
   9. About Us
   10. Contact y formulario
   11. Páginas de texto legal (privacidad, cookies) y acordeón
   12. Pie de página
   13. Celular y tableta
   ===================================================================== */


/* ---------- 1. Variables ---------- */
:root {
	--azul-marino: #001744;    /* encabezado */
	--azul-oscuro: #0B1727;    /* fondos oscuros, pie de página */
	--azul-tarjeta: #142842;   /* tarjetas sobre fondo oscuro */
	--azul-claro: #32B4DA;     /* acentos, subtítulos */
	--dorado: #DAA858;         /* botones "View Details", íconos */
	--amarillo: #FFB000;       /* botón principal, cuadro de serie */
	--gris-texto: #54595F;
	--gris-claro: #F4F5F7;
	--blanco: #FFFFFF;
	--borde: #D7DDE3;

	--letra-titulos: "Poppins", sans-serif;
	--letra-texto: "Roboto", sans-serif;

	--ancho-maximo: 1140px;
	--radio: 10px;
}


/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--letra-texto);
	font-size: 16px;
	line-height: 1.7;
	color: var(--gris-texto);
	background: var(--blanco);
}

h1, h2, h3, h4 {
	font-family: var(--letra-titulos);
	line-height: 1.2;
	color: var(--azul-oscuro);
	margin: 0 0 .6em;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--azul-claro); }

.contenedor {
	width: 100%;
	max-width: var(--ancho-maximo);
	margin: 0 auto;
	padding: 0 20px;
}

.seccion { padding: 80px 0; }
/* Al saltar a una sección (por ejemplo /#products), que el encabezado fijo no tape el título */
section[id] { scroll-margin-top: 86px; }
.seccion-oscura { background: var(--azul-oscuro); color: #D5DCE4; }
.seccion-oscura h2, .seccion-oscura h3 { color: var(--blanco); }

/* Texto pequeño en mayúsculas arriba de los títulos */
.antetitulo {
	display: block;
	font-family: var(--letra-titulos);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--azul-claro);
	margin-bottom: 10px;
}

.texto-centro { text-align: center; }

.dos-columnas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}


/* ---------- 3. Botones y utilidades ---------- */
.boton {
	display: inline-block;
	padding: 12px 32px;
	border-radius: 30px;
	border: 0;
	font-family: var(--letra-titulos);
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--azul-oscuro);
	background: var(--amarillo);
	cursor: pointer;
	transition: transform .2s, filter .2s;
}
.boton:hover { filter: brightness(1.08); transform: translateY(-2px); }
.boton-dorado { background: var(--dorado); color: var(--blanco); text-transform: none; font-size: .95rem; }

.oculto-visual {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}


/* ---------- 4. Encabezado y menú ---------- */
.encabezado {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--azul-marino);
}

.encabezado-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 86px;
}

.logo img { width: 200px; height: auto; }

.encabezado { transition: box-shadow .3s; }
/* Sombra del encabezado cuando ya se bajó en la página (la agrega sitio.js) */
.encabezado.con-sombra { box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }

.menu { display: flex; gap: 32px; }
.menu a {
	position: relative;
	display: inline-block;
	padding: 4px 0;
	font-family: var(--letra-titulos);
	font-weight: 500;
	color: var(--blanco);
	text-decoration: none;
	transition: color .2s, transform .2s;
}
/* Al pasar el mouse: cambia a amarillo, se levanta, crece un poco y aparece una línea debajo */
.menu a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -2px;
	height: 2px;
	background: var(--amarillo);
	transition: left .25s, right .25s;
}
.menu a:hover, .menu a:focus-visible { color: var(--amarillo); transform: translateY(-3px) scale(1.08); }
.menu a:hover::after, .menu a:focus-visible::after, .menu a.activo::after { left: 0; right: 0; }
.menu a.activo { color: var(--amarillo); }

/* Botón de tres rayas (solo celular) */
.menu-boton {
	display: none;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
}
.menu-boton span {
	display: block;
	width: 26px;
	height: 3px;
	margin: 5px 0;
	background: var(--blanco);
	border-radius: 2px;
}


/* ---------- 5. Traductor ---------- */
.traductor {
	position: absolute;
	top: 0;
	right: 20px;
}
.traductor-boton {
	background: var(--amarillo);
	color: var(--azul-oscuro);
	border: 0;
	border-radius: 0 0 6px 6px;
	padding: 4px 14px;
	font-family: var(--letra-titulos);
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
}
.traductor-panel {
	position: absolute;
	right: 0;
	top: 100%;
	margin-top: 6px;
	padding: 10px;
	background: var(--blanco);
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
	min-width: 200px;
}
/* Ajustes al traductor de Google:
   - Oculta la barra que agrega arriba de la página.
   - Quita el resaltado y la ventanita que aparecen al dejar el mouse sobre un texto traducido
     (era lo que hacía que los textos se vieran blancos de repente). */
body { top: 0 !important; }
.skiptranslate iframe,
#goog-gt-tt,
.goog-tooltip,
.VIpgJd-yAWNEb-L7lbkb { display: none !important; }
.goog-text-highlight,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
}
font { color: inherit; background: none; }


/* ---------- 6. Banner de cada página (hero) ---------- */
.banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 32vh;
	padding: 60px 0;
	background-color: var(--azul-oscuro);
	background-size: cover;
	background-position: center;
	color: var(--blanco);
}
.banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(320deg, #0B1727 43%, #32B4DA 96%);
	opacity: .8;
}
.banner .contenedor { position: relative; }
.banner h1 { color: var(--blanco); font-size: clamp(2rem, 4.5vw, 3.4rem); margin: 0; }
.banner p { margin: 10px 0 0; font-family: var(--letra-titulos); font-weight: 500; }


/* ---------- 7. Home ---------- */
.home-portada {
	position: relative;
	overflow: hidden;
	min-height: 88vh;
	display: flex;
	align-items: center;
	background: var(--azul-oscuro);
	color: var(--blanco);
}
/* Foto de fondo: aparece con un desvanecido suave (sin acercamiento, que se veía trabado) */
.home-portada::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/fondos/home.jpg") center / cover no-repeat;
	animation: aparecer 1.4s ease-out both;
}
/* Degradado azul a la izquierda para que el texto se lea bien */
.home-portada::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 23, 68, .85) 0%, rgba(0, 23, 68, .45) 45%, rgba(0, 23, 68, 0) 75%);
	animation: aparecer 1.2s ease-out both;
}
.home-portada .contenedor { position: relative; z-index: 1; }
.home-portada .antetitulo { color: var(--azul-claro); }
.home-portada h1 {
	color: var(--blanco);
	font-size: clamp(2.4rem, 6vw, 4.2rem);
	max-width: 640px;
}
.home-portada p { max-width: 560px; margin: 0 0 30px; }

/* Entrada escalonada: primero el antetítulo, luego el título, el texto y el botón */
.home-portada .antetitulo,
.home-portada h1,
.home-portada p,
.home-portada .boton { animation: entrar-desde-abajo .9s ease-out both; }
.home-portada h1     { animation-delay: .25s; }
.home-portada p      { animation-delay: .5s; }
.home-portada .boton { animation-delay: .75s; }

/* Indicador para bajar */
.portada-flecha {
	position: absolute;
	left: 50%;
	bottom: 26px;
	z-index: 1;
	width: 26px;
	height: 42px;
	margin-left: -13px;
	border: 2px solid rgba(255, 255, 255, .7);
	border-radius: 14px;
	animation: aparecer 1s 1.2s ease-out both;
}
.portada-flecha::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 8px;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--blanco);
	animation: rueda 1.6s infinite;
}

@keyframes entrar-desde-abajo {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: none; }
}
@keyframes aparecer {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes rueda {
	0%   { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(12px); }
}

.home-video {
	position: relative;
	background: var(--azul-oscuro) url("../img/fondos/planta.jpg") center / cover no-repeat;
	color: var(--blanco);
	text-align: center;
}
.home-video::before { content: ""; position: absolute; inset: 0; background: rgba(11, 23, 39, .75); }
.home-video .contenedor { position: relative; max-width: 900px; }
.home-video video { margin: 0 auto 30px; border-radius: var(--radio); width: 100%; max-width: 640px; }
.home-video p {
	font-family: var(--letra-titulos);
	font-weight: 600;
	font-size: 1.15rem;
	margin: 0 0 30px;
}

.productos-rejilla {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin-top: 40px;
}
.producto-tarjeta {
	background: var(--azul-tarjeta);
	border-radius: var(--radio);
	padding: 40px 30px;
	text-align: center;
}
.producto-tarjeta .serie-letras {
	font-family: var(--letra-titulos);
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--dorado);
	margin: 0;
}
.producto-tarjeta .serie-palabra {
	font-family: var(--letra-titulos);
	font-weight: 600;
	color: var(--blanco);
	margin: 6px 0 14px;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.producto-tarjeta p { margin: 0 0 24px; }

.home-galeria { background: var(--gris-claro) url("../img/fondos/patron.png"); }

/* Carrusel de fotos: se desliza con el dedo o con los puntos */
.carrusel { position: relative; }
.carrusel-pista {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	border-radius: var(--radio);
	scrollbar-width: none;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista img {
	flex: 0 0 100%;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	scroll-snap-align: start;
}
.carrusel-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.carrusel-puntos button {
	width: 10px; height: 10px; padding: 0;
	border-radius: 50%; border: 0;
	background: #B9C0C8; cursor: pointer;
}
.carrusel-puntos button.activo { background: var(--azul-oscuro); }

.home-mundo h2 { font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; }

.clientes-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 24px;
	align-items: center;
	margin-top: 40px;
}
.clientes-rejilla img {
	width: 100%;
	height: 90px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .8;
	transition: filter .2s, opacity .2s;
}
.clientes-rejilla img:hover { filter: none; opacity: 1; }


/* ---------- 8. Productos (CC, CD, SM, SP) ---------- */
/* Encabezado: banner azul con foto, insignia de la serie y título */
.producto-portada {
	position: relative;
	overflow: hidden;
	padding: 70px 0;
	background: var(--azul-marino) url("../img/fondos/privacidad.jpg") center / cover no-repeat;
	color: var(--blanco);
}
.producto-portada::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(0, 23, 68, .97) 35%, rgba(0, 23, 68, .8) 65%, rgba(50, 180, 218, .55) 100%);
}
.producto-portada-fila {
	position: relative;
	display: flex;
	align-items: center;
	gap: 40px;
}
.serie-insignia {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 190px;
	height: 190px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .06);
	border: 2px solid var(--dorado);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35), inset 0 0 0 8px rgba(218, 168, 88, .12);
	font-family: var(--letra-titulos);
	animation: entrar-desde-abajo .8s ease-out both;
}
.serie-insignia .serie-letras { font-size: 4.6rem; font-weight: 700; line-height: 1; color: var(--dorado); }
.serie-insignia .serie-palabra { margin-top: 6px; font-size: .95rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; }

.producto-titulos { animation: entrar-desde-abajo .8s .15s ease-out both; }
.producto-titulos h1 {
	color: var(--blanco);
	font-size: clamp(1.4rem, 2.6vw, 2.1rem);
	margin-bottom: 10px;
}
.producto-titulos h1::first-letter { text-transform: uppercase; }
.producto-titulos p { margin: 0; color: #9FDCEF; font-weight: 500; }

.migas { font-size: .85rem; margin-bottom: 12px; color: #B8C4D4; }
.migas a { color: var(--dorado); text-decoration: none; }
.migas a:hover { text-decoration: underline; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 20px 0 0; padding: 0; }
.etiquetas li {
	padding: 5px 14px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 20px;
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .03em;
	background: rgba(255, 255, 255, .08);
}

/* Datos: tablas de análisis y especificaciones sobre fondo gris claro */
.producto-datos { background: var(--gris-claro); }
.producto-tablas {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 30px;
	align-items: start;
}
.tabla-datos {
	width: 100%;
	border-collapse: collapse;
	background: var(--blanco);
	font-size: .9rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.tabla-datos caption {
	background: var(--amarillo);
	color: var(--azul-oscuro);
	font-family: var(--letra-titulos);
	font-weight: 700;
	text-transform: uppercase;
	padding: 12px;
}
.tabla-datos th, .tabla-datos td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--borde);
	text-align: left;
	vertical-align: top;
}
.tabla-datos th { font-weight: 500; color: var(--azul-oscuro); width: 50%; }
.tabla-datos tr:nth-child(even) { background: var(--gris-claro); }

/* Otras series */
.otras-series {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 40px;
}
.otra-serie {
	display: flex;
	flex-direction: column;
	padding: 30px 26px;
	border-radius: var(--radio);
	border-top: 3px solid transparent;
	background: var(--azul-tarjeta);
	color: #D5DCE4;
	text-decoration: none;
	transition: transform .3s, box-shadow .3s, border-color .3s;
}
.otra-serie:hover, .otra-serie:focus-visible {
	transform: translateY(-8px);
	box-shadow: 0 16px 30px rgba(0, 0, 0, .35);
	border-top-color: var(--dorado);
}
.otra-serie .serie-letras { font-family: var(--letra-titulos); font-size: 2.8rem; font-weight: 700; line-height: 1; color: var(--dorado); }
.otra-serie .serie-palabra { font-family: var(--letra-titulos); font-weight: 600; color: var(--blanco); letter-spacing: .15em; text-transform: uppercase; margin: 6px 0 14px; font-size: .85rem; }
.otra-serie-texto { flex: 1; font-size: .92rem; }
.otra-serie-ver { margin-top: 18px; font-family: var(--letra-titulos); font-weight: 600; color: var(--dorado); }
.otra-serie-ver span { display: inline-block; transition: transform .2s; }
.otra-serie:hover .otra-serie-ver span { transform: translateX(5px); }


/* ---------- 9. About Us ---------- */
.about-bloque-planta {
	position: relative;
	background: var(--azul-oscuro) url("../img/fondos/about-planta.jpg") center / cover no-repeat;
}
.about-bloque-planta::before { content: ""; position: absolute; inset: 0; background: rgba(11, 23, 39, .6); }
.about-bloque-planta .contenedor { position: relative; }
.tarjeta-oscura {
	background: rgba(20, 40, 66, .92);
	border-radius: var(--radio);
	padding: 40px;
	color: #D5DCE4;
}
.tarjeta-oscura h2 { color: var(--blanco); }


/* ---------- 10. Contact y formulario ---------- */
.contacto-tarjetas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.contacto-tarjeta {
	background: var(--azul-tarjeta);
	color: #D5DCE4;
	border-radius: var(--radio);
	padding: 30px 20px;
	text-align: center;
}
.contacto-tarjeta h2 { color: var(--blanco); font-size: 1rem; margin: 14px 0 10px; }
.contacto-tarjeta a { color: #D5DCE4; text-decoration: none; }
.contacto-tarjeta a:hover { color: var(--dorado); }
.contacto-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 2px solid var(--dorado);
	border-radius: 50%;
	color: var(--dorado);
}
.contacto-icono svg { width: 24px; height: 24px; }

.contacto-formulario-seccion {
	background: var(--azul-oscuro) url("../img/fondos/contact-telefono.png") center / cover no-repeat;
	color: #D5DCE4;
}
.contacto-formulario-seccion h2 { color: var(--blanco); }

.formulario { display: grid; gap: 16px; }
.formulario label { display: grid; gap: 6px; font-weight: 500; color: var(--blanco); }
.formulario input, .formulario textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #3A4E66;
	border-radius: 6px;
	background: rgba(255, 255, 255, .95);
	font: inherit;
	color: var(--azul-oscuro);
}
.formulario input:focus, .formulario textarea:focus { outline: 2px solid var(--dorado); outline-offset: 1px; }
.formulario textarea { min-height: 140px; resize: vertical; }
/* Campo trampa contra spam: las personas no lo ven */
.formulario .campo-trampa { position: absolute; left: -9999px; }

.aviso-formulario { padding: 14px 18px; border-radius: 6px; margin-bottom: 20px; font-weight: 500; }
.aviso-ok { background: #E3F6EA; color: #155D32; }
.aviso-error { background: #FDE8E8; color: #8A1C1C; }


/* ---------- 11. Páginas de texto legal y acordeón ---------- */
.texto-legal { max-width: 900px; margin: 0 auto; }

.acordeon details {
	border: 1px solid var(--borde);
	border-radius: 6px;
	margin-bottom: 12px;
	background: var(--blanco);
}
.acordeon summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 16px 48px 16px 20px;
	font-family: var(--letra-titulos);
	font-weight: 600;
	color: var(--azul-oscuro);
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--azul-claro);
	border-bottom: 2px solid var(--azul-claro);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s;
}
.acordeon details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.acordeon details[open] summary { border-bottom: 1px solid var(--borde); }
.acordeon summary:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.acordeon-texto { padding: 16px 20px 8px; }


/* ---------- 12. Pie de página ---------- */
.pie { background: var(--azul-oscuro); color: #D5DCE4; padding-top: 60px; }
.pie a { color: #D5DCE4; text-decoration: none; }
.pie a:hover { color: var(--dorado); }
.pie-columnas {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
}
.pie-columnas img { width: 220px; }
.pie-titulo { color: var(--blanco); font-size: 1.05rem; margin-bottom: 10px; }
.pie address { font-style: normal; }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.pie-final {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 18px 0;
	font-size: .85rem;
	text-align: center;
}

.subir {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: var(--azul-tarjeta);
	color: var(--blanco);
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s;
}
.subir.visible { opacity: 1; pointer-events: auto; }


/* ---------- 12b. Animaciones y efectos al pasar el mouse ---------- */

/* Título de sección con una línea dorada debajo (clase "titulo-seccion") */
.titulo-seccion { position: relative; padding-bottom: 14px; }
.titulo-seccion::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 60px;
	height: 3px;
	margin-left: -30px;
	border-radius: 2px;
	background: var(--dorado);
}

/* Tarjetas que se levantan al pasar el mouse */
.producto-tarjeta,
.contacto-tarjeta {
	border-top: 3px solid transparent;
	transition: transform .3s, box-shadow .3s, border-color .3s;
}
.producto-tarjeta:hover,
.contacto-tarjeta:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 30px rgba(0, 0, 0, .35);
	border-top-color: var(--dorado);
}
.producto-tarjeta .serie-letras { transition: transform .3s; }
.producto-tarjeta:hover .serie-letras { transform: scale(1.1); }

/* Sombra suave bajo el carrusel de fotos */
.carrusel-pista { box-shadow: 0 14px 30px rgba(0, 23, 68, .25); }

/* Título de los banners de páginas interiores: entra desde abajo */
.banner h1, .banner p { animation: entrar-desde-abajo .8s ease-out both; }
.banner p { animation-delay: .2s; }

/* Aparición al bajar en la página: sitio.js agrega "revelar" y luego "visible" */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity .7s ease-out, transform .7s ease-out; }
.revelar.visible { opacity: 1; transform: none; }


/* ---------- 13. Celular y tableta ---------- */
@media (max-width: 900px) {
	.dos-columnas,
	.producto-tablas,
	.pie-columnas { grid-template-columns: 1fr; }
	.contacto-tarjetas { grid-template-columns: 1fr; }
	.producto-portada-fila { flex-direction: column; align-items: flex-start; gap: 24px; }
	.serie-insignia { width: 130px; height: 130px; border-radius: 18px; }
	.serie-insignia .serie-letras { font-size: 3.2rem; }
	.otras-series { grid-template-columns: 1fr; }
	.seccion { padding: 56px 0; }
}

@media (max-width: 760px) {
	.menu-boton { display: block; }
	.menu {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		gap: 0;
		background: var(--azul-marino);
		padding: 10px 20px 20px;
	}
	.menu.abierto { display: flex; }
	.menu a { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
	.menu a:hover, .menu a:focus-visible { transform: translateX(6px); }
	.menu a::after { display: none; }
	.productos-rejilla { grid-template-columns: 1fr; }
	.logo img { width: 160px; }
	.traductor { right: 70px; }
}

/* Si la persona configuró su equipo para "reducir movimiento", se quitan las animaciones */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
	.revelar { opacity: 1; transform: none; }
	.carrusel-pista { scroll-behavior: auto; }
}