/* PhilaxMed mega-menu: pure-CSS hover reveal, no JS. Kept out of the header's
   Text module content so Divi's builder editor doesn't choke on an inline
   <style> tag (it was rendering the absolutely-positioned mega panel inline,
   trapping the module's scroll while editing). */
/* Give the whole header section its own high-priority stacking context so the
   mega panel (inside it) paints above the sections that follow it in the DOM
   (e.g. the hero), not behind them. */
.phx-header-section { position: relative; z-index: 9999; }
.phx-header-wrap { position: relative; display: flex; align-items: center; }
/* The header's "Solicitar demo" is a real et_pb_button module (so its colors
   are editable via Divi's own color pickers) positioned over the space the
   Text module above it reserves via padding-right:150px on its right group. */
.phx-header-row { position: relative !important; }
/* Divi's own module wrapper div (et_pb_button_module_wrapper) already sets
   its own position:relative by default, which — being a closer ancestor than
   the row — was winning as the absolute-positioning containing block instead
   of the row, centering the button against its own (button-sized) wrapper
   rather than the header's full height. Overriding position on that wrapper
   itself (not just the inner <a>) makes it defer to the row as intended. */
.et_pb_button_module_wrapper:has(> .phx-header-cta-btn) { position: absolute !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; }
.phx-header-cta-btn { position: static !important; }

/* Real et_pb_button + a plain text/link module sitting side by side, instead
   of Divi's default of stacking every module on its own line. Used for the
   hero and final-CTA "Solicitar demo" buttons next to their WhatsApp link. */
.phx-inline-btn { display: inline-block; vertical-align: middle; }
/* module_class lands on the button module's own inner <a> element, but on a
   text module it lands on the module's own outer wrapper div directly (the
   two module types don't have the same shape) — so the "real" block-level
   box that needs the shared margin/spacing is a DIFFERENT element depending
   on which module this is. `:not(.et_pb_button)` below matches only the
   text-module case (where .phx-inline-btn IS that wrapper); the :has() rule
   right after matches only the button case (targeting the true outer
   et_pb_button_module_wrapper, which also carries class et_pb_module). Divi's
   own default per-module-type spacing on that wrapper (padding/margin) was
   throwing the button and the WhatsApp link out of vertical alignment with
   each other, hence the explicit zero here rather than trusting Divi's
   defaults — a custom_padding/custom_margin shortcode attribute was tried
   first but collided with the custom_css_main_element background/size
   overrides on the same element and broke the button's own padding, so this
   stays purely in the external stylesheet instead. */
.phx-inline-btn:not(.et_pb_button) { margin: 0 16px 12px 0 !important; padding: 0 !important; }
.et_pb_module:has(> .phx-inline-btn) { display: inline-block !important; vertical-align: middle; width: auto !important; margin: 0 16px 12px 0 !important; padding: 0 !important; }
.phx-cta-col { text-align: center; }
.phx-cta-col .phx-inline-btn:not(.et_pb_button) { margin: 0 8px 12px; }
.phx-cta-col .et_pb_module:has(> .phx-inline-btn) { margin: 0 8px 12px !important; }
.phx-nav-wrap {
	position: relative;
	margin-right: 22px;
	/* Stretch to the full header height (not just the text's own line-height) so
	   there is zero vertical gap between the hoverable trigger and the panel
	   below it — otherwise the cursor crosses a "dead zone" moving diagonally
	   from the trigger down into the panel and :hover drops before it arrives. */
	align-self: stretch;
	display: flex;
	align-items: center;
}
.phx-mega {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 0;
	background: #fff;
	border: 1px solid #E4EAEA;
	border-radius: 20px;
	box-shadow: 0 24px 50px rgba(2, 120, 114, .16);
	padding: 22px 0;
	z-index: 1000;
	grid-template-columns: repeat(4, 1fr);
}
/* :focus-within keeps the panel open once you click inside it to edit its
   text in Divi Builder, instead of only reacting to live mouse hover. */
/* The trigger ("Módulos") is much narrower than the full-width panel below
   it, so a mouse moving diagonally toward a link on the far side of the
   panel can dip out of both .phx-nav-wrap and .phx-mega while still above
   the panel's top edge — CSS :hover has no memory, so that instant kills
   the whole chain. A full-width invisible strip right at the header/panel
   seam (.phx-mega-bridge) guarantees any downward path crosses a hoverable
   element regardless of its horizontal drift. */
