/*
 * Portada de arriendorobot.com — capa propia sobre el sistema «nfd-*».
 *
 * El CSS de Newfold (que trae el plugin bluehost-wordpress-plugin) usa
 * !important en casi todas sus reglas. Por eso aquí NO se pelean
 * propiedades: se redefinen sus variables --wndb--*, que es la vía que el
 * propio sistema deja abierta y la única estable frente a sus
 * actualizaciones automáticas desde patterns.hiive.cloud.
 *
 * Los colores nunca se escriben literales: salen de los presets de
 * theme.json, que es donde manda la paleta.
 */

/* ------------------------------------------------------------------
   1. Puente de paleta: alinear el sistema «nfd» con theme.json
   ------------------------------------------------------------------ */

body {
	/*
	 * Los enlaces de texto van en el celeste oscuro (7,44:1 sobre blanco,
	 * AAA). El celeste claro #1B6FA8 se reserva al relleno de los botones,
	 * donde 5,40:1 con texto blanco cumple AA de sobra.
	 */
	--wndb--color--links: var(--wp--preset--color--secondary-foreground);
}

/*
 * Newfold declara estos temas con el selector
 *     .nfd-theme-light:not([class*=is-style-nfd-theme])
 * cuya especificidad es (0,2,0). Un simple .nfd-theme-light —(0,1,0)— pierde
 * y el puente no llega a aplicarse: se comprobo muestreando la captura del
 * pie, que salia con el gris #f7f7f8 y el texto #121217 de Newfold en vez de
 * los de la paleta. Repetir la clase y anclar en html da (0,2,1), que gana
 * sin recurrir a !important.
 */
html .nfd-theme-white.nfd-theme-white,
html .is-style-nfd-theme-white.is-style-nfd-theme-white {
	--wndb--color--surface: var(--wp--preset--color--base);
	--wndb--color--text: var(--wp--preset--color--contrast);
	--wndb--color--text--contrast: var(--wp--preset--color--contrast);
	--wndb--color--text--faded: var(--wp--preset--color--tertiary);
	--wndb--color--borders: var(--wp--preset--color--borde);
	--wndb--color--borders-light: #e4eaef;
	--wndb--color--subtle: #dfe6ec;
}

html .nfd-theme-light.nfd-theme-light,
html .is-style-nfd-theme-light.is-style-nfd-theme-light {
	--wndb--color--surface: var(--wp--preset--color--secondary-background);
	--wndb--color--text: var(--wp--preset--color--contrast);
	--wndb--color--text--contrast: var(--wp--preset--color--contrast);
	--wndb--color--text--faded: var(--wp--preset--color--tertiary);
	--wndb--color--borders: var(--wp--preset--color--borde);
	--wndb--color--borders-light: #e4eaef;
	--wndb--color--subtle: #dfe6ec;
}

/* ------------------------------------------------------------------
   2. Navegación por anclas
   ------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
}

/* Que el destino de un ancla no quede pegado al borde de la ventana. */
[id="inicio"],
[id="robots"],
[id="clientes"],
[id="preguntas"],
[id="contacto"] {
	scroll-margin-top: 1.5rem;
}

/*
 * Cabecera fija solo en escritorio, donde el boton de WhatsApp vive en ella:
 * la pagina mide mas de 5.000 px y sin esto el boton desaparece al bajar. En
 * movil no se fija: ahi el boton ya va dentro del menu y la barra se comeria
 * un octavo de la pantalla.
 *
 * Los destinos de las anclas se miden desde debajo de la cabecera, que a
 * 1440 px mide 129 px: 80 del logo, 48 de relleno y 1 de linea. Si esa altura
 * cambia, cambiar aqui tambien.
 */
@media (min-width: 1050px) {

	/*
	 * Se fija el <header> que envuelve la parte de plantilla, no el grupo de
	 * dentro: un sticky solo se desplaza dentro de su padre, y el grupo era el
	 * unico hijo del <header>, de la misma altura. Medido: con el grupo fijo,
	 * al pulsar «Preguntas» la cabecera quedaba 3.553 px fuera de pantalla.
	 */
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 30;
	}

	[id="inicio"],
	[id="robots"],
	[id="clientes"],
	[id="preguntas"],
	[id="contacto"] {
		scroll-margin-top: calc(129px + 1.5rem);
	}
}

/* ------------------------------------------------------------------
   3. Cabecera
   ------------------------------------------------------------------ */

/*
 * El menú desplegable de WordPress solo entra por debajo de 600 px. Entre
 * 600 y 1050 px las cinco anclas y el botón de WhatsApp comparten una fila
 * sin espacio: medido a 600 px, el botón se estrujaba hasta 787 px de alto,
 * y a 1024 px caía a dos líneas. A 1050 px y por encima entra en una sola.
 *
 * Se sube ese umbral a 1050 px reponiendo el estado «cerrado» que el núcleo
 * define por debajo de 600 px. Los selectores del núcleo tienen
 * especificidad (0,3,0); anteponer .roborent-menu da (0,4,0) y gana sin
 * depender del orden de carga.
 */
