/* Amy Talks Fashion - Design System global CSS */

:root {
  --atf-pink: #EC65AA;
  --atf-black: #010000;
  --atf-red: #D80510;
  --atf-beige: #F7E9E0;
  --atf-white: #FFFFFF;
  --atf-accent: #FFD447;

  --atf-font-display: 'Playfair Display', serif;
  --atf-font-body: 'Montserrat', sans-serif;
  --atf-font-script: 'Allura', cursive;

  --atf-radius-sm: 4px;
  --atf-radius-md: 10px;
  --atf-radius-lg: 18px;
  --atf-radius-pill: 999px;

  --atf-container-max: 1200px;

  --atf-h1: 64px;
  --atf-h2: 48px;
  --atf-h3: 32px;
  --atf-h4: 24px;
  --atf-body: 18px;
  --atf-body-lg: 20px;
  --atf-small: 16px;
  --atf-button: 16px;

  --atf-section-py: 100px;
  --atf-section-px: 0px;
}

@media (max-width: 1024px) {
  :root {
    --atf-h1: 48px;
    --atf-h2: 40px;
    --atf-h3: 28px;
    --atf-h4: 22px;
    --atf-body: 17px;
    --atf-body-lg: 19px;
    --atf-small: 15px;
    --atf-button: 15px;
    --atf-section-py: 50px;
    --atf-section-px: 20px;
  }
}

@media (max-width: 767px) {
  :root {
    --atf-h1: 38px;
    --atf-h2: 32px;
    --atf-h3: 24px;
    --atf-h4: 20px;
    --atf-body: 16px;
    --atf-body-lg: 18px;
    --atf-small: 14px;
    --atf-button: 14px;
    --atf-section-py: 30px;
    --atf-section-px: 20px;
  }
}

body {
  font-family: var(--atf-font-body);
  color: var(--atf-black);
  overflow-x: hidden;
  background-color: var(--atf-beige);
}

h1, h2, h3, .atf-display {
  font-family: var(--atf-font-display);
}

h1 { font-size: var(--atf-h1) !important; line-height: 1.1; }
h2 { font-size: var(--atf-h2) !important; line-height: 1.15; }
h3 { font-size: var(--atf-h3) !important; line-height: 1.2; }
h4 { font-size: var(--atf-h4) !important; }

.atf-eyebrow {
  font-family: var(--atf-font-body);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--atf-small);
  color: var(--atf-pink);
}

.atf-script {
  font-family: var(--atf-font-script);
}

.atf-section {
  padding-top: var(--atf-section-py);
  padding-bottom: var(--atf-section-py);
  padding-left: var(--atf-section-px);
  padding-right: var(--atf-section-px);
  max-width: 100%;
  overflow: hidden;
}



.atf-container {
  max-width: var(--atf-container-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Buttons
   Two usages exist:
   1. Elementor button widgets: my "_css_classes" land on the WIDGET WRAPPER
      <div class="... atf-btn atf-btn-dark elementor-widget elementor-widget-button">,
      and the real clickable element is a nested <a class="elementor-button">.
   2. Plain HTML buttons/links I write myself (contact form submit button,
      shortcode "Ver caso"/"Leer más" links): .atf-btn sits directly on the
      real element, no wrapper involved.
   Every rule below covers both forms explicitly - never style ".atf-btn"
   alone, since for case 1 that only styles the full-width wrapper div while
   the real link keeps Elementor's own default (yellow) styling. */
.atf-btn.elementor-widget {
  display: block;
  text-align: center;
}

.atf-btn:not(.elementor-widget),
.atf-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--atf-font-body);
  font-weight: 700;
  font-size: var(--atf-button);
  border-radius: var(--atf-radius-pill);
  height: 52px;
  padding: 0 26px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .atf-btn:not(.elementor-widget),
  .atf-btn .elementor-button { height: 50px; padding: 0 23px; }
}

@media (max-width: 767px) {
  .atf-btn:not(.elementor-widget),
  .atf-btn .elementor-button { height: 48px; padding: 0 20px; width: 100%; }
}

/* !important below is intentional: Elementor's own generated button CSS
   otherwise wins the cascade over these classes and forces the global
   Accent color. */
