/*
Theme Name: Elleva
Theme URI: https://ellevaclinic.rd
Author: Elleva Clinic
Author URI: https://ellevaclinic.rd
Description: Tema a medida para Elleva Clinic — centro de transformacion estetica y funcional en Bonao, Republica Dominicana. Landing page de una sola pagina construida con tipografia Gemola y una paleta editorial en tonos tierra.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: elleva
*/

@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap";@layer components;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-content:""}}}@layer theme{:root,:host{--font-sans:"DM Sans", system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--container-xl:36rem;--container-4xl:56rem;--container-6xl:72rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:"DM Sans", system-ui, sans-serif;--default-mono-font-family:var(--font-mono);--font-display:"Gemola", "Iowan Old Style", Georgia, serif}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.right-0{right:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-50{z-index:50}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.mx-auto{margin-inline:auto}.mb-16{margin-bottom:calc(var(--spacing) * 16)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-\[460px\]{height:460px}.h-full{height:100%}.w-full{width:100%}.max-w-4xl{max-width:var(--container-4xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-xl{max-width:var(--container-xl)}.flex-shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-7{gap:calc(var(--spacing) * 7)}.gap-9{gap:calc(var(--spacing) * 9)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-12{gap:calc(var(--spacing) * 12)}.gap-14{gap:calc(var(--spacing) * 14)}.gap-16{gap:calc(var(--spacing) * 16)}.gap-px{gap:1px}.overflow-hidden{overflow:hidden}.border{border-style:var(--tw-border-style);border-width:1px}.p-1{padding:calc(var(--spacing) * 1)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-24{padding-block:calc(var(--spacing) * 24)}.py-28{padding-block:calc(var(--spacing) * 28)}.pt-16{padding-top:calc(var(--spacing) * 16)}.pb-10{padding-bottom:calc(var(--spacing) * 10)}.text-center{text-align:center}.italic{font-style:italic}.opacity-70{opacity:.7}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border-color\,transform\]{transition-property:border-color,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}@media (hover:hover){.group-hover\:text-\[\#5C3D2E\]:is(:where(.group):hover *){color:#5c3d2e}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.group-hover\:\[animation-play-state\:paused\]:is(:where(.group):hover *){animation-play-state:paused}.group-hover\/arrow\:translate-x-1:is(:where(.group\/arrow):hover *){--tw-translate-x:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:-bottom-0\.5:after{content:var(--tw-content);bottom:calc(var(--spacing) * -.5)}.after\:left-0:after{content:var(--tw-content);left:calc(var(--spacing) * 0)}.after\:h-px:after{content:var(--tw-content);height:1px}.after\:w-0:after{content:var(--tw-content);width:calc(var(--spacing) * 0)}.after\:bg-current:after{content:var(--tw-content);background-color:currentColor}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.after\:duration-300:after{content:var(--tw-content);--tw-duration:.3s;transition-duration:.3s}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}@media (hover:hover){.hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-t-\[\#5C3D2E\]:hover{border-top-color:#5c3d2e}.hover\:bg-\[\#1B1512\]:hover{background-color:#1b1512}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:opacity-100:hover{opacity:1}.hover\:after\:w-full:hover:after{content:var(--tw-content);width:100%}}@media (width>=48rem){.md\:sticky{position:sticky}.md\:top-32{top:calc(var(--spacing) * 32)}.md\:col-span-6{grid-column:span 6/span 6}.md\:flex{display:flex}.md\:hidden{display:none}.md\:inline-flex{display:inline-flex}.md\:h-\[560px\]{height:560px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-8{gap:calc(var(--spacing) * 8)}.md\:gap-16{gap:calc(var(--spacing) * 16)}.md\:py-20{padding-block:calc(var(--spacing) * 20)}.md\:py-32{padding-block:calc(var(--spacing) * 32)}.md\:py-36{padding-block:calc(var(--spacing) * 36)}.md\:pt-20{padding-top:calc(var(--spacing) * 20)}}.\[\&_img\]\:transition-transform img{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\[\&_img\]\:duration-500 img{--tw-duration:.5s;transition-duration:.5s}@media (hover:hover){.group-hover\:\[\&_img\]\:scale-\[1\.04\]:is(:where(.group):hover *) img{scale:1.04}}}@font-face{font-family:Gemola;src:url(assets/fonts/Gemola.otf)format("opentype");font-weight:300 500;font-style:normal;font-display:swap}html,body,#root{background-color:#fdfbf8;height:100%}*{box-sizing:border-box}body{font-family:var(--font-sans);color:#1b1512;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}::-webkit-scrollbar{width:0}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.grain{pointer-events:none;z-index:9999;opacity:.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}@keyframes riseIn{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.rise-in{animation:.9s cubic-bezier(.16,1,.3,1) both riseIn}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-33.3334%)}}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[role=button]:focus-visible{outline-offset:3px;outline:1.5px solid #c9a876}input::placeholder,textarea::placeholder{color:currentColor;opacity:.45}.tabular{font-variant-numeric:tabular-nums}.field-line{background-image:linear-gradient(#c9a8764d,#c9a8764d),linear-gradient(#c9a876,#c9a876);background-position:0 100%,0 100%;background-repeat:no-repeat;background-size:100% 1px,0% 1px;transition:background-size .4s cubic-bezier(.16,1,.3,1)}.field-line:focus{background-size:100% 1px,100% 1px}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-content{syntax:"*";inherits:false;initial-value:""}

