/* ==========================================================================
   SiReTT Online - sitio comercial
   Sistema de diseño. Tokens primero; nada de valores sueltos en las páginas.
   ========================================================================== */

:root {
	/* Marca. El naranja sale del logotipo y es el UNICO acento: se usa poco
	   y siempre para lo que el visitante debe hacer o mirar. */
	--naranja:        #f2870d;
	--naranja-vivo:   #ff9d2e;
	--tinta:          #0a2540;  /* azul profundo: todo el texto principal */
	--tinta-suave:    #4a6076;
	--azul:           #0b5fb0;  /* azul del mosaico del logo */
	--celeste:        #33b5e5;  /* celeste del producto */
	--verde:          #00a844;  /* confirmaciones, nada más */

	/* Superficies */
	--mostrador:      #eef3f8;  /* fondo de página: azul muy lavado */
	--mostrador-hondo:#e2eaf3;
	--papel:          #ffffff;
	--linea:          #d3dfec;

	/* Tipografía */
	--display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
	--texto:   'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--ticket:  'Roboto Mono', ui-monospace, 'Cascadia Mono', 'Courier New', monospace;

	/* Escala tipográfica */
	--t-hero:  clamp(2.9rem, 7vw, 5.4rem);
	--t-h2:    clamp(2rem, 4vw, 3.1rem);
	--t-h3:    1.35rem;
	--t-body:  1.05rem;
	--t-small: .92rem;
	--t-micro: .78rem;

	/* Ritmo */
	--seccion: clamp(4rem, 9vw, 7rem);
	--ancho:   1180px;
	--radio:   10px;

	--sombra-papel: 0 1px 2px rgba(10,37,64,.06), 0 12px 32px rgba(10,37,64,.10);
	--sombra-alta:  0 2px 6px rgba(10,37,64,.08), 0 28px 60px rgba(10,37,64,.18);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--mostrador);
	color: var(--tinta);
	font-family: var(--texto);
	font-size: var(--t-body);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--azul); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; margin: 0; letter-spacing: -.01em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.25; }
p  { margin: 0 0 1rem; }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

/* Etiqueta de sección: pequeña, en versalitas, con una regla corta al lado.
   Marca de qué habla el bloque; no decora. */
.rotulo {
	display: flex; align-items: center; gap: .7rem;
	font-family: var(--texto); font-size: var(--t-micro);
	text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
	color: var(--tinta-suave); margin-bottom: 1.1rem;
}
.rotulo::before { content: ""; width: 26px; height: 2px; background: var(--naranja); flex: none; }

/* --------------------------------------------------------------- Botones */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	font-family: var(--texto); font-weight: 700; font-size: 1rem;
	padding: .85rem 1.55rem; border-radius: var(--radio);
	border: 2px solid transparent; cursor: pointer; text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.btn:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
.btn-1 { background: var(--naranja); color: #fff; box-shadow: 0 6px 18px rgba(242,135,13,.32); }
.btn-1:hover { background: var(--naranja-vivo); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(242,135,13,.40); }
.btn-2 { background: transparent; color: var(--tinta); border-color: var(--linea); }
.btn-2:hover { border-color: var(--tinta); transform: translateY(-2px); }
.btn-fantasma { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.btn-fantasma:hover { background: rgba(255,255,255,.22); }

/* ------------------------------------------------------------ Encabezado */
.cabecera {
	position: sticky; top: 0; z-index: 50;
	background: rgba(238,243,248,.92); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--linea);
}
.cabecera .contenedor { display: flex; align-items: center; gap: 2rem; min-height: 76px; }
.marca img { height: 40px; width: auto; }
.nav { display: flex; gap: 1.7rem; margin-left: auto; }
.nav a {
	font-weight: 600; font-size: var(--t-small); color: var(--tinta); text-decoration: none;
	padding: .35rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--naranja); }
.cabecera .btn { padding: .6rem 1.15rem; font-size: var(--t-small); }
.menu-btn { display: none; }

@media (max-width: 900px) {
	.nav { display: none; }
	.cabecera .contenedor { gap: 1rem; }
}

