/* =========================================================
   VITALIS NOVA — theme.css v1.0.0
   Complementa theme.json. Colores: var(--wp--preset--color--*)
   ========================================================= */
:root {
  --vn-navy: var(--wp--preset--color--navy);
  --vn-gold: var(--wp--preset--color--gold);
  --vn-gold-2: var(--wp--preset--color--gold-2);
  --vn-green: var(--wp--preset--color--green);
  --vn-cream: var(--wp--preset--color--cream);
  --vn-muted: var(--wp--preset--color--muted);
  --vn-line: #E4DFD2;
  --vn-radius: 14px;
  --vn-shadow: 0 10px 30px rgba(15, 30, 58, .08);
}
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
:focus-visible { outline: 3px solid var(--vn-gold); outline-offset: 2px; }
.vn-muted { color: var(--vn-muted); }

/* Sin espacios entre cabecera, contenido y pie ni entre secciones de portada */
.wp-site-blocks > * + * { margin-block-start: 0; }
.vn-main-front .wp-block-post-content > .alignfull { margin-block: 0 !important; }
.vn-page { padding-block: var(--wp--preset--spacing--60); }

/* ---------- Cabecera ---------- */
.vn-site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--vn-line); }
.admin-bar .vn-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vn-site-header { top: 0; position: relative; } }
.vn-header-inner { min-height: 72px; gap: 16px; }
.vn-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.vn-brand img { width: 44px; height: 44px; }
.vn-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.vn-brand-name { font-family: var(--wp--preset--font-family--serif); font-size: 1.45rem; font-weight: 700; letter-spacing: .06em; }
.vn-brand-name .b1 { color: var(--vn-gold-2); }
.vn-brand-name .b2 { color: var(--vn-navy); }
.vn-brand-sub { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vn-green); }
.vn-nav { gap: 26px; font-weight: 500; font-size: .95rem; }
.vn-nav a { text-decoration: none; color: var(--wp--preset--color--ink); }
.vn-nav a:hover { color: var(--vn-gold-2); }
.vn-nav .vn-nav-cta > a { background: var(--vn-gold); color: var(--vn-navy); padding: .55em 1.1em; border-radius: 999px; font-weight: 600; }
.vn-nav .vn-nav-cta > a:hover { background: var(--vn-gold-2); color: #fff; }
.vn-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 24px; }
.vn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 18px; font-size: 1.1rem; }