/* ─────────────────────────────────────────────────────────────
   Custom rules for stateful interactions (vanilla JS driven)
   These replace what was inline-style React state in the source
   ───────────────────────────────────────────────────────────── */

:root {
  --bg: #FDFBF8;
  --brown: #5C3D2E;
  --espresso: #4A3020;
  --taupe: #C9A876;
  --cream: #F1E8DA;
  --sand: #E9DECE;
  --ink: #1B1512;
  --muted: #8B7A6E;
  --border: #E1D3C0;
}

/* Nav */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background-color: var(--bg);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: all 0.35s ease;
}
.site-nav.is-scrolled {
  background-color: rgba(253, 251, 248, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px -18px rgba(27, 21, 18, 0.35);
}
.site-nav .nav-inner {
  height: 76px;
  transition: height 0.3s ease;
}
.site-nav.is-scrolled .nav-inner {
  height: 60px;
}
.nav-link {
  position: relative;
  padding: 4px 0;
  color: var(--ink);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  font-weight: 400;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.nav-link:hover { opacity: 1; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px; width: 0;
  background: currentColor;
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

.mobile-menu { display: none; }
.mobile-menu.is-open { display: flex; }

.hamburger-line {
  background-color: var(--brown);
  height: 1px;
  width: 22px;
  display: block;
  transition: transform 0.25s, opacity 0.2s;
}
.hamburger.is-open .hamburger-line:nth-child(1) { transform: rotate(45deg) translateY(5px); }
.hamburger.is-open .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }

/* Framed photo */
.framed-photo {
  background-color: var(--bg);
  padding: 7px;
  box-shadow: 0 24px 48px -24px rgba(27, 21, 18, 0.28);
}
.framed-photo .photo-inner {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.framed-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
}
.framed-photo .photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(20, 14, 11, 0.65));
  padding: 28px 16px 12px;
}
.framed-photo .photo-caption p {
  color: rgba(253, 251, 248, 0.92);
  font-size: 9px;
  letter-spacing: 0.18em;
}
.team-card:hover .framed-photo img { transform: scale(1.04); }

/* Method accordion */
.pillar {
  border-bottom: 1px solid rgba(201, 168, 118, 0.2);
  padding: 18px 0;
  width: 100%;
  text-align: left;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
  display: block;
}
.pillar-head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pillar-num {
  color: var(--taupe);
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.5;
  min-width: 24px;
  transition: opacity 0.3s;
}
.pillar-label {
  font-family: var(--font-display);
  color: var(--bg);
  font-size: 22px;
  font-weight: 300;
  flex: 1;
  transition: color 0.3s;
}
.pillar-icon {
  color: var(--taupe);
  opacity: 0.6;
  font-size: 15px;
  transition: transform 0.35s ease;
}
.pillar.is-open .pillar-num { opacity: 1; }
.pillar.is-open .pillar-label { color: var(--taupe); }
.pillar.is-open .pillar-icon { transform: rotate(135deg); }

.pillar-detail-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.pillar.is-open .pillar-detail-wrap { grid-template-rows: 1fr; }
.pillar-detail-inner { overflow: hidden; }
.pillar-detail {
  color: var(--taupe);
  opacity: 0.75;
  font-size: 13.5px;
  line-height: 1.7;
  font-weight: 300;
  padding: 10px 24px 0 44px;
  max-width: 420px;
}

/* Services card hover (state not expressible via Tailwind group alone since border color needs a CSS var) */
.service-card {
  background-color: var(--bg);
  padding: 40px 36px;
  border-top: 2px solid transparent;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.service-card:hover {
  border-top-color: var(--brown);
  transform: translateY(-4px);
}
.service-card .service-num {
  transition: opacity 0.3s ease, color 0.3s ease;
}
.service-card:hover .service-num {
  opacity: 1;
  color: var(--brown);
}

/* Contact form success state */
.form-success { display: none; }
.form-success.is-visible { display: block; }
.contact-form.is-hidden { display: none; }

@media (min-width: 768px) {
  .mobile-menu { display: none !important; }
}