@media (max-width: 1049.98px) {

	.roborent-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		position: fixed;
		inset: 0;
		width: auto;
	}

	.roborent-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: block;
	}

	/*
	 * En escritorio el menú se alinea a la derecha, junto al botón. Esa
	 * alineación se heredaba dentro del desplegable y dejaba los enlaces
	 * pegados a la derecha mientras el botón ocupaba todo el ancho.
	 *
	 * Quien manda es __responsive-container-content, que trae
	 * align-items:flex-end; se comprobó recorriendo los estilos calculados
	 * de la cadena de padres con el menú abierto.
	 */
	.roborent-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.roborent-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: flex-start;
	}
}

/*
 * Por debajo de 1200 px la caja de contenido ocupa todo el ancho y el logo
 * queda pegado al borde de la pantalla: medido, izquierda 0 px. El pie no
 * tiene el problema porque lleva su propio padding declarado.
 */
@media (max-width: 1240px) {

	.roborent-cabecera,
	.roborent-seccion > * {
		/*
		 * box-sizing es obligatorio aquí: estos elementos no lo heredan y la
		 * sangría se sumaba al ancho. Medido a 1200 px, los H2 de sección
		 * salían de 1250 px y la página desbordaba en horizontal.
		 */
		box-sizing: border-box;
		padding-inline: var(--wp--preset--spacing--30);
	}
}

/*
 * Un tono apenas distinto para diferenciar la cabecera del hero, que es
 * blanco: superficie gris muy clara y una linea inferior de un pixel.
 */
