*{margin:0px;padding:0px;}

@font-face {
    font-family: "calendas";
    src: url('../tipografias/calendas-plus.woff2') format('woff2'),
         url('../tipografias/calendas-plus.woff') format('woff'),
         url('../tipografias/calendas-plus.ttf') format('truetype');
    /* Texto visible con la fuente de reserva mientras carga la web font */
    font-display: swap;
}


body,html {
	margin:					0;
	padding:				0;
	font-size:13px;
	font-family:"calendas";
	background:#EFEFEF;
}

a{
	color:#681314;
	text-decoration:none;
        font-family:"calendas";
}

a:hover{
	text-decoration:underline;	
}

h1{
	font-weight:normal;
	font-size:18px;
	color:#681314;
}

h3{
	color:#681314;
}


input,textarea{
  font-family:"calendas";
  font-size:16px;
}

#contenedorDegradado{
  float:left;
  width:100%;
  background: rgba(197,197,197,1);
  background: -moz-linear-gradient(top, rgba(197,197,197,1) 0%, rgba(246,246,246,1) 47%, rgba(255,255,255,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(197,197,197,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(255,255,255,1)));
  background: -webkit-linear-gradient(top, rgba(197,197,197,1) 0%, rgba(246,246,246,1) 47%, rgba(255,255,255,1) 100%);
  background: -o-linear-gradient(top, rgba(197,197,197,1) 0%, rgba(246,246,246,1) 47%, rgba(255,255,255,1) 100%);
  background: -ms-linear-gradient(top, rgba(197,197,197,1) 0%, rgba(246,246,246,1) 47%, rgba(255,255,255,1) 100%);
  background: linear-gradient(to bottom, rgba(197,197,197,1) 0%, rgba(246,246,246,1) 47%, rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5c5c5', endColorstr='#ffffff', GradientType=0 );  
}

#contenedorPrincipal{
  float:left;
  width:100%;
  background:url("../img/pix/tapiz.png") center top no-repeat;  
}




#contenedorPrincipal>#contenedorPagina{
  width:990px;
  margin:0 auto;
  
}

#contenedorPrincipal>#contenedorPagina #contenedorSombra{
  float:left;
  width:100%;
  box-shadow:0 0 15px 1px #757575;  
}


#contenedorPrincipal>#contenedorPagina #cabecera{
  float:left;
  width:100%;
  height:205px;
  background:#FFF;
}

#contenedorPrincipal>#contenedorPagina #cabecera>#adornoIzq{
  float:left;
  width:240px;
  margin-left:40px;
  margin-top:35px;
}

#contenedorPrincipal>#contenedorPagina #cabecera>#logo{
  float:left;
  width:470px;
}

#contenedorPrincipal>#contenedorPagina #cabecera>#logo>#titulo{
  float:left;
  width:100%;  
}

#contenedorPrincipal>#contenedorPagina #cabecera>#logo>#titulo>.marca{
  float:left;
  width:100%;
  text-align:center;
  font-size:58px;
  border-bottom:5px solid #681314;
  line-height:70px;
  margin-top:10px;
  color:#000;
}

#contenedorPrincipal>#contenedorPagina #cabecera>#logo>#texto{
  float:left;
  width:100%;
  text-align:center;
  color:#a58b59;
  font-size:28px;
}

/************* ENTRADA DE LA MARCA (SOLO PORTADA) ****************/
/* Solo la marca de la portada lleva .marcaPortada, así que esto ocurre una
   vez al entrar en la web y no se repite en cada navegación del catálogo. La línea granate se dibuja desde
   el centro hacia fuera, como una barra forjada. */

@keyframes marcaEntra{
  from{
    opacity:0;
    transform:translateY(-8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes marcaEntraSuave{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes marcaLinea{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

#contenedorPrincipal>#contenedorPagina #cabecera>#logo>#titulo>.marcaPortada{
  position:relative;
  /* El borde pasa a ser un pseudo-elemento para poder dibujarlo; el
     padding mantiene exactamente la misma altura que tenía con border. */
  border-bottom:none;
  padding-bottom:5px;
  animation:marcaEntra 400ms cubic-bezier(0.23,1,0.32,1) both;
}

#contenedorPrincipal>#contenedorPagina #cabecera>#logo>#titulo>.marcaPortada::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:5px;
  background:#681314;
  transform-origin:center;
  animation:marcaLinea 400ms cubic-bezier(0.23,1,0.32,1) 120ms both;
}

#contenedorPrincipal>#contenedorPagina #cabecera>#logo>#titulo:has(.marcaPortada) + #texto{
  animation:marcaEntra 400ms cubic-bezier(0.23,1,0.32,1) 200ms both;
}

@media (prefers-reduced-motion:reduce){
  #contenedorPrincipal>#contenedorPagina #cabecera>#logo>#titulo>.marcaPortada,
  #contenedorPrincipal>#contenedorPagina #cabecera>#logo>#titulo:has(.marcaPortada) + #texto{
    animation:marcaEntraSuave 200ms ease-out both;
  }

  #contenedorPrincipal>#contenedorPagina #cabecera>#logo>#titulo>.marcaPortada::after{
    animation:marcaEntraSuave 200ms ease-out both;
  }
}

