/* Franquicia Showcase — estilos */
:root{
	--fs-primary:#1a2b4c;
	--fs-accent:#d4a017;
	--fs-text:#333;
	--fs-bg-light:#f7f7f9;
	--fs-radius:10px;
	/* Color para texto que va directamente sobre el fondo de la web
	   (sin tarjeta/caja detrás). Como el fondo del sitio es oscuro,
	   este texto debe ser claro para poder leerse. */
	--fs-text-claro:#f5f5f7;
	--fs-text-claro-suave:rgba(245,245,247,.78);
}

.fs-btn{
	display:inline-block;
	padding:12px 28px;
	border-radius:999px;
	font-weight:600;
	text-decoration:none;
	transition:all .2s ease;
	border:2px solid transparent;
	cursor:pointer;
	font-size:15px;
}
.fs-btn-primary{ background:var(--fs-primary) !important; color:#fff !important; }
.fs-btn-primary:hover{ background:#101d38 !important; color:#fff !important; }
.fs-btn-secundario{ background:transparent !important; border-color:var(--fs-primary) !important; color:var(--fs-primary) !important; }
.fs-btn-secundario:hover{ background:var(--fs-primary) !important; color:#fff !important; }
.fs-btn-block{ display:block; width:100%; text-align:center; border:none; }

/* Intro (sin caja detrás: texto claro sobre el fondo oscuro de la web) */
.fs-intro{
	display:flex;
	align-items:center;
	gap:48px;
	max-width:1140px;
	margin:0 auto;
	padding:60px 20px;
	flex-wrap:wrap;
}
.fs-intro-texto{ flex:1 1 420px; }
.fs-intro .fs-eyebrow,
.fs-eyebrow{
	text-transform:uppercase;
	letter-spacing:2px;
	font-size:13px;
	font-weight:700;
	color:var(--fs-accent) !important;
	display:inline-block;
}
.fs-intro .fs-intro-texto h2,
.fs-intro-texto h2{
	font-size:clamp(28px,4vw,42px);
	margin:10px 0 20px;
	color:var(--fs-text-claro) !important;
	line-height:1.2;
}
.fs-intro .fs-intro-texto p,
.fs-intro-texto p{
	font-size:17px;
	line-height:1.7;
	color:var(--fs-text-claro-suave) !important;
	margin-bottom:28px;
}
.fs-intro-imagen{ flex:1 1 420px; }
.fs-intro-imagen img{
	width:100%;
	height:auto;
	border-radius:var(--fs-radius);
	display:block;
	box-shadow:0 20px 40px rgba(0,0,0,.12);
}

/* Grid de locales */
.fs-locales-grid{
	display:grid;
	gap:28px;
	max-width:1140px;
	margin:0 auto;
	padding:40px 20px 60px;
	grid-template-columns:repeat(3,1fr);
}
.fs-cols-1{ grid-template-columns:1fr; }
.fs-cols-2{ grid-template-columns:repeat(2,1fr); }
.fs-cols-4{ grid-template-columns:repeat(4,1fr); }

/* Cada local es una tarjeta con fondo blanco propio: forzamos el fondo
   y el color del texto para que el tema de la web no los anule. */
.fs-locales-grid .fs-local-card,
.fs-local-card{
	background:#ffffff !important;
	border-radius:var(--fs-radius);
	overflow:hidden;
	box-shadow:0 4px 18px rgba(0,0,0,.08);
	display:flex;
	flex-direction:column;
	min-height:120px; /* red de seguridad: la tarjeta nunca colapsa a 0 */
	transition:transform .2s ease, box-shadow .2s ease;
}
.fs-local-card:hover{
	transform:translateY(-4px);
	box-shadow:0 12px 28px rgba(0,0,0,.14);
}
/* Relación de aspecto 4:3 mediante padding-top en % en lugar de la
   propiedad "aspect-ratio": esta técnica funciona en todos los
   navegadores móviles, incluidos los antiguos/gama media que no
   soportan bien "aspect-ratio" (causa de que la tarjeta entera
   colapsara y desapareciera en algunos móviles). */
.fs-local-imagen{ position:relative; width:100%; height:0; padding-top:75%; overflow:hidden; background:#e9e9ee !important; flex-shrink:0; }
.fs-local-imagen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.fs-local-imagen-placeholder{ position:absolute; inset:0; width:100%; height:100%; background:linear-gradient(135deg,#e9e9ee,#dcdce4) !important; }

.fs-local-info{ padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; background:#ffffff !important; }
.fs-local-info h3{ margin:0 0 4px; font-size:19px; color:var(--fs-primary) !important; }
.fs-local-ciudad{ margin:0 0 10px; font-size:13px; font-weight:600; color:var(--fs-accent) !important; text-transform:uppercase; letter-spacing:1px; }
.fs-local-desc{ font-size:14.5px; color:var(--fs-text) !important; line-height:1.55; margin-bottom:14px; }
.fs-local-datos{ list-style:none; margin:0 0 18px; padding:0; font-size:14px; color:#555 !important; }
.fs-local-datos li{ margin-bottom:6px; color:#555 !important; }
.fs-local-info .fs-btn{ margin-top:auto; align-self:flex-start; padding:9px 20px; font-size:14px; }

.fs-sin-locales{ text-align:center; padding:60px 20px; color:var(--fs-text-claro-suave) !important; }

/* Formulario: título y descripción van directos sobre el fondo (claros),
   pero la caja del formulario en sí es clara (texto oscuro dentro). */
.fs-formulario-wrap{
	max-width:760px;
	margin:0 auto;
	padding:50px 20px 70px;
}
.fs-formulario-wrap h2{ color:var(--fs-text-claro) !important; font-size:clamp(24px,3.5vw,34px); margin-bottom:12px; }
.fs-formulario-wrap > p{ color:var(--fs-text-claro-suave) !important; margin-bottom:28px; line-height:1.6; }

.fs-formulario{
	background:var(--fs-bg-light) !important;
	border-radius:var(--fs-radius);
	padding:32px;
}
.fs-form-row{ display:flex; gap:20px; }
.fs-form-row .fs-form-group{ flex:1; }
.fs-form-group{ margin-bottom:20px; }
.fs-form-group label{ display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:var(--fs-primary) !important; }
.fs-form-group input,
.fs-form-group select,
.fs-form-group textarea{
	width:100%;
	padding:12px 14px;
	border:1px solid #d7d7de;
	border-radius:8px;
	font-size:15px;
	font-family:inherit;
	background:#ffffff !important;
	color:#222 !important;
	box-sizing:border-box;
}
.fs-form-group input:focus,
.fs-form-group select:focus,
.fs-form-group textarea:focus{
	outline:none;
	border-color:var(--fs-primary);
	box-shadow:0 0 0 3px rgba(26,43,76,.12);
}

.fs-alerta{ padding:14px 18px; border-radius:8px; margin-bottom:20px; font-size:14.5px; font-weight:500; }
.fs-alerta-ok{ background:#e5f6ea !important; color:#1e6b3a !important; border:1px solid #b8e6c4; }
.fs-alerta-error{ background:#fdeaea !important; color:#a3261f !important; border:1px solid #f3c2c0; }

/* Responsive */
@media (max-width:900px){
	.fs-locales-grid, .fs-cols-4, .fs-cols-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
	.fs-intro{ padding:40px 18px; gap:30px; }
	.fs-locales-grid, .fs-cols-2, .fs-cols-3, .fs-cols-4{ grid-template-columns:1fr; padding:30px 18px 40px; }
	.fs-form-row{ flex-direction:column; gap:0; }
	.fs-formulario{ padding:22px; }
}