.roborent-cabecera-marco {
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

/*
 * Logotipo. Es apaisado (3,5:1), asi que se gobierna por alto: 80 px en
 * escritorio y 48 px en movil; el ancho sale solo y la proporcion no se
 * toca. A 52 y a 64 px se veia pequeno en pantalla de ordenador. Antes el
 * logo era un cuadrado de 120 px que hacia la cabecera de 149 px de alto.
 */
.roborent-logo img {
	width: auto;
	height: 80px;
	max-width: 100%;
}

@media (max-width: 600px) {

	.roborent-logo img {
		height: 48px;
	}
}

/*
 * El boton de abrir el menu en movil es un icono de 24 px a secas. Se le da
 * area de pulsacion de 44 px con relleno, y el margen negativo lo deja en el
 * mismo sitio de siempre.
 */
.roborent-menu .wp-block-navigation__responsive-container-open {
	padding: 10px;
	margin: -10px;
}

/* Icono de WhatsApp dentro del boton de la cabecera. */
/*
 * El mismo icono sirve en la cabecera y en el cierre de #clientes, asi que la
 * regla ya no cuelga de .roborent-cabecera. Hereda el color del texto del
 * boton, de modo que sale blanco sobre el azul sin declararlo aparte.
 */
.roborent-wa {
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.5em;
	vertical-align: -0.2em;
	fill: currentColor;
}

/* ------------------------------------------------------------------
   4. Foco visible
   ------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ------------------------------------------------------------------
   5. 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;
	}
}

/* ------------------------------------------------------------------
   5b. Hero: relleno vertical
   ------------------------------------------------------------------ */

/*
 * nfd-py-lg daba 100 px arriba y abajo a 1440 px, y la columna de texto se
 * centra contra la imagen, mas alta: medido, 148 px de hueco antes del H1.
 * Le quitaba densidad a la seccion.
 *
 * nfd-py-lg lleva !important, asi que en vez de pelearlo el hero ya no
 * lleva esa clase: el relleno vertical lo pone esta regla y nadie mas.
 */
.roborent-hero {
	padding-block: clamp(1.5rem, 3vw, 2.75rem);
}

/*
 * Reparto de columnas del hero: 48 % texto, 52 % foto. La foto pasa de
 * 580x435 a 624x468 px a 1440, dentro del contenedor de 1200 px. Se probo
 * por encima del 52 % y el H1 caia a cuatro lineas o los dos botones se
 * apilaban; y se probo sacar la foto a sangre hasta el borde de la ventana,
 * que el dueno descarto: la foto tiene que quedar dentro del margen.
 *
 * WordPress iguala las columnas con flex-basis:0 y flex-grow:1 a (0,3,0);
 * de ahi el ancla en html y la clase repetida, sin !important.
 */
@media (min-width: 782px) {

	html .roborent-hero .wp-block-columns > .roborent-hero__foto {
		flex: 0 0 52%;
	}

	html .roborent-hero .wp-block-columns > .wp-block-column:first-child {
		flex: 1 1 auto;
	}

	/*
	 * La foto mide lo mismo de alto que el bloque de texto, sea cual sea el
	 * ancho: la columna deja de centrarse y se estira a la altura de la fila,
	 * y la diapositiva visible la llena con recorte centrado. A 1440 la foto
	 * pasa de 624x468 a 624x567, con el alto exacto del texto. Antes, a 4:3,
	 * quedaba 100 px mas baja que el texto y las dos mitades no casaban.
	 *
	 * Solo cuando el script esta en marcha: sin el, las trece diapositivas
	 * van apiladas y cada una a su altura natural.
	 */
}

/*
 * El relleno de altura solo a partir de 1200 px. Por debajo la columna de
 * texto se vuelve alta y estrecha —medido a 1050: 441x697— y la foto
 * saldria en vertical recortando casi la mitad de cada lado. Entre 782 y
 * 1199 la foto vuelve a su 4:3, centrada frente al texto.
 */
@media (min-width: 1200px) {

	html .roborent-hero .wp-block-columns > .roborent-hero__foto {
		display: flex;
		flex-direction: column;
		align-self: stretch;
	}

	/*
	 * Las diapositivas van apiladas en absoluto, asi que quien tiene que
	 * ganar altura es el contenedor: ellas lo llenan solas con «inset: 0».
	 * Por eso aqui se suelta el «aspect-ratio» de la seccion 6 y se deja
	 * que el flex reparta la altura de la columna de texto.
	 */
	.roborent-hero__foto .roborent-carrusel.esta-activo {
		flex: 1 1 auto;
		min-height: 0;
		aspect-ratio: auto;
	}
}

/* ------------------------------------------------------------------
   6. Carrusel del hero
   ------------------------------------------------------------------

   Mejora progresiva. Sin JavaScript las trece diapositivas se ven
   apiladas: se pierde el carrusel, no el contenido. La clase
   «esta-activo» la pone el script, y solo entonces se oculta lo que no
   toca. Así Google ve las trece imágenes con su pie y su alt.
   ------------------------------------------------------------------ */

.roborent-carrusel {
	position: relative;
}

.roborent-carrusel .roborent-diapositiva {
	margin: 0;
}

.roborent-carrusel .roborent-diapositiva img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/*
 * Los pies de foto no se ven, por decision del dueno: el hero es para que
 * pasen fotos, no para leerlas. Siguen en el HTML —el primero, «Eventos
 * empresariales exitosos», es texto del inventario original y no se borra—
 * y los lectores de pantalla los leen. Patron «solo lector de pantalla».
 */
.roborent-carrusel .roborent-diapositiva figcaption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Fotos verticales con el sujeto arriba: el recorte a 4:3 centrado le
 * cortaba la cabeza a Mr. Kondor (original de 540x960, cabeza en el quinto
 * superior). Se ancla el encuadre cerca del borde superior.
 */
.roborent-carrusel .roborent-diapositiva--arriba img {
	object-position: 50% 12%;
}

/* A partir de aquí, solo cuando el script ha tomado el mando. */

/*
 * Fundido cruzado, no corte seco.
 *
 * Antes esto era «display: none» mas un @keyframes de opacidad sobre la
 * entrante. Tenia dos fallos medidos:
 *
 * 1. La saliente desaparecia de golpe, asi que la entrante no se fundia
 *    contra ella sino contra el fondo blanco de la pagina. Se veia el corte.
 * 2. Doce de las trece fotos llevan loading="lazy", y una imagen «lazy»
 *    dentro de «display: none» NO se descarga hasta que se muestra: cada
 *    foto empezaba a bajar justo en el instante en que le tocaba salir. De
 *    ahi el parpadeo.
 *
 * Ahora las trece se apilan en absoluto —el navegador las carga todas— y
 * solo cambia la opacidad, que es propiedad de composicion: no recalcula
 * diseno ni repinta. Ni «left» ni «width» ni «top» entran aqui.
 */
.roborent-carrusel.esta-activo {
	aspect-ratio: 4 / 3;
}

.roborent-carrusel.esta-activo .roborent-diapositiva {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * La saliente conserva «se-va» —y con ella su opacidad— durante todo el
 * cruce, y solo despues se apaga, ya tapada por la entrante. Si las dos se
 * cruzaran a la vez, en mitad del camino sumarian menos de uno y asomaria
 * el fondo: un bajon de brillo perfectamente visible sobre fotos opacas.
 */
.roborent-carrusel.esta-activo .roborent-diapositiva.es-visible,
.roborent-carrusel.esta-activo .roborent-diapositiva.se-va {
	opacity: 1;
}

.roborent-carrusel.esta-activo .roborent-diapositiva.es-visible {
	z-index: 2;
}

.roborent-carrusel.esta-activo .roborent-diapositiva img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Mandos del hero: solo las dos flechas, superpuestas sobre la foto. La capa
 * cubre la foto entera —el pie ya no ocupa sitio— y no deja pasar el raton
 * salvo en los propios botones, para no robarle el clic a la imagen.
 */
.roborent-carrusel__mandos {
	position: absolute;
	inset: 0;
	/*
	 * Por encima del z-index de la diapositiva entrante. Sin esto las flechas
	 * quedan debajo de la foto y dejan de poder pulsarse: detectado con
	 * Playwright, que informo de que la imagen interceptaba el clic.
	 */
	z-index: 3;
	pointer-events: none;
}

.roborent-carrusel__mandos > * {
	pointer-events: auto;
}


/* ------------------------------------------------------------------
   7. Ventajas, dentro del hero
   ------------------------------------------------------------------

   Ya no son una sección con su propia banda: viven en el hero, bajo la
   descripción y antes de los botones.

   NO es una rejilla ni una fila de columnas. Los tres textos siguen
   siendo tres párrafos independientes —para no perder bloques—
   apilados en vertical y al mismo tamaño que la descripción de arriba.
   Sin recuadros, sin separadores, sin negritas y sin pares
   etiqueta/valor.

   El guion lo pone el CSS, no el texto. Dos razones: es decoración y no
   contenido, así que no tiene por qué viajar en el HTML; y wptexturize
   convierte un «- » guardado en «– », de modo que el texto servido no
   sería el que se escribió.
   ------------------------------------------------------------------ */

.roborent-ventajas {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-block: 1.5rem;
}

.roborent-ventajas p {
	margin: 0;
	color: var(--wp--preset--color--tertiary);
}

.roborent-ventajas p::before {
	content: "–";  /* el caracter, no una secuencia de escape */
	margin-right: 0.4em;
	color: var(--wp--preset--color--primary);
}

/*
 * «Ver robots» es el unico boton de contorno de la pagina. Newfold lo pinta
 * con el color de texto, negro, y al pasar el cursor lo rellena de gris
 * oscuro, todo con !important: era el unico elemento con borde negro y el
 * unico hover gris. Pasa al celeste oscuro, con relleno celeste al pasar,
 * igual que los botones solidos. Los !important son obligados: los suyos
 * tambien lo son y solo se les gana con mas especificidad e !important.
 */
html .roborent-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--secondary-foreground) !important;
	border-color: currentColor !important;
}