.atf-btn-cta:not(.elementor-widget),
.atf-btn-cta .elementor-button {
  background-color: var(--atf-accent) !important;
  color: var(--atf-black) !important;
  border-color: var(--atf-accent) !important;
}
.atf-btn-cta:not(.elementor-widget):hover,
.atf-btn-cta .elementor-button:hover { background-color: var(--atf-black) !important; color: var(--atf-white) !important; border-color: var(--atf-black) !important; }

.atf-btn-brand:not(.elementor-widget),
.atf-btn-brand .elementor-button {
  background-color: var(--atf-pink) !important;
  color: var(--atf-black) !important;
  border-color: var(--atf-pink) !important;
}
.atf-btn-brand:not(.elementor-widget):hover,
.atf-btn-brand .elementor-button:hover { background-color: var(--atf-black) !important; color: var(--atf-white) !important; border-color: var(--atf-black) !important; }

.atf-btn-dark:not(.elementor-widget),
.atf-btn-dark .elementor-button {
  background-color: var(--atf-black) !important;
  color: var(--atf-white) !important;
  border-color: var(--atf-black) !important;
}
.atf-btn-dark:not(.elementor-widget):hover,
.atf-btn-dark .elementor-button:hover { background-color: var(--atf-pink) !important; color: var(--atf-black) !important; border-color: var(--atf-pink) !important; }

.atf-btn-outline:not(.elementor-widget),
.atf-btn-outline .elementor-button {
  background-color: transparent !important;
  color: var(--atf-black) !important;
  border-color: var(--atf-black) !important;
}
.atf-btn-outline:not(.elementor-widget):hover,
.atf-btn-outline .elementor-button:hover { background-color: var(--atf-black) !important; color: var(--atf-white) !important; }

.atf-btn .elementor-button-text,
.atf-btn .elementor-button-content-wrapper {
  color: inherit !important;
}

/* ===== Site Header ===== */
.atf-header, .atf-header-inner {
  background-color: var(--atf-beige) !important;
}

.atf-header {
  position: sticky;
  top: 0;
  z-index: 999;
  border-bottom: 2px solid var(--atf-black);
}

/* WordPress core always adds the "admin-bar" body class when the toolbar is
   showing (logged-in view) - this is more reliable than the CSS custom
   property, which isn't guaranteed to be defined in every WP/theme combo. */
body.admin-bar .atf-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .atf-header {
    top: 46px;
  }
}

.atf-header-inner {
  max-width: var(--atf-container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  gap: 24px;
}

.atf-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.atf-logo-img {
  display: block;
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .atf-logo-img { height: 38px; }
}

.atf-footer .atf-logo-img {
  height: 56px;
  border-radius: var(--atf-radius-sm);
  background: var(--atf-white);
  padding: 4px;
}

.atf-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.atf-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.atf-nav ul a {
  font-family: var(--atf-font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--atf-black);
  text-decoration: none;
}

.atf-nav ul a:hover { color: var(--atf-pink); }

.atf-header-cta { flex-shrink: 0; }
.atf-header .atf-btn { height: 44px; padding: 0 22px; font-size: 14px; }

.atf-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}
.atf-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--atf-black);
  margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
}

@media (max-width: 1024px) {
  .atf-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--atf-beige); flex-direction: column; align-items: flex-start; padding: 20px; gap: 20px; box-shadow: 0 8px 16px rgba(0,0,0,.08); }
  .atf-nav.is-open { display: flex; }
  .atf-nav ul { flex-direction: column; gap: 16px; width: 100%; }
  .atf-header-cta { display: none; }
  .atf-header-cta.is-open { display: block; width: 100%; }
  .atf-menu-toggle { display: block; }
}

/* ===== Site Footer ===== */
.atf-footer, .atf-footer-inner {
  background-color: var(--atf-black) !important;
}

.atf-footer {
  color: var(--atf-white);
}