#contenedorPrincipal>#contenedorPagina #cabecera>#adornoDer{
  float:right;
  width:240px;
  margin-top:20px;
}

#contenedorPrincipal>#contenedorPagina #galeria{
  float:left;
  width:100%;
  height:140px;
  border-top:15px solid #681314;
}

#contenedorPrincipal>#contenedorPagina #menu{
 float:left;
 width:100%;
 height:30px;
 background:#681314;
}

#contenedorPrincipal>#contenedorPagina #menu>ul{
  float:left;
  width:100%;
  list-style:none;
}

#contenedorPrincipal>#contenedorPagina #menu>ul>li{
  float:left;
  width:25%;
  height:30px;
  line-height:30px;
}

#contenedorPrincipal>#contenedorPagina #menu>ul>li>a{
  float:left;
  width:100%;
  height:30px;
  line-height:30px;
  text-align:center;
  color:#FFFFFF;
  font-size:22px;
}

#contenedorPrincipal>#contenedorPagina #menu>ul>li>a:hover,#contenedorPrincipal>#contenedorPagina #menu>ul>li>a.seleccionado{
  color:#b7a37b;
  text-decoration: none;
}


#contenedorPrincipal>#contenedorPagina #contenido{
  float:left;
  width:100%;
  background:#EFEFEF;  
  border-bottom:5px solid #a58b59;
  
  
}

#contenedorPrincipal>#contenedorPagina #pie{
  float:left;
  width:100%;
  min-height:125px;
  background:#681314;
  color:#FFF;
  font-size:14px;
}

#contenedorPrincipal>#contenedorPagina #pie>#columnaPie1{
  float:left;
  width:400px;
  margin-top:20px;
  margin-left:30px;
  
}

#contenedorPrincipal>#contenedorPagina #pie>#columnaPie2{
  float:left;
  margin-top:20px;
  margin-left:30px;
}

#contenedorPrincipal>#contenedorPagina #pie a{
  color:#FFFFFF;
  text-decoration:underline;
}

#contenedorPrincipal>#contenedorPagina #pie a:hover{
  color:#b7a37b;
}

#pie .redesPie{
  display:flex;
  gap:14px;
  margin-top:10px;
}

#contenedorPrincipal>#contenedorPagina #pie .redesPie a{
  display:block;
  line-height:0;
  transition:color 150ms ease-out;
}

#pie .redesPie svg{
  display:block;
}

/* Icono de WhatsApp junto al móvil, alineado con el texto */
#contenedorPrincipal>#contenedorPagina #pie a.whatsappPie{
  display:inline-block;
  margin-left:6px;
  line-height:0;
  vertical-align:-4px;
  transition:color 150ms ease-out;
}



/* Menú más estrecho (205 → 160px); los 45px sobrantes los aprovecha
   #detalle (740 → 785px), con las tarjetas y la ficha ensanchadas a juego. */
#categorias{
  width:160px;
  margin-left:15px;
  margin-top:15px;
  padding-bottom:20px;
}

#categorias>ul{
  float:left;
  width:100%;
  text-indent:15px;
  list-style:none; 
}

#categorias>ul>li{
  float:left;
  width:100%;
  font-size:20px;
  color:#681314; 
}

#categorias>ul>li.seleccionado{
  background:#681314;
  color:#FFF;
}

#categorias>ul>li.seleccionado>a{
  color:#FFF;
}

#categorias>ul>li>div:hover{
  color:#a58b59;
  cursor:pointer;
}

#categorias>ul>ul{
  float:left;
  width:100%;
  text-indent:30px;
  list-style:none;
}

#categorias>ul>ul>li{
  float:left;
  clear:left;
  color:#000;
  font-size:16px;
  padding-right:35px;
}

#categorias>ul>ul>li.seleccionado{
  background:#681314;
  color:#FFF;
}

#categorias>ul>ul>li.seleccionado>a{
  color:#FFF;
}

#categorias>ul>ul>li>div:hover{
  color:#a58b59;
  cursor:pointer;
}

#detalle{
  float:left;
  width:785px;
  margin-left:15px;
  margin-top:15px;
  padding-bottom:20px;
}

#detalle>label{
  float:left;
  width:100%;
  height:35px;
  line-height:35px;
  color:#a58b59;
  font-size:32px;
  margin-bottom:10px;
}

#detalle>.sinProductos{
  float:left;
  width:100%;
  font-size:22px;
}

/* Texto de presentación de la categoría, entre el H1 y la cuadrícula */
#detalle>.introCategoria{
  float:left;
  width:100%;
  box-sizing:border-box;
  padding:0 15px;
  margin-bottom:26px;
  font-size:18px;
  line-height:1.65;
  color:#3a3a3a;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* Contenedor propio para que :nth-child(2n) del móvil cuente solo tarjetas
   y no el H1 o la intro que van delante. */
#detalle>.cuadricula{
  float:left;
  width:100%;
}

.titulo a{
  color:inherit;
  text-decoration:none;
}

/* Portada: enlace al catálogo completo bajo cada sección destacada */
#detalle>.verTodas{
  float:left;
  width:100%;
  box-sizing:border-box;
  padding:0 15px;
  margin-bottom:10px;
  text-align:right;
  font-size:18px;
  color:#681314;
  text-decoration:none;
}

