/*
Theme Name: AI Translate for WPML
Description: Sitio de producto de AI Translate for WPML.
Author: Ricardo Juárez
Version: 0.1.0
Text Domain: aitranslate
*/

/* ============================================================
   Tokens — salen de los SVG de marca (LOGO.svg y ASSETS.svg)
   ============================================================ */

:root {
	/* tinta y papel */
	--tinta: #221f1f;
	--papel: #fff;

	/* pastel: el azul es el principal, el resto acompaña */
	--azul: #d2edfb;
	--verde: #e4f3db;
	--lila: #f2e4ff;
	--melocoton: #fee9d9;
	--rosa: #ffdeeb;

	/* el degradado de la marca, solo para acentos */
	--grad-de: #4df4ac;
	--grad-a: #004fff;
	--degradado: linear-gradient(120deg, var(--grad-de), var(--grad-a));

	--serif: 'Fraunces', Georgia, serif;
	--sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* el trazo grueso es la firma de la marca: viene del logo (30px sobre 543) */
	--trazo: 3px;
	--radio: 999px;

	--ancho: 1120px;
	--aire: clamp(1.25rem, 5vw, 2.5rem);
}

/* ============================================================
   Base
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--sans);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
	/* Fraunces es variable: se le baja el «wonk» y se sube la suavidad óptica
	   para que case con las formas redondeadas del logo. */
	font-variation-settings: 'SOFT' 40, 'WONK' 0;
}

p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

.contenedor {
	width: 100%;
	max-width: var(--ancho);
	margin-inline: auto;
	padding-inline: var(--aire);
}

.solo-lectores {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ============================================================
   Piezas reutilizables
   ============================================================ */

/* Píldora de color: el «tag» pastel del brief */
.pildora {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem 1rem;
	border-radius: var(--radio);
	background: var(--azul);
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Botón blanco con borde grueso: la firma */
.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .9rem 1.75rem;
	border: var(--trazo) solid var(--tinta);
	border-radius: var(--radio);
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}

.boton:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--tinta); }
.boton:active { transform: translateY(0); box-shadow: 0 0 0 var(--tinta); }

.boton--relleno { background: var(--tinta); color: var(--papel); }
.boton--relleno:hover { box-shadow: 0 6px 0 var(--azul); }

.enlace-suave {
	font-weight: 500;
	text-decoration: none;
	border-bottom: 2px solid var(--azul);
	padding-bottom: 1px;
	transition: border-color .15s ease;
}
.enlace-suave:hover { border-color: var(--tinta); }

/* ============================================================
   Cabecera
   ============================================================ */

.cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--papel) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent);
}

.cabecera__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 72px;
}

