/*
Theme Name: Verified Ink
Theme URI: https://traduccionestriexpert.com
Description: Identidad "Verified Ink" para TriExpert Translations — tinta verde profunda, teal para la acción y el oro reservado al sello de certificación. Tema hijo de Twenty Twenty-Five.
Author: TriExpert Services
Template: twentytwentyfive
Version: 2.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: verified-ink
*/

/*
 * La paleta, la tipografía y el espaciado viven en theme.json, editables desde
 * el editor. Aquí va el lenguaje visual que theme.json todavía no expresa: el
 * cristal de las tarjetas, el antetítulo dorado, la banda de cifras y el fondo
 * de glifos. Todo son CLASES aplicables desde el editor (panel "Avanzado" →
 * clases CSS adicionales), no selectores atados a una maquetación concreta, para
 * que el equipo pueda componer secciones nuevas sin pedir código.
 *
 * Valores tomados del sitio original en producción, no aproximados:
 *   tarjeta   rgba(20,48,44,.55) · borde rgba(212,176,106,.14) · radio 12px
 *   titular   700 / line-height 1.03 / letter-spacing -0.035em
 */

:root {
	--vi-glass: rgba(20, 48, 44, 0.55);
	--vi-line: rgba(212, 176, 106, 0.14);
	--vi-line-strong: rgba(212, 176, 106, 0.28);
}

/* --- Antetítulo -------------------------------------------------------- */
/* El "— SERVICIOS" dorado que abre cada sección. La raya es un ::before para
   que el texto siga siendo texto plano y editable. */
.vi-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
	color: var(--wp--preset--color--gold);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.vi-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: currentColor;
	flex: none;
}

/* --- Tarjeta de cristal ------------------------------------------------ */
.vi-card {
	background: var(--vi-glass);
	border: 1px solid var(--vi-line);
	border-radius: 12px;
	padding: 1.25rem;
	height: 100%;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.vi-card:hover {
	border-color: var(--vi-line-strong);
	transform: translateY(-2px);
}
/* Dentro de una tarjeta los títulos van más apretados que en el cuerpo. */
.vi-card :is(h2, h3, h4) {
	margin: 0 0 0.35rem;
}
.vi-card p {
	margin: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.925rem;
	line-height: 1.55;
}

/* Rejilla de tarjetas: se apila sola en móvil sin necesitar columnas anidadas. */
.vi-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* --- Banda de cifras --------------------------------------------------- */
.vi-stats {
	display: grid;
	gap: 1.5rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	border-top: 1px solid var(--vi-line);
	border-bottom: 1px solid var(--vi-line);
	padding: 1.75rem 0;
}
.vi-stat strong {
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}
.vi-stat span {
	display: block;
	margin-top: 0.35rem;
	color: var(--wp--preset--color--gold);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.vi-stat small {
	display: block;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.85rem;
	line-height: 1.4;
}

/* --- Lista de garantías con palomita ----------------------------------- */
.vi-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast-soft);
}
.vi-checks li::before {
	content: "✓";
	margin-right: 0.45rem;
	color: var(--wp--preset--color--teal);
	font-weight: 700;
}

/* --- Sello de certificación -------------------------------------------- */
/* Sólo para elementos de certificación: el oro no es un color de marca general,
   es el que dice "esto está sellado". */
.vi-seal {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.7em;
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 999px;
	color: var(--wp--preset--color--gold);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Código de verificación: la gente lo copia, así que se selecciona de una vez. */
.vi-code {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--teal);
	letter-spacing: 0.05em;
	user-select: all;
	word-break: break-all;
}

/* --- Fondo de glifos ---------------------------------------------------- */
/* El detalle que dice "traducimos" sin decirlo: caracteres de varios sistemas
   de escritura, muy tenues, tras el héroe. Decorativo puro, de ahí aria-hidden
   en el marcado y pointer-events:none aquí. */
.vi-glyphs {
	position: relative;
	isolation: isolate;
}
.vi-glyphs::before {
	content: "語 あ ц 文 ਅ ᐃ π ᚦ א ع 한 ま Д ß ñ 字 ल ᜃ";
	position: absolute;
	inset: -2rem -1rem;
	z-index: -1;
	pointer-events: none;
	color: var(--wp--preset--color--contrast);
	opacity: 0.045;
	font-size: 2.25rem;
	line-height: 3.5;
	letter-spacing: 3.5rem;
	word-spacing: 2.5rem;
	overflow: hidden;
	user-select: none;
}

/* --- Titulares ---------------------------------------------------------- */
/* El héroe del original va a 62px con interlineado casi 1. Aquí se deja fluido
   para que no se desborde en móvil. */
.vi-hero h1,
.vi-hero .wp-block-heading {
	max-width: 12ch;
}
.vi-hero p {
	max-width: 46ch;
	color: var(--wp--preset--color--contrast-soft);
}
.vi-lead {
	color: var(--wp--preset--color--contrast-soft);
	max-width: 52ch;
}