#detalle>.verTodas:hover{
  text-decoration:underline;
}

/* Portada: tarjetas del escaparate de categorías */
.columna240.item.tarjetaCategoria>.nombreProducto{
  font-size:17px;
  color:#681314;
}

/* Migas de pan (categoría, subcategoría y ficha) */
#detalle>.migas{
  float:left;
  width:100%;
  box-sizing:border-box;
  padding:0 15px;
  margin-bottom:10px;
  font-size:15px;
  color:#555555;
}

.migas a{
  color:#681314;
  text-decoration:none;
}

.migas a:hover{
  text-decoration:underline;
}

.migas .separador{
  margin:0 4px;
  color:#8a7348;
}

.titulo a:hover{
  text-decoration:underline;
}


.columna205{
  float:left;
  width:205px;
 
}

.columna240{
  float:left;
  width:251px;
}

/* Altura uniforme: sin esto, un nombre de 3 líneas hace la tarjeta más
   alta, su float invade la fila siguiente y descoloca la cuadrícula.
   200px de imagen + 3 líneas de nombre (16,9px) + 16px de padding. */
.columna240.item{
  min-height:267px;
  background:#FFF;
  display:flex;
  flex-direction:column;
}

.columna240.item>.imagenProducto{
  width:100%;
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.columna240.item>.imagenProducto>img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
}

.columna240.item>.nombreProducto{
  width:100%;
  box-sizing:border-box;
  padding:8px 10px;
  font-size:13px;
  line-height:1.3;
  color:#333333;
  text-align:center;
}



.columna470{
  float:left;
  width:470px;
  margin-left:15px;
  font-size:18px;
  line-height:1.65;
  color:#3a3a3a;
}

.item{
  margin-right:10px;
  margin-bottom:10px;
  cursor:pointer;
}

.item:hover{
  box-shadow:0 0 6px 1px #757575;
}

@media (hover:hover) and (pointer:fine){
  .item{
    transition:box-shadow 150ms ease-out, transform 150ms ease-out;
  }

  .item:hover{
    transform:translateY(-2px);
  }
}

.ultimo{
  margin-right:0px;
}


.producto{
  float:left;
  width:785px;

}

.producto>.imagen{
  float:left;
  width:761px;
  border:12px solid #681314;
  text-align:center;
  background:#FFF;
}

.producto>.imagen>img{
  margin:0 auto;
  max-width:100%;
  max-height:600px;
  width:auto;
  height:auto;
}

.producto>.informacionProducto{
  float:left;
  width:761px;
  padding:12px;
  background:#E0E0E0;
  font-size:16px;
}

.producto>.informacionProducto label{
  float:left;
  color:#681314;
  margin-right:5px;
}

.producto>.informacionProducto>.referencia{
  float:left;
  width:220px;
}

.producto>.informacionProducto>.nombre{
 float:left;
 width:460px;
 margin-left:20px;
   
}

.producto>.informacionProducto>.descripcion{
  float:left;
  width:100%;
}

.producto>.informacionProducto>.descripcion label{
  float:none;
  display:block;
  margin:8px 0 6px;
}

.producto>.informacionProducto>.descripcion .texto p{
  margin:0 0 .8em;
  text-indent:1.5em;
  line-height:1.6;
}

.producto>.informacionProducto>.descripcion .texto p:last-child{
  margin-bottom:0;
}

.volver{
  cursor:pointer;
  color:#681631;
  margin-top:20px;
  font-size:16px;
  float:left;
  clear:both;
  
}

.volver:hover{
  color:#847048;
}

.interes{
  float:left;
  width:500px;
  margin-left:120px;
  height:40px;
  line-height:40px;
  background:#681314;
  border-radius:10px;
  margin-top:20px;
  color:#FFFFFF;
  text-align:center;
  font-size:22px;
  cursor:pointer;
}

.interes:hover{
  box-shadow:0 0 6px 1px #757575;
}

.interes:focus,
.interesOferta:focus{
  outline:3px solid #a58b59;
  outline-offset:2px;
}


.formularioInteres{
  float:left;
  width:700px;
  padding:20px;
  margin-top:20px;
  border-radius:10px;
  background:#E0E0E0;
  
}

.formularioInteres.oferta{
  width:120px;
  margin-left:0;
  margin-bottom:20px;
}

.formularioInteres.oculto{
  height:0px;
  padding:0px;
  overflow:hidden;
  margin-top:0px;
}

