/* Mestral Seguretat — réplica del diseño original */
:root {
	--ms-navy: #00192D;
	--ms-teal: #4FD1B8;
	--ms-light: #EAF3F7;
	--ms-text: #DCE5EC;
	--ms-ink: #0B2236;
	--ms-max: 1280px;
	--ms-font: 'Barlow', 'DIN Next', 'Helvetica Neue', Arial, sans-serif;
	--ms-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='%234FD1B8' stroke-width='1.5'/%3E%3Cpath d='M7.5 12.3l3 3 6-6.6' fill='none' stroke='%234FD1B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ms-navy); color: #fff; font-family: var(--ms-font); -webkit-font-smoothing: antialiased; }
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > *, .ms-home > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.ms-home a, .ms-closing a { text-decoration: none; color: inherit; }
.ms-accent { background: none !important; color: var(--ms-teal) !important; }
h1, h2, h3, p, ul, figure { font-family: var(--ms-font); }

/* ===== Panel base (todas las secciones oscuras) ===== */
.ms-panel {
	position: relative; max-width: var(--ms-max); margin: 0 auto !important; overflow: hidden;
	display: grid; grid-template-columns: 46% 54%; grid-template-rows: 1fr auto;
	background: var(--ms-navy); border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ms-panel > * { margin: 0 !important; }

.ms-panel .ms-text { grid-column: 1; grid-row: 1; position: relative; z-index: 2; padding: 64px 24px 28px 64px; min-height: 520px; box-sizing: border-box; }

/* Foto con borde diagonal, como en el diseño */
.ms-panel .ms-photo {
	--a: 0%; --b: 0%; --line: 2px; --line-color: rgba(255, 255, 255, .55);
	grid-column: 2; grid-row: 1; position: relative; z-index: 1; height: 100%; min-height: 100%;
	margin-left: -12% !important; background: var(--line-color);
	clip-path: polygon(calc(var(--a) - var(--line)) 0, 100% 0, 100% 100%, calc(var(--b) - var(--line)) 100%);
}
.ms-panel .ms-photo img {
	position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
	clip-path: polygon(var(--a) 0, 100% 0, 100% 100%, var(--b) 100%);
}
.ms-photo-hero      { --a: 40% !important; --b: 2.5% !important; --line: 5px !important; --line-color: var(--ms-teal) !important; }
.ms-photo-cctv      { --a: 1% !important;  --b: 37% !important; }
.ms-photo-antihurto { --a: 2% !important;  --b: 21.6% !important; }
.ms-photo-intrusion { --a: 1% !important;  --b: 20% !important; }
.ms-photo-accesos   { --a: 0% !important;  --b: 0% !important; --line: 0px !important; }
.ms-photo-incendios { --a: 1% !important;  --b: 21.8% !important; --line: 0px !important; }
.ms-photo-mallorca  { --a: 38% !important; --b: 0% !important; --line: 12px !important; --line-color: var(--ms-teal) !important; }
.ms-photo-control   { --line: 0px !important; background: none !important; }
.ms-photo-control img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%); }

/* Tipografía de los paneles */
.ms-num { font-size: 52px; line-height: 1; font-weight: 400; color: var(--ms-teal); margin: 0 0 14px !important; }
.ms-panel h2 { font-size: 32px; line-height: 1.15; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 22px; color: #fff; }
.ms-kicker { font-size: 22px; font-weight: 500; color: var(--ms-teal); margin: 0 0 14px !important; }
.ms-desc { font-size: 18px; line-height: 1.5; color: var(--ms-text); max-width: 30em; margin: 0 0 22px !important; }

.ms-checks { list-style: none; padding: 0; margin: 0; font-size: 18px; color: var(--ms-text); }
.ms-checks li { position: relative; padding-left: 46px; margin: 0 0 12px; line-height: 1.4; }
.ms-checks li::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 28px; background: var(--ms-ico) center/contain no-repeat; }

