:root {
  	--bg: #3472d1;
  	--card: #ffffff;
	--text: #111827;
	--muted:#6b7280;
	--border:#e5e7eb;
	--primary:#2563eb;
	--primary-hover:#1d4ed8;
	
	--yellow-bg:#fffbeb;
	--yellow-border:#fde68a;
	--yellow-text:#92400e;
}

body {
	background-color: var(--bg);
	margin: 0;
	color: var(--text);
    min-height: 100vh;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 0;
}

.card {
	margin-top: 40px;
    width: min(560px, 100%);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(255, 255, 255, .26);
    padding: 24px;
    position: relative;
  	z-index: 1;
}

.card-logo {
	padding: 15px;
	border: 1px solid var(--card);
	border-radius: 8px;
	background-color: var(--card);
}

.header {
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:10px;
}

.icon {
	width: 56px; height: 56px;
	border-radius: 14px;
	background: rgba(37,99,235,.12);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.icon svg { width: 28px; height: 28px; fill: var(--primary); }

h1 { margin:0; font-size:20px; line-height:1.2 }
p { margin:0 0 18px; color:var(--muted); line-height:1.5 }

.actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.btn {
	border-radius:12px;
	padding:10px 14px;
	font-weight:600;
	cursor:pointer;
	font-size:14px;
	border:1px solid transparent;
	user-select:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}

.btn.primary {
	background:var(--primary);
	color:white;
}
.btn.primary:hover{background:var(--primary-hover)}

.btn.ghost {
	background:transparent;
	border-color: var(--border);
	color: var(--text);
}
.btn.ghost:hover { background:#f3f4f6 }

/* checkbox oculto (pero presente) */
#toggle-soporte {
	position:absolute;
	width:1px;
	height:1px;
	margin:-1px;
	padding:0;
	border:0;
	overflow:hidden;
	clip: rect(0 0 0 0);
	white-space:nowrap;
}

/* bloque soporte oculto por defecto */
.soporte {
	max-height:0;
	opacity:0;
	overflow:hidden;
	margin-top:0;
	transition: max-height .35s ease, opacity .25s ease, margin-top .25s ease;
}

/* IMPORTANTE: el selector depende de que #toggle-soporte esté antes y sea hermano de .soporte */
#toggle-soporte:checked ~ .soporte {
	max-height:1000px; /* holgura suficiente */
	opacity:1;
	margin-top:16px;
}

.soporte .centrado {
	border:1px solid var(--yellow-border);
	background:var(--yellow-bg);
	color:var(--yellow-text);
	border-radius:14px;
	padding:14px 16px;
	text-align:center;
	line-height:1.5;
}

.soporte a {
	color:inherit;
	font-weight:700;
	text-decoration:underline;
	text-underline-offset:2px;
}

/* texto del botón cambia según estado */
.label-open { display:inline }
.label-close { display:none }
#toggle-soporte:checked + .actions label .label-open { display:none }
#toggle-soporte:checked + .actions label .label-close { display:inline }

p {
	color: red;
	line-height: 20px;
	font-weight: 600;
}

.logo-container{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-grow: 1;
	/*         margin-bottom:16px; */
}

.logo-container img {
	max-height: 400px;
	max-width: 100%;
	object-fit:contain;
}