/* Botón secundario: contorno, para que el teal macizo quede solo en la acción
   principal de cada sección. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--vi-line-strong);
	color: var(--wp--preset--color--contrast);
	background: transparent;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--teal);
}

/* --- Detalles ----------------------------------------------------------- */
.wp-block-details {
	border-bottom: 1px solid var(--vi-line);
	padding: 0.9rem 0;
}
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.wp-block-details p {
	color: var(--wp--preset--color--contrast-soft);
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--vi-line);
}
.wp-block-table th {
	color: var(--wp--preset--color--gold);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- Correcciones tras comparar con el original ------------------------- */

/* El título de una tarjeta enlaza al servicio, pero debe leerse como título,
   no como enlace: el subrayado azul-teal rompía la retícula de tarjetas. */
.vi-card :is(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}
.vi-card:hover :is(h2, h3, h4) a {
	color: var(--wp--preset--color--teal);
}

/* Las cifras se alinean arriba y la nota queda pegada a su etiqueta; sin esto
   cada columna flotaba a una altura distinta según la longitud del texto. */
.vi-stats {
	align-items: start;
}
.vi-stat > * {
	margin: 0;
}
.vi-stat small {
	margin-top: 0.5rem;
}

/* Encabezado de sección: comparte el borde izquierdo con la rejilla de abajo.
   Antes el antetítulo y el titular vivían en la columna de lectura (46rem,
   centrada) mientras las tarjetas ocupaban 72rem, así que parecían sangrados. */
.vi-section > * {
	margin-left: 0;
	margin-right: 0;
}
.vi-section > p {
	max-width: 60ch;
}
.vi-section {
	margin-top: var(--wp--preset--spacing--60);
}

/* El héroe manda: en pantallas anchas el titular llega a 62px como el original,
   pero nunca fuerza más de 4 líneas. */
@media (min-width: 900px) {
	.vi-hero h1 {
		font-size: 3.875rem;
		max-width: 14ch;
	}
}

/* --- Héroe a dos columnas ---------------------------------------------- */
/* El original enfrenta el discurso con una muestra del producto: a la izquierda
   qué hacemos, a la derecha cómo se ve un documento certificado. Es lo que hace
   entendible "verificable" sin explicarlo. Se apila en una sola columna por
   debajo de 980px, donde dos columnas dejarían ambas ilegibles. */
@media (min-width: 980px) {
	.vi-hero {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		align-items: center;
		gap: 3.5rem;
	}
	/* Dos hijos, dos columnas: el texto envuelto y la tarjeta al lado. */
	.vi-hero > .vi-cert {
		margin-top: 0;
	}
}

/* --- Tarjeta de certificado (muestra del producto) --------------------- */
.vi-cert {
	position: relative;
	background: var(--vi-glass);
	border: 1px solid var(--vi-line);
	border-radius: 14px;
	padding: 1.5rem;
	margin-top: 2rem;
}
.vi-cert .vi-seal {
	position: absolute;
	top: -0.7rem;
	right: 1.25rem;
	background: var(--wp--preset--color--base);
}
.vi-cert-langs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--contrast-faint);
}
.vi-cert-langs b {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}
.vi-cert-langs span {
	color: var(--wp--preset--color--teal);
}
/* Renglones fantasma: sugieren un documento sin inventar texto que nadie pueda
   leer ni traducir. Decorativos, de ahí aria-hidden en el marcado. */
.vi-cert-lines {
	margin: 1.25rem 0;
	display: grid;
	gap: 0.55rem;
}
.vi-cert-lines i {
	display: block;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	opacity: 0.09;
}
.vi-cert-lines i:nth-child(2) { width: 92%; }
.vi-cert-lines i:nth-child(3) { width: 78%; }
.vi-cert-lines i:nth-child(4) { width: 86%; }
.vi-cert-foot {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	border-top: 1px solid var(--vi-line);
	padding-top: 1rem;
}
.vi-cert-foot .vi-qr {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--vi-line-strong);
	border-radius: 999px;
	color: var(--wp--preset--color--gold);
}
.vi-cert-foot small {
	display: block;
	color: var(--wp--preset--color--contrast-faint);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- Icono de tarjeta --------------------------------------------------- */
.vi-icon {
	display: grid;
	place-items: center;
	width: 2.35rem;
	height: 2.35rem;
	margin-bottom: 0.9rem;
	border-radius: 9px;
	background: rgba(46, 211, 189, 0.1);
	color: var(--wp--preset--color--teal);
}
.vi-icon svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* Distintivo de la tarjeta destacada. */
.vi-card {
	position: relative;
}
.vi-badge {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	color: var(--wp--preset--color--gold);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}