/* ============================================================================
   BASE — Mis Amigos Los Animalitos
   Tokens, reset, tipografía, botones, formularios y utilidades.

   Este archivo es la fuente de verdad de los tokens. Los mismos colores están
   espejados en theme.json para el editor: si cambia uno, hay que cambiarlo
   en los dos sitios.

   CONVENCIÓN DE CLASES
   --------------------
   · Prefijo ................ .ma-
   · Bloque ................. .ma-cabecera
   · Elemento ............... .ma-cabecera__titulo
   · Variante ............... .ma-boton--primario
   · Estado ................. .is-activo   /   [aria-current]

   PROHIBIDO
   ---------
   · !important salvo en utilidades de accesibilidad
   · Estilos en línea
   · Fuentes o iconos desde CDN
   ========================================================================== */

/* ============================================================================
   1. TOKENS
   ========================================================================== */
:root {
	/* --- Marca: el turquesa del logotipo (94,4 % de su tinta) --- */
	--ma-teal-50:  #E9F6FA;
	--ma-teal-100: #C7E8F1;
	--ma-teal-200: #93D4E4;
	--ma-teal-300: #4FB8D0;
	--ma-teal-400: #17A2C0;
	--ma-teal-500: #0090B4;
	--ma-teal-600: #007A99;
	--ma-teal-700: #006380;
	--ma-teal-800: #004E66;
	--ma-teal-900: #003A4D;

	/* --- Tinta --- */
	--ma-ink-900: #06222E;
	--ma-ink-800: #0C3648;
	--ma-ink-700: #12495F;
	--ma-ink-500: #4A6B7A;
	--ma-ink-400: #7C96A2;
	--ma-ink-200: #C9D6DC;
	--ma-ink-100: #E4ECEF;

	/* --- Superficies: el blanco manda --- */
	--ma-paper: #FFFFFF;
	--ma-mist:  #F7FAFB;

	/* --- Funcionales --- */
	--ma-price:    #0E7A34;
	--ma-warm-500: #FF8A3D;
	--ma-warm-50:  #FFF1E7;

	/* --- Tipografía --- */
	--ma-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--ma-font-ui:      "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

	--ma-fs-xs:  0.75rem;
	--ma-fs-sm:  0.8125rem;
	--ma-fs-md:  0.9375rem;
	--ma-fs-base: 1rem;
	--ma-fs-lg:  1.375rem;
	--ma-fs-xl:  1.875rem;
	--ma-fs-2xl: clamp(2rem, 4.4vw, 3.4rem);

	--ma-lh-tight: 1.05;
	--ma-lh-base:  1.6;

	/* --- Movimiento: nunca linear ni ease-in-out --- */
	--ma-ease:    cubic-bezier(.32, .72, 0, 1);
	--ma-t-fast:  200ms;
	--ma-t-base:  380ms;
	--ma-t-slow:  680ms;

	/* --- Radios --- */
	--ma-r:    1.25rem;
	--ma-r-sm: 0.9rem;
	--ma-pill: 999px;

	/* --- Líneas y sombras --- */
	--ma-line:      1px solid rgba(6, 34, 46, .08);
	--ma-line-soft: 1px solid rgba(6, 34, 46, .05);
	--ma-sh-soft: 0 1px 2px rgba(6, 34, 46, .04), 0 10px 30px -14px rgba(6, 34, 46, .14);
	--ma-sh-lift: 0 2px 6px rgba(6, 34, 46, .05), 0 26px 50px -22px rgba(6, 34, 46, .2);

	/* --- El lavado turquesa sobre blanco --- */
	--ma-wash:
		radial-gradient(115% 130% at 12% -12%, rgba(0, 144, 180, .11), transparent 58%),
		radial-gradient(90% 110% at 102% 4%, rgba(0, 144, 180, .07), transparent 52%);

	/* --- Estructura --- */
	--ma-wrap:  78rem;
	--ma-wide:  86rem;
	--ma-gutter: clamp(1rem, 4vw, 2.5rem);

	/* --- Capas: escala fija, nada de z-index arbitrarios --- */
	--ma-z-base: 1;
	--ma-z-sticky: 100;
	--ma-z-overlay: 200;
	--ma-z-modal: 300;
	--ma-z-toast: 400;
}