html .roborent-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
html .roborent-hero .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
}

/* ------------------------------------------------------------------
   8. Filas de robot (#robots)
   ------------------------------------------------------------------

   Dos filas dentro de la sección #robots, con la galería a un lado y
   la ficha al otro, alternando el lado. El orden del marcado es
   siempre el mismo —galería y luego ficha— y la inversión se hace con
   «row-reverse» solo en escritorio; así en móvil las dos filas se
   apilan igual y el lector no se encuentra un orden distinto en cada
   una.

   Las filas viven DENTRO del grupo de la sección desde que la sección
   lleva fondo gris: como grupos hermanos, el margen entre ellas se
   veía como una franja blanca partiendo el gris.
   ------------------------------------------------------------------ */

/*
 * La fila ya no va a sangre. Iba de borde a borde de la ventana mientras el
 * resto de la pagina vive en 1200 px, y esos 240 px de mas se convertian en
 * hueco: medido a 1440, 154 px de vacio entre la foto y el texto de Pepper.
 * Ahora se contiene en el mismo ancho que todo lo demas y las dos columnas
 * quedan separadas solo por el hueco de la rejilla.
 */
.roborent-robot__fila {
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
}

/*
 * Mismo ancho que el resto de la pagina. La regla nacio cuando las filas eran
 * grupos sueltos y el layout constreñido les daba los 1510 px de theme.json;
 * ahora estan dentro de la seccion, pero se conserva y se ha vuelto a medir:
 * sin ella el contenedor volveria a decidir el ancho. La clase repetida y el
 * ancla en html son para ganarle a la regla de layout, que es (0,1,0).
 */
html .roborent-robot.roborent-robot {
	max-width: 1200px;
	margin-inline: auto;
}

/*
 * La separacion entre las dos filas va en linea en el post 13 —soporte de
 * espaciado del bloque, preset 70— y no aqui. Nacio como la unica salida a
 * una regla de Newfold que apila a ras los hermanos tematizados directos de
 * .entry-content; ahora que las filas estan dentro de la seccion esa regla ya
 * no las alcanza, pero el margen en linea sigue funcionando y no hay motivo
 * para moverlo.
 *
 * Sin padding-inline propio por debajo de 1240 px: dentro de la seccion ya se
 * lo da «.roborent-seccion > *», y sumar los dos dejaba las fotos mas metidas
 * que el titulo.
 */

/*
 * Sin panel gris: la foto llena el marco. Los archivos ya vienen recortados a
 * 4:3, asi que «cover» no vuelve a recortar nada salvo donde la columna de
 * texto es mas alta que la foto —entre 782 y 1050 px—, y ahi estirar es
 * preferible a dejar aire.
 */
.roborent-robot__panel {
	display: block;
	padding: 0;
	overflow: hidden;
}

.roborent-robot__panel figure {
	margin: 0;
}

/*
 * Sin sangria propia: la fila ya esta dentro del contenedor, asi que el texto
 * alinea solo con el H2 de la seccion. Apilada, se separa de la foto por
 * arriba.
 */
.roborent-robot__ficha {
	padding: 0;
}

@media (max-width: 781px) {

	.roborent-robot__ficha {
		padding-top: 1.75rem;
	}
}

.roborent-robot__ficha > * {
	max-width: 34rem;
}

