/* ==============================
   Tokens de diseño (paleta y base)
   ============================== */
:root{
  --brand:       #2E4A3B;  /* Verde bosque */
  --brand-ink:   #F9F6F1;  /* Texto sobre brand */
  --sage:        #9FB7A5;  /* Salvia apoyo */
  --champagne:   #E7D9C6;  /* Neutro cálido para superficies */
  --bg:          #F9F6F1;  /* Fondo general */
  --surface:     #FFFFFF;  /* Tarjetas blancas */
  --ink:         #1A1A1A;  /* Texto principal */
  --muted:       #5E6A65;  /* Texto secundario */
  --line:        #E8E2D8;  /* Líneas y bordes suaves */
  --shadow:      0 1px 1px rgba(0,0,0,.03), 0 6px 20px rgba(0,0,0,.06);
}

/* ==============================
   Base tipográfica y layout
   ============================== */
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  letter-spacing:.3px;
  margin:0 0 6px;
  color:var(--ink);
}
h1{ font-size:clamp(32px, 4vw, 44px); font-weight:700; line-height:1.1; }
h2{ font-size:clamp(22px, 2.6vw, 28px); font-weight:600; }
h3{ font-size:20px; font-weight:500; }
p{ margin:0 0 8px; color:var(--muted); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

.container{ max-width:1000px; margin:24px auto; padding:0 16px; }

/* ==============================
   Header & Hero
   ============================== */
.hero-nav{
  padding:16px 24px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.hero-nav-content{
  max-width:1200px;
  margin:0 auto;
}
.logo-large{
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(24px, 4vw, 32px);
  font-weight:700;
  letter-spacing:2px;
  color:var(--brand);
  display:block;
}
.tagline{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  letter-spacing:0.8px;
  text-transform:uppercase;
}

.hero{
  position:relative;
  overflow:hidden;
  background:var(--champagne);
  border-bottom:1px solid var(--line);
}

/* Carrusel */
.carousel{
  position:relative;
  width:100%;
  height:clamp(350px, 40vh, 500px);
  overflow:hidden;
}
.carousel-track{
  display:flex;
  transition:transform 0.5s ease-in-out;
  height:100%;
}
.carousel-slide{
  min-width:100%;
  height:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--champagne) 50%, white) 0%,
    color-mix(in oklab, var(--champagne) 80%, white) 100%);
}
.carousel-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.carousel-content{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:40px 24px;
  background:linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color:white;
  text-align:center;
  z-index:2;
}
.carousel-title{
  font-size:clamp(32px, 5vw, 56px);
  margin:0 0 12px;
  line-height:1.1;
  text-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.carousel-subtitle{
  font-size:clamp(14px, 2vw, 18px);
  margin:0;
  opacity:0.95;
  text-shadow:0 1px 4px rgba(0,0,0,0.3);
}

/* Indicadores */
.carousel-indicators{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:3;
}
.carousel-indicator{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  border:none;
  cursor:pointer;
  transition:background 0.3s ease, transform 0.2s ease;
}
.carousel-indicator:hover{
  background:rgba(255,255,255,0.8);
  transform:scale(1.2);
}
.carousel-indicator.active{
  background:white;
  width:24px;
  border-radius:5px;
}

/* Flechas de navegación */
.carousel-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.9);
  border:none;
  width:48px;
  height:48px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  transition:background 0.2s ease, transform 0.2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.carousel-nav:hover{
  background:white;
  transform:translateY(-50%) scale(1.1);
}
.carousel-nav-prev{
  left:20px;
}
.carousel-nav-next{
  right:20px;
}

@media (max-width:720px){
  .carousel{
    height:clamp(300px, 60vh, 450px);
  }
  .carousel-content{
    padding:24px 16px;
  }
  .carousel-nav{
    width:40px;
    height:40px;
  }
  .carousel-nav-prev{
    left:12px;
  }
  .carousel-nav-next{
    right:12px;
  }
}

/* ==============================
   Catalog Section
   ============================== */
.catalog-section{
  background:var(--bg);
  padding:48px 0 80px;
  min-height:60vh;
}
.catalog-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
.catalog-title{
  text-align:center;
  margin:0 0 32px;
  color:var(--brand);
  font-size:clamp(28px, 3vw, 36px);
}

/* ==============================
   Filtros Modernos
   ============================== */
