/* Portada · «Día a día» (el blog) y «¿Qué es Hara?» como franja horizontal.
   Fichero aparte para no depender de la caché de hara.css (su versión es fija). Usa las variables de hara.css. */

/* -------------------------------------------------------------------------
   Día a día
   ---------------------------------------------------------------------- */

.hara-dia {
	background: var(--hara-fondo);
	padding: clamp(24px, 2.6vw, 36px) 0 clamp(56px, 6.5vw, 88px);
}

/* Presentación en una sola fila: «El blog de Centro Hara» y «Día a día» a la izquierda, la frase a la derecha.
   El <div> que agrupa eyebrow, título y frase se deshace (display: contents) para repartirlos en la rejilla. */
.hara-dia__cab {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 40px;
	align-items: end;
	margin-bottom: 20px;
}

.hara-dia__cab > div { display: contents; }
.hara-dia__cab .hara-eyebrow { grid-column: 1; grid-row: 1; margin: 0 0 2px; }
.hara-dia__titulo { grid-column: 1; grid-row: 2; margin: 0; font-size: clamp(34px, 5vw, 52px); }

.hara-dia__sub {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0 0 6px;
	color: var(--hara-tinta-2);
}

/* en escritorio, la frase va en una sola línea; con el botón «Ver todas» (5+ entradas) hace falta más ancho */
@media (min-width: 1000px) {
	.hara-dia__cab:not(:has(> a)) .hara-dia__sub { white-space: nowrap; }
}
@media (min-width: 1280px) {
	.hara-dia__sub { white-space: nowrap; }
}

.hara-dia__cab > a { grid-column: 3; grid-row: 1 / span 2; }
.hara-dia__cab:has(> a) { grid-template-columns: 1fr auto auto; }

.hara-dia__rejilla {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}

.hara-dia__rejilla--varias { grid-template-columns: 1.55fr 1fr; }

.hara-dia__destacada,
.hara-dia__ficha {
	color: inherit;
	background: var(--hara-blanco);
	box-shadow: var(--hara-sombra);
	min-width: 0;
}

.hara-dia__destacada:hover,
.hara-dia__ficha:hover { color: inherit; }

.hara-dia__destacada {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	border-radius: 22px;
	overflow: hidden;
}

.hara-dia__rejilla--varias .hara-dia__destacada { grid-template-columns: 1fr; }

.hara-dia__portada {
	position: relative;
	min-height: 380px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(120% 90% at 85% 10%, #c27be0 0, transparent 55%),
		radial-gradient(90% 80% at 10% 100%, #5b1f7e 0, transparent 60%),
		#3a1650;
}

.hara-dia__portada--foto { padding: 0; background: var(--hara-lavanda); }
.hara-dia__portada--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hara-dia__marca {
	position: relative;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .85;
}

.hara-dia__portada q {
	position: relative;
	max-width: 15ch;
	font-family: var(--hara-display);
	font-style: italic;
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1.15;
	quotes: "«" "»";
	text-wrap: balance;
}

.hara-dia__aro {
	position: absolute;
	right: -70px;
	top: -70px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .35);
}

.hara-dia__aro--b {
	right: -30px;
	top: -30px;
	width: 180px;
	height: 180px;
	border-color: rgba(255, 255, 255, .2);
}

.hara-dia__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	min-width: 0;
	padding: 36px 36px 32px;
}

.hara-dia__texto h3 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; }
.hara-dia__texto p { margin: 0; }
.hara-dia__texto > p:not(.hara-dia__meta) { color: var(--hara-tinta-2); }

.hara-dia__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	color: var(--hara-tenue);
}