/*
 * El nombre del robot iba con nfd-text-xl, o sea a 38 px: lo mismo que el H2
 * «Conoce nuestra oferta de robots», y el ojo no distinguia que encabezaba a
 * que. A 28 px fijos queda por debajo del H2 y por encima de los 24 px de las
 * cajas de «Tambien ofrecemos», que son de menor jerarquia, a todos los
 * anchos. Se probo el preset fluido «large» y por debajo de 1050 px bajaba de
 * 24: los protagonistas quedaban mas pequenos que los secundarios. Peso y
 * ajuste de linea, los mismos que da nfd-text-xl.
 */
.roborent-robot__nombre {
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

@media (min-width: 782px) {

	.roborent-robot--invertida .roborent-robot__fila {
		flex-direction: row-reverse;
	}

	.roborent-robot__panel {
		min-height: 0;
	}
}

/* ------------------------------------------------------------------
   9. Carrusel de clientes (#clientes)
   ------------------------------------------------------------------

   Manual: solo flechas, sin autoplay y sin avanzar al pasar el cursor,
   que genera movimiento accidental cuando alguien solo está bajando.

   La pista es un contenedor con desplazamiento nativo. Eso da gratis el
   swipe táctil y el desplazamiento con teclado, y hace que la sección
   siga siendo usable sin JavaScript: las flechas solo lo empujan.

   Los logos flotan sobre el fondo: sin recuadros, sin bordes y sin
   sombras. En gris, y a color al pasar el cursor.
   ------------------------------------------------------------------ */

.roborent-clientes {
	position: relative;
}

/*
 * Sin scroll-snap, a diferencia de las galerias de robot.
 *
 * Es incompatible con el bucle: con «scroll-snap-type: x mandatory» el
 * navegador recuerda a que logo estaba enganchado y deshace el salto de
 * tanda. Medido: la pista aceptaba la posicion nueva y 600 ms despues volvia
 * sola a la anterior, tanto asignando en seco como suspendiendo el anclaje
 * durante el salto y reponiendolo. En una tira de logos el anclaje no aporta
 * nada —las flechas ya avanzan por grupos enteros— y el bucle si.
 */
.roborent-clientes__pista {
	display: flex;
	gap: 2rem;
	align-items: center;
	overflow-x: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;
}

.roborent-clientes__pista::-webkit-scrollbar {
	display: none;
}

.roborent-clientes__pista:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 4px;
}

.roborent-clientes__logo {
	/*
	 * Cinco visibles, no seis. CLAUDE.md admite 5-6, y con seis logos y seis
	 * huecos no sobraria nada que desplazar: las flechas se ocultarian solas
	 * y el carrusel quedaria inerte. Con cinco, el sexto asoma e invita.
	 */
	flex: 0 0 calc((100% - 8rem) / 5); /* cinco visibles, cuatro huecos de 2rem */
	margin: 0;
}

.roborent-clientes__logo img {
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.2s, opacity 0.2s;
}

.roborent-clientes__logo img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* Flechas: las pone el script, porque son navegación y no contenido. */

.roborent-clientes__flecha {
	position: absolute;
	top: 50%;
	width: 2.75rem;   /* 44 px: el minimo tactil */
	height: 2.75rem;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--secondary-foreground);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.roborent-clientes__flecha:hover:not(:disabled) {
	border-color: var(--wp--preset--color--secondary-foreground);
}

/*
 * Con el bucle las flechas no se apagan nunca. El estado se queda por si
 * algun dia quedan tan pocos logos que el bucle se desactive solo.
 */
.roborent-clientes__flecha:disabled {
	opacity: 0.35;
	cursor: default;
}

.roborent-clientes__flecha--antes {
	left: -3.25rem;
}

.roborent-clientes__flecha--despues {
	right: -3.25rem;
}

/*
 * Por debajo de 1360 px no hay sitio fuera y las flechas se meten dentro.
 * Pegadas al borde exacto, sin desplazamiento negativo: con -0.5rem se salían
 * 8 px de la ventana y la página desbordaba en horizontal a todos los anchos
 * por debajo de 1440.
 *
 * Y la pista se estrecha para dejarles ese carril: si no, la flecha se queda
 * encima del primer y del último logo. Con los logos de relleno no se veía
 * —eran más estrechos que su hueco—; con los reales, que llenan el marco, sí.
 */
@media (max-width: 1360px) {

	.roborent-clientes {
		padding-inline: 3.75rem;
	}

	/*
	 * Con left/right en 0 la flecha queda pegada al filo de la ventana: a
	 * 1200 px la caja de la sección empieza en x=0 y se veía cortada. Medio
	 * rem la separa sin invadir la pista, que arranca 12 px más adentro.
	 */
	.roborent-clientes__flecha--antes {
		left: 0.5rem;
	}

	.roborent-clientes__flecha--despues {
		right: 0.5rem;
	}
}

/*
 * Escalera de logos visibles. Sin los pasos intermedios se pasaba de cinco a
 * dos y medio de golpe en 782 px, y a 768 px la fila quedaba desangelada.
 */
