/* =====================================================================
   Coy Landscape and Maintenance - site stylesheet
   ---------------------------------------------------------------------
   Rewritten 2026-05-11 from the original 2011 fixed-width design.
   Goals:  same visual look (palette, typography, banner + decorative
           imagery), responsive down to phone widths, no inline styles
           in markup, no dead IE-7/Flash baggage.
   ===================================================================== */

/* --- Reset (merged from the old reset.css) ------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li,
form, label, input, textarea, button, header, footer, nav, main,
section, article, aside, small { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font: inherit; }
a { color: inherit; text-decoration: none; }

/* --- Design tokens -------------------------------------------------- */
:root {
    --coy-green-dark:   #006c00;
    --coy-green:        #008000;
    --coy-green-light:  #3fce3f;
    --coy-green-tint:   #ebf9c7;
    --coy-gold:         #baa300;
    --coy-gold-deep:    #b8a100;
    --coy-gold-soft:    #cab900;
    --coy-gold-tint:    #fffad5;
    --coy-gray-tint:    #f1f1f1;
    --coy-gray-tint-2:  #f6f6f6;
    --coy-text:         #383838;
    --coy-text-muted:   #7a7a7a;
    --coy-text-soft:    #8c8c8c;
    --coy-border:       #b9b9b9;
    --coy-cream:        #fafafa;
    --coy-form-dark:    #3b3b3b;
    --coy-page-max:     1000px;
    --coy-stripe-bg:    url("../img/fondorayado.jpg");
}

/* --- Page chrome ---------------------------------------------------- */
html, body { height: 100%; }
body {
    background: #fff var(--coy-stripe-bg);
    font-family: Arial, Helvetica, sans-serif;
    color: var(--coy-text);
    font-size: 14px;
    line-height: 1.5;
    /* Initial page fade-in still runs once on first full load so the
       first paint isn't jarring. Subsequent navigations are AJAXed
       and only fade the .site-main content pane (header + footer
       stay put) - see .site-main transitions below. */
    animation: pageFadeIn 320ms ease-out both;
}
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }

.site-wrap {
    background: #fff;
    max-width: var(--coy-page-max);
    margin: 0 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- Header --------------------------------------------------------- */
/* Header is tight around the right-side meta block (Login + phone).
   The logo is taller than the meta, so it overflows the header
   bottom and visually sits down into the left side of the nav
   strip - matching the original 2011 design where the green
   nav-bar wraps under the lower portion of the logo. The nav's
   negative margin-top pulls the tabs up next to the meta block. */
.site-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 40px 0;
    gap: 16px;
}
/* z-index on the logo specifically (not the whole header) so the
   logo overlays the green strip on the left, but the rest of the
   header doesn't block pointer events on the nav tabs underneath. */
.site-logo {
    position: relative;
    z-index: 2;
}
.site-logo img { width: 252px; height: auto; display: block; }
.site-header-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding-top: 4px;
}
.phone-callout {
    color: var(--coy-green);
    font-weight: bold;
    font-size: 22px;
    background: url("../img/telefono.jpg") no-repeat 0 center;
    padding-left: 30px;
    line-height: 32px;
    margin: 0;
}
.phone-callout strong {
    color: var(--coy-text);
    font-size: 28px;
    margin-left: 6px;
}
.btn-login {
    display: inline-block;
    background: var(--coy-green-dark);
    color: var(--coy-cream);
    font-weight: bold;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.2;
}
.btn-login:hover { background: var(--coy-green); }

/* --- Navigation ----------------------------------------------------- */
/* Two distinct rows in one <nav>:
   1. Top (.nav-menu): tabs row, white background, gray-pill inactive
      tabs + green-pill active tab. No green behind the tabs.
   2. Bottom: a 30px green strip that SPANS the full width of the
      page. Submenu items inside it left-align to the leftmost tab
      (Home) - achieved by wrapping the visible items in .nav-wrap
      (same width as the tabs row) and painting the full-width green
      band via .site-nav::after, so the bar background extends past
      the wrap on the left into the rest of the page. */