@keyframes formularioAparece{
  from{
    opacity:0;
    transform:translateY(-6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.formularioInteres:not(.oculto){
  animation:formularioAparece 200ms cubic-bezier(0.23,1,0.32,1);
}

@media (prefers-reduced-motion:reduce){
  .formularioInteres:not(.oculto){
    animation:none;
  }
}

.formularioInteres>.texto{
  float:left;
  width:100%;
  font-size:16px;
}

.formularioInteres>.formulario{
  float:left;
  width:100%;
  margin-top:20px;
}

.formularioInteres>.formulario .campo{
  float:left;
}

.formularioInteres>.formulario .campo.input{
  float:left;
  width:50%;
  
}

.formularioInteres.oferta>.formulario .campo.input{
  width:100%;
}

.formularioInteres.oferta>.formulario .campo.input input{
  width:120px;
}


.formularioInteres>.formulario .campo.submit{
  float:left;
  margin-top:20px;
  margin-left:300px;  
}

.formularioInteres.oferta>.formulario .campo.submit{
  margin-left:0px;
}



.formularioInteres>.formulario .campo.submit input{
  background:#681314;
  border:none;
  border-radius:5px;
  cursor:pointer;
  color:#FFF;
  font-size:22px;
  padding-left:10px;
  padding-right:10px;
  transition:transform 120ms ease-out;
}

.formularioInteres>.formulario .campo.submit input:hover{
  box-shadow:0 0 6px 1px #757575;
}

.formularioInteres>.formulario .campo.submit input:active{
  transform:scale(0.97);
}
  

.formularioInteres>.formulario .campo.input input{
  border:none;
  padding-left:5px;
}

.formularioInteres>.formulario .campo.textarea{
  float:left;
  width:100%;
  margin-top:20px;
}

.formularioInteres>.formulario .campo.textarea label{
  width:100%;
}

.formularioInteres>.formulario .campo.textarea textarea{
  float:left;
  width:690px;
  height:120px;
  padding:5px;
  margin-top:5px;
  border:none;
}

.formularioInteres>.formulario .campo label{
  float:left;
  font-size:18px;
  margin-right:5px;
}

.articulosRelacionados{
  float:left;
  width:785px;
  margin-top:40px;
  height:140px;
}

.articulosRelacionados>label{
  float:left;
  width:100%;
  height:30px;
  line-height:30px;
  color:#681631;
  font-size:22px;
  margin-bottom:10px;
}

.articulosRelacionados>.relacionado{
  float:left;
  width:115px;
  height:115px;
  margin-right:10px;
  margin-bottom:10px;
  cursor:pointer;
  background:#FFF;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.articulosRelacionados>.relacionado>img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
}

.articulosRelacionados>.relacionado:hover{
  box-shadow:0 0 6px 1px #757575;
}

@media (hover:hover) and (pointer:fine){
  .articulosRelacionados>.relacionado{
    transition:box-shadow 150ms ease-out, transform 150ms ease-out;
  }

  .articulosRelacionados>.relacionado:hover{
    transform:translateY(-2px);
  }
}

.articulosRelacionados>.relacionado.ultimo{
  margin-right:0px;
}


#detalle>#login{
  float:left;
}

#login{
  float:right;
  width:180px;
  margin-right:10px;
  margin-top:10px;
}

#login label{
  float:left;
  font-size:18px;
  margin-bottom:5px;
}

#login .clave{
  border:none;
  width:160px;
  padding-left:5px;
  padding-right:5px;
  float:left;
  padding-top:2px;
  padding-bottom:2px;
  
}

#login .submit{
  float:left;
  background:#FFF;
  color:#681314;
  border:none;
  border-radius:5px;
  margin-top:5px;
  cursor:pointer;
  transition:transform 120ms ease-out;
}


#login .submit:hover{
  box-shadow:0 0 6px 1px #757575;
}

#login .submit:active{
  transform:scale(0.97);
}

/************* EMPRESA ****************/

.titulo{
  float:left;
  width:100%;
  height:auto;
  text-indent:15px;
  line-height:1.25;
  padding-top:6px;
  padding-bottom:6px;
  font-size:32px;
  color:#681314;
  margin-top:20px;
  margin-bottom:20px;
  box-sizing:border-box;
}

.imagenEmpresa{
  float:left;
  margin-top:20px;
}

.columna470 p{
  text-align:justify;
  text-indent:2em;
}

/* Rejas y escaleras: subtítulos y lista de trabajos dentro de las columnas */
.columna470>.subtituloPagina{
  margin:22px 0 6px;
  font-size:22px;
  font-weight:normal;
  color:#681314;
}

.columna470>.listaTrabajos{
  padding-left:1.3em;
}

.columna470>.listaTrabajos>li::marker{
  color:#681314;
}

.columna470>p.visitaTaller{
  float:left;
  width:100%;
  margin-top:20px;
  text-indent:0;
}


/************* OFERTA ***************/

.oferta{
  margin-left:15px;
}

/* Columna del precio al ancho del menú (160px), para que quepa junto a
   #detalle (785px) igual que en el resto de páginas */
.columna205.oferta{
  width:160px;
}

.precioNuevo{
  float:left;  
  width:100%;
  height:150px;
  line-height:150px;
  text-align:center;
  font-size:50px;
  margin-top:15px;
  background:#FFF;   
  color:#681314;
}

.precioAnterior{
  float:left;
  width:100%;
  height:40px;
  text-align:center;
  line-height:40px;
  margin-top:10px;
  font-size:32px;
  
}

.fechaValidez{
  float:left;
  width:100%;
  margin-bottom:10px;
  text-align:center;  
  font-size:18px;
}

/* La fecha no se parte por los guiones: si no cabe, baja entera */
.fechaValidez>span{
  white-space:nowrap;
}

.interesOferta{
  float:left;
  box-sizing:border-box;
  width:100%;
  height:150px;
  padding:20px 8px 0;
  background:#681314;
  color:#FFF;
  text-align:center;
  border-radius:10px;
  font-size:24px;
  cursor:pointer;
  margin-top:20px;
  transition:transform 120ms ease-out;
}