/* Tira de fotos de producto */
.ms-panel .ms-thumbs { grid-column: 1; grid-row: 2; padding: 6px 24px 40px 64px; z-index: 2; }
.ms-thumbs img { display: block; width: 100%; max-width: 520px; height: auto; border: 2px solid rgba(255, 255, 255, .85); border-radius: 3px; }

/* Distintivo inferior derecho */
.ms-badge {
	grid-column: 2; grid-row: 2; align-self: end; z-index: 3; position: relative;
	display: flex; align-items: center; gap: 22px; margin: -60px 0 40px 6% !important; padding: 18px 28px;
	background: var(--ms-navy); border: 1px solid rgba(79, 209, 184, .45); border-right: 0;
	font-size: 17px; line-height: 1.45; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #fff;
}
.ms-badge::before { content: ""; flex: none; width: 58px; height: 58px; border: 2px solid var(--ms-teal); border-radius: 50%; background-position: center; background-size: 30px; background-repeat: no-repeat; }
.ms-b-brain::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD1B8' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M12 4v16M12 4c-1.5-1.5-5-1-5 2-2.5 0-3.5 3-2 4.5-1.5 1.5-1 4.5 1.5 4.5 0 3 3.5 4 5.5 1M12 4c1.5-1.5 5-1 5 2 2.5 0 3.5 3 2 4.5 1.5 1.5 1 4.5-1.5 4.5 0 3-3.5 4-5.5 1M8 9h2.5M8 13.5h2M13.5 9H16M14 13.5h2'/%3E%3C/svg%3E"); }
.ms-b-shield::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD1B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8 3v6c0 5-3.4 8.7-8 10-4.6-1.3-8-5-8-10v-6l8-3z'/%3E%3Cpath d='M8.3 12l2.6 2.6 5-5.2'/%3E%3C/svg%3E"); }
.ms-b-people::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD1B8' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.5' r='2.6'/%3E%3Ccircle cx='5.5' cy='9.5' r='2'/%3E%3Ccircle cx='18.5' cy='9.5' r='2'/%3E%3Cpath d='M7.5 19v-2.5c0-2.5 2-4 4.5-4s4.5 1.5 4.5 4V19zM2 19v-2c0-1.8 1.4-3 3.5-3 .8 0 1.5.2 2 .5M22 19v-2c0-1.8-1.4-3-3.5-3-.8 0-1.5.2-2 .5'/%3E%3C/svg%3E"); }
.ms-b-flame::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD1B8' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c.5 3.5 6 6 6 11.5a6 6 0 01-12 0c0-3 1.7-4.6 2.8-6 .2 1.8 1 2.8 2 3.3C10.3 8.5 11 5.5 12 2.5z'/%3E%3Cpath d='M12 13c.3 1.5 2.5 2.5 2.5 4.5a2.5 2.5 0 01-5 0c0-1.6 1.3-2.7 2.5-4.5z'/%3E%3C/svg%3E"); }