.site-nav {
    position: relative;
    display: flex;
    justify-content: flex-end;
    background: #fff;
    /* Pull the nav up so the tabs row sits beside the lower portion
       of the logo. -26px (tabs row height minus a 10px buffer) leaves
       a 10px white band below the logo before the green submenu strip
       starts, while tabs still seat flush on top of the green strip. */
    margin-top: -26px;
    z-index: 1;
}
.site-nav::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: var(--coy-green) url("../img/barrasubmenu.jpg") repeat 0 0;
    z-index: 0;
}
.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: var(--coy-cream);
    font-size: 24px;
    padding: 10px 16px;
}
.nav-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1; /* sit above the green ::after band so items render on it */
    /* No gap between tabs and the green strip - tabs sit flush on top
       of it. The visible space below the logo is created via a less
       aggressive .site-nav margin-top below (so the tabs/strip land
       further down the page than the logo bottom). */
}
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}
.nav-menu > li > a {
    display: block;
    padding: 8px 18px;
    color: #555;
    /* Soft top-to-bottom gradient matches the look of the original
       botongris.jpg without the baked-in dark bottom edge. */
    background: linear-gradient(to bottom, #e0e0e0 0%, #b6b6b6 100%);
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
}
.nav-menu > li > a:hover {
    background: linear-gradient(to bottom, #d2d2d2 0%, #a4a4a4 100%);
    color: #333;
}
/* Active tab: solid mid-green that matches the submenu strip below
   for a "rooted into the bar" feel, less neon than --coy-green-light. */
.nav-menu > li.is-current > a {
    color: var(--coy-cream);
    background: var(--coy-green);
}
.nav-menu > li > a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
    background: url("../img/iconomenu_verde.png") no-repeat 0 2px;
}
.nav-menu > li.is-current > a::before {
    background-image: url("../img/iconomenu_blanco.png");
}

/* Subbar: 30px green strip below the tabs. Width matches .nav-menu
   width via .nav-wrap's column flex stretch behavior. Submenus inside
   are absolutely positioned to fill the bar, mutually exclusive: one
   is "persistent" (active section) by default, JS swaps in another
   while a tab is hovered. */
.nav-subbar {
    position: relative;
    height: 30px;
    /* No background here - the full-width green band comes from
       .site-nav::after, so the strip visually extends past the
       subbar's right edge into the rest of the page. */
}
.nav-submenu {
    display: none;
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    line-height: 30px;
}
.nav-submenu.is-persistent,
.nav-submenu.is-shown { display: block; }
.nav-submenu li { display: inline-block; }
.nav-submenu a {
    display: inline-block;
    color: #fff;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    line-height: 30px;
    padding: 0 14px 0 24px;
    background: url("../img/icono_submenu.png") no-repeat 4px center;
    transition: color 80ms ease;
}
.nav-submenu a:hover { color: var(--coy-gold-soft); }
/* Active page within the persistent submenu stays gold so the user
   always sees which subitem corresponds to the current page. */
.nav-submenu li.is-current a { color: var(--coy-gold-soft); }

/* --- Main ----------------------------------------------------------- */
.site-main {
    flex: 1;
    padding-bottom: 40px;
    /* Both transitions live on the base rule and run in parallel.
       Height transitions only fire when JS sets an explicit pixel
       height; the default height:auto can't be transitioned to/from
       so normal page resizing remains instant. */
    transition: opacity 220ms ease, height 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.site-main.is-leaving  { opacity: 0; }
.site-main.is-clipping { overflow: hidden; }

/* --- Banner image + title -------------------------------------------- */
.page-banner { position: relative; }
.page-banner img { width: 100%; height: auto; }
/* Specificity note: .site-main h1 elsewhere in this file applies
   color:var(--coy-gold) (dark gold) and padding:30px 0 0 30px
   (asymmetric). Without the .site-main prefix here, those win the
   cascade and the banner title renders dark + left-shifted. The
   .site-main .banner-title selector matches both rules at the same
   place in the cascade and beats .site-main h1 on class count. */
.site-main .banner-title {
    position: absolute;
    top: 55px;
    left: 0;
    background: transparent url("../img/fondotitulo_banner.png") repeat-x 0 0;
    color: #ffeb3b;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    font-weight: bold;
    font-size: 30px;
    /* The PNG background is 68px tall; padding-top+font+padding-bottom
       = 68 so the visible dark band matches the PNG exactly and the
       text sits at the band's vertical center. */
    padding: 19px 65px;
    line-height: 1;
    text-align: center;
}

/* --- Headings (content) --------------------------------------------- */
.site-main h1 { font-size: 30px; color: var(--coy-gold); padding: 30px 0 0 30px; }
.site-main h2 { font-size: 25px; color: var(--coy-text); padding: 20px 0 0 30px; }
.site-main h3 { font-size: 16px; color: var(--coy-green-dark); padding: 20px 0 5px 30px; }
.site-main h4 { font-size: 16px; color: var(--coy-green-dark); font-weight: bold; }
.site-main p {
    font-size: 13px;
    color: var(--coy-text-soft);
    padding: 20px 0 0 30px;
    text-align: justify;
    line-height: 22px;
}
.site-main h3 + p { padding-top: 0; }
.site-main a { color: var(--coy-gold); }
.site-main a:hover { text-decoration: underline; }

/* --- Content blocks ------------------------------------------------- */
.content-block {
    margin: 20px 30px 0;
    padding: 0 20px 20px;
    overflow: auto;
}
.content-block.tint-yellow    { background-color: var(--coy-gold-tint); }
.content-block.tint-green     { background-color: var(--coy-green-tint); }
.content-block.tint-gray      { background-color: var(--coy-gray-tint); }
.content-block.tint-lightgray { background-color: var(--coy-gray-tint-2); }

.decorative {
    float: right;
    width: 350px;
    min-height: 250px;
    margin: 20px 30px 20px 20px;
    background-repeat: no-repeat;
    background-position: 30px 20px;
}
.decorative.deco-maintenance   { background-image: url("../img/imag1.jpg"); min-height: 480px; }
.decorative.deco-construction  { background-image: url("../img/img6.jpg"); }
.decorative.deco-industries    { background-image: url("../img/imag3.jpg"); min-height: 650px; }
.decorative.deco-trees         { background-image: url("../img/imag2.jpg"); min-height: 650px; }
.decorative.deco-story         { background-image: url("../img/imag3.jpg"); min-height: 650px; }
.decorative.deco-news          { background-image: url("../img/imag4.jpg"); min-height: 250px; }
.decorative.deco-plant         { background-image: url("../img/planta.jpg"); min-height: 250px; }

/* --- Project / box cards (projects.aspx) ---------------------------- */
.project-card {
    margin: 20px 30px 0;
    padding: 20px;
    overflow: auto;
}
.project-card.tint-yellow    { background-color: var(--coy-gold-tint); }
.project-card.tint-green     { background-color: var(--coy-green-tint); }
.project-card.tint-gray      { background-color: var(--coy-gray-tint); }
.project-card.tint-lightgray { background-color: var(--coy-gray-tint-2); }
.project-card img.left  { float: left;  margin: 0 20px 20px 0; max-width: 40%; }
.project-card img.right { float: right; margin: 0 0 20px 20px; max-width: 40%; }
.project-card p { padding-top: 20px; line-height: 1.4em; color: var(--coy-text-muted); }

/* --- Homepage: hero + 3-column row (services / about / quote form) -- */
.home-hero { width: 100%; height: auto; }

.home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 24px;
    padding: 24px 30px 30px;
    align-items: start;
}
.home-col h2 {
    padding: 0 0 12px;
    font-size: 22px;
    color: var(--coy-green);
    font-weight: bold;
}
.home-col p {
    padding: 0;
    font-size: 13px;
    color: var(--coy-text-soft);
    text-align: justify;
    line-height: 1.6;
}
.home-col p + p { margin-top: 12px; }
.home-col.with-separator {
    background: url("../img/sombra_separador.jpg") no-repeat right top;
    padding-right: 18px;
}
.icon-list { list-style: none; padding: 0; margin: 0; }
.icon-list li {
    height: 19px;
    line-height: 19px;
    margin-top: 6px;
    padding-left: 22px;
    font-size: 14px;
    color: var(--coy-text-soft);
    font-weight: bold;
    background: url("../img/iconos_coy.png") no-repeat 0 0;
}
.icon-list li:nth-child(1) { background-position: 0 0; }
.icon-list li:nth-child(2) { background-position: 0 -19px; }
.icon-list li:nth-child(3) { background-position: 0 -38px; }
.icon-list li:nth-child(4) { background-position: 0 -57px; }
.icon-list li:nth-child(5) { background-position: 0 -76px; }
.icon-list li:nth-child(6) { background-position: 0 -95px; }
.icon-list li:nth-child(7) { background-position: 0 -114px; }
.icon-list li:nth-child(8) { background-position: 0 -133px; }
.icon-list li:nth-child(9) { background-position: 0 -152px; }

/* --- Forms ---------------------------------------------------------- */
.contact-form input[type=text],
.contact-form textarea {
    border: 1px solid var(--coy-border);
    color: #555;
    padding: 5px 8px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.contact-form textarea { min-height: 80px; resize: vertical; line-height: 1.4; }
.contact-form .form-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.contact-form .form-row > div { flex: 1 1 160px; min-width: 0; }
.contact-form label {
    display: block;
    margin-top: 8px;
    margin-bottom: 2px;
    font-weight: bold;
    font-size: 13px;
}
.contact-form .submit { margin-top: 14px; text-align: center; }
.contact-form button[type=button],
.contact-form button[type=submit] {
    background: var(--coy-green);
    color: var(--coy-cream);
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 15px;
    padding: 10px 28px;
    border: 0;
    border-radius: 3px;
    transition: background-color 80ms ease;
}
.contact-form button[type=button]:hover,
.contact-form button[type=submit]:hover {
    background: var(--coy-green-dark);
}
.contact-form .cf-turnstile {
    margin-top: 12px;
    max-height: 100px;
    overflow: hidden;
    transition: opacity 350ms ease, max-height 350ms ease 100ms, margin 350ms ease 100ms;
}
/* After Turnstile fires its success callback we add .is-verified to
   collapse the widget gracefully - opacity fades first, then height
   and margins reduce to zero. The token is already in the hidden
   cf-turnstile-response input so submission still works. */
.contact-form .cf-turnstile.is-verified {
    opacity: 0;
    max-height: 0;
    margin: 0;
    pointer-events: none;
}
.contact-form .captcha-warning {
    margin: 12px 0;
    padding: 10px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    font-size: 13px;
}
.contact-form .form-message {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
}
.contact-form .form-message-error    { background: #f8d7da; border: 1px solid #dc3545; color: #58151c; }
.contact-form .form-message-success  { background: #d1e7dd; border: 1px solid #198754; color: #0a3622; }
.contact-form .form-message-sending  { background: #cfe2ff; border: 1px solid #0d6efd; color: #052c65; }

/* Contact Us page: dark form panel on left, image on right (responsive). */
.contact-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 24px 30px;
    align-items: flex-start;
}
.contact-form-panel {
    flex: 1 1 320px;
    max-width: 460px;
    background: var(--coy-form-dark);
    color: var(--coy-cream);
    padding: 18px 22px;
    border-radius: 4px;
}
.contact-form-panel h2,
.contact-form-panel p,
.contact-form-panel label {
    color: var(--coy-cream);
    padding: 0;
}
.contact-form-panel h2 { font-size: 18px; padding: 0 0 4px; font-weight: bold; }
.contact-form-panel p  { font-size: 13px; padding: 0 0 8px; text-align: left; line-height: 1.4; }
.contact-form-panel label { color: var(--coy-cream); }
.contact-side-image {
    flex: 1 1 400px;
    max-width: 100%;
    align-self: stretch;
}
.contact-side-image img { width: 100%; height: auto; border-radius: 4px; }

/* Homepage quote form: gold panel as the third column of .home-grid. */
.home-quote {
    background: var(--coy-gold-deep);
    color: var(--coy-cream);
    padding: 16px 18px 18px;
    border-radius: 4px;
}
.home-quote h2 {
    color: var(--coy-cream);
    padding: 0 0 8px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 1.25;
}
.home-quote label { color: var(--coy-cream); }
.home-quote .submit { margin-top: 10px; }
/* Submit button on the home quote panel uses a slightly different green
   accent so it pops against the gold background. */
.home-quote button[type=button] { font-size: 14px; padding: 8px 24px; }

/* Careers form: full-width, lighter styling. */
.careers-form { padding: 16px 30px; max-width: 640px; }

/* Mission page: values bullet list. */
.values-list {
    margin: 20px 0 0 30px;
    font-size: 13px;
    color: var(--coy-text-soft);
    line-height: 22px;
}
.values-list li { padding-bottom: 10px; text-align: justify; }
.values-list strong { font-weight: bold; }

/* --- Footer --------------------------------------------------------- */
/* The imagenfooter.jpg banner is 1000x100 with a potted-plant icon at
   the left edge and a daisy at the right edge - the text is meant to
   sit in the dark green strip between them, so left/right padding
   keeps it clear of both icons. On narrow screens we drop the banner
   image and use solid green so the content can stack legibly. */
.site-footer {
    position: relative;
    background: var(--coy-green-dark) url("../img/imagenfooter.jpg") no-repeat center top;
    background-size: 1000px 100px;
    color: var(--coy-cream);
    height: 100px;
    /* Plant pot ends ~x=100 on the left; daisy moved to x=955-995
       right edge in imagenfooter.jpg, so the link nav at the right
       has clear space up to ~x=950.
       The footer image's dark-green band runs y=38-78; padding-top of
       16px shifts the flex-centered content from the geometric middle
       (y=50) down to the band middle (y=58) so text sits cleanly on
       the dark stripe instead of straddling the lighter bands above. */
    padding: 16px 60px 0 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    line-height: 1.4;
}
.site-footer a       { color: var(--coy-cream); }
.site-footer a:hover { text-decoration: underline; }
.site-footer a.alt   { color: var(--coy-gold-soft); }
.footer-links { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.footer-links a + a::before { content: "| "; color: var(--coy-cream); }
.footer-disclaimer { flex: 1 1 auto; padding-right: 24px; }
.footer-disclaimer .copyright { color: var(--coy-gold-soft); display: block; font-weight: bold; }

/* --- Responsive: tablet (<= 768px) and phone (<= 480px) ------------- */
@media (max-width: 768px) {
    .site-header { flex-direction: column; align-items: center; padding: 12px 16px; gap: 12px; }
    .phone-callout { font-size: 18px; }
    .phone-callout strong { font-size: 22px; }

    .site-header-meta { align-items: center; }

    /* Reset desktop overlap: on mobile the nav sits below the header
       in normal flow with no negative margin, and the green sub-strip
       is hidden entirely (submenus collapse inline under their parent
       in the expanded menu). */
    .site-nav {
        margin-top: 0;
        background: var(--coy-green);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
    .site-nav::after { display: none; }
    .nav-wrap { width: 100%; }
    .nav-toggle {
        display: block;
        width: 100%;
        text-align: left;
        padding: 12px 20px;
        color: #fff;
    }
    .nav-menu {
        display: none;
        flex-direction: column;
        gap: 0;
        background: var(--coy-green);
    }
    .site-nav.is-open .nav-menu { display: flex; }
    .nav-menu > li > a {
        background: transparent;
        color: #fff;
        padding: 10px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    .nav-menu > li > a:hover {
        background: rgba(0,0,0,0.15);
        color: #fff;
    }
    .nav-menu > li.is-current > a {
        background: var(--coy-green-dark);
        color: #fff;
    }
    .nav-menu > li > a::before { display: none; }
    /* Submenus: in the new structure the .nav-subbar with absolute
       submenus doesn't translate well to a stacked phone view.
       Simplest: hide it entirely on mobile - users can tap into the
       section page to see its sub-pages. */
    .nav-subbar { display: none; }

    .site-main .banner-title { top: 20px; padding: 12px 30px; font-size: 22px; }

    .site-main h1, .site-main h2, .site-main h3, .site-main p,
    .content-block, .project-card, .home-grid, .contact-layout,
    .careers-form { padding-left: 16px; padding-right: 16px; }
    .content-block, .project-card { margin-left: 16px; margin-right: 16px; }

    .decorative { float: none; width: auto; margin: 16px; min-height: 250px; background-size: contain; }
    .project-card img.left, .project-card img.right { float: none; max-width: 100%; margin: 0 0 16px 0; }

    /* Home: collapse 3-col grid to single stack on phones. */
    .home-grid { grid-template-columns: 1fr; gap: 16px; }
    .home-col.with-separator { background: none; padding-right: 0; }

    /* Footer banner image only makes sense at 1000px; on narrow screens
       drop the icons and let the disclaimer + links stack on solid green. */
    .site-footer {
        background-image: none;
        height: auto;
        padding: 18px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .footer-disclaimer { padding-right: 0; }
}

@media (max-width: 480px) {
    .site-main h1 { font-size: 22px; }
    .site-main h2 { font-size: 20px; }
    .site-main .banner-title { font-size: 18px; padding: 8px 20px; top: 10px; }
    .contact-form button[type=button] { font-size: 18px; padding: 10px 24px; }
}