.interesOferta:hover{
  box-shadow:0 0 6px 1px #757575;
}

.interesOferta:active{
  transform:scale(0.97);
}
  



/****************** CONTACTO *****************/

.contenedorEmail{
  float:left;
  width:100%;
  margin-top:20px;
}

.contenedorEmail>.email,
.contenedorTelefono>.telefono{
  color:#681314;
}

.contenedorEmail>.email>a,
.contenedorTelefono>.telefono>a{
  color:inherit;
  text-decoration:none;
}

.contenedorEmail>.email>a:hover,
.contenedorTelefono>.telefono>a:hover{
  text-decoration:underline;
}

.contenedorTelefono{
  float:left;
  width:100%;
  margin-top:20px;
}

.contenedorHorario{
  float:left;
  width:100%;
  margin-top:20px;
}

.contenedorHorario>.horario{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 12px;
  margin-top:6px;
  font-size:18px;
}

.contenedorHorario>.horario dt{
  color:#681314;
}

#formularioContacto{
  float:left;
  width:100%;
}

#formularioContacto>.campo{
  float:left;
  width:100%;
  margin-bottom:20px;
}

#formularioContacto>.campo>label{
  float:left;
  width:100%;
  margin-bottom:5px;
}

#formularioContacto>.campo>input{
  float:left;
  width:100%;
  box-sizing:border-box;
  height:36px;
  padding-left:5px;
  padding-right:5px;  
  line-height:36px;
  border:none;
}


#formularioContacto>.campo>textarea{
  float:left;
  width:100%;
  box-sizing:border-box;
  height:200px;
  padding:5px;
  border:none;
}

#formularioContacto>.campo.submit>input{
  width:100px;
  cursor:pointer;
  border-radius:5px;
  background:#681314;
  color:#FFF;
  font-size:18px;
  transition:transform 120ms ease-out;
}


#formularioContacto>.campo.submit>input:hover{
  box-shadow:0 0 6px 1px #757575;
}

#formularioContacto>.campo.submit>input:active{
  transform:scale(0.97);
}

#mapa{
  float:left;
  width:100%;
  height:300px;
}

.comoLlegar{
  float:left;
  width:100%;
  margin-top:10px;
  margin-bottom:20px;
  text-align:center;
  font-size:14px;
}