/* ===== Portada ===== */
.ms-hero .ms-text { padding-top: 56px; }
.ms-logo img { display: block; width: 280px; max-width: 100%; height: auto; }
.ms-hero .ms-logo { margin-bottom: 40px !important; }
.ms-eyebrow { font-size: 15px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--ms-text); line-height: 1.75; margin: 0 0 22px !important; }
.ms-eyebrow::after { content: ""; display: block; width: 64px; height: 3px; background: var(--ms-teal); margin-top: 22px; }
.ms-hero h1 { font-size: 46px; line-height: 1.12; font-weight: 600; margin: 0 0 22px; max-width: 10.5em; color: #fff; }
.ms-lead { font-size: 20px; line-height: 1.5; color: var(--ms-text); margin: 0 !important; }

.ms-pillars { grid-column: 1; grid-row: 2; z-index: 2; list-style: none; display: flex; padding: 16px 24px 44px 64px !important; margin: 0 !important; }
.ms-pillars li { text-align: center; font-size: 16px; color: var(--ms-text); padding: 0 26px; border-left: 1px solid rgba(255, 255, 255, .14); }
.ms-pillars li:first-child { padding-left: 0; border-left: 0; }
.ms-pillars li::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 10px; background-position: center; background-size: contain; background-repeat: no-repeat; }
.ms-pillars li.ms-i-prevencion::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD1B8' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 6.5l5.5 9.5h-11z M9 9.5l6 6.5 M15 9.5l-6 6.5'/%3E%3C/svg%3E"); }
.ms-pillars li.ms-i-control::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD1B8' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8 3v6c0 5-3.4 8.7-8 10-4.6-1.3-8-5-8-10v-6l8-3z'/%3E%3Cpath d='M10 15.5v-5a1 1 0 012 0v3.5-5a1 1 0 012 0v4.5l1-1.2c.6-.6 1.5 0 1 .8L14 16H10z'/%3E%3C/svg%3E"); }
.ms-pillars li.ms-i-tecnologia::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD1B8' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='3.5' r='1.6'/%3E%3Ccircle cx='12' cy='20.5' r='1.6'/%3E%3Ccircle cx='4.6' cy='7.8' r='1.6'/%3E%3Ccircle cx='19.4' cy='7.8' r='1.6'/%3E%3Ccircle cx='4.6' cy='16.2' r='1.6'/%3E%3Ccircle cx='19.4' cy='16.2' r='1.6'/%3E%3C/svg%3E"); }
.ms-pillars li.ms-i-tranquilidad::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD1B8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8 3v6c0 5-3.4 8.7-8 10-4.6-1.3-8-5-8-10v-6l8-3z'/%3E%3Cpath d='M8.3 12l2.6 2.6 5-5.2'/%3E%3C/svg%3E"); }