.filters-modern{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:40px;
  padding:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  flex-wrap:wrap;
}
.filters-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  flex:1;
}
.filter-select{
  appearance:none;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  min-width:180px;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235E6A65' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
}
.filter-select:hover{
  border-color:var(--sage);
}
.filter-select:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 20%, transparent);
}

.filter-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  padding:8px 12px;
  border-radius:8px;
  transition:background .2s ease;
}
.filter-checkbox:hover{
  background:color-mix(in oklab, var(--sage) 10%, transparent);
}
.filter-checkbox input[type="checkbox"]{
  width:18px;
  height:18px;
  cursor:pointer;
  accent-color:var(--brand);
}
.filter-checkbox span{
  color:var(--muted);
  font-size:14px;
}

/* Contenedor de botones de acción */
.action-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Estilos base para botones */
.btn-refresh{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border:none;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  white-space:nowrap;
  text-decoration:none;
}
.btn-refresh svg{
  flex-shrink:0;
}
.btn-refresh:active{
  transform:translateY(0);
}

/* Botón primario (Chatea con nosotros) - Verde destacado */
.btn-primary{
  background:var(--brand);
  color:var(--brand-ink);
  box-shadow:0 2px 8px rgba(46, 74, 59, 0.2);
}
.btn-primary:hover{
  background:color-mix(in oklab, var(--brand) 85%, black);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(46, 74, 59, 0.3);
}

/* Botón secundario (Actualizar) - Gris claro */
.btn-secondary{
  background:var(--bg);
  color:var(--muted);
  border:1px solid var(--line);
}
.btn-secondary:hover{
  background:color-mix(in oklab, var(--sage) 15%, var(--bg));
  border-color:var(--sage);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width:768px){
  .filters-modern{
    flex-direction:column;
    align-items:stretch;
    padding:16px;
  }
  .filters-row{
    flex-direction:column;
    width:100%;
  }
  .filter-select{
    width:100%;
    min-width:auto;
  }
  .action-buttons{
    width:100%;
    flex-direction:column;
  }
  .btn-refresh{
    width:100%;
    justify-content:center;
    box-sizing:border-box;
  }
}

/* ==============================
   Grilla y tarjetas de producto
   ============================== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:24px;
  margin-top:0;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.1);
  border-color:color-mix(in oklab, var(--brand) 40%, var(--line));
}
/* Imagen con altura responsiva - muestra imagen completa sin recortes */
.card img{
  width: 100%;
  aspect-ratio: 1 / 1; /* Contenedor cuadrado para imágenes cuadradas */
  object-fit: contain; /* Muestra imagen completa SIN zoom ni recorte */
  object-position: center;
  background: var(--champagne);
  display: block;
}
@media (max-width: 720px){
  .card img{
    aspect-ratio: 1 / 1;
  }
}

.card .body{
  padding:18px;
}
.card h4{
  margin:0 0 8px;
  font-weight:700;
  font-size:16px;
  line-height:1.3;
}
.card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.catalog-status{
  text-align:center;
  color:var(--muted);
  margin-top:32px;
  font-size:15px;
  padding:16px;
  background:var(--surface);
  border-radius:12px;
  border:1px solid var(--line);
}

/* Chips de tallas */
.chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.chip{
  border:1px solid color-mix(in oklab, var(--sage) 30%, transparent);
  background:color-mix(in oklab, var(--sage) 15%, white);
  color:#2d3a35;
  border-radius:999px; padding:4px 8px; font-size:12px;
}
.chip.soldout{ opacity:.55; text-decoration:line-through; }

/* Estado agotado (del grupo) */
.card.agotado{ opacity:.8; position:relative; }
.card.agotado::after{
  content:"Agotado";
  position:absolute; top:10px; right:10px;
  padding:6px 10px; border-radius:999px;
  background:var(--ink); color:var(--brand-ink);
  font-size:12px; font-weight:600;
}

/* Precios en promoción - Catálogo */
.price-sale{
  font-weight:700;
  font-size:17px;
  color:#d32f2f; /* Rojo para destacar la oferta */
  margin-bottom:2px;
}
.price-original{
  font-size:13px;
  color:var(--muted);
  text-decoration:line-through;
}