@keyframes avisoEntra{
  from{
    opacity:0;
    transform:translateY(-6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes avisoEntraSuave{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

.resultadoCorreo{
  float:left;
  width:100%;
  margin-bottom:20px;
  text-align:center;
  font-size:16px;
  animation:avisoEntra 400ms ease-out;
}

@media (prefers-reduced-motion:reduce){
  .resultadoCorreo{
    animation:avisoEntraSuave 200ms ease-out;
  }
}

.resultadoCorreo.error{
  color:red;
}


/************* CARRUSEL DE LA PORTADA ****************/
/* Marco de fotos en la columna central de la portada: las diapositivas van en
   fila dentro de una tira que se desplaza con transform (sin tocar el layout).
   El paso automático lo marca la barra de progreso del punto activo
   (animationend en js/funciones.js), así pausa y tiempo van siempre juntos. */

/************* TEXTO DECORADO (PORTADA Y EMPRESA) ****************/
/* Composición de libro: título centrado, adorno con las volutas de la cabecera
   (recortadas con fondo transparente y en dorado), texto justificado sin partir
   palabras, letra capital en el primer párrafo y sangría en los siguientes, sin
   espacio entre párrafos. */

.tituloDecorado{
  font-size:34px;
  font-weight:normal;
  line-height:1.2;
  color:#681314;
  text-align:center;
  text-indent:0;
  text-wrap:balance;
}

.titulo.tituloDecorado{
  margin-bottom:0;
}

.ornamentoForja{
  float:left;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:8px 0 18px;
}

.ornamentoForja>img{
  width:100px;
  height:auto;
}

.ornamentoForja>.rombo{
  flex-shrink:0;
  width:9px;
  height:9px;
  background:#681314;
  transform:rotate(45deg);
}

.capitular{
  text-indent:0 !important;
}

.capitular::first-letter{
  float:left;
  padding:7px 10px 0 0;
  font-family:"calendas";
  font-size:88px;
  line-height:0.8;
  color:#681314;
}

/* Portada: bienvenida en la columna central, bajo ella el carrusel */
#detalle>.bienvenida{
  float:left;
  width:100%;
  max-width:773px;
  margin-bottom:26px;
}

.bienvenida>.tituloDecorado{
  margin-top:4px;
}

.bienvenida>.textoBienvenida{
  clear:both;
  max-width:740px;
  margin:0 auto;
  font-size:18px;
  line-height:1.65;
  color:#3a3a3a;
  text-align:justify;
  text-indent:2em;
}

::selection{
  background:#681314;
  color:#FFF;
}

.carrusel{
  float:left;
  width:100%;
  max-width:773px; /* mismo ancho que la cuadrícula de 3 tarjetas de debajo */
  margin-bottom:10px;
}

.carrusel>.ventanaCarrusel{
  overflow:hidden;
  background:#FFF;
  box-shadow:0 1px 4px rgba(0,0,0,0.12);
}

.carrusel .pistaCarrusel{
  display:flex;
  transition:transform 600ms cubic-bezier(0.77,0,0.175,1);
}

.carrusel .diapositiva{
  flex:0 0 100%;
  min-width:0;
}

.carrusel .enlaceDiapositiva{
  display:block;
  color:inherit;
  text-decoration:none;
}

.carrusel .fotoDiapositiva{
  display:flex;
  align-items:center;
  justify-content:center;
  height:340px;
  background:#FFF;
}

.carrusel .fotoDiapositiva>img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  box-sizing:border-box;
  padding:20px;
  /* Varias fotos tienen el fondo en gris muy claro (~245-250) y sobre el marco
     blanco se nota un recuadro: esto lo lleva a blanco sin tocar el hierro */
  filter:brightness(1.05);
}

/* Sello comercial: placa granate con filete dorado en la esquina de la foto.
   Aparece cuando la diapositiva ya ha llegado (retraso ≈ el deslizamiento). */
.carrusel .enlaceDiapositiva{
  position:relative;
}

.carrusel .selloDiapositiva{
  position:absolute;
  top:12px;
  left:12px;
  z-index:1;
  display:flex;
  flex-direction:column;
  max-width:150px;
  padding:9px 12px 8px;
  background:#681314;
  box-shadow:inset 0 0 0 3px #681314, inset 0 0 0 4px #d9c294, 0 2px 6px rgba(0,0,0,0.18);
  color:#FFF;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity 400ms ease-out, transform 400ms ease-out;
}

/* Con sello, la foto deja a cada lado el ancho de la placa: sigue centrada y
   la placa nunca pisa el producto (la mesa, la más ancha, es la que lo nota) */
.carrusel .selloDiapositiva+.fotoDiapositiva>img{
  padding:20px 172px;
}

.carrusel .activa .selloDiapositiva{
  opacity:1;
  transform:none;
  transition-delay:450ms;
}

.carrusel .titularSello{
  font-size:18px;
  line-height:1.15;
}

.carrusel .subtituloSello{
  margin-top:3px;
  font-size:13px;
  line-height:1.25;
  color:#d9c294;
}

.carrusel .pieDiapositiva{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 20px;
  background:#681314;
  color:#FFF;
}

.carrusel .textosPie{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.carrusel .categoriaDiapositiva{
  font-size:15px;
  color:#d9c294;
}

.carrusel .tituloDiapositiva{
  font-size:22px;
  line-height:1.2;
}

.carrusel .verDiapositiva{
  flex-shrink:0;
  font-size:16px;
  color:#d9c294;
}

@media (hover:hover) and (pointer:fine){
  .carrusel .enlaceDiapositiva:hover .tituloDiapositiva,
  .carrusel .enlaceDiapositiva:hover .verDiapositiva{
    text-decoration:underline;
  }
}

.carrusel .enlaceDiapositiva:focus-visible,
.carrusel .pausaCarrusel:focus-visible,
.carrusel .puntoCarrusel:focus-visible{
  outline:3px solid #a58b59;
  outline-offset:3px;
}

.carrusel>.controlesCarrusel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding-top:12px;
}

/* Pausa: dos barras; en pausa pasa a triángulo de reproducir */
.carrusel .pausaCarrusel{
  position:relative;
  width:28px;
  height:28px;
  margin-right:6px;
  padding:0;
  border:1px solid #681314;
  border-radius:50%;
  background:none;
  cursor:pointer;
}

.carrusel .pausaCarrusel::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  box-sizing:border-box;
  width:9px;
  height:10px;
  border-left:3px solid #681314;
  border-right:3px solid #681314;
  transform:translate(-50%,-50%);
}

.carrusel.pausadoPorUsuario .pausaCarrusel::before{
  width:0;
  height:0;
  border-left:9px solid #681314;
  border-right:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  transform:translate(-35%,-50%);
}

/* Puntos en forma de barra; el activo se rellena con el tiempo que le queda */
.carrusel .puntoCarrusel{
  position:relative;
  width:32px;
  height:24px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}

.carrusel .puntoCarrusel::before,
.carrusel .puntoCarrusel::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:3px;
  margin-top:-1.5px;
  border-radius:2px;
}

.carrusel .puntoCarrusel::before{
  background:rgba(104,19,20,0.25);
}

.carrusel .puntoCarrusel::after{
  background:#681314;
  transform:scaleX(0);
  transform-origin:left center;
}