.ms-hero-sign { grid-column: 2; grid-row: 2; align-self: center; justify-self: end; text-align: center; padding: 0 64px 36px 0 !important; font-size: 17px; letter-spacing: .06em; color: var(--ms-text); line-height: 1.5; z-index: 2; }
.ms-hero-sign strong { font-size: 22px; font-weight: 600; text-transform: uppercase; color: #fff; letter-spacing: .02em; }

/* ===== 06 Centro de control ===== */
.ms-control { grid-template-rows: auto; }
.ms-control .ms-text { padding-bottom: 64px; }
.ms-control .ms-photo { margin-left: -30% !important; }

/* ===== ¿Por qué Mestral? ===== */
.ms-why { background: var(--ms-light); color: var(--ms-ink); padding: 72px 24px 80px; }
.ms-why > * { max-width: 1120px; margin-left: auto !important; margin-right: auto !important; }
.ms-why h2 { font-size: 40px; font-weight: 700; margin: 0; color: var(--ms-ink); }
.ms-why-kicker { color: #1E8F86; font-size: 21px; font-weight: 600; margin: 6px auto 40px !important; }
.ms-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ms-why-card { padding: 22px 30px 30px; margin: 0 !important; position: relative; }
.ms-why-card:nth-child(-n+3)::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 1px; background: #CBD9E1; }
.ms-why-card:not(:nth-child(3n+1)) { border-left: 1px solid #D5E1E8; }
.ms-why-icon { margin: 0 0 14px !important; }
.ms-why-icon img { display: block; height: 52px; width: auto; }
.ms-why-card h3 { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; color: var(--ms-ink); }
.ms-why-card p { margin: 0; font-size: 16.5px; line-height: 1.45; color: #5A7182; }

/* ===== Cierre / contacto ===== */
.ms-closing { grid-template-rows: auto; }
.ms-closing .ms-text { padding: 72px 24px 80px 64px; }
.ms-closing .ms-logo img { width: 340px; }
.ms-slogan { font-size: 34px; font-weight: 400; line-height: 1.3; margin: 48px 0 48px !important; color: #fff; }
.ms-contact-list { list-style: none; padding: 0; margin: 0; font-size: 20px; }
.ms-contact-list li { position: relative; padding-left: 62px; margin: 0 0 18px; line-height: 42px; }
.ms-contact-list li::before { content: ""; position: absolute; left: 0; top: 0; width: 42px; height: 42px; border: 2px solid var(--ms-teal); border-radius: 50%; box-sizing: border-box; background-position: center; background-size: 22px; background-repeat: no-repeat; }
.ms-contact-list li.ms-c-phone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD1B8' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3.5l1.8 4.5-2.3 1.5a11 11 0 006.5 6.5l1.5-2.3 4.5 1.8V19a2 2 0 01-2 2C10 20.5 3.5 14 3 5.5a2 2 0 012-2z'/%3E%3C/svg%3E"); }
.ms-contact-list li.ms-c-mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD1B8' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='M3.5 6.5l8.5 7 8.5-7'/%3E%3C/svg%3E"); }
.ms-contact-list li.ms-c-pin::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD1B8' stroke-width='1.6'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0113 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
.ms-contact-list a:hover { color: var(--ms-teal); }

/* Cabecera y páginas interiores */
.ms-header { max-width: var(--ms-max); margin: 0 auto; padding: 20px 24px; }
.ms-header .ms-logo img { width: 220px; }
.ms-page { max-width: 820px; margin: 0 auto; padding: 56px 24px 96px; font-size: 18px; }
.ms-page a { color: var(--ms-teal); }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
	.ms-panel h2 { font-size: 28px; }
	.ms-hero h1 { font-size: 40px; }
	.ms-panel .ms-text, .ms-panel .ms-thumbs, .ms-pillars { padding-left: 40px !important; }
}
@media (max-width: 860px) {
	.ms-panel { display: flex; flex-direction: column; }
	.ms-panel .ms-photo { order: -1; margin-left: 0 !important; height: 340px; min-height: 0; position: relative; }
	.ms-panel h2 br { display: none; }
	.ms-photo-control img { -webkit-mask-image: none; mask-image: none; }
	.ms-panel .ms-text { padding: 28px 22px 20px !important; min-height: 0; }
	.ms-panel .ms-thumbs { padding: 6px 22px 20px !important; }
	.ms-badge { margin: 8px 22px 36px !important; border-right: 1px solid rgba(79, 209, 184, .45); font-size: 15px; }
	.ms-pillars { padding: 8px 22px 28px !important; flex-wrap: wrap; row-gap: 16px; }
	.ms-pillars { flex-wrap: nowrap !important; }
	.ms-pillars li { padding: 0 10px; font-size: 13px; }
	.ms-pillars li::before { width: 32px; height: 32px; }
	.ms-hero-sign { align-self: flex-start; justify-self: auto; text-align: left; padding: 0 22px 36px !important; }
	.ms-hero h1 { font-size: 34px; }
	.ms-logo img { width: 230px; }
	.ms-closing .ms-text { padding: 32px 22px 48px !important; }
	.ms-slogan { font-size: 28px; margin: 28px 0 !important; }
	.ms-why h2 { font-size: 30px; }
	.ms-why-grid { grid-template-columns: 1fr 1fr; }
	.ms-why-card:not(:nth-child(3n+1)) { border-left: 0; }
	.ms-why-card:nth-child(even) { border-left: 1px solid #D5E1E8; }
	.ms-why-card:nth-child(-n+3)::after { display: none; }
	.ms-why-card:nth-child(-n+4)::after { content: ""; display: block; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: #CBD9E1; }
	.ms-why-card { padding: 20px; }
}
@media (max-width: 520px) {
	.ms-why-grid { grid-template-columns: 1fr; }
	.ms-why-card:nth-child(even) { border-left: 0; }
	.ms-why-card:nth-child(-n+5)::after { content: ""; display: block; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: #CBD9E1; }
	.ms-contact-list { font-size: 17px; }
}