/* Precios en promoción - Página de producto */
.price-sale-large{
  font-weight:700;
  font-size:24px;
  color:#d32f2f; /* Rojo para destacar la oferta */
  margin-bottom:4px;
}
.price-original-large{
  font-size:16px;
  color:var(--muted);
  text-decoration:line-through;
}

/* ==============================
   Responsive
   ============================== */
@media (max-width:768px){
  .grid{
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
  }
  .catalog-container{
    padding:0 16px;
  }
}
@media (max-width:360px){
  .grid{
    grid-template-columns:1fr;
    gap:12px;
  }
}

/* ==============================
   Botón de Compra (estilo Shopify)
   ============================== */
.btn-comprar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:100%; /* previene overflow */
  background:var(--brand);
  color:var(--brand-ink);
  padding:16px 24px;
  border-radius:8px;
  font-weight:600;
  font-size:16px;
  border:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:var(--shadow);
  text-align:center;
  box-sizing:border-box; /* incluye padding en el ancho */
}
.btn-comprar:hover{
  background:color-mix(in oklab, var(--brand) 85%, black);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(46, 74, 59, 0.25);
}
.btn-comprar:active{
  transform:translateY(0);
}
.btn-comprar:focus-visible{
  outline:3px solid color-mix(in oklab, var(--brand) 50%, transparent);
  outline-offset:2px;
}
.btn-comprar svg{
  flex-shrink:0;
}

/* Ajuste mobile para evitar desbordamiento */
@media (max-width:900px){
  .btn-comprar{
    padding:14px 20px;
  }
}

/* ==============================
   Footer
   ============================== */
.footer{
  background:var(--surface);
  border-top:1px solid var(--line);
  padding:40px 24px 32px;
  text-align:center;
}
.footer-content{
  max-width:1200px;
  margin:0 auto;
}

/* Redes sociales */
.social-links{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-bottom:20px;
}
.social-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--bg);
  color:var(--muted);
  border:1px solid var(--line);
  transition:all 0.3s ease;
  text-decoration:none;
}
.social-link:hover{
  background:var(--brand);
  color:var(--brand-ink);
  border-color:var(--brand);
  transform:translateY(-3px);
  box-shadow:0 4px 12px rgba(46, 74, 59, 0.2);
}
.social-link svg{
  width:20px;
  height:20px;
}

.footer-text{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

@media (max-width:480px){
  .social-links{
    gap:12px;
  }
  .social-link{
    width:40px;
    height:40px;
  }
  .social-link svg{
    width:18px;
    height:18px;
  }
}

/* ==============================
   Sección de Videos
   ============================== */
.video-section{
  background:var(--surface);
  padding:60px 0;
}
.video-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
.video-section-title{
  text-align:center;
  margin:0 0 40px;
  color:var(--brand);
}

/* Carrusel de thumbnails */
.video-carousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:20px;
}
.video-thumbnails{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:8px 0;
  scrollbar-width:none; /* Firefox */
}
.video-thumbnails::-webkit-scrollbar{
  display:none; /* Chrome, Safari */
}

.video-thumb{
  position:relative;
  flex-shrink:0;
  width:180px;
  height:320px; /* Aspect ratio 9:16 */
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  background:var(--champagne); /* Fondo suave mientras carga el video */
}
.video-thumb:hover{
  transform:scale(1.05);
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.video-thumb video{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  background:var(--champagne); /* Fondo para el video también */
}
.video-play-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:rgba(0,0,0,0.5);
  border-radius:50%;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.3s ease;
  pointer-events:none;
}
.video-thumb:hover .video-play-icon{
  background:rgba(0,0,0,0.7);
}

/* Navegación del carrusel */
.video-nav{
  background:rgba(255,255,255,0.95);
  border:1px solid var(--line);
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s ease, transform 0.2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  flex-shrink:0;
}
.video-nav:hover{
  background:white;
  transform:scale(1.1);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.video-nav svg{
  color:var(--ink);
}

/* Modal de video */
.video-modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.95);
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.video-modal.active{
  display:flex;
}
.video-modal-content{
  position:relative;
  max-width:500px;
  width:100%;
  max-height:90vh;
  background:black;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.video-modal-content video{
  width:100%;
  height:auto;
  display:block;
}

/* Controles del modal */
.video-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  border:none;
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  transition:background 0.2s ease, transform 0.2s ease;
}
.video-modal-close:hover{
  background:white;
  transform:scale(1.1);
}
.video-modal-close svg{
  color:var(--ink);
}

