.elementor-462 .elementor-element.elementor-element-ac9aed7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-462 .elementor-element.elementor-element-71c481b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-462 .elementor-element.elementor-element-88fa50f{width:var( --container-widget-width, 100.368% );max-width:100.368%;--container-widget-width:100.368%;--container-widget-flex-grow:0;}.elementor-462 .elementor-element.elementor-element-88fa50f.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-462 .elementor-element.elementor-element-0491684{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-2162327 */.c-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.c-hero .slides{position:relative;height:520px}
.c-hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s ease}
.c-hero .content{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.2));padding:20px}
.c-hero .content h1{font-size:2.6rem;text-shadow:0 6px 26px rgba(0,0,0,.45)}
.c-hero .cta{display:flex;gap:12px;justify-content:center;margin-top:10px}
.c-hero .nav{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:2}
.c-hero .dot{width:12px;height:12px;border-radius:999px;border:1px solid #fff;opacity:.8}
.c-hero .dot:hover{opacity:1;background:#fff}
.c-hero input[type=radio]{display:none}
#h1:checked ~ .slides .s1{opacity:1}
#h2:checked ~ .slides .s2{opacity:1}
#h3:checked ~ .slides .s3{opacity:1}
#h1:checked ~ .nav label[for=h1],#h2:checked ~ .nav label[for=h2],#h3:checked ~ .nav label[for=h3]{background:#fff}
@media (max-width:640px){ .c-hero .slides{height:420px} .c-hero .content h1{font-size:2rem} }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-88fa50f *//* ===== Paleta y base breve ===== */
:root{
  --paper:#f3f1ec;
  --ink:#27323a;
  --muted:#73808c;
  --olive:#a7b357;      /* verde de los íconos */
  --card:#ffffff;
  --border:#eee9de;
  --radius:16px;
  --shadow:0 18px 40px rgba(0,0,0,.12);
  --gap:90px;           /* separación entre items como en la demo */
  --speed:.28s;
  --ease:cubic-bezier(.2,.6,.2,1);
}
.ft-container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Fondo “papel” */
.feature-tiles{
  background:var(--paper);
  padding:84px 0;
  background-image:
    radial-gradient(rgba(0,0,0,.015) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.02) 1px, transparent 1px);
  background-size:18px 18px, 32px 32px;
  background-position:0 0, 12px 8px;
}

/* Grid 4 columnas */
.ft-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(4,minmax(220px,1fr));
  align-items:start;
}

/* ===== Card (estado NEUTRO por defecto) ===== */
.ft-card{
  display:grid;
  grid-template-rows: auto auto auto auto;
  place-items:center;
  text-align:center;
  gap:14px;
  padding:0 10px 6px;   /* sin fondo ni borde por defecto */
  color:var(--ink);
  text-decoration:none;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:
    background var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease),
    transform var(--speed) var(--ease),
    border-color var(--speed) var(--ease),
    color var(--speed) var(--ease);
}

/* Hover/focus: “tarjeta blanca” + sombra + leve lift */
.ft-card:hover,
.ft-card:focus-visible{
  background:var(--card);
  border-color:var(--border);
  box-shadow:var(--shadow);
  transform:translateY(-6px);
  outline:0;
}

/* ===== Iconos SVG (fix de deformaciones) ===== */
.ft-icon{
  color:var(--olive);
  width:128px;height:128px;
  display:inline-grid;place-items:center;
}
.ft-icon svg{
  width:100%;height:100%;display:block;overflow:visible;
  stroke:currentColor; fill:none;
  stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;             /* grosor estable */
  shape-rendering:geometricPrecision;
  transition:transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.ft-card:hover .ft-icon svg,
.ft-card:focus-visible .ft-icon svg{ transform:scale(1.03) }

/* ===== Título ===== */
.ft-title{
  margin:6px 0 0;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:22px;
  line-height:1.15;
}
.ft-title a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1px;
}

/* ===== Subtítulo (link sutil) ===== */
.ft-sub{margin:4px 0 18px; font-size:15px}
.ft-sub a{
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.ft-card:hover .ft-sub a,
.ft-card:focus-visible .ft-sub a{ color:var(--ink) }

/* ===== Flecha ===== */
.ft-arrow{
  position:relative;
  width:28px; height:20px;
  display:inline-block;
  color:var(--ink);
  opacity:.75;
  transform:translateX(0);
  transition:opacity var(--speed) var(--ease), transform var(--speed) var(--ease), color var(--speed) var(--ease);
}
.ft-arrow::before{
  content:"→";
  position:absolute; inset:0; display:grid; place-items:center;
}
.ft-card:hover .ft-arrow,
.ft-card:focus-visible .ft-arrow{
  color:var(--olive);
  opacity:1;
  transform:translateX(6px);
}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .ft-grid{grid-template-columns:repeat(2,minmax(220px,1fr)); gap:60px}
}
@media (max-width:640px){
  .ft-grid{grid-template-columns:1fr; gap:34px}
  .ft-container{padding:0 18px}
}

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce){
  .ft-card, .ft-icon svg, .ft-arrow{transition:none}
  .ft-card:hover, .ft-card:focus-visible{transform:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-104a0cd *//* Componente D: CSS para Productos Destacados */
.featured-products {
  padding: 80px 20px;
  background-color: #f9f9f9;
  max-width: 1200px;
  margin: 0 auto;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.product-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.product-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.product-card:hover .product-overlay {
  opacity: 1;
}

.quick-view, .add-to-cart {
  background-color: white;
  border: none;
  padding: 10px 15px;
  margin: 5px 0;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.quick-view:hover, .add-to-cart:hover {
  background-color: #f1f1f1;
}

.product-info {
  padding: 20px;
}

.product-info h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.product-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-weight: bold;
  color: #9d2b2b;
  font-size: 18px;
}

.rating {
  color: #ffc107;
}/* End custom CSS */