/* ============================================================================
   2. RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--ma-paper);
	color: var(--ma-ink-900);
	font-family: var(--ma-font-ui);
	font-size: var(--ma-fs-base);
	line-height: var(--ma-lh-base);
	/* Bricolage Grotesque y Plus Jakarta Sans son variables. El eje óptico
	   (opsz) de Bricolage viene con valor por defecto 96 —el diseño de titular—
	   así que hay que pedir explícitamente que se ajuste al tamaño real del
	   texto. Sin esto, el cuerpo de texto saldría con las formas de un titular. */
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg, video, canvas, audio, iframe, embed, object {
	display: block;
	max-width: 100%;
}

img { height: auto; }

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

button { cursor: pointer; }

p, figure, blockquote, dl, dd { margin: 0; }

ul[class], ol[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

table { border-collapse: collapse; width: 100%; }

/* ============================================================================
   3. TIPOGRAFÍA
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ma-font-display);
	font-weight: 700;
	line-height: var(--ma-lh-tight);
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: var(--ma-fs-2xl); font-weight: 800; }
h2 { font-size: var(--ma-fs-xl); }
h3 { font-size: var(--ma-fs-lg); }
h4 { font-size: 1.125rem; }
h5, h6 { font-size: var(--ma-fs-base); }

p { text-wrap: pretty; }

strong, b { font-weight: 700; }

small { font-size: var(--ma-fs-sm); }

code, pre, kbd, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.9em;
}

code {
	background: var(--ma-ink-100);
	padding: 0.1em 0.4em;
	border-radius: 0.35em;
}

/* ============================================================================
   4. ENLACES
   ========================================================================== */
a {
	color: var(--ma-teal-700);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--ma-t-fast) var(--ma-ease);
}

a:hover { color: var(--ma-teal-800); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ma-teal-500);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ============================================================================
   5. BOTONES
   Jerarquía del proyecto: una sola acción dominante por pantalla.
   · primario → turquesa sólido  (la acción principal)
   · tonal    → turquesa lavado  (la acción secundaria)
   · fantasma → contorno         (la terciaria)
   ========================================================================== */
.ma-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 2.85rem;
	padding: 0.65rem 1.3rem;
	border: 0;
	border-radius: var(--ma-pill);
	font-family: var(--ma-font-ui);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition:
		transform var(--ma-t-base) var(--ma-ease),
		background-color var(--ma-t-base) var(--ma-ease),
		box-shadow var(--ma-t-base) var(--ma-ease),
		color var(--ma-t-base) var(--ma-ease);
}

.ma-boton:hover { transform: translateY(-2px); }
.ma-boton:active { transform: scale(.98); }

.ma-boton--primario {
	background: var(--ma-teal-600);
	color: var(--ma-paper);
	box-shadow: 0 12px 26px -14px rgba(0, 122, 153, .8);
}
.ma-boton--primario:hover { background: var(--ma-teal-700); color: var(--ma-paper); }

.ma-boton--tonal {
	background: var(--ma-teal-50);
	color: var(--ma-teal-700);
}
.ma-boton--tonal:hover { background: var(--ma-teal-100); color: var(--ma-teal-800); }

.ma-boton--fantasma {
	background: transparent;
	color: var(--ma-teal-700);
	box-shadow: inset 0 0 0 1.5px var(--ma-teal-200);
}
.ma-boton--fantasma:hover { background: var(--ma-teal-50); }

