/* -------------------------------------------------------- */
/*           ARREDOVIVO - style.css  (geometric_structured) */
/* -------------------------------------------------------- */

/* RESET & NORMALIZE */
html {box-sizing:border-box;}
*, *::before, *::after {box-sizing:inherit; margin:0; padding:0; border:0;}
body {margin:0; min-height:100vh; font-size:16px; background:#F6EEE3; color:#4A463B; font-family:'Lato', Arial, sans-serif; font-smooth:always; -webkit-font-smoothing:antialiased;}
img, video {max-width:100%; height:auto; display:block;}
ul,ol {list-style: none;}
a {text-decoration:none; color:inherit;}
button {font-family:'Lato', Arial, sans-serif; background:none; cursor:pointer;}
:focus {outline:2px solid #8D7B64; outline-offset:2px;}

/* CUSTOM PROPERTIES (WITH FALLBACKS) */
:root {
  --color-primary: #4A463B;
  --color-secondary: #8D7B64;
  --color-accent: #F6EEE3;
  --color-bg: #F6EEE3;
  --color-bg-alt: #fff;
  --color-text: #4A463B;
  --color-text-dark: #29261E;
  --color-border: #8D7B64;
  --shadow-card: 0 2px 12px rgba(74,70,59,0.05), 0 1.5px 5px rgba(74,70,59,0.06);
  --radius: 16px;
  --transition: 0.3s cubic-bezier(.65,.05,.36,1);
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Lato', Arial, sans-serif;
  --section-spacing: 60px;
  --container-max: 1200px;
}

/* ---------------- LAYOUT CORE CLASSES ------------------- */
.container {
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding: 0 16px;
  display:flex;
  flex-direction:column;
}
.content-wrapper {
  margin:0 auto;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:flex-start;
}

.section {
  margin-bottom: 60px;
  padding: 40px 20px;
  background:var(--color-bg-alt);
  border-radius: var(--radius);
  box-shadow:0 2px 12px rgba(74,70,59,0.06);
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  margin-bottom:20px;
  position:relative;
  background:var(--color-bg-alt);
  border:1.5px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow: var(--shadow-card);
  transition:transform var(--transition), box-shadow var(--transition);
}
.card:hover,
.card:focus {
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 6px 28px rgba(141,123,100,0.12);
  z-index:2;
}

.content-grid {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:space-between;
}
.text-image-section {
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}
.testimonial-card {
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px;
  background:#fff;
  border-radius: 14px;
  border:1.5px solid var(--color-border);
  box-shadow:0 2px 8px rgba(74,70,59,0.07);
  margin-bottom:20px;
  min-width:0;
}
.feature-item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}

/* ------------- BRAND TYPOGRAPHY SCALE ------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing:0.01em;
}
h1 {font-size: 2.5rem; line-height:1.15; margin-bottom:12px;}
h2 {font-size: 2rem; margin-bottom:10px;}
h3 {font-size: 1.33rem; margin-bottom: 8px;}
h4 {font-size:1.125rem;}

@media (max-width:768px) {
  h1 {font-size: 2rem;}
  h2 {font-size:1.5rem;}
  h3 {font-size:1.1rem;}
}

p, blockquote, address, ul li, ol li {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size:1rem;
  line-height:1.67;
  margin-bottom:8px;
}
blockquote {
  font-style: italic;
  color: var(--color-secondary);
  border-left: 5px solid var(--color-primary);
  padding-left: 18px;
  background: #F6EEE3;
  border-radius: 10px;
}
strong {font-weight:700;}
em {font-style:italic;}

/* Lists */
ul,ol {
  padding-left:0;
  margin-bottom:8px;
}
ul li,ol li {margin-bottom:4px;}
ul li:last-child,ol li:last-child{margin-bottom:0;}

/* ------------- HEADER & NAVIGATION ---------------------- */
header {
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border);
  z-index:10;
  position:relative;
}
header .container {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height: 68px;
  padding: 0 16px;
}
header img {
  height:44px;
  width:auto;
  max-width:140px;
  margin-right: 12px;
}
.main-nav {
  display:flex;
  flex-direction:row;
  gap:32px;
  margin-left:12px;
}
.main-nav a {
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  padding: 6px 8px;
  border-radius:6px;
  transition:background var(--transition), color var(--transition);
}
.main-nav a:hover, .main-nav a:focus {
  background: var(--color-accent);
  color: var(--color-primary);
}
.cta-btn {
  font-family: var(--font-display);
  font-size:1.15rem;
  background: var(--color-secondary);
  color:#fff;
  padding: 11px 28px;
  border-radius: 22px;
  font-weight:700;
  margin-left:16px;
  box-shadow:0 2px 8px rgba(141,123,100,0.08);
  letter-spacing:0.05em;
  border:none;
  position:relative;
  z-index:2;
  transition:box-shadow var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}