.hara-dia__cat {
	padding: 4px 11px;
	border-radius: 99px;
	background: var(--hara-lavanda);
	color: var(--hara-violeta);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hara-dia__mas {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-weight: 700;
	color: var(--hara-violeta);
}

.hara-dia__mas::after { content: "→"; transition: transform .2s; }
.hara-dia__destacada:hover .hara-dia__mas::after { transform: translateX(4px); }

.hara-dia__lado { display: grid; gap: 24px; grid-auto-rows: 1fr; }

.hara-dia__ficha {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 18px;
	align-items: center;
	padding: 14px;
	border-radius: 18px;
}

.hara-dia__mini {
	display: block;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(140deg, #c27be0, #5b1f7e);
}

.hara-dia__mini--1 { background: linear-gradient(140deg, #f0b99a, #a83ccc); }
.hara-dia__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hara-dia__ficha h3 { margin: 6px 0 0; font-size: 21px; font-weight: 500; }
.hara-dia__ficha .hara-dia__meta { font-size: 12.5px; }

.hara-dia__destacada:focus-visible,
.hara-dia__ficha:focus-visible { outline: 3px solid var(--hara-violeta-cl); outline-offset: 3px; }

/* -------------------------------------------------------------------------
   ¿Qué es Hara? — franja de una sola mirada (~100 px en escritorio)
   ---------------------------------------------------------------------- */

.hara-quees {
	position: relative;
	background: var(--hara-tinte);
	border-block: 1px solid var(--hara-linea);
}

.hara-quees__fila {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 40px;
	align-items: center;
	padding-block: 18px;
}

.hara-quees__titulo { margin: 0; font-size: 28px; white-space: nowrap; }

.hara-quees__texto {
	columns: 2;
	column-gap: 36px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--hara-tinta-2);
}

/* los párrafos de la página Inicio corren seguidos en dos columnas: una franja, no un bloque */
.hara-quees__texto p { display: inline; margin: 0; }
/* AddToAny deja en el contenido de Inicio un contenedor vacío que sumaba 16 px de hueco a la franja */
.hara-quees .addtoany_share_save_container { display: none; }
.hara-quees__texto p + p::before { content: " "; }

/* Por debajo de 1000 px la frase no cabe en una línea junto al título: la cabecera se apila (antes se estrechaba el título). */
@media (max-width: 999px) {
	.hara-dia__cab,
	.hara-dia__cab:has(> a) { grid-template-columns: 1fr; row-gap: 6px; }
	.hara-dia__sub,
	.hara-dia__cab > a { grid-column: 1; grid-row: auto; margin: 4px 0 0; justify-self: start; }
}

/* Escritorio estrecho: con la foto al lado del texto la caja queda tan estrecha que se cortaba una de las dos caras del slide.
   Con una sola entrada la tarjeta se apila (foto 2:1 arriba, texto debajo) hasta que haya sitio. */
@media (max-width: 1100px) {
	.hara-dia__rejilla:not(.hara-dia__rejilla--varias) .hara-dia__destacada { grid-template-columns: 1fr; }
	.hara-dia__rejilla:not(.hara-dia__rejilla--varias) .hara-dia__portada--foto { min-height: 0; aspect-ratio: 2 / 1; }
	.hara-dia__rejilla:not(.hara-dia__rejilla--varias) .hara-dia__portada:not(.hara-dia__portada--foto) { min-height: 300px; }
}

@media (max-width: 900px) {
	.hara-dia__destacada { grid-template-columns: 1fr; }
	.hara-dia__portada { min-height: 260px; }
	/* con foto, en pantallas estrechas la caja es apaisada (16:9) para que quepan las dos caras del slide */
	.hara-dia__portada--foto { min-height: 0; aspect-ratio: 16 / 9; }
	.hara-dia__rejilla--varias { grid-template-columns: 1fr; }
	.hara-dia__texto { padding: 26px 22px; }
	.hara-dia__ficha { grid-template-columns: 88px 1fr; }
	.hara-quees__fila { grid-template-columns: 1fr; gap: 8px; }
	.hara-quees__titulo { white-space: normal; font-size: 24px; }
	.hara-quees__texto { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.hara-dia__mas::after { transition: none; }
}

/* -------------------------------------------------------------------------
   Osita tentetieso (decorativa): a la derecha de la franja, apoyada en su borde inferior. Se balancea con una oscilación
   amortiguada, como el juguete, y siempre vuelve a su centro. Sin vídeo ni JS. Quieta si se pide «reducir movimiento».
   ---------------------------------------------------------------------- */

.hara-osa {
	--o1: #c98be3;
	--o2: #8c2bae;
	--ob: #f9e9dc;
	display: none;
	position: relative;
	width: 104px;
	height: 50px;
	align-self: center;
	pointer-events: none;
}

.hara-osa svg {
	position: absolute;
	right: 0;
	bottom: -14px;
	width: 96px;
	height: auto;
	overflow: visible;
}

.hara-osa .o1 { fill: var(--o1); }
.hara-osa .o2 { fill: var(--o2); }
.hara-osa .ob { fill: var(--ob); }
.hara-osa .ocontorno { fill: none; stroke: var(--o2); stroke-width: 3; opacity: .55; }
.hara-osa .oblanco { fill: #fff; }
.hara-osa .onariz { fill: #4a2a55; }
.hara-osa .oboca { fill: none; stroke: #4a2a55; stroke-width: 2.4; stroke-linecap: round; }
.hara-osa .omejilla { fill: #f0a1c7; opacity: .7; }
.hara-osa .olazo { fill: var(--hara-violeta); }
.hara-osa .olazo2 { fill: var(--hara-violeta-cl); }
.hara-osa__ojos circle { fill: #241c2b; }
.hara-osa__sombra { fill: #e4d6ee; transform-box: fill-box; transform-origin: 50% 50%; animation: hara-osa-sombra 7s ease-in-out infinite; }
.hara-osa__cuerpo { transform-box: fill-box; transform-origin: 50% 92%; animation: hara-osa-balanceo 7s ease-in-out infinite; }
.hara-osa__ojos { transform-box: fill-box; transform-origin: 50% 50%; animation: hara-osa-parpadeo 7s infinite; }

@keyframes hara-osa-balanceo {
	0%, 4% { transform: rotate(0); }
	11% { transform: rotate(15deg); }
	22% { transform: rotate(-11deg); }
	33% { transform: rotate(7.5deg); }
	43% { transform: rotate(-4.5deg); }
	52% { transform: rotate(2.6deg); }
	60% { transform: rotate(-1.4deg); }
	68% { transform: rotate(.6deg); }
	76%, 100% { transform: rotate(0); }
}

@keyframes hara-osa-sombra {
	0%, 4% { transform: translateX(0) scaleX(1); }
	11% { transform: translateX(5px) scaleX(1.08); }
	22% { transform: translateX(-4px) scaleX(1.06); }
	33% { transform: translateX(2.5px) scaleX(1.03); }
	43% { transform: translateX(-1.5px) scaleX(1.02); }
	52%, 100% { transform: translateX(0) scaleX(1); }
}

@keyframes hara-osa-parpadeo {
	0%, 44%, 48%, 100% { transform: scaleY(1); }
	46% { transform: scaleY(.1); }
}

/* Solo en escritorio ancho: ahí la franja se queda en ~108 px. Entre 901 y 1220 px cualquier columna extra ensancha la franja
   (el texto pasa a más líneas), así que la osita no sale. */
@media (min-width: 1221px) {
	.hara-quees__fila { grid-template-columns: auto 1fr 104px; column-gap: 0; }
	.hara-quees__titulo { margin-right: 40px; }
	.hara-osa { display: block; }
}

/* Móvil: osita pequeña a la derecha del título, sin sumar altura a la franja. */
@media (max-width: 900px) {
	.hara-quees__fila { grid-template-columns: 1fr 72px; }
	.hara-quees__titulo { grid-column: 1; grid-row: 1; }
	.hara-quees__texto { grid-column: 1 / -1; grid-row: 2; }
	.hara-osa { display: block; grid-column: 2; grid-row: 1; width: 72px; height: 28px; }
	.hara-osa svg { width: 68px; bottom: -10px; }
}

@media (prefers-reduced-motion: reduce) {
	.hara-osa__cuerpo, .hara-osa__sombra, .hara-osa__ojos { animation: none; }
}