/* ============================================================
   Simple Storage — Blog (componentes propios)  ·  v2
   Diseño del blog sobre Elementor Pro Theme Builder.
   Paleta del Kit global:
     primary  #2315FA   secondary #FF0055   accent #130AAB
     ink      #111318 / #343A44 / #5C6470
     tints    #F2F1FF (blue-050) #E0DDFF (blue-100)
              #F7F9FB (ink-050)  #EEF1F4 (ink-100)

   Los bloques estructurales se fijan por el ID de elemento de Elementor
   (estable en la plantilla) porque los _css_classes en contenedores no se
   renderizan al editar el meta por CLI. Cache-busting por filemtime.

   Mapa de IDs:
     single  561b38a=fila  2746869=contenido  0cbd155=lateral  f1d9043=tarjeta CTA
             (botones lateral: 9abbfd8/9a20593/e023d37 sucursal · b1d349e tel)
     archivo d39f637=hero   b533bc0=grid posts   937e1e2=CTA inferior
             (botones CTA: 7ba3aeb/0458283/59f2f2c sucursal · c036f78 tel)
   ============================================================ */

:root{
	--ss-primary:#2315FA;
	--ss-secondary:#FF0055;
	--ss-accent:#130AAB;
	--ss-ink:#111318;
	--ss-ink-700:#343A44;
	--ss-ink-500:#5C6470;
	--ss-line:#EEF1F4;
	--ss-tint:#F2F1FF;
	--ss-tint-100:#E0DDFF;
	--ss-paper:#F7F9FB;
	--ss-radius:18px;
	--ss-shadow:0 1px 2px rgba(17,19,24,.04), 0 14px 34px -16px rgba(17,19,24,.18);
	--ss-shadow-hover:0 2px 6px rgba(17,19,24,.06), 0 26px 52px -18px rgba(35,21,250,.30);
}

/* ============================================================
   1. LECTURA — cuerpo del post (.ss-prose)
   ============================================================ */
.ss-prose{ max-width:760px; color:var(--ss-ink-700); }
.ss-prose p,
.ss-prose li{ font-size:1.12rem; line-height:1.78; }
.ss-prose h2{
	font-size:1.62rem; line-height:1.25; letter-spacing:-.01em;
	color:var(--ss-ink); margin:2.1em 0 .55em; padding-top:.2em;
}
.ss-prose h3{ font-size:1.2rem; line-height:1.3; color:var(--ss-ink); margin:1.7em 0 .4em; }
.ss-prose h2 + p, .ss-prose h3 + p,
.ss-prose h2 + ul, .ss-prose h3 + ul{ margin-top:.3em; }
.ss-prose ul, .ss-prose ol{ padding-left:1.3em; margin:1em 0; }
.ss-prose li{ margin:.38em 0; }
.ss-prose li::marker{ color:var(--ss-primary); }
.ss-prose strong{ color:var(--ss-ink); font-weight:600; }
.ss-prose a{
	color:var(--ss-primary); text-decoration:underline;
	text-underline-offset:2px; text-decoration-thickness:1px;
}
.ss-prose a:hover{ color:var(--ss-accent); }
.ss-prose blockquote{
	margin:1.7em 0; padding:1.05em 1.3em; background:var(--ss-tint);
	border-left:3px solid var(--ss-primary); border-radius:0 12px 12px 0;
	color:var(--ss-ink-700);
}
.ss-prose blockquote p{ margin:.3em 0; }

/* ============================================================
   2. SINGLE POST — fila de 2 columnas + sidebar sticky
   ============================================================ */
.elementor-element-561b38a{ align-items:flex-start !important; }
.elementor-element-0cbd155{ align-self:flex-start !important; }
@media (min-width:1025px){
	.elementor-element-0cbd155{ position:sticky; top:24px; }
}