@keyframes progresoCarrusel{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

.carrusel .puntoCarrusel.activo::after{
  animation:progresoCarrusel 3500ms linear forwards;
}

.carrusel.pausado .puntoCarrusel.activo::after{
  animation-play-state:paused;
}

/* Sin paso automático (movimiento reducido): punto activo lleno y sin botón de pausa */
.carrusel.sinAutoplay .puntoCarrusel.activo::after{
  animation:none;
  transform:scaleX(1);
}

.carrusel.sinAutoplay .pausaCarrusel{
  display:none;
}

/* Aviso de la oferta del mes bajo el carrusel (solo si hay una vigente) */
.avisoOferta{
  float:left;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:773px;
  margin:6px 0 16px;
  padding:12px 16px 12px 12px;
  background:#FFF;
  border-left:5px solid #681314;
  box-shadow:0 1px 4px rgba(0,0,0,0.12);
  color:#3a3a3a;
  text-decoration:none;
}

.avisoOferta>.fotoAvisoOferta{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:84px;
  height:84px;
}

.avisoOferta>.fotoAvisoOferta>img{
  max-width:100%;
  max-height:100%;
}

.avisoOferta>.textosAvisoOferta{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}

.avisoOferta .etiquetaAvisoOferta{
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#a58b59;
}

.avisoOferta .preciosAvisoOferta{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  column-gap:10px;
}

.avisoOferta .preciosAvisoOferta>strong{
  font-size:30px;
  font-weight:normal;
  line-height:1.2;
  color:#681314;
}

.avisoOferta .preciosAvisoOferta>del{
  font-size:17px;
  color:#777;
}

.avisoOferta .validezAvisoOferta{
  font-size:15px;
}

.avisoOferta>.verAvisoOferta{
  flex-shrink:0;
  padding:10px 18px;
  background:#681314;
  color:#FFF;
  font-size:17px;
  transition:background-color 150ms ease-out;
}

@media (hover:hover) and (pointer:fine){
  .avisoOferta:hover>.verAvisoOferta{
    background:#8a1a1c;
  }
}

.avisoOferta:focus-visible{
  outline:3px solid #a58b59;
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .carrusel .pistaCarrusel,
  .carrusel .selloDiapositiva{
    transition:none;
  }
}

@media (max-width: 700px) {
  .tituloDecorado{
    font-size:27px;
  }

  .ornamentoForja>img{
    width:72px;
  }

  .bienvenida>.textoBienvenida,
  .columna470{
    padding:0 15px;
    font-size:17px;
  }

  /* En pantallas estrechas, justificar sin partir palabras abre huecos grandes */
  .bienvenida>.textoBienvenida,
  #detalle>.introCategoria,
  .columna470 p{
    text-align:left;
  }

  .capitular::first-letter{
    padding-top:5px;
    font-size:72px;
  }

  .carrusel .fotoDiapositiva{
    height:240px;
  }

  .carrusel .fotoDiapositiva>img{
    padding:12px;
  }

  .avisoOferta{
    flex-wrap:wrap;
    gap:10px 14px;
  }

  .avisoOferta>.fotoAvisoOferta{
    width:64px;
    height:64px;
  }

  .avisoOferta>.verAvisoOferta{
    flex-basis:100%;
    text-align:center;
  }

  /* En el móvil la foto ocupa todo el ancho: el sello pasa a franja encima */
  .carrusel .selloDiapositiva+.fotoDiapositiva>img{
    padding:12px;
  }

  .carrusel .selloDiapositiva{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:8px;
    max-width:none;
    padding:8px 14px;
    box-shadow:inset 0 -1px 0 #d9c294;
  }

  .carrusel .titularSello{
    font-size:17px;
  }

  .carrusel .subtituloSello{
    margin-top:0;
    font-size:13px;
  }

  .carrusel .pieDiapositiva{
    padding:10px 14px;
  }

  .carrusel .tituloDiapositiva{
    font-size:18px;
  }

  .carrusel .verDiapositiva{
    font-size:14px;
  }
}

/* ===== Responsive baseline (Task 6.2) ===== */

@media (max-width: 1024px) {
  #contenedorPrincipal>#contenedorPagina{
    width:100%;
    max-width:990px;
    padding:0 10px;
    box-sizing:border-box;
  }
}

/* El diseño de escritorio necesita unos 1000px (la foto de cabecera y
   menú + #detalle), así que hasta 1024px se usa el diseño en una columna;
   en tablet se ajusta después para aprovechar el ancho. */