.cta-btn:hover, .cta-btn:focus {
  background: var(--color-primary);
  color: #F6EEE3;
  box-shadow:0 6px 24px rgba(74,70,59,0.13);
  transform:translateY(-2px) scale(1.04);
}

/* ----- MOBILE BURGER MENU ----- */
.mobile-menu-toggle {
  display:none;
  background: var(--color-secondary);
  color:#fff;
  width:44px; height:44px;
  border-radius:12px;
  border:none;
  align-items:center;
  justify-content:center;
  font-size:2.0rem;
  position:relative;
  margin-left: auto;
  z-index:1002;
  transition:background var(--transition), color var(--transition), box-shadow var(--transition);
}
.mobile-menu-toggle:hover, .mobile-menu-toggle:focus {
  background: var(--color-primary);
  color:#F6EEE3;
  box-shadow:0 4px 18px rgba(74,70,59,0.13);
}
.mobile-menu {
  position:fixed;
  top:0; left:0;
  width:100vw;
  height:100vh;
  background:var(--color-bg);
  box-shadow:0 0 64px rgba(0,0,0,0.10);
  z-index:1200;
  transform:translateX(-100vw);
  transition:transform 0.38s cubic-bezier(.65,.05,.36,1);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  padding: 0 0 0 32px;
}
.mobile-menu.open {
  transform:translateX(0);
}
.mobile-menu-close {
  background:var(--color-primary);
  color:#fff;
  border-radius:10px;
  font-size:2.2rem;
  width:52px;
  height:52px;
  align-self:flex-end;
  margin:20px 20px 16px 0;
  z-index:1003;
  transition:background var(--transition), color var(--transition);
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
  background:var(--color-secondary);
  color:var(--color-accent);
}
.mobile-nav {
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:20px;
}
.mobile-nav a {
  font-size:1.2rem;
  font-family:var(--font-body);
  font-weight:700;
  padding:14px 0 14px 0;
  border-radius:10px;
  letter-spacing:0.02em;
  color:var(--color-primary);
  transition:background var(--transition), color var(--transition);
}
.mobile-nav a:hover, .mobile-nav a:focus {
  background:var(--color-accent);
  color:var(--color-secondary);
}

@media (max-width: 1080px) {
  .main-nav {gap:16px;}
}

@media (max-width: 900px) {
  .container {padding:0 10px;}
  header .container {padding:0 10px;}
  .main-nav {gap:10px;}
  .cta-btn {margin-left:8px;}
}

@media (max-width: 768px) {
  header .container {
    flex-direction:row;
    justify-content:space-between;
    gap:0;
  }
  .main-nav {
    display:none;
  }
  .cta-btn {
    display:none;
  }
  .mobile-menu-toggle {
    display:flex;
  }
}
/* For accessibility, when menu opens prevent scroll on body */
body.mobile-menu-open {overflow:hidden;}

/* ---------------- PAGE SECTIONS & COMPONENTS ------------- */
section {
  margin-bottom:60px;
  padding:40px 20px;
  position:relative;
}
@media (max-width: 768px) {
  section {
    margin-bottom:36px;
    padding:26px 5px;
  }
}

.text-section {
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
}

/* Features / Services */
.feature, .service, .category {
  background:#fff;
  border:1.5px solid var(--color-border);
  border-radius:12px;
  padding:26px 20px 20px 20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
  min-width:180px;
  box-shadow:var(--shadow-card);
  transition:transform var(--transition), box-shadow var(--transition);
}
.feature img, .service img, .category img {
  width:42px; height:42px; object-fit:contain; margin-bottom:4px;
}
.feature h3, .service h3, .category strong {
  font-size:1.16rem;
  color:var(--color-primary);
  font-family:var(--font-display);
  font-weight:600;
}
.feature p, .service p, .category {
  font-size:1rem;
  color:var(--color-text);
}
.feature:hover, .service:hover, .category:hover {
  transform:translateY(-5px) scale(1.03);
  box-shadow:0 8px 36px rgba(74,70,59,0.13);
  border-color: var(--color-primary);
}

/* Category grid */
ul {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:flex-start;
}
ul li {
  min-width:200px;
  margin-bottom:12px;
}
@media (max-width: 768px) {
  ul {flex-direction:column; gap:12px;}
  ul li {min-width:120px;}
}

