/* ===== Strips (bandas full-width, imagen fija) ===== */
:root{
  /* Paleta */
  --deep:#78140B;   /* rojo oscuro */
  --mid:#9B5A51;    /* rojo amarronado medio */
  --sand:#EAD7C5;   /* beige (no usada aquí) */
  --cream:#FFF6E6;  /* crema (no usada aquí) */

  --white:#fff;

  /* Altura y proporciones */
  --row-h: clamp(120px, 18vw, 210px);
  --img-w: 60%;
  --panel-w: 40%;

  /* Hover: color total al 80% (overlay avanza sobre la imagen) */
  --panel-w-hover: 80%;
  --overlay-extra: calc(var(--panel-w-hover) - var(--panel-w)); /* 80 - 40 = 40% */

  --ease: cubic-bezier(.2,.8,.2,1);
}

.strips{
  width:100%;
  margin:0;
}

.strip{
  display:flex;
  align-items:stretch;
  width:100%;
  min-height: var(--row-h);
  overflow:hidden;
}

/* === Imagen (SE MANTIENE FIJA AL 60%) === */
.media{
  margin:0;                      /* <figure> sin margen */
  flex: 0 0 var(--img-w);        /* 60% SIEMPRE */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter: grayscale(100%) contrast(1.05);
}

/* === Panel de color (40%) + overlay que avanza sobre la imagen === */
.panel{
  --panel-bg: var(--deep);       /* valor por defecto, se sobrescribe por tono */
  position:relative;
  z-index:1;                     /* por encima de la imagen */
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding: clamp(16px, 3vw, 32px);
  color: var(--white);           /* texto SIEMPRE blanco */
  background: var(--panel-bg);   /* fondo usa la variable dedicada */
  flex: 0 0 var(--panel-w);     /* 40% */
  box-sizing: border-box;       /* el padding cuenta dentro del 40% */
  min-width: 0;                 /* permite que el contenido se encoja y haga wrap */
}

/* Overlay que se expande a la IZQUIERDA en hover */
.panel::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  right:100%;                    /* pegado al borde izquierdo del panel */
  width:0;                       /* sin hover: no cubre */
  background: var(--panel-bg);   /* mismo color del panel */
  transition: width 340ms var(--ease);
  pointer-events:none;
}

/* Texto */
.title{
  margin:0;
  font-weight:800;
  font-size: clamp(20px, 2.4vw, 30px);
}
.desc{
  margin:0;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height:1.5;
  opacity:0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
  white-space: normal;   /* que se parta en varias líneas si hace falta */
  word-wrap: break-word; /* que corte palabras largas */
  overflow-wrap: anywhere;  /* corta palabras muy largas si hiciera falta */
}

/* === Interacción: el panel avanza (overlay) y aparece el lorem === */
.strip:hover .panel::after,
.strip.is-active .panel::after,
.strip:focus-visible .panel::after{
  width: var(--overlay-extra);   /* +40% → total visible de color ≈ 80% */
}

.strip:hover .desc,
.strip.is-active .desc,
.strip:focus-visible .desc{
  opacity:1;
  transform: translateY(0);
}

/* Tonos por tira: SOLO cambiamos el fondo, no el color del texto */
.tone-1 .panel{ --panel-bg: #6a040f; }
.tone-2 .panel{ --panel-bg: #9d0208; }
.tone-3 .panel{ --panel-bg: #d00000; }
.tone-4 .panel{ --panel-bg: #dc2f02; }
.tone-5 .panel { --panel-bg: #e85d04; }

/* Separador sutil (quita si las querés totalmente pegadas visualmente) */
.strip + .strip{
  border-top: 1px solid rgba(0,0,0,.04);
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  :root{
    --row-h: clamp(150px, 35vw, 250px);
    --img-w: 55%;
    --panel-w: 45%;
    --panel-w-hover: 70%;
    --overlay-extra: calc(var(--panel-w-hover) - var(--panel-w)); /* 70 - 45 = 25% */
  }
}

.desc a {
  display: inline;          /* se comportan como texto */
  color: inherit;
  text-decoration: none;
  transition: font-weight 0.2s ease;
  white-space: normal;      /* <— antes estaba nowrap; lo quitamos */

}

.desc a:hover {
  font-weight: 700;       /* Negrita en hover */
}

/* ===== Contacto ===== */
.contact-section{
  min-height: 80vh;
  padding: clamp(24px, 4vw, 48px) 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
}

.contact-card{
  width: 90%;
  max-width: 940px;
  /* 50% desktop / 90% mobile controlado con media */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: clamp(20px, 3.2vw, 36px);
}

.contact-card h2{
  margin: 0 0 12px 0;
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
}

.form-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.form-row label{
  font-weight: 600;
  font-size: 0.95rem;
}

.form-row input,
.form-row textarea{
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 1rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  background: #fff;
}

.form-row input:focus,
.form-row textarea:focus{
  border-color: #d00000;           /* combina con paleta de strips */
  box-shadow: 0 0 0 4px rgba(208,0,0,.08);
}

.char-counter{
  display: block;
  margin-top: 4px;
  font-size: 11px;                 /* “letra muy pequeña” */
  color: #666;
}

.btn-enviar{
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 1rem;
  background: #d00000;             /* tono-3 base */
  color: #fff;
  cursor: pointer;
  transition: transform .08s ease, filter .2s ease, background .2s ease;
}

.btn-enviar:hover{ filter: brightness(1.05); }
.btn-enviar:active{ transform: translateY(1px); }

/* Ancho responsivo: 90% mobile / ~50% desktop */
@media (min-width: 900px){
  .contact-card{ width: 50%; }
}

/* Links más chicos en .strips (solo mobile) */
@media (max-width: 768px){
  .strips .desc a{
    font-size: 0.6rem;   /* o 14px */
  }
}