/*! Green Guides — Tailwind CSS compilado (v3 compatible, sin CDN)
 *  Generado a partir del análisis completo de index.html + pages/nosotros.html
 *  Tokens personalizados según tailwind.config.js del proyecto
 * ------------------------------------------------------------------ */

/* ── PREFLIGHT (reset base de Tailwind) ── */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #b8b8b0; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: Inter, ui-sans-serif, system-ui, sans-serif; scroll-behavior: smooth; }
body { margin: 0; line-height: inherit; }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; } sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; }
:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }
blockquote, dl, dd, hr, figure, p, pre { margin: 0; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: #6f6f67; }
button, [role='button'] { cursor: pointer; }
:disabled { cursor: default; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none; }

/* ── LAYOUT & DISPLAY ── */
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none !important; }
.table { display: table; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.place-items-center { place-items: center; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0px; }
.top-0 { top: 0px; }
.top-4 { top: 1rem; }
.top-28 { top: 7rem; }
.right-4 { right: 1rem; }
.left-0 { left: 0px; }
.right-0 { right: 0px; }
.-right-10 { right: -2.5rem; }
.-bottom-10 { bottom: -2.5rem; }

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.visibility-hidden { visibility: hidden; }

/* ── SIZING ── */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-32 { width: 8rem; }
.h-1 { height: 0.25rem; }
.h-9 { height: 2.25rem; }
.h-11 { height: 2.75rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-28 { height: 7rem; }

.min-h-\[90vh\] { min-height: 90vh; }
.min-h-\[70vh\] { min-height: 70vh; }
.min-h-\[520px\] { min-height: 520px; }
.min-h-\[160px\] { min-height: 160px; }
.min-h-\[320px\] { min-height: 320px; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-container-max { max-width: 1280px; }
.max-h-24 { max-height: 6rem; }
.max-h-20 { max-height: 5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── SPACING — PADDING ── */
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-14 { padding: 3.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-margin-mobile { padding-left: 20px; padding-right: 20px; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-section-gap { padding-top: 120px; padding-bottom: 120px; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-20 { padding-top: 5rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }

/* ── SPACING — MARGIN ── */
.mt-0\.5 { margin-top: 0.125rem; }
.mt-8 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-gutter { margin-bottom: 24px; }

/* ── SPACING — GAP ── */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-16 { gap: 4rem; }
.gap-gutter { gap: 24px; }

/* ── SPACING — SPACE ── */
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

/* ── GRID ── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-\[220px_1fr\] { grid-template-columns: 220px 1fr; }
.col-span-2 { grid-column: span 2 / span 2; }

/* ── TYPOGRAPHY — FONT FAMILY ── */
.font-body-md  { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.font-body-lg  { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.font-body-sm  { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.font-headline-sm   { font-family: 'Hanken Grotesk', ui-sans-serif, sans-serif; }
.font-headline-md   { font-family: 'Hanken Grotesk', ui-sans-serif, sans-serif; }
.font-display-lg    { font-family: 'Hanken Grotesk', ui-sans-serif, sans-serif; }
.font-display-lg-mobile { font-family: 'Hanken Grotesk', ui-sans-serif, sans-serif; }
.font-label-caps    { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.font-bold { font-weight: 700; }

/* ── TYPOGRAPHY — FONT SIZE + LINE HEIGHT ── */
.text-headline-sm   { font-size: 24px; line-height: 32px; font-weight: 500; }
.text-headline-md   { font-size: 32px; line-height: 40px; letter-spacing: -0.01em; font-weight: 500; }
.text-display-lg    { font-size: 64px; line-height: 72px; letter-spacing: -0.02em; font-weight: 600; }
.text-display-lg-mobile { font-size: 40px; line-height: 48px; letter-spacing: -0.01em; font-weight: 600; }
.text-label-caps    { font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 500; }
.text-body-md  { font-size: 16px; line-height: 24px; font-weight: 400; }
.text-body-lg  { font-size: 18px; line-height: 28px; font-weight: 400; }
.text-body-sm  { font-size: 14px; line-height: 20px; font-weight: 400; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-\[10px\] { font-size: 10px; }
.text-\[20px\] { font-size: 20px; }
.text-\[28px\] { font-size: 28px; }
.text-\[32px\] { font-size: 32px; }
.text-\[48px\] { font-size: 48px; }
.leading-tight { line-height: 1.25; }
.leading-none  { line-height: 1; }
.tracking-widest { letter-spacing: 0.1em; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }
.whitespace-nowrap { white-space: nowrap; }
.object-contain { object-fit: contain; }
.appearance-none { appearance: none; }
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }

/* ── COLORS — CUSTOM PALETTE ── */
/* Backgrounds */
.bg-surface              { background-color: #eaeae2; }
.bg-surface-dim          { background-color: #d5d4cd; }
.bg-surface-bright       { background-color: #eaeae2; }
.bg-surface-variant      { background-color: #dfdfd8; }
.bg-surface-container         { background-color: #e4e4dd; }
.bg-surface-container-low     { background-color: #e4e4dd; }
.bg-surface-container-lowest  { background-color: #ffffff; }
.bg-surface-container-high    { background-color: #dfdfd8; }
.bg-surface-container-highest { background-color: #dfdfd8; }
.bg-primary          { background-color: #3d2606; }
.bg-primary-container { background-color: #5c3d20; }
.bg-secondary        { background-color: #4c5e3d; }
.bg-secondary-container { background-color: #c8d5c3; }
.bg-tertiary         { background-color: #999a86; }
.bg-tertiary-container { background-color: #a8a998; }
.bg-tertiary-fixed   { background-color: #d9cbb8; }
.bg-on-background    { background-color: #1a1a17; }
.bg-white            { background-color: #ffffff; }
/* Opacity variants */
.bg-surface\/95  { background-color: rgb(234 234 226 / 0.95); }
.bg-surface\/100 { background-color: rgb(234 234 226 / 1); }
.bg-surface\/80  { background-color: rgb(234 234 226 / 0.8); }
.bg-surface-container-lowest\/80 { background-color: rgb(255 255 255 / 0.8); }
.bg-secondary\/5  { background-color: rgb(76 94 61 / 0.05); }
.bg-secondary\/10 { background-color: rgb(76 94 61 / 0.1); }
.bg-secondary\/20 { background-color: rgb(76 94 61 / 0.2); }
.bg-white\/90 { background-color: rgb(255 255 255 / 0.9); }
.bg-white\/95 { background-color: rgb(255 255 255 / 0.95); }
.bg-white\/15 { background-color: rgb(255 255 255 / 0.15); }
/* Arbitrary bg */
.bg-\[rgba\(14\2c74\2c44\2c0\.16\)\]  { background-color: rgba(14,74,44,0.16); }
.bg-\[rgba\(234\2c234\2c226\2c0\.92\)\] { background-color: rgba(234,234,226,0.92); }
.bg-\[rgba\(236\2c247\2c240\2c0\.92\)\] { background-color: rgba(236,247,240,0.92); }

/* Text colors */
.text-on-surface         { color: #1a1a17; }
.text-on-surface-variant { color: #4a4a42; }
.text-on-background      { color: #1a1a17; }
.text-on-primary         { color: #ffffff; }
.text-on-secondary       { color: #ffffff; }
.text-on-secondary-container { color: #515c4f; }
.text-on-tertiary        { color: #ffffff; }
.text-primary            { color: #3d2606; }
.text-secondary          { color: #4c5e3d; }
.text-tertiary           { color: #999a86; }
.text-secondary\/40      { color: rgb(76 94 61 / 0.4); }
.text-on-surface\/70     { color: rgb(26 26 23 / 0.7); }

/* Border colors */
.border-outline-variant      { border-color: #b8b8b0; }
.border-outline-variant\/20  { border-color: rgb(184 184 176 / 0.2); }
.border-outline-variant\/30  { border-color: rgb(184 184 176 / 0.3); }
.border-outline-variant\/40  { border-color: rgb(184 184 176 / 0.4); }
.border-outline-variant\/50  { border-color: rgb(184 184 176 / 0.5); }
.border-outline              { border-color: #6f6f67; }
.border-outline\/20          { border-color: rgb(111 111 103 / 0.2); }
.border-outline\/30          { border-color: rgb(111 111 103 / 0.3); }
.border-secondary\/20        { border-color: rgb(76 94 61 / 0.2); }
.border-secondary\/30        { border-color: rgb(76 94 61 / 0.3); }
.border-secondary            { border-color: #4c5e3d; }

/* ── BORDERS ── */
.border   { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border-4 { border-width: 4px; }
.border-2 { border-width: 2px; }

/* ── BORDER RADIUS (custom config overrides defaults) ── */
.rounded        { border-radius: 0.125rem; }  /* DEFAULT */
.rounded-lg     { border-radius: 0.25rem; }
.rounded-xl     { border-radius: 0.5rem; }
.rounded-2xl    { border-radius: 1rem; }
.rounded-full   { border-radius: 0.75rem; }   /* custom full = 0.75rem */
.rounded-\[1\.25rem\] { border-radius: 1.25rem; }

/* ── SHADOWS ── */
.shadow-md  { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.shadow-\[0_24px_64px_rgba\(76\2c94\2c61\2c0\.12\)\] { box-shadow: 0 24px 64px rgba(76,94,61,0.12); }
.shadow-\[0_20px_60px_rgba\(0\2c80\2c38\2c0\.08\)\]  { box-shadow: 0 20px 60px rgba(0,80,38,0.08); }
.shadow-\[0_18px_30px_rgba\(76\2c94\2c61\2c0\.12\)\] { box-shadow: 0 18px 30px rgba(76,94,61,0.12); }

/* ── OPACITY ── */
.opacity-5  { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-60 { opacity: 0.6; }
.opacity-90 { opacity: 0.9; }
.opacity-1  { opacity: 1; }

/* ── GRADIENT / BACKDROP ── */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-surface { --tw-gradient-from: #eaeae2; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(234 234 226 / 0)); }
.via-surface\/80 { --tw-gradient-stops: var(--tw-gradient-from), rgb(234 234 226 / 0.8), var(--tw-gradient-to, rgb(234 234 226 / 0)); }
.via-surface\/85 { --tw-gradient-stops: var(--tw-gradient-from), rgb(234 234 226 / 0.85), var(--tw-gradient-to, rgb(234 234 226 / 0)); }
.to-transparent  { --tw-gradient-to: transparent; }
.to-surface\/50  { --tw-gradient-to: rgb(234 234 226 / 0.5); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ── TRANSITIONS ── */
.transition-all    { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-opacity   { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

/* ── INTERACTIVITY ── */
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }

/* ── SCALE / TRANSFORM ── */
.active\:scale-95:active { transform: scale(0.95); }
.scale-95 { transform: scale(0.95); }

/* ── FOCUS RING ── */
.focus\:border-secondary:focus { border-color: #4c5e3d; }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px #4c5e3d; }
.focus\:ring-secondary:focus { --tw-ring-color: #4c5e3d; }

/* ── HOVER STATES ── */
.hover\:text-secondary:hover     { color: #4c5e3d; }
.hover\:text-on-surface:hover    { color: #1a1a17; }
.hover\:text-on-secondary:hover  { color: #ffffff; }
.hover\:bg-secondary:hover       { background-color: #4c5e3d; }
.hover\:bg-secondary-container:hover { background-color: #c8d5c3; }
.hover\:bg-secondary\/10:hover   { background-color: rgb(76 94 61 / 0.1); }
.hover\:bg-secondary\/20:hover   { background-color: rgb(76 94 61 / 0.2); }
.hover\:border-secondary:hover   { border-color: #4c5e3d; }
.hover\:opacity-10:hover         { opacity: 0.1; }

/* ── GROUP / GROUP-HOVER ── */
.group { /* marker class */ }
.group:hover .group-hover\:bg-secondary     { background-color: #4c5e3d; }
.group:hover .group-hover\:text-on-secondary { color: #ffffff; }
.group:hover .group-hover\:border-secondary  { border-color: #4c5e3d; }
.group:hover .group-hover\:translate-x-1    { transform: translateX(0.25rem); }
.group:hover .group-hover\:opacity-10       { opacity: 0.1; }

/* ── DARK MODE ── */
.dark .dark\:bg-on-background\/95  { background-color: rgb(26 26 23 / 0.95); }
.dark .dark\:bg-on-background      { background-color: #1a1a17; }
.dark .dark\:border-outline\/20    { border-color: rgb(111 111 103 / 0.2); }
.dark .dark\:border-outline\/30    { border-color: rgb(111 111 103 / 0.3); }
.dark .dark\:text-outline-variant  { color: #b8b8b0; }
.dark .dark\:text-secondary-fixed  { color: #c8d5c3; }

/* ── TERTIARY BG OPACITY ── */
.bg-tertiary-fixed\/30 { background-color: rgb(217 203 184 / 0.3); }

/* ── ON-SECONDARY-CONTAINER OPACITY ── */
.text-on-secondary-container\/80 { color: rgb(81 92 79 / 0.8); }

/* ── SCROLL ── */
.scroll-smooth { scroll-behavior: smooth; }

/* ── RESPONSIVE — sm (≥640px) ── */
@media (min-width: 640px) {
  .sm\:inline-flex { display: inline-flex !important; }
  .sm\:block { display: block !important; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── RESPONSIVE — md (≥768px) ── */
@media (min-width: 768px) {
  .md\:flex   { display: flex !important; }
  .md\:hidden { display: none !important; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .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\:col-span-2  { grid-column: span 2 / span 2; }
  .md\:p-10 { padding: 2.5rem; }
  .md\:p-14 { padding: 3.5rem; }
}

/* ── RESPONSIVE — lg (≥1024px) ── */
@media (min-width: 1024px) {
  .lg\:block  { display: block !important; }
  .lg\:flex   { display: flex !important; }
  .lg\:hidden { display: none !important; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:items-center { align-items: center; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-\[220px_1fr\] { grid-template-columns: 220px 1fr; }
  .lg\:px-margin-desktop { padding-left: 64px; padding-right: 64px; }
  .lg\:font-display-lg    { font-family: 'Hanken Grotesk', ui-sans-serif, sans-serif; }
  .lg\:text-display-lg    { font-size: 64px; line-height: 72px; letter-spacing: -0.02em; font-weight: 600; }
  .lg\:font-headline-md   { font-family: 'Hanken Grotesk', ui-sans-serif, sans-serif; }
  .lg\:text-headline-md   { font-size: 32px; line-height: 40px; letter-spacing: -0.01em; font-weight: 500; }
}

/* ── RESPONSIVE — xl (≥1280px) ── */
@media (min-width: 1280px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── FORMS PLUGIN — basic resets for inputs/select/textarea ── */
[type='text'], [type='email'], [type='url'], [type='password'],
[type='number'], [type='date'], [type='datetime-local'],
[type='month'], [type='search'], [type='tel'], [type='time'],
[type='week'], textarea, select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border-color: #b8b8b0;
  border-width: 1px;
  border-radius: 0.125rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #1a1a17;
}
[type='text']:focus, [type='email']:focus, [type='url']:focus,
[type='password']:focus, [type='number']:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px #4c5e3d;
  border-color: #4c5e3d;
}