.video-modal-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  border:none;
  width:48px;
  height:48px;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  transition:background 0.2s ease, transform 0.2s ease;
}
.video-modal-nav:hover{
  background:white;
  transform:translateY(-50%) scale(1.05);
}
.video-modal-nav svg{
  color:var(--ink);
}
.video-modal-prev{
  left:16px;
}
.video-modal-next{
  right:16px;
}

/* Paginación del modal */
.video-pagination{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:10;
}
.video-pagination-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  transition:background 0.3s ease, width 0.3s ease;
  cursor:pointer;
}
.video-pagination-dot.active{
  background:white;
  width:24px;
  border-radius:4px;
}

/* Responsive */
@media (max-width:768px){
  .video-section{
    padding:40px 0;
  }
  .video-container{
    padding:0 16px;
  }
  .video-section-title{
    font-size:24px;
    margin-bottom:24px;
  }
  .video-carousel{
    gap:12px;
  }
  .video-nav{
    width:36px;
    height:36px;
  }
  .video-thumb{
    width:160px;
    height:284px;
  }
  .video-play-icon{
    width:50px;
    height:50px;
  }
  .video-play-icon svg{
    width:40px;
    height:40px;
  }
  .video-modal{
    padding:16px;
  }
  .video-modal-content{
    max-width:calc(100% - 32px); /* Resta padding para margen derecho */
    border-radius:12px;
  }
  .video-modal-nav{
    width:40px;
    height:40px;
  }
  .video-modal-prev{
    left:8px;
  }
  .video-modal-next{
    right:8px;
  }
}

@media (max-width:480px){
  .video-nav{
    display:none;
  }
  .video-carousel{
    gap:0;
  }
  .video-thumb{
    width:140px;
    height:248px;
  }
}

/* ==============================
   Sección CTA
   ============================== */
.cta-section{
  background:#F5F0E8;
  padding:50px 0;
  position:relative;
}
.cta-container{
  max-width:700px;
  margin:0 auto;
  padding:0 24px;
  text-align:center;
}
.cta-icon{
  width:48px;
  height:48px;
  margin:0 auto 16px;
  background:var(--brand);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
}
.cta-icon svg{
  width:24px;
  height:24px;
}
.cta-title{
  font-size:clamp(22px, 3vw, 28px);
  color:var(--brand);
  margin:0 0 10px;
  font-weight:600;
  line-height:1.3;
}
.cta-subtitle{
  font-size:clamp(14px, 1.8vw, 16px);
  color:var(--muted);
  margin:0 0 24px;
  line-height:1.5;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
}
.cta-buttons{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn-cta-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  background:var(--brand);
  color:var(--brand-ink);
  border:none;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:all 0.2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.btn-cta-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
}
.btn-cta-primary svg{
  width:18px;
  height:18px;
}
.btn-cta-secondary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  background:white;
  color:var(--brand);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  cursor:pointer;
  transition:all 0.2s ease;
}
.btn-cta-secondary:hover{
  border-color:var(--brand);
  background:var(--surface);
  transform:translateY(-2px);
}
.btn-cta-secondary svg{
  width:18px;
  height:18px;
}
.cta-features{
  display:flex;
  gap:24px;
  justify-content:center;
  margin-top:32px;
  flex-wrap:wrap;
}
.cta-feature{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
  font-weight:500;
}
.cta-feature svg{
  width:16px;
  height:16px;
  color:var(--brand);
  flex-shrink:0;
}

@media (max-width:640px){
  .cta-section{
    padding:40px 0;
  }
  .cta-container{
    padding:0 20px;
  }
  .cta-title{
    font-size:20px;
  }
  .cta-subtitle{
    font-size:14px;
    margin-bottom:20px;
  }
  .cta-buttons{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .btn-cta-primary,
  .btn-cta-secondary{
    justify-content:center;
    padding:11px 20px;
    font-size:14px;
  }
  .cta-features{
    flex-direction:column;
    gap:12px;
    align-items:center;
    margin-top:24px;
  }
}

/* ==============================
   Accesibilidad visual
   ============================== */
:focus-visible{
  outline:2px solid color-mix(in oklab, var(--brand) 55%, transparent);
  outline-offset:2px;
}