@media (max-width: 1024px) {

  #contenedorPrincipal>#contenedorPagina #cabecera{
    height:auto;
    padding:10px 0;
  }

  #contenedorPrincipal>#contenedorPagina #cabecera>#adornoIzq,
  #contenedorPrincipal>#contenedorPagina #cabecera>#adornoDer{
    display:none;
  }

  #contenedorPrincipal>#contenedorPagina #cabecera>#logo{
    width:100%;
  }

  #contenedorPrincipal>#contenedorPagina #cabecera>#logo>#titulo>.marca{
    font-size:32px;
    line-height:40px;
    margin-top:0;
  }

  #contenedorPrincipal>#contenedorPagina #cabecera>#logo>#texto{
    font-size:18px;
    color:#847048;
  }

  #contenedorPrincipal>#contenedorPagina #galeria{
    height:auto;
  }

  #contenedorPrincipal>#contenedorPagina #galeria img{
    width:100%;
    height:auto;
  }

  #contenedorPrincipal>#contenedorPagina #menu{
    height:auto;
  }

  #contenedorPrincipal>#contenedorPagina #menu>ul>li{
    width:50%;
    height:44px;
    line-height:44px;
  }

  #contenedorPrincipal>#contenedorPagina #menu>ul>li>a{
    height:44px;
    line-height:44px;
    font-size:16px;
  }

  #categorias,
  #detalle,
  .columna205,
  .columna470,
  .producto,
  .producto>.imagen,
  .producto>.informacionProducto,
  .producto>.informacionProducto>.referencia,
  .producto>.informacionProducto>.nombre,
  .formularioInteres,
  .articulosRelacionados,
  .articulosRelacionados>.relacionado{
    width:100% !important;
    max-width:100%;
    margin-left:0 !important;
    box-sizing:border-box;
  }

  /* Catálogo: 2 columnas en vez de 1 producto por fila */
  .columna240{
    width:48% !important;
    max-width:48%;
    margin-left:0 !important;
    margin-right:4% !important;
    box-sizing:border-box;
  }

  .columna240.item:nth-child(2n){
    margin-right:0 !important;
  }

  /* Categorías: fila compacta de píldoras en vez de lista vertical de 17 filas */
  #categorias{
    margin-left:0;
    margin-right:0;
    margin-top:10px;
    padding-bottom:10px;
  }

  #categorias>ul{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    text-indent:0;
    padding:0 10px;
    width:100%;
    box-sizing:border-box;
  }

  #categorias>ul>li.categorias{
    float:none;
    width:auto;
    flex:0 0 auto;
    white-space:nowrap;
    font-size:14px;
    border-radius:20px;
    background:#F2F2F2;
  }

  #categorias>ul>li.categorias>a{
    display:block;
    padding:10px 14px;
  }

  #categorias>ul>li.categorias.seleccionado{
    background:#681314;
  }

  #categorias>ul>li.categorias.seleccionado>a{
    color:#FFFFFF;
  }

  #categorias>ul>ul{
    display:none;
  }

  #categorias>ul>li.categorias.seleccionado + ul{
    display:flex;
    flex-wrap:wrap;
    flex-basis:100%;
    width:100%;
    box-sizing:border-box;
    gap:6px;
    text-indent:0;
    padding:4px 0 4px 4px;
  }

  #categorias>ul>li.categorias.seleccionado + ul > li.subcategorias{
    float:none;
    clear:none;
    width:auto;
    font-size:13px;
    color:#000000;
    background:#F2F2F2;
    border-radius:16px;
    white-space:nowrap;
  }

  #categorias>ul>li.categorias.seleccionado + ul > li.subcategorias>a{
    display:block;
    padding:8px 12px;
  }

  #login{
    float:left;
    width:100%;
    margin-top:10px;
  }

  #login .clave{
    width:70%;
  }

  #contenedorPrincipal>#contenedorPagina #pie{
    height:auto;
    padding:10px 0;
  }

  #contenedorPrincipal>#contenedorPagina #pie>#columnaPie1,
  #contenedorPrincipal>#contenedorPagina #pie>#columnaPie2{
    width:90%;
    margin-left:5%;
  }

  #mapa{
    height:220px;
  }

  img{
    max-width:100%;
    height:auto;
  }

  .titulo{
    height:auto;
    line-height:1.3;
    padding:10px 15px;
    text-indent:0;
    box-sizing:border-box;
  }

  .imagenEmpresa{
    width:100%;
  }

  .interes{
    width:100%;
    margin-left:0;
    height:auto;
    line-height:1.3;
    padding:12px 10px;
    box-sizing:border-box;
  }

  .formularioInteres.oferta{
    width:100%;
  }

  .formularioInteres>.formulario .campo.input{
    width:100%;
  }

  .formularioInteres>.formulario .campo label{
    width:100%;
  }

  .formularioInteres>.formulario .campo.input input{
    width:100%;
    box-sizing:border-box;
  }

  .formularioInteres>.formulario .campo.textarea textarea{
    width:100%;
    box-sizing:border-box;
  }

  .formularioInteres>.formulario .campo.submit{
    margin-left:0;
  }

  #formularioContacto>.campo>label{
    width:100%;
    text-align:left;
    margin-right:0;
  }

  #formularioContacto>.campo>input,
  #formularioContacto>.campo>textarea{
    width:100%;
    box-sizing:border-box;
  }

  #formularioContacto>.campo.submit>input{
    margin-left:0;
  }
}

/* Tablet (vertical e iPad Pro): diseño en una columna, pero con la marca
   más grande, el menú en una fila y 3 productos por fila en vez de 2. */
@media (min-width: 701px) and (max-width: 1024px) {
  #contenedorPrincipal>#contenedorPagina #cabecera>#logo>#titulo>.marca{
    font-size:48px;
    line-height:58px;
  }

  #contenedorPrincipal>#contenedorPagina #cabecera>#logo>#texto{
    font-size:24px;
  }

  #contenedorPrincipal>#contenedorPagina #menu>ul>li{
    width:25%;
  }

  #contenedorPrincipal>#contenedorPagina #menu>ul>li>a{
    font-size:18px;
  }

  #categorias>ul{
    padding:0 15px;
  }

  /* En escritorio se limitan a 773px; aquí ocupan todo el ancho */
  #detalle>.bienvenida,
  .carrusel,
  .avisoOferta{
    max-width:none;
  }

  .columna240{
    width:31.33% !important;
    max-width:31.33%;
    margin-right:3% !important;
  }

  .columna240.item:nth-child(2n){
    margin-right:3% !important;
  }

  .columna240.item:nth-child(3n){
    margin-right:0 !important;
  }
}

/* Campo trampa de los formularios (ver funciones/correo.php): fuera de la
   pantalla para las personas, visible para los robots que rellenan todo. */
.campoTrampa{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}