/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
}
.container {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
}
.logo {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  user-select:none;
}
.logo svg{
	width: 475px;
	height:auto;
}

header.logotipo{
	background: white;
	padding: 25px;
}
header {
  background: #1e1e2f;
  color: white;
  /*padding: 60px 20px;*/
  text-align: center;
}


h1 {
	margin: 0 0 18px;
	font-size: 36px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-align: center;
}

/* TABLET */
@media (max-width: 900px) {
	h1 {
		font-size: 32px;
	}
}

/* MOBILE */
@media (max-width: 600px) {
	h1 {
		font-size: 27px;
		line-height: 1.2;
		letter-spacing: -0.015em;
	}
}


h2 {
	text-align: center;
	margin-bottom: 14px;
}

section > .container > h2::after,
main > .container > h1::after,
main > .container > h2::after ,
section > .container > .columns > .column > h2::after {
	content: "";
	display: block;

	width: 210px;
	height: 3px;

	margin: 12px auto 0;

	background: linear-gradient(
		90deg,
		transparent,
		#2563eb,
		transparent
	);

	border-radius: 3px;
}

header p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}
header input {
  margin-top: 0.5rem;
  padding: 0.4rem;
  width: 80%;
  max-width: 400px;
  font-size: 1rem;
  border-radius: 5px;
  border: none;
}



footer {
  background: #151525;
  color: white;
  padding: 20px 0;
  text-align: center;
  font-size: 0.9rem;
}

footer nav a {
  color: #bdc3c7;
  text-decoration: none;
  margin: 0 8px;
}

footer nav a:hover {
  color: white;
}
main, /* {
 /* padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}*/
section {
  padding: 40px 0;
  background-color: white;
  margin-bottom: 10px;
}
.pricing {
  background-color: #ecf0f1;
}

.lang-switch {
  text-align: center;
  margin-bottom: 15px;
}

.lang-switch button {
  background: #ecf0f1;
  border: none;
  padding: 5px 10px;
  margin-left: 5px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.lang-switch button:hover {
  background: #bdc3c7;
}

.btn {
  width: 100%;
  padding: 12px 18px;

  background: #334155;
  border: 1px solid #334155;
  border-radius: 8px;

  color: #ffffff;
  font-weight: 600;
  font-size: 16px;

  cursor: pointer;
  text-decoration: none;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:hover {
  background: #1e293b;
  border-color: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

hr{
	margin-top:0.75rem;
	margin-bottom:0.75rem;
}


.result {
  margin-top: 10px;
  font-size: 14px;
  padding: 10px;
  border-radius: 5px;
  min-height: 20px; /* opcional, para que no se colapse si está vacío */
  transition: border 0.3s, background-color 0.3s;
  text-align:left;
  margin-bottom:10px;
}

.result.error {
  border: 2px solid red;
  background-color: #ffe6e6; /* rojo suave de fondo */
  color: red;
}

.result.success {
  border: 2px solid green;
  background-color: #e6ffe6; /* verde suave de fondo */
  color: green;
}

.result.error {
  color: red;
}

.result.success {
  color: green;
}


textarea.required,
input.required {
  border: 2px solid red !important;
  outline: none !important;
  box-shadow: none !important; /* elimina el brillo azul del focus */
}

textarea.required:focus,
input.required:focus {
  border: 2px solid red !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================
   Error 404
========================== */

.error-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 80px 20px;
    text-align: center;
}

.error-404 .container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.error-404-code {
    margin-bottom: 12px;
    font-size: clamp(5rem, 16vw, 10rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    color: var(--primary-color, #2563eb);
    opacity: 0.15;
}

.error-404 h1 {
    margin: 0 0 20px;
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
}

.error-404 p {
    max-width: 520px;
    margin: 0 auto 32px;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-color, #64748b);
}

.error-404 .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.error-404 .btn:hover {
    transform: translateY(-2px);
}

.error-404 .btn:focus-visible {
    outline: 3px solid var(--primary-color, #2563eb);
    outline-offset: 4px;
}

@media (max-width: 600px) {
    .error-404 {
        min-height: 50vh;
        padding: 56px 20px;
    }

    .error-404 p {
        font-size: 1rem;
    }
}
.tools-search {
	width: 100%;
	max-width: 1100px;
	margin: 28px auto 28px;
	padding: 0 20px;
	box-sizing: border-box;
}

.tools-search-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 700px;
	height: 44px;
	margin: 0 auto;
	padding: 0 14px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #dbe3ee;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tools-search-inner:focus-within {
	border-color: #93c5fd;
	box-shadow: 0 4px 14px rgba(37, 99, 235, .10);
}

.tools-search-icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #2563eb;
}

.tools-search-icon svg {
	width: 32px;
	height: 32px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#buscador {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: #0f172a;
	font-size: 24px;
	line-height: 1.5;
}

#buscador::placeholder {
	color: #94a3b8;
}

#buscador::-webkit-search-cancel-button {
	cursor: pointer;
}

@media (max-width: 667px) {
	.tools-search {
		margin-top: 20px;
		padding: 0 14px;
	}

	.tools-search-inner {
		padding: 0 14px;
	}
}