.marca {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	text-decoration: none;
	font-family: var(--serif);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.marca svg, .marca img { width: 30px; height: 30px; flex-shrink: 0; }

.menu {
	display: none;
	gap: 1.75rem;
	font-size: .9375rem;
	font-weight: 500;
}

.menu a { text-decoration: none; opacity: .75; transition: opacity .15s ease; }
.menu a:hover { opacity: 1; }

.cabecera .boton { padding: .6rem 1.25rem; font-size: .9375rem; white-space: nowrap; }

/* Por debajo de 520px el botón y la marca no caben juntos: se recorta la marca. */
@media (max-width: 520px) {
	.marca__sufijo { display: none; }
	.marca { font-size: 1rem; }
	.cabecera .boton { padding: .55rem 1rem; font-size: .875rem; }
	.cabecera__fila { gap: .75rem; }
}

@media (min-width: 900px) {
	.menu { display: flex; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4rem, 9vw, 7rem);
	text-align: center;
}

.hero__contenido { position: relative; max-width: 54rem; margin-inline: auto; }

.hero h1 {
	font-size: clamp(2.5rem, 1.4rem + 5.2vw, 5rem);
	margin-block: 1.5rem 0;
	text-wrap: balance;
}

/* El degradado de marca, reservado para la cifra del titular */
.destacado {
	background: var(--degradado);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__asterisco {
	font-family: var(--sans);
	font-size: .4em;
	font-weight: 600;
	vertical-align: super;
	text-decoration: none;
	opacity: .4;
	letter-spacing: 0;
	margin-left: .1em;
	transition: opacity .15s ease;
}

.hero__asterisco:hover { opacity: .8; }

.hero__entrada {
	max-width: 40rem;
	margin: 1.75rem auto 0;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.55;
	opacity: .78;
	text-wrap: pretty;
}

.hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .875rem;
	justify-content: center;
	margin-top: 2.25rem;
}

.hero__nota {
	margin-top: 2rem;
	font-size: .8125rem;
	opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ============================================================
   Cabecera de sección (compartida por las secciones de la home)
   ============================================================ */

.seccion__cabecera {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.seccion__cabecera h2 {
	font-size: clamp(1.875rem, 1.35rem + 2.1vw, 3rem);
	margin-top: 1.25rem;
	text-wrap: balance;
}

.seccion__entrada {
	margin-top: 1.125rem;
	font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
	opacity: .75;
	text-wrap: pretty;
}

/* Sobre fondo pastel la píldora azul no se ve: se usa la de papel con trazo. */
.pildora--papel {
	background: var(--papel);
	border: 2px solid var(--tinta);
}

/* ============================================================
   Cómo conecta — bloque de color con tarjetas blancas
   ============================================================ */

.flujo {
	background: var(--azul);
	padding-block: clamp(3.5rem, 8vw, 6rem);
	scroll-margin-top: 72px;
}

.flujo__pasos {
	list-style: none;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	align-items: stretch;
	justify-items: stretch;
}

.paso {
	background: var(--papel);
	border: var(--trazo) solid var(--tinta);
	border-radius: 20px;
	padding: 1.5rem 1.5rem 1.625rem;
	display: flex;
	flex-direction: column;
	gap: .625rem;
}

.paso__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radio);
	background: var(--tinta);
	color: var(--papel);
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 600;
	flex-shrink: 0;
}

.paso__titulo {
	font-family: var(--sans);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.paso p { font-size: .9375rem; line-height: 1.55; opacity: .78; }

/* Las píldoras de contenido: lo que sale de la web */
.paso__pildoras {
	list-style: none;
	margin: .375rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
}

.paso__pildoras li {
	padding: .25rem .7rem;
	border: 2px solid var(--tinta);
	border-radius: var(--radio);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.4;
}

/* Las tres de pago van en lila, igual que la etiqueta Pro de los docs.
   El color no basta: cada una lleva además la palabra Pro. */
.paso__pildoras .es-pro { background: var(--lila); padding-right: .35rem; }

.pro-mini {
	margin-left: .4rem;
	padding: .05rem .4rem;
	border-radius: var(--radio);
	background: var(--tinta);
	color: var(--papel);
	font-size: .625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* La flecha: apunta a la derecha en fila y hacia abajo al apilarse */
.flujo__flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .35;
}

.flujo__flecha svg { width: 2.25rem; height: auto; transform: rotate(90deg); }

/* La vuelta a WPML, debajo y en otro color para que se lea como el regreso */
.vuelta {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	gap: 1.125rem;
	background: var(--verde);
	border: var(--trazo) solid var(--tinta);
	border-radius: 20px;
	padding: 1.25rem 1.5rem;
}

.vuelta__flecha { width: 3rem; height: auto; flex-shrink: 0; }
.vuelta__texto { font-size: .9375rem; line-height: 1.55; text-wrap: pretty; }
.vuelta__texto strong { font-weight: 600; }

@media (max-width: 640px) {
	.vuelta { flex-direction: column; align-items: flex-start; gap: .875rem; }
}

/* A partir de 900px caben las tres tarjetas en fila con sus flechas.
   La primera es más ancha porque carga con las píldoras. */
@media (min-width: 900px) {
	.flujo__pasos {
		grid-template-columns: 1.25fr auto 1fr auto 1fr;
		gap: .75rem;
	}
	.flujo__flecha svg { transform: none; }
}

/* ============================================================
   Documentación
   ============================================================ */

.doc {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 9vw, 7rem);
}

@media (min-width: 1000px) {
	.doc { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
	.doc__indice { position: sticky; top: 96px; }
}

.doc__indice ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .1rem;
	font-size: .9375rem;
}

.doc__indice a {
	display: block;
	padding: .35rem .75rem;
	border-radius: var(--radio);
	text-decoration: none;
	opacity: .7;
	transition: background .15s ease, opacity .15s ease;
}

.doc__indice a:hover { background: var(--azul); opacity: 1; }

.doc__cuerpo { max-width: 46rem; }

.doc__cuerpo h1 {
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
	margin-bottom: .75rem;
}

.doc__cuerpo h2 {
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	margin-top: 3.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
	scroll-margin-top: 96px;
}

.doc__cuerpo h3 {
	font-family: var(--sans);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-top: 1.75rem;
}

.doc__cuerpo p, .doc__cuerpo ul, .doc__cuerpo ol { margin-top: 1rem; }
.doc__cuerpo ul, .doc__cuerpo ol { padding-left: 1.25rem; }
.doc__cuerpo li { margin-top: .4rem; }
.doc__cuerpo strong { font-weight: 600; }

.doc__entradilla { font-size: 1.125rem; opacity: .75; }

.doc__cuerpo code {
	font-size: .875em;
	background: color-mix(in srgb, var(--azul) 55%, transparent);
	padding: .15em .45em;
	border-radius: 5px;
}

/* Tabla de estados: la pieza que más se consulta */
.doc__tabla {
	width: 100%;
	margin-top: 1.25rem;
	border-collapse: collapse;
	font-size: .9375rem;
}

.doc__tabla th, .doc__tabla td {
	text-align: left;
	padding: .7rem .85rem;
	border-bottom: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
	vertical-align: top;
}

.doc__tabla th { font-weight: 600; }
.doc__tabla tr:first-child th { border-bottom-width: 2px; }

/* Avisos */
.nota {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: 14px;
	background: var(--azul);
	font-size: .9375rem;
}

.nota--ojo { background: var(--melocoton); }

.etiqueta-pro {
	display: inline-block;
	margin-left: .5rem;
	padding: .1rem .5rem;
	border-radius: var(--radio);
	background: var(--lila);
	font-family: var(--sans);
	font-size: .6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	vertical-align: middle;
}

/* ============================================================
   Checkout
   ============================================================ */

.checkout {
	max-width: 32rem;
	margin-inline: auto;
	text-align: left;
}

.checkout__etiqueta {
	display: block;
	font-size: .875rem;
	font-weight: 600;
	margin-bottom: .5rem;
}

.checkout__fila {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.checkout__select {
	flex: 1 1 16rem;
	padding: .85rem 1.1rem;
	border: var(--trazo) solid var(--tinta);
	border-radius: var(--radio);
	background: var(--papel);
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 500;
	color: var(--tinta);
	cursor: pointer;
	/* Se quita la flecha del sistema y se dibuja una propia, para que no desentone
	   con el trazo grueso del resto. */
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23221f1f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	background-size: 12px;
	padding-right: 2.75rem;
}

.checkout__select:focus-visible { outline: 3px solid var(--grad-a); outline-offset: 2px; }

.checkout__aviso { margin-top: .875rem; font-size: .9375rem; }
.checkout__aviso:empty { display: none; }
.checkout__aviso--ok {
	padding: .75rem 1rem;
	border-radius: 12px;
	background: var(--verde);
}

.checkout__pie {
	margin-top: 1rem;
	font-size: .8125rem;
	opacity: .55;
	line-height: 1.5;
}