/**
 * Explorador — la tira de paneles de Formá con su contenido desplegable.
 *
 * La tira reusa las clases de `panels.css` tal cual; acá va sólo lo que el
 * componente agrega. La banda del cuerpo ocupa el mismo lugar que las
 * preguntas frecuentes y toma el color de su panel: azul el 01, amarilla el
 * 02 y verde el 03 (nodos 55:826, 55:1009 y 55:1106).
 */

/* La flecha va pegada al título, no en una línea aparte. */
.cvp-explora__arrow {
	display: inline-block;
	transition: transform var(--cvp-dur) var(--cvp-ease);
}

.cvp-explora__panel[aria-expanded="true"] .cvp-explora__arrow {
	transform: rotate(90deg);
}

.cvp-explora__panel-body {
	padding-block: var(--cvp-sp-7);
	color: var(--cvp-white);
}

.cvp-explora__panel-body--navy   { background: var(--cvp-navy); }
.cvp-explora__panel-body--green  { background: var(--cvp-green); }
.cvp-explora__panel-body--orange { background: var(--cvp-orange); }
.cvp-explora__panel-body--black  { background: var(--cvp-black); }

/* Sobre amarillo el texto va en azul, como en el diseño. */
.cvp-explora__panel-body--yellow {
	background: var(--cvp-yellow);
	color: var(--cvp-navy);
}

/*
 * El diseño no angosta la columna: el texto de los bloques va a todo el ancho
 * del container (1426 de 1440 en el nodo 55:826). Angostarlo dejaba además el
 * formulario corto a media caja.
 */
.cvp-explora__prosa { max-width: none; }

.cvp-explora__prosa > :first-child { margin-top: 0; }
.cvp-explora__prosa > :last-child { margin-bottom: 0; }

.cvp-explora__prosa h3 {
	font-family: var(--cvp-font-display); font-weight: 700;
	font-size: var(--cvp-fs-xl); line-height: 1.1;
	text-transform: uppercase;
	color: inherit;
	margin: 0 0 var(--cvp-sp-4);
}

.cvp-explora__prosa h4 {
	font-family: var(--cvp-font-display); font-weight: 700;
	font-size: var(--cvp-fs-md); line-height: 1.2;
	color: inherit;
	margin: var(--cvp-sp-5) 0 var(--cvp-sp-2);
}

.cvp-explora__prosa p,
.cvp-explora__prosa li {
	font-family: var(--cvp-font-text); font-size: var(--cvp-fs-base);
	line-height: 1.6;
}

.cvp-explora__prosa p { margin: 0 0 var(--cvp-sp-3); }

.cvp-explora__prosa ul { margin: 0 0 var(--cvp-sp-3); padding-left: 1.25em; }
.cvp-explora__prosa li { margin-bottom: var(--cvp-sp-1); }

/*
 * El formulario corto va dentro de la banda amarilla: la caja blanca y el
 * ancho pleno los pone el diseño (nodo 55:1009), no el componente, así que
 * hay que sacarle el padding y el fondo propios de la página de Contacto.
 */
.cvp-explora__prosa .cvp-contacto {
	padding: 0;
	background: transparent;
}

.cvp-explora__prosa .cvp-contacto__inner {
	display: block;
	padding-inline: 0;
}

.cvp-explora__prosa .cvp-contacto__form {
	background: var(--cvp-white);
	padding: var(--cvp-sp-4);
	border-radius: 14px; /* FormCol, nodo 57:1174 */
}

/* El botón va centrado en la caja (FormCol alinea al centro). */
.cvp-explora__prosa .cvp-contacto__submit {
	display: flex;
	margin-inline: auto;
}

/*
 * Las etiquetas del formulario corto van en 20 (nodo 55:1009), no en los 13
 * de Contacto: adentro de la banda el formulario es el contenido, no un
 * accesorio.
 */
.cvp-explora__prosa .cvp-contacto__label {
	color: var(--cvp-navy);
	font-size: var(--cvp-fs-md);
}

@media (max-width: 700px) {
	.cvp-explora__panel-body { padding-block: var(--cvp-sp-5); }
	.cvp-explora__prosa .cvp-contacto__form { padding: var(--cvp-sp-3); }
}

/*
 * Tamaños del Figma del 18 de setiembre. La tira de Formá dejó de compartir
 * medida con la del Home (28): sus títulos van en 24 y la bajada en 20, que
 * es la que ya toma de `panels.css`. En la banda desplegable el título del
 * bloque es 26 y el cuerpo 20 (nodos 58:1154 y 57:1171), y va todo en Rubik
 * —la banda es la única parte del sitio que usa la tipografía de titular para
 * el cuerpo, y así está dibujada—.
 */
.cvp-explora__panel .cvp-panels__title { font-size: 1.5rem; }        /* 24 */
.cvp-explora__panel .cvp-panels__text  { font-size: var(--cvp-fs-md); }  /* 20 */

.cvp-explora__prosa h3 { font-size: 1.625rem; }                 /* 26 */

.cvp-explora__prosa p,
.cvp-explora__prosa li {
	font-family: var(--cvp-font-display);
	font-size: var(--cvp-fs-md);                                /* 20 */
	line-height: 1.5;
}

/* El mobile del Figma deja el título del panel en 18; la prosa no existe
   ahí (la banda desplegable es nueva), así que se baja a ojo. */
@media (max-width: 900px) {
	.cvp-explora__panel .cvp-panels__title { font-size: 1.125rem; }  /* 18 */
	.cvp-explora__panel .cvp-panels__text  { font-size: var(--cvp-fs-sm); }  /* 14 */
}

@media (max-width: 700px) {
	.cvp-explora__prosa h3 { font-size: 1.375rem; }                  /* 22 */

	.cvp-explora__prosa p,
	.cvp-explora__prosa li { font-size: var(--cvp-fs-base); }        /* 16 */
}