/* Logocrea® Formularios (versión compacta) */

/* ---------- Columna de argumentos (módulo de texto de Divi) ---------- */
.lcf-kicker {
	display: inline-block;
	margin: 0 0 8px !important;
	padding: 3px 11px !important;
	border-radius: 20px;
	background: var(--lcf-acento, #d40000);
	color: var(--lcf-acento-texto, #fff);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.5;
	text-transform: uppercase;
}
.lcf-intro-col h2 {
	margin-bottom: 8px;
	padding-bottom: 0;
	color: #000;
	font-size: 28px;
	line-height: 1.2;
}
/* Mismo estilo para el H3 de la columna izquierda y el título (párrafo) del formulario */
.lcf-intro-col h3,
.lcf .lcf-titulo {
	margin: 0 0 8px !important;
	padding: 0 !important;
	color: #000 !important;
	font-family: K2D, Helvetica, Arial, sans-serif !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
}
.lcf .lcf-titulo {
	margin-bottom: 2px !important;
}
.lcf-intro-col .lcf-intro {
	margin-bottom: 12px;
	padding-bottom: 0;
	color: #444;
	font-size: 16px;
	line-height: 1.55;
}
.lcf-puntos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 18px;
	margin: 0 0 16px;
}
.lcf-punto {
	position: relative;
	padding-left: 34px;
}
.lcf-punto::before {
	content: "✓";
	position: absolute;
	top: 1px;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #000;
	color: var(--lcf-acento, #d40000);
	font-weight: 700;
	font-size: 13px;
	line-height: 24px;
	text-align: center;
}
.lcf-punto h3 {
	margin: 0 0 2px;
	padding: 0;
	color: #000;
	font-size: 16.5px;
	line-height: 1.3;
}
.lcf-punto p {
	margin: 0;
	padding: 0;
	color: #555;
	font-size: 14px;
	line-height: 1.45;
}
.lcf-alt {
	margin: 0;
	padding: 0 !important;
	color: #444;
	font-size: 14.5px;
}
.lcf-alt a {
	color: #000;
	font-weight: 700;
	text-decoration: underline;
}

/* ---------- Tarjeta del formulario ---------- */
.lcf {
	position: relative;
	box-sizing: border-box;
	padding: 20px 22px 16px;
	border-top: 4px solid var(--lcf-acento, #d40000);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
}
.lcf *,
.lcf *::before,
.lcf *::after {
	box-sizing: border-box;
}
.lcf [hidden] {
	display: none !important;
}
.lcf .lcf-titulo {
	margin: 0 0 2px;
	padding: 0;
	color: #000;
	font-family: K2D, Helvetica, Arial, sans-serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
}
.lcf .lcf-sub {
	margin: 0 0 12px;
	padding: 0;
	color: #666;
	font-size: 14px;
	line-height: 1.4;
}
.lcf-filas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 12px;
	margin: 0 0 12px;
}
.lcf-campo {
	min-width: 0;
	margin: 0;
}
.lcf-campo label {
	display: block;
	margin: 0 0 3px;
	color: #222;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}
.lcf .lcf-req {
	color: #d40000;
}
.lcf .lcf-opt {
	color: #888;
	font-weight: 400;
}
.lcf .lcf-campo input,
.lcf .lcf-campo select,
.lcf .lcf-campo textarea {
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 8px 11px;
	border: 1px solid #cfcfcf;
	border-radius: 6px;
	background: #fafafa;
	color: #111;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px; /* 16px: iOS no hace zoom al enfocar */
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s, background .15s, height .15s;
}
/* Email y duda ocupan las dos columnas */
.lcf-campo.lcf-ancho {
	grid-column: 1 / -1;
}
/* La duda: 3 líneas a todo el ancho, ampliable hacia abajo */
.lcf .lcf-campo textarea {
	height: auto;
	min-height: 78px;
	max-height: 320px;
	overflow: auto;
	resize: vertical;
}
/* Desplegable de las páginas índice: misma caja que los campos, con su flecha */
.lcf .lcf-campo select {
	padding-right: 34px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	cursor: pointer;
}
.lcf .lcf-campo input:focus,
.lcf .lcf-campo select:focus,
.lcf .lcf-campo textarea:focus {
	outline: none;
	border-color: #000;
	background: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lcf-acento, #d40000) 45%, transparent);
}
.lcf [aria-invalid="true"] {
	border-color: #d40000 !important;
	background: #fff6f6 !important;
}
.lcf-error {
	display: block;
	margin-top: 3px;
	color: #c00000;
	font-size: 12.5px;
	line-height: 1.3;
}
.lcf-check {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 8px;
	align-items: start;
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.4;
}
.lcf-check input {
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	accent-color: #000;
}
.lcf-check label {
	color: #444;
}
.lcf-check a {
	color: #000;
	text-decoration: underline;
}
.lcf-check .lcf-error {
	grid-column: 2;
	margin-top: 0;
}
.lcf .lcf-btn {
	display: block;
	width: 100%;
	margin: 12px 0 0;
	padding: 11px 18px;
	border: 0;
	border-radius: 7px;
	background: linear-gradient(130deg, var(--lcf-acento) 0%, var(--lcf-acento-2) 52%, var(--lcf-acento) 100%);
	color: var(--lcf-acento-texto, #fff);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s, filter .15s;
}
.lcf .lcf-btn:hover {
	filter: brightness(1.05);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
	transform: translateY(-1px);
}
.lcf .lcf-btn:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}
.lcf .lcf-btn[disabled] {
	opacity: .7;
	cursor: wait;
	transform: none;
}
.lcf .lcf-estado {
	margin: 8px 0 0;
	padding: 0;
	color: #c00000;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
}
.lcf .lcf-estado.lcf-espera {
	color: #555;
	font-weight: 400;
}
.lcf .lcf-estado:empty {
	display: none;
}
.lcf .lcf-legal {
	margin: 8px 0 0;
	padding: 0;
	color: #8a8a8a;
	font-size: 11px;
	line-height: 1.4;
}

/* Campo trampa para robots */
.lcf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Confirmación ---------- */
.lcf-ok {
	padding: 6px 0;
	text-align: center;
	outline: none;
}
.lcf-ok-icono {
	width: 54px;
	height: 54px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: #000;
	color: var(--lcf-acento, #d40000);
	font-size: 28px;
	font-weight: 700;
	line-height: 54px;
	animation: lcf-pop .35s ease-out;
}
.lcf-ok p {
	margin: 0 0 10px;
	padding: 0;
	font-size: 15px;
	line-height: 1.55;
}
.lcf-ok a {
	color: #000;
	font-weight: 700;
	text-decoration: underline;
}
@keyframes lcf-pop {
	from { transform: scale(.4); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

/* AMP: solo un botón hacia la versión normal */
.lcf-amp {
	padding: 16px;
	box-shadow: none;
}

@media (max-width: 980px) {
	.lcf-intro-col h2 {
		font-size: 24px;
	}
}
@media (max-width: 600px) {
	.lcf {
		padding: 18px 16px 14px;
	}
	.lcf-intro-col h3,
	.lcf .lcf-titulo {
		font-size: 21px !important;
	}
	.lcf-filas,
	.lcf-puntos {
		grid-template-columns: 1fr;
	}
	.lcf-puntos {
		gap: 10px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lcf .lcf-btn,
	.lcf-ok-icono,
	.lcf .lcf-campo textarea {
		transition: none;
		animation: none;
	}
}

/* ---------- Animación «de persona a persona» ([logocrea_info_animacion]) ----------
   Ciclo de 10 s: clic en «Más información» (0-20 %), el aviso vuela (21-40 %), le llega a
   Andy (40-46 %), coge el teléfono (46-53 %), suenan los móviles (55-78 %), bocadillos
   (70-92 %) y vuelta a empezar. Solo transform y opacity: barato para el navegador. */
.lcfa {
	margin: 4px 0 14px;
	line-height: 0;
}
.lcfa svg {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	overflow: visible;
}
/* Solo las piezas animadas (clase lcfa-…): si fill-box se aplicara a todo, también afectaría
   al grupo que invierte y escala al diseñador y lo desplazaría. */
.lcfa svg [class^="lcfa-"],
.lcfa svg [class*=" lcfa-"] {
	transform-box: fill-box;
}
.lcfa svg * {
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}
.lcfa.lcfa-pausa svg * {
	animation-play-state: paused;
}
.lcfa-cursor      { transform-origin: 0 0; animation-name: lcfa-cursor; }
.lcfa-boton       { transform-origin: center; animation-name: lcfa-boton; }
.lcfa-btn-txt     { animation-name: lcfa-btn-txt; }
.lcfa-btn-ok      { animation-name: lcfa-btn-ok; }
.lcfa-onda-clic   { transform-origin: center; animation-name: lcfa-onda-clic; }
.lcfa-trazo-m     { stroke-dasharray: 100; animation-name: lcfa-trazo-m; }
.lcfa-trazo       { animation-name: lcfa-trazo; }
.lcfa-avion       { transform-box: view-box; transform-origin: 0 0; animation-name: lcfa-avion; animation-timing-function: linear; }
.lcfa-aviso       { transform-origin: center; animation-name: lcfa-aviso; }
/* Diseñador: brazo articulado. Cada articulación es un grupo cuyo origen (0,0) ya está en el
   hombro o en el codo (lo hace el SVG con translate), así que giran sobre su eje con view-box. */
.lcfa svg .lcfa-hombro,
.lcfa svg .lcfa-codo,
.lcfa svg .lcfa-hombro-c,
.lcfa svg .lcfa-codo-c {
	transform-box: view-box;
	transform-origin: 0 0;
	animation-timing-function: cubic-bezier(.45, 0, .25, 1);
}
.lcfa-hombro      { animation-name: lcfa-hombro; }
.lcfa-codo        { animation-name: lcfa-codo; }
.lcfa-movil-mesa  { animation-name: lcfa-movil-mesa; animation-timing-function: steps(1, end); }
.lcfa-movil-mano  { animation-name: lcfa-movil-mano; animation-timing-function: steps(1, end); }
.lcfa-ondas-d     { animation-name: lcfa-ondas; }
/* Clienta: su móvil vibra en la mesa, lo coge y se lo lleva a la oreja (mismo sistema). */
.lcfa-hombro-c    { animation-name: lcfa-hombro-c; }
.lcfa-codo-c      { animation-name: lcfa-codo-c; }
.lcfa-ondas-c     { animation-name: lcfa-ondas-c; }
.lcfa-movil-c     { animation-name: lcfa-movil-c; }
.lcfa-movil-c rect { animation-name: lcfa-movil-mesa-c; }
/* Su mano del teclado se oculta mientras la de agarre sujeta el móvil (y la de Andy, igual, con lcfa-movil-mesa). */
.lcfa-mano-c      { animation-name: lcfa-movil-mesa-c; }
/* Los móviles aparecen y desaparecen de golpe (más específico que «.lcfa svg *»). */
.lcfa svg .lcfa-movil-mesa,
.lcfa svg .lcfa-movil-mano,
.lcfa svg .lcfa-movil-mano-c,
.lcfa svg .lcfa-movil-c rect,
.lcfa svg .lcfa-mano-c { animation-timing-function: steps(1, end); }
.lcfa-movil-mano-c { animation-name: lcfa-movil-mano-c; animation-timing-function: steps(1, end); }
.lcfa-bocadillo-d { transform-origin: 85% 100%; animation-name: lcfa-bocadillo-d; }
.lcfa-bocadillo-c { transform-origin: 30% 100%; animation-name: lcfa-bocadillo-c; }

@keyframes lcfa-cursor {
	0%   { opacity: 0; transform: translate(28px, 26px); }
	5%   { opacity: 1; transform: translate(28px, 26px); }
	15%  { opacity: 1; transform: translate(0, 0) scale(1); }
	17%  { transform: translate(0, 0) scale(.82); }
	19%  { opacity: 1; transform: translate(0, 0) scale(1); }
	25%  { opacity: 0; transform: translate(6px, 8px); }
	100% { opacity: 0; transform: translate(28px, 26px); }
}
@keyframes lcfa-boton {
	0%, 16%, 20%, 100% { transform: scale(1); }
	18%  { transform: scale(.93); }
}
@keyframes lcfa-btn-txt {
	0%, 19%  { opacity: 1; }
	20%, 94% { opacity: 0; }
	97%, 100% { opacity: 1; }
}
@keyframes lcfa-btn-ok {
	0%, 19%  { opacity: 0; }
	20%, 94% { opacity: 1; }
	97%, 100% { opacity: 0; }
}
@keyframes lcfa-onda-clic {
	0%, 17% { opacity: 0; transform: scale(.5); }
	18%  { opacity: .8; transform: scale(1); }
	27%, 100% { opacity: 0; transform: scale(3.2); }
}
@keyframes lcfa-trazo-m {
	0%, 21%  { stroke-dashoffset: 100; }
	39%, 100% { stroke-dashoffset: 0; }
}
@keyframes lcfa-trazo {
	0%, 20%  { opacity: 0; }
	22%, 88% { opacity: 1; }
	93%, 100% { opacity: 0; }
}
@keyframes lcfa-avion {
	0%, 21% { opacity: 0; transform: translate(237px, 81px) rotate(-49deg); }
	22%  { opacity: 1; transform: translate(237px, 81px) rotate(-49deg); }
	30%  { opacity: 1; transform: translate(300px, 44px) rotate(7deg); }
	38%  { opacity: 1; transform: translate(369px, 74px) rotate(42deg); }
	41%, 100% { opacity: 0; transform: translate(383px, 87px) rotate(46deg); }
}
@keyframes lcfa-aviso {
	0%, 40%  { opacity: 0; transform: scale(0); }
	44%  { opacity: 1; transform: scale(1.08); }
	46%, 92% { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(0); }
}
/* Brazo del diseñador (ángulos por cinemática inversa sobre el dibujo original):
   44-50 % suelta el ratón y baja la mano al móvil · 50-52 % lo coge · 52-60 % se lo lleva a
   la oreja · 60-90 % habla · 90-95 % lo deja en la mesa · 95-100 % vuelve al ratón. */
@keyframes lcfa-hombro {
	0%, 44%  { transform: rotate(0deg); }
	50%, 52% { transform: rotate(43.5deg); }
	60%, 90% { transform: rotate(1.4deg); }
	95%      { transform: rotate(43.5deg); }
	100%     { transform: rotate(0deg); }
}
@keyframes lcfa-codo {
	0%, 44%  { transform: rotate(0deg); }
	50%, 52% { transform: rotate(-52.1deg); }
	60%, 90% { transform: rotate(-132.4deg); }
	95%      { transform: rotate(-52.1deg); }
	100%     { transform: rotate(0deg); }
}
@keyframes lcfa-movil-mesa {
	0%    { opacity: 1; }
	51%   { opacity: 0; }
	95%   { opacity: 1; }
	100%  { opacity: 1; }
}
@keyframes lcfa-movil-mano {
	0%    { opacity: 0; }
	51%   { opacity: 1; }
	95%   { opacity: 0; }
	100%  { opacity: 0; }
}
@keyframes lcfa-ondas {
	0%, 59% { opacity: 0; }
	62% { opacity: 1; }
	65% { opacity: .2; }
	68% { opacity: 1; }
	71% { opacity: .2; }
	74% { opacity: 1; }
	78%, 100% { opacity: 0; }
}
/* Clienta (ángulos por cinemática inversa en generar-animacion.py):
   52-61 % su móvil vibra · 58-62 % alarga la mano y lo coge · 63-69 % lo sube pegado al
   cuerpo hasta la oreja · 69-90 % habla · 90-94,5 % lo deja en la mesa · 94,5-98 % vuelve al teclado. */
@keyframes lcfa-movil-c {
	0%, 52%, 61%, 100% { transform: translate(0, 0); }
	53%, 55%, 57%, 59% { transform: translate(-1px, 0); }
	54%, 56%, 58%, 60% { transform: translate(1px, 0); }
}
@keyframes lcfa-ondas-c {
	0%, 52% { opacity: 0; }
	53% { opacity: 1; }
	55% { opacity: .2; }
	57% { opacity: 1; }
	59% { opacity: .2; }
	60.5% { opacity: 1; }
	62%, 100% { opacity: 0; }
}
@keyframes lcfa-hombro-c {
	0%, 58%  { transform: rotate(0deg); }
	62%, 63% { transform: rotate(42.5deg); }
	65.5%    { transform: rotate(52.2deg); }
	69%, 90% { transform: rotate(-38.7deg); }
	92.5%    { transform: rotate(52.2deg); }
	94.5%    { transform: rotate(42.5deg); }
	98%, 100% { transform: rotate(0deg); }
}
@keyframes lcfa-codo-c {
	0%, 58%  { transform: rotate(0deg); }
	62%, 63% { transform: rotate(-48.2deg); }
	65.5%    { transform: rotate(-87.2deg); }
	69%, 90% { transform: rotate(-100.0deg); }
	92.5%    { transform: rotate(-87.2deg); }
	94.5%    { transform: rotate(-48.2deg); }
	98%, 100% { transform: rotate(0deg); }
}
@keyframes lcfa-movil-mesa-c {
	0%     { opacity: 1; }
	62.5%  { opacity: 0; }
	94.5%  { opacity: 1; }
	100%   { opacity: 1; }
}
@keyframes lcfa-movil-mano-c {
	0%     { opacity: 0; }
	62.5%  { opacity: 1; }
	94.5%  { opacity: 0; }
	100%   { opacity: 0; }
}
@keyframes lcfa-bocadillo-d {
	0%, 69%  { opacity: 0; transform: scale(.3); }
	73%  { opacity: 1; transform: scale(1.06); }
	75%, 92% { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes lcfa-bocadillo-c {
	0%, 77%  { opacity: 0; transform: scale(.3); }
	81%  { opacity: 1; transform: scale(1.06); }
	83%, 92% { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(.3); }
}

/* Sin movimiento: la escena final, quieta */
@media (prefers-reduced-motion: reduce) {
	.lcfa svg * { animation: none !important; }
	.lcfa-cursor, .lcfa-onda-clic, .lcfa-avion, .lcfa-btn-txt, .lcfa-movil-mesa, .lcfa-movil-c, .lcfa-mano-c, .lcfa-ondas-c { opacity: 0; }
	.lcfa-btn-ok, .lcfa-trazo, .lcfa-aviso, .lcfa-movil-mano, .lcfa-movil-mano-c, .lcfa-ondas-d, .lcfa-bocadillo-d, .lcfa-bocadillo-c { opacity: 1; }
	.lcfa-trazo-m { stroke-dashoffset: 0; }
	.lcfa svg .lcfa-hombro { transform: rotate(1.4deg); }
	.lcfa svg .lcfa-codo { transform: rotate(-132.4deg); }
	.lcfa svg .lcfa-hombro-c { transform: rotate(-38.7deg); }
	.lcfa svg .lcfa-codo-c { transform: rotate(-100.0deg); }
}