/* ------------------------------------------------------------------ Hero */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 var(--seccion); overflow: hidden; }
.hero .contenedor { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.hero h1 { font-size: var(--t-hero); text-transform: uppercase; }
.hero h1 em { font-style: normal; color: var(--naranja); display: block; }
.hero-bajada { font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--tinta-suave); max-width: 34ch; margin-top: 1.4rem; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero-nota { font-size: var(--t-small); color: var(--tinta-suave); margin-top: 1.1rem; }
.hero-nota code {
	font-family: var(--ticket); font-size: .85em; background: var(--mostrador-hondo);
	padding: .15rem .45rem; border-radius: 4px; color: var(--tinta);
}

/* ------------------------------------------- El tiquete (pieza distintiva)
   Un recibo térmico impreso en CSS. No lista una venta: lista la red. */
.tiquete {
	position: relative;
	background: var(--papel);
	font-family: var(--ticket);
	font-size: .82rem; line-height: 1.85; color: var(--tinta);
	padding: 2.2rem 1.9rem 2.6rem;
	max-width: 380px; margin-inline: auto;
	box-shadow: var(--sombra-alta);
	transform: rotate(-1.4deg);
	/* Borde dentado arriba y abajo, como papel cortado por la impresora. */
	--diente: 11px;
	-webkit-mask:
		radial-gradient(var(--diente) at 50% 0, #0000 98%, #000) 50% 0/22px 100% repeat-x,
		radial-gradient(var(--diente) at 50% 100%, #0000 98%, #000) 50% 100%/22px 100% repeat-x,
		linear-gradient(#000 0 0) 50% 50%/100% calc(100% - 24px) no-repeat;
	        mask:
		radial-gradient(var(--diente) at 50% 0, #0000 98%, #000) 50% 0/22px 100% repeat-x,
		radial-gradient(var(--diente) at 50% 100%, #0000 98%, #000) 50% 100%/22px 100% repeat-x,
		linear-gradient(#000 0 0) 50% 50%/100% calc(100% - 24px) no-repeat;
}
.tiquete-cab { text-align: center; }
.tiquete-cab strong { display: block; font-size: 1.02rem; letter-spacing: .06em; }
.tiquete-cab span { font-size: .72rem; color: var(--tinta-suave); letter-spacing: .04em; }
.tiquete hr { border: 0; border-top: 1px dashed var(--linea); margin: 1rem 0; }

.tiquete-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.tiquete-linea span:first-child { color: var(--tinta-suave); }
.tiquete-linea b { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.tiquete-total { border-top: 2px solid var(--tinta); margin-top: .9rem; padding-top: .7rem; }
.tiquete-total b { font-size: 1.35rem; color: var(--naranja); }
.tiquete-pie { text-align: center; font-size: .7rem; color: var(--tinta-suave); margin-top: 1.2rem; letter-spacing: .03em; }

/* Impresión: cada línea entra como si saliera del rodillo. */
.tiquete > * { animation: sale-papel .5s cubic-bezier(.2,.7,.3,1) backwards; }
.tiquete > *:nth-child(1) { animation-delay: .05s; }
.tiquete > *:nth-child(2) { animation-delay: .13s; }
.tiquete > *:nth-child(3) { animation-delay: .21s; }
.tiquete > *:nth-child(4) { animation-delay: .29s; }
.tiquete > *:nth-child(5) { animation-delay: .37s; }
.tiquete > *:nth-child(6) { animation-delay: .45s; }
.tiquete > *:nth-child(7) { animation-delay: .53s; }
.tiquete > *:nth-child(8) { animation-delay: .61s; }
.tiquete > *:nth-child(9) { animation-delay: .69s; }
@keyframes sale-papel { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }

@media (max-width: 940px) {
	.hero .contenedor { grid-template-columns: 1fr; }
	.tiquete { transform: none; margin-top: 1rem; }
}

/* ------------------------------------------- Cabeza de páginas interiores */
.pagina-cabeza { padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.pagina-cabeza h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); text-transform: uppercase; }
.pagina-bajada { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--tinta-suave); max-width: 62ch; margin-top: 1.2rem; }

/* ------------------------------------------------------- Catálogo por área */
.area { margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.area-titulo {
	font-family: var(--display); font-size: 1.7rem; text-transform: uppercase;
	display: flex; align-items: baseline; gap: .8rem;
	padding-bottom: .6rem; border-bottom: 2px solid var(--tinta); margin-bottom: 1.2rem;
}
.area-titulo span {
	font-family: var(--ticket); font-size: .78rem; font-weight: 700;
	color: var(--naranja); letter-spacing: .04em;
}
.lista-mod { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.lista-mod li {
	padding: .75rem 0; border-bottom: 1px solid var(--linea);
	font-size: var(--t-small); color: var(--tinta-suave); line-height: 1.55;
}
.lista-mod li:last-child { border-bottom: 0; }
.lista-mod strong { display: block; color: var(--tinta); font-size: 1rem; font-weight: 700; margin-bottom: .12rem; }
@media (min-width: 800px) {
	.lista-mod li { display: grid; grid-template-columns: 15.5rem 1fr; gap: 1.6rem; align-items: baseline; }
	.lista-mod strong { margin-bottom: 0; }
}

/* --------------------------------- Pasos: aquí el orden SÍ es información */
.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.pasos li {
	counter-increment: paso; position: relative;
	background: var(--mostrador); border: 1px solid var(--linea); border-radius: var(--radio);
	padding: 1.4rem 1.5rem 1.4rem 4.4rem;
}
.pasos li::before {
	content: counter(paso); position: absolute; left: 1.4rem; top: 1.25rem;
	font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--naranja); line-height: 1;
}
.pasos h3 { margin-bottom: .3rem; }
.pasos p { margin: 0; color: var(--tinta-suave); font-size: var(--t-small); }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------- Descargas */
.descarga { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.descarga-info h2 { margin-bottom: .8rem; }
.descarga-info p { color: var(--tinta-suave); }
.descarga-ficha { background: var(--mostrador); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.5rem; }
.descarga-ficha dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; font-size: var(--t-small); }
.descarga-ficha dt { color: var(--tinta-suave); }
.descarga-ficha dd { margin: 0; font-weight: 600; text-align: right; }
.hash { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: var(--t-micro); color: var(--tinta-suave); }
.hash code { font-family: var(--ticket); font-size: .68rem; word-break: break-all; color: var(--tinta); }
@media (max-width: 860px) { .descarga { grid-template-columns: 1fr; } .descarga-ficha dd { text-align: left; } }

.aviso {
	margin-top: 2.4rem; border-left: 4px solid var(--naranja);
	background: var(--mostrador); border-radius: 0 var(--radio) var(--radio) 0; padding: 1.3rem 1.5rem;
}
.aviso h3 { margin-bottom: .4rem; }
.aviso p { margin: 0; color: var(--tinta-suave); font-size: var(--t-small); }

/* --------------------------------------------------------------- Contacto */
.contacto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.contacto-via {
	background: var(--mostrador); border: 1px solid var(--linea); border-radius: var(--radio);
	padding: 1.8rem 1.6rem; text-align: center;
}
.contacto-via h3 { margin-bottom: .15rem; }
.contacto-via p { color: var(--tinta-suave); font-size: var(--t-small); min-height: 3.2em; }
.contacto-via .btn { width: 100%; }
/* Dos vías en una misma tarjeta (llamada y WhatsApp al mismo número) */
.via-acciones { display: grid; gap: .6rem; }
/* Etiqueta del canal: distingue el número que recibe llamadas del que solo
   recibe mensajes. Es la aclaración que evita que llamen al de soporte. */
.contacto-via .via-etiqueta {
	min-height: 0; margin: 0 0 .7rem; font-size: var(--t-micro); font-weight: 700;
	text-transform: uppercase; letter-spacing: .12em; color: var(--naranja);
}
.contacto-nota {
	margin: 1.6rem auto 0; max-width: 74ch; text-align: center;
	font-size: var(--t-small); color: var(--tinta-suave);
}
@media (max-width: 780px) { .contacto { grid-template-columns: 1fr; } .contacto-via p { min-height: 0; } }

/* Etiqueta de canal en el pie */
.pie-etq {
	display: inline-block; min-width: 4.6rem; font-size: var(--t-micro);
	text-transform: uppercase; letter-spacing: .1em; color: #7f97ad;
}

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; } }
.lista-simple { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .7rem; }
.lista-simple li { padding-left: 1.5rem; position: relative; color: var(--tinta-suave); font-size: var(--t-small); }
.lista-simple li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--celeste); }

/* ------------------------------------------------------- Panel de clientes */
.panel-cliente { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.panel-nota { margin-top: 1.1rem; font-size: var(--t-small); color: var(--tinta-suave); }
@media (max-width: 900px) { .panel-cliente { grid-template-columns: 1fr; } }

/* Ventana simplificada del panel: sugiere la pantalla sin fingir una captura */
.panel-marco {
	background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
	box-shadow: var(--sombra-papel); overflow: hidden;
}
.panel-barra { display: flex; gap: .4rem; padding: .8rem 1rem; background: var(--mostrador-hondo); }
.panel-barra span { width: 10px; height: 10px; border-radius: 50%; background: #c2cede; }
.panel-url {
	font-family: var(--ticket); font-size: .74rem; color: var(--tinta-suave);
	padding: .55rem 1rem; border-bottom: 1px solid var(--linea); background: var(--mostrador);
}
.panel-filas { padding: .5rem 1.2rem 1.2rem; }
.panel-fila {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding: .85rem 0; border-bottom: 1px solid var(--linea); font-size: var(--t-small);
}
.panel-fila:last-child { border-bottom: 0; }
.panel-fila span { color: var(--tinta-suave); }
.panel-fila b { font-family: var(--ticket); font-size: .95rem; color: var(--azul); }

.demo-datos {
	background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
	padding: 1.1rem 1.3rem; font-size: var(--t-small); margin-top: 1.2rem; line-height: 2;
}
.demo-datos span { display: inline-block; width: 6.5rem; color: var(--tinta-suave); }
.demo-datos code { font-family: var(--ticket); background: var(--mostrador-hondo); padding: .12rem .45rem; border-radius: 4px; font-weight: 700; }

/* -------------------------------------------------------------- Secciones */
.seccion { padding: var(--seccion) 0; }
.seccion-clara { background: var(--papel); border-block: 1px solid var(--linea); }
.seccion-cabeza { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.seccion-cabeza p { color: var(--tinta-suave); font-size: 1.1rem; margin-top: .9rem; }

/* Rejilla de piezas */
.rejilla { display: grid; gap: 1.4rem; }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; } }

.pieza {
	background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
	padding: 1.6rem 1.5rem; box-shadow: var(--sombra-papel);
}
.seccion-clara .pieza { background: var(--mostrador); box-shadow: none; }
.pieza h3 { margin-bottom: .5rem; }
.pieza p { color: var(--tinta-suave); font-size: var(--t-small); margin: 0; }
.pieza-icono { font-size: 1.45rem; line-height: 1; margin-bottom: .9rem; display: block; }

/* Pieza destacada: las licencias de mayor valor llevan filo naranja arriba.
   Es la única jerarquía extra dentro de una rejilla; no se usa en otro lado. */
.pieza.destacada { border-top: 3px solid var(--naranja); }

/* Escala del sistema: los dos extremos del rango de cliente, unidos por una
   regla que se degrada. Encoge a una columna en móvil. */
.escala {
	display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.6rem; align-items: center;
	margin-top: clamp(2.4rem, 5vw, 3.6rem);
	padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linea);
}
.escala-extremo h3 { margin-bottom: .5rem; }
.escala-extremo p { color: var(--tinta-suave); font-size: var(--t-small); margin: 0; }
.escala-linea {
	width: clamp(40px, 8vw, 110px); height: 3px; border-radius: 2px;
	background: linear-gradient(90deg, var(--celeste), var(--naranja));
}
@media (max-width: 760px) {
	.escala { grid-template-columns: 1fr; gap: 1.4rem; }
	.escala-linea { width: 100%; }
}

/* Giro de negocio: fila compacta, sin tarjetas, para que no compita con el hero */
.giros { display: flex; flex-wrap: wrap; gap: .6rem; }
.giro {
	background: var(--papel); border: 1px solid var(--linea); border-radius: 100px;
	padding: .5rem 1.1rem; font-size: var(--t-small); font-weight: 600;
}
.seccion-clara .giro { background: var(--mostrador); }

/* ------------------------------------------------- Vitrinas de la Red
   Dos marcas, cada una con la paleta real de su sitio: azul rey + naranja
   para la de detalle, turquesa + dorado para la de mayoreo. El color entra
   solo por el filo superior y el nombre; el resto de la tarjeta es igual. */
.vitrinas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
@media (max-width: 780px) { .vitrinas { grid-template-columns: 1fr; } }

.vitrina {
	position: relative; overflow: hidden;
	background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
	padding: 2rem 1.8rem 1.7rem; box-shadow: var(--sombra-papel);
}
.vitrina::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--v-acento); }
/* Paletas oficiales de cada vitrina (app/canal.php de la plataforma) */
.vitrina[data-canal="detalle"] { --v-marca: #1D4ED8; --v-acento: linear-gradient(90deg, #1D4ED8, #EA7317); }
.vitrina[data-canal="mayoreo"] { --v-marca: #239F92; --v-acento: linear-gradient(90deg, #239F92, #C99C18); }

/* Marca: isotipo de la Red + wordmark, igual que en la vitrina */
.vitrina-marca { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.isotipo { width: 52px; height: 52px; flex: none; }
.vitrina-texto {
	font-family: var(--texto); font-size: 1.45rem; font-weight: 400;
	color: var(--v-marca); margin: 0; line-height: 1.05; letter-spacing: -.01em;
}
.vitrina-texto b { font-weight: 700; }
.vitrina-texto-2l { font-size: 1.25rem; text-transform: lowercase; }

.vitrina h3 { margin-bottom: .45rem; }
.vitrina p { color: var(--tinta-suave); font-size: var(--t-small); margin: 0; }
.vitrina-enlace {
	display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem;
	font-weight: 700; font-size: var(--t-small); color: var(--v-marca); text-decoration: none;
}
.vitrina-enlace::after { content: "\2192"; transition: transform .16s ease; }
.vitrina-enlace:hover { text-decoration: underline; }
.vitrina-enlace:hover::after { transform: translateX(3px); }

.vitrinas-notas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 2.8rem); }
.vitrinas-notas h3 { margin-bottom: .5rem; }
.vitrinas-notas p { color: var(--tinta-suave); font-size: var(--t-small); margin: 0; }
@media (max-width: 780px) { .vitrinas-notas { grid-template-columns: 1fr; } }

/* Franja de Hacienda: bloque oscuro, único momento de contraste fuerte */
.franja {
	background: linear-gradient(135deg, #06203a 0%, var(--tinta) 55%, #0d3a63 100%);
	color: #fff; padding: var(--seccion) 0;
}
.franja h2 { color: #fff; }
.franja p { color: #b9cbdd; }
.franja .contenedor { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.franja .rotulo { color: #7fa9cf; }
.franja-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.franja-lista li { display: flex; gap: .8rem; align-items: flex-start; font-size: var(--t-small); color: #d7e4f0; }
.franja-lista li::before { content: "✓"; color: var(--celeste); font-weight: 700; flex: none; }
@media (max-width: 940px) { .franja .contenedor { grid-template-columns: 1fr; } }

/* Cierre / contacto */
.cierre { text-align: center; padding: var(--seccion) 0; }
.cierre h2 { max-width: 20ch; margin-inline: auto; }
.cierre p { color: var(--tinta-suave); max-width: 52ch; margin: 1rem auto 2rem; }
.cierre-acciones { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ------------------------------------------------------------------- Pie */
.pie { background: var(--tinta); color: #9fb5c9; padding: 3.5rem 0 2.2rem; font-size: var(--t-small); }
.pie a { color: #d7e4f0; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.pie h4 { font-family: var(--texto); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .14em; color: #fff; margin: 0 0 .9rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: var(--t-micro); }
.pie img { height: 34px; margin-bottom: 1rem; }
@media (max-width: 820px) { .pie-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pie-cols { grid-template-columns: 1fr; } }

/* Aclaración inline para el número que no recibe llamadas */
.solo-mensajes {
	font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em;
	color: var(--naranja); font-weight: 700; white-space: nowrap;
}

/* Nota secundaria bajo el cierre de la portada */
.cierre-nota { margin: 1.8rem auto 0; max-width: 62ch; font-size: var(--t-small); color: var(--tinta-suave); }