.ma-boton--calido {
	background: var(--ma-warm-500);
	color: var(--ma-ink-900);
}
.ma-boton--calido:hover { background: #E86F1F; color: var(--ma-ink-900); }

/*
 * CONTRASTE: el verde de WhatsApp (#1FA855) con texto blanco da 3,09:1, y el
 * texto del botón mide 14 px, así que necesita 4,5:1. Se usa el verde que el
 * tema ya tiene para los precios (`--ma-price`, #0E7A34 = 5,45:1), que además es
 * coherente con el resto de la paleta.
 *
 * Un botón verde chillón que no se puede leer es peor que uno apagado que sí se
 * lee: el color de marca no vale una acción ilegible.
 */
.ma-boton--whatsapp {
	background: var(--ma-price);
	color: #fff;
}
.ma-boton--whatsapp:hover { background: #0A5C30; color: #fff; }

.ma-boton--bloque { width: 100%; }
.ma-boton--sm { min-height: 2.5rem; padding: 0.5rem 0.95rem; font-size: 0.8125rem; }
.ma-boton--lg { min-height: 3.25rem; padding: 0.8rem 1.7rem; font-size: 0.9375rem; }

.ma-boton[disabled],
.ma-boton[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.ma-boton__ico {
	width: 1.55rem;
	height: 1.55rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex: none;
	background: rgba(255, 255, 255, .18);
	transition: transform var(--ma-t-base) var(--ma-ease);
}
.ma-boton:hover .ma-boton__ico { transform: translate(2px, -1px) scale(1.06); }
.ma-boton--tonal .ma-boton__ico,
.ma-boton--fantasma .ma-boton__ico { background: var(--ma-teal-100); }

/* ============================================================================
   6. FORMULARIOS
   ========================================================================== */
.ma-campo { margin-bottom: 1.1rem; }

.ma-campo__etiqueta {
	display: block;
	font-size: var(--ma-fs-sm);
	font-weight: 700;
	color: var(--ma-ink-800);
	margin-bottom: 0.4rem;
}

.ma-campo__ayuda {
	font-size: var(--ma-fs-xs);
	color: var(--ma-ink-400);
	margin-top: 0.35rem;
}

.ma-campo input[type="text"],
.ma-campo input[type="email"],
.ma-campo input[type="tel"],
.ma-campo input[type="url"],
.ma-campo input[type="number"],
.ma-campo input[type="password"],
.ma-campo input[type="search"],
.ma-campo select,
.ma-campo textarea {
	width: 100%;
	min-height: 2.85rem;
	padding: 0.75rem 1rem;
	background: var(--ma-paper);
	border: 1.5px solid var(--ma-ink-200);
	border-radius: 1rem;
	color: var(--ma-ink-900);
	transition:
		border-color var(--ma-t-fast) var(--ma-ease),
		box-shadow var(--ma-t-fast) var(--ma-ease);
}

.ma-campo textarea { min-height: 8rem; resize: vertical; }

.ma-campo input:focus,
.ma-campo select:focus,
.ma-campo textarea:focus {
	outline: none;
	border-color: var(--ma-teal-500);
	box-shadow: 0 0 0 4px var(--ma-teal-50);
}

.ma-campo input::placeholder,
.ma-campo textarea::placeholder { color: var(--ma-ink-400); }

.ma-campo--error input,
.ma-campo--error select,
.ma-campo--error textarea { border-color: #B4341F; }

.ma-campo__error {
	font-size: var(--ma-fs-xs);
	color: #B4341F;
	margin-top: 0.35rem;
}

/* ============================================================================
   7. ESTRUCTURA
   ========================================================================== */
.ma-contenedor {
	width: min(100% - (var(--ma-gutter) * 2), var(--ma-wrap));
	margin-inline: auto;
}

.ma-contenedor--ancho {
	width: min(100% - (var(--ma-gutter) * 2), var(--ma-wide));
	margin-inline: auto;
}

.ma-seccion { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.ma-seccion--borde { border-top: var(--ma-line); }

/* ============================================================================
   8. ICONOS
   ========================================================================== */
.ma-icon {
	flex: none;
	vertical-align: middle;
}

/* ============================================================================
   9. ACCESIBILIDAD
   ========================================================================== */
.ma-sr,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ma-saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--ma-z-toast);
	padding: 0.75rem 1.25rem;
	background: var(--ma-teal-700);
	color: #fff;
	font-weight: 700;
	border-radius: 0 0 var(--ma-r-sm) 0;
}

.ma-saltar:focus {
	left: 0;
	color: #fff;
}

/* ============================================================================
   10. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}