@media (max-width: 1049px) {

	.roborent-clientes__logo {
		flex: 0 0 calc((100% - 6rem) / 4);
	}
}

@media (max-width: 900px) {

	.roborent-clientes__logo {
		flex: 0 0 calc((100% - 4rem) / 3);
	}
}

@media (max-width: 600px) {

	/*
	 * A 390 px, los 104 px de carril para las flechas se comerían un tercio
	 * de la tira. Bajan debajo, centradas, y la pista recupera el ancho
	 * entero. Con el bucle y el arrastre, ahí siguen a mano.
	 */
	.roborent-clientes {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
		padding-inline: 0;
	}

	/*
	 * La separacion baja a la mitad al pasar a tres logos: cada 8 px de hueco
	 * que se ahorran aqui van al ancho de los logos, que es lo escaso.
	 */
	.roborent-clientes__pista {
		flex: 1 0 100%;
		gap: 0.75rem;
	}

	.roborent-clientes__flecha {
		position: static;
		transform: none;
	}

	/*
	 * Tres logos enteros, por decision del dueno. CLAUDE.md admite 2-3.
	 *
	 * Antes eran dos, y antes de eso dos y medio, que se descarto por
	 * ilegible: 120 px de hueco dejaban a Nestle en 32 px de alto. Tres a
	 * 390 px dan menos hueco todavia, asi que la separacion se recorta a
	 * 0.75rem para devolverle ancho al logo. Las alturas reales de tinta
	 * estan medidas una a una en ESTADO.md.
	 */
	.roborent-clientes__logo {
		flex: 0 0 calc((100% - 1.5rem) / 3);
	}
}

/*
 * Cierre de #clientes: título y botón, centrados.
 *
 * Se llama «clientes-cierre» y no «cierre» a secas: «roborent-cierre» ya
 * existía en #contacto —es el cierre de la página— y la clase repetida le
 * colaba a esa sección el centrado y el margen de esta.
 *
 * Va DENTRO de la sección de clientes, no entre las dos secciones. Así
 * pertenece a lo que se acaba de ver —las marcas— y no puede leerse como la
 * entradilla de «También ofrecemos». La separación de abajo la dan los
 * rellenos de las dos secciones, que ya existen.
 *
 * Sin recuadro ni fondo: lo único con peso visual es el botón, que ya es
 * sólido. El aire de arriba es lo que lo despega de la tira de logos.
 */

.roborent-clientes-cierre {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	text-align: center;
}

.roborent-clientes-cierre h3 {
	margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------------
   10. También ofrecemos
   ------------------------------------------------------------------

   Rejilla de seis cajas con jerarquía visual menor que #robots, pero
   con el texto íntegro: aquí están los términos que sostienen el
   posicionamiento y no se recorta ni uno.

   Sin recuadros ni bordes. Las seis fotos vienen recortadas a 4:3 desde
   el original, con la ventana puesta a mano en cada una, y llenan el
   marco. La de Mr. Kondor es un caso aparte: en vez de recortarla se
   conserva la figura entera y se extiende su propio fondo de estudio.
   ------------------------------------------------------------------ */

.roborent-ofrecemos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem 2.5rem;
	margin-top: 2.5rem;
}

.roborent-oferta > * {
	margin-block: 0;
}

/*
 * La rejilla es un grupo «de flujo» de WordPress, que da margen superior a
 * todos los hijos menos al primero. Dentro de una rejilla ese margen no
 * separa nada: desplaza la caja dentro de su celda. Medido a 1440: Mr. Kondor
 * arrancaba 20 px mas arriba que Condor Machine y Monster Hand.
 */
.roborent-ofrecemos > .roborent-oferta {
	margin-block-start: 0;
}

/* Las seis, del mismo tamano y llenas, sin fondo detras. */
.roborent-oferta__panel {
	margin: 0 0 1.25rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 6px;   /* el mismo radio que la foto del hero y las galerias */
}

.roborent-oferta__panel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.roborent-oferta h3 {
	margin-bottom: 0.6rem;
}