.atf-footer-inner {
  max-width: var(--atf-container-max);
  margin: 0 auto;
  padding: 60px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.atf-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

.atf-footer .atf-logo { color: var(--atf-white); }

.atf-footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.atf-footer-nav ul a {
  color: var(--atf-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.atf-footer-nav ul a:hover { color: var(--atf-pink); }

.atf-footer-social a {
  color: var(--atf-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.atf-footer-social a:hover { color: var(--atf-pink); }

.atf-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: rgba(255,255,255,.7);
}

.atf-footer-bottom a { color: rgba(255,255,255,.7); text-decoration: none; }
.atf-footer-bottom a:hover { color: var(--atf-white); }

.atf-footer-legal { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }

.atf-cta-final h1, .atf-cta-final h2, .atf-cta-final h3, .atf-cta-final p, .atf-cta-final span:not(.atf-btn *) {
  color: var(--atf-white);
}
.atf-cta-final .atf-microcopy {
  color: rgba(255,255,255,.7);
  font-size: var(--atf-small);
}
.atf-card {
  border-radius: var(--atf-radius-md);
}

/* Elementor 4's container markup inserts a .e-con-inner wrapper between the
   container and its actual children ("e-child" elements), so the grid
   selector must target that, not a direct child of .atf-grid-N. */
.atf-grid-3 .e-con-inner > .elementor-element,
.atf-grid-4 .e-con-inner > .elementor-element {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 240px !important;
}

.atf-grid-3 .elementor-widget-icon-box .elementor-icon-box-wrapper,
.atf-grid-4 .elementor-widget-icon-box .elementor-icon-box-wrapper {
  text-align: center;
  align-items: center;
}

.atf-shortcode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.atf-shortcode-row .atf-card {
  background: var(--atf-white);
  padding: 20px;
  flex: 1 1 300px;
  max-width: 360px;
  text-align: left;
}

.atf-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--atf-radius-sm);
  margin-bottom: 16px;
}

.atf-testimonial-card .atf-card-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.atf-testimonial-card strong {
  display: block;
  margin-top: 8px;
}

.atf-testimonial-card span {
  font-size: var(--atf-small);
  color: rgba(0,0,0,.6);
}

.atf-partners-row {
  align-items: center;
}

.atf-partner-logo {
  flex: 0 1 160px;
  text-align: center;
}

.atf-partner-logo .atf-card-img {
  height: 60px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  margin: 0 auto;
}

.atf-partner-placeholder {
  border: 1px dashed rgba(0,0,0,.2);
  border-radius: var(--atf-radius-sm);
  padding: 20px;
  font-size: var(--atf-small);
  color: rgba(0,0,0,.5);
}

.atf-contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

.atf-contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--atf-small);
  font-weight: 600;
  color: var(--atf-white);
}

.atf-contact-form input,
.atf-contact-form textarea {
  font-family: var(--atf-font-body);
  font-size: var(--atf-body);
  padding: 12px 16px;
  border-radius: var(--atf-radius-sm);
  border: none;
  background: var(--atf-white);
  color: var(--atf-black);
}

.atf-contact-form button {
  border: none;
  margin-top: 8px;
}

.atf-website-field {
  position: absolute;
  left: -9999px;
}

.atf-form-notice {
  max-width: 480px;
  margin: 0 auto 16px;
  padding: 14px 18px;
  border-radius: var(--atf-radius-sm);
  font-size: var(--atf-small);
}

.atf-form-success { background: var(--atf-accent); color: var(--atf-black); }
.atf-form-error { background: var(--atf-red); color: var(--atf-white); }

.atf-blog-header {
  text-align: center;
}

.atf-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .atf-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .atf-blog-grid { grid-template-columns: 1fr; }
}

.atf-blog-card {
  background: var(--atf-white);
  border-radius: var(--atf-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.atf-blog-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.atf-blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.atf-blog-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: var(--atf-small);
  color: rgba(0,0,0,.55);
}

.atf-blog-meta .atf-eyebrow { color: var(--atf-pink); }

.atf-blog-card-body h3 { font-size: var(--atf-h4) !important; margin: 0; }

.atf-blog-card-body p { margin: 0; color: rgba(0,0,0,.7); flex-grow: 1; }

.atf-blog-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.atf-blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: var(--atf-radius-sm);
  background: var(--atf-white);
  color: var(--atf-black);
  text-decoration: none;
  font-weight: 600;
}

.atf-blog-pagination .page-numbers.current {
  background: var(--atf-black);
  color: var(--atf-white);
}

/* Utility: hide overflow safety on all sections */
.elementor, .elementor-section-wrap, .e-con {
  max-width: 100%;
}