/* ---------- Secciones ---------- */
.vn-section { padding-block: var(--wp--preset--spacing--60); }
.vn-tint { background: var(--vn-cream); }
.vn-dark { background: var(--vn-navy); color: #C9D0DE; }
.vn-dark h2, .vn-dark h3 { color: #fff; }
.vn-section-head { max-width: 680px; margin-bottom: 2.5rem !important; }
.vn-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 600; color: var(--vn-green); margin-bottom: .4em; }
.vn-dark .vn-eyebrow, .vn-hero .vn-eyebrow { color: var(--vn-gold); }
.vn-note { font-size: .92rem; color: var(--vn-muted); border-left: 3px solid var(--vn-gold); padding-left: 12px; }

/* ---------- Hero ---------- */
.vn-hero { background: radial-gradient(1200px 600px at 85% 10%, var(--wp--preset--color--navy-2), var(--vn-navy) 60%); color: #E9ECF3; }
.vn-hero h1 { color: #fff; }
.vn-lead { font-size: 1.15rem; color: #C9D0DE; max-width: 36em; }
.vn-hero-emblem { text-align: center; margin: 0 auto 1rem; }
.vn-hero-emblem img { width: min(300px, 70%); margin: 0 auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
.vn-hero-slogan { text-align: center; font-family: var(--wp--preset--font-family--serif); font-size: 1.35rem; font-style: italic; color: var(--vn-gold); }

/* Estilos de botón */
.wp-block-button.is-style-vn-ghost .wp-block-button__link { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); }
.wp-block-button.is-style-vn-ghost .wp-block-button__link:hover { background: rgba(255,255,255,.1); }
.wp-block-button.is-style-vn-outline .wp-block-button__link { background: transparent; color: var(--vn-navy); border: 2px solid var(--vn-navy); }
.wp-block-button.is-style-vn-outline .wp-block-button__link:hover { background: var(--vn-navy); color: #fff; }
.wp-element-button { transition: background .2s, color .2s, transform .2s; }
.wp-element-button:hover { transform: translateY(-1px); }

/* ---------- Tarjetas ---------- */
.vn-cards { gap: 24px; }
.vn-card { background: #fff; border: 1px solid var(--vn-line); border-radius: var(--vn-radius); padding: 30px 26px; box-shadow: var(--vn-shadow); transition: transform .25s, box-shadow .25s; }
.vn-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,30,58,.12); }
.vn-card p { color: var(--vn-muted); margin: 0; }
.vn-card h3, .vn-card h2 { margin-top: 0; }

/* Iconos por clase (vn-ico-*) dibujados con máscara SVG */
[class*="vn-ico-"]::before { content: ""; display: block; width: 34px; height: 34px; margin-bottom: 16px;
  background: var(--vn-green); -webkit-mask: var(--vn-ico) center / contain no-repeat; mask: var(--vn-ico) center / contain no-repeat; }
.vn-step { border-top: 2px solid var(--vn-gold); padding-top: 24px; }
.vn-step[class*="vn-ico-"]::before { background: var(--vn-gold); }

/* ---------- Contacto / ubicación ---------- */
.vn-info-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.vn-info-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.vn-icon { width: 1.25em; height: 1.25em; flex: none; margin-top: .2em; color: var(--vn-gold-2); }
.vn-map { border-radius: var(--vn-radius); overflow: hidden; box-shadow: var(--vn-shadow); aspect-ratio: 4 / 3; background: var(--vn-cream); }
.vn-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.vn-map-link { margin-top: .8rem; font-size: .92rem; }
.vn-form { background: #fff; border: 1px solid var(--vn-line); border-radius: var(--vn-radius); padding: 32px; box-shadow: var(--vn-shadow); }
.vn-admin-note { background: #FFF6E0; border: 1px dashed var(--vn-gold-2); padding: 12px; border-radius: 8px; font-size: .9rem; }

/* Contact Form 7 */
.vn-form .wpcf7 label { display: block; font-weight: 600; font-size: .9rem; color: var(--vn-navy); margin-bottom: 16px; }
.vn-form .wpcf7 input[type="text"], .vn-form .wpcf7 input[type="email"], .vn-form .wpcf7 input[type="tel"],
.vn-form .wpcf7 select, .vn-form .wpcf7 textarea { width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid #CFCAC0; border-radius: 10px; font: inherit; font-weight: 400; background: #fff; box-sizing: border-box; }
.vn-form .wpcf7 input:focus, .vn-form .wpcf7 select:focus, .vn-form .wpcf7 textarea:focus { border-color: var(--vn-green); outline: none; box-shadow: 0 0 0 3px rgba(63,118,87,.18); }
.vn-form .wpcf7-acceptance label { font-weight: 400; color: var(--vn-muted); font-size: .88rem; display: flex; gap: 10px; }
.vn-form .wpcf7-submit { width: 100%; border: 0; cursor: pointer; background: var(--vn-gold); color: var(--vn-navy); font-weight: 600; border-radius: 999px; padding: .9em 1.5em; font-size: 1rem; }
.vn-form .wpcf7-submit:hover { background: var(--vn-gold-2); color: #fff; }
.vn-form .wpcf7-not-valid-tip { font-size: .85rem; }
.vn-form .wpcf7 form .wpcf7-response-output { border-radius: 10px; margin: 16px 0 0; }

/* ---------- Pie ---------- */
.vn-footer { background: #0A1528; color: #AEB6C6; padding-block: 64px 24px; font-size: .95rem; }
.vn-footer a { color: #DCE1EA; }
.vn-footer a:hover { color: var(--vn-gold); }
.vn-brand-footer .b1 { color: var(--vn-gold); }
.vn-brand-footer .b2 { color: #fff; }
.vn-brand-footer img { width: 40px; height: 40px; }
.vn-footer-title { font-family: var(--wp--preset--font-family--sans) !important; font-size: .8rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--vn-gold) !important; }
.vn-footer .vn-icon { color: var(--vn-gold); }
.vn-slogan { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.2rem; color: var(--vn-gold); }
.vn-legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 20px; font-size: .85rem; max-width: 1140px; margin-inline: auto; }
.vn-legal p { margin: 0 0 4px; }
.vn-legal .vn-muted { color: #8C95A7; }

/* ---------- WhatsApp flotante ---------- */
.vn-wa-float { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 60; }
.vn-wa-float .vn-icon { width: 30px; height: 30px; color: #fff; margin: 0; }

/* ---------- Animación ---------- */
.vn-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.vn-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vn-reveal { opacity: 1; transform: none; transition: none; }
  .vn-card, .wp-element-button { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
  .vn-hero-grid > .wp-block-column:last-child { order: -1; }
  .vn-hero-emblem img { width: 180px; }
  .vn-form { padding: 22px; }
}
@media (max-width: 600px) {
  .vn-brand-sub { display: none; }
  .vn-brand-name { font-size: 1.25rem; }
}

/* ---------- Iconos (SVG) ---------- */
.vn-ico-stethoscope { --vn-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203v6a4%204%200%200%200%208%200V3%22/%3E%3Cpath%20d%3D%22M10%2013v3a5%205%200%200%200%2010%200v-2%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2212%22%20r%3D%222%22/%3E%3C/svg%3E"); }
.vn-ico-needle { --vn-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020%2018%206%22/%3E%3Cpath%20d%3D%22m15%203%206%206%22/%3E%3Cpath%20d%3D%22m7%2017-3%203%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%221%22/%3E%3C/svg%3E"); }
.vn-ico-drop { --vn-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203s6%206.5%206%2011a6%206%200%200%201-12%200c0-4.5%206-11%206-11z%22/%3E%3C/svg%3E"); }
.vn-ico-body { --vn-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%224.5%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M5%209h14%22/%3E%3Cpath%20d%3D%22M12%209v5%22/%3E%3Cpath%20d%3D%22m8%2021%204-7%204%207%22/%3E%3C/svg%3E"); }
.vn-ico-leaf { --vn-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019c0-8%205-14%2015-15-1%2010-7%2015-15%2015z%22/%3E%3Cpath%20d%3D%22M5%2019%2013%2011%22/%3E%3C/svg%3E"); }
.vn-ico-chart { --vn-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10%22/%3E%3Cpath%20d%3D%22M10%2020V4%22/%3E%3Cpath%20d%3D%22M16%2020v-7%22/%3E%3Cpath%20d%3D%22M22%2020H2%22/%3E%3C/svg%3E"); }
.vn-ico-heart { --vn-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020s-7-4.4-7-10a4%204%200%200%201%207-2.6A4%204%200%200%201%2019%2010c0%205.6-7%2010-7%2010z%22/%3E%3C/svg%3E"); }
.vn-ico-handshake { --vn-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2012%204-4%205%203%205-3%204%204%22/%3E%3Cpath%20d%3D%22m7%208%205%208%205-8%22/%3E%3C/svg%3E"); }
.vn-ico-target { --vn-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22/%3E%3C/svg%3E"); }