@media (max-width: 1049px) {

	.roborent-ofrecemos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {

	.roborent-ofrecemos {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* ------------------------------------------------------------------
   11. Consultas frecuentes (#preguntas)
   ------------------------------------------------------------------

   Acordeón nativo <details>/<summary>: cero JavaScript. Las seis
   respuestas viajan completas en el HTML servido aunque se vean
   plegadas, que es la condición para que Google las lea.

   El CSS de Newfold ya pone el icono «+» circular a la derecha y lo
   gira 45° al abrir, siempre que el acordeón esté dentro de un
   .nfd-container. Aquí solo se añaden el ancho completo, las líneas
   separadoras y el área de pulsación.
   ------------------------------------------------------------------ */

.roborent-preguntas {
	margin-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--borde);
}

.roborent-pregunta {
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.roborent-pregunta > summary {
	padding: 1.15rem 0;
	cursor: pointer;
	list-style: none;
}

/* El encabezado va dentro del summary para no perder los seis H3. */
.roborent-pregunta > summary h3 {
	display: inline;
	margin: 0;
	font-weight: 600;
}

.roborent-pregunta > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: -3px;
}

/*
 * El «+» de Newfold es un circulo de 1em con el gris de borde y el signo en
 * negro, todo al 60 % de opacidad: apenas se ve. Se pasa al mismo circulo
 * celeste palido con signo en celeste oscuro que llevan los vistos de
 * #contacto, mas grande y sin transparencia. Los !important son obligados:
 * la regla de Newfold los lleva.
 *
 * El SVG es el mismo «plus» de Newfold, con el trazo en #165A83, el celeste
 * oscuro de la paleta: un data URI no hereda currentColor.
 */
.roborent-pregunta > summary::before {
	width: 1.5em !important;
	height: 1.5em !important;
	background-color: rgba(27, 111, 168, 0.13) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23165A83' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E") !important;
	background-size: 14px !important;
	opacity: 1 !important;
}

.roborent-pregunta > :not(summary) {
	max-width: 60rem;
	margin-block: 0 1rem;
}

.roborent-pregunta > :not(summary):first-of-type {
	margin-top: 0.25rem;
}

.roborent-pregunta > :last-child {
	margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------
   12. Contacto (#contacto)
   ------------------------------------------------------------------

   Una sola tarjeta con dos columnas: el titular a la izquierda y el
   contacto a la derecha, sobre un panel blanco dentro de la tarjeta.
   Ese es tambien el orden del marcado, asi que en movil se apilan
   igual: primero la promesa, luego el boton.

   La tarjeta ocupa exactamente el mismo ancho que el resto de la
   pagina —1200 px, de 120 a 1320 a 1440— para que la seccion no se vea
   mas estrecha que las demas.
   ------------------------------------------------------------------ */

html .roborent-contacto.roborent-contacto {
	max-width: 1200px;
	margin-inline: auto;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 12px;
	background: var(--wp--preset--color--secondary-background);
}

/*
 * Por debajo de 1240 px el resto de la pagina se separa del borde con el
 * relleno de la seccion. La tarjeta hace lo mismo por el ancho, porque su
 * propio «margin-inline: auto» pisaria cualquier margen que se le pusiera
 * aparte.
 */
@media (max-width: 1240px) {

	html .roborent-contacto.roborent-contacto {
		max-width: calc(100% - 2 * var(--wp--preset--spacing--30));
	}
}

.roborent-contacto__cols {
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

@media (min-width: 782px) {

	/*
	 * WordPress iguala las columnas con
	 *   .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
	 *   { flex-basis: 0; flex-grow: 1 }
	 * que es (0,3,0). Para dar mas sitio al texto que al contacto hay que
	 * ganarle: de ahi el ancla en html y las clases repetidas, en vez de un
	 * !important.
	 */
	html .roborent-contacto .roborent-contacto__cols > .roborent-contacto__lado {
		flex: 0 0 22rem;
	}

	html .roborent-contacto .roborent-contacto__cols > .roborent-contacto__texto {
		flex: 1 1 auto;
	}
}

.roborent-contacto__texto > *:first-child {
	margin-top: 0;
}

.roborent-contacto__texto h2 {
	margin-bottom: 0.75rem;
	text-wrap: balance;
}

.roborent-contacto__texto > p {
	margin-block: 0;
	max-width: 34rem;
}

/* ---- Los tres puntos, con su visto en un circulo -------------------- */

.roborent-puntos {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.roborent-puntos > p,
.roborent-puntos .roborent-marcas {
	display: flex;
	gap: 0.65rem;
	align-items: center;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

/*
 * El visto del segundo punto NO lo pone el CSS: es B092, un bloque de texto
 * del inventario que dice «✓» y que no se puede borrar. Asi que a ese se le
 * da forma de circulo, y a los otros dos se les pone uno igual con ::before.
 * Se ven identicos y no se pierde el bloque.
 */
.roborent-puntos > p::before,
.roborent-puntos .roborent-marcas > p:first-child {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	margin: 0;
	border-radius: 999px;
	background: rgba(27, 111, 168, 0.13);
	color: var(--wp--preset--color--primary);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

/* El caracter, no una secuencia de escape: «¹3» acaba escrito como
   octal y sale un «13» en pantalla. Ya paso con el guion del hero. */
.roborent-puntos > p::before {
	content: "✓";
}

.roborent-puntos .roborent-marcas > p:last-child {
	margin: 0;
}

/* ---- El panel del contacto ----------------------------------------- */

.roborent-contacto__lado {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: 6px;   /* el radio de las fotos; la tarjeta que lo envuelve va a 12 */
	background: var(--wp--preset--color--base);
}

/* El avatar y el título, en la misma línea. */
.roborent-contacto__cabecera {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	margin-bottom: 1rem;
}

.roborent-contacto__avatar {
	flex: 0 0 auto;
	margin: 0;
}

.roborent-contacto__avatar img {
	width: 56px;
	height: 56px;
	object-fit: cover;
}

.roborent-contacto__cabecera p {
	margin: 0;
	text-wrap: balance;
}

/*
 * «¿Necesitas mas informacion?» iba con nfd-text-lg, 24 px: lo mismo que el
 * H2 de la tarjeta, y el panel competia con el titular. Un escalon por
 * debajo, con el peso de los encabezados.
 */
.roborent-contacto__titulo {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
}

.roborent-contacto__lado > p {
	margin-block: 0 1.25rem;
}

/* Botón a todo el ancho del panel, como manda el diseño aprobado. */
.roborent-contacto__lado .wp-block-buttons,
.roborent-contacto__lado .wp-block-button {
	width: 100%;
}

.roborent-contacto__lado .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
}

/* ------------------------------------------------------------------
   13. Galerías de las fichas de robot
   ------------------------------------------------------------------

   Mismo criterio que el carrusel de clientes: la pista es un contenedor
   con desplazamiento nativo y scroll-snap, así que el swipe táctil y el
   recorrido con teclado salen gratis y la sección sigue siendo usable
   sin JavaScript —se ve un desplazador horizontal con todas las fotos—.

   El script solo añade las flechas y los puntos, que son navegación y no
   contenido. Manual: ni autoplay ni avance al pasar el cursor.
   ------------------------------------------------------------------ */

.roborent-galeria {
	position: relative;
}

.roborent-galeria__pista {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	border-radius: 6px;   /* la pista recorta, asi que el radio va aqui y no en cada foto */
}

.roborent-galeria__pista::-webkit-scrollbar {
	display: none;
}

.roborent-galeria__pista:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: -3px;
}

.roborent-galeria__foto {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

.roborent-galeria__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/*
 * Flechas superpuestas sobre la foto, a los extremos. Fondo blanco sólido
 * para que se lean sobre cualquier foto, y sombra para separarlas del
 * fondo cuando la foto es clara.
 */
.roborent-galeria__flecha {
	position: absolute;
	top: 50%;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}

.roborent-galeria__flecha:hover:not(:disabled) {
	background: var(--wp--preset--color--secondary-background);
}

/*
 * Las flechas del hero, en cambio, casi no se ven: sin circulo, sin fondo,
 * solo el trazo en blanco medio transparente con una sombra minima para que
 * no desaparezca sobre una foto clara. No son para navegar; estan por si
 * alguien quiere. El boton conserva sus 44 px de area de pulsacion.
 */
.roborent-carrusel__flecha {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--base);
	opacity: 0.55;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
	transition: opacity 0.2s;
	cursor: pointer;
}

.roborent-carrusel__flecha svg {
	width: 1.75rem;
	height: 1.75rem;
	stroke-width: 2.5;
}

.roborent-carrusel__flecha:hover,
.roborent-carrusel__flecha:focus-visible {
	opacity: 0.95;
}

.roborent-carrusel__flecha:focus-visible {
	outline-color: var(--wp--preset--color--base);
}

.roborent-galeria__flecha:disabled {
	opacity: 0.45;
	cursor: default;
}

.roborent-galeria__flecha--antes,
.roborent-carrusel__flecha--antes {
	left: 0.85rem;
}

.roborent-galeria__flecha--despues,
.roborent-carrusel__flecha--despues {
	right: 0.85rem;
}

/*
 * Puntos: uno por foto, sobre una pastilla blanca para que se vean.
 *
 * El boton mide 24 px —el minimo de pulsacion— y el punto que se ve, 7 px,
 * lo dibuja ::before en el centro. Sin hueco entre botones: el aire ya lo
 * pone el area invisible de cada uno.
 */
.roborent-galeria__puntos {
	position: absolute;
	bottom: 0.85rem;
	left: 50%;
	display: flex;
	gap: 0;
	padding: 0.15rem 0.35rem;
	transform: translateX(-50%);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.roborent-galeria__punto {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.roborent-galeria__punto::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: var(--wp--preset--color--borde);
}

.roborent-galeria__punto[aria-current="true"]::before {
	background: var(--wp--preset--color--primary);
}

/*
 * En movil las flechas conservan sus 44 px: antes bajaban a 36, por debajo
 * del minimo tactil. Solo se acercan un poco al borde.
 */
@media (max-width: 600px) {

	.roborent-galeria__flecha--antes,
	.roborent-carrusel__flecha--antes {
		left: 0.5rem;
	}

	.roborent-galeria__flecha--despues,
	.roborent-carrusel__flecha--despues {
		right: 0.5rem;
	}
}

/* ------------------------------------------------------------------
   14. Pie de pagina
   ------------------------------------------------------------------ */

/*
 * El logotipo del pie se gobierna por alto, como el de la cabecera, y el
 * ancho sale solo. Mas pequeno que arriba: aqui no tiene que competir con
 * nada.
 */
.roborent-logo-pie img {
	width: auto;
	height: 56px;
	max-width: 100%;
}

.roborent-logo-pie {
	margin-bottom: 0.75rem;
}

/* El lema va pegado al logotipo y separado de la descripcion. */
.roborent-pie__lema {
	margin-block: 0 0.5rem;
}