/* Testimonials */
.testimonial-card {
  background: #fff;
  border: 1.5px solid #D6C7AA;
  color: #4A463B;
  max-width:700px;
  margin-bottom:20px;
  display:flex;
  flex-direction:row;
  align-items:center;
  box-shadow: 0 1.5px 10px rgba(141,123,100,0.07);
  gap:20px;
  border-radius:14px;
}
.testimonial-card blockquote {
  margin:0;
  font-size:1rem;
  color:var(--color-secondary);
  padding-left:0;
  border-left:0;
  background:none;
}
.testimonial-card > div {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
}
.testimonial-card strong {
  font-size:1rem;
  color:var(--color-primary);
}
.testimonial-card span {
  color:#F6B600;
  font-size:1.08rem;
  margin-top:2px;
  letter-spacing:0.1em;
}
@media (max-width: 768px) {
  .testimonial-card {flex-direction:column; align-items:flex-start; padding:15px;}
}

/* Buttons and Links */
button,
.cta-btn,
input[type=submit],
input[type=button] {
  font-family:var(--font-body);
  border-radius: 22px;
  background: var(--color-secondary);
  color: #fff;
  font-size:1rem;
  padding:11px 28px;
  font-weight:700;
  border:none;
  box-shadow:0 2px 8px rgba(141,123,100,0.06);
  cursor:pointer;
  transition:background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
button:hover, .cta-btn:hover,
button:focus, .cta-btn:focus,
input[type=submit]:hover, input[type=submit]:focus {
  background: var(--color-primary);
  color: var(--color-accent);
  transform:scale(1.04);
  box-shadow:0 6px 24px rgba(74,70,59,0.13);
}

/* Privacy note, address, misc text */
.privacy-note {
  font-size:0.98rem;
  color:#A6917D;
  margin-bottom:0;
}
address {
  font-style:normal;
  color:#8D7B64;
  font-size:1rem;
  margin-bottom:5px;
  line-height:1.5;
}

/* Visual Hierarchy & Geometric Style */
section, .card, .category, .feature, .service, .testimonial-card {
  box-shadow:var(--shadow-card);
  border-radius:var(--radius);
  border:1.5px solid var(--color-border);
}

/* Accent angular underline for headings */
h2::after {
  content: '';
  display: block;
  width: 44px;
  height: 4px;
  margin-top:10px;
  border-radius:1px;
  background: var(--color-secondary);
  margin-bottom:4px;
}

/* ------------- FOOTER STYLES ---------------------------- */
footer {
  background: var(--color-primary);
  color: #fff;
  padding: 54px 0 12px 0;
  border-top:2.5px solid var(--color-secondary);
}
footer .container {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  max-width:900px;
}
.footer-top img {
  height:44px; margin-bottom: 12px;
}

.footer-nav {
  display:flex;
  flex-wrap:wrap;
  gap:17px;
  align-items:center;
  justify-content: center;
  margin-bottom: 6px;
}
.footer-nav a {
  color: #fff;
  font-family: var(--font-body);
  font-size:1rem;
  font-weight:500;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition:border var(--transition), color var(--transition);
}
.footer-nav a:hover, .footer-nav a:focus {
  color: var(--color-accent);
  border-bottom:2px solid var(--color-accent);
}
.footer-bottom {
  font-size:0.98rem;
  color: #ddd9d4;
  margin-top:8px;
  text-align:center;
  letter-spacing:0.03em;
}
@media (max-width:768px) {
  footer {padding:36px 0 8px 0;}
  .footer-nav {gap:7px;}
  .footer-top img {height:30px;}
}

/* ------------- RESPONSIVE LAYOUT ------------------------ */
@media (max-width: 1000px) {
  .container{max-width:96vw;}
  .content-wrapper{padding:0;}
}
@media (max-width: 650px) {
  .container{max-width:100vw;}
  .content-wrapper{gap:12px;}
  ul{gap:10px;}
}
@media (max-width: 768px) {
  .content-wrapper,
  .card-container,
  .content-grid,
  .text-image-section {
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .section{padding:22px 5px; margin-bottom: 34px;}
  .card{min-width:0; width:100%;}
  .feature, .service, .category {padding:16px 10px;}
}

/* Prevent overlapping, always margin between cards/sections */
.card, .feature, .service, .testimonial-card, .section {
  margin-bottom:20px;
}
.section:last-child, .card:last-child, .feature:last-child, .service:last-child, .testimonial-card:last-child {
  margin-bottom:0;
}

/* Text-image sections, always break to column on mobile */
@media (max-width:768px){
  .text-image-section{flex-direction:column; align-items:flex-start; gap:18px;}
}

/* Util: Banner underline for geometric_structured style */
.underline-accent {
  border-bottom:3px solid var(--color-secondary);
  display:inline-block;
  padding-bottom:2px;
}

/* ------------- COOKIE CONSENT BANNER -------------------- */
.cookie-banner {
  position:fixed;
  bottom:0; left:0;
  width:100vw;
  background:#fffbe9;
  border-top:2px solid var(--color-secondary);
  box-shadow:0 -2px 24px rgba(74,70,59,0.13);
  z-index:2000;
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content:space-between;
  padding:18px 32px;
  gap:16px;
  font-size: 1rem;
  color:var(--color-text-dark);
  animation: cookieBannerIn 0.58s cubic-bezier(.65,.05,.36,1);
}
@keyframes cookieBannerIn {
  from {transform:translateY(100%);} to {transform:translateY(0);}
}
.cookie-banner__buttons {
  display:flex; gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.cookie-banner button {
  font-size: 0.98rem;
  padding:7px 18px;
  border-radius: 28px;
  background: var(--color-secondary);
  color: #fff;
  font-weight:600;
  border:none;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.cookie-banner button:hover, .cookie-banner button:focus{
  background: var(--color-primary);
  color: var(--color-accent);
  transform: scale(1.06);
}
.cookie-banner__settings {
  background:#F6EEE3;
  color:var(--color-primary);
  border:1.3px solid var(--color-secondary);
}
.cookie-banner__settings:hover, .cookie-banner__settings:focus{
  background:var(--color-secondary);
  color:#fff;
}

/* Cookie Pref Modal */
.cookie-modal-overlay {
  position:fixed; z-index:2050;
  top:0; left:0; width:100vw; height:100vh;
  background:rgba(74,70,59,0.29);
  display:flex; align-items:center; justify-content:center;
  animation:fadeInCookie .2s cubic-bezier(.65,.05,.36,1);
}
@keyframes fadeInCookie {from{opacity:0;}to{opacity:1;}}
.cookie-modal {
  background:#fffbe9;
  color:var(--color-primary);
  border-radius:20px;
  box-shadow:0 6px 60px rgba(74,70,59,0.23);
  max-width:370px;
  min-width:0;
  padding:32px 28px 24px 28px;
  display:flex;
  flex-direction:column;
  gap:22px;
  align-items:flex-start;
  animation:modalIn 0.34s cubic-bezier(.65,.05,.36,1);
}
@keyframes modalIn {from{transform:translateY(40px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.cookie-modal h3 {
  margin-bottom: 12px;
  font-size: 1.22rem;
  color:var(--color-primary);
}
.cookie-modal label {
  font-size: 1rem;
  margin-bottom:8px;
  cursor:pointer;
  display:inline-flex;
  gap:7px;
  align-items:center;
}
.cookie-modal .toggle-switch {
  appearance:none;
  width:36px; height:19px;
  border-radius:16px;
  background:#ded3b5;
  position:relative;
  outline:none;
  cursor:pointer;
  transition:background 0.18s;
  margin-right:6px;
  vertical-align:middle;
}
.cookie-modal .toggle-switch:checked {
  background:var(--color-secondary);
}
.cookie-modal .toggle-switch::before {
  content:'';
  display:block;
  width:17px; height:17px;
  background:#fff;
  border-radius:100%;
  position:absolute;
  top:1px; left:2px;
  transition:transform 0.17s cubic-bezier(.65,.05,.36,1);
}
.cookie-modal .toggle-switch:checked::before {
  transform: translateX(16px);
  background:var(--color-accent);
}
.cookie-modal__footer {
  display:flex; gap:12px;
  width:100%;
  justify-content:flex-end;
}
.cookie-modal__footer button {
  min-width:83px;
  padding:8px 10px;
  font-size:0.96rem;
  border-radius:22px;
  background:var(--color-secondary);
  color: #fff;
}
.cookie-modal__footer button:hover, .cookie-modal__footer button:focus {
  background:var(--color-primary);
  color:var(--color-accent);
}
.cookie-modal__close {
  background:none;
  color:var(--color-secondary);
  font-size:2.2rem;
  position:absolute;
  right:13px; top:9px;
  cursor:pointer;
}
.cookie-modal__close:hover, .cookie-modal__close:focus {color:var(--color-primary);}

/* Responsive for cookie components */
@media (max-width:520px) {
  .cookie-banner {flex-direction:column; align-items:flex-start; padding:13px 8px; gap:12px; font-size:0.99rem;}
  .cookie-modal {padding:18px 8px;}
}

/* ------------- UTILITIES -------------------------------- */
.text-center {text-align:center;}
.d-flex {display:flex;}
.align-center {align-items:center;}
.flex-wrap {flex-wrap:wrap;}
.justify-between {justify-content:space-between;}
.gap-8 {gap:8px;}
.gap-16 {gap:16px;}
.gap-24 {gap:24px;}
.mt-20 {margin-top:20px;}
.mb-20 {margin-bottom:20px;}
.p-20 {padding:20px;}

/* ------------- FONTS: Import fallback ------------- */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700,900|Lato:400,700,900&display=swap');

/* ======== END ========== */