/* Now a child of .phx-nav-wrap (not the whole header), so left:0;right:0
   sizes it to the trigger's own width -- spanning the full header instead
   opened the mega-menu just by hovering anywhere along the bottom edge of
   the header (e.g. under "Blog" or "Contacto"), nowhere near "Módulos". */
.phx-mega-bridge { position: absolute; left: 0; right: 0; top: 100%; height: 28px; z-index: 999; }
.phx-header-wrap:has(.phx-nav-wrap:hover, .phx-mega:hover, .phx-mega:focus-within, .phx-mega-bridge:hover) .phx-mega { display: grid; }
.phx-header-wrap:has(.phx-nav-wrap:hover, .phx-mega:hover, .phx-mega:focus-within, .phx-mega-bridge:hover) .phx-chevron { transform: rotate(180deg); }
.phx-mega-link:hover { background: #F7FBFB; color: #027872; }
.phx-toplink:hover { color: #027872; }

/* Divi's native Tabs module has its own tab-bar look (auto-width text tabs
   with an underline/box style). The original design uses equal-width pill
   buttons in a bordered rounded bar instead — restyle Divi's own markup
   (.et_pb_tabs_controls > li > a) to match it exactly rather than fighting
   Divi's module for a custom structure (which would lose the module's
   built-in, safe-to-save tab-switching behavior). */
.et_pb_tabs_controls {
	display: flex !important;
	background: #fff !important;
	border: 1px solid #E4EAEA !important;
	border-radius: 14px !important;
	padding: 6px !important;
	list-style: none !important;
	margin: 0 0 20px !important;
}
.et_pb_tabs_controls li {
	flex: 1 !important;
	margin: 0 3px !important;
	height: auto !important;
	border: none !important;
	background: transparent !important;
}
.et_pb_tabs_controls li a {
	display: block !important;
	text-align: center !important;
	border-radius: 10px !important;
	padding: 12px 10px !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: #142624 !important;
	background: transparent !important;
	border: none !important;
}
.et_pb_tabs_controls li.et_pb_tab_active a {
	background: #027872 !important;
	color: #fff !important;
}
/* The original design has two separate bordered boxes (tab bar, then content
   panel) with a gap between them. Divi's module wraps both in a third outer
   border, which peeked out as small corner "tick" artifacts where the inner
   tab bar's rounded corner didn't fully cover it. Strip the outer border and
   put the panel's own border/radius on the actual content wrapper instead. */
.et_pb_tabs {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}
.et_pb_all_tabs {
	border: 1px solid #E4EAEA !important;
	border-radius: 20px !important;
	box-shadow: 0 16px 34px rgba(2, 120, 114, .06) !important;
	overflow: hidden !important;
}

/* Icon-card grids (problem/feature/dark-banner cards) use Divi's row-level
   "Equalize Column Heights" (make_equal) so every column in a row is the same
   height as the tallest one. That alone isn't enough: our card's own
   height:100% (so its border/background box fills the column instead of just
   wrapping its own text) needs an unbroken chain of *definite* heights down
   from the column to itself, but Divi's own module wrapper and its
   .et_pb_text_inner child both default to height:auto — breaking the chain
   at the very first step, so height:100% falls back to auto and every card
   with less text than the tallest one visibly looks shorter. */
.phx-card-mod { height: 100% !important; }
.phx-card-mod > .et_pb_text_inner { height: 100%; }

/* Testimonial: avatar sits beside the quote block (not stacked above it) in
   the original. The avatar/quote-icon/quote-text/author are 4 flat sibling
   modules inside one column (Divi shortcodes can't nest a module inside
   another module's HTML), so the column itself becomes a 2-column grid and
   each module is placed by grid-area instead of relying on document flow. */
.phx-testi-col { display: grid; grid-template-columns: 54px 1fr; column-gap: 18px; align-items: start; }
.phx-testi-avatar { grid-column: 1; grid-row: 1 / 4; }
.phx-testi-qicon { grid-column: 2; grid-row: 1; margin-bottom: 8px; }
.phx-testi-text { grid-column: 2; grid-row: 2; margin-bottom: 14px; }
.phx-testi-author { grid-column: 2; grid-row: 3; }

/* Blog listing page: sticky sidebar CTA card + full-width stacked
   button/WhatsApp pair inside it (phx-inline-btn is side-by-side, not what
   this needs). */
.phx-sidebar-sticky { position: sticky; top: 92px; align-self: start; }
.phx-sidebar-btn { display: block !important; width: 100% !important; }
.et_pb_module:has(> .phx-sidebar-btn) { width: 100% !important; }

/* Card hover lift, matching the original's .ph-card:hover */
.phx-card { transition: transform .22s ease, box-shadow .22s ease; }
.phx-card:hover { transform: translateY(-4px); }

/* Home's rich mega-menu: left category triggers + a module-list/"Destacado"
   panel that swaps per category. Panel 0 is visible by default (matching the
   original's initial megaCat:0 state); hovering another trigger swaps which
   panel shows via :has(), the same technique as the simple mega-menu's open/
   close, just with 4 alternate targets instead of one. */
/* The generic .phx-mega rule (used by the flat 4-column menu on every other
   page) forces display:grid;grid-template-columns:repeat(4,1fr) on the outer
   panel once opened -- Home's mega-menu carries that same class for the
   shared open/close hover plumbing, but its own direct children (the 230px
   sidebar+content grid, then the full-width "Ver todos" bar below it) need
   to stack as two block-level rows instead, not become grid columns 1 and 2
   of an accidental 4-col layout (which is what squeezed "Ver todos los
   módulos" into a narrow strip on the right instead of a full-width footer). */
.phx-header-wrap:has(.phx-nav-wrap:hover, .phx-mega:hover, .phx-mega:focus-within, .phx-mega-bridge:hover) .phx-mega-home { display: block !important; }
.phx-mega-home .phx-mpanel-col { position: relative; }
.phx-mega-home .phx-mpanel { display: none; }
.phx-mega-home .phx-mpanel-0 { display: grid; }
.phx-mega-home:has(.phx-mtrig-1:hover) .phx-mpanel-0 { display: none; }
.phx-mega-home:has(.phx-mtrig-1:hover) .phx-mpanel-1 { display: grid; }
.phx-mega-home:has(.phx-mtrig-2:hover) .phx-mpanel-0 { display: none; }
.phx-mega-home:has(.phx-mtrig-2:hover) .phx-mpanel-2 { display: grid; }
.phx-mega-home:has(.phx-mtrig-3:hover) .phx-mpanel-0 { display: none; }
.phx-mega-home:has(.phx-mtrig-3:hover) .phx-mpanel-3 { display: grid; }
.phx-mtrig-0 { background: #EAF7F6; }
.phx-mega-home:has(.phx-mtrig-1:hover, .phx-mtrig-2:hover, .phx-mtrig-3:hover) .phx-mtrig-0 { background: transparent; }
.phx-mtrig-1:hover, .phx-mtrig-2:hover, .phx-mtrig-3:hover { background: #EAF7F6; }
.phx-mega-link:hover, .phx-mpanel a:hover { background: #F7FBFB; }

/* WordPress strips `transform` from inline style="" attributes (not on its
   safecss allow-list), so the hero collage's slight card tilts have to live
   here as classes instead of inline rotate() values. */
.phx-rot-n1 { transform: rotate(-1deg); }
.phx-rot-2 { transform: rotate(2deg); }
.phx-rot-n2 { transform: rotate(-2deg); }
.phx-rot-1 { transform: rotate(1deg); }
.phx-rot-3 { transform: rotate(3deg); }

/* FAQ accordion built from native <details>/<summary> — hide the browser's
   own disclosure triangle so only our custom chevron icon shows, and rotate
   that chevron when the item is open. */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .phx-faq-chevron { transform: rotate(180deg); }

/* Pure-CSS radio-input tabs — replaces et_pb_tabs on pages where it renders
   blank inside Divi Builder's Main Canvas (a Divi limitation, confirmed
   working fine published; using plain radios/labels sidesteps it entirely,
   same reasoning as the <details> FAQ). Supports up to 8 tabs per group;
   unused rules for a group with fewer tabs simply never match anything. */
.phx-tab-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.phx-tabbtn { color: #142624; background: transparent; transition: background .15s, color .15s; }
.phx-tabpanel { display: none; padding-top: 26px; }
.phx-tab-radio:nth-of-type(1):checked ~ .phx-tabbar .phx-tabbtn:nth-of-type(1),
.phx-tab-radio:nth-of-type(2):checked ~ .phx-tabbar .phx-tabbtn:nth-of-type(2),
.phx-tab-radio:nth-of-type(3):checked ~ .phx-tabbar .phx-tabbtn:nth-of-type(3),
.phx-tab-radio:nth-of-type(4):checked ~ .phx-tabbar .phx-tabbtn:nth-of-type(4),
.phx-tab-radio:nth-of-type(5):checked ~ .phx-tabbar .phx-tabbtn:nth-of-type(5),
.phx-tab-radio:nth-of-type(6):checked ~ .phx-tabbar .phx-tabbtn:nth-of-type(6),
.phx-tab-radio:nth-of-type(7):checked ~ .phx-tabbar .phx-tabbtn:nth-of-type(7),
.phx-tab-radio:nth-of-type(8):checked ~ .phx-tabbar .phx-tabbtn:nth-of-type(8) {
	background: #027872;
	color: #fff;
}
.phx-tab-radio:nth-of-type(1):checked ~ .phx-tabpanels .phx-tabpanel:nth-of-type(1),
.phx-tab-radio:nth-of-type(2):checked ~ .phx-tabpanels .phx-tabpanel:nth-of-type(2),
.phx-tab-radio:nth-of-type(3):checked ~ .phx-tabpanels .phx-tabpanel:nth-of-type(3),
.phx-tab-radio:nth-of-type(4):checked ~ .phx-tabpanels .phx-tabpanel:nth-of-type(4),
.phx-tab-radio:nth-of-type(5):checked ~ .phx-tabpanels .phx-tabpanel:nth-of-type(5),
.phx-tab-radio:nth-of-type(6):checked ~ .phx-tabpanels .phx-tabpanel:nth-of-type(6),
.phx-tab-radio:nth-of-type(7):checked ~ .phx-tabpanels .phx-tabpanel:nth-of-type(7),
.phx-tab-radio:nth-of-type(8):checked ~ .phx-tabpanels .phx-tabpanel:nth-of-type(8) {
	display: block;
}

/* Some tab groups (Home's "Módulos por categoría") need their active panel
   to be a 2-column grid, not just visible block -- same nth-of-type chain,
   extra class + later in the cascade so it wins over the plain display:block
   rule above for elements that carry both classes. */
.phx-tab-radio:nth-of-type(1):checked ~ .phx-tabpanels .phx-tabpanel-grid:nth-of-type(1),
.phx-tab-radio:nth-of-type(2):checked ~ .phx-tabpanels .phx-tabpanel-grid:nth-of-type(2),
.phx-tab-radio:nth-of-type(3):checked ~ .phx-tabpanels .phx-tabpanel-grid:nth-of-type(3),
.phx-tab-radio:nth-of-type(4):checked ~ .phx-tabpanels .phx-tabpanel-grid:nth-of-type(4) {
	display: grid;
}

/* Home's tab bar highlights the active tab in ITS OWN category accent color
   (teal/teal-light/orange/green), not one fixed color like the plain
   .phx-tabbtn rule above -- extra class + later cascade position wins the
   same way the grid-panel override above does, and the icon's own inline
   color also needs forcing to white or it disappears into the same-color
   background. */
.phx-tab-radio:nth-of-type(1):checked ~ .phx-tabbar .phx-tabbtn-accent:nth-of-type(1) { background: #027872 !important; border-color: #027872 !important; color: #fff !important; }
.phx-tab-radio:nth-of-type(2):checked ~ .phx-tabbar .phx-tabbtn-accent:nth-of-type(2) { background: #49A9A8 !important; border-color: #49A9A8 !important; color: #fff !important; }
.phx-tab-radio:nth-of-type(3):checked ~ .phx-tabbar .phx-tabbtn-accent:nth-of-type(3) { background: #FEAB37 !important; border-color: #FEAB37 !important; color: #fff !important; }
.phx-tab-radio:nth-of-type(4):checked ~ .phx-tabbar .phx-tabbtn-accent:nth-of-type(4) { background: #70BF4A !important; border-color: #70BF4A !important; color: #fff !important; }
.phx-tab-radio:nth-of-type(1):checked ~ .phx-tabbar .phx-tabbtn-accent:nth-of-type(1) span,
.phx-tab-radio:nth-of-type(2):checked ~ .phx-tabbar .phx-tabbtn-accent:nth-of-type(2) span,
.phx-tab-radio:nth-of-type(3):checked ~ .phx-tabbar .phx-tabbtn-accent:nth-of-type(3) span,
.phx-tab-radio:nth-of-type(4):checked ~ .phx-tabbar .phx-tabbtn-accent:nth-of-type(4) span { color: #fff !important; }