/* Tarjeta CTA lateral (columna estrecha → botones apilados, correcto aquí) */
.elementor-element-f1d9043{
	border-radius:var(--ss-radius);
	box-shadow:var(--ss-shadow);
	overflow:hidden;
}
.elementor-element-f1d9043::before{
	content:""; position:absolute; inset:0 0 auto 0; height:4px; z-index:2;
	background:linear-gradient(90deg,#7b74ff,var(--ss-secondary));
}
/* Teléfono en el sidebar como botón secundario (ghost) */
.elementor-element-b1d349e .elementor-button{
	background:transparent !important;
	border:1.5px solid rgba(255,255,255,.45) !important;
}
.elementor-element-b1d349e .elementor-button:hover{
	background:rgba(255,255,255,.12) !important;
	border-color:rgba(255,255,255,.75) !important;
}

/* ============================================================
   3. CABECERA DEL POST — breadcrumbs, título y meta
   ============================================================ */
.elementor-widget-breadcrumbs{ font-size:.86rem; }
.elementor-widget-breadcrumbs a{ color:var(--ss-ink-500); text-decoration:none; }
.elementor-widget-breadcrumbs a:hover{ color:var(--ss-primary); }
.elementor-widget-theme-post-title .elementor-heading-title{
	color:var(--ss-ink); letter-spacing:-.015em; line-height:1.15;
}
.elementor-widget-theme-post-info .elementor-icon-list-text,
.elementor-widget-theme-post-info .elementor-icon-list-icon i{ color:var(--ss-ink-500); }

/* ============================================================
   4. ARCHIVO — hero
   ============================================================ */
.elementor-element-d39f637{ text-align:center; }
/* Eyebrow dentro del contenedor del título (bloque normal → el margen sí
   reserva espacio; en el contenedor flex el ::before se encimaba). */
.elementor-element-86960f2 .elementor-heading-title::before{
	content:"Guías y recursos";
	display:block; color:var(--ss-primary);
	font-size:.76rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
	line-height:1; margin-bottom:18px;
}
.elementor-element-d39f637 .elementor-heading-title{
	color:var(--ss-ink); letter-spacing:-.025em; line-height:1.05;
	font-size:clamp(2.3rem,4.4vw,3.1rem);
}
.elementor-element-d39f637 .elementor-widget-text-editor{
	color:var(--ss-ink-500); font-size:1.1rem; line-height:1.6;
	max-width:600px; margin-inline:auto;
}

/* ============================================================
   4b. ARCHIVO — rejilla de tarjetas (altura uniforme + diseño)
   ============================================================ */
.elementor-widget-archive-posts .elementor-posts-container{
	display:grid !important;
	grid-template-columns:repeat(2,1fr);
	gap:28px;
}
.elementor-widget-archive-posts .elementor-post{
	display:flex; flex-direction:column; height:100%;
	position:relative; overflow:hidden;
	background:#fff; border:1px solid var(--ss-line);
	border-radius:var(--ss-radius); box-shadow:var(--ss-shadow);
	padding:32px 32px 30px;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.elementor-widget-archive-posts .elementor-post::before{
	content:""; position:absolute; left:0; top:0; width:100%; height:3px;
	background:linear-gradient(90deg,var(--ss-primary),var(--ss-secondary));
	transform:scaleX(0); transform-origin:left; transition:transform .28s ease;
}
.elementor-widget-archive-posts .elementor-post:hover::before{ transform:scaleX(1); }
.elementor-widget-archive-posts .elementor-post:hover{
	transform:translateY(-5px);
	box-shadow:var(--ss-shadow-hover);
	border-color:var(--ss-tint-100);
}
.elementor-widget-archive-posts .elementor-post__text{
	display:flex; flex-direction:column; flex:1; padding:0;
}
/* Fecha como eyebrow (arriba del título) */
.elementor-widget-archive-posts .elementor-post__meta-data{
	order:-1; margin:0 0 12px;
	color:var(--ss-primary); font-size:.72rem; font-weight:800;
	letter-spacing:.09em; text-transform:uppercase;
	border:0; padding:0;
}
.elementor-widget-archive-posts .elementor-post__title{
	font-size:1.3rem; line-height:1.3; margin:0 0 .55em; letter-spacing:-.01em;
}
.elementor-widget-archive-posts .elementor-posts-container .elementor-post__title a{
	color:var(--ss-ink); transition:color .15s ease;
}
.elementor-widget-archive-posts .elementor-posts-container .elementor-post__title a:hover{
	color:var(--ss-primary);
}
.elementor-widget-archive-posts .elementor-post__excerpt{ margin:0 0 22px; }
.elementor-widget-archive-posts .elementor-post__excerpt p{
	color:var(--ss-ink-500); line-height:1.62; font-size:.99rem; margin:0;
}
.elementor-widget-archive-posts .elementor-post__read-more{
	margin-top:auto; align-self:flex-start;
	display:inline-flex; align-items:center; gap:.4em;
	color:var(--ss-primary); font-weight:700; font-size:.95rem; text-decoration:none;
	padding:10px 18px; border-radius:999px; background:var(--ss-tint);
	transition:background .16s ease, color .16s ease, gap .16s ease;
}
.elementor-widget-archive-posts .elementor-post__read-more:hover{
	background:var(--ss-primary); color:#fff; gap:.65em;
}

/* ============================================================
   4c. ARCHIVO — CTA inferior (tarjeta contenida, botones en fila)
   ============================================================ */
.elementor-element-937e1e2{
	max-width:1140px !important;
	width:auto !important;
	margin-left:auto !important;
	margin-right:auto !important;
	margin-top:28px;
	margin-bottom:48px;
	padding:56px 48px !important;
	border-radius:var(--ss-radius);
	overflow:hidden;
	text-align:center;
	box-shadow:0 30px 60px -24px rgba(35,21,250,.45);
}
.elementor-element-937e1e2::before{
	content:""; position:absolute; inset:0 0 auto 0; height:4px; z-index:2;
	background:linear-gradient(90deg,#7b74ff,var(--ss-secondary));
}
.elementor-element-937e1e2 .elementor-widget-heading{ margin-bottom:4px; }
.elementor-element-4296377 .elementor-heading-title{
	font-size:clamp(1.6rem,2.6vw,2rem); line-height:1.2; letter-spacing:-.01em;
}
/* Encabezado y texto ocupan TODA la fila (si se encogen, los botones se
   cuelan a su lado). El ancho del párrafo se limita por dentro. */
.elementor-element-4296377,
.elementor-element-a521aeb,
.elementor-element-c036f78{ flex:0 0 100% !important; max-width:100% !important; }
.elementor-element-a521aeb .elementor-widget-container{ max-width:560px; margin-inline:auto; }
.elementor-element-a521aeb,
.elementor-element-a521aeb *{ font-size:1.02rem; line-height:1.55; }
/* Los 3 botones de sucursal llenan su celda (misma anchura) */
.elementor-element-7ba3aeb,
.elementor-element-0458283,
.elementor-element-59f2f2c{ max-width:220px; margin-top:10px; }
.elementor-element-7ba3aeb .elementor-button,
.elementor-element-0458283 .elementor-button,
.elementor-element-59f2f2c .elementor-button{ width:100%; }
.elementor-element-937e1e2 .elementor-button{ padding:14px 18px; font-size:.98rem; }
/* Teléfono: secundario ghost, en su propia fila */
.elementor-element-c036f78{ margin-top:8px; }
.elementor-element-c036f78 .elementor-button{
	width:auto;
	background:transparent !important;
	border:1.6px solid rgba(255,255,255,.5) !important;
	padding:11px 22px;
}
.elementor-element-c036f78 .elementor-button:hover{
	background:rgba(255,255,255,.12) !important;
	border-color:rgba(255,255,255,.8) !important;
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
	/* Single: apilar contenido + sidebar */
	.elementor-element-561b38a{ flex-direction:column !important; }
	.elementor-element-2746869,
	.elementor-element-0cbd155{ width:100% !important; }
	.ss-prose{ max-width:none; }
}
@media (max-width:767px){
	.elementor-widget-archive-posts .elementor-posts-container{ grid-template-columns:1fr; }
	.elementor-element-937e1e2{
		margin-left:16px !important; margin-right:16px !important;
		margin-top:20px; margin-bottom:36px;
		padding:40px 24px !important;
	}
	.elementor-element-7ba3aeb,
	.elementor-element-0458283,
	.elementor-element-59f2f2c{ max-width:320px; }
}